/* =============================================================================
   Legal pages (page-legal.php) — Terms of Service, Terms of Use, Privacy Policy

   Styles the raw output of the WordPress content editor, so an editor can write
   headings, paragraphs, lists, links, blockquotes and tables normally and get a
   result that matches the site. There are no ACF fields behind any of this.

   ---------------------------------------------------------------------------
   Two things this file has to work around, both in style.css:

   1. `h1, h2, h3 { font-size: 76px !important; line-height: 1.1;
      font-weight: 400 }` is a bare, top-level element rule. It is meant for
      the big display headings on the home page, but it hits every heading on
      the site — including the ones inside policy copy. Heading font-sizes
      below therefore carry !important; it is the only way to beat it. (The
      weight and line-height in that rule are not !important, so those are
      overridden normally.)

   2. Vertical rhythm is set in px, not em. With em, the heading margins were
      multiplied by that inherited 76px, which is what produced the ~167px
      gaps above each section heading.

   Type is calibrated against the theme's own long-form copy —
   `.product-detail__desc-text` is 15px/1.65 — rather than against the display
   headings, so a policy page reads like body text on this site and not like a
   hero banner.
   ========================================================================== */

.legal-section {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 64px;
}

/* Caps the measure at roughly 75 characters. Without this the copy runs the
   full width of the column, which is far too long a line to track at this
   size. Centred so it sits under the banner title. */
.legal-article {
    max-width: 780px;
    margin: 0 auto;
    font-family: 'Nexa', 'NexaCustom', sans-serif;
    color: #333;
    text-align: left;
}

/* Single brand accent at the top of the document — echoes the 44x3 red bar
   the inquiry modal uses. Deliberately one instance, rather than a rule under
   all eighteen headings, which read as noise. */
.legal-article::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    background: #B22124;
    border-radius: 2px;
    margin-bottom: 20px;
}

/* "Last updated" — the first thing a reader looks for, but not a headline. */
.legal-updated {
    font-family: 'Nexa', 'NexaCustom', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #8a8a8a;
    margin: 0 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec;
}

/* -----------------------------------------------------------------------------
   Editor content
   -------------------------------------------------------------------------- */

.legal-content {
    font-family: 'Nexa', 'NexaCustom', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: #333;
}

/* --- Headings -------------------------------------------------------------
   font-size needs !important to beat the bare `h1,h2,h3` rule in style.css
   (see the file header). Margins are px so the rhythm is fixed. */

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
    font-family: 'Nexa', 'NexaCustom', sans-serif;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.legal-content h2 {
    font-size: 21px !important;
    margin: 36px 0 10px;
}

.legal-content h3 {
    font-size: 17px !important;
    margin: 26px 0 8px;
}

.legal-content h4 {
    font-size: 15.5px !important;
    margin: 22px 0 6px;
}

.legal-content h5,
.legal-content h6 {
    font-size: 15px !important;
    margin: 20px 0 6px;
    color: #333;
}

/* The document opens directly under the "Last updated" divider. */
.legal-content > :first-child {
    margin-top: 0;
}

/* --- Body ----------------------------------------------------------------- */

/* style.css has a bare `p { color: #000 }` rule, which beats the colour
   inherited from .legal-article. Without pinning both, paragraphs render
   darker than list items and the copy looks two-tone. */
.legal-content p,
.legal-content li,
.legal-content td {
    color: #333;
}

.legal-content p {
    margin: 0 0 14px;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content strong,
.legal-content b {
    font-weight: 700;
    color: #111;
}

.legal-content a {
    color: #B22124;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
    /* Policy pages carry long URLs and addresses — never let them overflow. */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legal-content a:hover,
.legal-content a:focus {
    color: #8d1a1d;
}

/* --- Lists ---------------------------------------------------------------- */

.legal-content ul,
.legal-content ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 6px;
    line-height: 1.7;
    padding-left: 2px;
}

.legal-content li:last-child {
    margin-bottom: 0;
}

.legal-content ul ul,
.legal-content ol ol,
.legal-content ul ol,
.legal-content ol ul {
    margin-top: 6px;
    margin-bottom: 0;
}

.legal-content ul > li::marker {
    color: #B22124;
}

.legal-content ol > li::marker {
    color: #777;
    font-weight: 700;
}

/* --- Blocks --------------------------------------------------------------- */

.legal-content blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    background: #fafafa;
    border-left: 3px solid #F9D71E;
    font-size: 14.5px;
    line-height: 1.7;
    color: #444;
}

.legal-content blockquote p:last-child {
    margin-bottom: 0;
}

.legal-content hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #ececec;
}

.legal-content img {
    max-width: 100%;
    height: auto;
}

.legal-content code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.92em;
    background: #f2f2f2;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Tables (data-retention schedules, cookie lists) scroll inside their own
   box rather than forcing the page to scroll sideways on a phone. */
.legal-content .wp-block-table,
.legal-content figure.wp-block-table,
.legal-content .legal-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
}

.legal-content th,
.legal-content td {
    border: 1px solid #e6e6e6;
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background: #fafafa;
    font-weight: 700;
    color: #111;
    font-size: 13.5px;
    letter-spacing: 0.01em;
}

.legal-edit {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
    font-size: 13px;
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .legal-content {
        font-size: 15px;
    }

    .legal-content h2 {
        font-size: 20px !important;
        margin-top: 32px;
    }

    .legal-content h3 {
        font-size: 16.5px !important;
        margin-top: 24px;
    }
}

@media (max-width: 767px) {
    .legal-section {
        padding-top: 36px;
        padding-bottom: 44px;
    }

    .legal-content {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .legal-content h2 {
        font-size: 18.5px !important;
        margin: 28px 0 8px;
    }

    .legal-content h3 {
        font-size: 16px !important;
        margin: 22px 0 6px;
    }

    .legal-content h4 {
        font-size: 15px !important;
        margin: 18px 0 6px;
    }

    .legal-content h5,
    .legal-content h6 {
        font-size: 14.5px !important;
    }

    .legal-content ul,
    .legal-content ol {
        padding-left: 18px;
    }

    .legal-content blockquote {
        margin: 16px 0;
        padding: 12px 14px;
    }

    .legal-updated {
        font-size: 12.5px;
        margin-bottom: 22px;
        padding-bottom: 14px;
    }

    .legal-article::before {
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .legal-section {
        padding-top: 28px;
        padding-bottom: 36px;
    }

    .legal-content h2 {
        font-size: 17.5px !important;
    }

    .legal-content table {
        font-size: 13px;
    }

    .legal-content th {
        font-size: 12.5px;
    }

    .legal-content th,
    .legal-content td {
        padding: 8px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-content a {
        transition: none;
    }
}