/* =====================================================================
   MyvanCMS — "Home Version 02" hero + header
   ---------------------------------------------------------------------
   Reproduces the layout of
     https://data.themeim.com/wp/palace/home-version-02
   measured in a browser at 1600px rather than eyeballed. The figures the
   original uses, and that are matched here:

     header      position:absolute, fully transparent, z-index 1001
                 -> it overlays the hero instead of sitting above it
     hero        full-bleed photo, background-size:cover, ~900px tall,
                 dark navy scrim over the image
     h1          72px / 84px line-height, weight 700, WHITE, UPPERCASE,
                 left-aligned, with one phrase in the accent colour
     tabs        .tab-btn / .active-btn, active filled with the accent,
                 inactive transparent with rgba(255,255,255,.8) text
     search bar  wide white panel, dark navy "Search Now" button, radius 6px
     rails       contact details rotated -90deg on the left,
                 social icons stacked on the right

   ONE DELIBERATE DEPARTURE FROM THE DEMO
     The demo's accent is its own red, rgb(235,32,39). This uses MyVan's brand
     maroon, var(--pl-brand) = #6B1216, because that is this site's identity —
     copying the demo's red would put a colour on the home page that appears
     nowhere else in the CMS.

   SCOPE
     The overlay header applies ONLY where a view opts in, via
     <body class="has-hero-overlay"> (set from layouts/public.php when the
     controller passes heroOverlay). Inner pages keep the solid white header,
     because they have a light page-banner behind it and white-on-white would
     be unreadable.

   Loaded after palace.css / pages.css / spacing.css. palace.css itself is
   untouched — delete the <link> in layouts/public.php to revert.

   MPDI REBRAND (2026-09, Chul): the pill/tab/search/button radii and the navy
   scrim tokens that lived here were removed — assets/mpdi.css (loaded last)
   now owns radius (zero everywhere), palette (#440101) and Poppins. The
   layout math below is unchanged.
   ===================================================================== */

:root{
  --hero-h:900px;              /* demo measured 902px */
  --hero-navy:#171B2A;         /* demo's Search Now button colour */

  /*
   * Scrim strength. The demo's own photo is a dark dusk shot, so it needed
   * little help; the image used here has a bright sky, and at the demo's
   * opacity the white headline sat at roughly 2.5:1 against it — below WCAG's
   * 4.5:1 for body text and 3:1 even for large text. These values were raised
   * until the headline reads cleanly across the whole photo. Lower them only
   * if the hero image is changed for a darker one.
   */
  --hero-scrim-left:rgba(23,27,42,.80);
  --hero-scrim-mid:rgba(23,27,42,.62);
  --hero-scrim-right:rgba(23,27,42,.38);
}

/* =====================================================================
   1. HEADER — transparent overlay
   ===================================================================== */

body.has-hero-overlay .site-header{
  position:absolute;
  inset:0 0 auto 0;
  background:transparent;
  box-shadow:none;
  z-index:1001;
  padding:22px 0;
}

/* The logo is a dark mark on a dark photo, so it is inverted to white.
   filter is used rather than a second asset so there is only one logo to
   manage in Settings. */
body.has-hero-overlay .site-header .brand img{
  filter:brightness(0) invert(1);
}

/* Nav sits in a translucent pill, as in the demo. */
body.has-hero-overlay .nav-pill-wrap{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  padding:6px 10px;
}
body.has-hero-overlay .nav-pill-wrap .nav-link{color:rgba(255,255,255,.88)}
body.has-hero-overlay .nav-pill-wrap .nav-link:hover,
body.has-hero-overlay .nav-pill-wrap .nav-link.active{color:#fff}
body.has-hero-overlay .nav-pill-wrap .nav-link.active{
  background:var(--pl-brand);
}
body.has-hero-overlay .navbar-toggler{color:#fff;border-color:rgba(255,255,255,.4)}
body.has-hero-overlay .navbar-toggler-icon{filter:invert(1) brightness(2)}

/* The collapsed mobile menu needs a solid backdrop or it is unreadable
   against the photo. */
@media (max-width:991.98px){
  body.has-hero-overlay .navbar-collapse{
    background:var(--hero-navy);
    padding:12px 16px;
    margin-top:12px;
  }
}

/* Once scrolled, the header becomes solid so the nav stays legible over
   page content. palace.css already toggles .is-stuck from myvan.js. */
body.has-hero-overlay .site-header.is-stuck{
  position:fixed;
  background:#fff;
  box-shadow:0 6px 30px rgba(23,27,42,.08);
  padding:10px 0;
}
body.has-hero-overlay .site-header.is-stuck .brand img{filter:none}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap{
  background:var(--pl-panel);
  border-color:var(--pl-line);
  backdrop-filter:none;
}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link{color:var(--pl-ink)}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link.active{color:#fff}
body.has-hero-overlay .site-header.is-stuck .navbar-toggler{color:var(--pl-ink);border-color:var(--pl-line)}
body.has-hero-overlay .site-header.is-stuck .navbar-toggler-icon{filter:none}

/* =====================================================================
   2. HERO
   ===================================================================== */

.hero-v2{
  position:relative;
  min-height:var(--hero-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--hero-navy);   /* shows through if the photo is missing */
}

.hero-v2__image{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* The scrim. Without it, white type over a bright photo fails contrast —
   this is what makes a 72px white headline readable on any image. */
.hero-v2__image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--hero-scrim-left) 0%,
    var(--hero-scrim-mid) 55%,
    var(--hero-scrim-right) 100%);
}

.hero-v2__inner{position:relative;z-index:2;width:100%;padding:120px 0 90px}

/* The rotated contact rail occupies the left edge, and at 1200px+ the container
   put the headline flush against it (measured: 0px clearance). Content is
   indented past it rather than the rail being moved, so the rail keeps the
   screen-edge position the design gives it. */
@media (min-width:1200px){
  .hero-v2__inner .pl-container{padding-left:72px}
}

/* --- eyebrow: label + rule, as in the demo --- */
.hero-v2__eyebrow{
  display:flex;align-items:center;gap:16px;
  color:var(--pl-brand);
  font-weight:700;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px;
}
.hero-v2__eyebrow::after{
  content:"";height:2px;width:110px;background:var(--pl-brand);opacity:.9;
}

/* --- headline --- */
.hero-v2 h1{
  color:#fff;
  font-size:72px;line-height:84px;font-weight:700;
  text-transform:uppercase;text-align:left;
  margin:0 0 22px;
  max-width:16ch;
}
.hero-v2 h1 .hero-v2__accent{color:var(--pl-brand)}

.hero-v2__lead{
  color:rgba(255,255,255,.82);
  font-size:1.0625rem;line-height:1.9;
  max-width:56ch;margin:0 0 34px;
}

/* =====================================================================
   3. TABS + SEARCH BAR
   ===================================================================== */

.hero-v2__tabs{display:flex;gap:0;margin:0}
.hero-v2__tabs .tab-btn{
  appearance:none;border:0;background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.8);
  font-weight:700;font-size:.9375rem;
  padding:12px 30px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.hero-v2__tabs .tab-btn:hover{color:#fff}
.hero-v2__tabs .tab-btn.active-btn{background:var(--pl-brand);color:#fff}

.hero-v2__search{
  background:#fff;
  padding:22px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  max-width:1180px;
}
.hero-v2__search label{
  display:block;
  font-size:.8125rem;font-weight:700;color:var(--pl-ink);
  margin-bottom:6px;
}
.hero-v2__search .form-select{
  border:0;padding:0;
  font-size:.9375rem;color:var(--pl-body);
  background-position:right .25rem center;
  box-shadow:none;
}
.hero-v2__search .form-select:focus{box-shadow:none;outline:2px solid var(--pl-brand);outline-offset:4px}

/* A hairline between fields, as the demo has. */
.hero-v2__search .hero-v2__field + .hero-v2__field{
  border-left:1px solid var(--pl-line);
  padding-left:24px;
}

.hero-v2__go{
  background:var(--hero-navy);color:#fff;
  border:0;
  font-weight:700;font-size:.9375rem;
  padding:14px 28px;
  display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;
  transition:background .18s ease;
}
.hero-v2__go:hover{background:var(--pl-brand);color:#fff}

/* =====================================================================
   4. SIDE RAILS
   Decorative but informative; hidden below 1200px where there is no room.
   ===================================================================== */

.hero-v2__rail,
.hero-v2__social{position:absolute;z-index:3;display:none}

@media (min-width:1200px){
  .hero-v2__rail,.hero-v2__social{display:flex}

  .hero-v2__rail{
    left:26px;top:50%;
    transform:translateY(-50%) rotate(-180deg);
    writing-mode:vertical-rl;
    align-items:center;gap:26px;
  }
  .hero-v2__rail a{
    color:rgba(255,255,255,.75);
    font-size:.8125rem;font-weight:600;letter-spacing:.08em;
    text-decoration:none;
  }
  .hero-v2__rail a:hover{color:#fff}
  .hero-v2__rail .dot{width:6px;height:6px;background:var(--pl-brand);flex:0 0 auto}

  .hero-v2__social{
    right:26px;top:50%;
    transform:translateY(-50%);
    flex-direction:column;gap:12px;
  }
  .hero-v2__social a{
    width:38px;height:38px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;font-size:.95rem;
    text-decoration:none;
    transition:background .18s ease;
  }
  .hero-v2__social a:hover{background:var(--pl-brand);border-color:var(--pl-brand)}
}

/* =====================================================================
   5. RESPONSIVE
   72px type is desktop-only; it is stepped down rather than allowed to wrap
   into six lines on a phone.
   ===================================================================== */

@media (max-width:1399.98px){
  .hero-v2 h1{font-size:60px;line-height:70px}
}

@media (max-width:1199.98px){
  :root{--hero-h:760px}
  .hero-v2 h1{font-size:52px;line-height:62px;max-width:20ch}
  .hero-v2__inner{padding:110px 0 70px}
}

@media (max-width:991.98px){
  :root{--hero-h:auto}
  .hero-v2 h1{font-size:40px;line-height:50px}
  .hero-v2__inner{padding:130px 0 60px}
  .hero-v2__image::after{background:rgba(23,27,42,.62)}  /* even scrim, text is centred-ish */
  .hero-v2__search{padding:18px}
  .hero-v2__search .hero-v2__field + .hero-v2__field{border-left:0;padding-left:0}
}

@media (max-width:575.98px){
  .hero-v2 h1{font-size:32px;line-height:40px}
  .hero-v2__lead{font-size:1rem;line-height:1.75}
  .hero-v2__tabs .tab-btn{padding:10px 18px;font-size:.875rem}
  .hero-v2__go{width:100%;justify-content:center}
}