/* ==========================================================================
   Moris AI Institute — shared site chrome (header + footer + primitives)
   Loaded site-wide from resources/views/includes/head.blade.php so every
   page - hand-built static pages AND Page Builder / legal pages rendered
   through layouts.app - gets the locked header and footer styling.
   Page-level <style> blocks load after this file and win on any conflict.
   ========================================================================== */
:root {
  --primary-blue:#0B2D5B;
  --accent-green:#00C853;
  --teal:#00B4D8;
  --navy:#0F172A;
  --light-blue:#E3F2FD;
  --dark-green:#064E3B;
  --sky-blue:#38BDF8;
  --light-gray:#F5F7FA;
  --charcoal:#334155;
  --white:#FFFFFF;
  --border:#DDE5EC;
  --muted:#64748B;
  --success-soft:#E9FBF1;
  --blue-soft:#EEF7FF;
  --shadow:0 14px 36px rgba(11,45,91,.10);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1180px, calc(100% - 40px)); margin:0 auto; }

/* ---- Buttons (shared header CTAs + generic use) ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; padding:14px 22px; font-weight:800; font-size:15px;
  transition:.25s ease; border:1px solid transparent; cursor:pointer;
}
.btn-primary { background:var(--accent-green); color:#042414; box-shadow:0 10px 22px rgba(0,200,83,.18); }
.btn-primary:hover { transform:translateY(-2px); background:#00B94C; }
.btn-secondary { background:var(--primary-blue); color:var(--white); }
.btn-secondary:hover { transform:translateY(-2px); background:#082449; }
.btn-outline { border-color:#B8C7D6; color:var(--primary-blue); background:var(--white); }
.btn-outline:hover { border-color:var(--primary-blue); background:var(--blue-soft); }
.arrow { font-size:18px; }

/* ---- Header (locked). Scoped to the layout-level <header> so it never
       touches a <header> inside page content. ---- */
body > header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(221,229,236,.9); backdrop-filter:blur(12px);
}
body > header .nav-wrap { height:78px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
body > header .brand { display:flex; align-items:center; gap:10px; min-width:210px; }
body > header .brand img { width:66px; height:66px; object-fit:contain; }
body > header .brand-copy strong { display:block; font-size:17px; color:var(--primary-blue); letter-spacing:.01em; }
body > header .brand-copy span { font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; }
body > header nav { display:flex; gap:22px; align-items:center; font-size:14px; font-weight:700; color:#34465A; }
body > header nav a:hover { color:var(--primary-blue); }
body > header nav a.active { color:var(--primary-blue); }
body > header .nav-cta { display:flex; gap:10px; }
body > header .mobile-menu { display:none; }

/* ---- Footer (locked). Scoped to the layout-level <footer> so it never
       touches a <footer> inside page content (e.g. legal page sign-off). ---- */
body > footer { background:#061A31; color:var(--white); padding:52px 0 22px; }
body > footer .footer-grid { display:grid; grid-template-columns:1.35fr .8fr .8fr 1.15fr; gap:36px; }
body > footer .footer-brand img { width:94px; margin-bottom:12px; }
body > footer .footer-brand p { color:#B8C8DA; font-size:13px; max-width:320px; }
body > footer .footer-col h3 { font-size:14px; margin-bottom:14px; color:var(--white); }
body > footer .footer-col a, body > footer .footer-col p { display:block; color:#B8C8DA; font-size:13px; margin:8px 0; }
body > footer .footer-col a:hover { color:var(--white); }
body > footer .footer-bottom {
  border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:18px;
  display:flex; justify-content:space-between; gap:20px; color:#8EA4BA; font-size:12px;
}
body > footer .footer-bottom a:hover { color:var(--white); }
body > footer .footer-bottom .cookie-consent-reopen { color:inherit; }

@media (max-width:980px) {
  body > header .nav-wrap { flex-wrap:wrap !important; }
  body > header nav, body > header .nav-cta { display:none !important; }
  body > header .mobile-menu {
    display:flex !important; align-items:center; justify-content:center;
    width:34px; height:34px; font-size:26px; line-height:1;
    color:var(--primary-blue); cursor:pointer; user-select:none;
  }

  /* Open state, driven by the .nav-open class the header script toggles.
     !important here is deliberate: every page's own <style> block redeclares
     these same selectors, and those load after this file, so without
     !important the menu would never actually open on most pages.
     Height is forced on both `header` and `.nav-wrap` because some pages
     put the fixed 78px height on the <header> element itself rather than
     on .nav-wrap - leaving header un-overridden clips the open dropdown
     and lets it overlap the content below instead of pushing it down. */
  body > header.nav-open { height:auto !important; overflow:visible !important; }
  body > header.nav-open .nav-wrap { height:auto !important; padding-bottom:14px !important; }
  body > header.nav-open nav,
  body > header.nav-open .nav-cta {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    order:5;
    gap:0 !important;
  }
  body > header.nav-open nav {
    border-top:1px solid rgba(221,229,236,.9);
  }
  body > header.nav-open nav a {
    padding:13px 4px !important;
    border-bottom:1px solid rgba(221,229,236,.6);
  }
  body > header.nav-open .nav-cta {
    gap:10px !important;
    padding-top:14px;
  }

  body > footer .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .container { width:min(100% - 28px,1180px); }
  body > header .brand-copy { display:none; }
  body > footer .footer-grid { grid-template-columns:1fr; }
  body > footer .footer-bottom { flex-direction:column; }
}