/* header-contact.css — shared styling for the Directions / phone / website
   chips that sit under the address in a mosque page header.

   Pages disagreed about these chips. Most print near-white text on a 12% white
   wash, which is legible but faint; Shahjalal and Al Mahad reuse their footer
   style — dark brand text on an 8% wash — and on the green patterned header
   the label all but disappears (Saeed, live /shahjalal/, 2026-09-12).

   Those two pages also never received the generator's `.contact-info` layout,
   so the (now-visible) frosted pill sat flush against PRAYER TIMETABLE and
   used the larger footer chip metrics. Cluster gap + compact size live here
   so every timetable page matches, without rewriting hundreds of HTML files.

   One frosted chip covers every palette: the header's own colour still shows
   through it, so the chip belongs to the header rather than sitting on top of
   it, while the dark ink stays readable wherever a mosque's gradient happens
   to be light. scripts/test_header_contact_contrast.py holds the chip to
   WCAG AA against every published header colour.
   scripts/test_header_contact_layout.py holds the gap and compact size.

   Colours are Khatt brand tokens (brand-tokens.css): deep-green ink on an
   ivory frosted wash. Each var() carries the token's value as its fallback so
   the chip renders Khatt even before brand-tokens.css loads; the contrast test
   reads the fallback and scripts/test_brand_tokens.py pins it to the token.
   Brand chrome delivery (ADR 0002) links this sheet.

   Loaded after each page's inline <style> so these rules win ties. Footer
   chips are deliberately untouched: they already sit on a light card. */

/* Generator pages already ship this; Shahjalal / Al Mahad do not. */
.header .contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}

.header .contact-info .contact-link,
.header .contact-links .contact-link,
.header a.contact-link,
.header span.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 20px;
    line-height: 1.2;
}

.header .contact-info .contact-link svg,
.header .contact-links .contact-link svg,
.header a.contact-link svg,
.header span.contact-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.header .contact-info .contact-link,
.header .contact-links .contact-link,
.header a.contact-link,
.header span.contact-link {
    color: var(--wq-brand-ink, #0b2a1f);
    background: rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.8);
    border: 1px solid rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    text-shadow: none;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.header .contact-info .contact-link:hover,
.header .contact-links .contact-link:hover,
.header a.contact-link:hover,
.header span.contact-link:hover {
    color: var(--wq-brand-ink, #0b2a1f);
    background: rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.94);
    border-color: var(--wq-brand-surface, #fff3d6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* The header keeps its brand gradient in dark mode, so the chip does too —
   only the page's own dark-mode chip colours need overriding. */
body.dark-mode .header .contact-info .contact-link,
body.dark-mode .header .contact-links .contact-link,
body.dark-mode .header a.contact-link,
body.dark-mode .header span.contact-link {
    color: var(--wq-brand-ink, #0b2a1f);
    background: rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.78);
    border-color: rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.88);
}

body.dark-mode .header .contact-info .contact-link:hover,
body.dark-mode .header .contact-links .contact-link:hover,
body.dark-mode .header a.contact-link:hover,
body.dark-mode .header span.contact-link:hover {
    color: var(--wq-brand-ink, #0b2a1f);
    background: rgba(var(--wq-brand-surface-rgb, 255, 243, 214), 0.92);
    border-color: var(--wq-brand-surface, #fff3d6);
}

/* Keyboard focus has to survive the flatter background too. */
.header .contact-info .contact-link:focus-visible,
.header .contact-links .contact-link:focus-visible,
.header a.contact-link:focus-visible,
.header span.contact-link:focus-visible {
    outline: 2px solid var(--wq-brand-surface, #fff3d6);
    outline-offset: 2px;
}

@media print {
    .header .contact-info .contact-link,
    .header .contact-links .contact-link,
    .header a.contact-link,
    .header span.contact-link {
        color: var(--wq-brand-ink, #0b2a1f);
        background: none;
        border-color: rgba(0, 0, 0, 0.35);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}