/* =========================================================
   Nightfall Legends Speaking Academy — Nature Organic Theme
   Role: Senior CSS Developer & UI Designer
   Notes:
   - Mobile-first, flexbox-only layouts (no grid/columns)
   - Nature_organic aesthetic: earth tones, organic shapes, green accents
   - Brand fonts/colors integrated
   - Includes mobile menu + cookie banner/modal
   ========================================================= */

/* ----------------------------
   CSS RESET / NORMALIZE
---------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0 0 0 1.2rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
input, button, textarea, select { font: inherit; }

/* ----------------------------
   THEME TOKENS (CSS Variables)
---------------------------- */
:root {
  /* Brand core */
  --brand-primary: #0A2540; /* deep navy */
  --brand-secondary: #E76F51; /* warm clay */
  --brand-accent: #F7FAFC; /* light */

  /* Nature organic palette (earth + green) */
  --green-700: #2F6D3A; /* forest */
  --green-600: #3F8E4D; /* moss */
  --green-500: #5CA870; /* leaf */
  --sand-50: #FAF7F2; /* sand light */
  --sand-100: #F3EFE7; /* sand */
  --bark-600: #5B4636; /* bark */

  /* Neutrals */
  --ink: #0C1A1A; /* deep readable text */
  --slate-700: #2B3A3A;
  --slate-500: #6E7C7C;
  --slate-200: #DDE5E5;
  --white: #FFFFFF;

  /* Effects / Radii / Shadows */
  --radius-soft: 12px;           /* organic corners */
  --radius-organic: 24px;        /* more organic curves */
  --shadow-soft: 0 6px 16px rgba(10, 37, 64, 0.08);
  --shadow-lift: 0 10px 24px rgba(10, 37, 64, 0.12);

  /* Typography scale */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Spacing scale */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;

  /* Transitions */
  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 180ms;
  --normal: 260ms;
}

/* ----------------------------
   BASE TYPOGRAPHY & BODY
---------------------------- */
body {
  font-family: Arial, Helvetica, sans-serif; /* brand body */
  color: var(--ink);
  line-height: 1.6;
  background-color: var(--sand-50);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', serif; /* brand display */
  color: var(--brand-primary);
  line-height: 1.2;
}

h1 { font-size: var(--fs-32); letter-spacing: -0.5px; }
h2 { font-size: var(--fs-24); margin-top: var(--space-8); }
h3 { font-size: var(--fs-20); color: var(--slate-700); }

p { font-size: var(--fs-16); color: var(--ink); }
strong { color: var(--brand-primary); }

/* Links */
a { color: var(--green-700); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 6px; }

/* Lists */
ul, ol { gap: var(--space-8); display: flex; flex-direction: column; }
li { padding-left: 2px; }

/* ----------------------------
   LAYOUT CONTAINERS (Flex only)
---------------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-20);
  display: flex;
  flex-direction: column;
}

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

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

/* Also space native sections to ensure breathing room */
main > section { margin-bottom: var(--space-60); padding: var(--space-40) 0; }

/* Alternating subtle backgrounds for sections (organic rhythm) */
main > section:nth-child(odd) { background-color: var(--white); }
main > section:nth-child(even) { background-color: var(--sand-100); }

/* ----------------------------
   HEADER & NAVIGATION
---------------------------- */
header { position: sticky; top: 0; z-index: 1000; background: var(--white); box-shadow: 0 1px 0 rgba(10,37,64,0.08); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-16); padding: var(--space-16) 0; }
.logo img { height: 40px; width: auto; }

/* Desktop main nav (hidden on mobile) */
.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a { color: var(--brand-primary); padding: 8px 10px; border-radius: 8px; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.main-nav a:hover { background-color: var(--sand-100); color: var(--green-700); text-decoration: none; }

/* Header CTAs */
.header-cta { display: flex; align-items: center; gap: var(--space-12); }
.header-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--green-600); color: var(--white); background: var(--green-600); font-weight: 600; transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); box-shadow: var(--shadow-soft); }
.header-cta a:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: var(--shadow-lift); text-decoration: none; }
.header-cta a:last-child { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.header-cta a:last-child:hover { background: #d76045; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; background: var(--sand-100); color: var(--brand-primary); border: 1px solid var(--slate-200); transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.mobile-menu-toggle:hover { background: var(--brand-accent); transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 37, 64, 0.45);
  display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end;
  transform: translateX(100%);
  transition: transform var(--normal) var(--ease), opacity var(--normal) var(--ease);
  opacity: 0;
}
.mobile-menu .mobile-nav {
  width: 86%; max-width: 360px; height: 100%; background: var(--white);
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-32); box-shadow: var(--shadow-lift);
  border-top-left-radius: var(--radius-organic);
  border-bottom-left-radius: var(--radius-organic);
}
.mobile-menu .mobile-nav a {
  padding: 12px 14px; border-radius: 10px; color: var(--brand-primary);
  border: 1px solid transparent; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.mobile-menu .mobile-nav a:hover { background: var(--sand-100); border-color: var(--slate-200); text-decoration: none; }
.mobile-menu .mobile-menu-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 999px; background: var(--white); border: 1px solid var(--slate-200); display: inline-flex; align-items: center; justify-content: center; }

/* Open states supported by either .open on menu or body.menu-open */
.mobile-menu.open, body.menu-open .mobile-menu { transform: translateX(0); opacity: 1; }
body.menu-open { overflow: hidden; }

/* ----------------------------
   HERO EMPHASIS
---------------------------- */
main > section:first-of-type { background-color: var(--sand-100); }
main > section:first-of-type .content-wrapper {
  background: var(--white);
  padding: var(--space-24);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--slate-200);
}
main > section:first-of-type h1 { font-size: var(--fs-40); }

/* Inline CTA groups inside content (class available for future use) */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--green-600); color: var(--white); background: var(--green-600); font-weight: 600; box-shadow: var(--shadow-soft); transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: var(--shadow-lift); text-decoration: none; }
.btn.secondary { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.btn.ghost { background: transparent; color: var(--green-700); border-color: var(--green-600); }

/* ----------------------------
   TEXT SECTIONS & CARDS
---------------------------- */
.text-section {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 6px solid var(--green-500);
  border-radius: var(--radius-soft);
  padding: var(--space-20);
  box-shadow: var(--shadow-soft);
}
.text-section h3 { margin-bottom: var(--space-8); }

/* Testimonial cards - ensure high contrast dark on light */
.testimonial-card {
  display: flex; align-items: center; gap: var(--space-20); padding: var(--space-20);
  background: var(--brand-accent);
  border: 1px solid var(--slate-200);
  border-left: 6px solid var(--green-600);
  border-radius: var(--radius-soft);
  color: var(--brand-primary);
  box-shadow: var(--shadow-soft);
}
.testimonial-card p { margin: 0; }

/* Generic card system for potential use */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.card .card-content { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-20); justify-content: center; }
.card:hover { box-shadow: var(--shadow-lift); }

/* Layout helpers (flex only as required) */
.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; }

/* Mandatory spacing rule: ensure minimum space between cards/sections */
.content-wrapper > * + * { margin-top: 0; }

/* ----------------------------
   FOOTER
---------------------------- */
footer { background: var(--brand-primary); color: var(--white); padding: var(--space-32) 0; }
footer a { color: #C7E5D0; }
footer .content-wrapper { flex-direction: column; gap: var(--space-24); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
footer .text-section { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #F0F7F2; }

/* ----------------------------
   TABLES (if any appear later)
---------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--slate-200); }
th { color: var(--brand-primary); }

/* ----------------------------
   FORMS (basic styling for inputs/toggles in cookie modal)
---------------------------- */
input[type="text"], input[type="email"], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--slate-200);
  border-radius: 10px; background: var(--white);
}
input[type="checkbox"] { width: 18px; height: 18px; }

/* ----------------------------
   COOKIE CONSENT BANNER & MODAL
---------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
  display: none; /* hidden by default; toggle .show to display */
  padding: var(--space-16);
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  box-shadow: 0 -8px 20px rgba(10,37,64,0.06);
}
.cookie-banner.show { display: flex; }
.cookie-banner .container { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--slate-200); background: var(--sand-100); color: var(--brand-primary); font-weight: 600; transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.cookie-btn:hover { background: var(--brand-accent); transform: translateY(-1px); }
.cookie-btn.accept { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.cookie-btn.accept:hover { background: var(--green-700); }
.cookie-btn.reject { background: var(--brand-secondary); color: var(--white); border-color: var(--brand-secondary); }

/* Cookie preferences modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1500; display: none;
  background: rgba(10,37,64,0.45);
  align-items: center; justify-content: center;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-content {
  width: 94%; max-width: 720px; background: var(--white); border-radius: var(--radius-organic);
  padding: var(--space-24); box-shadow: var(--shadow-lift); border: 1px solid var(--slate-200);
  display: flex; flex-direction: column; gap: var(--space-16);
}
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .category { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: var(--brand-accent); }
.cookie-modal .category .note { color: var(--slate-500); font-size: var(--fs-14); }
.cookie-modal .modal-actions { display: flex; gap: var(--space-12); justify-content: flex-end; }

/* iOS-like toggle for checkboxes */
.cookie-toggle { position: relative; width: 42px; height: 26px; border-radius: 999px; background: var(--slate-200); border: 1px solid var(--slate-200); display: inline-flex; align-items: center; padding: 2px; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.cookie-toggle .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-soft); transition: transform var(--fast) var(--ease); }
.cookie-toggle.on { background: var(--green-600); border-color: var(--green-600); }
.cookie-toggle.on .knob { transform: translateX(16px); }
.cookie-toggle.disabled { opacity: 0.6; }

/* ----------------------------
   ACCESSIBILITY & STATES
---------------------------- */
::selection { background: #CDEED8; color: #0A2A12; }
:focus-visible { outline: 3px solid #9AD2AE; outline-offset: 2px; }

/* ----------------------------
   RESPONSIVE (Mobile-first)
---------------------------- */
@media (min-width: 640px) {
  h1 { font-size: var(--fs-48); }
  h2 { font-size: var(--fs-32); }
}

@media (min-width: 768px) {
  /* Show desktop nav from tablet up */
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Footer layout becomes rowed clusters */
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  footer .content-wrapper > * { flex: 1 1 260px; }

  /* Text-image sections align side-by-side */
  .text-image-section { flex-direction: row; }
}

@media (min-width: 1024px) {
  header .content-wrapper { gap: var(--space-24); }
  .content-wrapper { gap: var(--space-32); }
}

/* ----------------------------
   MICRO-INTERACTIONS
---------------------------- */
.text-section:hover, .testimonial-card:hover { transform: translateY(-2px); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); box-shadow: var(--shadow-lift); }

/* ----------------------------
   PRINT (basic)
---------------------------- */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  main > section { background: #fff; }
}

/* ----------------------------
   OPTIONAL/GENERAL UTILS
---------------------------- */
.hide { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }

/* Ensure required flex alignment rules are explicitly available */
.align-center { display: flex; align-items: center; }
.align-start { display: flex; align-items: flex-start; }
.justify-between { display: flex; justify-content: space-between; }

/* ----------------------------
   ENSURE CLASS NAMES FROM BRIEF
---------------------------- */
/* Already included: .section, .card-container, .card, .content-grid, .text-image-section, .testimonial-card, .feature-item */

/* ----------------------------
   NAV LINK ACCESSIBILITY IN FOOTER NAVS
---------------------------- */
footer nav a { padding: 6px 10px; border-radius: 8px; }
footer nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }

/* ----------------------------
   LIST STYLE ADJUSTMENTS (organic bullets)
---------------------------- */
ul { list-style: none; }
ul li { position: relative; padding-left: 24px; }
ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-500); box-shadow: 0 0 0 2px #E6F3EA inset;
}

/* ----------------------------
   DARK TEXT IN TESTIMONIALS / REVIEWS
---------------------------- */
/* This ensures readability per requirement */
.testimonial-card, .testimonial-card p, .testimonial-card strong { color: var(--brand-primary); }

/* ----------------------------
   LINK STYLES IN CONTENT
---------------------------- */
.content-wrapper p a { color: var(--brand-secondary); text-decoration: underline; }
.content-wrapper p a:hover { color: #d76045; }

/* ----------------------------
   NAV SPACING IN HEADER
---------------------------- */
header nav[aria-label="Primary"] a { font-weight: 600; }

/* ----------------------------
   ORGANIC DIVIDER (optional) 
---------------------------- */
.hr-organic { height: 2px; width: 100%; background: var(--sand-100); border-radius: 999px; }