/* ===========================================================================
   Aero Lube International — header styles
   Extracted from style.css, components.css and mega-menu.css.
   Covers: the fixed header bar + nav (.al-hdr-*), the "on hero" transparent
   header state, and the mobile drawer menu (.al-mobile-*, [data-drawer]).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Header + navigation
   --------------------------------------------------------------------------- */
.al-hdr-lede-xs { padding:10px 16px 9px; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:#062A50 }
.al-hdr-rule { position:fixed; top:0; left:0; right:0; z-index:90; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid #E3E8EF; transition:box-shadow .4s ease,padding .4s cubic-bezier(.22,1,.36,1); box-shadow:none; padding:21px 0 }
.al-hdr-block { position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#1268B3; transform:scaleX(0); transform-origin:left }
.al-hdr-row { max-width:1360px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:24px }
.al-hdr-wrap { display:block; width:180px; height:44px; overflow:hidden; position:relative; flex:none }
.al-hdr-block-a { position:absolute; width:272px; height:272px; left:-44px; top:-113px; transition:filter .4s ease }
.al-hdr-row-a { display:flex; align-items:center; gap:6px }
.al-hdr-wrap-a { position:relative }
.al-hdr-row-b { display:flex; align-items:center; gap:7px; padding:10px 16px; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:#062A50 }
.al-hdr-rule-a { display:block; width:6px; height:6px; border-right:1.5px solid #1268B3; border-bottom:1.5px solid #1268B3; transform:rotate(45deg) translateY(-1px) }
.al-hdr-heading-xs { position:relative; overflow:hidden; margin-left:14px; padding:14px 26px; background:#062A50; color:#fff; border-radius:10px; font-size:15px; font-weight:700; letter-spacing:-.01em; transition:background .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease }
.al-hdr-rule-b { display:none; align-items:center; justify-content:center; width:46px; height:46px; background:#062A50; border:0; cursor:pointer; flex-direction:column; gap:5px }
.al-hdr-block-b { display:block; width:12px; height:1.5px; background:#72C5F4 }
.al-hdr-pad { padding-top:var(--al-top,88px) }

/* ---------------------------------------------------------------------------
   Header — "on hero" transparent state
   --------------------------------------------------------------------------- */
header[data-onhero]{background:transparent!important;backdrop-filter:none!important;border-bottom-color:transparent!important;box-shadow:none!important}
header[data-onhero] [data-logo]{filter:brightness(0) invert(1)}
header[data-onhero] nav>a,header[data-onhero] nav>div>a{color:#fff!important}
header[data-onhero] nav>div>a span{border-color:#72C5F4!important}
header[data-onhero] [data-navline]{background:#72C5F4}

/* ==========================================================================
   MOBILE DRAWER — BRAND LINKS AS BOXES
   ========================================================================== */

html.al-menu-open,
html.al-menu-open body{
  overflow:hidden;
}

[data-drawer]{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:28px 24px 40px;
  overflow-y:auto;
  background:#041C36;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(24px);
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,1,.36,1),
    visibility .35s ease;
}

[data-drawer][data-open]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}

.al-mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:44px;
}

.al-mobile-brand{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  letter-spacing:.2em;
  color:#72C5F4!important;
  text-decoration:none!important;
}

.al-mobile-close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}

.al-mobile-link{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0!important;
  border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff!important;
  font-size:26px!important;
  line-height:1.2;
  font-weight:700!important;
  text-decoration:none!important;
}

.al-mobile-brand-title{
  margin:38px 0 14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  letter-spacing:.2em;
  color:#72C5F4;
}

/* IMPORTANT: brand container must wrap */
.al-mobile-brands{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start;
  gap:8px!important;
  padding:0!important;
  border:0!important;
}

/* IMPORTANT: each brand is a box, not a full-width list item */
.al-mobile-brand-link{
  display:inline-flex!important;
  width:auto!important;
  flex:0 0 auto!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  box-sizing:border-box;
  padding:9px 14px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:transparent!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:600!important;
  text-decoration:none!important;
  white-space:nowrap;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.al-mobile-brand-link:hover,
.al-mobile-brand-link:focus{
  background:rgba(18,104,179,.18)!important;
  border-color:#72C5F4!important;
  color:#72C5F4!important;
  transform:translateY(-1px);
}

.al-mobile-brand-link span{
  display:none;
}

.al-mobile-quote{
  display:block;
  margin-top:40px;
  padding:18px!important;
  border-radius:10px;
  background:#1268B3!important;
  color:#fff!important;
  text-align:center;
  font-size:16px!important;
  font-weight:700!important;
  text-decoration:none!important;
}

/* Also make the original JS-generated fallback brand links boxes.
   These links don't have .al-mobile-brand-link, so target only the
   brand list directly inside the generated drawer. */
[data-drawer] > div:nth-of-type(3) + div a{
  display:inline-flex;
  width:auto;
  flex:0 0 auto;
  padding:9px 14px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  background:transparent!important;
  font-size:15px!important;
  font-weight:600!important;
  text-decoration:none!important;
  white-space:nowrap;
}

/* Mobile only */
@media (max-width:940px){
  [data-drawer]{
    display:flex!important;
  }

  [data-drawer] .al-mobile-brands{
    width:100%;
  }
}

@media (max-width:640px){
  [data-drawer]{
    padding:22px 20px 30px;
  }

  .al-mobile-link{
    font-size:22px!important;
  }

  .al-mobile-brand-link{
    font-size:15px!important;
    padding:9px 13px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  [data-drawer],
  .al-mobile-brand-link,
  .al-mobile-link{
    transition:none!important;
  }
}