/* ══════════════════════════════════════════════════════════════ LEGAL PAGES — RESPONSIVE STYLES Loaded LAST in — overrides all embedded page styles. Targets: terms-of-service, privacy-policy, cookie-policy ══════════════════════════════════════════════════════════════ */ /* ── 1. Stop the layout viewport from expanding due to overflow (essential — without this, @media breakpoints won't fire correctly on devices when any element is wider than the viewport) ── */ html { overflow-x: hidden; max-width: 100%; } /* ── 2. All text must word-wrap — no clipping of long strings ── */ .legal-text, .legal-list li, .info-box-text, .success-box-text, .warning-box-text, .disclaimer-text, .glance-body, .legal-dept-detail, .legal-section-title, .subsection-title, .cookie-step-title, .cookie-step-body { word-break: break-word; overflow-wrap: break-word; } /* ── 3. Tables: keep within viewport — scrolling handled by ── */ /* the
wrapper in the HTML. ── */ .legal-table { max-width: 100%; white-space: normal; } .legal-table th { white-space: nowrap; } /* Wrapper applied to any table without a hard-coded wrapper */ .legal-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ══════════════════════════════════════════════════════════════ TABLET ≤ 1024px ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* Reorder layout so CONTENT comes first, TOC second */ .legal-layout { display: flex !important; flex-direction: column !important; gap: var(--sp-8) !important; align-items: stretch !important; /* override embedded align-items:start so children fill full width */ } .legal-content { order: 1; } .toc-sidebar { order: 2; position: static !important; padding: var(--sp-5) !important; } /* Render TOC as wrapping tag pills */ .toc-list { flex-direction: row !important; flex-wrap: wrap !important; gap: var(--sp-2) !important; } .toc-link { border-left: none !important; border: 1px solid var(--border) !important; border-radius: var(--r-full) !important; padding: var(--sp-1) var(--sp-3) !important; white-space: nowrap; } .toc-link.active { border-color: var(--toc-active-color) !important; } /* Cookie steps → single column */ .cookie-steps { grid-template-columns: 1fr !important; } .cookie-steps::before { display: none !important; } /* Glance cards → 2 columns */ .glance-cards { grid-template-columns: 1fr 1fr !important; } /* Browser grid → 2 columns */ .browser-grid { grid-template-columns: 1fr 1fr !important; } } /* ══════════════════════════════════════════════════════════════ SMALL TABLET / LARGE PHONE ≤ 768px ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .legal-hero { min-height: 38vh !important; padding-top: 72px !important; padding-bottom: var(--sp-8) !important; } .legal-hero-content { padding-inline: var(--sp-4) !important; } .legal-section-title { font-size: 1.35rem !important; } .legal-section { padding-bottom: var(--sp-8) !important; scroll-margin-top: 80px !important; } /* Info / warning / success boxes */ .info-box, .success-box, .warning-box { padding: var(--sp-4) var(--sp-5) !important; gap: var(--sp-3) !important; } /* Department contact card */ .legal-dept-card { padding: var(--sp-7) !important; max-width: 100% !important; } /* Glance cards: keep 2 columns down to 768px */ .glance-cards { grid-template-columns: 1fr 1fr !important; gap: var(--sp-3) !important; } .disclaimer-box { padding: var(--sp-5) !important; } /* Privacy policy rights grid */ .rights-grid { grid-template-columns: 1fr !important; } /* Cookie type cards */ .cookie-types-grid { grid-template-columns: 1fr !important; } /* Browser instructions grid */ .browser-grid { grid-template-columns: 1fr !important; } /* Consent manager */ .consent-manager-card { padding: var(--sp-5) !important; gap: var(--sp-5) !important; } /* Privacy team card — reduce large padding on mobile */ .privacy-team-card { padding: var(--sp-7) !important; max-width: 100% !important; } } /* ══════════════════════════════════════════════════════════════ PHONE ≤ 640px ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Hide TOC entirely on phones */ .toc-sidebar { display: none !important; } .legal-layout { gap: 0 !important; } .legal-hero { min-height: 32vh !important; padding-top: 68px !important; padding-bottom: var(--sp-6) !important; } .legal-badge { font-size: 10px !important; padding: var(--sp-1) var(--sp-3) !important; margin-bottom: var(--sp-4) !important; } /* Navigation strip */ .legal-nav-link { padding-inline: var(--sp-3) !important; font-size: 0.73rem !important; } /* Section numbering badge */ .section-num-badge { width: 28px !important; height: 28px !important; font-size: 10px !important; margin-bottom: var(--sp-2) !important; } .legal-section-title { font-size: 1.2rem !important; margin-bottom: var(--sp-4) !important; } .subsection-title { font-size: 0.95rem !important; margin-top: var(--sp-4) !important; } .legal-section { padding-bottom: var(--sp-6) !important; } /* Stack icon above text in boxes */ .info-box, .success-box, .warning-box { flex-direction: column !important; padding: var(--sp-4) !important; gap: var(--sp-2) !important; } .disclaimer-box { padding: var(--sp-4) !important; } .disclaimer-text { font-size: 10px !important; } /* Dept card */ .legal-dept-card { padding: var(--sp-6) !important; } .legal-dept-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; } .legal-dept-title { font-size: 1.05rem !important; } /* Glance → single column */ .glance-cards { grid-template-columns: 1fr !important; } .glance-card { padding: var(--sp-5) var(--sp-4) !important; } .glance-icon { width: 42px !important; height: 42px !important; font-size: 16px !important; } /* Cookie policy cards */ .cookie-type-card { padding: var(--sp-4) !important; } .browser-card { padding: var(--sp-4) !important; } .cookie-step { padding: var(--sp-4) !important; } /* Privacy team card */ .privacy-team-card { padding: var(--sp-5) !important; } /* Privacy policy rights card */ .rights-card { padding: var(--sp-4) !important; } } /* ══════════════════════════════════════════════════════════════ SMALL PHONE ≤ 480px ══════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .legal-hero { min-height: 28vh !important; padding-top: 65px !important; } .legal-hero-meta { font-size: 0.75rem !important; } .legal-text { font-size: 0.82rem !important; line-height: 1.8 !important; } .legal-list li { font-size: 0.82rem !important; gap: var(--sp-2) !important; } .info-box-text, .success-box-text, .warning-box-text { font-size: 0.82rem !important; } /* Table cells smaller */ .legal-table th, .legal-table td { padding: var(--sp-2) var(--sp-3) !important; font-size: 0.7rem !important; } .glance-card { padding: var(--sp-4) var(--sp-3) !important; } .glance-body { font-size: 0.72rem !important; } .legal-nav-link { padding-inline: var(--sp-2) !important; font-size: 0.7rem !important; } .consent-manager-card { padding: var(--sp-4) !important; flex-direction: column !important; text-align: center !important; gap: var(--sp-3) !important; } /* Make the consent button full-width so it never overflows */ .consent-manager-card .btn { width: 100% !important; justify-content: center !important; } /* Privacy team card */ .privacy-team-card { padding: var(--sp-4) !important; } .cookie-step-title { font-size: 0.9rem !important; } .cookie-step-body { font-size: 0.78rem !important; } } /* ══════════════════════════════════════════════════════════════ VERY SMALL PHONE ≤ 360px ══════════════════════════════════════════════════════════════ */ @media (max-width: 360px) { .legal-section-title { font-size: 1.05rem !important; } .legal-text, .legal-list li, .info-box-text, .success-box-text, .warning-box-text { font-size: 0.77rem !important; } .legal-dept-card { padding: var(--sp-5) !important; } .privacy-team-card { padding: var(--sp-3) var(--sp-2) !important; } } /* ══════════════════════════════════════════════════════════════ LEGAL NAV STRIP — center on all screens, stack on mobile ══════════════════════════════════════════════════════════════ */ /* Center the 3-link legal nav on desktop */ .legal-nav-inner { justify-content: center !important; } /* Stack vertically on mobile so no horizontal scroll needed */ @media (max-width: 768px) { .legal-nav-inner { flex-direction: column !important; align-items: center !important; overflow-x: hidden !important; gap: var(--sp-2) !important; padding-block: var(--sp-2) !important; } .legal-nav-link { width: 100% !important; justify-content: center !important; max-width: 260px !important; } }