/* ─── 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 — The outermost wrapper that holds all accordion
 * items for a legal policy section. Centred with auto margins and capped at
 * 800px, it has a single outer border that visually frames the entire
 * accordion as one cohesive block rather than a list of separate cards.
 */
.legal-accordion-container {
    max-width: 800px;
    width: 100% !important;
    margin: 3rem auto 4rem !important;
    border: 1px solid #d1d5db !important; /* Full outer border */
    background-color: #ffffff !important;
}

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

/*
 * .legal-accordion-container .accordion-item — A single expandable item
 * within the accordion. Zero margin and padding let the container's border
 * flush-frame each item. A bottom border acts as a divider between rows,
 * giving the accordion a clean table-like appearance.
 */
.legal-accordion-container .accordion-item {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
}

/*
 * .legal-accordion-container .accordion-item:last-child — Removes the bottom
 * border from the final accordion item. Without this, the last item's border
 * would sit directly against the container's own bottom border, creating an
 * undesirable double-line at the foot of the accordion.
 */
/* Remove the bottom border on the last item so it doesn't double-stack */
.legal-accordion-container .accordion-item:last-child {
    border-bottom: none !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: 24px 30px !important; /* Forces the spacing inside the box */
    margin: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    background-color: #ffffff !important;
    transition: background-color 0.2s ease !important;
    min-height: 75px !important; /* Prevents rows from squishing */
}

/*
 * .legal-accordion-container .accordion-header:hover — Hover state for the
 * clickable accordion row. A very light grey tint on hover gives subtle
 * visual feedback that the row is interactive without being distracting.
 */
.legal-accordion-container .accordion-header:hover {
    background-color: #f9fafb !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: 20px !important;
    font-weight: 600 !important; /* Bolder text to match the PDF */
    color: #4b5563 !important; /* Darker slate grey */
    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 24px !important; /* Stops the icon from stretching */
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
    color: #6b7280 !important;
    display: block !important;
}

/*
 * .accordion-icon::before, .accordion-icon::after — The two lines that form
 * the plus/minus icon, drawn entirely with CSS pseudo-elements.
 * Both are absolutely positioned inside the icon container and filled with
 * currentColor so they inherit the grey set on the parent element.
 */
/* The actual lines of the plus/minus */
.legal-accordion-container .accordion-icon::before,
.legal-accordion-container .accordion-icon::after {
    content: '' !important;
    position: absolute !important;
    background-color: currentColor !important;
    display: block !important;
}

/*
 * .accordion-icon::before — The horizontal bar of the plus/minus icon.
 * Spans the full width of the icon container at 2px tall, centred
 * vertically with translateY(-50%).
 */
/* Horizontal bar */
.legal-accordion-container .accordion-icon::before {
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
}

/*
 * .accordion-icon::after — The vertical bar of the plus sign.
 * Spans the full height of the icon container at 2px wide, centred
 * horizontally with translateX(-50%). A transition on opacity and transform
 * allows it to smoothly fade and rotate away when the item is opened,
 * converting the plus into a minus.
 */
/* Vertical bar */
.legal-accordion-container .accordion-icon::after {
    top: 0 !important;
    left: 50% !important;
    width: 2px !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/*
 * .accordion-item[open] .accordion-icon::after — Collapsed state of the
 * vertical bar when the accordion item is open. Fading the opacity to 0
 * and rotating 90 degrees removes the vertical bar, leaving only the
 * horizontal bar visible as a minus sign to indicate the item can be closed.
 */
/* Hide vertical bar when open to create the minus sign */
.legal-accordion-container .accordion-item[open] .accordion-icon::after {
    opacity: 0 !important;
    transform: translateX(-50%) rotate(90deg) !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; /* Light grey block from design */
    padding: 30px !important;
    color: #4b5563 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    border-top: 1px solid #d1d5db !important; /* Line separating title and content */
}

/*
 * .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 {
        border-left: none !important; /* Removes side borders on mobile */
        border-right: none !important;
        margin: 2rem auto 3rem !important;
    }

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

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

    .legal-accordion-container .accordion-title {
        font-size: 17px !important;
    }
}