/* ============================================================================
   mirage-header.css - Project Mirage integration overrides.

   Written by Tom for the feature/project-mirage build (Header-4 / Footer-4, #global-header /
   #global-footer), adapted to the master-hhc build:

     - #global-header -> #mirage-header   (Header_2, Header.MirageEnabled)
     - #global-footer -> #mirage-footer   (Footer_2 + "Mirage Footer" content def, Footer.MirageEnabled)
     - #mirage-hero added to the typography / h2 / p fixes and the <a class="button"> bridge
       (T48 + "Mirage Home Hero" content def)
     - removed the sections for markup this build does not have: CMS logo image (we use the
       breakup's inline SVG), top-level link items, drawer scroll lock, parked utility content,
       CMS footer content, and the #global-footer margin reset.

   Loaded right after mirage.min.css by Header_2 / Footer_2 (Mirage mode only).

   Do NOT put design rules here. If the header or footer looks wrong, the fix belongs in
   mirage.min.css - otherwise the next drop of that file silently reverts it. Keep
   mirage.min.css VERBATIM so a re-drop is a clean file replace.
   ============================================================================ */


/* ============================================================================
   SPECIFICITY BRIDGE

   The header and footer render inside <div id="homepage" class="acutecare skin">, and the
   legacy sheets carry DESCENDANT selectors that out-specify the breakup's single-class
   utilities:

       .skin h2        (0,1,1)  beats  .font-size--l  (0,1,0)
       .skin a.button  (0,1,2)  beats  .button        (0,1,0)   -> square outlined CTA
       .skin hr        (0,1,1)  beats  hr             (0,0,1)
       .skin p         (0,1,1)  beats  *              (0,0,0)
       #homepage a     (1,0,1)  beats  a              (0,0,1)
       global.min.css  .cell / .grid-y > .cell / strong / small / input

   Each rule below re-states ONLY the declarations that are clobbered, scoped to the Mirage
   ids. The id buys a full specificity step (1,0,0), and the scoping means nothing else on the
   page is touched. mirage.min.css's own #mirage-* rules are more specific than these (an id
   plus two or more classes), so they still win wherever the design sets something itself.

   THIS DUPLICATES VALUES FROM mirage.min.css. Treat it as temporary - it stops being
   necessary once mirage.min.css scopes these utilities under the Mirage ids itself.
   After any re-drop, re-check these against the prototype before shipping.

   2026-10-06: Jennifer now scopes her general styles under `.mirage` (the class on every Mirage
   root). The rules that made redundant were removed - root font, `a` text-decoration and weight,
   `hr`, the search field and button, and the hero chip layout - after a per-rule test: header,
   footer and hero styles identical with and without them (rest, hover and focus, 1440 and 402).

   2026-10-07: font size and line height are Jennifer's (her ask). Nothing in this file sets them;
   where the legacy sheets still change them, the fix goes in mirage.min.css.
   ============================================================================ */

/* -- typography ------------------------------------------------------------
   The breakup sets its typeface ONCE, on `.mirage`, and lets everything inherit. Here the legacy
   sheets re-set font-family directly on a, h1, h2, h3, strong, small, input and label, so force
   inheritance back on.

   Font Awesome is excluded so icon glyphs don't turn into their literal names. */
#mirage-header *:not(.fa):not(.fab):not(.fas):not(.far):not([class*="fa-"]),
#mirage-footer *:not(.fa):not(.fab):not(.fas):not(.far):not([class*="fa-"]),
#mirage-hero *:not(.fa):not(.fab):not(.fas):not(.far):not([class*="fa-"]) {
    font-family: inherit;
}

/* The breakup leaves text colour and line-height to the browser defaults (black, normal), but
   global.min.css sets `body { color: #53565a; line-height: 1.5 }`. Inherited text turned grey (nav
   labels, dropdown headings, Find Care descriptions, footer tagline, social label, copyright, the
   hero's heading, toggles and panel text). Links set their own colour. The inherited 1.5
   line-height is Jennifer's to handle. */
#mirage-header,
#mirage-footer,
#mirage-hero {
    color: #000;
}

/* `.skin h2` and `.skin h3` set font-size/weight/line-height, and global.min.css adds
   margins. Weights mirror .font-weight--r / --b. Size and line-height are Jennifer's, including
   redesign-rows.css `.skin h2 { line-height: 1.3 !important }`. */
#mirage-header h2,
#mirage-footer h2,
#mirage-hero h2 {
    font-weight: 400;
    margin: 0;
}

/* global.min.css gives h1 16px top and bottom margins; the breakup's `*` reset has none. */
#mirage-hero h1 {
    margin: 0;
}

#mirage-header h3,
#mirage-footer h3 {
    font-weight: 600;
    margin: 0;
}

/* NOTE: do NOT add a `strong { font-weight: 600 }` rule here - the prototype renders <strong>
   at the UA default 700 too. */

/* The copyright line. global.min.css also shrinks `small` to 75% (a font size: Jennifer's). */
#mirage-header small,
#mirage-footer small {
    display: inline;
}

/* -- paragraphs ------------------------------------------------------------
   `.skin p:not(.HwContent *)` (0,2,1) forces a 16px size and 20px margins. Reset the margins here:
   the hero keeps its 1rem margins, the header and footer have none. The size and line-height are
   Jennifer's. */
#mirage-header p,
#mirage-footer p,
#mirage-hero p {
    margin: 0;
    padding: 0;
    color: inherit;
}

#mirage-hero p {
    margin: 1rem 0;
}

/* -- links -----------------------------------------------------------------
   Don't reset background-color here: global.min.css only sets it to transparent, and an id-level
   reset blocked the breakup's tinted hover background on the megamenu's .link-with-arrow links. */

/* `#homepage a:hover` underlines links on hover, on top of the breakup's own border-bottom line,
   so hovered footer links showed two lines. `html` lifts these above that rule (1,1,1). */
html #mirage-header a:not(.button):hover,
html #mirage-header a:not(.button):focus,
html #mirage-footer a:not(.button):hover,
html #mirage-footer a:not(.button):focus {
    text-decoration: none;
}

/* Buttons are the exception: the breakup underlines them on hover and focus (`.button:hover`) and
   keeps .button-solid's text colour (MyChart, Subscribe). The legacy sheets cancel both with
   !important - default.css `a.button:hover { text-decoration: none !important }` and redesign-rows.css
   `.skin a.button:hover { color: #fff !important }` - so these need !important too. */
html #mirage-header a.button:hover,
html #mirage-header a.button:focus,
html #mirage-header a.button:active,
html #mirage-hero a.button:hover,
html #mirage-hero a.button:focus,
html #mirage-hero a.button:active,
html #mirage-footer a.button:hover,
html #mirage-footer a.button:focus,
html #mirage-footer a.button:active {
    text-decoration: underline 1px !important;
}

html #mirage-header a.button-solid:hover,
html #mirage-hero a.button-solid:hover,
html #mirage-footer a.button-solid:hover {
    color: #f7f7f4 !important;
}

/* -- buttons ---------------------------------------------------------------
   `.skin a.button` (redesign-rows.css) and `a.button` (default.css) square off the MyChart CTA,
   give it a teal outline and drop its gradient. Only <a> is affected; the breakup's toggles and
   the hero's submit are <span class="button">, which the `a.button` selectors do not match. The
   hero's one <a class="button"> is the Ask a Question "Use button layout" link. */
#mirage-header a.button,
#mirage-hero a.button,
#mirage-footer a.button {
    border: 0;
    border-radius: 360px;
    background-color: transparent;
    display: flex;
    vertical-align: baseline;
    margin: 0;
    padding: max(.75rem, min(.333vw + .683rem, 1rem)) max(1rem, min(.667vw + .867rem, 1.5rem));
    /* Legacy `a.button` rules also set a font-size, weight and `line-height: 1`. The weight is reset
       here; the size and line-height are Jennifer's. */
    font-weight: 400;
}

#mirage-header a.button-with-icon,
#mirage-header a.button-with-icon--reverse,
#mirage-hero a.button-with-icon,
#mirage-hero a.button-with-icon--reverse,
#mirage-footer a.button-with-icon,
#mirage-footer a.button-with-icon--reverse {
    padding: max(.75rem, min(.333vw + .683rem, 1rem)) max(.75rem, min(.333vw + .683rem, 1rem))
             max(.75rem, min(.333vw + .683rem, 1rem)) max(1rem, min(.667vw + .867rem, 1.5rem));
}

#mirage-header a.button-solid,
#mirage-hero a.button-solid,
#mirage-footer a.button-solid {
    color: #f7f7f4;
}

/* These gradients repeat Jennifer's .mirage .button-solid--* values (her radial version, PR #30, 2026-10-09).
   Update them whenever hers change. */
#mirage-header a.button-solid--green,
#mirage-hero a.button-solid--green,
#mirage-footer a.button-solid--green {
    background-image:
        radial-gradient(ellipse 100% 100% at 0% 20%, rgb(from var(--grad-teal) r g b / 1) 0%, rgb(from var(--grad-teal) r g b / 0) 60%),
        radial-gradient(ellipse at 80% 20%, rgb(from var(--grad-moss) r g b / 1) 10%, rgb(from var(--grad-teal) r g b / 1) 80%);
}

#mirage-header a.button-solid--orange,
#mirage-hero a.button-solid--orange,
#mirage-footer a.button-solid--orange {
    background-image:
        radial-gradient(ellipse 100% 100% at 0% 20%, rgb(from var(--grad-plum) r g b / 1) 0%, rgb(from var(--grad-plum) r g b / 0) 60%),
        radial-gradient(ellipse at 80% 20%, rgb(from var(--grad-terra) r g b / 1) 10%, rgb(from var(--grad-plum) r g b / 1) 80%);
}

#mirage-header a.button-solid--blue,
#mirage-hero a.button-solid--blue,
#mirage-footer a.button-solid--blue {
    background-image:
        radial-gradient(ellipse 100% 100% at 0% 20%, rgb(from var(--grad-plum) r g b / 1) 0%, rgb(from var(--grad-plum) r g b / 0) 60%),
        radial-gradient(ellipse at 80% 20%, rgb(from var(--grad-teal) r g b / 1) 10%, rgb(from var(--grad-plum) r g b / 1) 80%);
}

/* -- Foundation grid -------------------------------------------------------
   global.min.css owns `.cell` and `.grid-y > .cell`, and the breakup reuses both class names
   for the footer columns. Let the footer's own grid size them. */
#mirage-footer .cell {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: auto;
}

/* -- search field ----------------------------------------------------------
   global.min.css gives bare `input` margins; the breakup has none. (Its colour, line-height and the
   Search button's `.button` look now come from mirage.min.css's `.mirage` rules.) */
#mirage-header input {
    margin: 0;
}

/* -- hero search box -------------------------------------------------------
   global.min.css styles bare `textarea` (grey, weight 300, transparent). The breakup leaves the
   browser defaults. */
#mirage-hero textarea {
    color: inherit;
    font-weight: 400;
    background-color: #fff;
}

/* redesign-rows.css `.skin .button { margin-right: 6px }` moved the search boxes' submit arrows 6px left. */
#mirage-hero .input-search-submit {
    margin-right: 0;
}

/* -- logo home link --------------------------------------------------------
   The breakup's logo is a bare SVG; Header_2 wraps it in <a href="/"> so it goes home like the
   legacy logo. Keep the breakup's `a` hover underline (border-bottom) off it. */
#mirage-header .header-logo a {
    display: block;
    border-bottom: 0;
}

/* -- under the pinned header -----------------------------------------------
   Jennifer's CSS pins the header. Header_2's script keeps --mirage-header-height equal to its real height
   (it changes with screen width) and sets .mirage-header-pinned only while it is pinned, so these do
   nothing otherwise.
   - Institute and microsite templates have a section bar, #microsite-sticky. The old site pins it 130px
     down, under the old 130px header (floating-header.css, and global.min.css `#microsite-sticky.fixed-header
     { top: 130px !important }`, added by the template's script when you scroll). Sit it under this header.
   - Jump links into Mirage sections (Locations pills, /locations-partners#same-day-care) and the skip link's
     target (#global-main) land below the header instead of under it. Legacy anchors keep their own
     scroll-margin-top. */
.mirage-header-pinned #microsite-sticky,
.mirage-header-pinned #microsite-sticky.fixed-header {
    top: var(--mirage-header-height) !important;
}

.mirage-header-pinned .mirage-locations-group[id],
.mirage-header-pinned #global-main {
    scroll-margin-top: var(--mirage-header-height);
}