/*
Theme Name: Minimal Starter
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Custom theme with video hero and sticky header
Version: 1.3
Text Domain: minimalstarter
*/

/* ---------------- VARIABLES ---------------- */
:root {
  --white:#ffffff;
  --black:#0A0A0A;
  --orange:#FF6A00;
  --muted:#F4F4F4;
  --border:#E0E0E0;
  --max-width:1100px;
}

/* ---------------- BASE ---------------- */
html, body {height:100%; margin:0; padding:0;}
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--black);
  line-height:1.6;
  text-align:left;
}
.wrap {max-width:var(--max-width); margin:0 auto; padding:0 1rem;}

/* ---------------- FONTS ---------------- */
/* Place files at: wp-content/themes/<your-theme>/assets/fonts/ */
@font-face {
  font-family: 'Bauhaus93';
  src: url("assets/fonts/Bauhaus 93 V2.woff2") format("woff2"),
       url("assets/fonts/Bauhaus 93 V2.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------- HEADER ---------------- */
/* Default header: transparent (so front-page starts transparent).
   JS will add .site-header--scrolled to show the white bar when needed. */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  border-bottom:2px solid transparent;
  box-shadow:none;
  padding:1rem 0;
  transition:background .28s ease, box-shadow .28s ease, border-color .28s ease, padding .28s ease;
}
.site-header .site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* logo+name left, menu right */
}

/* Over the hero (transparent, white text) */
.site-header.site-header--over-hero{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
.site-header.site-header--over-hero .site-name{ color:var(--white); }
.site-header.site-header--over-hero .primary-menu .ms-menu li a{ color:var(--white); }
.site-header.site-header--over-hero .primary-menu .ms-menu li a:hover{ color:var(--orange); }

/* Scrolled: white bar + thin border */
.site-header.site-header--scrolled{
  background:rgba(255,255,255,0.98);
  border-bottom-color:var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:.75rem 0;
}

/* Branding (logo + name) */
.site-branding{display:flex; align-items:center; gap:.75rem;}
.site-branding img, .site-branding .custom-logo{
  height:70px; width:auto; display:block;
}
.site-name{
  font-family:'Bauhaus93', sans-serif;   /* your Bauhaus 93 */
  font-size:2rem;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;
  margin:0;
  color:var(--black);                     /* default (non-over-hero) */
  text-decoration:none;
}

/* Menu (right) */
.primary-menu{display:flex; align-items:center;}
.primary-menu .ms-menu{
  display:flex; gap:2rem;
  list-style:none; margin:0; padding:0;
}
.primary-menu .ms-menu li a{
  text-decoration:none;
  font-weight:600;
  color:var(--black);                     /* default (non-over-hero) */
  transition:color .2s ease;
}
.primary-menu .ms-menu li a:hover{ color:var(--orange); }

/* ---------------- HERO (layered videos with crossfade) ---------------- */
/* --- HERO (layered videos + poster background) --- */
.ms-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-color:#000;
  /* poster is set inline on the section; kept as background image so it remains when videos removed */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ms-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transition: opacity .6s ease;
  opacity:0;
  will-change: opacity;
  background:#000;
}
.ms-hero-overlay{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.ms-hero-content{text-align:center; color:var(--white); max-width:1000px;}
.ms-hero-title{font-size:clamp(28px,6vw,56px); margin:0 0 .5rem; color:var(--white);}
.ms-hero-sub{font-size:1.1rem; margin-bottom:1.25rem; color:rgba(255,255,255,.85);}
.ms-hero .btn{margin:.35rem;}
/* Toggle hidden by default; remove 'display:none' if you want it visible */
.ms-hero-toggle{display:none !important;} /* hide any pause button */

/* ---------------- PROMO STRIP ---------------- */
.ms-promo-strip{
  background:var(--muted);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ms-promo-items{
  display:flex; gap:1rem; flex-wrap:wrap;
  align-items:center; justify-content:center;
  padding:.75rem 0;
}
.ms-promo-item{ font-weight:600; padding:.35rem .6rem; border-radius:6px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 860px){
  .site-branding img{ height:50px; }
  .site-name{ font-size:1.3rem; }
  .primary-menu .ms-menu{ gap:1rem; }
}