/* Modern stylesheet for Mara Language Preservation */
:root{
  /* Theme-aware variables (light/system defaults) */
  --transition-fast: 220ms;

  /* Design tokens: typography & spacing */
  --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-size-base: 16px;
  --base-line-height: 1.6;
  --heading-line-height: 1.15;

  /* Heading scale (rem values) */
  --h1: 2.0rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1.1rem;
  --h5: 1rem;
  --h6: 0.95rem;

  /* Spacing scale */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Component tokens */
  --container-pad: 1rem; /* existing token preserved */
  --container-maxw: 1100px;
  --btn-padding: 0.65rem 1rem;
  --btn-radius: 999px;
  --btn-font-size: 0.95rem;

  /* Page colors (light by default) */
  --bg: linear-gradient(180deg, #f6f7f9 0%, #eef2f6 100%);
  --card: #ffffff;
  --muted: #667085;
  --accent: #06b6a4; /* teal */
  --accent-2: #60a5fa; /* blue */
  --text: #07121a;
  --glass: rgba(2,6,23,0.04);

  /* Footer colors */
  --footer-bg: #e9f5ff;
  --footer-bottom-bg: #dbeefc;

  /* Layout */
  --radius:12px;
  --maxw:var(--container-maxw);
  --container-pad:var(--container-pad);
  font-family: var(--font-family-base);
}

/* Dark theme overrides */
[data-theme="dark"]{
  --bg: linear-gradient(180deg, #07121a 0%, #071826 100%);
  --card:#071a22;
  --muted:#9aa4b2;
  --accent:#00d1b2;
  --accent-2:#60a5fa;
  --text:#e7eef8;
  --glass: rgba(255,255,255,0.03);
  --footer-bg: #042b54;
  --footer-bottom-bg: #06345f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--base-line-height);
  font-size:var(--font-size-base);
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
  font-family:var(--font-family-base);
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--container-pad)}
/* Ensure consistent horizontal rhythm */
.container{width:100%;box-sizing:border-box}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.25rem .5rem;background:#fff;color:#000;border-radius:4px}
.site-header{backdrop-filter: blur(6px);background:transparent;padding:.75rem 0;position:sticky;top:0;z-index:1200;transition:background .28s ease,box-shadow .28s cubic-bezier(.2,.9,.3,1),transform .28s ease;transform:translateZ(0);opacity:0;transform:translateY(-6px)}
.site-header[data-loaded]{opacity:1;transform:none}
.site-header.scrolled{background:var(--card);box-shadow:0 8px 30px rgba(2,6,23,0.08);backdrop-filter:blur(10px)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700;will-change:transform}
.brand:hover{transform:translateY(-1px)}
.brand svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6))}
.brand-image{width:36px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45))}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.primary-nav a{color:var(--muted);text-decoration:none;padding:.45rem .6rem;border-radius:8px;transition:color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.9,.3,1);display:inline-block}
.primary-nav a:hover, .primary-nav a[aria-current]{color:var(--text);background:var(--glass);transform:translateY(-2px)}
.primary-nav .drawer-close{display:none}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text)}
.hamburger{width:22px;height:2px;background:var(--text);display:block;position:relative}
.hamburger::after,.hamburger::before{content:'';position:absolute;left:0;right:0;height:2px;background:var(--text)}
.hamburger::before{top:-6px}
.hamburger::after{bottom:-6px}
.hero{padding:6rem 0 2rem;position:relative;overflow:hidden}
.hero-inner{max-width:820px;margin:0 auto;text-align:center}
.lead{color:var(--muted);font-weight:400;margin-bottom:var(--space-md)}

/* Ensure decorative layers do not block interaction with primary content */
.hero-inner{position:relative;z-index:1100}
.hero .hero-actions{position:relative;z-index:1101;pointer-events:auto;display:inline-flex;gap:0.75rem;align-items:center}
.hero .hero-actions .btn{pointer-events:auto}
.wave{pointer-events:none;z-index:0}

/* Typography scale: headings & paragraphs */
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--space-md);line-height:var(--heading-line-height);font-weight:700;color:var(--text)}
h1{font-size:var(--h1);font-weight:800}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
h6{font-size:var(--h6)}
p{margin:0 0 var(--space-md);}

/* Section spacing: keep consistent vertical rhythm */
section{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#022;padding:var(--btn-padding);border-radius:var(--btn-radius);text-decoration:none;font-weight:700;font-size:var(--btn-font-size);box-shadow:0 6px 18px rgba(10,20,30,0.12)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:none;border:1px solid rgba(0,0,0,0.06)}
.wave{height:120px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));position:absolute;left:0;right:0;bottom:0}
.features{padding:2rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.feature{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:var(--space-md);border-radius:10px}
.content{padding:var(--space-xl) 0}
.cards .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:var(--space-md);border-radius:12px;transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,8,23,0.12)}
.meta{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:2rem 0;margin-top:2rem;color:var(--muted)}

/* Full-width institutional footer */
.site-footer--mlp{background:var(--footer-bg);color:var(--text);padding-top:2.25rem;padding-bottom:0;margin-top:2.5rem}
.site-footer--mlp a{color:var(--accent-2);text-decoration:none}
.site-footer--mlp a:hover{color:var(--accent);text-decoration:underline}
.site-footer--mlp .footer-top{padding:2rem 0}
.site-footer--mlp .footer-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.site-footer--mlp h3{margin:0 0 .5rem;color:var(--text);font-size:1.05rem}
.site-footer--mlp ul{list-style:none;padding:0;margin:0}
.site-footer--mlp li{margin:.45rem 0;color:var(--muted)}
.site-footer--mlp .footer-bottom{background:var(--footer-bottom-bg);padding:.9rem 0;margin-top:1.5rem}
.site-footer--mlp .footer-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.95rem}
.site-footer--mlp .footer-bottom-row a{color:var(--muted);margin-left:.6rem}

@media (max-width:900px){
  .site-footer--mlp .footer-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .site-footer--mlp .footer-columns{grid-template-columns:1fr;}
  .site-footer--mlp .footer-bottom-row{flex-direction:column;align-items:flex-start}
}
.contact-form{display:grid;gap:var(--space-sm);max-width:640px}
.contact-form input,.contact-form textarea,.contact-form select{padding:var(--space-sm);border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:transparent;color:var(--text);font-size:var(--btn-font-size);line-height:1.4}
label{font-size:.95rem;color:var(--muted);display:block;margin-bottom:var(--space-xs)}
.alt{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Dark theme input border */
[data-theme="dark"] input,[data-theme="dark"] textarea{border:1px solid rgba(255,255,255,0.04)}

/* Theme switcher control */

.theme-switcher{display:flex;align-items:center;gap:.5rem}
/* Use a subtle "glass" surface for the wrapper so the trigger (select) reads as a distinct panel */
.theme-switcher{position:relative;align-items:center;gap:.5rem;padding:.12rem;border-radius:10px;border:1px solid rgba(2,6,23,0.06);background:var(--glass);box-shadow:0 6px 18px rgba(2,6,23,0.03);transition:box-shadow 160ms ease,border-color 160ms ease}

.theme-switcher .label{display:none}
/* Make the select visually distinct from the wrapper so trigger vs panel is clearer */
.theme-switcher select{appearance:none;-webkit-appearance:none;background:var(--card);border:0;padding:.45rem .9rem .45rem 2.6rem;border-radius:8px;color:var(--text);width:100%;min-width:8.8rem;font-size:.95rem;font-weight:600;letter-spacing:0.2px;box-shadow:inset 0 -1px 0 rgba(2,6,23,0.02);display:block}
/* ensure padding is included in width calculations */
.theme-switcher select{box-sizing:border-box}

/* Ensure native option panels match theme card color for contrast */
.theme-switcher select option{background:var(--card);color:var(--text)}

/* Responsive: on small screens make control comfortably tappable and fit */
@media (max-width:480px){
  .theme-switcher{padding:.08rem;border-radius:10px}
  /* On very small screens show icon-only affordance; select remains available for accessibility
     but hidden visually to save header space. Tapping the icon cycles themes. */
  .theme-switcher select{display:none}
  .theme-switcher{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .theme-switcher::before{left:50%;transform:translate(-50%,-50%);width:20px;height:20px}
}

/* Responsive typography adjustments */
@media (max-width:480px){
  :root{--font-size-base:15px; --h1:1.6rem; --h2:1.25rem; --h3:1.05rem}
  .container{padding:0 .75rem}
}

/* Shorten brand label on small screens to save header space while preserving accessibility */
@media (max-width:480px){
  .brand-text{display:none}
  .brand::after{content:"MLP";display:inline-block;margin-left:.4rem;font-weight:800;color:var(--text);font-size:0.98rem;line-height:1;vertical-align:middle}
}

/* Small/medium screens: align switcher to the right and limit dropdown width to viewport */
@media (max-width:720px){
  .theme-switcher{margin-left:auto;z-index:50}
  .theme-switcher select{min-width:120px;max-width:220px}
}

@media (max-width:480px){
  .theme-switcher{margin-left:auto;z-index:50}
  .theme-switcher select{min-width:100px;max-width:calc(100vw - 48px)}
}

/* Make the footer 'Give Feedback' CTA more compact on small screens */
@media (max-width:640px){
  .mlp-footer .btn{padding:.45rem .7rem;font-size:.88rem;border-radius:10px}
  .mlp-footer .btn + .btn{margin-left:.5rem}
}

/* When the mobile nav is open, let the nav capture touches/clicks — don't block with the switcher */
@media (max-width:720px){
  .primary-nav.open ~ .theme-switcher{pointer-events:none}
  .primary-nav.open ~ .theme-switcher *{pointer-events:none}
  /* Fallback: if we set a `nav-open` class on the nav-row, also disable interactions */
  .nav-row.nav-open .theme-switcher{pointer-events:none}
  .nav-row.nav-open .theme-switcher *{pointer-events:none}
  /* Stronger: hide the theme switcher entirely while mobile nav is open to avoid any stacking/overlay issues */
  .nav-row.nav-open .theme-switcher{display:none !important}
}

/* Icon area (left) */
.theme-switcher::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);display:block;width:18px;height:18px;background-size:18px 18px;background-repeat:no-repeat;opacity:0.95;pointer-events:none}

/* Icon variants based on active theme data attribute on wrapper */
.theme-switcher[data-active-theme="light"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23062E2A'><path d='M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.79 1.8-1.79zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.03 1.05l1.79-1.79-1.79-1.79-1.79 1.79 1.79 1.79zM17 13h3v-2h-3v2zM6.76 19.16l-1.79 1.79 1.79 1.79 1.79-1.79-1.79-1.79zM12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16z'/></svg>")}
.theme-switcher[data-active-theme="dark"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CDE6FF'><path d='M21.64 13.04A9 9 0 1 1 10.96 2.36 7 7 0 0 0 21.64 13.04z'/></svg>")}
.theme-switcher[data-active-theme="system"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23062E2A'><path d='M12 3a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V4a1 1 0 0 1 1-1zm6.36 2.64a1 1 0 0 1 1.41 0l1.42 1.42a1 1 0 0 1-1.41 1.41L18.36 7.05a1 1 0 0 1 0-1.41zM21 11h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM4 11H2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2zm1.05-6.36L3.63 6.05A1 1 0 1 0 5.05 7.47L6.47 6.05A1 1 0 0 0 5.05 4.64zM12 19a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zM6.34 17.66a1 1 0 0 0-1.41 1.41l1.42 1.42a1 1 0 0 0 1.41-1.41L6.34 17.66zM18.36 17.66l1.42 1.42a1 1 0 0 0 1.41-1.41l-1.42-1.42a1 1 0 0 0-1.41 1.41zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/></svg>")}

/* Subtle focus style, keyboard friendly */
.theme-switcher:focus-within{box-shadow:0 6px 18px rgba(2,6,23,0.06);border-color:rgba(96,165,250,0.12)}

/* Donate button (Buy Me a Coffee) */
.donate-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .9rem;border-radius:999px;background:linear-gradient(90deg,rgba(6,182,164,0.06),rgba(96,165,250,0.06));color:var(--text);border:1px solid rgba(2,6,23,0.06);text-decoration:none;font-weight:700;font-size:.95rem;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.donate-btn .donate-icon{width:18px;height:18px;display:inline-block;background-size:18px 18px;background-repeat:no-repeat;flex:0 0 18px}
.donate-btn .donate-text{display:inline-block}
.donate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.donate-btn:focus{outline:3px solid rgba(96,165,250,0.14);outline-offset:3px}

/* Header donate button: hidden on desktop, visible on small screens */
.header-donate{display:none}
@media (max-width:720px){
  .header-donate{display:inline-flex;margin-left:.6rem}
}

/* Gentle, calm color variant for footer */
.donate-btn--footer{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#022;border:0}

.footer-donate{display:flex;flex-direction:row;align-items:center;gap:.75rem}
.footer-donate .donate-note{font-size:.85rem;color:var(--muted);max-width:360px}

@media (max-width:720px){
  .donate-btn{font-size:.92rem;padding:.5rem .8rem}
  .footer-donate{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion: reduce){
  .donate-btn, .donate-btn:hover{transition:none;transform:none}
}

/* Remove native focus ring on the select so the wrapper's focus style is used */
.theme-switcher select:focus{outline:0;box-shadow:none}
.theme-switcher select::-moz-focus-inner{border:0}
.theme-switcher select::-ms-expand{display:none}

/* Dark theme adjustments */
[data-theme="dark"] .theme-switcher{border-color:rgba(255,255,255,0.06);background:var(--glass);box-shadow:0 6px 18px rgba(2,6,23,0.12)}
[data-theme="dark"] .theme-switcher select{color:var(--text);background:var(--card);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.01)}

/* Animations */
[data-anim]{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.85,.32,1)}
[data-anim].in-view{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  .nav-row{gap:.5rem}
}
/* Hide the drawer donate link on desktop — keep the standalone header donate button as the primary action.
   Show the drawer link only on small screens (where the drawer is used). */
.primary-nav ul li a.donate-link-drawer{display:none}
@media (max-width:720px){
  .primary-nav ul li a.donate-link-drawer{display:block}
}
@media (max-width:720px){
  /* Mobile drawer: fixed-position off-canvas navigation */
  .primary-nav{position:fixed;left:0;top:0;bottom:0;height:100vh;width:84%;max-width:320px;transform:translateX(-100%);background:var(--card) !important;padding:1.25rem 1rem;display:block;z-index:1350;box-shadow:0 20px 50px rgba(2,6,23,0.5);transition:transform .28s cubic-bezier(.2,.9,.3,1);overflow:auto;-webkit-overflow-scrolling:touch}
  /* Ensure drawer sits above header controls and shows clear text (higher than backdrop) */
  .primary-nav{z-index:2000}
  .primary-nav a{color:var(--text) !important}
  .primary-nav a *{color:var(--text) !important}

  /* Style the close affordance so it's visible against the drawer (left-aligned) */
  .primary-nav .drawer-close{position:absolute;left:12px;top:12px;background:transparent;border:0;color:var(--text);width:36px;height:36px;border-radius:6px;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:1310}
  /* Ensure links are not obscured by the close button and are large enough to read */
  .primary-nav{padding-top:4rem}
  .primary-nav > ul{margin-top:0.6rem}
  .primary-nav ul{padding:0;margin:0;padding-top:0.25rem}
  .primary-nav li{list-style:none}
  .primary-nav a{display:block;padding:0.9rem 0;border-radius:6px;font-size:1.05rem;color:var(--text) !important}
  .primary-nav a:hover{background:rgba(0,0,0,0.04)}
  /* Force visible text and proper layering for drawer items (fixes invisible labels) */
  .primary-nav, .primary-nav ul, .primary-nav li, .primary-nav a {
    color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    -webkit-text-fill-color: unset !important;
    text-shadow: none !important;
  }
  .primary-nav a{font-size:1.05rem;line-height:1.6}
  .primary-nav.open{transform:translateX(0)}
  .primary-nav ul{flex-direction:column;gap:0}
  .primary-nav a{display:block;padding:1rem;border-radius:6px;color:var(--text)}
  .nav-toggle{display:block;position:relative;z-index:1200}

  /* Backdrop behind the drawer */
  .mobile-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.48);opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:1500}
  .mobile-backdrop.show{opacity:1;visibility:visible}
  /* Ensure drawer receives pointer events and children are interactive */
  .primary-nav, .primary-nav * { pointer-events: auto; }
  /* Backdrop should be clickable but must remain below the drawer so taps inside the drawer reach links */
  .mobile-backdrop{pointer-events:auto}
  /* Prevent background scrolling when the drawer is open */
  body.no-scroll{overflow:hidden;touch-action:none}
} 

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-anim]{transition:none;opacity:1;transform:none}
  .card:hover{transform:none;box-shadow:none}
}

/* Cookie consent banner */
.cookie-consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:2200;display:flex;justify-content:center;padding:.6rem 0}
.cookie-consent-banner .inner{max-width:var(--container-maxw);width:100%;display:flex;align-items:center;gap:1rem;padding:0 1rem;box-sizing:border-box}
/* Glass / blur surface */
.cookie-consent-banner{background:rgba(255,255,255,0.60);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);border-top:1px solid rgba(0,0,0,0.06);box-shadow:0 -12px 40px rgba(2,6,23,0.12);color:var(--text)}
.cookie-consent-banner p{margin:0;color:var(--text);font-size:0.95rem}
.cookie-consent-banner a{color:var(--accent-2);text-decoration:underline}
.cookie-consent-banner .btn-accept{margin-left:auto;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#022;padding:.5rem .9rem;border-radius:10px;font-weight:700;border:0;box-shadow:0 6px 18px rgba(2,6,23,0.08)}
.cookie-consent-banner .btn-accept:focus{outline:3px solid rgba(96,165,250,0.18);outline-offset:3px}

/* Dark theme glass variant */
[data-theme="dark"] .cookie-consent-banner{background:rgba(6,10,14,0.6);border-top:1px solid rgba(255,255,255,0.04);box-shadow:0 -12px 40px rgba(0,0,0,0.6)}
[data-theme="dark"] .cookie-consent-banner p{color:var(--text)}
[data-theme="dark"] .cookie-consent-banner .btn-accept{box-shadow:0 6px 18px rgba(0,0,0,0.45)}

@media (max-width:640px){
  .cookie-consent-banner{padding:.75rem 0}
  .cookie-consent-banner p{font-size:0.92rem}
  .cookie-consent-banner .inner{flex-direction:column;align-items:flex-start}
  .cookie-consent-banner .btn-accept{margin-left:0;margin-top:0.5rem}
}