/* Site pages converted by scripts/campaign-page.py (2026-10-18). Loaded last, after each page's own styles.
   The green band carries the shared header; the page's own title block (.page-hero) continues the field
   edge to edge, with light text and its label under the title. DESIGN.md records the system. */

/* Old chrome that the shared header, footer and booking bar replace. */
.nav-link, .back, .blog-link, .floating-wa, .floating-book, .scroll-hint,
.hero-bg, .hero-overlay, .hero-glow, .bg-effects, .bg-orb { display: none !important; }

/* ---------- The green field: band + title block ---------- */
.page-band .site-header { padding-block: 18px 6px; }
body:has(.page-hero) .page-wrap { padding-top: 0; }
.page-hero.on-green {
    position: relative;
    margin-top: 0;
    padding-top: clamp(20px, 5vw, 48px);
    padding-bottom: clamp(32px, 7vw, 64px);
    background: var(--green);
    color: var(--ivory);
    /* the field runs edge to edge even when the block sits inside a centred column */
    border-image: linear-gradient(var(--green), var(--green)) fill 0 / / 0 100vmax;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
}
.page-hero.on-green *:not(img):not(picture):not(svg):not(video):not(iframe) { background-color: transparent; border-color: var(--rule-green); box-shadow: none; }
body .page-hero.on-green :is(h1, h2, h3, h4, li, span, div, small, strong, b, em, a, label, time, dd, dt, blockquote) { color: inherit; }
body .page-hero.on-green :is(p, .hero-sub, .subtitle, .page-sub, .sub, .author-line, .hero-name-he, .breadcrumb, .page-intro, .lead) { color: var(--green-ink); }
.page-hero.on-green h1 { color: var(--ivory); text-wrap: balance; }
.page-hero.on-green :is(.accent, .gold, .highlight, [class*="accent"], [class*="gold"]) { color: var(--green-ink); }
.page-hero.on-green a:not([class]) { text-decoration: underline; text-decoration-color: var(--rule-green); text-underline-offset: 4px; }

/* Buttons inside the field: square ivory keys. */
.page-hero.on-green :is(.btn-gold, .btn, .lh-btn.primary, .cta-btn-primary, .booking-btn, [class*="btn-primary"]) {
    background-color: var(--ivory); color: var(--green); border: 1px solid var(--ivory); border-radius: 0;
}
.page-hero.on-green :is(.lh-btn.secondary, .cta-btn-secondary, [class*="btn-secondary"], .btn-ghost) {
    background-color: transparent; color: var(--ivory); border: 1px solid var(--rule-green); border-radius: 0;
}

/* Labels sit under the title, never above it. */
.page-hero.on-green :has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; }
.page-hero.on-green :has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > * { max-width: 100%; width: auto; flex: 0 0 auto; }
.page-hero.on-green :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge) {
    order: 2; margin-top: 14px; margin-bottom: 0;
    font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5; color: var(--green-ink);
    border: 0; padding: 0;
}
[dir="rtl"] .page-hero.on-green :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge) { font-size: 12.5px; letter-spacing: 0.06em; }
.page-hero.on-green :has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > :is(h1, .hero-name, .page-title, .hero-name-he) { order: 1; }
.page-hero.on-green :has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > :not(h1):not(.eyebrow):not(.page-eyebrow):not(.kicker):not(.hero-label):not(.quiz-badge):not(.page-title):not(.hero-name):not(.hero-name-he) { order: 3; }

/* Photos inside a title block keep their own look; square corners. */
.page-hero.on-green img { border-radius: 0; }

/* Section labels follow their heading instead of sitting above it. */
:has(> :is(.section-label, .sec-label) + :is(h2, .section-title)):not(.page-hero) { display: flex; flex-direction: column; align-items: stretch; }
:has(> :is(.section-label, .sec-label) + :is(h2, .section-title)) > :is(h2, .section-title) { order: 1; }
:has(> :is(.section-label, .sec-label) + :is(h2, .section-title)) > :is(.section-label, .sec-label) { order: 2; margin-top: 10px; margin-bottom: 0; }
:has(> :is(.section-label, .sec-label) + :is(h2, .section-title)) > :not(h2):not(.section-title):not(.section-label):not(.sec-label) { order: 3; }

/* The shared header's language menu stays in the header, whatever an old page rule says. */
.page-band .site-header .lang-dropdown { position: relative; inset: auto; top: auto; left: auto; right: auto; z-index: 30; }
.page-band .site-header .lang-btn { width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; backdrop-filter: none; }
.page-band .site-header .lang-menu { background: var(--ivory); border: 1px solid var(--rule-ivory); border-radius: 0; box-shadow: none; }

/* The title block itself can hold the label directly. */
.page-hero.on-green:has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; }
.page-hero.on-green:has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > * { max-width: 100%; width: auto; flex: 0 0 auto; }
.page-hero.on-green:has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > :is(h1, .hero-name, .page-title, .hero-name-he) { order: 1; }
.page-hero.on-green:has(> :is(.eyebrow, .page-eyebrow, .kicker, .hero-label, .quiz-badge)) > :not(h1):not(.eyebrow):not(.page-eyebrow):not(.kicker):not(.hero-label):not(.quiz-badge):not(.page-title):not(.hero-name):not(.hero-name-he) { order: 3; }

/* Old decorative overlays would cover the field; gradient-filled text becomes plain text. */
.page-hero.on-green::before, .page-hero.on-green::after { content: none; display: none; }
.page-hero.on-green :is(h1, h1 *, h2, h2 *, .hero-title, .hero-title *) { -webkit-text-fill-color: currentColor; background-image: none; }

/* A container that opens with the title block adds no space above it, so the field stays one piece. */
:has(> .page-hero:first-child) { padding-top: 0; }

/* Old pages draw small icons as font glyphs from a font they no longer load: hide the empty boxes. */
.page-hero.on-green h1 { max-width: 22ch; }

/* A page's own language buttons inside the field. */
.page-hero.on-green :is(.faq-lang-btn, .lang-toggle button) { color: var(--green-ink); background: transparent; border: 0; }
.page-hero.on-green :is(.faq-lang-btn, .lang-toggle button).active { color: var(--green); background: var(--ivory); }
.page-hero.on-green .author-line { flex-wrap: wrap; }
.page-hero.on-green .author-line strong { white-space: nowrap; }

/* Links in the green band take the band's ivory, whatever colour a page gives plain links. */
.page-band.on-green a { color: inherit; }

/* Footer links keep the footer's own look, whatever a page does to plain links. */
.site-footer a { border-bottom: 0; text-decoration: none; }
.site-footer .footer-base p a { text-decoration: underline; text-underline-offset: 3px; }
/* A page's own fixed language switch sits under the green band, not over the header. */
body:has(> .page-band) .lang-switch { top: 76px; }

/* Text on green keys and tags is ivory (old pages used the page background colour). */
:is(.btn-gold, .booking-btn, .service-tag, .featured-tag, .badge, .crosslink-btn:hover, .cta-btn-primary) { color: var(--ivory); }
.page-hero.on-green :is(.btn-gold, .booking-btn) { color: var(--green); }