/* =============================
   Fresh Odysseys Voice Studio
   style.css — gradient_modern
   Mobile-first, Flexbox-only
   ============================= */

/* 1) RESET & NORMALIZE */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #FFFFFF; color: #22324F; }
ol, ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
button { background: transparent; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* 2) THEME VARIABLES (with fallbacks) */
:root {
  --color-primary: #1A2A44; /* Navy */
  --color-secondary: #2DA5A3; /* Teal */
  --color-accent: #F3EDE5; /* Warm accent */
  --color-surface: #FFFFFF;
  --color-muted: #6A7A99;
  --color-muted-2: #90A0B7;
  --shadow-1: 0 6px 18px rgba(26, 42, 68, 0.08);
  --shadow-2: 0 12px 30px rgba(26, 42, 68, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-60: 60px; --space-80: 80px;
  --transition-fast: 180ms ease;
  --transition-mid: 280ms ease;
}

/* 3) TYPOGRAPHY */
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--color-primary); line-height: 1.2; }
h1 { font-size: 40px; letter-spacing: -0.02em; margin-bottom: var(--space-16); }
h2 { font-size: 28px; margin-bottom: var(--space-16); }
h3 { font-size: 20px; margin-top: var(--space-20); margin-bottom: var(--space-8); }
p { font-size: 16px; color: #5b6b8a; }
sub, sup, small { font-size: 80%; }
strong { font-weight: 700; }

/* Type utilities */
.subheadline { font-size: 18px; color: var(--color-primary); opacity: 0.9; margin-bottom: var(--space-16); }
.tagline { font-size: 16px; color: var(--color-muted); margin-top: var(--space-12); }
.note, .microproof, .reference, .rating, .support, .contact-prompt { color: var(--color-muted); font-size: 14px; }

/* 4) GLOBAL LAYOUT (Flexbox-only) */
.container { display: flex; width: 100%; justify-content: center; padding: 0 var(--space-20); }
.content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; max-width: 1160px; }

/* Ensure spacing between sections */
section { padding: var(--space-40) 0; }
main { display: flex; flex-direction: column; gap: var(--space-20); }

/* 5) HEADER */
header { position: relative; z-index: 20; background: #FFFFFF; box-shadow: 0 1px 0 rgba(26,42,68,0.08); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) 0; }
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }

/* Desktop nav (hidden on mobile) */
.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a { color: var(--color-primary); padding: 8px 10px; border-radius: 8px; transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.main-nav a:hover { background: #F6F8FB; color: #152238; }
.main-nav a:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 3px; }

.header-cta { display: none; }

/* Mobile hamburger */
.mobile-menu-toggle { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 10px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); transition: background var(--transition-fast), transform var(--transition-fast); z-index: 21; }
.mobile-menu-toggle:hover { background: #203355; transform: translateY(-2px); }
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; gap: var(--space-20); background: rgba(26,42,68,0.1); backdrop-filter: blur(2px); transform: translateX(100%); transition: transform var(--transition-mid); z-index: 100; }
.mobile-menu .mobile-nav { display: flex; flex-direction: column; gap: 12px; background: #ffffff; margin: 0; padding: var(--space-32) var(--space-24) var(--space-24); border-radius: 16px 0 0 16px; box-shadow: var(--shadow-2); width: 84%; height: 100%; align-self: flex-end; overflow-y: auto; }
.mobile-menu a { color: var(--color-primary); font-size: 18px; padding: 10px 6px; border-radius: 8px; }
.mobile-menu a:hover { background: #F6F8FB; }
.mobile-menu a:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 2px; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { position: absolute; right: 20px; top: 16px; width: 40px; height: 40px; border-radius: 10px; color: var(--color-primary); background: #FFFFFF; box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; }
.mobile-menu-close:hover { background: #F6F8FB; }

/* 6) HERO */
.hero { position: relative; overflow: hidden; background-color: var(--color-accent); /* Fallback */ background-image: linear-gradient(180deg, #F3EDE5 0%, #FFFFFF 100%); }
.hero .breadcrumbs { font-size: 14px; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.hero h1 { font-size: 36px; }
.hero .subheadline { max-width: 60ch; }

/* Trust badges block */
.trust-badges { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid #E6EAF2; border-radius: var(--radius-md); padding: var(--space-16); box-shadow: var(--shadow-1); }
.trust-badges ul { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-left: 18px; list-style: disc; }

/* 7) BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 12px; border: 2px solid transparent; font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 3px; }
.btn.primary { background-color: var(--color-secondary); background-image: linear-gradient(90deg, #2DA5A3 0%, #23908E 100%); color: #FFFFFF; box-shadow: 0 8px 18px rgba(45,165,163,0.25); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(45,165,163,0.35); }
.btn.secondary { background: #FFFFFF; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn.secondary:hover { background: rgba(45,165,163,0.08); }
.btn.link { padding: 0; border: none; color: var(--color-secondary); background: transparent; font-weight: 700; }
.btn.link:hover { text-decoration: underline; }

/* CTA group */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* 8) TEXT SECTIONS & LISTS */
.text-section { display: flex; flex-direction: column; gap: var(--space-12); }
.text-section ul { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; list-style: disc; }
.text-section p img { display: inline-flex; vertical-align: middle; margin-right: 8px; height: 18px; width: 18px; }

/* Ordered lists */
ol { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; list-style: decimal; }

/* 9) TESTIMONIALS */
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: #FFFFFF; border: 1px solid #E6EAF2; border-radius: var(--radius-md); box-shadow: var(--shadow-1); color: var(--color-primary); }
.testimonial-card p { color: #22324F; }
.testimonial-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.rating { margin-top: var(--space-12); }

/* 10) FOOTER */
footer { background: #0F1B2F; color: #DDE3EE; padding-top: var(--space-40); }
footer .content-wrapper { gap: var(--space-24); }
footer .content-wrapper:first-child { padding-top: 0; }
footer a { color: #EAF0FA; }
footer a:hover { color: #9BE2E0; }
.footer-brand, .footer-links, .footer-legal, .footer-contact, .footer-news { display: flex; flex-direction: column; gap: 10px; }
.footer-brand img { height: 40px; width: auto; }
footer h3 { color: #F7FAFF; font-size: 16px; margin-bottom: 6px; }
footer nav { display: flex; flex-direction: column; gap: 6px; }
footer .container:last-of-type { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--space-20); }
footer .content-wrapper:last-child { align-items: center; justify-content: center; padding: var(--space-16) 0; }

/* 11) LINKS & INTERACTIONS */
a:hover { color: #1E8B89; }
a:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 2px; }

/* 12) CARDS & GENERIC COMPONENTS */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: var(--space-12); background: #FFFFFF; border: 1px solid #E6EAF2; border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-20); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Section utility (MANDATORY pattern) */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* 13) UTILITIES */
.hidden { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--color-muted); }
.surface { background: var(--color-surface); }
.accent-bg { background: var(--color-accent); }
.primary { color: var(--color-primary); }

/* 14) PAGE-SPECIFIC TWEAKS */
/* Hero headings a bit larger on landing-like sections */
.hero h1 { max-width: 18ch; }
.hero .content-wrapper { padding: var(--space-20) 0 var(--space-20); }

/* Breadcrumbs spacing */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Notes and highlight blocks */
.note { background: #FFF7ED; border: 1px solid #FFE1BF; padding: 10px 12px; border-radius: 10px; }
.microproof { background: #F6FBFA; border: 1px solid #CDEEEB; padding: 10px 12px; border-radius: 10px; }

/* 15) RESPONSIVE (Mobile-first) */
@media (min-width: 520px) {
  h1 { font-size: 44px; }
  h2 { font-size: 30px; }
}

@media (min-width: 768px) {
  /* Header desktop nav */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  .hero h1 { font-size: 48px; }
  .hero .content-wrapper { padding: var(--space-40) 0; }

  /* Footer layout in rows using flex-wrap */
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .footer-brand { flex: 1 1 260px; }
  .footer-links, .footer-legal, .footer-contact, .footer-news { flex: 1 1 200px; }
}

@media (min-width: 1024px) {
  .hero .content-wrapper { padding: var(--space-60) 0; }
}

/* 16) ACCESSIBILITY & FOCUS */
::selection { background: rgba(45,165,163,0.25); }
:focus { scroll-margin-top: 80px; }

/* 17) COOKIE CONSENT BANNER & MODAL */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: none; /* default hidden */ }
.cookie-banner.show { display: flex; }
.cookie-banner .cookie-banner-inner { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; background: #ffffff; border-top: 1px solid #E6EAF2; box-shadow: 0 -8px 30px rgba(26,42,68,0.12); padding: var(--space-16) var(--space-20); }
.cookie-banner p { color: #5b6b8a; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.cookie-actions .btn-accept { background: var(--color-secondary); color: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.cookie-actions .btn-accept:hover { filter: brightness(0.95); }
.cookie-actions .btn-reject { background: #FFFFFF; border: 2px solid #D4E8E7; color: var(--color-secondary); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.cookie-actions .btn-reject:hover { background: #F3FBFB; }
.cookie-actions .btn-settings { background: transparent; color: var(--color-primary); text-decoration: underline; padding: 8px 10px; }

/* Cookie settings modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(26,42,68,0.5); display: none; align-items: center; justify-content: center; z-index: 250; }
.cookie-modal.show { display: flex; }
.cookie-modal .cookie-modal-content { display: flex; flex-direction: column; gap: var(--space-16); width: min(640px, 92%); background: #FFFFFF; border-radius: 14px; box-shadow: var(--shadow-2); padding: var(--space-24); }
.cookie-modal header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal h3 { margin: 0; font-size: 20px; }
.cookie-modal .cookie-list { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #EEF2F7; }
.cookie-row:last-child { border-bottom: none; }
/* Simple toggle */
.toggle { display: inline-flex; align-items: center; gap: 8px; }
.toggle input[type="checkbox"] { appearance: none; width: 40px; height: 22px; background: #D8E2EE; border-radius: 22px; position: relative; outline: none; transition: background var(--transition-fast); }
.toggle input[type="checkbox"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform var(--transition-fast); }
.toggle input[type="checkbox"]:checked { background: var(--color-secondary); }
.toggle input[type="checkbox"]:checked::after { transform: translateX(18px); }
.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }
.cookie-modal .actions .btn-accept, .cookie-modal .actions .btn-reject { padding: 10px 14px; border-radius: 10px; font-weight: 700; }

/* 18) FORM & MISC (placeholders for future) */
input, textarea, select { font-family: inherit; font-size: 16px; color: var(--color-primary); border: 1px solid #D6DEEA; border-radius: 10px; padding: 10px 12px; background: #FFFFFF; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
input:focus, textarea:focus, select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 4px rgba(45,165,163,0.15); outline: none; }
label { color: var(--color-primary); font-weight: 600; }

/* 19) LAYOUT SAFETY (prevent overlaps) */
section .content-wrapper > * + * { margin-top: 0; }
.container + .container { margin-top: var(--space-20); }

/* 20) DESKTOP ENHANCEMENTS FOR TEXT-IMAGE SECTIONS */
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; align-items: center; }
  .text-image-section > * { flex: 1 1 320px; }
}

/* 21) PRINT SAFE COLORS (fallbacks where needed) */
@media print {
  a { text-decoration: underline; color: #000; }
  .btn { border: 1px solid #000; background: transparent; color: #000; box-shadow: none; }
  header, footer, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
}