/* ─── Hero ─────────────────────────────────────────────────── */

/*
 * .legal-hero-banner — Full-width hero banner at the top of legal/policy pages.
 * Solid brand blue background with white text establishes a strong, authoritative
 * opening. Flex with justify-content: center keeps the inner grid-container
 * horizontally centred regardless of viewport width.
 */
.legal-hero-banner {
    background-color: #1C48AA;
    color: #ffffff;
    padding: 70px 5%;
    text-align: center;
    display: flex;
    justify-content: center;
}

/*
 * .legal-hero-banner .grid-container — Inner width-constraint wrapper inside
 * the hero banner. Capped at 800px and set to full width so content stays
 * readable on wide screens while still filling narrower viewports.
 */
.legal-hero-banner .grid-container {
    max-width: 800px;
    width: 100%;
}

/*
 * .legal-hero-banner .hero-title — Large display heading inside the hero banner.
 * clamp() fluidly scales the font between 2.5rem and 4rem based on viewport
 * width, avoiding abrupt size jumps. Uppercase text and wide letter-spacing
 * give it a formal, document-title quality appropriate for legal content.
 */
.legal-hero-banner .hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 24px;
    color: #ffffff;
}

/*
 * .legal-hero-banner .hero-description — Supporting paragraph text below the
 * hero title. Fluid font-size via clamp() keeps it proportional across devices.
 * max-width: 660px and auto margins centre the text block while limiting line
 * length for comfortable reading.
 */
.legal-hero-banner .hero-description {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    max-width: 660px;
    margin: 0 auto;
}

/*
 * .legal-hero-banner .hero-description p — Paragraphs inside the hero description.
 * Zero margin removes the default paragraph spacing so multiple <p> tags
 * inside the description don't create unwanted gaps.
 */
.legal-hero-banner .hero-description p {
    margin: 0;
}

/* ─── Mobile ────────────────────────────────────────────────── */

/*
 * @media (max-width: 768px) — Mobile adjustment for the hero banner.
 * Reduces horizontal padding from 5% to a fixed 24px and trims the vertical
 * padding so the banner takes up less of the viewport on smaller screens.
 */
@media (max-width: 768px) {
    .legal-hero-banner {
        padding: 50px 24px;
    }
}

/*
 * .legal-accordion-container, .legal-accordion-container * — Global box-sizing
 * reset applied to the accordion and all its descendants. !important overrides
 * any conflicting theme-level box-sizing rules that would otherwise cause
 * padded elements to overflow their containers.
 */
/* ─── Enforce Box Sizing to stop the theme from breaking widths ─── */
.legal-accordion-container,
.legal-accordion-container * {
    box-sizing: border-box !important;
}

/* ─── Accordion Container ───────────────────────────────────── */

.legal-accordion-container {
    max-width: 800px;
    width: 100% !important;
    margin: 3rem auto 4rem !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* ─── Accordion Item ────────────────────────────────────────── */

.legal-accordion-container .accordion-item {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background-color: #f3f4f6 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/*
 * .legal-accordion-container .accordion-item summary — The native <summary>
 * element that acts as the clickable toggle for each accordion item.
 * list-style: none removes the default disclosure triangle marker so only
 * the custom +/− icon is shown.
 */
/* Hide default browser arrows */
.legal-accordion-container .accordion-item summary {
    list-style: none !important;
}

/*
 * .accordion-item summary::-webkit-details-marker — Removes the built-in
 * WebKit/Blink disclosure arrow rendered by <details>/<summary> elements
 * in Chrome and Safari, ensuring the custom icon is the only toggle indicator.
 */
.legal-accordion-container .accordion-item summary::-webkit-details-marker {
    display: none !important;
}

/*
 * .accordion-item summary::marker — Hides the standard ::marker pseudo-element
 * that modern browsers use for <summary> disclosure arrows. Works alongside
 * the ::-webkit-details-marker rule to cover all browsers.
 */
.legal-accordion-container .accordion-item summary::marker {
    display: none !important;
    content: '' !important;
}

/* ─── Accordion Header (The clickable row) ──────────────────── */

/*
 * .legal-accordion-container .accordion-header — The visible, clickable row
 * that toggles an accordion item open or closed. Flex layout with space-between
 * pushes the title text to the left and the +/− icon to the right.
 * min-height: 75px prevents short titles from collapsing the row too thin,
 * and a background transition provides smooth hover feedback.
 */
.legal-accordion-container .accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    background-color: #f3f4f6 !important;
    transition: background-color 0.2s ease !important;
    min-height: unset !important;
    gap: 16px !important;
}

.legal-accordion-container .accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* ─── Title Text ────────────────────────────────────────────── */

/*
 * .legal-accordion-container .accordion-title — The policy section heading
 * displayed inside each accordion header. Semi-bold weight at 20px makes it
 * clearly legible while the slate-grey colour keeps it from competing with
 * body text in the expanded content below.
 */
.legal-accordion-container .accordion-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2d3340 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── +/− Icon Configuration ────────────────────────────────── */

/*
 * .legal-accordion-container .accordion-icon — Container element for the
 * custom plus/minus toggle icon. Fixed at 24x24px with position: relative
 * so its ::before and ::after pseudo-elements (the icon lines) can be
 * absolutely positioned within it. flex: 0 0 24px prevents it from
 * growing or shrinking within the header's flex row.
 */
.legal-accordion-container .accordion-icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
    position: static !important;
}

.legal-accordion-container .accordion-icon::before {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid #6b7280 !important;
    border-bottom: 2px solid #6b7280 !important;
    background-color: transparent !important;
    transform: rotate(45deg) !important;
    margin-top: -4px !important;
    top: auto !important;
    left: auto !important;
}

.legal-accordion-container .accordion-icon::after {
    display: none !important;
}

.legal-accordion-container .accordion-item[open] .accordion-icon {
    transform: rotate(180deg) !important;
}

.legal-accordion-container .accordion-item[open] .accordion-icon::before {
    margin-top: 4px !important;
}

/* ─── Accordion Content (The hidden text area) ──────────────── */

/*
 * .legal-accordion-container .accordion-content — The expanded body of an
 * accordion item, revealed when the header is clicked. A light grey background
 * visually separates it from the white header, making the open/closed state
 * immediately obvious. The top border reinforces this separation.
 */
.legal-accordion-container .accordion-content {
    background-color: #f3f4f6 !important;
    padding: 18px 24px 22px !important;
    color: #4b5563 !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    border-top: 1px solid #e5e7eb !important;
}

/*
 * .accordion-item.active .accordion-content — Explicitly sets the content
 * area to display: block when the item has an active class applied via
 * JavaScript, complementing the native <details> open attribute toggle.
 */
.legal-accordion-container .accordion-item.active .accordion-content {
    display: block;
}

/*
 * .legal-accordion-container .accordion-content p — Paragraph spacing inside
 * expanded accordion content. Removing top margin and setting a consistent
 * 1rem bottom margin prevents irregular gaps between paragraphs within the
 * policy text body.
 */
.legal-accordion-container .accordion-content p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/*
 * .legal-accordion-container .accordion-content p:last-child — Removes the
 * bottom margin from the final paragraph in each content block. This prevents
 * an unwanted gap between the last line of text and the accordion's bottom
 * padding edge.
 */
.legal-accordion-container .accordion-content p:last-child {
    margin-bottom: 0 !important;
}

/* ─── Mobile Adjustments ────────────────────────────────────── */

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the accordion.
 * Side borders are removed from the container so it runs edge-to-edge on
 * narrow screens. Reduced padding on the header and content rows gives more
 * horizontal space to the text on small devices. The title font-size is
 * also reduced slightly to prevent wrapping on narrow viewports.
 */
@media (max-width: 768px) {
    .legal-accordion-container {
        margin: 2rem auto 3rem !important;
    }

    .legal-accordion-container .accordion-header {
        padding: 18px 20px !important;
    }

    .legal-accordion-container .accordion-content {
        padding: 14px 20px 18px !important;
    }

    .legal-accordion-container .accordion-title {
        font-size: 0.9375rem !important;
    }
}