/*
 * site-overrides.css — loaded AFTER atf.css / plugins.css in the root layout.
 *
 * Order matters here, which is why this is a plain stylesheet rather than part of
 * src/app/globals.css: Next emits its CSS chunk BEFORE the theme's <link> tags, so an
 * override living there loses every specificity tie with atf.css. Linking this last
 * makes the cascade do the work instead of a wall of !important.
 */

/* ===========================================================================
 * CSS-only floating labels
 *
 * On the C5 site the ONLY thing that added `.animate_lbl` was
 * plugins/spam-protection-2023.js (16 references), which step 2 deliberately removed
 * because it also double-submitted every form into the dead _spam_protect.php.
 * Dropping it without this replacement is a silent, sitewide, purely visual
 * regression: every label sits on top of the value the user types. No console error,
 * no failed build.
 *
 * Values below are copied from the theme's own `.anim_lbl.animate_lbl` rules in
 * atf.css (lines ~6790 / ~6909) so the floated position is identical to live.
 *
 * `:has()` is required, not `~`: this theme renders <label> BEFORE the control, so a
 * sibling combinator cannot reach it. And `:not(:placeholder-shown)` only works when
 * the control HAS a placeholder — every input/textarea therefore ships
 * `placeholder=" "` (see components/forms/Field.tsx).
 *
 * <select> is intentionally excluded: in this theme a select's wrapper has no <label>
 * at all (the disabled first <option> is the label), so selects never floated.
 * =========================================================================== */
.anim_lbl:has(input:focus) label,
.anim_lbl:has(input:not([type="hidden"]):not(:placeholder-shown)) label,
.anim_lbl:has(textarea:focus) label,
.anim_lbl:has(textarea:not(:placeholder-shown)) label {
  transform: translateY(-200%) scale(0.75);
  background-color: #fff;
}

.anim_lbl:has(textarea:focus) label.lbl_txtara,
.anim_lbl:has(textarea:not(:placeholder-shown)) label.lbl_txtara {
  transform: translateY(-22px) scale(0.75);
}

/* Context override — matches `.form .anim_lbl.animate_lbl label` in atf.css. */
.form .anim_lbl:has(input:focus) label,
.form .anim_lbl:has(input:not([type="hidden"]):not(:placeholder-shown)) label,
.form .anim_lbl:has(textarea:focus) label,
.form .anim_lbl:has(textarea:not(:placeholder-shown)) label {
  background-color: #fff;
}

/* Context override — matches `.form-general-v2 .anim_lbl.animate_lbl label`. */
.form-general-v2 .anim_lbl:has(input:focus) label,
.form-general-v2 .anim_lbl:has(input:not([type="hidden"]):not(:placeholder-shown)) label,
.form-general-v2 .anim_lbl:has(textarea:focus) label,
.form-general-v2 .anim_lbl:has(textarea:not(:placeholder-shown)) label {
  background: #0d2e1b;
}

/* ---------------------------------------------------------------------------
 * Native <input type="date"> (replaces the jQuery datepicker dropped with the
 * form jQuery). atf.css applies `appearance: none` to form controls, which hides
 * the browser's calendar UI entirely — the theme rule is equal specificity and
 * loads first, so !important is load-bearing here.
 * ------------------------------------------------------------------------- */
input[type="date"].form-control,
input[type="date"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background: #fff;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Photo upload (/free-virtual-consultation/)
 *
 * atf.css styles `.file_names` as a 58px bordered form-control and positions
 * `.pick_file` absolutely at top:50%/right:30px — i.e. it expects the picker to sit
 * INSIDE a positioned box. These rules supply the positioning context and the few
 * bits the theme never had (it shipped plupload, whose UI came from the plugin).
 * ------------------------------------------------------------------------- */
.tio-upload {
  position: relative;
}

.tio-upload__box {
  position: relative;
  display: flex;
  align-items: center;
  /* Keep clear of the absolutely-positioned "Choose File" control. */
  padding-right: 150px !important;
}

.tio-upload__summary {
  color: #0d2e1b;
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The theme's .pick_file is absolute; anchor it to the box above. */
.tio-upload__box .pick_file {
  right: 16px;
  white-space: nowrap;
  color: #309a5c;
  font-weight: 500;
}

.tio-upload__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.tio-upload__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding: 2px 0;
}

.tio-upload__list a {
  color: #0d2e1b;
  text-decoration: underline;
  word-break: break-all;
}

.tio-upload__tick {
  color: #309a5c;
  font-weight: 700;
}

.tio-upload__remove {
  background: none;
  border: 0;
  cursor: pointer;
  color: #8a8a8a;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.tio-upload__remove:hover {
  color: #c0392b;
}

.tio-upload__hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #6b7a70;
}

.tio-upload__error {
  margin: 8px 0 0;
  color: #c0392b;
  font-size: 14px;
}

/*
 * The upload block deliberately does NOT carry .anim_lbl — its label is a plain static
 * heading, not a floating one. (It previously did, and because hidden inputs have no
 * placeholder, `:has(input:not(:placeholder-shown))` matched and floated the label
 * straight up into the field above it. The selectors above now exclude [type=hidden]
 * so no wrapper can be fooled that way again.)
 */
.tio-upload > label {
  position: static;
  transform: none;
  pointer-events: auto;
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 16px;
  color: #0d2e1b;
}