/* ==========================================================
   Sandman Combat
   Home Page
   public/assets/css/home.css
========================================================== */


/* ==========================================================
   PAGE THEME
========================================================== */

:root,
html[data-theme="dark"]{
  color-scheme:dark;

  --home-bg:#050505;
  --home-text:#f5f5f5;
}

html[data-theme="light"]{
  color-scheme:light;

  --home-bg:#f4f1ea;
  --home-text:#111111;
}


/* ==========================================================
   PAGE
========================================================== */

body{
  background:var(--home-bg);
  color:var(--home-text);
}

main{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}


/* ==========================================================
   HEADER → HERO BAND
========================================================== */

.site-hero-divider{
  width:100%;
  height:34px;

  margin:0;
  padding:0;

  background:#000;

  border-top:2px solid #d4af37;
  border-bottom:2px solid #d4af37;
}


/* ==========================================================
   HERO
========================================================== */

.hero-panel{
  position:relative;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  width:100%;

  margin:0;
  padding:0;

  overflow:hidden;
}

.home-hero__image{
  display:block;

  width:100%;
  max-width:1536px;
  height:auto;

  margin:0 auto;
}


/* ==========================================================
   INTERACTIVE HERO
========================================================== */
.home-hero__image{
  display:block;

  width:100%;
  max-width:none;
  height:auto;

  margin:0;
}

.home-hotspot{
  position:absolute;
  display:block;

  background:transparent;
  border:0;

  text-indent:-9999px;
  overflow:hidden;

  z-index:20;
}

/* ==========================================================
   HOME HERO — PRIMARY CTA HOTSPOTS
========================================================== */

.home-hotspot-journeys{
  left:1%;
  top:70%;
  width:25%;
  height:6%;
  z-index:30;
}

.home-hotspot-origins{
  left:28%;
  top:70%;
  width:24%;
  height:6%;
  z-index:30;
}
/* ==========================================================
   LANGUAGE
========================================================== */

.hidden-lang{
  display:none !important;
}


/* ==========================================================
   LIGHT MODE
========================================================== */

html[data-theme="light"] .home-hero__image{
  filter:
    brightness(1.02)
    contrast(1.02);
}


/* ==========================================================
   FLAG FRAME
   Black buffer outside both gold lines
========================================================== */

.home-flag-band{
  width:100%;

  margin:0;
  padding:20px 0;

  background:#000;
  border:15;

  overflow:hidden;
  line-height:0;
}

.home-flag-band img{
  display:block;

  width:100%;
  height:56px;

  margin:0;
  padding:0;

  object-fit:cover;
  object-position:center;

  border-top:2px solid #d4af37;
  border-bottom:2px solid #d4af37;

  box-sizing:border-box;
}
/* ==========================================================
   FOOTER
========================================================== */

#footer{
  margin:0;
  padding:0;
}

#footer .site-footer{
  margin-top:0;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:900px){

  .hero-panel{
    width:100%;
  }

  .home-hero__image{
    width:100%;
    max-width:none;
  }

}


/* ==========================================================
   PHONE PORTRAIT
========================================================== */

@media (max-width:768px) and (orientation:portrait){

  .hero-panel{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
  }

  .home-hero__image{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    margin:0;
    object-fit:contain;
    object-position:center top;
  }

  .home-hotspot-journeys{
    left:1%;
    top:70%;
    width:25%;
    height:6%;
    z-index:30;
  }

  .home-hotspot-origins{
    left:28%;
    top:70%;
    width:24%;
    height:6%;
    z-index:30;
  }

.home-flag-band{
    padding:6px 0;
}

.home-flag-band img{
    height:54px;
}
}

/* ==========================================================
   PHONE LANDSCAPE
========================================================== */

@media (max-height:600px) and (orientation:landscape){

  .hero-panel{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
  }

  .home-hero__image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    object-fit:contain;
    object-position:center top;
  }

.home-flag-band{
    padding:5px 0;
}

.home-flag-band img{
    height:48px;
}
}
/* =====================================================
   HOME — MANY PATHS
====================================================== */

.home-many-paths{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#000;
  border-top:2px solid rgba(212,175,55,.72);
  border-bottom:2px solid rgba(212,175,55,.72);
}

.home-many-paths__link{
  display:block;
  width:100%;
  text-decoration:none;
}

.home-many-paths__image{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

.home-many-paths__link:hover
.home-many-paths__image{
  filter:brightness(1.04);
}

.home-many-paths__link:focus-visible{
  outline:3px solid #d4af37;
  outline-offset:-3px;
}

@media (max-width:760px){
  .home-many-paths{
    border-top-width:1px;
    border-bottom-width:1px;
  }

  .home-many-paths__image{
    width:100%;
    max-width:none;
  }
}
/* =====================================================
   HOME HERO — COMBAT / STRENGTH / HONOR HOTSPOTS
====================================================== */

.home-hotspot-combat,
.home-hotspot-strength,
.home-hotspot-honor{
  position:absolute;
  top:74%;
  height:23%;
  z-index:6;
  display:block;
}

.home-hotspot-combat{
  left:0;
  width:33.333%;
}

.home-hotspot-strength{
  left:33.333%;
  width:33.333%;
}

.home-hotspot-honor{
  left:66.666%;
  width:33.334%;
}
/* =====================================================
   HOME MANY PATHS — FITNESS BUTTON HOTSPOT
====================================================== */

.home-many-paths__visual{
  position:relative;
  width:100%;
}

.home-many-paths__fitness-hotspot{
  position:absolute;

  /* Gold “Explore Fitness” button only */
  left:30%;
  top:87.8%;
  width:40%;
  height:10.5%;

  z-index:20;
  display:block;

  background:transparent;
  border:0;
  border-radius:10px;
}

.home-many-paths__fitness-hotspot:hover,
.home-many-paths__fitness-hotspot:focus-visible{
  background:rgba(212,175,55,.08);
  outline:2px solid rgba(212,175,55,.8);
  outline-offset:-2px;
}

/* ==========================================================
   HOME — STAY CONNECTED
========================================================== */

.home-connect{
  display:grid;
  grid-template-columns:110px minmax(0,.9fr) minmax(340px,1.2fr);
  gap:32px;
  align-items:center;

  width:min(1120px,calc(100% - 32px));
  margin:28px auto;
  padding:34px;

  border:1px solid rgba(212,175,55,.42);
  border-radius:20px;

  background:
    radial-gradient(
      circle at top left,
      rgba(212,175,55,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #10141b,
      #07090d
    );

  box-shadow:0 18px 38px rgba(0,0,0,.30);
}

.home-connect__icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:92px;
  height:92px;

  color:#d4af37;

  border:2px solid rgba(212,175,55,.68);
  border-radius:50%;
}

.home-connect__icon svg{
  width:48px;
  height:48px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-connect__eyebrow{
  margin:0 0 7px;

  color:#d4af37;

  font-size:.78rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.home-connect h2{
  margin:0 0 10px;

  color:#ffffff;

  font-size:clamp(1.7rem,3vw,2.55rem);
  line-height:1.06;
}

.home-connect__content p:not(.home-connect__eyebrow){
  max-width:520px;
  margin:0;

  color:#d4d4d8;

  line-height:1.65;
}

.home-connect__form{
  display:grid;
  gap:13px;
}

.home-connect__field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;

  overflow:hidden;

  border:1px solid rgba(212,175,55,.44);
  border-radius:12px;

  background:#171a20;
}

.home-connect__field input{
  width:100%;
  min-width:0;
  min-height:54px;

  padding:0 16px;

  color:#ffffff;
  background:transparent;

  border:0;
  outline:0;

  font:inherit;
}

.home-connect__field input::placeholder{
  color:#a1a1aa;
}

.home-connect__field input:focus{
  box-shadow:
    inset 0 0 0 2px rgba(212,175,55,.35);
}

.home-connect__field button{
  min-height:54px;
  padding:0 22px;

  color:#090909;
  background:
    linear-gradient(
      180deg,
      #e4bd47,
      #c99c24
    );

  border:0;

  font:inherit;
  font-weight:950;
  letter-spacing:.03em;
  text-transform:uppercase;

  cursor:pointer;
}

.home-connect__field button:hover,
.home-connect__field button:focus-visible{
  background:
    linear-gradient(
      180deg,
      #f0cf69,
      #d7aa2e
    );

  outline:none;
}

.home-connect__field button:disabled{
  cursor:wait;
  opacity:.65;
}

.home-connect__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;

  color:#a1a1aa;

  font-size:.82rem;
  line-height:1.5;
}

.home-connect__consent input{
  flex:0 0 auto;

  width:18px;
  height:18px;
  margin-top:2px;

  accent-color:#d4af37;
}

.home-connect__status{
  min-height:1.4em;
  margin:0;

  color:#d4d4d8;

  font-size:.9rem;
  font-weight:800;
}

.home-connect__status.is-success{
  color:#f0cf69;
}

.home-connect__status.is-error{
  color:#f87171;
}

html[data-theme="light"] .home-connect{
  background:
    radial-gradient(
      circle at top left,
      rgba(138,97,24,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f4ede1
    );

  border-color:#c6a85c;

  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

html[data-theme="light"] .home-connect h2{
  color:#171717;
}

html[data-theme="light"] .home-connect__content p:not(.home-connect__eyebrow){
  color:#374151;
}

html[data-theme="light"] .home-connect__field{
  background:#ffffff;
  border-color:#bfa35f;
}

html[data-theme="light"] .home-connect__field input{
  color:#171717;
}

html[data-theme="light"] .home-connect__consent{
  color:#4b5563;
}

@media (max-width:900px){

  .home-connect{
    grid-template-columns:88px minmax(0,1fr);
  }

  .home-connect__form{
    grid-column:1 / -1;
  }

  .home-connect__icon{
    width:78px;
    height:78px;
  }

}

@media (max-width:620px){

  .home-connect{
    grid-template-columns:1fr;
    gap:22px;

    width:min(100% - 20px,1120px);
    padding:25px 18px;

    text-align:center;
  }

  .home-connect__icon{
    margin:0 auto;
  }

  .home-connect__field{
    grid-template-columns:1fr;
    overflow:visible;

    border:0;
    background:transparent;
  }

  .home-connect__field input{
    min-height:52px;

    border:1px solid rgba(212,175,55,.44);
    border-radius:11px;

    background:#171a20;
  }

  html[data-theme="light"] .home-connect__field{
    background:transparent;
  }

  html[data-theme="light"] .home-connect__field input{
    background:#ffffff;
  }

  .home-connect__field button{
    min-height:52px;
    margin-top:10px;

    border-radius:11px;
  }

  .home-connect__consent{
    text-align:left;
  }

}
/* ==========================================================
   HOME INTRO — OLD TRADITIONS / MODERN TIMES
========================================================== */

.home-intro{
  width:min(1080px,calc(100% - 32px));
  margin:28px auto 24px;
  padding:34px 28px;

  text-align:center;

  border:1px solid rgba(212,175,55,.36);
  border-radius:20px;

  background:
    radial-gradient(
      circle at top,
      rgba(212,175,55,.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #11151c 0%,
      #080b10 100%
    );

  box-shadow:0 18px 38px rgba(0,0,0,.28);
}

.home-intro > div{
  max-width:820px;
  margin:0 auto;
}

.home-intro__eyebrow{
  margin:0 0 9px;

  color:#d4af37;

  font-size:.76rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.home-intro h1{
  margin:0;

  color:#ffffff;

  font-size:clamp(2rem,5vw,3.8rem);
  line-height:1.02;
  letter-spacing:-.035em;
}

.home-intro p:not(.home-intro__eyebrow){
  max-width:720px;
  margin:16px auto 0;

  color:#d4d4d8;

  font-size:clamp(1rem,2vw,1.12rem);
  line-height:1.7;
}

.home-intro__scroll{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:46px;
  margin-top:22px;
  padding:11px 18px;

  color:#111111;
  background:
    linear-gradient(
      180deg,
      #e2bd4c 0%,
      #c99b22 100%
    );

  border:1px solid #e7c65f;
  border-radius:999px;

  font-weight:900;
  text-decoration:none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.home-intro__scroll:hover,
.home-intro__scroll:focus-visible{
  background:
    linear-gradient(
      180deg,
      #f0d376 0%,
      #d6aa31 100%
    );

  box-shadow:0 10px 24px rgba(212,175,55,.22);

  transform:translateY(-1px);
  outline:none;
}


/* ==========================================================
   LIGHT MODE
========================================================== */

html[data-theme="light"] .home-intro{
  background:
    radial-gradient(
      circle at top,
      rgba(138,97,24,.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4ede1 100%
    );

  border-color:#c3a45a;

  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

html[data-theme="light"] .home-intro h1{
  color:#171717;
}

html[data-theme="light"]
.home-intro p:not(.home-intro__eyebrow){
  color:#374151;
}

html[data-theme="light"] .home-intro__eyebrow{
  color:#8a6118;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:620px){

  .home-intro{
    width:min(100% - 20px,1080px);
    margin:18px auto;
    padding:26px 18px;

    border-radius:16px;
  }

  .home-intro__eyebrow{
    font-size:.7rem;
    letter-spacing:.13em;
  }

  .home-intro h1{
    font-size:2.15rem;
    line-height:1.05;
  }

  .home-intro p:not(.home-intro__eyebrow){
    margin-top:13px;

    font-size:.98rem;
    line-height:1.58;
  }

  .home-intro__scroll{
    width:100%;
    margin-top:19px;
  }

}
/* ==========================================================
   HOME INTRO — PHONE REPAIR ONLY
========================================================== */

@media (max-width:620px){

  .home-intro{
    width:calc(100% - 20px);
    margin:12px auto 16px;
    padding:18px 15px 20px;

    border-radius:14px;
  }

  .home-intro > div{
    width:100%;
    max-width:none;
  }

  .home-intro__eyebrow{
    margin-bottom:7px;

    font-size:.64rem;
    line-height:1.3;
    letter-spacing:.11em;
  }

  .home-intro h1{
    margin:0;

    font-size:1.85rem;
    line-height:1.08;
    letter-spacing:-.025em;
  }

  .home-intro p:not(.home-intro__eyebrow){
    max-width:32rem;
    margin:11px auto 0;

    font-size:.92rem;
    line-height:1.5;
  }

  .home-intro__scroll{
    width:auto;
    min-height:42px;

    margin-top:15px;
    padding:9px 17px;

    font-size:.88rem;
    line-height:1.2;
  }

}
.character-statement{
  max-width: 760px;
  margin: 1.5rem auto 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.8;
  text-align: center;
  font-style: italic;
}

.character-closing{
  margin-top: 1.4rem;
  text-align: center;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: .02em;
}

/* ==========================================================
   SANDMAN-HOME-HERO-SEPARATOR
   Quiet structural break between local header/orientation
   and the Combat Is Life hero.
========================================================== */

.home-hero-separator{
  width:100%;
  height:42px;

  margin:0;

  background:#050505;

  border-top:2px solid #d4af37;
  border-bottom:2px solid #d4af37;
}

@media (max-width:720px){
  .home-hero-separator{
    height:32px;
  }
}

/* =========================================================
   LOCAL PROGRAM CARDS
========================================================= */

.local-program-cards{
  padding:1.5rem 1rem 2.5rem;
}

.local-program-grid{
  width:min(1180px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.local-program-card{
  overflow:hidden;
  border:1px solid rgba(198,153,61,.42);
  border-radius:18px;
  background:#101010;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.local-program-card__image{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.local-program-card__body{
  padding:1rem;
}

.local-program-card__body h2{
  margin:0 0 .45rem;
  font-size:1.2rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.local-program-card__body p{
  margin:.35rem 0;
  line-height:1.5;
}

.local-program-card__journeys{
  display:grid;
  gap:.55rem;
  margin-top:1rem;
}

.local-program-card__journeys a{
  display:block;
  padding:.72rem .8rem;
  border:1px solid rgba(198,153,61,.35);
  border-radius:12px;
  text-decoration:none;
}

.local-program-card__journeys strong,
.local-program-card__journeys span{
  display:block;
}

.local-program-card__journeys span{
  margin-top:.18rem;
  font-size:.82rem;
  opacity:.75;
}

@media (max-width:900px){
  .local-program-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:560px){
  .local-program-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   LOCAL PROGRAM CARDS — DAY MODE
========================================================= */

body.day-mode .local-program-card{
  background:#f7f2e8;
  border-color:rgba(136,101,35,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

body.day-mode .local-program-card__body{
  color:#1a1a1a;
}

body.day-mode .local-program-card__body h2{
  color:#111;
}

body.day-mode .local-program-card__body p{
  color:#343434;
}

body.day-mode .local-program-card__journeys a{
  background:#fffaf0;
  border-color:rgba(136,101,35,.34);
  color:#181818;
}

body.day-mode .local-program-card__journeys a:hover{
  background:#f0e5cc;
}

body.day-mode .local-program-card__journeys strong{
  color:#171717;
}

body.day-mode .local-program-card__journeys span{
  color:#5b5b5b;
  opacity:1;
}