/* =========================================================
   Magnolia State Driving Academy — header & footer only.

   Extracted from the main site's css/style.css so the Arkansas
   landing page can wear the same chrome without inheriting the
   main stylesheet's resets. Everything here is scoped under
   .site-header / .site-footer and uses --msda-* variables, so
   the landing page's own :root tokens, .btn, h1-h3 and body
   typography are left exactly as they are.
========================================================= */
.site-header,
.site-footer,
.msda-scroll-top{
  --msda-navy:#0A2B4E;
  --msda-navy-dark:#061a30;
  --msda-red:#C8102E;
  --msda-red-2:#e11e3c;
  --msda-red-dark:#9e0c24;
  --msda-off:#f5f8fc;
  --msda-gray:#5a6270;
  --msda-gray-2:#8892a2;
  --msda-line:#e3e9f1;
  --msda-shadow:0 12px 30px rgba(10,43,78,.10);
  --msda-transition:all .3s ease;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.65;
  font-size:15px;
}
.site-header *,
.site-footer *{box-sizing:border-box;}
.site-header a,
.site-footer a{text-decoration:none;color:inherit;}
.site-header ul,
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-header img,
.site-footer img{max-width:100%;display:block;}

/* ================= HEADER ================= */
.site-header{position:sticky;top:0;left:0;width:100%;z-index:1000;
  background:rgba(255,255,255,.98);backdrop-filter:blur(10px);
  box-shadow:0 2px 20px rgba(10,43,78,.06);transition:var(--msda-transition);}

.site-header .header-top{background:var(--msda-navy);color:#fff;font-size:13px;padding:9px 5vw;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.site-header .header-top a{color:#fff;opacity:.9;transition:var(--msda-transition);}
.site-header .header-top a:hover{color:var(--msda-red-2);opacity:1;}
.site-header .ht-left span{margin-right:22px;display:inline-flex;align-items:center;gap:7px;}
.site-header .ht-left a{margin-right:22px;display:inline-flex;align-items:center;gap:7px;}
.site-header .ht-left i{color:var(--msda-red-2);}
.site-header .ht-right{display:flex;align-items:center;gap:18px;}
.site-header .ht-right .socials a{margin-left:10px;font-size:13px;}

.site-header .header-main{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;gap:20px;}
.site-header .logo{display:block;}
.site-header .logo img{height:96px;width:auto;}

.site-header .nav-menu{display:flex;gap:2px;align-items:center;}
.site-header .nav-item{position:relative;}
.site-header .nav-item > a{padding:14px 16px;font-weight:500;font-size:14.5px;color:var(--msda-navy);
  border-radius:8px;transition:var(--msda-transition);display:inline-flex;align-items:center;gap:6px;}
.site-header .nav-item > a::after{content:'';position:absolute;left:50%;bottom:6px;width:0;height:2px;
  background:var(--msda-red);transition:var(--msda-transition);transform:translateX(-50%);}
.site-header .nav-item > a:hover{color:var(--msda-red);}
.site-header .nav-item > a:hover::after,
.site-header .nav-item.active > a::after{width:55%;}
.site-header .nav-item.active > a{color:var(--msda-red);}
.site-header .nav-item.has-dropdown > a .fa-chevron-down{font-size:10px;transition:var(--msda-transition);}
.site-header .nav-item.has-dropdown:hover > a .fa-chevron-down{transform:rotate(180deg);}
.site-header .nav-item.nav-login{margin-left:18px;}
.site-header .nav-item.nav-login > a{background:var(--msda-red);color:#fff;padding:12px 48px;border-radius:999px;
  font-weight:600;min-width:180px;justify-content:center;}
.site-header .nav-item.nav-login > a:hover{background:#a71028;color:#fff;}
.site-header .nav-item.nav-login > a::after{display:none;}

.site-header .dropdown{position:absolute;top:100%;left:0;min-width:240px;background:#fff;
  border-radius:12px;box-shadow:var(--msda-shadow);padding:12px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:var(--msda-transition);z-index:100;border-top:3px solid var(--msda-red);}
.site-header .nav-item.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.site-header .dropdown a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;
  color:var(--msda-navy);border-radius:8px;transition:var(--msda-transition);}
.site-header .dropdown a i{color:var(--msda-red);width:16px;}
.site-header .dropdown a:hover{background:var(--msda-off);color:var(--msda-red);padding-left:18px;}

.site-header .header-cta{display:flex;align-items:center;gap:14px;}
.site-header .header-cta .phone{color:var(--msda-navy);font-weight:600;font-size:14px;
  display:flex;align-items:center;gap:10px;line-height:1.2;}
.site-header .header-cta .phone i{background:var(--msda-red);color:#fff;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;animation:msdaRing 2.4s infinite;}
.site-header .header-cta .phone small{display:block;font-size:11px;color:var(--msda-gray-2);font-weight:400;}
@keyframes msdaRing{0%,100%{transform:rotate(0);}10%,30%{transform:rotate(-15deg);}20%,40%{transform:rotate(15deg);}}
.site-header .menu-toggle{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--msda-navy);}

/* ================= FOOTER ================= */
.site-footer{background:var(--msda-navy-dark);color:#c9d3e0;padding:70px 5vw 0;}
.site-footer .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;}
.site-footer .footer-col h4{color:#fff;font-size:1.05rem;margin:0 0 20px;position:relative;padding-bottom:12px;font-weight:600;}
.site-footer .footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--msda-red);border-radius:2px;}
.site-footer .footer-col p{font-size:.92rem;line-height:1.7;margin:0 0 16px;color:#c9d3e0;}
.site-footer .footer-col ul li{margin-bottom:10px;}
.site-footer .footer-col ul a{font-size:.92rem;transition:var(--msda-transition);display:inline-flex;align-items:center;gap:8px;}
.site-footer .footer-col ul a:hover{color:var(--msda-red-2);transform:translateX(5px);}
.site-footer .footer-col ul a i{color:var(--msda-red);font-size:.75rem;}
.site-footer .footer-logo{height:180px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1);}
.site-footer .footer-contact li{display:flex;gap:12px;font-size:.92rem;margin-bottom:14px;align-items:flex-start;}
.site-footer .footer-contact i{color:var(--msda-red);margin-top:5px;flex-shrink:0;}
.site-footer .footer-social{display:flex;gap:12px;margin-top:16px;}
.site-footer .footer-social a{width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;transition:var(--msda-transition);}
.site-footer .footer-social a:hover{background:var(--msda-red);transform:translateY(-4px);}
.site-footer .footer-badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.site-footer .footer-badges span{background:rgba(255,255,255,.06);padding:6px 12px;border-radius:8px;font-size:11px;color:#fff;
  display:inline-flex;align-items:center;gap:6px;}
.site-footer .footer-badges i{color:var(--msda-red);}

.site-footer .newsletter-form{display:flex;margin-top:16px;background:rgba(255,255,255,.08);border-radius:50px;overflow:hidden;padding:4px;}
.site-footer .newsletter-form input{flex:1;background:transparent;border:none;color:#fff;padding:10px 16px;outline:none;font-size:.9rem;font-family:inherit;}
.site-footer .newsletter-form input::placeholder{color:#8a97a8;}
.site-footer .newsletter-form button{background:var(--msda-red);color:#fff;border:none;border-radius:50px;padding:10px 20px;cursor:pointer;transition:var(--msda-transition);}
.site-footer .newsletter-form button:hover{background:var(--msda-red-dark);}

.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.86rem;color:#8a97a8;}
.site-footer .footer-bottom a{color:#c9d3e0;}
.site-footer .footer-bottom a:hover{color:var(--msda-red-2);}
.site-footer .footer-bottom .payments i{margin-left:8px;font-size:1.5rem;color:#8a97a8;}

/* ================= Scroll-to-top ================= */
.msda-scroll-top{position:fixed;bottom:102px;right:26px;width:52px;height:52px;background:var(--msda-red);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transition:var(--msda-transition);box-shadow:0 10px 25px rgba(200,16,46,.4);z-index:999;border:none;}
.msda-scroll-top.show{opacity:1;pointer-events:auto;}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .site-header .menu-toggle{display:block;}
  .site-header .header-cta .phone{display:none;}
  .site-header .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;
    padding:0 14px;gap:0;box-shadow:0 10px 30px rgba(0,0,0,.1);align-items:stretch;
    max-height:0;overflow:hidden;transform:none;
    transition:max-height .35s ease,padding .35s ease;z-index:999;}
  .site-header .nav-menu.open{max-height:calc(100vh - 120px);overflow-y:auto;padding:14px;}
  .site-header .nav-item > a{padding:14px 16px;border-bottom:1px solid var(--msda-line);width:100%;font-size:15px;}
  .site-header .nav-item > a::after{display:none;}
  .site-header .nav-item.nav-login{margin-left:0;}
  .site-header .nav-item.nav-login > a{min-width:0;padding:12px 24px;border-bottom:none;}
  .site-header .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    padding:0 0 8px 14px;border-top:none;display:none;min-width:0;}
  .site-header .nav-item.has-dropdown.mobile-open .dropdown{display:block;}
}

@media (max-width:768px){
  .site-header .header-top{display:none;}
  .site-header .header-main{padding:12px 5vw;}
  .site-header .logo img{height:70px;}
  .site-header .header-cta .phone span{display:none;}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:30px;}
  .site-footer .footer-bottom{flex-direction:column;text-align:center;}
}

@media (max-width:480px){
  .msda-scroll-top{bottom:84px;right:18px;width:46px;height:46px;}
}

@media (prefers-reduced-motion:reduce){
  .site-header *,.site-footer *,.msda-scroll-top{animation:none!important;transition:none!important;}
}


/* ------------------------------------------------------------------
   Footer width, for the eleven state pages that use this stylesheet.

   The grid is 1.4fr 1fr 1fr 1.2fr and drops straight to a single column
   at 768px, so between 769px and 1024px - every iPad in portrait - four
   columns are still being squeezed in. A grid track will not shrink past
   the longest unbreakable word inside it, so the row ran past the right
   edge of the screen and the whole page scrolled sideways with it.

   Two columns across that range, and minmax(0,...) so the tracks can
   actually give. The logo is declared at 180px tall, which is taller
   than it needs to be on a narrow screen and sets a wide floor of its
   own, so it steps down with the layout.
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  .site-footer .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
}
@media (max-width:768px){
  .site-footer .footer-grid{ grid-template-columns:minmax(0,1fr); }
}
.site-footer .footer-col{ min-width:0; }
.site-footer .footer-col a,
.site-footer .footer-col p,
.site-footer .footer-contact li{ overflow-wrap:anywhere; }

@media (max-width:480px){
  .site-footer .footer-logo{ height:120px; max-width:100%; }
}


/* Same heading-level change as the main stylesheet: the rule named h4,
   the markup now says h3, and without this the footer headings lose
   their colour against the dark background. */
.site-footer .footer-col h3{
  color:#fff;font-size:1.05rem;margin:0 0 20px;position:relative;
  padding-bottom:12px;font-weight:600;
}
.site-footer .footer-col h3::after{
  content:'';position:absolute;left:0;bottom:0;width:40px;height:3px;
  background:var(--msda-red);border-radius:2px;
}

/* Same as the main stylesheet: a fixed height with no width distorted the
   footer logo away from the proportions its tag claims. */
.site-footer .footer-logo{ width:auto; height:auto; max-height:180px; max-width:100%; }
@media (max-width:480px){ .site-footer .footer-logo{ max-height:120px; } }

/* ---- Footer layout (spacing and arrangement only; content, colours and
   icons are unchanged). Brand column, courses, locations in two columns,
   and the contact details set out as tidy rows. ---- */
.site-footer .footer-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,1.15fr);
  gap:clamp(28px,3.4vw,56px);align-items:start;
  max-width:1320px;margin:0 auto;padding-bottom:54px;
}
.site-footer .footer-col{min-width:0;}
/* Headings: the red accent stays; a faint rule runs the width of the column. */
.site-footer .footer-col h3,.site-footer .footer-col h4{
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:22px;
}
.site-footer .footer-col:first-child{padding-right:clamp(0px,2vw,24px);}
.site-footer .footer-col:first-child p{max-width:44ch;}
.site-footer .footer-col ul li{margin-bottom:12px;}
/* Location: two columns instead of one long list. */
.site-footer .footer-grid > .footer-col:nth-child(3) ul{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;
}
.site-footer .footer-grid > .footer-col:nth-child(3) ul li{margin-bottom:0;padding:6px 0;}
/* Contact details as ruled rows. */
.site-footer .footer-contact li{
  margin-bottom:0;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.55;
}
.site-footer .footer-contact li:first-child{padding-top:0;}
.site-footer .newsletter-form{margin-top:20px;}
.site-footer .footer-bottom{
  max-width:1320px;margin:0 auto;align-items:center;gap:12px 24px;padding:24px 0;
}
.site-footer .footer-bottom > span:last-child{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:flex-end;}

@media (max-width:1100px){
  .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .site-footer .footer-col:first-child{padding-right:0;}
}
@media (max-width:640px){
  .site-footer .footer-grid{grid-template-columns:minmax(0,1fr);gap:34px;}
  .site-footer .footer-bottom{flex-direction:column;text-align:center;}
  .site-footer .footer-bottom > span:last-child{justify-content:center;}
}
@media (max-width:360px){
  .site-footer .footer-grid > .footer-col:nth-child(3) ul{column-gap:14px;}
}

/* ---- Footer logo: the header's full-colour logo, shown on the footer's own
   background with no card behind it (was a white-tinted mark). ---- */
.site-footer .footer-logo{
  filter:none;width:100%;max-width:250px;height:auto;max-height:none;
  background:none;padding:0;border-radius:0;box-sizing:border-box;
  box-shadow:none;margin-bottom:20px;
}