/* ==========================================================================
   Havoc Response Training Group — Full CSS
   (snap panes, sticky nav, full-width mobile drawer, mobile footer master-detail)
   ========================================================================== */

/* ========== Base / Resets ========== */
:root{
  --hrt-red: #aa322a;
  --hrt-black: #1a1a1a;
  --hrt-white: #ffffff;
  --castle-green: #596f4a;
  --hrt-blue: #0069ff;
  --nav-h: 64px; /* updated by JS if needed */
}

html{
  height: 100%;
  scroll-behavior: smooth;
  overflow-y: auto;
  scroll-snap-type: y mandatory;       /* keep snap panes */
  scroll-padding-top: var(--nav-h);    /* offset for sticky nav */
  overscroll-behavior-y: contain;
}

body{
  min-height: 100dvh;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: var(--hrt-white);
  color: var(--hrt-black);
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* A11y utility */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0;
}

/* ========== Nav / Drawer ========== */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--hrt-black);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem clamp(1rem, 5vw, 10%);
  min-height: var(--nav-h);
}

.logoGroup{
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--hrt-white);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  min-width: 0;
  flex: 1 1 auto;
  background: var(--hrt-black);
}
.logoGroup .logo{ display:block; height: 50px; width: auto; }

#Havoc{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 70vw;
  clip-path: inset(0 100% 0 0); /* start hidden for wipe */
  will-change: clip-path;
  font-weight: 700;
  padding-left: .5rem;
  color: var(--hrt-white);
}
.havoc--reveal{ animation: havoc-wipe-in 420ms ease forwards; }
.havoc--hide{   animation: havoc-wipe-out 420ms ease forwards; }
@keyframes havoc-wipe-in{ from{ clip-path: inset(0 100% 0 0);} to{ clip-path: inset(0 0% 0 0);} }
@keyframes havoc-wipe-out{from{ clip-path: inset(0 0% 0 0);}   to{ clip-path: inset(0 100% 0 0);} }
@media (prefers-reduced-motion: reduce){
  #Havoc{ clip-path: inset(0 0 0 0); }
  .havoc--reveal, .havoc--hide{ animation: none; }
}

/* Desktop nav links */
.desktop-only{ display: flex; gap: 1.25rem; align-items: center; }
nav a{
  color: var(--hrt-white);
  text-decoration: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hrt-black);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Hamburger toggle (shown under 980px) */
.menu-toggle{
  display:none;
  background: none;
  border: none;
  color: #fff;
  padding: .5rem;
  margin: 0;
  line-height: 0;
  border-radius: 8px;
  position: relative;
  z-index: 1000; /* above drawer */
}
.menu-toggle:focus-visible{ outline: 3px solid #84c5ff; outline-offset: 2px; }
.menu-bars{ width:24px; height:2px; background:#fff; display:block; position:relative; }
.menu-bars::before, .menu-bars::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:#fff; }
.menu-bars::before{ top:-7px; } .menu-bars::after{ top:7px; }

@media (max-width: 980px){
  .desktop-only{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* Off-canvas drawer (full-width) + scrim */
.mobile-drawer{
  position: fixed;
  inset: 0;                         /* full screen */
  width: 100vw;
  transform: translateX(100%);
  background: #111;
  color: #fff;
  box-shadow: -12px 0 32px rgba(0,0,0,.35);
  transition: transform 220ms ease;
  z-index: 998;                     /* below sticky nav toggle */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
}
.mobile-drawer.is-open{ transform: translateX(0%); }

.drawer-close{
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 3rem;                      /* keeps away from hamburger area */
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer; border-radius: 10px;
}
.drawer-close:focus-visible{ outline: 3px solid #84c5ff; outline-offset: 2px; }
.drawer-close::before, .drawer-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:24px; height:2px; background:#fff; transform-origin:center;
}
.drawer-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.drawer-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

.mobile-nav{ display:flex; flex-direction:column; gap:.5rem; margin-top:3rem; }
.mobile-nav a{
  display:block; padding:.875rem 0; color:#fff; text-decoration:none; font-weight:700;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-nav a:focus-visible{ outline: 3px solid #84c5ff; outline-offset: 3px; }

.scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity 180ms ease;
  z-index: 997;
}
.scrim.is-open{ opacity: 1; }
body.nav-open{ overflow: hidden; }

/* ========== Panes / Header / Sections / CTA ========== */
.pane{
  block-size: calc(100dvh - var(--nav-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

header{
  background: var(--hrt-black);
  color: var(--hrt-white);
  padding: 2rem 20%;
  margin: auto;
  display: flex; flex-wrap: wrap;
  justify-content: space-evenly; align-items: center; gap: 4rem;
}
.red-strong{ color: var(--hrt-red); font-weight: bold; }
.hero-text{ flex: 1; min-width: 250px; }
header h1{ font-size: clamp(1.5rem, 4.5vw, 2.5rem); margin: 0; text-align: left; }
header p{
  font-size: clamp(1rem, 2.8vw, 1.125rem);
  margin-top: .5rem; max-width: 42rem; text-align: left; line-height: 1.6;
}

/* Sections */
section{
  display:flex; justify-content: space-evenly; align-items:center;
  padding: 20px; background-color:#f0f0f0;
}
#sectionTraining { 
  background-color: var(--hrt-red); 
  color:#fff;
}
#sectionLabs     
    { background-image: url(/images/Backgrounds/DevGroupBG-light.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
   }
   .lightLeft {
    background-color: #ffffffd7;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
#sectionDigital { background-color: var(--hrt-black); color:#fff; }
#sectionCastle {
  display: none;
  background-image: url(/images/Backgrounds/CastleWall.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 900px){
  #sectionCastle {
    background-color: var(--castle-green);
    background-image: none;
  }
  #sectionDev {
    background-color: var(--hrt-white);
    background-image: none;
  }
  
  
}

.sectionLeft{
  display:flex; flex-direction:column; align-items:flex-start; width:28vw;
}
.sectionRight{
  display:flex; flex-direction:column; text-align:center; gap:1rem; width:26vw;
}

.sectionTitle{ font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight:700; margin:0 0 10px; }
.sectionP{ font-size: clamp(1rem, 3.6vw, 1.125rem); margin-bottom:10px; line-height:1.6; }

.sectionImage{
  width: 100%; height: auto; max-width: 560px; aspect-ratio: 4 / 3; object-fit: cover;
  background-color: var(--hrt-white); min-height: 180px;
  border: 1px solid var(--hrt-black); border-radius: 8px; margin-inline: auto;
}

@media screen and (max-width: 900px) {
  .sectionImage {
    display: none;
  }
}

.sectionLink{
  display:inline-block; padding:10px 20px; background:var(--hrt-white); color:var(--hrt-black);
  font-weight:600; text-decoration:none; border-radius:6px; border:1px solid var(--hrt-black);
}
.sectionLink:hover{
  background: var(--hrt-white); color: var(--hrt-black);
  text-decoration: underline; text-decoration-color: var(--hrt-red); text-underline-offset: 4px;
}

/* CTA blocks */
.cta{
  flex:1; display:flex; flex-direction:column; gap:1rem; min-width:200px; justify-content:flex-start;
}
.ctaLast{
  flex:1; display:flex; flex-direction:row; min-width:200px; justify-content:space-evenly; align-items:center;
  text-align:center; padding:2rem; border-radius:8px; border:1px solid var(--hrt-black); margin-top:2rem;
  font-weight:600; color:var(--hrt-black);
}
.ctaLast a{
  color:var(--hrt-black); text-decoration:none; font-weight:600;
  text-decoration: underline; text-decoration-color: var(--hrt-red); text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.cta a{
  display:flex; flex-direction:column; justify-content:center;
  padding:.75rem 1.5rem; background:var(--hrt-white); color:var(--hrt-black);
  text-decoration: underline; text-decoration-color: var(--hrt-white); text-underline-offset: 6px;
  font-weight:600; border-radius:6px; border:2px solid var(--hrt-white); min-height:44px; vertical-align:middle;
  text-align: center;
}
.cta a:hover{
  background:var(--hrt-white); color:var(--hrt-black); border-color:var(--hrt-white);
  text-decoration: underline; text-decoration-color: var(--hrt-red); text-underline-offset: 6px; text-decoration-thickness: 2px;
  transition: all .3s ease-in;
}
.cta a:focus-visible{ outline: 3px solid #84c5ff; outline-offset: 2px; }

/* ========== Footer (Desktop Grid + Mobile Master-Detail) ========== */
.site-footer{
  background:#1a1a1a; color:#fff;
  display:grid; align-content:center; gap:2rem; padding:2rem 10%;
}
.site-footer.pane{ block-size: calc(100dvh - var(--nav-h)); overflow: auto; }

/* Desktop / tablet grid (default visible) */
.footer-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 3rem;
}
.footer-col{ background-color: var(--hrt-black); display:flex; flex-direction:column; }
.footer-col h3{
  margin:1rem 0 0 0; font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:.4rem 0; }
.footer-col a{ color:#fff; text-decoration:none; }
.footer-col a:hover{ text-decoration: underline; text-underline-offset:4px; text-decoration-color: var(--hrt-red); }
.contact-col{ grid-column: span 1; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:1rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
}
.footer-bottom .legal-links{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
.footer-bottom .legal-links a{ color:#fff; text-decoration:none; }
.footer-bottom .legal-links a:hover{
  text-decoration: underline; text-underline-offset:4px; text-decoration-color: var(--hrt-red);
}

/* Mobile footer master-detail (hidden by default) */
.footer-mobile{ display:none; }

/* ========== Responsive Tweaks ========== */
@media (max-width: 900px){
  section{
    display:grid; grid-template-columns: 1fr; gap:0rem; padding:1.25rem;
  }
  .sectionLeft, .sectionRight{ width:auto; }
}
@media (min-width: 900px){
  section{
    display: flex;
    flex-direction: row;
  }
}

/* Header tightening */
@media (max-width: 768px){
  header{ padding: 1.25rem 1rem; gap: 1rem; }
  #Havoc{ display:none; }
  .pane{ padding-bottom: 1rem; }
}

/* Footer grid responsiveness (still desktop/tablet view) */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Calendly */
.calendly-desktop{ display:block; }
.calendly-mobile{ display:none; text-align:center; margin: 1rem 0; }
@media (max-width: 980px){
  .calendly-desktop{ display:none; }
  .calendly-mobile{ display:block; }
}

/* Small devices: enable mobile footer */
@media (max-width: 640px){
  /* Swap to mobile footer master-detail */
  .footer-grid{ display:none !important; }
  .footer-mobile{
    display:grid;
    grid-template-columns: 1fr 1fr;  /* left main cats, right sublist */
    gap: .75rem;
  }

  .footer-mainlist{ display:flex; flex-direction:column; gap:.5rem; }
  .footer-mainlist button{
    appearance:none; border:1px solid rgba(255,255,255,0.25); background:transparent; color:#fff;
    padding:.75rem .9rem; border-radius:8px; text-align:left; font-weight:700; line-height:1.2; cursor:pointer;
  }
  .footer-mainlist button[aria-selected="true"]{
    border-color:#fff; outline:2px solid rgba(255,255,255,0.35); outline-offset:2px;
  }
  .footer-mainlist button:focus-visible{ outline:3px solid #84c5ff; outline-offset:2px; }

  .footer-subpanel{
    border:1px solid #fff; border-radius:10px; padding:.75rem .9rem;
    min-height:220px; overflow:hidden; display:flex; align-items:flex-start;
  }
  .footer-subpanel ul{ list-style:none; padding-left:0; margin:0; display:grid; gap:.5rem; }
  .footer-subpanel li{ list-style:none; }
  .footer-subpanel a{
    color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.25); padding-bottom:2px;
  }
  .footer-subpanel a:hover{
    text-decoration: underline; text-underline-offset:4px; text-decoration-color: var(--hrt-red);
  }

  /* L→R wipe for subpanel content */
  .wipe-in{ animation: footer-wipe-in 300ms ease forwards; will-change: clip-path; clip-path: inset(0 100% 0 0); }
  @keyframes footer-wipe-in{ from{ clip-path: inset(0 100% 0 0);} to{ clip-path: inset(0 0% 0 0);} }

  @media (prefers-reduced-motion: reduce){
    .wipe-in{ animation: none !important; clip-path: inset(0 0 0 0) !important; }
  }
}

/* Very small phones */
@media (max-width: 480px){
  :root{ --nav-h: 56px; }
}

/* Tiny phones: trim brand */
@media (max-width: 420px){
  #Havoc{ max-width: 58vw; }
}

/* ==== Mobile footer: bottom anchored; box hidden until content; fade ==== */
@media (max-width: 640px){
  /* Make footer a flex column so the bottom bar can pin itself naturally */
  .site-footer{
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--nav-h)); /* fill the viewport under sticky nav when possible */
  }

  /* Master-detail block sits above bottom bar and sizes to content */
  .footer-mobile{
    /* no fixed heights; allow natural growth */
  }

  /* Pin the bottom bar without reserving space when not needed */
  .footer-bottom{
    margin-top: 200px;  /* pushes it to the bottom only if space remains */
  }

  /* Subpanel: no border until it has content */
  .footer-subpanel{
    border: 0;                 /* hidden by default */
    border-radius: 10px;
    padding: 0;                /* no padding when empty */
    position: relative;
    overflow: hidden;
  }
  .footer-subpanel:not(:empty){
    border: 1px solid #fff;    /* show 1px box once there is content */
    padding: 0.75rem 0.9rem;   /* restore padding with content */
  }

  /* Remove bullets and layout links in a tidy grid */
  .footer-subpanel ul{ list-style:none; padding-left:0; margin:0; display:grid; gap:.5rem; }
  .footer-subpanel li{ list-style:none; }
  .footer-subpanel a{
    color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.25); padding-bottom:2px;
  }
  .footer-subpanel a:hover{
    text-decoration: underline; text-underline-offset:4px; text-decoration-color: var(--hrt-red);
  }

  /* Fade helpers for content swaps */
  .fade-wrap{
    opacity: 1;
    transition: opacity 160ms ease;
  }
  .fade-wrap.fade-out{ opacity: 0; }
  .fade-wrap.fade-in{
    opacity: 0;
    animation: footer-fade-in 160ms ease forwards;
  }
  @keyframes footer-fade-in{ to { opacity: 1; } }

  /* (Optional) If you previously had the wipe-in, disable it for pure fade: */
  .wipe-in{ animation: none !important; clip-path: none !important; }
}

/* ===== HRT Modals ===== */
.hrt-modal[hidden] { display: none; }

.hrt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above nav & Calendly badge */
}

.hrt-modal.is-open { display: block; }

.hrt-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.hrt-modal__dialog {
  position: relative;
  max-width: min(920px, 92vw);
  margin: min(6vh, 3rem) auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px 20px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow: hidden;
}

@media (min-width: 720px) {
  .hrt-modal__dialog { padding: 28px 28px 32px; }
}

.hrt-modal__title {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
}

.hrt-modal__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin: 0 0 12px;
}

.hrt-modal__media video,
.hrt-modal__media iframe.hrt-embed {
  width: 100%;
  height: 100%;
  display: block;
}

.hrt-modal__text {
  margin: 8px 0 0;
  line-height: 1.5;
}

.hrt-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.06);
  cursor: pointer;
}

.hrt-modal__close:hover { background: rgba(0,0,0,.12); }

body.hrt-modal-open {
  overflow: hidden; /* prevent background scroll */
  touch-action: none;
}

/* (Optional) extra Safari love */
.site-nav{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.learnMoreBtn {
    border: 1px solid var(--hrt-black);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    text-decoration: none;
    color: var(--hrt-black);
    font-weight: 600;
    box-shadow: 2px 2px 4px 1px #adadad;
}

/* Works with your existing .sectionLink button */
.sectionLink.comingSoon{
  position: relative;
  overflow: hidden;
  isolation: isolate;              /* keep overlay above text only */
}

/* Hide the original label when the wipe is active */
.sectionLink.comingSoon:hover,
.sectionLink.comingSoon:focus-visible{
  color: transparent;              /* prevents text showing under overlay */
  text-decoration: none;           /* optional: avoid underline peeking */
}

/* The wipe overlay */
.sectionLink.comingSoon::after{
  content: "COMING SOON";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--hrt-red);
  color: var(--hrt-white);
  font-weight: 700;
  transform: translateX(100%);     /* start fully off to the right */
  transition: transform .35s ease; /* wipe duration/timing */
  z-index: 1;                      /* above original label */
}

/* Trigger the wipe on hover/focus */
.sectionLink.comingSoon:hover::after,
.sectionLink.comingSoon:focus-visible::after{
  transform: translateX(0);
}

/* Optional: show it's unavailable */
.sectionLink.comingSoon[aria-disabled="true"]{
  cursor: not-allowed;
}

/* Reduced motion: fall back to instant swap */
@media (prefers-reduced-motion: reduce){
  .sectionLink.comingSoon::after{ transition: none; }
}

.hide, #corpBtn {
  display: none;
}