/* ==================================================================
   Atlas Sun Systems — Elementor form chrome

   Scoped to the Free Estimate card. Everything the Form widget can do
   is still done with its own controls in Site Settings; this covers the
   two things it has no control for — a label that sits inside its field,
   and a select that can carry an icon per option.
   ================================================================== */

/* 1 · Labels that sit inside the field ---------------------------

   Measured off the source rather than eyeballed — index.html's #phone read
   in Chrome with transitions frozen:

     state           top    size          tracking  colour
     rest, empty     14px   12px/16px     .3px      #F6F9FC @ 75%
     focus, empty     8px   10px/13.33px  .25px     Sun
     focus, filled    8px   10px/13.33px  .25px     #F6F9FC
     blur,  filled    8px   10px/13.33px  .25px     #F6F9FC

   Two details worth stating because neither is guessable: the accent marks
   "type here", not "field is active" — the label is Sun only while the field
   is focused *and* still empty, and turns white the moment there is a value.
   And the input's border never changes colour on focus; a 2px Sun ring
   appears flush outside it (Tailwind `ring-2`). Timing is `all 150ms
   cubic-bezier(.4,0,.2,1)`, so colour and tracking travel with the position.

   Specificity note: Site Settings styles this label at (0,4,1) via
   `.elementor-649 .elementor-element.elementor-element-fe-form
   .elementor-field-group > label`, which outranks a plain
   `.atlas-fe-form .atlas-field-float > .elementor-field-label` (0,3,0). The old
   rule could therefore move the label but never resize or recolour it at
   rest — which is why it sat at the kit's 12px/60% instead of the source's
   12px/75%. The chain below is pitched to (0,5,1) so every property lands. */

.atlas-fe-form .atlas-field-float { position: relative; }

.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group.atlas-field-float > label.elementor-field-label {
    position: absolute;
    /* Aligned to the value's own text origin, not to the field group.
       An absolutely positioned label resolves `left` against the group's
       padding box, but the input's glyphs start three offsets further in:

           8px   the field group's own padding-left (post-649 emits
                 `calc(16px/2)` from the form's 16px column gap)
         + 1px   the input's border
         + 16px  the input's padding-left
         = 25px

       At a flat 16px the label sat 9px to the LEFT of the value it labels —
       the card showed three different left edges (outside labels +8,
       float labels +16, values +25). This puts label and value on one edge,
       17px inside the control, which is what the source does. If the form's
       column gap ever changes, the 8px term is the one to update. */
    left: calc(8px + 1px + 16px);
    /* Pinned, not centred with `top:50% / translateY(-50%)`. Site Settings
       adds `padding-bottom:10px` to this label at (0,5,2) — above anything
       reasonable here — which inflates the box that 50% centres and lifted
       the resting label to 9px instead of the source's 14px. Positioning by
       the measured number sidesteps the whole argument, and (44-16)/2 = 14
       is what centring a 16px line in a 44px control gives anyway. */
    top: 14px;
    transform: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: rgba(246, 249, 252, .75);
    transition: top .15s cubic-bezier(.4, 0, .2, 1),
                transform .15s cubic-bezier(.4, 0, .2, 1),
                font-size .15s cubic-bezier(.4, 0, .2, 1),
                line-height .15s cubic-bezier(.4, 0, .2, 1),
                letter-spacing .15s cubic-bezier(.4, 0, .2, 1),
                color .15s cubic-bezier(.4, 0, .2, 1);
}

/* Room for the label to rise into — the one deliberate departure from the
   source, which gives the input no top padding at all and lets the floated
   label land on the value.

   The number is not free-chosen. Chrome centres an input's inner editor in
   the content box, so the value's glyph box (14px Barlow ≈ 17px tall) sits at
   `1 + pad + (42 - pad)/2 ± 8.5`. The floated label occupies 8 → 21.33px, so
   the value has to start at 22px or lower, which needs pad = 17px:

       1px  border
       7px  gap
     8–21.3 label      (10px / 13.33 line)
      22–39 value      (14px, glyph box)
       4px  gap
       1px  border

   At the old 14px the value began at 20.5px and ran *into* the label box,
   with barely 4px between the two sets of caps — which is what read as
   cramped even though nothing literally overlapped on screen.

   Specificity matters here as much as the value: the kit's
   `.elementor-kit-405 input:not([type="button"]):not([type="submit"])`
   is (0,3,1) and sets `padding: 11px 16px`, exactly tying the old
   `.atlas-fe-form .atlas-field-float > input.elementor-field-textual`. It was
   being won on load order alone — atlas-forms.css happens to enqueue after
   the kit — so any change to enqueue order would have silently reverted the
   padding. Pitched to (0,5,1), it no longer depends on that. */
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group.atlas-field-float > input.elementor-field-textual {
    height: 44px;
    padding-top: 17px;
    padding-bottom: 0;
}

/* Floated — focused, or holding a value. */
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group.atlas-field-float:has(> input:focus) > label.elementor-field-label,
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group.atlas-field-float:has(> input:not(:placeholder-shown)) > label.elementor-field-label {
    top: 8px;
    transform: none;
    font-size: 10px;
    line-height: 13.3333px;
    letter-spacing: .25px;
    color: #F6F9FC;
}

/* Sun only while focused and still empty. */
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group.atlas-field-float:has(> input:focus:placeholder-shown) > label.elementor-field-label {
    color: var(--Sun, #F9B210);
}

/* The focus mark. Site Settings turns the border Sun and adds a 35%-alpha
   halo; the source leaves the border alone and draws a solid 2px ring flush
   to the border box. Kit rule is (0,4,1), so this is pitched to (0,5,1). */
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group input.elementor-field-textual:focus,
.atlas-fe-form .elementor-form-fields-wrapper .elementor-field-group textarea.elementor-field-textual:focus {
    border-color: rgba(246, 249, 252, .2);
    box-shadow: 0 0 0 2px var(--Sun, #F9B210);
    outline: none;
}


/* 2 · The service picker ------------------------------------------
   The native select still holds the value and still submits; it is
   simply not the thing anyone looks at.

   Scoped to both dark form cards — the Free Estimate block (`.atlas-fe-form`) and
   the blog sidebar's quote card (`.atlas-bs-quote`) — because the source draws
   the same control in both, down to the 44px box, the 12px radius and the
   hairline. `:is()` takes the specificity of its most specific argument, and
   both are one class, so every rule below keeps the weight it was written with.

   What the two do NOT share is the icon per option: see ICON_CARDS in
   atlas-forms.js, and the rule at the end of this section.
   ------------------------------------------------------------------ */

:is(.atlas-fe-form, .atlas-bs-quote) select.atlas-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Elementor draws its own caret for the native select. */
:is(.atlas-fe-form, .atlas-bs-quote) .elementor-field-type-select .select-caret-down-wrapper { display: none; }

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select { position: relative; width: 100%; }

/* The trigger is a <button>, so Site Settings' bare-button rules reach it:
   `.elementor-kit-405 button` sets a 9999px radius and `…button:hover, …:focus`
   restates it at (0,2,1) — above what a plain `:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-trigger`
   (0,2,0) can answer. Hovering therefore turned the control into a pill. The box
   is pinned here with `button.atlas-select-trigger` (0,3,1) and every state it
   can be in is listed, so the kit can never reach past it again.

   The source gives this control no hover state at all — same border, same radius,
   same fill from rest through hover (index.html: `rounded-xl border
   border-navy-foreground/20 bg-navy-foreground/10`, no `hover:` class). Only the
   open list and a keyboard focus ring mark it. */

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select button.atlas-select-trigger,
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select button.atlas-select-trigger:hover,
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select button.atlas-select-trigger:focus,
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select button.atlas-select-trigger:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--OnDarkHair, rgba(246, 249, 252, .2));
    border-radius: var(--RadiusMd, 12px);
    background: rgba(255, 255, 255, .08);
    font-family: var(--BodyFont, inherit);
    font-size: var(--TextSm, .875rem);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--NavyForeground, #F6F9FC);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* Open is the one state that does change, and only because the list below it
   needs to read as attached to the control.

   It is marked the way a focused input is (see 1, the focus mark): the hairline
   border is left alone and a 2px Sun ring is drawn flush outside it. Recolouring
   the 1px border instead put a thinner, harder yellow on this control than on
   the field directly above it, so the two active states did not read as the same
   system. The 6px gap to the list still clears the ring. */
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select.is-open button.atlas-select-trigger {
    border-color: var(--OnDarkHair, rgba(246, 249, 252, .2));
    box-shadow: 0 0 0 2px var(--Sun, #F9B210);
    background: rgba(255, 255, 255, .12);
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The icon is the one piece of colour in the closed control, the way
   the source marks the chosen service. */
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-value .atlas-i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--Sun, #F9B210);
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--OnDarkMuted, rgba(246, 249, 252, .6));
    transition: transform .2s ease;
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select.is-open .atlas-select-chevron { transform: rotate(180deg); }

/* 600 puts the open list above the page and below the site's chrome. It has to
   clear the footer's CTA band, whose container carries `z-index: 520`, or the
   last option is painted over by the band the moment the card sits near the
   bottom of a page — which the blog sidebar's does. It stays under the sticky
   header (1000) and the reading-progress bar (1050), which should cover it. */
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-list {
    position: absolute;
    z-index: 600;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--OnDarkHair, rgba(246, 249, 252, .2));
    border-radius: var(--RadiusCard, 16px);
    background: var(--NavyRaised, #0F2942);
    box-shadow: 0 24px 48px -20px rgba(3, 10, 20, .7);
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-list[hidden] { display: none; }

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--TextSm, .875rem);
    color: var(--OnDarkBody, rgba(246, 249, 252, .7));
    cursor: pointer;
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option .atlas-i:first-child {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--OnDarkMuted, rgba(246, 249, 252, .6));
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option-label { flex: 1 1 auto; }

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--Sun, #F9B210);
    opacity: 0;
}

/* One highlight for pointer and keyboard, so the list never shows two. */
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option.is-active {
    background: rgba(255, 255, 255, .08);
    color: var(--NavyForeground, #F6F9FC);
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option[aria-selected="true"] {
    color: var(--NavyForeground, #F6F9FC);
}

:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option[aria-selected="true"] .atlas-i:first-child { color: var(--Sun, #F9B210); }
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select-option[aria-selected="true"] .atlas-select-check { opacity: 1; }

/* The source's focus mark is Tailwind's `ring-2` — a 2px shadow flush to the
   border box, following its radius — not an offset outline. */
:is(.atlas-fe-form, .atlas-bs-quote) .atlas-select button.atlas-select-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--Sun, #F9B210);
}

/* The textarea keeps its label above and carries the prompt inside, set the
   same way as the labels that float — so the two read as one system. */

/* The sidebar's list is plain — its first two answers are "General Inquiry" and
   "Rough Estimate", which no icon stands for, so the source gives that list no
   icon column at all. The JS omits the elements; this keeps the row metrics
   right for a card that never had them. */
.atlas-bs-quote .atlas-select-value,
.atlas-bs-quote .atlas-select-option { gap: 10px; }

.atlas-fe-form .elementor-field-type-textarea textarea::placeholder {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--OnDarkMuted, rgba(246, 249, 252, .6));
    opacity: 1;
}

.atlas-fe-form .elementor-field-type-textarea textarea.elementor-field-textual {
    /* `px-4 pt-5` with text-sm's own 20px leading and no bottom padding, so the
       box is rows x 20 + 20 + 2. One form now serves two cards and the source
       sizes them differently — rows="4" in the Free Estimate block, rows="3" in
       the area hero — and `rows` cannot vary per placement on a shared widget,
       so the height is stated per card. This is the 4-row default. */
    height: 102px;
    line-height: 20px;
    padding: 20px 16px 0;
    resize: none;
}

/* The source's submit is a 44px bar. The Form widget exposes the button's
   colour, radius and type but not its box, so the height lives here. */
.atlas-fe-form button[type="submit"].elementor-button {
    height: 44px;
    min-height: 44px;
    padding: 0 24px;
    line-height: 1;
}

/* 3 · The picker's other shape — every option on screen ------------

   Same field, same options, same submitted value as the listbox above; the
   only difference is that the contact page wants them all visible. Which
   shape a card gets is decided at the PLACEMENT (`fe-picker-chips` on the
   container that holds the template), never in the template — that is
   what lets one form template serve every page.

   Metrics are the source's own (`contact-us.html`, the `service-chip-*`
   labels): 10px between chips, a 12px radius, 10px/14px of padding, 14px
   text, a 16px icon 8px in front of it.

   Specificity, again: a chip is a real <button>, so Site Settings' bare-button
   rules reach it — `.elementor-kit-405 button` (0,1,1) AND
   `…button:hover, …button:focus` (0,2,1), all three carrying
   `border-radius: 9999px`. A rule that answers only at rest looks right until
   the pointer touches it and then turns the chip into a pill. Pinned at
   (0,3,1) with every state listed, the same fix the select trigger needed. */

.atlas-fe-form .atlas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.atlas-fe-form .atlas-chips button.atlas-chip,
.atlas-fe-form .atlas-chips button.atlas-chip:hover,
.atlas-fe-form .atlas-chips button.atlas-chip:focus,
.atlas-fe-form .atlas-chips button.atlas-chip:active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 0;
    padding: 10px 14px;
    border: 1px solid var(--OnDarkHair, rgba(246, 249, 252, .2));
    border-radius: var(--RadiusMd, 12px);
    background: rgba(255, 255, 255, .08);
    font-family: var(--BodyFont, inherit);
    font-size: var(--TextSm, .875rem);
    font-weight: 500;
    /* 20px, not a ratio: `text-sm` in the source carries Tailwind's 20px
       leading, which is what makes the chip 42px tall rather than 41. */
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: rgba(246, 249, 252, .8);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Unlike the select trigger, this control does get a hover — the source gives
   the chip `hover:border-navy-foreground/45` and nothing else. */
.atlas-fe-form .atlas-chips button.atlas-chip:hover {
    border-color: rgba(246, 249, 252, .45);
}

.atlas-fe-form .atlas-chips button.atlas-chip[aria-checked="true"],
.atlas-fe-form .atlas-chips button.atlas-chip[aria-checked="true"]:hover {
    border-color: var(--Sun, #FAB210);
    background: rgba(250, 178, 16, .15);
    color: var(--NavyForeground, #F6F9FC);
}

/* Sun in every state — in the source the icon span carries `text-accent`
   whether or not its chip is the chosen one. It is the colour that makes the
   row read as a set of services rather than a set of buttons. */
.atlas-fe-form .atlas-chips button.atlas-chip .atlas-i {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--Sun, #FAB210);
}

/* Tailwind's `ring-2` again: a 2px shadow flush to the border box, following
   its radius — not an offset outline. */
.atlas-fe-form .atlas-chips button.atlas-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--Sun, #FAB210);
}


/* ------------------------------------------------------------------
   The card's own box, restated where it is guaranteed to arrive
   ------------------------------------------------------------------
   The form is its own template (#859) so both estimate cards share ONE form
   definition. That puts it two templates deep on the area pages — the hero
   (#637) holds the card (#843) which holds the form — and Elementor enqueues
   only one level of nested-template CSS, so the atomic wrapper's own
   `padding: 0` never arrives and `.e-flexbox-base`'s 10px default wins. It
   showed as every field inset 10px and 20px narrower than the source.
   This stylesheet is unconditional, so the rule belongs here. */
body .elementor .atlas-fe-form .ef-wrap-s { padding: 0; }

/* A textarea is inline-block, so in the source its wrapper is 6px taller than
   the box itself — the line-box descender under it. Elementor renders the
   field as a block and loses that gap, which pulled the submit 6px up the
   card. The 6 is the descender, not a spacing choice. */
body .elementor .atlas-fe-form .elementor-field-type-textarea { padding-bottom: 6px; }

/* The area hero's card is the rows="3" one. */
body .elementor .he-card-s .elementor-field-type-textarea textarea.elementor-field-textual {
    height: 82px;
}

/* The labels that STAY above: the service picker and the message box.
   The source draws them as a 16px line with a 10px gap under it. Doing that
   with the widget's own `label_spacing` / label line-height controls is what
   you reach for first, and it is wrong: those emit
   `.elementor-859 .elementor-element-ef-form .elementor-field-group > label`,
   which lands on EVERY label including the three floating ones and, being
   Elementor's own per-element rule, beat the float chain — the labels silently
   stopped floating and sat on top of the typed value. So the two fields that
   want the treatment ask for it by name, and the floating three never see it. */
body .elementor .atlas-fe-form .elementor-field-type-select > label.elementor-field-label,
body .elementor .atlas-fe-form .elementor-field-type-textarea > label.elementor-field-label {
    line-height: 16px;
    padding-bottom: 10px;
}