/* =============================
   SopraReede - style.css
   Design: modern_bold (bold, bright, geometric, high contrast)
   Brand: Primary #0F172A, Secondary #C7A240, Accent #F5F7FA
   Fonts: Trebuchet MS (display), Arial (body)
   Layout: FLEXBOX ONLY
   ============================= */

/* ========= Reset & Normalize ========= */
* { box-sizing: border-box; }
html { line-height: 1.4; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ========= CSS Variables (with fallbacks in rules) ========= */
:root {
  --color-primary: #0F172A;
  --color-secondary: #C7A240;
  --color-accent: #F5F7FA;
  --color-white: #FFFFFF;
  --text-dark: #0F172A;
  --text-light: #FFFFFF;
  --muted: #64748B;
  --shadow-1: 0 6px 20px rgba(15, 23, 42, 0.12);
  --shadow-2: 0 10px 30px rgba(15, 23, 42, 0.18);
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --gap-xs: 8px;
  --gap-s: 12px;
  --gap-m: 16px;
  --gap-l: 24px;
  --gap-xl: 32px;
  --gap-xxl: 48px;
}

/* ========= Base Typography ========= */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-dark);
  background: var(--color-accent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 800; color: var(--text-dark); }

h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; }
h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.2px; }
h3 { font-size: 20px; line-height: 1.3; }
p, li { font-size: 16px; line-height: 1.7;  }
strong { font-weight: 800; }
.eyebrow { text-transform: uppercase; font-weight: 800; letter-spacing: 1.6px; color: var(--color-secondary); font-size: 12px; }

@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  p, li { font-size: 18px; }
}

/* Selection */
::selection { background: var(--color-secondary); color: var(--text-dark); }

/* ========= Mandatory Spacing & Alignment Patterns ========= */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* ========= Global Layout Helpers (Flex only) ========= */
.container { width: 100%; padding: 0 20px; display: flex; justify-content: center; }
.content-wrapper { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: var(--gap-xl); padding: 40px 0; }

/* Vertical spacing between sections */
main > section { margin-bottom: 60px; }

/* ========= Buttons ========= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 100px; font-weight: 800; letter-spacing: 0.3px; text-align: center; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border: 2px solid transparent; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.btn-primary { background: var(--color-secondary); color: var(--text-dark); box-shadow: var(--shadow-1); }
.btn-primary:hover { box-shadow: var(--shadow-2); color: var(--text-light); }

.btn-secondary { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-secondary:hover { background: var(--color-secondary); color: var(--text-dark); box-shadow: var(--shadow-1); }

.cta-group, .cta-inline, .cta-strip { display: flex; gap: var(--gap-l); flex-wrap: wrap; align-items: center; }
.cta-strip { justify-content: center; }

/* ========= Header ========= */
header { position: sticky; top: 0; z-index: 1000; background: var(--color-white); box-shadow: 0 1px 0 rgba(15,23,42,0.08); }
header .container { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-m); }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: 20px; font-weight: 800; }
.main-nav a { color: var(--text-dark); padding: 10px 12px; border-radius: 10px; transition: background-color 0.2s ease, color 0.2s ease; }
.main-nav a:hover { background: var(--color-accent); color: var(--text-dark); }

.header-ctas { display: none; align-items: center; gap: var(--gap-m); }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 22px; }
.mobile-menu-toggle:hover { background: #0b1224; }

/* Off-canvas mobile menu */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 86%; max-width: 420px; background: var(--color-primary); color: var(--text-light); display: flex; flex-direction: column; padding: 24px; gap: 20px; transform: translateX(100%); transition: transform 0.3s ease; z-index: 1200; box-shadow: -8px 0 24px rgba(0,0,0,0.25); }
.mobile-menu.open, .mobile-menu.is-open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.08); color: #fff; font-size: 20px; }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: 10px; color: #fff; font-weight: 800; background: rgba(255,255,255,0.04); }
.mobile-nav a:hover { background: rgba(255,255,255,0.12); }

/* Show desktop nav on larger screens */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .header-ctas { display: flex; }
}

/* ========= Hero Section ========= */
.hero { background: var(--color-primary); color: var(--text-light); position: relative; overflow: hidden; }
.hero .content-wrapper { padding: 60px 0; gap: var(--gap-l); }
.hero h1, .hero p, .hero .eyebrow { color: var(--text-light); }
.hero h1 { position: relative; padding-top: 6px; }
.hero h1::before { content: ""; position: absolute; top: -16px; left: 0; width: 72px; height: 6px; background: var(--color-secondary); border-radius: 3px; }

/* Geometric accent */
.hero::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 20px; background: rgba(199,162,64,0.12); transform: rotate(18deg); }

/* Trust badges */
.trust-badges ul { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; font-weight: 700; }
.trust-badges img { width: 22px; height: 22px; }

/* ========= Text Sections ========= */
.text-section { display: flex; flex-direction: column; gap: 16px; }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 10px; }

/* Custom bullets */
.text-section ul li { display: flex; align-items: flex-start; gap: 12px; }
.text-section ul li::before { content: ""; display: inline-flex; width: 10px; height: 10px; background: var(--color-secondary); border-radius: 3px; margin-top: 8px; flex: 0 0 10px; }

/* Ordered list numbers (bold modern look) */
.text-section ol { counter-reset: step; }
.text-section ol li { counter-increment: step; display: flex; gap: 12px; }
.text-section ol li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-secondary); color: var(--text-dark); font-weight: 800; margin-top: 2px; }

/* Inline icons in paragraphs */
.text-section p img { display: inline-flex; vertical-align: middle; margin-right: 8px; }

/* Stats strip */
.stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-accent); border: 2px solid rgba(15,23,42,0.08); font-weight: 800; }

/* ========= Testimonials (light background, dark text) ========= */
.testimonial-card { background: #fff; color: var(--text-dark); border: 2px solid rgba(15,23,42,0.08); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--muted); }

/* ========= Footer ========= */
footer { background: var(--color-primary); color: var(--text-light); }
footer .content-wrapper { padding: 40px 0; gap: var(--gap-l); }
footer a { color: #E2E8F0; }
footer a:hover { color: var(--color-secondary); }

/* Footer layout groups */
footer .content-wrapper { display: flex; flex-direction: column; }
.footer-brand, .footer-nav, .footer-legal, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-nav, .footer-legal { flex: 1 1 200px; }
.footer-brand img { width: 44px; height: 44px; }

@media (min-width: 992px) {
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}

/* ========= Links ========= */
a { transition: color 0.2s ease, background-color 0.2s ease; }
a:hover { color: var(--color-secondary); }
a:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 6px; }

/* ========= Generic Cards (for any future content) ========= */
.card { background: #fff; border-radius: var(--radius-l); border: 2px solid rgba(15,23,42,0.08); box-shadow: var(--shadow-1); padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ========= Alignment Utilities ========= */
.align-center { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: var(--gap-m); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-l); }

/* ========= Responsive Rules ========= */
/* Mobile-first: column stacks. Switch to row on wider screens */
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; align-items: center; }
}

/* ========= Page-specific Tweaks ========= */
/* Headings inside hero for various pages */
.hero .cta-group .btn { border-width: 2px; }

/* Navigation spacing on content pages */
main .content-wrapper > h2 { position: relative; padding-top: 8px; }
main .content-wrapper > h2::before { content: ""; position: absolute; top: -10px; left: 0; width: 48px; height: 4px; background: var(--color-secondary); border-radius: 3px; }

/* Lists spacing */
.text-section h3 { margin-top: 8px; }

/* ========= Forms / Inputs (for any future additions) ========= */
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 12px 14px; border: 2px solid rgba(15,23,42,0.18); border-radius: 12px; background: #fff; color: var(--text-dark); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input:focus, textarea:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(199,162,64,0.25); }
label { font-weight: 800; margin-bottom: 6px; display: inline-flex; }

/* ========= Cookie Consent Banner ========= */
.cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1600; background: #fff; color: var(--text-dark); border: 2px solid rgba(15,23,42,0.10); border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: 18px; display: flex; flex-direction: column; gap: 14px; transform: translateY(140%); transition: transform 0.35s ease; }
.cookie-banner.show, .cookie-banner.is-visible, .cookie-banner[aria-hidden="false"] { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-banner .btn { padding: 12px 18px; }
.cookie-banner .btn-ghost { background: transparent; color: var(--text-dark); border: 2px solid rgba(15,23,42,0.20); }
.cookie-banner .btn-ghost:hover { background: var(--color-accent); }

/* ========= Cookie Preferences Modal ========= */
.cookie-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 1700; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; }
.cookie-overlay.open, .cookie-overlay.is-open, .cookie-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.cookie-modal { width: 92%; max-width: 720px; background: #fff; color: var(--text-dark); border-radius: 20px; border: 2px solid rgba(15,23,42,0.10); box-shadow: var(--shadow-2); padding: 20px; display: flex; flex-direction: column; gap: 16px; transform: translateY(20px); transition: transform 0.3s ease; }
.cookie-overlay.open .cookie-modal, .cookie-overlay.is-open .cookie-modal, .cookie-overlay[aria-hidden="false"] .cookie-modal { transform: translateY(0); }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 12px; background: var(--color-accent); border: 2px solid rgba(15,23,42,0.08); }
.cookie-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Toggle switch */
.toggle { position: relative; width: 52px; height: 30px; border-radius: 999px; background: rgba(15,23,42,0.2); transition: background 0.2s ease; display: inline-flex; align-items: center; padding: 3px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .knob { width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.toggle input:checked + .knob { transform: translateX(22px); }
.toggle input:checked ~ .toggle { background: var(--color-secondary); }

/* ========= Accessibility helpers ========= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ========= Layout specifics for header/footer columns on desktop (flex only) ========= */
/* Footer top area on index page has a .footer-brand block; others have two rows; use flex wrapping */
footer .content-wrapper > * { margin-right: 0; }

/* ========= Page container spacing adjustments ========= */
/* Ensure minimum 20px spacing between any content blocks */
.content-wrapper > * + * { margin-top: 12px; }
@media (min-width: 768px) { .content-wrapper > * + * { margin-top: 0; } }

/* ========= Navigation focus and active cues ========= */
.main-nav a:focus-visible, .mobile-nav a:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

/* ========= Image + Text sections (if used) ========= */
.text-image-section > * { flex: 1 1 300px; }

/* ========= Section backgrounds alternation (visual rhythm) ========= */
main > section:nth-of-type(2n) { background: #fff; }
main > section:nth-of-type(2n) .content-wrapper { padding: 50px 0; }

/* ========= Header refined spacing on larger screens ========= */
@media (min-width: 992px) {
  header .container { gap: var(--gap-l); }
  .main-nav a { padding: 10px 14px; }
}

/* ========= Trust badges on light sections (fallback) ========= */
section:not(.hero) .trust-badges li { background: #fff; color: var(--text-dark); border: 2px solid rgba(15,23,42,0.08); }

/* ========= Tables (if added later) ========= */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(15,23,42,0.1); }
th { background: var(--color-accent); font-weight: 800; }

/* ========= Ensure adequate gaps in lists of links (footer, FAQs) ========= */
.footer-nav, .footer-legal { gap: 8px; }

/* ========= Header height protection to prevent overlap ========= */
main { display: flex; flex-direction: column; }

/* ========= Ensure no element overlap via spacing ========= */
section .cta-group, section .cta-inline, section .cta-strip, .testimonial-card { margin-top: 4px; }

/* ========= Desktop layout width control ========= */
@media (min-width: 1200px) {
  .content-wrapper { max-width: 1200px; }
}

/* ========= High-contrast badges and chips ========= */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--color-accent); border: 2px solid rgba(15,23,42,0.08); font-weight: 800; }

/* ========= Header compact on scroll (optional micro-interaction hooks) ========= */
/* Add class .compact to header via JS when scrolling */
header.compact { box-shadow: 0 4px 16px rgba(15,23,42,0.12); }
header.compact .logo img { height: 34px; transition: height 0.2s ease; }

/* ========= Ensure all navigation and CTAs are large enough for touch ========= */
.main-nav a, .mobile-nav a, .btn, .mobile-menu-toggle { min-height: 44px; }

/* ========= Dark section text contrast enforcement ========= */
.hero p, .hero li { color: #E2E8F0; }

/* ========= Cards grid helper (flex only) ========= */
.card-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.card-grid .card { flex: 1 1 260px; }

/* ========= List spacing in FAQs ========= */
.text-section h3 + p { margin-top: 6px; }

/* ========= Header CTA separation on mobile ========= */
@media (max-width: 991px) {
  .header-ctas { display: none; }
  .main-nav { display: none; }
}

/* ========= Desktop show header CTAs ========= */
@media (min-width: 992px) {
  .header-ctas { display: flex; }
}

/* ========= Decorative separators ========= */
.separator { width: 100%; height: 2px; background: rgba(15,23,42,0.08); border-radius: 2px; }

/* ========= Hero adjustments for interior pages ========= */
.hero .trust-badges ul { gap: 10px; }

/* ========= Badge alignment in lists with icons ========= */
.text-section p a.btn { margin-top: 8px; }

/* ========= Prevent accidental overflow ========= */
body { overflow-x: hidden; }

/* ========= Z-index safety ========= */
header, .mobile-menu, .cookie-banner, .cookie-overlay { z-index: 1000; }
.mobile-menu { z-index: 1200; }
.cookie-banner { z-index: 1600; }
.cookie-overlay { z-index: 1700; }

/* ========= Print minimal styles ========= */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}