/* Styles for the gated seasonal-campaign partials (top bar, homepage callout
   card, footer strip, hero motif). The head partial links this file only
   while the campaign site param is enabled, so every page that loads it
   renders the markup carrying these classes.

   Dark mode / RTL: the bar, footer strip and motif use constant campaign
   colours (no token flips), so they need no .dark override at all — which
   removes the html[dir="rtl"] (0,2,1) vs .dark (0,2,0) specificity trap by
   construction. The one component that DOES theme with the page (the callout
   card surface) has a .dark override and no RTL-specific sibling rule, so
   nothing outranks it. */

/* Top bar — fixed strip above the header (header is z-50). Heights couple to
   the header top offsets authored in partials/header.html; the dismiss script
   in the bar partial reverts those offsets by class name. */
.az-campaign-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;                 /* grows if the text wraps below md */
    min-height: 36px;             /* mobile: matches header top-[36px] */
    padding-inline-end: 2.75rem;  /* end side only: clears the single close button */
    background: #035E55;          /* brand teal, constant in both themes */
    color: #F6F1E6;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(182, 139, 60, 0.35);
}
.az-campaign-bar-text {
    margin: 0;
    text-align: center;
    /* Below md the line wraps instead of ellipsis-truncating, so the tail of
       the sentence — the percentage and the deadline — always survives at
       phone widths; the bar grows to fit rather than cutting its own point. */
    white-space: normal;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
}
.az-campaign-bar-close {
    position: absolute;
    inset-inline-end: 0.5rem;     /* logical property: correct in RTL and LTR */
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: rgba(246, 241, 230, 0.8);
    cursor: pointer;
}
.az-campaign-bar-close:hover {
    color: #F6F1E6;
    background: rgba(246, 241, 230, 0.12);
}
@media (min-width: 768px) {
    .az-campaign-bar {
        height: 44px;             /* desktop: matches header md:top-[44px] */
        min-height: 44px;
        font-size: 0.9375rem;
    }
    .az-campaign-bar-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9375rem;
        line-height: 1;
    }
}

/* Homepage callout card — after the hero. */
.az-campaign-card-wrap {
    padding-block-end: 2.5rem;
}
.az-campaign-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    /* Logical padding only: the physical four-value shorthand puts the
       reserve on the wrong side in RTL. The start-side reserve is the corner
       the absolute close button occupies, in both directions. */
    padding-block: 1.5rem;
    padding-inline-start: 4rem;
    padding-inline-end: 1.5rem;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid rgba(182, 139, 60, 0.35);
    border-radius: 1rem;
    box-shadow: 0 4px 18px -4px rgba(6, 42, 40, 0.14);
}
.dark .az-campaign-card {
    background: #062A28;
    border-color: rgba(217, 185, 104, 0.35);
}
/* C2 (§1.7): the SND lockup must be at least 2× our own logo horizontally.
   Our header logo renders 60px wide; at 72px tall this band renders ~254px
   wide ≈ 4.2×, so C2 is exceeded, not merely met. Do NOT "correct" this to a
   literal 120px wide — that would force the band to ~34px tall and make the
   calligraphy unreadable. Re-measure both if either logo changes. */
.az-campaign-card-lockup {
    align-self: flex-end;         /* pinned to the top inline-end corner; the close button holds the opposite (inline-start) corner, so the two cannot collide */
    height: 72px;
    width: auto;
    max-width: 100%;
    aspect-ratio: 791 / 224;      /* the box tracks the artwork when the width is clamped instead of letterboxing inside a fixed 72px box */
}
.az-campaign-card-close {
    position: absolute;
    inset-inline-start: 0.75rem;  /* top inline-start corner — opposite corner from the lockup */
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #635E4F;
    cursor: pointer;
}
.dark .az-campaign-card-close {
    color: #A9A08C;
}
.az-campaign-card-close:hover {
    color: #035E55;
    background: rgba(3, 94, 85, 0.08);
}
.dark .az-campaign-card-close:hover {
    color: #D9B968;
    background: rgba(217, 185, 104, 0.10);
}

/* Footer greeting strip. */
.az-campaign-footer-strip {
    border-top: 1px solid rgba(246, 241, 230, 0.08);
    padding-block: 0.85rem;
    padding-inline: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #A9A08C;
}
.az-campaign-footer-strip p {
    margin: 0;
}

/* Hero motif — subtle repeating diamond lattice behind the hero content
   (which is z-10). background-image is injected inline by the gated partial
   from the Hugo-published asset, so nothing is hardcoded here. */
.az-hero-motif {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 64px 64px;
    opacity: 0.5;
}

/* Landing page hero (WP-04) — GEA lockup in a CORNER (C4: never centred).
   The head row is flex with justify-content flex-start, so the artwork pins
   to the inline-start edge: top-right on the Arabic page, top-left on the
   English one. Height 64px renders ≈226px wide ≈ 3.8× the header logo
   (C2 needs ≥2×; same re-measure-both rule as .az-campaign-card-lockup).
   One full-colour treatment in both themes (C5) — no .dark override, the
   artwork ships unchanged. */
.az-nd96-hero-head {
    display: flex;
    justify-content: flex-start;
}
.az-nd96-hero-lockup {
    height: 64px;
    width: auto;
    max-width: min(70vw, 280px);
    aspect-ratio: 791 / 224;
}