/* =============================
   Bluemist Vitalmenüs – style.css
   Tech Futuristic theme with brand alignment
   - Mobile-first
   - Flexbox-only layouts
   - No CSS Grid or Columns
   - Strong accessibility and contrast
   ============================= */

/* -----------------------------
   CSS Reset & Base Normalize
----------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* -----------------------------
   Theme Tokens & Defaults
----------------------------- */
:root {
  /* Brand palette */
  --primary: #1E6B3A;   /* brand green */
  --secondary: #2C5E7A; /* brand blue */
  --accent: #F5FAF7;    /* light accent */
  /* Tech-futuristic accents */
  --neon-mint: #48E5C2;
  --neon-blue: #52A8FF;
  --neon-green: #2DFF8C;
  /* Surfaces & text */
  --bg: #0A0F14;        /* deep tech background */
  --surface: #0F1620;   /* card-like dark surface */
  --surface-2: #131C28; /* darker surface */
  --text: #E6F2ED;      /* high-contrast light */
  --muted: #A8B8C2;     /* supportive */
  --light: #FFFFFF;
  --dark: #0B1F1A;
  /* Radii & shadows */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --inner-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  --neon-glow: 0 0 0 rgba(0,0,0,0);
  /* Spacing scale */
  --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-30: 30px; --s-32: 32px; --s-40: 40px; --s-60: 60px;
}

/* Fallbacks for older browsers without CSS variables */
body { background-color: #0A0F14; color: #E6F2ED; }

/* Typography */
body {
  font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: 0.2px;
}
h1, h2, h3, h4 { font-family: "Trebuchet MS", Verdana, "Segoe UI", sans-serif; color: var(--text); font-weight: 700; }

h1 { font-size: 36px; line-height: 1.2; }
h2 { font-size: 28px; margin-top: var(--s-16); }
h3 { font-size: 20px; color: var(--text); }

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

p { color: var(--text); font-size: 16px; }
.subheadline { color: var(--muted); font-size: 18px; }
small, .muted { color: var(--muted); font-size: 14px; }

/* Links */
a { color: var(--neon-mint); transition: color 0.2s ease, text-shadow 0.2s ease; }
a:hover { color: var(--neon-blue); text-shadow: 0 0 10px rgba(82,168,255,0.35); }
a:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; border-radius: 4px; }

/* Global layout wrappers */
main { display: flex; flex-direction: column; gap: var(--s-32); }
section { display: flex; flex-direction: column; padding: var(--s-40) 0; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s-20); display: flex; flex-direction: column; gap: var(--s-24); }
.content-wrapper { display: flex; flex-direction: column; gap: var(--s-24); background: linear-gradient(180deg, rgba(19,28,40,0.56) 0%, rgba(19,28,40,0.32) 100%); background-color: var(--surface); border-radius: var(--radius); padding: var(--s-24); box-shadow: var(--shadow); }

/* Mandatory spacing utility classes */
.section { margin-bottom: 60px; padding: 40px 20px; display: flex; flex-direction: column; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: var(--s-16); background-color: var(--surface); border-radius: var(--radius-sm); padding: var(--s-20); box-shadow: var(--shadow); }
.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(--light); color: var(--dark); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,0.12); border-left: 4px solid var(--primary); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Lists and text sections */
.text-section { display: flex; flex-direction: column; gap: var(--s-16); color: var(--text); }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; }
.text-section li { color: var(--text); }
.text-section em { color: var(--muted); }

/* Hero Section */
.hero { padding: var(--s-40) 0 var(--s-40); background-color: #0D1420; background-image: linear-gradient(180deg, rgba(30,107,58,0.25) 0%, rgba(44,94,122,0.25) 100%); border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero .content-wrapper { position: relative; overflow: hidden; background-color: rgba(19,28,40,0.6); }
.hero .content-wrapper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(72,229,194,0.06), rgba(82,168,255,0.06)); }
.hero h1 { text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 20px rgba(82,168,255,0.18); }

/* Header */
header { position: sticky; top: 0; z-index: 100; background: rgba(10,15,20,0.8); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-16); padding-top: var(--s-12); padding-bottom: var(--s-12); }
.logo img { height: 36px; width: auto; }

/* Navigation */
.main-nav { display: none; align-items: center; gap: var(--s-16); }
.main-nav a { padding: 10px 12px; border-radius: 10px; color: var(--text); transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.main-nav a:hover { background: rgba(82,168,255,0.1); box-shadow: 0 0 0 1px rgba(82,168,255,0.3) inset; }
.main-nav a:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; }

.header-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; color: #00120B; background: linear-gradient(180deg, #2DFF8C 0%, #48E5C2 100%); box-shadow: 0 8px 20px rgba(45,255,140,0.25); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.header-cta a:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(72,229,194,0.35), 0 0 16px rgba(45,255,140,0.35); }
.header-cta a:active { transform: translateY(0); }

/* CTA group */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--s-16); }
.cta-group a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 12px; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
.cta-group a:first-child { background: linear-gradient(180deg, #2DFF8C 0%, #48E5C2 100%); color: #00120B; box-shadow: 0 10px 24px rgba(72,229,194,0.35); }
.cta-group a:nth-child(2) { background: rgba(82,168,255,0.12); color: var(--text); border: 1px solid rgba(82,168,255,0.35); }
.cta-group a:hover { transform: translateY(-1px); }

/* Trust badges & supporting points */
.trust-badges ul, .supporting-points ul { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-20); align-items: center; }
.trust-badges li, .supporting-points li { display: flex; align-items: center; gap: 10px; background: rgba(82,168,255,0.08); border: 1px solid rgba(82,168,255,0.2); color: var(--text); padding: 8px 12px; border-radius: 999px; }
.trust-badges img, .supporting-points img { width: 18px; height: 18px; }

/* Recipe list as cards */
.recipe-list { display: flex; flex-wrap: wrap; gap: 24px; }
.recipe-list > .text-section { background: var(--surface); border-radius: var(--radius-sm); padding: var(--s-20); box-shadow: var(--shadow); flex: 1 1 260px; min-width: 240px; }

/* Testimonials – light cards for contrast requirement */
.testimonial-card p { color: var(--dark); }
.testimonial-card strong { color: #05271A; }

/* Footer */
footer { background: #0A121A; border-top: 1px solid rgba(255,255,255,0.06); margin-top: var(--s-32); }
footer .content-wrapper { background: transparent; box-shadow: none; padding: var(--s-24) 0; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s-12); }
footer nav a { color: var(--muted); padding: 8px 10px; border-radius: 8px; }
footer nav a:hover { background: rgba(82,168,255,0.1); color: var(--text); }
.footer-top, .footer-bottom, footer .newsletter, footer .social, footer .contact, footer .cta { display: flex; flex-direction: column; gap: var(--s-12); }
.footer-bottom { padding-top: var(--s-12); border-top: 1px solid rgba(255,255,255,0.06); color: var(--muted); }

/* Lists inside pricing, principles, etc. */
.text-section h3 { color: var(--neon-mint); font-size: 18px; }

/* Buttons generic */
.btn, .button, .link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(82,168,255,0.35); background: rgba(82,168,255,0.12); color: var(--text); transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(82,168,255,0.2); }
.btn-primary { background: linear-gradient(180deg, #2DFF8C 0%, #48E5C2 100%); color: #00120B; border: none; box-shadow: 0 10px 24px rgba(72,229,194,0.35); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(72,229,194,0.45), 0 0 20px rgba(45,255,140,0.35); }
.btn-ghost { background: transparent; border-color: rgba(82,168,255,0.35); }

/* Forms (if any appear later) */
input[type="text"], input[type="email"], textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid rgba(82,168,255,0.25); border-radius: 10px; padding: 12px 14px; }
input:focus, textarea:focus { outline: 2px solid var(--neon-blue); outline-offset: 2px; }

/* Mobile Navigation */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text); background: rgba(82,168,255,0.12); border: 1px solid rgba(82,168,255,0.35); transition: background 0.2s ease, transform 0.1s ease; }
.mobile-menu-toggle:hover { background: rgba(82,168,255,0.2); }
.mobile-menu-toggle:active { transform: scale(0.98); }

.mobile-menu { position: fixed; inset: 0; z-index: 1000; background: rgba(10,15,20,0.6); display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end; transform: translateX(100%); transition: transform 0.35s ease; }
.mobile-menu.open { transform: translateX(0%); }
.mobile-menu .mobile-nav { width: 88%; max-width: 360px; background: #0E1622; border-left: 1px solid rgba(82,168,255,0.25); display: flex; flex-direction: column; gap: 6px; padding: 70px 20px 20px; box-shadow: var(--shadow); }
.mobile-menu-close { position: absolute; top: 14px; right: 16px; z-index: 1001; width: 40px; height: 40px; border-radius: 10px; color: var(--text); background: rgba(82,168,255,0.12); border: 1px solid rgba(82,168,255,0.35); }
.mobile-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 10px; color: var(--text); border: 1px solid transparent; }
.mobile-nav a:hover { background: rgba(72,229,194,0.12); border-color: rgba(72,229,194,0.3); }

/* Desktop nav visibility */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* Text-image section responsiveness */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}
@media (min-width: 769px) {
  .text-image-section { flex-direction: row; }
}

/* Content arrangement helpers using only flexbox */
.stack { display: flex; flex-direction: column; gap: var(--s-16); }
.row { display: flex; flex-direction: row; gap: var(--s-16); flex-wrap: wrap; align-items: center; }

/* Cards and surfaces */
.surface { background: var(--surface); border-radius: var(--radius); padding: var(--s-24); box-shadow: var(--shadow); }
.neon-border { border: 1px solid rgba(82,168,255,0.35); box-shadow: 0 0 0 1px rgba(82,168,255,0.15) inset, 0 0 18px rgba(82,168,255,0.15); }

/* Icon sizing */
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }

/* Accessibility focus */
:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Apply subtle animation to hero content */
.hero .content-wrapper { animation: fadeInUp 0.5s ease both; }

/* Ensure minimum spacing between all content cards/sections */
section + section { margin-top: var(--s-24); }
.content-wrapper + .content-wrapper { margin-top: var(--s-20); }

/* Images inside text blocks shouldn't overflow */
.text-section img { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 6px; }

/* Index specific adjustments */
.hero .cta-group a { font-weight: 700; }

/* Pricing/Packages as flex columns */
/* (Using only flex-wrap to create responsive columns) */
.text-section > .text-section { border: 1px solid rgba(82,168,255,0.25); border-radius: var(--radius-sm); padding: var(--s-20); background: rgba(19,28,40,0.5); }

/* Review counts lines */
.text-section p img + span, .text-section p { display: inline-flex; align-items: center; gap: 8px; }

/* Header elevation on scroll hint (visual only) */
header { box-shadow: 0 2px 20px rgba(0,0,0,0.25); }

/* Cookie Consent Banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--accent); color: #0A1A14; border-top: 2px solid var(--primary); box-shadow: 0 -8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; transform: translateY(110%); transition: transform 0.35s ease; }
.cookie-banner.show { transform: translateY(0%); }
.cookie-banner .cookie-row { display: flex; flex-direction: column; gap: 12px; }
.cookie-banner p { color: #0B1F1A; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn-accept { background: #1E6B3A; color: #FFFFFF; border-radius: 10px; padding: 10px 14px; border: 1px solid #15512A; }
.cookie-actions .btn-accept:hover { background: #1B6135; }
.cookie-actions .btn-reject { background: #FFFFFF; color: #0B1F1A; border: 1px solid #C8D7CE; border-radius: 10px; padding: 10px 14px; }
.cookie-actions .btn-settings { background: #2C5E7A; color: #FFFFFF; border-radius: 10px; padding: 10px 14px; border: 1px solid #254E65; }

/* Cookie Modal */
.cookie-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; padding: 20px; }
.cookie-backdrop.open { display: flex; }
.cookie-modal { width: 100%; max-width: 720px; background: #FFFFFF; color: #0B1F1A; border-radius: 14px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); animation: fadeInUp 0.35s ease both; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 16px; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px 16px; }
.cookie-modal .modal-footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px 16px; }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: #F8FBF9; border: 1px solid #E1EEE7; }
.cookie-category .label { display: flex; flex-direction: column; gap: 2px; }
.cookie-category .hint { color: #3B4B44; font-size: 14px; }
.cookie-category .switch { display: inline-flex; align-items: center; gap: 10px; }
/* Toggle switch */
.toggle { position: relative; width: 46px; height: 26px; background: #D6E5DC; border-radius: 20px; border: 1px solid #C3D5CA; display: inline-flex; align-items: center; padding: 2px; transition: background 0.2s ease; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transform: translateX(0); transition: transform 0.2s ease; }
.toggle.on { background: #1E6B3A; border-color: #15512A; }
.toggle.on::after { transform: translateX(20px); }
/* Badge for Essential */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #E6F4EC; color: #0E3A22; font-size: 12px; border: 1px solid #CDE6D7; }

/* Responsive: put banner actions side-by-side on wide screens */
@media (min-width: 640px) {
  .cookie-banner .cookie-row { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Utility: separators and lines */
.hr { height: 1px; background: rgba(255,255,255,0.08); width: 100%; }

/* Visual accents – neon separators */
.accent-line { height: 2px; width: 100%; background: linear-gradient(90deg, rgba(45,255,140,0.5), rgba(82,168,255,0.5)); }

/* Ensure large touch targets */
nav a, .mobile-nav a, .cookie-actions button, .cookie-actions .btn-accept, .cookie-actions .btn-reject, .cookie-actions .btn-settings { min-height: 40px; }

/* Make sure images in hero don't stretch layout */
.hero img { max-height: 64px; }

/* Content spacing – prevent overlap */
.content-wrapper > * + * { margin-top: 0; }

/* Accessibility: high-contrast in testimonial blocks (dark text on light bg) */
section .testimonial-card { background: #FFFFFF; color: #0B1F1A; }
section .testimonial-card p, section .testimonial-card strong { color: #0B1F1A; }

/* Tables (if any appear) – flex alternative simple */
.table-flex { display: flex; flex-direction: column; gap: 10px; }
.table-flex .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }

/* Header footer minor link hover */
footer .cta a { color: var(--neon-mint); }

/* Special pages minor tweaks */
.hero .subheadline { max-width: 60ch; }

/* Prevent any absolute positioning for content cards (only decorative allowed) */
.card, .text-section, .testimonial-card { position: relative; }

/* Strong color accents for headings across sections for futuristic vibe */
.content-wrapper h2 { color: var(--light); text-shadow: 0 0 16px rgba(82,168,255,0.18); border-left: 3px solid rgba(82,168,255,0.4); padding-left: 10px; }

/* Ensure 20px+ margin between cards in any flex container */
.card-container > *, .content-grid > *, .recipe-list > *, .text-image-section > * { margin: 0; }

/* ----------------------------------
   Visibility and layout on larger screens
---------------------------------- */
@media (min-width: 768px) {
  .content-wrapper { padding: var(--s-32); }
  .cta-group a { padding: 12px 20px; }
}

/* ----------------------------------
   Print minimal styling (optional safety)
---------------------------------- */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-backdrop { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .content-wrapper { background: #FFFFFF; color: #000000; box-shadow: none; border: 1px solid #DDD; }
}

/* -----------------------------
   End of stylesheet
----------------------------- */