/*
Theme Name: SAA
Description: Block theme for Sex Addicts Anonymous Israel. All design lives in this file and in css/
Author: SAA Israel
Text Domain: saa
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.0
*/

/* Fonts from the current saaisrael.com (Narkisim for headings, Narkiss Tam for text) */
@font-face {
    font-family: "Narkisim";
    src: url("fonts/Narkisim-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkisim";
    src: url("fonts/Narkisim-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkisim";
    src: url("fonts/Narkisim-DemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkisim";
    src: url("fonts/Narkisim-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkisim";
    src: url("fonts/Narkisim-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Narkiss Tam";
    src: url("fonts/NarkissTam-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkiss Tam";
    src: url("fonts/NarkissTam-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkiss Tam";
    src: url("fonts/NarkissTam-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkiss Tam";
    src: url("fonts/NarkissTam-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Narkiss Tam";
    src: url("fonts/NarkissTam-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* EB Garamond (SIL OFL, fonts/EBGaramond-OFL.txt): headings on the English site */
@font-face {
    font-family: "EB Garamond";
    src: url("fonts/EBGaramond-latin-wght.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "EB Garamond";
    src: url("fonts/EBGaramond-latin-wght-italic.woff2") format("woff2");
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
    --saa-text: #1d2a17;
    --saa-body: #2b3626;
    --saa-ink: #1c3a1d; /* headings, dark green */
    --saa-accent: #2f5323; /* links, buttons */
    --saa-muted: #56634c;
    --saa-bg: #f5f6ef; /* page */
    --saa-surface: #fff;
    --saa-line: #d3dac2;
    --saa-line-strong: #a9b98f;
    --saa-band: #e3ecd0; /* info band */
    --saa-slot: #d6e1c2; /* image slots */
    --saa-tint: #eef3e3; /* hover tint */
    --saa-footer: #eaefe0;
    --saa-radius: 20px;
    --saa-shadow:
        0 1px 2px rgb(20 40 20 / 0.06), 0 14px 36px rgb(20 40 20 / 0.1);
    --saa-shadow-soft:
        0 1px 2px rgb(20 40 20 / 0.05), 0 8px 24px rgb(20 40 20 / 0.06);
    --saa-gap: 1.5rem;
    --saa-gutter: clamp(24px, 4vw, 40px);
    --saa-header-h: 76px;
    --saa-dir: 1;
    --saa-font:
        "Narkiss Tam", system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew",
        Arial, sans-serif;
    --saa-font-heading: "Narkisim", "Narkiss Tam", "Times New Roman", serif;
    interpolate-size: allow-keywords; /* lets height animate to/from auto (Chromium); elsewhere it just snaps */
}
:root[dir="rtl"] {
    --saa-dir: -1;
}
:root:lang(en) {
    --saa-font-heading: "EB Garamond", "Narkisim", "Times New Roman", serif;
}
@media (min-width: 782px) {
    :root {
        --saa-header-h: 100px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--saa-bg);
    color: var(--saa-text);
    font-family: var(--saa-font);
    font-size: 1.125rem;
    line-height: 1.65;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wp-site-blocks > main {
    flex: 1 0 auto;
}
:root .wp-site-blocks > * {
    margin-block: 0;
}

main {
    padding-block: 2rem 3rem;
    padding-inline: var(--saa-gutter);
}
main.saa-main--front {
    padding: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--saa-font-heading);
    color: var(--saa-ink);
    line-height: 1.2;
    margin-block: 2rem 0.75rem;
    font-weight: 500;
}
h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    margin-block-start: 0;
}
h2 {
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
}
h3 {
    font-size: 1.375rem;
}
h4,
h5,
h6 {
    font-size: 1.125rem;
}
p,
ul,
ol,
blockquote,
table,
details,
figure,
iframe {
    margin-block: 0 var(--saa-gap);
}
ul,
ol {
    padding-inline-start: 1.5rem;
}
li + li {
    margin-block-start: 0.35rem;
}
hr {
    border: 0;
    border-block-start: 1px solid var(--saa-line);
    margin-block: 2rem;
}
img,
video {
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: 700;
}

/* Links */
a {
    color: var(--saa-accent);
    text-decoration: none;
    transition: color 0.15s ease-out;
}
a:hover {
    color: var(--saa-ink);
}
/* Links inside running text keep a thin underline (a cue that is not only colour) */
.entry-content :is(p, blockquote):not(.saa-infoline *) a:not(.wp-block-button__link, .saa-readmore, .saa-ico) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
:focus-visible {
    outline: 3px solid var(--saa-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip link and screen reader text */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    clip-path: none;
    background: var(--saa-surface);
    border: 2px solid var(--saa-accent);
    border-radius: 12px;
    z-index: 100000;
}

/* Blockquote */
blockquote {
    margin-inline: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 3px solid var(--saa-line-strong);
    color: var(--saa-muted);
}
blockquote p:last-child {
    margin-block-end: 0;
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}
th,
td {
    border: 1px solid var(--saa-line);
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
}
th {
    background: var(--saa-band);
    color: var(--saa-ink);
}
.wp-block-table {
    overflow-x: auto;
}

/* Iframes (Google Docs etc.) */
iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
}
.wp-block-embed iframe,
iframe[src*="docs.google.com"] {
    min-height: 70vh;
}

/* ==========================================================================
   Buttons (core/button): solid green pill; .is-style-outline for the quiet one
   ========================================================================== */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 0 var(--saa-gap);
}
:root .wp-block-button__link {
    /* :root beats core's global button styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 40px;
    padding: 0 18px;
    border: 1.5px solid var(--saa-accent);
    border-radius: 999px;
    background: var(--saa-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
:root .wp-block-button__link:hover {
    color: #fff;
}
:root .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--saa-accent);
}
:root .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--saa-accent);
}

/* Arrow that points "forward" (left in RTL, right in LTR), drawn as a mask */
.saa-readmore::after,
.saa-band--pros .wp-block-button__link::after {
    content: "";
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    background: currentColor;
    mask: url("assets/arrow.svg") center / contain no-repeat;
    transition: transform 0.18s ease-out;
}
:root:not([dir="rtl"]) .saa-readmore::after,
:root:not([dir="rtl"]) .saa-band--pros .wp-block-button__link::after {
    transform: scaleX(-1);
}
.saa-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    color: var(--saa-ink);
    font-weight: 500;
    text-decoration: none;
}
.saa-readmore:hover {
    color: var(--saa-accent);
}

/* ==========================================================================
   Header: sticky; transparent over the home hero, white elsewhere / once scrolled
   ========================================================================== */
.saa-header {
    position: sticky;
    /* sticks under the WordPress admin bar when logged in */
    inset-block-start: var(--wp-admin--admin-bar--height, 0px);
    z-index: 20;
    color: #fff;
    background: transparent;
}
body:not(.home) .saa-header,
.saa-header.is-stuck {
    color: var(--saa-ink);
    background: #fff;
}
body:not(.home) .saa-header {
    box-shadow: 0 1px 0 rgb(20 40 20 / 0.08);
}
.saa-header.is-stuck {
    box-shadow:
        0 1px 0 rgb(20 40 20 / 0.08),
        0 6px 20px rgb(20 40 20 / 0.06);
}
.saa-header :focus-visible {
    outline-color: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
    .saa-header {
        transition:
            background-color 0.2s ease-out,
            color 0.2s ease-out,
            box-shadow 0.2s ease-out;
    }
}

.saa-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 clamp(12px, 2vw, 32px);
    max-inline-size: 1200px;
    min-block-size: var(--saa-header-h);
    margin-inline: auto;
    padding-inline: var(--saa-gutter);
}
:root .saa-header__inner > * {
    margin-block: 0;
}
.saa-site-title {
    margin: 0;
    flex: none;
    font-family: var(--saa-font-heading);
    font-size: clamp(1rem, 0.8rem + 1vw, 1.375rem);
    font-weight: 500;
    line-height: 1.2;
}
.saa-site-title a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.saa-site-title a::before {
    /* the original SAA logo; all-white version while the header is inverted */
    content: "";
    flex: none;
    inline-size: 46px;
    block-size: 64px;
    background: url("assets/saa-logo-green.svg") center / contain no-repeat; /* white header: the logo in SAA green */
}
body.home .saa-header:not(.is-stuck) .saa-site-title a::before {
    background-image: url("assets/saa-logo-white.svg");
}
@media (min-width: 782px) {
    .saa-site-title a {
        gap: 16px;
        max-inline-size: 15rem; /* breaks the title after "למין" */
        text-wrap: balance;
    }
    .saa-site-title a::before {
        inline-size: 60px;
        block-size: 84px;
    }
}
.saa-header .wp-block-navigation {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-inline-size: 0;
    white-space: nowrap;
}
.saa-header .wp-block-navigation__container {
    flex-wrap: nowrap;
    column-gap: clamp(10px, 1.6vw, 24px);
}
@media (max-width: 1199px) {
    .saa-header .wp-block-navigation {
        font-size: 0.9375rem;
    }
    .saa-header .wp-block-navigation__container {
        column-gap: 12px;
    }
}
@media (min-width: 600px) and (max-width: 899px) {
    /* core switches to the overlay menu only below 600px; the row doesn't fit below 900px */
    :root .saa-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }
    :root .saa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    :root .saa-header .wp-block-navigation {
        margin-inline-start: auto;
    }
}
.saa-header .wp-block-shortcode {
    margin: 0;
    flex: none;
}
.saa-header .wp-block-shortcode > * {
    margin: 0;
}

/* Language pill */
.saa-lang {
    position: relative;
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s ease-out;
}
.saa-lang::before {
    content: "";
    display: inline-block;
    inline-size: 0.95em;
    block-size: 0.95em;
    margin-inline-end: 0.35em;
    vertical-align: -0.12em;
    background: currentColor;
    mask: url("assets/icon-globe.svg") center / contain no-repeat;
}
.saa-lang::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
} /* 44px hit area */
.saa-lang:hover {
    color: inherit;
    opacity: 1;
    text-decoration: none;
}

/* Header call-to-action: always visible, hidden where the row can't fit it */
.saa-header-cta {
    flex: none;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    /* the admin bar scrolls away below 601px */
    .saa-header {
        inset-block-start: 0;
    }
}
.saa-header-cta .wp-block-button__link {
    min-block-size: 40px;
    padding: 0 18px;
    font-size: 1rem;
}
:root body.home .saa-header:not(.is-stuck) .saa-header-cta .wp-block-button__link {
    /* over the hero the header is transparent: white button, dark text */
    border-color: #fff;
    background: #fff;
    color: var(--saa-ink);
}
@media (prefers-reduced-motion: no-preference) {
    .saa-header-cta .wp-block-button__link {
        transition:
            background-color 0.2s ease-out,
            border-color 0.2s ease-out,
            color 0.2s ease-out;
    }
}
@media (max-width: 1099px) {
    :root .saa-header .saa-header-cta {
        display: none;
    }
}
/* English labels run wider than Hebrew: no CTA (the menu has Meetings), overlay menu below 1100px */
:root:lang(en) .saa-header .saa-header-cta {
    display: none;
}
@media (min-width: 782px) {
    :root:lang(en) .saa-site-title a {
        max-inline-size: 17rem; /* "Sex Addicts Anonymous / Israel" on two lines */
    }
}
@media (min-width: 600px) and (max-width: 1099px) {
    :root:lang(en) .saa-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }
    :root:lang(en) .saa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    :root:lang(en) .saa-header .wp-block-navigation {
        margin-inline-start: auto;
        justify-content: flex-end;
    }
}

/* Navigation */
.wp-block-navigation {
    font-size: 1rem;
}
.wp-block-navigation li + li,
.wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item {
    margin-block: 0; /* the global li + li gap would push every item but the first down */
}
.wp-block-navigation__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem clamp(14px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wp-block-navigation a {
    color: inherit;
    text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    opacity: 0.92;
    transition: opacity 0.15s ease-out;
}
.wp-block-navigation a:hover,
.wp-block-navigation [aria-current="page"] {
    opacity: 1;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    display: inline-grid;
    place-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    background: none;
    border: 0;
    padding: 0.4rem;
    cursor: pointer;
    color: inherit;
}
.wp-block-navigation__submenu-container {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    background: #fff;
    color: var(--saa-ink);
    border-radius: 14px;
    box-shadow: var(--saa-shadow);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-block-size: 40px;
    padding-inline: 0.75rem;
    border-radius: 8px;
}
.wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background: var(--saa-tint);
}
.wp-block-navigation__submenu-icon {
    display: inline-grid;
    place-items: center;
    min-inline-size: 24px;
    min-block-size: 44px;
    background: none;
    border: 0;
    padding: 0 0.25rem;
    color: inherit;
    cursor: pointer;
}
.wp-block-navigation__submenu-icon svg {
    width: 0.75em;
    height: 0.75em;
    stroke: currentColor;
}
@media (min-width: 600px) {
    .wp-block-navigation__submenu-container {
        position: absolute;
        z-index: 10;
        inset-block-start: 100%;
        min-inline-size: 14rem;
    }
    .wp-block-navigation .has-child {
        position: relative;
        display: flex;
        align-items: center;
    }
    .wp-block-navigation
        .has-child:not(:hover):not(:focus-within)
        > .wp-block-navigation__submenu-container {
        display: none;
    }
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none;
}

/* Open menu (phones): a top bar that mirrors the phone header (logo mark, close button),
   then the items as full-width rows with thin dividers. The ":root …is-menu-open" prefix
   outranks core's overlay rules, which load before this file. */
:root .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 0;
    background: #fff;
    color: var(--saa-ink);
    overflow: auto;
    overscroll-behavior: contain;
    white-space: normal;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
    position: relative;
    min-block-size: 100%;
    padding: var(--saa-header-h) var(--saa-gutter) 2.5rem;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog::before {
    /* the phone header's logo mark, same size and place */
    content: "";
    position: absolute;
    inset-block-start: calc((var(--saa-header-h) - 32px) / 2);
    inset-inline-start: var(--saa-gutter);
    inline-size: 60px;
    block-size: 32px;
    background: var(--saa-accent);
    mask: url("assets/saa-small-logo.png") center / contain no-repeat;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog::after {
    /* the header's bottom line */
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--saa-header-h) - 1px);
    border-block-start: 1px solid var(--saa-line);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    /* where the menu button sits in the header */
    inset-block-start: calc((var(--saa-header-h) - 44px) / 2);
    inset-inline-start: auto;
    inset-inline-end: var(--saa-gutter);
    z-index: 1;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    color: var(--saa-ink);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    display: block;
    padding-block-start: 0.5rem;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-family: var(--saa-font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.25;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
    position: relative;
    align-items: stretch;
    border-block-end: 1px solid var(--saa-line);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    position: relative;
    min-block-size: 54px;
    padding: 0;
    border-radius: 0;
    color: var(--saa-ink);
    opacity: 1;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover {
    background: none;
    color: var(--saa-accent);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    [aria-current="page"] {
    color: var(--saa-accent);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    [aria-current="page"]::before {
    /* current page: a small dot in the gutter beside the label */
    content: "";
    position: absolute;
    inset-inline-start: calc(-1 * min(14px, var(--saa-gutter) - 8px));
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--saa-accent);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible {
    outline-offset: -2px;
}
/* "מידע": label and chevron on one row; the sub-items stay collapsed until the toggle is pressed */
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .has-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    inline-size: 100%;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon {
    display: inline-grid;
    place-items: center end;
    inline-size: 54px;
    min-block-size: 54px;
    margin: 0;
    padding: 0;
    color: var(--saa-ink);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-icon
    svg {
    width: 14px;
    height: 14px;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .has-child.saa-sub-open
    > .wp-block-navigation__submenu-icon
    svg {
    transform: rotate(180deg);
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: static;
    min-inline-size: 0;
    block-size: 0;
    margin: 0;
    padding: 0;
    padding-inline-start: 1rem;
    overflow: hidden;
    visibility: hidden;
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--saa-font);
    font-size: 1.0625rem;
    font-weight: 400;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .has-child.saa-sub-open
    > .wp-block-navigation__submenu-container {
    block-size: auto;
    padding-block-end: 0.5rem;
    visibility: visible;
}
:root .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    min-block-size: 44px;
    padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
    :root .wp-block-navigation__responsive-container.is-menu-open
        .has-child
        > .wp-block-navigation__submenu-icon
        svg {
        transition: transform 0.2s ease-out;
    }
    :root .wp-block-navigation__responsive-container.is-menu-open
        .has-child
        > .wp-block-navigation__submenu-container {
        transition:
            block-size 0.25s ease-out,
            padding-block-end 0.25s ease-out,
            visibility 0.25s;
    }
}
/* opened by touch or mouse: no ring on the item core focuses, until a key is pressed */
.wp-block-navigation.saa-menu-pointer :focus-visible {
    outline: none;
}

/* Phones: logo mark on the right, language pill and the menu button at the far left */
@media (max-width: 599px) {
    .saa-header__inner {
        gap: 0 8px;
    }
    .saa-site-title {
        flex: 1 1 auto;
        order: 0;
        font-size: 0; /* the name stays as the link's accessible name; only the mark shows */
    }
    .saa-site-title a {
        inline-size: 60px;
        block-size: 44px;
    }
    .saa-site-title a::before {
        inline-size: 60px;
        block-size: 32px;
        background: var(--saa-accent);
        mask: url("assets/saa-small-logo.png") center / contain no-repeat;
    }
    body.home .saa-header:not(.is-stuck) .saa-site-title a::before {
        background: #fff;
    }
    .saa-header .wp-block-shortcode {
        order: 1;
    }
    .saa-header .wp-block-navigation {
        order: 2;
        flex: none;
    }
}

/* ==========================================================================
   Home: hero
   ========================================================================== */

:root:root .saa-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-block-start: calc(-1 * var(--saa-header-h));
    margin-block-end: 0;
    padding-block: calc(var(--saa-header-h) + 56px) clamp(88px, 12vw, 120px);
    padding-inline: var(--saa-gutter);
    color: #fff;
    text-align: center;
    background: #1d4a26 url("assets/hero-gradient-960.webp") center top / cover
        no-repeat;
}
@media (min-width: 961px) {
    :root:root .saa-hero {
        background-image: url("assets/hero-gradient-1920.webp");
    }
}
.saa-hero::before {
    /* soft shade behind the text so white type keeps AA contrast on the light patch */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        60% 75% at 50% 62%,
        rgb(14 38 18 / 0.5) 0%,
        rgb(14 38 18 / 0.32) 45%,
        rgb(14 38 18 / 0) 100%
    );
    pointer-events: none;
}
.saa-hero::after {
    /* film grain: computed noise, blended over the gradient */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("assets/grain.webp") 0 0 / 256px 256px repeat;
    mix-blend-mode: overlay;
    opacity: 0.3;
    pointer-events: none;
}
.saa-hero > * {
    max-inline-size: 560px;
    margin-inline: auto;
}
.saa-hero > h1 {
    max-inline-size: 680px;
}
.saa-hero h1 {
    max-inline-size: 680px;
    font-weight: 400;
    text-wrap: balance;
    margin-block: 0 18px;
    color: #fff;
    font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.saa-hero p {
    max-inline-size: 520px;
    margin-block: 0 30px;
    color: rgb(255 255 255 / 0.9);
    font-size: 1.25rem;
    line-height: 1.6;
}
@media (max-width: 599px) {
    .saa-hero p {
        max-inline-size: 19rem; /* each of the two sentences breaks into two even lines */
        font-size: 1.125rem;
        text-wrap: balance;
    }
}
.saa-hero .wp-block-buttons {
    justify-content: center;
    margin-block-end: 0;
}
.saa-hero :focus-visible {
    outline-color: #fff;
}
:root .saa-hero .wp-block-button__link {
    min-block-size: 44px;
    padding-inline: 22px;
    background: #fff;
    border-color: #fff;
    color: var(--saa-ink);
}
:root .saa-hero .wp-block-button__link:hover {
    color: var(--saa-ink);
}
:root .saa-hero .is-style-outline .wp-block-button__link {
    background: transparent;
    border-color: rgb(255 255 255 / 0.85);
    color: #fff;
    font-weight: 500;
}
:root .saa-hero .is-style-outline .wp-block-button__link:hover {
    color: #fff;
}

/* ==========================================================================
   Home: bands (info with accordion, professionals) and image slots.
   The band's background is full width; its two columns sit in the content width.
   ========================================================================== */
.saa-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 64px);
    padding-inline: calc(max(0px, (100% - 1200px) / 2) + var(--saa-gutter)); /* lines up with the sections around it */
}
:root .saa-band > * {
    margin-block: 0; /* no block gap between the columns */
}
:root .saa-band--info {
    margin-block-start: 56px;
    background: var(--saa-band);
}
:root .saa-band--pros {
    margin-block-start: clamp(56px, 8vw, 88px);
    background: #fff;
}
.saa-band__content {
    display: grid;
    grid-template-columns: minmax(0, 520px);
    align-content: center;
    padding-block: 48px;
}
.saa-band--info .saa-band__content {
    align-content: start; /* headings stay put while sections open and close */
}
.saa-band--pros .saa-band__content {
    grid-template-columns: minmax(0, 480px);
}
.saa-band__content > * {
    margin-block: 0;
}
.saa-band--pros h2 {
    margin-block: 0 12px;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    line-height: 1.15;
}
.saa-band--pros p {
    margin-block: 0 18px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--saa-body);
}
.saa-band--pros .wp-block-buttons {
    margin-block-end: 0;
}
.saa-image-slot {
    position: relative;
    min-block-size: 440px;
    background: var(--saa-slot);
    margin: 0;
    overflow: hidden;
}
/* An image in a slot fills it edge to edge, cropped to the slot's shape */
:root .saa-image-slot > .wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    max-inline-size: none;
}
.saa-image-slot > .wp-block-image img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
}
.saa-band--info .saa-image-slot img {
    object-position: 30% 70%;
}
.saa-band--pros .saa-image-slot {
    min-block-size: 380px;
}
@media (max-width: 781px) {
    .saa-band {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 0; /* images run edge to edge; the text column keeps the gutter */
    }
    .saa-band__content {
        padding-inline: var(--saa-gutter);
    }
    .saa-image-slot,
    .saa-band--pros .saa-image-slot {
        min-block-size: 260px;
    }
    .saa-band__content {
        padding-block: 32px;
    }
}

/* ==========================================================================
   Accordion (core/details): round +/- marker, one open at a time via name=""
   ========================================================================== */
.wp-block-details {
    border-block-end: 1px solid var(--saa-line-strong);
    padding-block: 0;
}
.saa-accordion .wp-block-details:last-child {
    border-block-end: 0;
}
/* Room for the tallest section open, so the band keeps its height */
@media (min-width: 782px) {
    .saa-band--info .saa-accordion {
        min-block-size: 480px;
    }
}
.wp-block-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 44px;
    padding-block: 14px;
    font-family: var(--saa-font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--saa-ink);
    cursor: pointer;
    list-style: none;
}
.wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.wp-block-details > summary::marker {
    content: "";
}
.wp-block-details > summary::after {
    /* round marker: a plus whose vertical bar collapses when open */
    content: "";
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        #fff;
}
.wp-block-details[open] > summary::after {
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat,
        #fff;
}
.saa-band--info .wp-block-details > summary {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    padding-block: 18px;
}
.wp-block-details > summary:focus-visible {
    outline: 3px solid var(--saa-accent);
    outline-offset: 4px;
    border-radius: 8px;
}
.wp-block-details > :not(summary) {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--saa-body);
}
.wp-block-details > p {
    margin-block: 0 14px;
}
.wp-block-details > :last-child {
    margin-block-end: 20px;
}
@media (prefers-reduced-motion: no-preference) {
    .wp-block-details > summary::after {
        transition: background-size 0.2s ease-out;
    }
    @supports selector(::details-content) {
        .wp-block-details::details-content {
            block-size: 0;
            opacity: 0;
            overflow: clip;
            transition:
                block-size 0.24s ease-out,
                opacity 0.2s ease-out,
                content-visibility 0.24s allow-discrete;
        }
        .wp-block-details[open]::details-content {
            block-size: auto;
            opacity: 1;
        }
    }
}

/* ==========================================================================
   Footer: plain site map
   ========================================================================== */
.saa-footer {
    background: var(--saa-footer);
    color: var(--saa-text);
    border-block-start: 1px solid var(--saa-line);
    font-size: 1rem;
}
.saa-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
    gap: 32px 40px;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding: 56px var(--saa-gutter) 40px;
    line-height: 1.95;
}
:root .saa-footer__grid > *,
.saa-footer__col > * {
    margin-block: 0; /* flow layout's block gap would push columns 2-4 down */
}
.saa-footer h2 {
    margin: 0 0 4px;
    font-family: var(--saa-font-heading, "Narkisim", var(--saa-font));
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--saa-ink);
    line-height: 1.95;
}
.saa-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.saa-footer li + li {
    margin: 0;
}
.saa-footer a,
.saa-footer a:hover {
    text-decoration: none;
}
.saa-footer li a {
    display: inline-block;
    color: var(--saa-body);
}
.saa-footer li a:hover {
    color: var(--saa-accent);
}
/* the contact column is the one that matters: set apart by a thin vertical rule */
.saa-footer__col:last-child {
    padding-inline-start: 40px;
    border-inline-start: 1px solid var(--saa-line-strong);
}
/* a column without a heading starts one heading line lower, so the link lists align */
.saa-footer__col:not(:has(> h2)) {
    padding-block-start: calc(1.125rem * 1.95 + 4px);
}

/* Small inline icons, drawn as masks in the link colour */
.saa-ico::before {
    content: "";
    display: inline-block;
    inline-size: 1.05em;
    block-size: 1.05em;
    margin-inline-end: 0.4em;
    vertical-align: -0.17em;
    background: currentColor;
    mask: var(--saa-ico) center / contain no-repeat;
}
.saa-ico--chat {
    --saa-ico: url("assets/icon-chat.svg");
}
.saa-ico--phone {
    --saa-ico: url("assets/icon-phone.svg");
}
.saa-ico--mail {
    --saa-ico: url("assets/icon-mail.svg");
}
.saa-ico--globe {
    --saa-ico: url("assets/icon-globe.svg");
}
.saa-footer .saa-contact__mail {
    margin-block-start: 0.9rem;
}
/* Bottom bar: copyright and language link, under a thin rule in the content width */
.saa-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding: 0 var(--saa-gutter);
}
:root .saa-footer__bar > * {
    margin-block: 0;
}
.saa-footer__bar::before {
    content: "";
    flex: 0 0 100%;
    border-block-start: 1px solid var(--saa-line);
}
.saa-copyright,
.saa-footer__lang {
    padding-block: 14px 22px;
    font-size: 0.875rem;
    color: var(--saa-muted);
}
.saa-footer__lang a {
    color: var(--saa-muted);
}
.saa-footer__lang a:hover {
    color: var(--saa-accent);
}
@media (max-width: 899px) {
    .saa-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .saa-footer__col:last-child {
        grid-column: 1 / -1;
        padding-inline-start: 0;
        padding-block-start: 24px;
        border-inline-start: 0;
        border-block-start: 1px solid var(--saa-line-strong);
    }
}
@media (max-width: 559px) {
    .saa-footer__grid {
        gap: 24px 20px;
    }
    .saa-footer__col:not(:has(> h2)) {
        grid-column: 1 / -1;
        padding-block-start: 0;
    }
    .saa-footer__col:last-child {
        order: -1; /* contact lines first, links after */
        padding-block: 0 24px;
        border-block-start: 0;
        border-block-end: 1px solid var(--saa-line-strong);
    }
    .saa-footer__col:not(:has(> h2)) ul {
        columns: 2;
        column-gap: 20px;
    }
}

/* ==========================================================================
   Inner pages and lists
   ========================================================================== */
.wp-block-post-title {
    margin-block: 0 1.25rem;
}
/* Page header and content column: page and posts list share one width */
:root main.wp-block-group > .wp-block-post-title,
:root main.wp-block-group > h1,
:root body:not(.home) main.wp-block-group > .entry-content,
:root main.wp-block-group > .wp-block-query,
:root main.wp-block-group > .wp-block-post-date {
    max-inline-size: 860px;
}
:root main.wp-block-group > .wp-block-post-title,
:root main.wp-block-group > h1 {
    margin-block: 0.5rem 2rem;
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
}
:root body:not(.home) .entry-content > * {
    max-inline-size: none;
}
body:not(.home) .entry-content > :first-child {
    margin-block-start: 0;
}
body:not(.home) .entry-content > h2 {
    margin-block: 2.5rem 0.75rem;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
}
body:not(.home) .entry-content > h3 {
    margin-block: 1.75rem 0.5rem;
}
body:not(.home) .entry-content > ul {
    list-style: none;
    padding: 0;
}
/* Plain lists: small dot markers (only the page's own lists, never lists inside blocks) */
body:not(.home) .entry-content > ul > li {
    position: relative;
    padding-inline-start: 1.1rem;
}
body:not(.home) .entry-content > ul > li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.72em;
    inset-inline-start: 0;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--saa-line-strong);
}
/* Numbered lists keep their numbers, no dot marker */
body:not(.home) .entry-content > ol > li {
    padding-inline-start: 0.35rem;
}
body:not(.home) .entry-content > ol > li::before {
    content: none;
}
/* Literature page: the link-only lists become rows with thin dividers and a forward arrow */
body.page-literature .entry-content ul:has(> li > a:only-child) {
    border-block-start: 1px solid var(--saa-line);
}
body.page-literature .entry-content ul > li:has(> a:only-child) {
    padding: 0;
    margin: 0;
    border-block-end: 1px solid var(--saa-line);
}
body.page-literature .entry-content ul > li:has(> a:only-child)::before {
    content: none;
}
body.page-literature .entry-content ul > li > a:only-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 56px;
    color: var(--saa-ink);
    font-size: 1.25rem;
    text-decoration: none;
}
body.page-literature .entry-content ul > li > a:only-child::after {
    content: "";
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    background: currentColor;
    mask: url("assets/arrow.svg") center / contain no-repeat;
}
:root:not([dir="rtl"]) body.page-literature .entry-content ul > li > a:only-child::after {
    transform: scaleX(-1);
}
body.page-literature .entry-content ul > li > a:only-child:hover {
    color: var(--saa-accent);
}

/* Inline links in normal list items stay normal underlined links */
body:not(.home) .entry-content > :is(ul, ol) > li a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Single article: comfortable reading measure */
.single main.wp-block-group > .wp-block-post-title,
.single main.wp-block-group > .wp-block-post-date,
.single main.wp-block-group > .entry-content {
    max-inline-size: 42rem;
}
body.single .entry-content {
    font-size: 1.1875rem;
    line-height: 1.85;
}
body.single .entry-content > * {
    max-inline-size: none;
}
body.single .entry-content li {
    padding-inline-start: 0;
}
body.single .entry-content li::before {
    content: none;
}
body.single .entry-content ul {
    list-style: disc;
    padding-inline-start: 1.5rem;
}
.wp-block-post-date {
    margin-block: -1rem 2rem;
}

/* Posts list */
/* Articles: same two-column pattern as the home sections (title 4fr | text 8fr, same edges) */
:root .blog main.wp-block-group > h1,
:root .blog main.wp-block-group > .wp-block-query {
    max-inline-size: calc(1200px - 2 * var(--saa-gutter));
}
.blog .wp-block-post-template > li {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    align-items: start;
    padding-block: 1.75rem;
}
:root .blog .wp-block-post-template > li > * {
    margin-block: 0;
}
.blog .wp-block-post-template > li > .wp-block-post-title {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.blog .wp-block-post-template > li > .wp-block-post-excerpt,
.blog .wp-block-post-template > li > .saa-readmore {
    grid-column: 2;
}
.blog .wp-block-post-template > li > .wp-block-post-excerpt {
    max-inline-size: 680px;
}
@media (max-width: 781px) {
    .blog .wp-block-post-template > li {
        display: block;
    }
    .blog .wp-block-post-template > li > .wp-block-post-title {
        margin-block-end: 0.5rem;
    }
}
.blog .wp-block-post-template > li:first-child {
    padding-block-start: 0;
}
.blog .wp-block-post-template h2 {
    margin-block: 0 0.5rem;
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}
.blog .wp-block-post-excerpt {
    color: var(--saa-body);
}
.blog .wp-block-post-excerpt p {
    margin-block-end: 0.25rem;
}
.blog .wp-block-post-template .saa-readmore {
    margin-block-start: 0;
    min-block-size: 36px;
}
.wp-block-post-template {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wp-block-post-template > li {
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--saa-line);
}
.wp-block-post-template h2 {
    margin-block: 0 0.25rem;
    font-size: 1.5rem;
}
.wp-block-post-template h2 a {
    text-decoration: none;
}
.wp-block-post-template h2 a:hover {
    color: var(--saa-accent);
}
.wp-block-post-excerpt p {
    margin-block-end: 0;
}
.wp-block-post-date {
    color: var(--saa-muted);
    font-size: 0.9rem;
    margin-block-end: var(--saa-gap);
}
.wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-start: 1.5rem;
}
.wp-block-search__inside-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-block-end: var(--saa-gap);
}
.wp-block-search__input {
    flex: 1;
    min-block-size: 44px;
    padding: 0.5rem 0.9rem;
    font: inherit;
    background: #fff;
    border: 1px solid var(--saa-line-strong);
    border-radius: 12px;
}

/* "Hebrew only" notice on translated pages (meetings, literature) */
.saa-lang-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block: 0 1.75rem;
    padding: 0.9rem 1.35rem;
    border: 1px solid var(--saa-line-strong);
    border-radius: var(--saa-radius);
    background: var(--saa-band);
    color: var(--saa-ink);
    font-family: var(--saa-font);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}
.saa-lang-notice::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    background: currentColor;
    mask: url("assets/icon-globe.svg") center / contain no-repeat;
}