/* =============================
   Sable Reef Redekunst – style.css
   Elegant Classic theme: serif headings, muted sand tones, refined spacing
   Mobile-first, Flexbox-only layouts
   ============================= */

/* =============================
   0) CSS Reset / Normalize
   ============================= */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.1rem; }
p { margin: 0; }

/* =============================
   1) Theme Variables (with sensible fallbacks)
   ============================= */
:root {
  --color-primary: #0B1F3A; /* Deep navy */
  --color-secondary: #E36D3E; /* Warm terracotta */
  --color-accent: #F3EDE2; /* Warm sand */
  --color-bg: #FAF8F4; /* Soft paper-like */
  --color-ink: #0B1F3A; /* Primary for headings */
  --color-text: #243347; /* Body text dark muted */
  --color-muted: #5B6B80; /* Muted supporting text */
  --color-border: #E6DDD0; /* Subtle border from sand */
  --shadow-1: 0 2px 10px rgba(11,31,58,0.06);
  --shadow-2: 0 8px 24px rgba(11,31,58,0.10);
  --radius-s: 6px; 
  --radius-m: 10px;
  --radius-l: 14px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --transition-fast: 160ms ease;
  --transition-med: 240ms ease;
}

/* =============================
   2) Base Typography
   ============================= */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Brand body font */
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman", Times, serif; /* Brand display font for elegant classic */
  color: var(--color-ink);
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0.2px;
}

h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }

p, li { font-size: 16px; }
small { font-size: 14px; color: var(--color-muted); }
strong { color: var(--color-ink); font-weight: 700; }
em { font-style: italic; }

/* Accessible focus */
:focus-visible { outline: 2px dotted var(--color-secondary); outline-offset: 2px; }

/* Links (inline) */
main a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { color: #cc5e2e; }

/* =============================
   3) Layout Primitives (Flex-only)
   ============================= */
.container {
  display: flex; /* Flex-only */
  flex-direction: column; /* mobile-first */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-wrapper {
  display: flex; /* Flex-only */
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-24);
}

/* Mandatory spacing class (kept as-is) */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Global section spacing to ensure breathing room */
section { padding: 40px 0; }
section + section { margin-top: 0; }

/* Flex helpers required by brief */
.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; }

/* =============================
   4) Header & Navigation
   ============================= */
header {
  position: sticky; top: 0; z-index: 500;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 14px rgba(11,31,58,0.04);
}
header .content-wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 14px 0;
}
.logo img { height: 36px; width: auto; }

.main-nav {
  display: none; /* shown on desktop in media query */
  gap: var(--space-16);
}
.main-nav a {
  display: flex; align-items: center;
  padding: 8px 10px;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  border-radius: var(--radius-s);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.main-nav a[aria-current="page"] {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.main-nav a:hover { background: var(--color-accent); }

.header-ctas {
  display: none; /* mobile hidden */
  gap: var(--space-12);
}
.header-ctas a {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  background: transparent;
  transition: background var(--transition-med), color var(--transition-med), transform var(--transition-fast), border-color var(--transition-fast);
}
.header-ctas a:first-child {
  background: var(--color-secondary);
  border-color: #c65c32;
  color: #fff;
}
.header-ctas a:first-child:hover { background: #cc5e2e; border-color: #b6532b; transform: translateY(-1px); }
.header-ctas a:last-child:hover { background: var(--color-accent); }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-s);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-menu-toggle:hover { background: var(--color-accent); border-color: #dbcfbf; }

/* =============================
   5) Mobile Menu Overlay
   ============================= */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; /* flex-only */
  flex-direction: column;
  background: var(--color-primary);
  color: #ffffff;
  transform: translateX(100%);
  transition: transform 260ms ease;
}
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }

.mobile-menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin: 16px;
  border-radius: var(--radius-s);
  background: rgba(255,255,255,0.08);
  color: #fff; border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
}
.mobile-menu-close:hover { background: rgba(255,255,255,0.14); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 20px 24px;
}
.mobile-nav a {
  display: flex; align-items: center;
  padding: 12px 10px;
  border-radius: var(--radius-s);
  color: #fff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-nav a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.mobile-nav a[aria-current="page"] { background: rgba(227,109,62,0.18); border-color: rgba(227,109,62,0.36); }

/* =============================
   6) Hero
   ============================= */
.hero {
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}
.hero .content-wrapper { padding: 20px 0; }
.hero h1 { font-size: 40px; }
.hero p { color: var(--color-text); max-width: 70ch; }
.hero ul { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-left: 18px; }
.hero li { color: var(--color-ink); }

/* CTA group inside hero */
.hero .content-wrapper > div {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.hero .content-wrapper > div a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  background: #ffffff;
  box-shadow: var(--shadow-1);
  transition: background var(--transition-med), color var(--transition-med), transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hero .content-wrapper > div a:first-child {
  background: var(--color-secondary); border-color: #c65c32; color: #fff; box-shadow: var(--shadow-2);
}
.hero .content-wrapper > div a:first-child:hover { background: #cc5e2e; border-color: #b6532b; transform: translateY(-1px); }
.hero .content-wrapper > div a:not(:first-child):hover { background: var(--color-accent); }

/* =============================
   7) Text Sections & Content Blocks
   ============================= */
.content-wrapper > h2 { width: 100%; margin-bottom: 4px; }

.text-section {
  display: flex; flex-direction: column; gap: 12px; /* flex-only */
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 18px 18px;
  box-shadow: var(--shadow-1);
}
.text-section h3 { font-size: 20px; }
.text-section p { color: var(--color-text); }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
.text-section a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.text-section img { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: text-bottom; }

/* Generic cards (if used) */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 18px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Content grid helper (flex) */
.content-grid > * { flex: 1 1 280px; }

/* Text-image split */
.text-image-section > * { flex: 1 1 320px; }

/* Features */
.feature-item h3 { margin-bottom: 2px; }

/* =============================
   8) Testimonials (dark text on light bg for readability)
   ============================= */
.testimonial-card {
  background: #FFFFFF; /* light background */
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.testimonial-card p { color: var(--color-text); }
.testimonial-card p:first-child { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; }

/* =============================
   9) Footer
   ============================= */
footer {
  background: var(--color-primary);
  color: #ffffff;
  border-top: 1px solid rgba(255,255,255,0.12);
}
footer .content-wrapper { padding: 24px 0; }
footer nav { display: flex; flex-direction: column; gap: 8px; }
footer a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #f3ede2; }

/* =============================
   10) Buttons utility (optional classes if added later)
   ============================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--color-ink); font-family: Georgia, "Times New Roman", Times, serif; transition: all var(--transition-med); }
.btn--primary { background: var(--color-secondary); border-color: #c65c32; color: #fff; }
.btn--primary:hover { background: #cc5e2e; border-color: #b6532b; transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--outline:hover { background: var(--color-accent); }

/* =============================
   11) Cookie Consent Banner & Modal
   ============================= */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: flex; /* flex-only */
  flex-direction: column; gap: 12px;
  background: #ffffff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(11,31,58,0.08);
  padding: 16px 20px;
}
.cookie-banner .container { padding: 0; }
.cookie-banner .content {
  display: flex; flex-direction: column; gap: 12px; /* mobile */
}
.cookie-banner .buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--color-ink); background: #fff; color: var(--color-ink); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); }
.cookie-btn:hover { background: var(--color-accent); transform: translateY(-1px); }
.cookie-btn.primary { background: var(--color-secondary); color: #fff; border-color: #c65c32; }
.cookie-btn.primary:hover { background: #cc5e2e; }
.cookie-btn.ghost { background: transparent; }

/* Cookie modal */
.cookie-modal-overlay {
  position: fixed; inset: 0; z-index: 1001;
  display: none; /* toggled via scripts */
  background: rgba(11,31,58,0.45);
  align-items: center; justify-content: center; /* flex center */
}
.cookie-modal-overlay.open { display: flex; }
.cookie-modal {
  display: flex; flex-direction: column; gap: 16px; /* flex-only */
  width: 92%; max-width: 640px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: 20px;
  transform: translateY(10px);
  transition: transform var(--transition-med);
}
.cookie-modal-overlay.open .cookie-modal { transform: translateY(0); }
.cookie-modal header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.cookie-modal .row:last-child { border-bottom: none; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; width: 46px; height: 26px; border-radius: 999px; background: #d9dfe6; border: 1px solid #cbd3dd; transition: background var(--transition-fast); }
.switch::after { content: ""; width: 20px; height: 20px; background: #fff; border: 1px solid #cbd3dd; border-radius: 50%; transform: translateX(2px); transition: transform var(--transition-fast); }
.switch.on { background: var(--color-secondary); border-color: #c65c32; }
.switch.on::after { transform: translateX(22px); border-color: #b6532b; }
.switch[aria-disabled="true"] { opacity: 0.6; }

/* =============================
   12) Utilities & Micro-interactions
   ============================= */
.muted { color: var(--color-muted); }
.divider { height: 1px; background: var(--color-border); width: 100%; }
.shadow-1 { box-shadow: var(--shadow-1); }
.radius { border-radius: var(--radius-m); }

/* Subtle fade/slide animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero h1, .hero p, .hero .content-wrapper > div { animation: fadeInUp 420ms ease both; }
.hero h1 { animation-delay: 40ms; }
.hero p { animation-delay: 120ms; }
.hero .content-wrapper > div { animation-delay: 200ms; }

/* =============================
   13) Lists & Text spacing
   ============================= */
.content-wrapper > p { max-width: 75ch; }
ul { list-style: disc; }
ol { list-style: decimal; }
li { padding-left: 2px; }

/* Ensure minimum spacing between content blocks */
.content-wrapper > * { margin: 0; }
.content-wrapper { gap: var(--space-24); }

/* =============================
   14) Responsive Adjustments
   ============================= */
@media (min-width: 600px) {
  h1 { font-size: 44px; }
  h2 { font-size: 30px; }
  .hero .content-wrapper { padding: 28px 0; }
}

@media (min-width: 768px) {
  .main-nav { display: flex; }
  .header-ctas { display: inline-flex; }
  .mobile-menu-toggle { display: none; }

  /* In regular sections, lay out text sections in flowing rows */
  .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .content-wrapper > h2 { flex: 1 1 100%; }
  .content-wrapper > .text-section { flex: 1 1 300px; }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 992px) {
  h1 { font-size: 52px; }
  h2 { font-size: 32px; }
  .hero .content-wrapper { padding: 36px 0; }
  header .content-wrapper { padding: 16px 0; }
}

/* =============================
   15) Accessibility & Contrast nuances
   ============================= */
.hero, .text-section, .testimonial-card { color: var(--color-text); }
.testimonial-card strong { color: var(--color-ink); }

/* =============================
   16) Specific element tweaks found in pages
   ============================= */
/* CTA pairs within various sections that include grouped links */
.text-section p + p a, .text-section p a { white-space: nowrap; }

/* Inline icon spacing inside contact rows */
.text-section p img + * { margin-left: 6px; }

/* Page footer compact groups */
footer nav > div { display: flex; flex-wrap: wrap; gap: 6px 12px; }

/* Ensure sections have at least 20px between internal cards */
section .testimonial-card + .testimonial-card,
section .text-section + .text-section { margin-top: 20px; }

/* Prevent overlapping and ensure stacking for overlays */
.mobile-menu, .cookie-modal-overlay { will-change: transform; }

/* =============================
   17) Edge-case: aria-current links across all navs
   ============================= */
nav a[aria-current="page"] { font-weight: 700; }

/* =============================
   18) Print minimal normalization
   ============================= */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  a { text-decoration: underline; }
}