/* ===========================================
   pagePartials/legalModal.css - Footer "Privacy & Terms" modal
   ===========================================

   EVERY selector here is scoped to #pageModal-legal. `.page-modal-body` is a
   SHARED surface across all Tier-1 modals — aboutModal.css already declares its
   --about-* tokens on an unscoped `.page-modal-body`, which is exactly the kind
   of bleed this file must not add. Anything unscoped below would restyle About,
   Services, FAQs, Gallery, Portfolio and Contact too.

   cssReset.css is Meyer v2.0: it zeroes font/margin/padding on h1-h6, p, ul, li
   and a, sets `ol, ul { list-style: none }`, and body carries line-height 1.2.
   It does NOT list `button`. So the prose rules below RESTATE typography rather
   than adjust it — dropping any one of them leaves that element unstyled, not
   merely default-styled.

   The surface stays #ffffff (see .page-modal in publicPage.css). Do not theme it
   with --page-bg: html.modal-chrome-light forces the page surfaces white while a
   modal is open on mobile, so that the iOS safe-area strips match the modal. A
   themed modal would leave those strips mismatched.
   =========================================== */

#pageModal-legal .page-modal-body {
    color: var(--page-text-secondary);
    font-size: 14.5px;
    line-height: 1.65;
}

#pageModal-legal .legal-lede {
    margin: 0 0 4px;
    color: var(--page-text-primary);
    font-size: 15px;
    line-height: 1.6;
}

#pageModal-legal .legal-heading {
    margin: 24px 0 8px;
    color: var(--page-text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#pageModal-legal p {
    margin: 0 0 12px;
}

#pageModal-legal p:last-child {
    margin-bottom: 0;
}

#pageModal-legal strong {
    font-weight: 600;
    color: var(--page-text-primary);
}

#pageModal-legal .legal-divider {
    height: 1px;
    margin: 24px 0 16px;
    border: 0;
    /* Matches .page-modal-header's border-bottom, so the modal reads as one object. */
    background: #e5e7eb;
}

/* Both links stay neutral rather than using --page-accent: the accent is owner-
   chosen and never validated for contrast, and this surface is hardcoded white,
   so a pale accent would be unreadable here even though it passes on the page. */
#pageModal-legal .legal-inline-link,
#pageModal-legal .legal-outbound {
    color: var(--page-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

#pageModal-legal .legal-outbound {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

#pageModal-legal .legal-outbound svg {
    flex: none;
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

/* Pointer devices only: on touch this state sticks after the tap. */
@media (hover: hover) {
    #pageModal-legal .legal-inline-link:hover,
    #pageModal-legal .legal-outbound:hover {
        opacity: 0.75;
    }
}

#pageModal-legal .legal-footnote {
    margin: 6px 0 0;
    color: var(--page-text-secondary);
    font-size: 12.5px;
}