/* site_v6.css — unified responsive styles */
:root{
  --brand-green:#065f46;
  --brand-gold:rgb(220,175,86);
  --shadow:0 2px 6px rgba(0,0,0,.25);
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Baskerville', serif;
  background:url('images/richmond-skyline.jpg') no-repeat center center / cover fixed;
  color:#fff;
}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.7);
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem, 3vw, 2rem);
  box-shadow:0 2px 5px rgba(0,0,0,.2);
  backdrop-filter:saturate(120%) blur(4px);
  -webkit-backdrop-filter:saturate(120%) blur(4px);
}

.left-title{ font-style:italic; font-weight:300; font-size:clamp(1rem, 1.2rem + .5vw, 1.4rem); line-height:1.1; }
.left-title .boone{ color:var(--brand-green); font-weight:700; }
.left-title .reunion{ color:var(--brand-green); font-weight:700; }

header nav{ display:flex; gap:clamp(.75rem, 1.2vw, 1.5rem); align-items:center; text-align:center; font-family:sans-serif; flex-wrap:wrap; }
header nav a{ color:var(--brand-green); text-decoration:none; font-size:clamp(.95rem, .85rem + .25vw, 1.05rem); padding:.2rem .1rem; border-radius:.35rem; }
header nav a:hover{ text-decoration:underline; }

.right-links{ display:flex; align-items:center; gap:.75rem; font-family:sans-serif; }
.right-links a{ color:var(--brand-green); text-decoration:none; transition:transform .2s ease, text-shadow .2s ease; }
.right-links a:hover{ transform:scale(1.15); text-shadow:0 2px 10px rgba(0,0,0,.3); }

/* Hamburger defaults = hidden */
.menu-btn{ display:none; background:transparent; border:0; padding:.25rem; width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer; }
.menu-btn i.lucide{ width:28px; height:28px; color:var(--brand-green); }
.mobile-panel{ display:none; }

/* Main content container */
.main{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:80vh; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem);
  text-align:center; position:relative;
}

.info-box{
  width:min(92vw, 800px);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:clamp(1rem, 2.5vw, 2rem);
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* Home page hero */
.reunion-header{
  text-align:center; text-shadow:0 2px 5px rgba(0,0,0,.4);
  margin-bottom:clamp(.5rem, 2vw, 1.25rem);
  position:relative; top:-12vh; /* floats toward top on large screens */
  opacity:0; animation:fadeIn 1.2s ease-out .05s forwards;
}
.reunion-header h1{ margin:0; color:var(--brand-green); -webkit-text-stroke: 2px var(--brand-gold); font-weight: 800; font-size:clamp(2rem, 3.2rem + 1.2vw, 4rem); }
.reunion-header h2{ margin:.25rem 0 0; color:#fff; font-size:clamp(1.1rem, 1.2rem + .6vw, 2rem); }

.event-date{ color:#fcfcfc; font-weight:700; font-size:clamp(1.1rem, 1rem + 1vw, 2rem); text-shadow:0 2px 4px var(--brand-green); }
.countdown{ margin-top:.5rem; font-size:clamp(1rem, .9rem + .6vw, 1.6rem); text-shadow:0 1px 3px var(--brand-green); }

.register-btn{
  display:inline-block; margin-top:1.25rem; background:var(--brand-gold); color:var(--brand-green);
  font-size:clamp(.95rem, .9rem + .3vw, 1.15rem); padding:.75rem 2rem; border:0; border-radius:999px;
  font-family:'Baskerville', serif; cursor:pointer; box-shadow:var(--shadow); text-decoration:none; transition:transform .2s ease, opacity .2s ease;
}
.register-btn:hover{ transform:scale(1.05); opacity:.95; }

/* Animations */
@keyframes fadeIn{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }

/* Small-to-medium screens: comfortable spacing and stacked mobile panel (only for true touch devices) */
@media (max-width: 1024px){
  .main{ padding: clamp(1.25rem, 4vw, 2rem) 1rem; }
  .reunion-header{ top: 0; }
  .info-box{ width:min(94vw, 680px); }
  
  /* Only collapse nav & show hamburger when the root has the is-touch class (set by JS for iOS/Android). */
  html.is-touch header nav,
  html.is-touch header .right-links{ display:none !important; }
  html.is-touch .menu-btn{ display:inline-flex !important; }
  html.is-touch .mobile-panel{ background:rgba(255,255,255,.92); border-top:1px solid rgba(0,0,0,.08); }
  html.is-touch .mobile-panel.open{ display:block; }
  html.is-touch .mobile-inner{ max-width:1100px; margin:0 auto; padding:.75rem 1rem 1rem; display:grid; gap:.5rem; }
  html.is-touch .mobile-inner nav{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; text-align:center; font-family:sans-serif; }
  html.is-touch .mobile-inner nav a{ padding:.7rem; border-radius:10px; background:rgba(255,255,255,.6); color:var(--brand-green) !important; text-decoration:none; }
  html.is-touch .mobile-inner .right-links{ display:flex; justify-content:center; gap:.5rem; margin-top:.25rem; }
  html.is-touch .mobile-inner .right-links a{ color:var(--brand-green); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; text-decoration:none; }
  html.is-touch .mobile-inner .right-links i.lucide{ width:24px; height:24px; }
}

/* Never show hamburger on true macOS/Windows laptops/desktops (class set by JS) */
html.no-hamburger .menu-btn{ display:none !important; }
html.no-hamburger header nav,
html.no-hamburger header .right-links{ display:flex !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Fallback outline for browsers that don’t support text-stroke */
@supports not (-webkit-text-stroke: 2px black) {
  .reunion-header h1 {
    text-shadow:
      1px 0   0 var(--brand-green),
     -1px 0   0 var(--brand-green),
      0   1px 0 var(--brand-green),
      0  -1px 0 var(--brand-green),
      1px 1px 0 var(--brand-green),
     -1px 1px 0 var(--brand-green),
      1px -1px 0 var(--brand-green),
     -1px -1px 0 var(--brand-green);
  }
}