/*
 * NAP Header Bar — PRP-NAP-001
 *
 * A compact utility rail above the site header carrying the business Name,
 * Address and Phone. Per-page toggle; see inc/acf-nap-header.php.
 *
 * Colour note: the brand green (#01BF5A) carries only 2.2:1 against white,
 * so it cannot hold body text. The bar is therefore filled with the same
 * hue deepened to #00602A (7.7:1 with white, WCAG AAA) and the literal
 * brand green is kept for the accents — the status dot, the hairline rule
 * and the hover underline — where contrast is not load-bearing.
 */

.nap-bar {
    /* Deepened brand green: same 146deg hue as #01BF5A, legible with white. */
    --nap-bg: #00602A;
    --nap-brand: #01BF5A;
    --nap-brand-lite: #5FE3A0;
    --nap-text: #ffffff;
    --nap-text-soft: rgba(255, 255, 255, 0.78);
    --nap-rule: rgba(255, 255, 255, 0.16);
    --nap-ease: var(--hdr-ease, cubic-bezier(0.22, 1, 0.36, 1));

    position: relative;
    z-index: 99;
    width: 100%;
    background-color: var(--nap-bg);
    /* A barely-there diagonal weave so a solid 40px block does not read flat. */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.035) 0 1px,
        transparent 1px 7px
    );
    color: var(--nap-text);
}

/* Bright brand-green hairline: draws in once on load, and gives the bar a
   crisp edge against the white header below. */
.nap-bar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--nap-brand), #00D26A);
    transform: scaleX(0);
    transform-origin: left center;
    animation: nap-rule-draw 700ms var(--nap-ease) 120ms forwards;
}

@keyframes nap-rule-draw {
    to { transform: scaleX(1); }
}

.nap-bar__inner {
    max-width: var(--content-max-width, 1300px);
    margin: 0 auto;
    min-height: 40px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Business name ── */
/* Oswald, condensed and uppercase — the brand's display face, which gives
   the rail a signage quality against the Inter data to its right. */
.nap-bar__name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    font-family: var(--ff-header, "Oswald", sans-serif);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nap-text);
    white-space: nowrap;
}

/* Status LED: the one place the literal brand green appears as a fill. */
.nap-bar__dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--nap-brand);
    box-shadow: 0 0 0 3px rgba(1, 191, 90, 0.22);
    flex-shrink: 0;
}

/* ── Contact group ── */
/* margin-left:auto keeps the group on the right edge — aligned with the
   header's own phone and CTA — even when the name segment is switched off. */
.nap-bar__contact {
    display: flex;
    align-items: center;
    margin-left: auto;
    min-width: 0;
}

.nap-bar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--nap-text-soft);
    font-family: var(--ff-primary, "Inter", sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.2s var(--nap-ease);
}

.nap-bar__item + .nap-bar__item {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid var(--nap-rule);
}

.nap-bar__item:hover,
.nap-bar__item:focus,
.nap-bar__item:active {
    color: var(--nap-text);
    text-decoration: none;
}

/* The phone is the conversion element — weight and tabular digits make it
   the bar's focal point without a second colour. */
.nap-bar__item--phone {
    color: var(--nap-text);
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── Icons ── */
.nap-bar__icon {
    display: flex;
    flex-shrink: 0;
}

.nap-bar__icon svg {
    width: 14px;
    height: 14px;
    color: var(--nap-brand-lite);
    transition: transform 0.3s var(--nap-ease);
}

.nap-bar__item:hover .nap-bar__icon svg {
    transform: translateY(-1px) scale(1.08);
}

/* ── Address text ── */
.nap-bar__text {
    position: relative;
    display: inline-flex;
    gap: 4px;
}

/* Presentational comma between the street and the locality — it also reads
   correctly when the two sit on separate lines on narrow screens. The whole
   text block is aria-hidden. */
.nap-bar__street::after {
    content: ",";
}

/* Hover underline sweeps from the left — the header nav's indicator scales
   from centre, so the two read as one family without being the same gesture. */
.nap-bar__text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--nap-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--nap-ease);
}

.nap-bar__item:hover .nap-bar__text::after,
.nap-bar__item:focus-visible .nap-bar__text::after {
    transform: scaleX(1);
}

/* ── Focus: mouse clean, keyboard ringed (mirrors css/header.css) ── */
.nap-bar__item:focus {
    outline: none;
}

.nap-bar__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

/* ── Responsive ── */

/* Match the header's own tightening step. */
@media screen and (max-width: 1080px) {
    .nap-bar__inner {
        padding: 0 18px;
    }

    .nap-bar__item + .nap-bar__item {
        margin-left: 16px;
        padding-left: 16px;
    }
}

/* The header collapses to icons here; the rail stacks into two centred rows
   rather than dropping information the bar exists to carry. */
@media screen and (max-width: 900px) {
    .nap-bar__inner {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 0;
        padding: 8px 16px;
    }

    .nap-bar__name {
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    .nap-bar__contact {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nap-bar__item {
        font-size: 12px;
    }
}

/* The full address stays — it is the reason the rail exists. The segments
   stack onto their own rows so the street line has the whole width, and the
   address is allowed to wrap rather than be clipped on the narrowest screens. */
@media screen and (max-width: 600px) {
    .nap-bar__contact {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        max-width: 100%;
    }

    /* One segment per row, so the vertical divider between them no longer
       applies — it would hang at the start of the second row. */
    .nap-bar__item + .nap-bar__item {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .nap-bar__item--address {
        align-items: flex-start;
        white-space: normal;
        text-align: center;
    }

    /* Keep the pin level with the first line of a wrapped address. */
    .nap-bar__item--address .nap-bar__icon {
        margin-top: 2px;
    }

    .nap-bar__item--address .nap-bar__text {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
        line-height: 1.35;
    }
}

@media screen and (max-width: 375px) {
    .nap-bar__name,
    .nap-bar__item {
        font-size: 11px;
    }

    .nap-bar__inner {
        padding: 7px 12px;
    }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .nap-bar::after {
        animation: none;
        transform: scaleX(1);
    }

    .nap-bar__item,
    .nap-bar__icon svg,
    .nap-bar__text::after {
        transition: none;
    }
}

/* ── Print: keep the contact details, drop the ink-heavy fill ── */
@media print {
    .nap-bar {
        background: none;
        color: #000;
    }

    .nap-bar::after,
    .nap-bar__dot,
    .nap-bar__icon {
        display: none;
    }

    .nap-bar__name,
    .nap-bar__item,
    .nap-bar__item--phone {
        color: #000;
    }
}