/**
 * Nearly Native — Header & Footer Foundation
 *
 * CSS for sticky positioning, transparent → solid on scroll, mobile nav
 * z-index, CTA hide, and pattern-specific behaviors. All header patterns
 * share this foundation; their visual variation is driven by
 * .nn-header--{pattern} hooks.
 *
 * Always loaded by parent-theme/functions.php — no-op if no elements
 * use these classes.
 */

/* ─── Foundation: Sticky/Fixed wrapper ───────────────────────── */
/* Sticky/fixed must live on the WRAPPER element WordPress renders for the
   template part (<header class="wp-block-template-part">), not the inner
   .nn-site-header div. Targeting the wrapper via :has() ensures the
   announcement bar + header stick together as a unit. */

.wp-block-template-part:has(.nn-site-header) {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Transparent mode: fixed so hero can flow under the header for overlay */
.wp-block-template-part:has(.nn-site-header.nn-header--transparent) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Account for the WP admin bar when in fixed mode */
body.admin-bar .wp-block-template-part:has(.nn-site-header.nn-header--transparent) {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .wp-block-template-part:has(.nn-site-header.nn-header--transparent) {
        top: 46px;
    }
}

/* ─── Root section-flush (scope 3 of the block-gap policy) ───────────
   WordPress places its global block-gap (~24px) between the top-level
   template parts (header / post-content / footer / mobile-cta). Wherever
   two of them differ in background color, that gap shows a body-colored
   strip (e.g. above a dark footer on a light body). Zero it so the parts
   sit flush.

   Lives HERE (an enqueued stylesheet), NOT in theme.json's `css` field:
   that field is in the global-styles layer the importer + Site Editor can
   overwrite, so a brand override could silently clobber it. An enqueued
   stylesheet is a separate origin that can't be merged over. Specificity
   (0,1,0) beats WP's own :where() rule (0,0,0) — no !important needed.
   Full rationale: docs/block-gap-policy.md. */
.wp-site-blocks > * {
    margin-block-start: 0;
}

/* Floating & glass are always-overlay treatments: the pill / frosted bar is
   meant to sit OVER the hero, not in a body-colour strip above it. Fix the
   template-part wrapper to the viewport top so the hero fills behind it — the
   root section-flush rule above pulls the first content section to y=0. Unlike .nn-header--transparent
   we deliberately do NOT recolor text or swap in a scrolled-solid background —
   each pattern keeps its own ::before frosted treatment and scroll behaviour.
   Placed after the sticky rule above so it wins for these two patterns. */
.wp-block-template-part:has(.nn-header--floating),
.wp-block-template-part:has(.nn-header--glass) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body.admin-bar .wp-block-template-part:has(.nn-header--floating),
body.admin-bar .wp-block-template-part:has(.nn-header--glass) {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .wp-block-template-part:has(.nn-header--floating),
    body.admin-bar .wp-block-template-part:has(.nn-header--glass) {
        top: 46px;
    }
}

/* Inner div handles background + color transitions. Default to an opaque
   background so sticky headers don't let scrolled content show through.
   Variants that want their own treatment (transparent/floating/glass/duotone)
   override below with !important or more-specific selectors. */
.nn-site-header {
    background: var(--wp--preset--color--background, #ffffff);
    color: var(--wp--preset--color--contrast, #111111);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Subtle elevation cue when any standard (non-special) header is scrolled.
   The transparent/floating/glass variants define their own scrolled treatment. */
.nn-site-header.is-scrolled:not(.nn-header--transparent):not(.nn-header--floating):not(.nn-header--glass):not(.nn-header--duotone) {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ─── Site logo — metadata-less fallback only ─────────────────────────
   Logo size is a BLOCK ATTRIBUTE, not CSS: nnwp_brand_block() computes the
   wp:site-logo `width` a designer would set (target height × the logo's real
   aspect ratio) and core's render scales it ratio-true — the same mechanism
   as TT5/TT24, with no theme CSS in the way, so the Site Editor's logo
   resize control works exactly as on a stock theme (docs/brand-lockup.md).
   These rules fire ONLY when WordPress itself emitted no dimensions (an SVG
   with no size metadata — the one case core's own sizing bails on). Any logo
   the native control can affect carries a width attr, so they cannot collide. */
.nn-site-header .wp-block-site-logo img:not([width]) {
    height: 40px;
    width: auto;
}
.nn-header--floating-pill .wp-block-site-logo img:not([width]) {
    height: 28px;
    width: auto;
}
.nn-site-footer .wp-block-site-logo img:not([width]) {
    height: 44px;
    width: auto;
}

/* Default convention: transparent over a DARK hero, so light text */
.nn-site-header.nn-header--transparent:not(.is-scrolled) {
    background: transparent;
    color: #ffffff;
}

/* Opt-in: transparent over a LIGHT hero. Set via header config:
   'transparent_text' => 'dark'. Pattern PHP appends the modifier class. */
.nn-site-header.nn-header--transparent.nn-header--transparent-dark:not(.is-scrolled) {
    color: var(--wp--preset--color--contrast, #111111);
}

.nn-site-header.nn-header--transparent.is-scrolled {
    background: var(--wp--preset--color--background, #ffffff);
    color: var(--wp--preset--color--contrast, #111111);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Site title + nav links inherit transparent-mode color */
.nn-site-header.nn-header--transparent .wp-block-site-title a,
.nn-site-header.nn-header--transparent .wp-block-navigation .wp-block-navigation-item a {
    color: inherit;
    transition: color 0.3s ease;
}

/* Header CTA: preserve its shape no matter how narrow the header gets.
   Without this, a flex parent with nowrap squeezes the button down until
   the button text wraps one letter per line. WP's core button block sets
   `word-break: break-word` to handle long URLs gracefully — that's the
   right default for buttons inside body content, but a header CTA is
   short brand text that should never fragment. */
.nn-header-cta {
    flex-shrink: 0;
}
.nn-header-cta .wp-block-button__link {
    white-space: nowrap;
}

/* Nav labels are short brand/page names — they should never wrap mid-item.
   WP core sets .wp-block-navigation-item__content to display:block, and the
   browser default white-space:normal lets a two-word label ("Service Areas")
   break to a second line when its <li> shrinks a hair below the label's
   natural width. That doubles the item height and, via the nav's
   align-items:center, balloons the whole header bar. One rule prevents it
   across every pattern. The mobile overlay is a vertical column with room to
   spare, so nowrap is safe there too. */
.wp-block-navigation-item__content {
    white-space: nowrap;
}

/* Hide CTA button on mobile for any pattern that uses it */
@media (max-width: 768px) {
    .nn-header-cta {
        display: none !important;
    }
}

/* Mobile nav overlay — sit above hero blocks, basic typographic styling.
   Background and text color are intentionally NOT set here — the wp:navigation
   block attributes overlayBackgroundColor / overlayTextColor handle those per
   pattern. Overriding them here would break dark-theme sites (cream text on
   cream background). */
.wp-block-navigation__responsive-container.is-menu-open {
    z-index: 999;
    padding: 4rem 2rem;
}

/* Mobile overlay layout overrides.
   WP core uses --navigation-layout-justification-setting to drive the
   overlay's align-items, and the variable is re-set on the inner UL via
   .wp-block-navigation.items-justified-{right,center,etc} — so an outer
   override on the modal won't propagate. We pin flex-start directly on
   the UL inside an open overlay, regardless of the desktop nav's setting.
   Padding lives on the inner content wrapper (NOT the outer modal) so the
   close button can position itself relative to the modal's edges and land
   where the hamburger originally was. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
    padding-left: var(--wp--preset--spacing--60);
    padding-right: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    --navigation-layout-justification-setting: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 1rem;
    width: 100%;
}

/* Submenu parents in the mobile overlay are <li> elements with their own
   flex layout — make sure their label/chevron also left-align. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
    align-items: flex-start;
}

/* Close (×) button — match the hamburger's original placement instead of
   sitting flush in the corner. Hamburger sits inside the header pattern
   at top:1.25rem (header vertical padding) and right:var(--wp--preset--spacing--60)
   (header horizontal padding); mirror those values here. */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
    top: 1.25rem;
    right: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

/* ─── Navigation block — submenu (dropdown) styling ───────────────────
   Variant A "soft floating card": submenu sits 0.5rem below the parent
   item with subtle shadow + small border-radius. Color tokens make it
   work across the standard light header patterns by default; 3 pattern-
   specific overrides further down adjust glass / floating / duotone for
   their backdrop effects.

   WordPress core handles open/close, chevron, hover/click, ARIA — we
   only skin the visual treatment. Hover is the WP-native default
   (openSubmenusOnClick: false). */

.wp-block-navigation__submenu-container {
    margin-top: 0.5rem;
    min-width: 200px;
    padding: 0.5rem 0;
    background: var(--wp--preset--color--background, #ffffff);
    color: var(--wp--preset--color--contrast, #0f172a);
    border: 1px solid var(--wp--preset--color--border, #e5e7eb);
    border-radius: 6px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: var(--wp--preset--color--surface, #f5f5f5);
}

/* Mobile overlay: when .is-menu-open is set, WP core renders submenus
   as inline accordions. Our desktop floating-card chrome would clash —
   neutralize it inside the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static;
    margin: 0;
    padding: 0 0 0 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* ─── Pattern: Service (default) ──────────────────────────────── */

.nn-header--service .wp-block-group {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ─── Pattern: Minimal ────────────────────────────────────────── */
/* (No CSS — padding is a block attribute on the header group in the pattern.) */

/* ─── Pattern: Centered ───────────────────────────────────────── */

.nn-header--centered {
    text-align: center;
}

.nn-header--centered .wp-block-navigation {
    justify-content: center;
}

/* ─── Pattern: Overlay (fullscreen nav, hamburger always) ────── */

.nn-header--overlay .wp-block-navigation__responsive-container-open {
    display: block !important; /* Show hamburger at all breakpoints */
}

.nn-header--overlay .wp-block-navigation__container {
    display: none;
}

.nn-header--overlay .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--background, #111111);
    color: var(--wp--preset--color--contrast, #ffffff);
}

.nn-header--overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.1;
}

/* ─── Pattern: Split (3-zone) ─────────────────────────────────── */

.nn-header--split > .wp-block-group__inner-container,
.nn-header--split.wp-block-group {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.nn-header--split .wp-block-navigation {
    justify-content: center;
}

@media (max-width: 768px) {
    .nn-header--split,
    .nn-header--split > .wp-block-group__inner-container {
        display: flex !important;
        justify-content: space-between !important;
    }
}

/* ─── Pattern: Topbar (utility bar + main header) ─────────────── */

/* Strip colors, padding, and font-size are all block attributes in the pattern
   (Group backgroundColor/textColor + padding; each line's paragraph fontSize) —
   editable in the Site Editor. This file only owns the link hover + mobile hide. */
.nn-header-topbar a {
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.nn-header-topbar a:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .nn-header-topbar {
        display: none !important;
    }
}

/* ─── Pattern: Floating (pill above page) ─────────────────────── */

.nn-header--floating {
    background: transparent !important;
    box-shadow: none !important;
    padding: 1rem 1rem 0 !important;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.nn-header--floating > .wp-block-group__inner-container,
.nn-header--floating-pill {
    pointer-events: auto;
    /* backdrop-filter lives on ::before so it doesn't create a containing block
       for position:fixed descendants (the WP nav overlay). Putting backdrop-filter
       directly on this element would trap the fixed overlay inside the pill's
       coordinate space instead of the viewport. */
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    overflow: hidden;
    gap: 2rem;
    padding: 0.6rem 1rem 0.6rem 1.5rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s;
}

/* ::before carries ONLY the frost (backdrop-filter) — a structural effect with
   no native block control. The pill's TINT and TEXT color are block attributes
   on the pill Group (style.color.background / style.color.text in the pattern),
   so a site owner can recolor the pill — light or dark — right in the Site
   Editor. Nav links inherit the Group's text color (WP core forces them to
   color:inherit); the CTA keeps its own colors; the mobile overlay is governed
   by overlayTextColor. */
.nn-header--floating-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: -1;
}

.nn-header--floating.is-scrolled .nn-header--floating-pill {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Submenu inside the floating pill — match the frosted glass aesthetic. */
.nn-header--floating-pill .wp-block-navigation__submenu-container {
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

.nn-header--floating-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nn-header--floating-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ─── Pattern: Glass (always frosted) ─────────────────────────── */

/* The frost TINT is a block attribute on the glass Group (style.color.background
   in the pattern — defaults to a faint white), editable in the Site Editor: a
   site owner can make the bar lighter or darker. ::before owns ONLY the
   backdrop-filter blur (no native control). backdrop-filter stays on ::before
   so it doesn't become the containing block for the nav overlay's position:fixed. */
.nn-header--glass {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nn-header--glass::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: -1;
}

/* Submenu inside the glass header — match the full-header frosted aesthetic. */
.nn-header--glass .wp-block-navigation__submenu-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 1px 2px rgba(0, 0, 0, 0.10);
}

.nn-header--glass .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nn-header--glass .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ─── Pattern: Duotone (split color zones) ────────────────────── */

.nn-header--duotone {
    display: grid !important;
    grid-template-columns: auto 1fr;
    /* Defeat WordPress's --wp--style--block-gap so the two zones are flush */
    gap: 0 !important;
    background: transparent !important;
}

/* Zone colors are block attributes on each zone Group (backgroundColor/textColor
   in the pattern: left = contrast/background, right = accent/contrast), so a site
   owner can recolor either zone in the Site Editor. This CSS only owns the
   two-zone grid layout + spacing, which has no native control. */
.nn-header--duotone .nn-header-duotone-left {
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nn-header--duotone .nn-header-duotone-right {
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* Force phone/email links inside duotone zones to inherit zone text color
   instead of theme accent color (which could match the bg and become invisible) */
.nn-header--duotone .nn-header-duotone-left a,
.nn-header--duotone .nn-header-duotone-right a {
    color: inherit;
}

@media (max-width: 768px) {
    .nn-header--duotone {
        grid-template-columns: 1fr;  /* stack zones vertically */
    }

    .nn-header--duotone .nn-header-duotone-left {
        justify-content: space-between;  /* logo left, hamburger right */
        gap: 0;
        padding: 0.5rem 1rem;
    }

    .nn-header--duotone .nn-header-duotone-left .wp-block-navigation__container {
        display: none;  /* hide inline nav links — overlay shows them on hamburger click */
    }

    .nn-header--duotone .nn-header-duotone-right {
        justify-content: center;  /* center phone in the bottom row */
        padding: 0.5rem 1rem;
    }

    .nn-header--duotone .nn-header-duotone-right p {
        white-space: nowrap;  /* don't wrap phone number to multiple lines */
        margin: 0;
    }
}

/* Submenu inside the dark duotone-left zone — invert the base treatment
   to sit cleanly on the contrast-color zone. */
.nn-header--duotone .nn-header-duotone-left .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--contrast, #0f172a);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--wp--preset--color--background, #ffffff);
}

.nn-header--duotone .nn-header-duotone-left .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--background, #ffffff);
}

.nn-header--duotone .nn-header-duotone-left .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nn-header--duotone .nn-header-duotone-left .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ─── Pattern: Masthead (large wordmark + compact bar) ────────── */

.nn-masthead {
    text-align: center;
    border-bottom: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
    background: var(--wp--preset--color--background, #ffffff);
}

/* Wordmark size/line-height/margin are now block attributes on the site-title
   (className nn-masthead-wordmark) so the owner can edit them in the Site Editor. */
/* Masthead top-strip nav: native wp:navigation (overlayMenu:"never") styled as a
   flat, centered, dot-separated editorial row at every width. The compact bar's
   hamburger handles mobile; if the designer uses nested nav, submenu parents
   render as dropdowns here via the shared submenu styling above. */
.nn-masthead-nav .wp-block-navigation__container {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.nn-masthead-nav a,
.nn-masthead-nav .wp-block-navigation-item__content {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.nn-masthead-nav a:hover,
.nn-masthead-nav .wp-block-navigation-item__content:hover {
    opacity: 0.65;
}
/* Dot separators between top-level items (replaces the old hand-joined " · ") */
.nn-masthead-nav .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
    content: "·";
    margin: 0 0.55rem;
    opacity: 0.5;
    pointer-events: none;
}

/* Compact bar uses position:fixed (NOT sticky) so it lives at viewport top
   independent of where the masthead is in the document. JS toggles is-visible
   when the user scrolls past the masthead's height.
   IMPORTANT: cannot use `transform` for the hide/show — a transformed ancestor
   becomes the containing block for position:fixed descendants, which breaks
   the wp:navigation mobile overlay (it would be sized to the compact bar's
   ~128px height instead of the viewport). Use opacity + pointer-events. */
.nn-masthead-compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--wp--preset--color--background, #ffffff);
    border-bottom: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.nn-masthead-compact.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Honor the WP admin bar offset when fixed */
body.admin-bar .nn-masthead-compact {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .nn-masthead-compact {
        top: 46px;
    }
}

@media (max-width: 768px) {
    .nn-masthead {
        display: none;
    }

    .nn-masthead-compact {
        opacity: 1;          /* always visible on mobile */
        pointer-events: auto;
    }
}

/* ─── Announcement Bar Add-on ─────────────────────────────────── */

.nn-announcement {
    position: relative !important;
    /* transform forces this element to be a containing block for the
       absolutely-positioned dismiss button, even if some other CSS overrides
       the position property */
    transform: translateZ(0);
    z-index: 1002;
    text-align: center;
    padding: 0.55rem 3rem !important;
    font-size: 0.85rem;
    line-height: 1.4;
    min-height: 2rem;
}

.nn-announcement p {
    margin: 0;
    font-size: inherit;
}

.nn-announcement a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.5rem;
    font-weight: 600;
}

.nn-announcement-dismiss {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    /* WordPress's .is-layout-flow > * + * rule adds margin-block-start to the
       button as the second child of the announcement group. That margin
       applies even to absolutely-positioned elements, pushing the button below
       the announcement. Force margin to 0 to defeat the rule. */
    margin: 0 !important;
    background: transparent;
    border: 0;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    font-size: 0;             /* hide any text content (× or "Dismiss") */
    line-height: 1;
    padding: 0.35rem 0.5rem;
    font-family: inherit;
    border-radius: 3px;
    transition: opacity 0.15s, background 0.15s;
}

/* Render "Dismiss" via pseudo-element so it works regardless of what's
   in the underlying button text node */
.nn-announcement-dismiss::before {
    content: 'Dismiss';
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nn-announcement-dismiss:hover,
.nn-announcement-dismiss:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.18);
    outline: 0;
}

/* ─── Footer Foundation ───────────────────────────────────────── */

.nn-site-footer {
    margin-top: auto;
}

.nn-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0;
    font-size: 0.85rem;
}

.nn-footer-legal-links {
    display: flex;
    gap: 1.25rem;
}

.nn-footer-legal-links a {
    text-decoration: none;
    opacity: 0.7;
    font-size: inherit;
}

.nn-footer-legal-links a:hover {
    opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nn-site-header,
    .nn-masthead-compact,
    .nn-announcement-dismiss,
    .nn-header--floating-pill {
        transition: none !important;
    }
}