/* =========================================
   Lively Glide Adventures - Professional Corporate CSS
   Mobile-first, Flexbox-only, High-contrast, Accessible
   ========================================= */

/* --------------------
   0) Font Import
-------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap');

/* --------------------
   1) Reset & Base Normalize
-------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body, Inter), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1B2B3A; background: var(--color-accent, #F4F7FB); line-height: 1.6; font-size: 16px; }
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
a { color: var(--color-primary, #0A3D62); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-secondary, #2E7D6E); outline-offset: 2px; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
:root {
  --color-primary: #0A3D62; /* ocean blue */
  --color-secondary: #2E7D6E; /* eucalyptus */
  --color-accent: #F4F7FB; /* light backdrop */
  --color-ink: #1B2B3A; /* body text */
  --color-muted: #5A6B7B; /* muted text */
  --color-border: #D9E1EA; /* subtle borders */
  --color-surface: #FFFFFF; /* cards */
  --shadow-sm: 0 1px 2px rgba(10, 61, 98, 0.06), 0 2px 8px rgba(10, 61, 98, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 61, 98, 0.12);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Typography */
h1, h2, h3 { font-family: var(--font-display); color: #0A2A43; letter-spacing: 0.2px; margin: 0 0 12px; line-height: 1.25; }
h1 { font-size: 32px; }
h2 { font-size: 24px; margin-top: 8px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; color: var(--color-ink); }
small { color: var(--color-muted); }
strong { font-weight: 600; }

/* Selection */
::selection { background: rgba(10,61,98,0.16); }

/* --------------------
   2) Global Layout Helpers (Flex-only)
-------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

/* 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; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.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; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-ink); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Text blocks used throughout */
.text-section { display: flex; flex-direction: column; gap: 10px; flex: 1 1 100%; }
.text-section ul, .text-section ol { margin-left: 18px; }
.text-section img { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 8px; }

/* --------------------
   3) Header & Navigation
-------------------- */
header { background: #FFFFFF; border-bottom: 1px solid var(--color-border); position: relative; z-index: 100; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

/* Desktop nav hidden by default (mobile-first) */
.main-nav { display: none; align-items: center; gap: 20px; }
.main-nav a { color: #0A2A43; padding: 8px 6px; border-radius: 6px; transition: background 200ms ease, color 200ms ease; }
.main-nav a:hover { background: var(--color-accent); text-decoration: none; }
.main-nav a:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.header-cta { display: none; align-items: center; gap: 12px; }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--color-accent); color: var(--color-primary); font-size: 20px; transition: background 180ms ease, transform 180ms ease; }
.mobile-menu-toggle:hover { background: #E9F0F7; transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: #FFFFFF; transform: translateX(100%); transition: transform 300ms ease; display: flex; flex-direction: column; padding: 20px; gap: 20px; z-index: 900; box-shadow: var(--shadow-md); }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; font-size: 20px; width: 40px; height: 40px; border-radius: 8px; background: var(--color-accent); color: var(--color-primary); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a { padding: 14px 10px; border: 1px solid var(--color-border); border-radius: 8px; color: #0A2A43; background: var(--color-surface); transition: background 200ms ease, color 200ms ease; }
.mobile-nav a:hover { background: #F6FAFF; text-decoration: none; }

/* --------------------
   4) Buttons
-------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-weight: 600; letter-spacing: 0.2px; transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 120ms ease; border: 1px solid transparent; white-space: nowrap; }
.btn + .btn { margin-left: 10px; }
.btn-primary { background: var(--color-primary); color: #FFFFFF; box-shadow: 0 2px 0 rgba(0,0,0,0.05); }
.btn-primary:hover { background: #083251; box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
.btn-secondary { background: #FFFFFF; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: #E9F0F7; text-decoration: none; }
.btn:active { transform: translateY(0); }

/* --------------------
   5) Hero Sections
-------------------- */
.hero { background: var(--color-primary); color: #FFFFFF; padding: 40px 0; }
.hero h1, .hero p { color: #FFFFFF; }
.hero .btn-secondary { color: #FFFFFF; border-color: #FFFFFF; background: transparent; }
.hero .btn-secondary:hover { background: rgba(255,255,255,0.12); }
.hero .content-wrapper { align-items: flex-start; }

/* --------------------
   6) Main Sections
-------------------- */
main section { margin-bottom: 40px; }
main section .container { gap: 0; }
main section .content-wrapper { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }

/* Ensure headings in wrappers span full width */
main .content-wrapper > h2 { flex: 1 0 100%; }

/* Lists and inline meta */
.text-section a { color: var(--color-primary); }
.text-section a:hover { text-decoration: underline; }

/* --------------------
   7) Testimonials & Highlights (High Contrast)
-------------------- */
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: #0A2A43; }

/* --------------------
   8) Footer
-------------------- */
footer { background: var(--color-primary); color: #FFFFFF; padding-top: 20px; }
footer .content-wrapper { background: transparent; border: 0; box-shadow: none; color: #FFFFFF; }
footer a { color: #FFFFFF; opacity: 0.95; }
footer a:hover { opacity: 1; text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.footer-nav a { padding: 6px 0; }

/* --------------------
   9) Cookie Consent Banner & Modal
-------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(10,61,98,0.10); z-index: 1500; transform: translateY(100%); transition: transform 300ms ease; display: flex; }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner .container { padding: 16px; }
.cookie-banner .content { display: flex; flex-direction: column; gap: 12px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn { padding: 10px 14px; border-radius: 8px; }
.cookie-accept { background: var(--color-primary); color: #fff; }
.cookie-reject { background: #FFFFFF; color: var(--color-primary); border: 1px solid var(--color-primary); }
.cookie-settings { background: #FFFFFF; color: #0A2A43; border: 1px solid var(--color-border); }

/* Cookie modal */
.cookie-overlay { position: fixed; inset: 0; background: rgba(10,61,98,0.4); opacity: 0; pointer-events: none; transition: opacity 250ms ease; z-index: 2000; }
.cookie-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: min(92%, 720px); padding: 20px; opacity: 0; pointer-events: none; transition: transform 250ms ease, opacity 250ms ease; z-index: 2100; display: flex; flex-direction: column; gap: 16px; }
.cookie-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cookie-overlay.open { opacity: 1; pointer-events: auto; }
.cookie-modal .rows { display: flex; flex-direction: column; gap: 12px; }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.cookie-row small { color: var(--color-muted); }

/* Toggle (for analytics/marketing) */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 26px; background: #D5DEE7; transition: background 200ms ease; display: inline-flex; align-items: center; padding: 3px; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transform: translateX(0); transition: transform 200ms ease; }
.toggle.is-on { background: var(--color-secondary); }
.toggle.is-on::after { transform: translateX(20px); }

/* --------------------
   10) Utilities
-------------------- */
.muted { color: var(--color-muted); }
.hide { display: none !important; }

/* --------------------
   11) Responsive (Mobile-first)
-------------------- */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
}

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

  /* Hero spacing */
  .hero { padding: 60px 0; }

  /* Section content layout */
  main section .content-wrapper { flex-direction: row; align-items: flex-start; }
  .text-section { flex: 1 1 45%; }

  /* Text-image sections: row on desktop per requirement */
  .text-image-section { flex-direction: row; }
}

@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .text-section { flex: 1 1 30%; }
}

/* --------------------
   12) Page-specific Enhancements
-------------------- */
/* Breadcrumbs or meta lines */
.text-section:has(a[href^="mailto:"]),
.text-section:has(a[href^="tel:"]) { align-items: flex-start; }

/* Popular experiences, categories as neat columns via flex-wrap */
main section .content-wrapper > div:has(.btn) { display: flex; flex-wrap: wrap; gap: 12px; }

/* Ensure minimum spacing between blocks */
main section .content-wrapper > * { margin-bottom: 0; }

/* --------------------
   13) Visual Polish
-------------------- */
/* Subtle card hover for items styled as cards if needed */
.card:hover, .testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); transition: transform 160ms ease, box-shadow 160ms ease; }

/* Links micro-interaction */
a { transition: color 160ms ease, background 160ms ease; }

/* Lists spacing consistency */
ul li, ol li { margin-bottom: 6px; }

/* Icon inline alignment in contact rows */
.text-section img + a, .text-section img + span { vertical-align: middle; }

/* --------------------
   14) Accessibility Tweaks
-------------------- */
:focus:not(:focus-visible) { outline: none; }

/* --------------------
   15) Ensure Flex on All Layout Containers
-------------------- */
header, main, footer, section, nav, .header-cta, .footer-nav { display: flex; flex-direction: column; }
/* Override where necessary to avoid stacking issues */
header > .container, footer > section > .container { flex-direction: column; }
/* Keep content areas clean */
main { flex-direction: column; gap: 20px; }

/* --------------------
   16) High-contrast for testimonials (dark text on light bg)
-------------------- */
/* Already ensured via testimonial-card styles (white bg, dark text) */

/* --------------------
   17) Prevent Overlaps with Adequate Spacing
-------------------- */
main section + section { margin-top: 10px; }
.content-wrapper { gap: 20px; }

/* --------------------
   18) Print Basics
-------------------- */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal, .cookie-overlay { display: none !important; }
  header, footer, .hero { box-shadow: none; }
  a { text-decoration: underline; }
}