/**
 * assets/css/components.css
 * Component-level styles, added incrementally as each component is built.
 * Currently covers: site header brand/logo/tagline, WhatsApp button (Step 2.1).
 */

/* ---------------------------------------------------------------------------
   HEADER BRAND
--------------------------------------------------------------------------- */
.site-header__logo {
    height: 40px;
    width: auto;
    border-radius: var(--radius-sm);
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-tight);
}

.site-header__name {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--color-text);
}

.site-header__tagline {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   WHATSAPP BUTTON (reusable across header, hero, jobs, pricing, etc.)
--------------------------------------------------------------------------- */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

.whatsapp-button:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

.whatsapp-button--header {
    /* header-specific tweaks, if any, added here as the design evolves */
}

/* ---------------------------------------------------------------------------
   SIDEBAR NAV LINKS + ICONS (Step 2.2)
--------------------------------------------------------------------------- */
.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: currentColor;
}

/* ---------------------------------------------------------------------------
   MOBILE MENU TOGGLE + PANEL (Step 2.3)
   Toggle button is desktop-hidden; only shown under the 768px breakpoint,
   where it replaces the (also-hidden-there) desktop sidebar navigation.
   Bug fix (Step 15.2): this block used to be keyed off `.hamburger-toggle`,
   a class that was never actually present in includes/header.php's markup
   (the real button uses `.mobile-menu-toggle`, per assets/js/main.js's
   querySelector and includes/header.php's <button> class). That mismatch
   meant the button was never hidden on desktop/tablet and its inline SVG
   icon had no explicit size, so it could render at the browser's default
   SVG intrinsic size on every breakpoint. Renamed every selector below to
   `.mobile-menu-toggle` to match the real markup, and replaced the old
   (equally unused — header.php's icon is one static SVG, not three
   `.hamburger-toggle__bar` elements) hamburger-morph rules with simple
   icon sizing instead.
--------------------------------------------------------------------------- */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.mobile-menu-toggle svg {
    width: 22px;
    height: 22px;
}

.mobile-menu-toggle:hover {
    background-color: var(--color-primary-light);
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------
   MOBILE MENU PANEL (Step 2.3)
   Bug fix (Step 15.2): includes/sidebar.php has rendered `#mobile-menu` /
   `.mobile-menu__nav` since Step 2.3, but no CSS ever styled them — the
   panel had no positioning, sizing, or link styles, so opening it (JS
   removes the `hidden` attribute) would have dropped an unstyled `<nav>`
   into normal page flow instead of showing an overlay panel. Added: a
   fixed full-height slide-in panel from the right, hidden outside the
   mobile breakpoint (defense in depth alongside the `hidden` attribute
   assets/js/main.js already manages), plus nav-link styling reusing the
   sidebar's look, plus a scrim behind it so the underlying page content
   is visibly dimmed while it's open.
--------------------------------------------------------------------------- */
.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        width: min(320px, 85vw);
        height: 100vh;
        overflow-y: auto;
        background-color: var(--color-surface);
        box-shadow: var(--shadow-lg);
        padding: var(--space-5) var(--space-4);
        transform: translateX(100%);
        transition: transform var(--transition-base);
    }

    .mobile-menu.is-open {
        transform: translateX(0);
    }

    /* Dim the page behind the open panel; sits below the panel (z-index 200)
       but above everything else, including the floating WhatsApp button
       (already hidden while the menu is open, per the rule below). */
    .mobile-menu.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-color: rgba(31, 42, 36, 0.4);
    }
}

.mobile-menu__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-menu__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu__nav a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.mobile-menu__close {
    display: block;
    margin-left: auto;
    margin-bottom: var(--space-5);
    width: 36px;
    height: 36px;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.mobile-menu__close:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON (Step 2.3) — mobile only
   Reuses the base .whatsapp-button styles; this modifier repositions it as a
   fixed circular pill in the bottom-right corner, above the mobile menu but
   below the mobile menu overlay so it doesn't float over the open panel.
--------------------------------------------------------------------------- */
.whatsapp-button--floating {
    display: none;
}

@media (max-width: 768px) {
    .whatsapp-button--floating {
        display: inline-flex;
        position: fixed;
        bottom: var(--space-5);
        right: var(--space-5);
        z-index: 150;
        box-shadow: var(--shadow-lg);
    }

    /* Hide the floating button while the full mobile menu is open, so the
       two mobile-only controls never visually overlap. */
    body.mobile-menu-open .whatsapp-button--floating {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   HERO SECTION (Step 3.1)
   Two distinct states, per the brief: an uploaded image (no text overlay) or
   a clean text-only fallback when no hero image is configured/enabled.
--------------------------------------------------------------------------- */
.hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero--image .hero__picture {
    display: block;
    width: 100%;
}

.hero__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.hero--text .hero__fallback {
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.hero__fallback-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.hero__fallback-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
}

@media (max-width: 768px) {
    .hero__image {
        max-height: 320px;
    }

    .hero--text .hero__fallback {
        padding: var(--space-8) var(--space-4);
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — SHARED FORM STYLES (Step 3.2)
   Minimal, reusable admin form chrome (no dedicated admin CSS file per the
   locked folder structure). Every future admin CRUD page (Phases 4-13)
   should reuse these classes rather than inventing new ones. Admin pages are
   intentionally self-contained HTML (no shared admin header/nav yet) — a
   proper admin layout partial is deferred until Phase 12 (Admin
   Authentication) gives us a real page to wrap it around.
--------------------------------------------------------------------------- */
.admin-body {
    background-color: var(--color-bg);
}

.admin-main {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

.admin-main--dashboard {
    max-width: 960px;
}

/* Shared admin navigation (Step 17.1) — includes/admin_nav.php */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.admin-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.admin-nav__extra {
    display: flex;
    gap: var(--space-1);
}

.admin-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-decoration: none;
}

.admin-nav__link:hover {
    background-color: var(--color-surface);
}

.admin-nav__link--active {
    background-color: var(--color-primary);
    color: #fff;
}

.admin-nav__link--ghost {
    color: var(--color-text-muted);
}

.admin-dashboard__welcome {
    color: var(--color-text-muted);
}

.admin-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
}

.admin-alert--success {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-alert--error {
    background-color: #FBEAE8;
    color: var(--color-danger);
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-form__group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-form__group legend {
    font-weight: var(--fw-semibold);
    padding: 0 var(--space-2);
}

.admin-form__preview {
    max-width: 240px;
    max-height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.admin-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.admin-form__hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.admin-form__input,
.admin-form__textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    resize: vertical;
}

.admin-form__input:focus-visible,
.admin-form__textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.admin-form__submit {
    align-self: flex-start;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.admin-form__submit:hover {
    background-color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   ABOUT SECTION (Step 4.1)
--------------------------------------------------------------------------- */
.about__title {
    margin-bottom: var(--space-5);
}

.about__description {
    color: var(--color-text);
    margin-bottom: var(--space-6);
    max-width: 70ch;
}

.about__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.about__card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.about__card-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
    .about__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   PROGRAMS SECTION (Step 5.1)
--------------------------------------------------------------------------- */
.programs__title {
    margin-bottom: var(--space-6);
}

.programs__empty {
    color: var(--color-text-muted);
}

.programs__category {
    margin-bottom: var(--space-8);
}

.programs__category:last-child {
    margin-bottom: 0;
}

.programs__category-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

.programs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.program-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.program-card__image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.program-card__body {
    padding: var(--space-4);
}

.program-card__name {
    margin-bottom: var(--space-2);
}

.program-card__description {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

@media (max-width: 1024px) {
    .programs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .programs__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — LIST / TABLE VIEW (Step 5.2)
   First admin page with a list view (previous CRUD pages — Hero, About —
   were single-row forms only). Reuses .admin-body/.admin-main/.admin-alert
   from Step 3.2; adds table + toolbar + status badge + inline action forms.
   Later CRUD phases (Teachers, Jobs, Pricing, Policies, Students, Classes)
   should reuse these same classes rather than inventing new ones.
--------------------------------------------------------------------------- */
.admin-main--list {
    max-width: 900px;
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

.admin-btn {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.admin-btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

.admin-btn--link {
    background: none;
    color: var(--color-primary);
    padding: 0;
    font-weight: var(--fw-medium);
}

.admin-btn--link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.admin-list-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Bug fix (Step 15.2): admin list tables (Jobs/Policies/Programs/Teachers/
   Classes/Students) have several columns and no minimum column widths, so on
   narrow phone viewports they were overflowing the .admin-main container and
   causing the whole admin page to scroll horizontally. Wrap the <table> in
   an element with this class (see the 6 admin/*.php list views) so only the
   table itself scrolls — same pattern already used for the public Pricing
   tables via .pricing-table__wrapper. The table keeps its own border/radius/
   overflow:hidden for corner-clipping; this wrapper only adds the scroll. */
.admin-table-wrapper {
    overflow-x: auto;
}

.admin-list-table th,
.admin-list-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}

.admin-list-table th {
    background-color: var(--color-bg);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
}

.admin-list-table tr:last-child td {
    border-bottom: none;
}

.admin-list__empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

.admin-badge {
    display: inline-block;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.admin-badge--active {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-badge--inactive {
    background-color: var(--color-border);
    color: var(--color-text-muted);
}

.admin-list__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.admin-list__actions form {
    display: inline;
}

/* ---------------------------------------------------------------------------
   ADMIN REORDER BUTTONS (Step 9.2 — policies up/down)
--------------------------------------------------------------------------- */
.admin-reorder {
    display: flex;
    gap: var(--space-1);
}

.admin-reorder__btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1;
}

.admin-reorder__btn:hover:not(:disabled) {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-reorder__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.admin-form__thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   TEACHERS SECTION (Step 6.1)
   Same grouped-grid pattern as Programs (Step 5.1): a title, then one
   sub-heading + card grid per group (Male / Female here, vs. per-category
   there). Reuses .programs__grid's responsive column logic at the same
   breakpoints for consistency.
--------------------------------------------------------------------------- */
.teachers__title {
    margin-bottom: var(--space-6);
}

.teachers__empty {
    color: var(--color-text-muted);
}

.teachers__group {
    margin-bottom: var(--space-8);
}

.teachers__group:last-child {
    margin-bottom: 0;
}

.teachers__group-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

.teachers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.teacher-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.teacher-card__photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.teacher-card__photo--placeholder {
    background-color: var(--color-primary-light);
}

.teacher-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.teacher-card__name {
    margin-bottom: var(--space-1);
}

.teacher-card__specialization {
    color: var(--color-primary-dark);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

.teacher-card__qualifications {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.teacher-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

@media (max-width: 1024px) {
    .teachers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .teachers__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — CHECKBOX MULTI-SELECT LIST (Step 6.2b)
   Used for Teachers' "Assigned Programs" field. Plain checkboxes in a
   scrollable box — no library, per the "no unnecessary dependencies" rule.
   Reuse for any future admin many-to-many field (e.g. if Pricing/Policies
   ever need something similar).
--------------------------------------------------------------------------- */
.admin-form__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

/* ---------------------------------------------------------------------------
   JOBS SECTION (Step 7.1)
   Stacked list rather than a grid (job.program-card/teacher-card grid) —
   postings carry more text (description/requirements) so a card grid would
   cramp readability. Reuses .admin-btn for the Apply link's look when the
   method is email; the WhatsApp variant comes styled from
   render_whatsapp_button() via includes/whatsapp.php (Step 2.1/11.1).
--------------------------------------------------------------------------- */
.jobs__title {
    margin-bottom: var(--space-6);
}

.jobs__empty {
    color: var(--color-text-muted);
}

.jobs__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.job-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.job-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.job-card__title {
    margin: 0;
}

.job-card__type {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--color-primary-dark);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.job-card__description {
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.job-card__requirements {
    margin-bottom: var(--space-4);
}

.job-card__requirements h4 {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.job-card__requirements p {
    color: var(--color-text);
    font-size: var(--fs-sm);
}

.job-card__apply-link {
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   PRICING SECTION (Step 8.1)
   One simple table per program group, "General" group (plans with a null
   program_id, per Step 0.2 Decisions Log) rendered last. Deliberately plain
   — no card styling like Programs/Teachers, since tabular duration/
   frequency/price data reads better as an actual table.
--------------------------------------------------------------------------- */
.pricing__title {
    margin-bottom: var(--space-6);
}

.pricing__empty {
    color: var(--color-text-muted);
}

.pricing__group {
    margin-bottom: var(--space-8);
}

.pricing__group:last-child {
    margin-bottom: 0;
}

.pricing__group-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.pricing-table__wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
}

.pricing-table th,
.pricing-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.pricing-table th {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table__description-row td {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   POLICIES SECTION (Step 9.1)
   Native <details>/<summary> accordion — no JS, fully keyboard-operable,
   correct expanded/collapsed semantics out of the box. First item starts
   open (rendered with the `open` attribute in policies.php) so visitors
   see there's content here without needing to click anything first.
--------------------------------------------------------------------------- */
.policies__title {
    margin-bottom: var(--space-6);
}

.policies__empty {
    color: var(--color-text-muted);
}

.policies__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.policy-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
}

.policy-item__summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom chevron instead of the default browser marker, so it matches the
   site's visual language and can be rotated on open/close. */
.policy-item__summary::-webkit-details-marker {
    display: none;
}

.policy-item__summary::after {
    content: "+";
    font-weight: 400;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: var(--space-3);
}

.policy-item[open] .policy-item__summary::after {
    content: "−";
}

.policy-item__content {
    margin-top: var(--space-3);
    color: var(--color-text);
}