/* AD786 Brand UI Layer (v9)
   Goal:
   - Keep v7 look (NO floating luxury bar)
   - Fix nav "jump/up" across pages by normalizing html/body margin + locking nav top/transform
   - Restore inner-page layout styles (Guides/Blog/About/Contact/Disclaimer)
   Load AFTER /static/index.css
*/

:root{
  --bg0:#070a09;
  --ink:rgba(255,255,255,.90);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.58);
  --gold1:#ffd27d;
  --gold2:#ffb84d;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:14px;
  --navH: 72px;
}

/* Normalize defaults so pages can't shift the fixed header */
html, html{
  height: 100%;
}

body{
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--navH) !important;
background-color: var(--bg0);
  min-height: 100%;
}


body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Full-page premium backdrop to avoid "split" backgrounds on short pages (desktop) */
  background:
    radial-gradient(1000px 460px at 15% 5%, rgba(40,120,92,.38), transparent 60%),
    radial-gradient(900px 460px at 85% 8%, rgba(160,120,40,.32), transparent 60%),
    radial-gradient(1100px 520px at 50% 55%, rgba(20,80,60,.30), transparent 70%),
    linear-gradient(180deg, rgba(8,18,14,1) 0%, rgba(8,18,14,1) 100%);
}
/* inner pages (body-content class) use richer gradient */
html.body-content, body.body-content{
  background:
    radial-gradient(circle at 16% 18%, rgba(40,120,90,.22), transparent 55%),
    radial-gradient(circle at 78% 58%, rgba(20,60,45,.18), transparent 60%),
    radial-gradient(circle at 40% 120%, rgba(255,210,125,.07), transparent 60%),
    var(--bg0);
  color: var(--ink);
  min-height: 100vh;
}

/* ===== Fixed nav (full-width, v7 look) ===== */
.top-nav{
  height: var(--navH) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;

  /* lock transform so it never "jumps" due to page styles */
  transform: none !important;
  will-change: auto !important;

  background:
    linear-gradient(180deg, rgba(8,18,14,.78) 0%, rgba(8,14,12,.58) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

  border-bottom: 1px solid rgba(255,215,140,.14) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,210,125,.08) !important;
}

.top-nav.nav--scrolled{
  background:
    linear-gradient(180deg, rgba(7,16,12,.86) 0%, rgba(7,14,12,.68) 100%) !important;
  border-bottom: 1px solid rgba(255,215,140,.18) !important;
}

/* Remove old spacer bar (it creates the black strip) */
.nav-offset{ display:none !important; height:0 !important; }

/* Create spacing below the fixed nav on all pages... */
body{ padding-top: var(--navH) !important; }

/* ...except the Home page (nav overlays hero) */
html.is-home body{ padding-top: 0 !important; }

.top-nav .nav-inner{
  width: min(1240px, calc(100% - 36px)) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.nav-brand{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  text-decoration:none !important;
  user-select:none;
  flex: 0 0 auto !important;
}

/* Ensure brand never looks active */
.nav-brand.active{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

.nav-brand img{
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  flex: 0 0 28px !important;
  object-fit: cover !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
}

.nav-brand span{
  color: rgba(255,255,255,.92) !important;
  font-weight: 780 !important;
  letter-spacing: .6px !important;
  font-size: 15px !important;
}

.nav-links{
  display:flex !important;
  align-items:center !important;
  gap: 6px !important;
}

.top-nav .nav-links a{
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  text-decoration:none !important;
  transition: all .22s ease !important;
  border: 1px solid transparent !important;
}

.top-nav .nav-links a:hover{
  color: var(--gold1) !important;
  background: rgba(255,210,125,.08) !important;
  border-color: rgba(255,210,125,.10) !important;
}

.top-nav .nav-links a.active{
  color: #0b0f0e !important;
  background: linear-gradient(135deg, var(--gold1), var(--gold2)) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow:
    0 10px 26px rgba(255,184,77,.14),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ===== Content typography & layout (restored) ===== */
.page-container{
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

/* Home page content should remain as-is; don't add extra top padding */
html.is-home .page-container{ padding-top: 0; }

.hero{ padding: 22px 0 10px; }

.hero h1{
  margin: 10px 0 10px;
  font-size: 42px;
  letter-spacing: -0.4px;
  font-weight: 800;
}

.hero p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  max-width: 72ch;
  font-size: 15px;
}

.content-card{
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 34px;
}

.content-card h2{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.2px;
}

.content-card h3{
  margin: 22px 0 10px;
  font-size: 16px;
  font-weight: 740;
  color: rgba(255,255,255,.88);
}

.content-card p, .content-card li{
  color: var(--muted);
  line-height: 1.75;
  font-size: 14.5px;
}

.kbd-link, a.kbd-link{ color: var(--gold1); text-decoration:none; }
.kbd-link:hover{ text-decoration: underline; }

.hr{ height: 1px; background: rgba(255,255,255,.10); margin: 26px 0; }

.toc{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 10px;
}

.toc a{
  display:block;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.84);
  text-decoration:none;
}
.toc a:hover{
  border-color: rgba(255,210,125,.18);
  background: rgba(255,210,125,.06);
  color: var(--gold1);
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.card-mini{
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.09);
}

.card-mini .title{
  font-weight: 760;
  color: rgba(255,255,255,.90);
  margin-bottom: 6px;
}

.footer{  background: transparent;

  width: min(1080px, calc(100% - 48px));
  margin: 40px auto 36px;
  color: var(--muted2);
  font-size: 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer a{ color: rgba(255,255,255,.70); text-decoration:none; margin-right: 10px; }
.footer a:hover{ color: var(--gold1); }

/* FAQ */
.faq-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
  padding: 14px 14px;
  margin: 10px 0;
}
.faq-item summary{
  cursor:pointer;
  font-weight: 760;
  color: rgba(255,255,255,.90);
}
.faq-item p{ margin: 10px 0 0; }

/* ===== Mobile ===== */
@media (max-width: 840px){
  :root{ --navH: 64px; }
  .top-nav{ height: var(--navH) !important; }
  body{ padding-top: var(--navH) !important; }
  html.is-home body{ padding-top: 0 !important; }

  .nav-brand span{ display:none !important; }
  .nav-brand{ min-width: 44px !important; }
  .nav-brand img{ width: 28px !important; height: 28px !important; flex: 0 0 28px !important; }

  .nav-links{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 92px);
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .top-nav .nav-links a{ padding: 8px 10px !important; font-size: 13px !important; }

  .page-container{ width: calc(100% - 28px); padding-top: 44px; }
  html.is-home .page-container{ padding-top: 0; }

  .hero h1{ font-size: 30px; }
  .toc{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .content-card{ padding: 20px; border-radius: var(--radius2); }
}
/* v10 nav stability hardening (NO visual change):
   - Ensure fixed header is anchored to viewport, not affected by transforms
   - Prevent any accidental top offset or translate on nav
*/
.top-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

.top-nav.nav--scrolled{
  top: 0 !important;
  transform: none !important;
}

/* Ensure html/body don't introduce top gaps that can look like nav moved */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}
/* v12 CSS add-on:
   - Remove any "home = no padding" special case so all pages align the same
   Put this AT THE VERY END of your current /static/site.css
*/
html.is-home body{ padding-top: var(--navH) !important; }
html.is-home .page-container{ padding-top: 56px !important; }


/* ===== v14 stability overrides (no visual change intended) ===== */
:root{ --navH:72px; }

/* Apply brand background globally to avoid black seam */
html, body{
  margin: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(40,120,90,.22), transparent 55%),
    radial-gradient(circle at 78% 58%, rgba(20,60,45,.18), transparent 60%),
    radial-gradient(circle at 40% 120%, rgba(255,210,125,.07), transparent 60%),
    var(--bg0);
  color: var(--ink);
}

/* Only content pages reserve space for fixed nav */
body{ padding-top: 0 !important; }
body.body-content{ padding-top: var(--navH) !important; }
body.is-home{ padding-top: 0 !important; }

/* Make sure nav is always fixed in viewport, not affected by ancestor transforms */
#site-top-nav.top-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

/* Avoid extra top gaps from page-specific wrappers */
main, .page, .content, .container{
  scroll-margin-top: calc(var(--navH) + 12px);
}


/* ===== AD786 Unified Nav + Background overrides (v10.1) ===== */

/* Ensure gradient background always present on all pages */
html, body { min-height: 100%; }
body {
  background: radial-gradient(1200px 800px at 15% 0%, rgba(0, 255, 165, 0.12), transparent 55%),
              radial-gradient(900px 700px at 85% 30%, rgba(255, 205, 120, 0.10), transparent 55%),
              linear-gradient(180deg, #060a09 0%, #050707 50%, #040505 100%);
  background-attachment: fixed;
}

/* Body class used across the project */
body.body-content{
  padding-top: 72px; /* match fixed nav height */
}
@media (max-width: 768px){
  body.body-content{ padding-top: 64px; }
}

/* Top nav: fixed, centered, consistent across pages */
.top-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 9999;
  display: flex;
  align-items: center;
  background: rgba(6, 10, 9, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 205, 120, 0.18);
}
@media (max-width: 768px){
  .top-nav{ height: 64px; }
}

.top-nav .nav-inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.top-nav .nav-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.top-nav .nav-logo-h{
  height: 42px; /* ~1.5x */
  width: auto;
  display: block;
}
@media (max-width: 768px){
  .top-nav .nav-logo-h{ height: 34px; }
}

.top-nav .nav-links{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.top-nav .nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.top-nav .nav-link:hover{
  color: #fff;
  background: rgba(255, 205, 120, 0.12);
}
.top-nav .nav-link.is-active{
  background: linear-gradient(180deg, #f3c37a 0%, #d9a85a 100%);
  color: #19130a;
  font-weight: 700;
}

/* Keep nav vertically centered even if some pages set global line-height */
.top-nav, .top-nav *{
  box-sizing: border-box;
}
.top-nav .nav-links, .top-nav .nav-link{
  line-height: 1;
}

/* Avoid "strip" / seam between nav and content on some pages */
body.body-content main.page-container,
body.body-content .page-container{
  margin-top: 0 !important;
}

/* Home: hide duplicate hero logo row beneath nav (desktop+mobile) */
body.is-home .ad786-hero-bg .Zflex_box{ display: none !important; }

/* ===== End overrides ===== */



/* ===== NAV PATCH v22 (scroll + horizontal logo + no gap on home) ===== */
.top-nav .nav-inner{ gap: 14px !important; min-width: 0 !important; }
.top-nav .nav-links{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.top-nav .nav-links::-webkit-scrollbar{ display:none !important; }
@media (max-width: 900px){
  .top-nav .nav-links{ justify-content: flex-start !important; }
}
.brand-picture{ display:block; line-height:0; }
.brand-logo{
  width:auto !important; height:auto !important;
  max-height: 42px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  display:block !important;
}
@media (max-width: 640px){
  .brand-logo{ max-height: 34px !important; max-width: min(200px, 52vw) !important; }
}
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip: rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
/* Default keep body padding-top for fixed nav, but remove on home to avoid "transition strip" */
body.body-content{ padding-top: var(--navH) !important; }
body.body-content.is-home{ padding-top: 0 !important; }
/* Ensure any old .nav-offset class never hides the whole page */
body.nav-offset{ display: block !important; }

/* ===================== NAV LOGO PATCH v23 =====================
   Fix: navbar brand logo should use /assets/brand/logo-horizontal.(webp|png)
   and must not appear tiny/cropped. Also fix mistaken selector ".brand-picture .brand-picture".
   ============================================================== */
.top-nav .nav-brand{ gap: 10px !important; flex: 0 0 auto !important; min-width: 0 !important; }
.top-nav .brand-picture{ display:block !important; line-height:0 !important; }
.top-nav .nav-brand .brand-logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-height: 46px !important;   /* slightly larger desktop */
  max-width: 260px !important;
  object-fit: contain !important;
}
@media (max-width: 640px){
  .top-nav .nav-brand .brand-logo{
    max-height: 34px !important;
    max-width: min(220px, 56vw) !important;
  }
}
/* ===== AD786 v6: Editorial subtle link (Back / View more) =====
   Add this block to the END of /static/site.css (recommended),
   so all pages share the same style.
*/
.subtle-link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-weight:400;
  font-size:14px;
  letter-spacing:.2px;

  color:rgba(216,179,106,.85); /* subtle gold accent */
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;

  opacity:.9;
}
.subtle-link:hover{
  opacity:1;
  color:rgba(216,179,106,1);
}

/* ==============================
   Contact page: typography + cards restore (scoped)
   - Fixes: title sizing, intro text spacing, cards layout, buttons, and hides debug/meta line.
   ============================== */

.page-container.contact-shell{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 20px 64px;
}

/* prevent any pseudo-element used for glow from affecting layout / scroll */
.page-container.contact-shell::after{
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw;
}

.page-container.contact-shell .contact-hero{
  margin: 24px auto 18px;
  padding: 0 4px;
}

.page-container.contact-shell .contact-title{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.92);
}

.page-container.contact-shell .contact-subtitle{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 66ch;
}

/* Panel shell */
.page-container.contact-shell .contact-panel{
  position: relative;
  background: linear-gradient(180deg, rgba(20,26,24,0.80) 0%, rgba(14,18,16,0.62) 100%);
  border: 1px solid rgba(255,215,140,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  overflow: hidden;
}

.page-container.contact-shell .contact-panel__head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-container.contact-shell .contact-panel__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,215,140,0.70);
  box-shadow: 0 0 0 3px rgba(255,215,140,0.15);
}

.page-container.contact-shell .contact-panel__title{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.86);
  margin: 0;
}

/* hide debug/meta line that sometimes appears */
.page-container.contact-shell .contact-panel__meta{
  display: none !important;
}

.page-container.contact-shell .contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.page-container.contact-shell .channel-card{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}

.page-container.contact-shell .channel-card__media{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.page-container.contact-shell .channel-card__media img,
.page-container.contact-shell .channel-card__media picture,
.page-container.contact-shell .channel-card__media source{
  display: block;
}

.page-container.contact-shell .channel-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.page-container.contact-shell .channel-card__body{
  padding: 14px 14px 14px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.page-container.contact-shell .channel-name{
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
  color: rgba(255,255,255,0.90);
}

.page-container.contact-shell .channel-desc{
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.65);
}

.page-container.contact-shell .channel-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,215,140,0.92);
  background: rgba(255,215,140,0.08);
  border: 1px solid rgba(255,215,140,0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
}

.page-container.contact-shell .channel-btn:hover{
  background: rgba(255,215,140,0.12);
  border-color: rgba(255,215,140,0.26);
}

.page-container.contact-shell .channel-btn:focus-visible{
  outline: 2px solid rgba(255,215,140,0.5);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 960px){
  .page-container.contact-shell .contact-grid{ grid-template-columns: 1fr; }
  .page-container.contact-shell .channel-card{ grid-template-columns: 1fr; }
  .page-container.contact-shell .channel-card__body{ padding: 14px; }
  .page-container.contact-shell .channel-card__media{ aspect-ratio: 16 / 9; }
}

@media (max-width: 720px){
  .page-container.contact-shell{ padding: 84px 14px 54px; }
  .page-container.contact-shell .contact-title{ font-size: 28px; }
  .page-container.contact-shell .contact-subtitle{ font-size: 13px; }
}
/* =========================================================
   AD786 - FIX: Hide duplicate HOME hero branding on PC only
   Goal: remove the extra small logo + "AD786" inside the HOME first screen,
         while keeping the navbar logo intact.
   ========================================================= */

@media (min-width: 1024px) {
  /* 1) Common home "hero" wrappers */
  body.home .hero-brand,
  body.home .hero-branding,
  body.home .hero .hero-brand,
  body.home .hero .hero-branding,
  body.home .hero .brand,
  body.home .hero .branding,
  body.home .hero .logo,
  body.home .hero .site-logo,
  body.home .hero .site-brand,
  body.home .hero .site-branding,
  body.home .hero .brandmark,
  body.home .hero .wordmark,

  /* 2) If your home uses a main container instead of .hero */
  body.home main .hero-brand,
  body.home main .hero-branding,
  body.home main .brand,
  body.home main .branding,
  body.home main .site-brand,
  body.home main .site-branding,
  body.home main .brandmark,
  body.home main .wordmark,

  /* 3) Robust fallback limited to main area */
  body.home main [class*="hero"] [class*="brand"],
  body.home main [class*="hero"] [class*="logo"],
  body.home main [class*="first"] [class*="brand"],
  body.home main [class*="first"] [class*="logo"],
  body.home main [class*="above"] [class*="brand"],
  body.home main [class*="above"] [class*="logo"],
  body.home main [class*="mast"] [class*="brand"],
  body.home main [class*="mast"] [class*="logo"] {
    display: none !important;
  }

  /* 4) Extra safety: duplicate <img alt="AD786..."> inside main */
  body.home main img[alt*="AD786"] {
    display: none !important;
  }

  /* Keep navbar logo visible */
  header.top-nav img,
  header.top-nav .nav-brand,
  header.top-nav .brand,
  header.top-nav .logo,
  header.top-nav .site-logo,
  header.top-nav .site-brand,
  header.top-nav .site-branding {
    display: initial !important;
  }
}

/* Paste this block at the VERY END of site.css so it wins the cascade.
   If your <body> does not have class "home", replace "body.home" with "body"
   OR add class="home" on the Home page <body>. */
/* === PATCH: Hide duplicate hero branding (PC+mobile safe) === */
/* Home (hero) has a duplicated small brand (image + AD786 title) that overlaps with the top nav.
   On this build, those elements are identified by:
   - img.TbOneImg1 (alt="AD786", src includes 'kanzplay-logo')
   - h1.TbOneFont1 (text 'AD786')
   We hide them globally, but explicitly *do not* affect anything inside the <header>. */
img.TbOneImg1[alt="AD786"],
img.TbOneImg1[src*="kanzplay-logo"],
h1.TbOneFont1 {
  display: none !important;
}
header img.TbOneImg1[alt="AD786"],
header img.TbOneImg1[src*="kanzplay-logo"],
header h1.TbOneFont1 {
  display: initial !important;
}


/* Home page legacy spacer (inline style height:64px) — neutralize to avoid double offset when body padding-top is enabled */
body > div[style="height:64px;"]{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   GLOBAL NAV OFFSET FIX (FINAL - SAFE VERSION)
   Purpose:
   - Prevent fixed nav (72px) from overlapping page content
   - Apply ONLY to non-home pages
   - Do NOT affect home hero layout
   ========================================================= */

/* ---- Safety reset: never offset body globally ---- */
body {
  padding-top: 0 !important;
}

/* ---- Default: no offset ---- */
main,
.site-main,
.page-container {
  padding-top: 0;
}

/* ---- Apply nav offset ONLY on non-home pages ---- */
body:not(.page-home) main,
body:not(.page-home) .site-main,
body:not(.page-home) .page-container {
  padding-top: 72px; /* nav height */
}

/* ---- Prevent margin collapse causing hidden content ---- */
body:not(.page-home) main > :first-child,
body:not(.page-home) .site-main > :first-child,
body:not(.page-home) .page-container > :first-child {
  margin-top: 0;
}

/* ---- Extra safety: headings should never slide under nav ---- */
body:not(.page-home) h1,
body:not(.page-home) h2 {
  scroll-margin-top: 88px;
}

/* =========================================================
   AD786 FINAL NAV OFFSET OVERRIDES (vFinal-2026-01-07)
   Goal:
   - FIX: content hidden under fixed navbar on ALL pages (PC + mobile)
   - Avoid "double offsets" caused by earlier experimental patches
   - Keep visuals unchanged as much as possible
   ========================================================= */

/* Single source of truth for nav height */
:root{ --navH: 72px; }
@media (max-width: 840px){
  :root{ --navH: 64px; }
}

/* Hard reset: page must start below nav */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* Reserve space for fixed nav on ALL pages (including Home) */
body{
  padding-top: var(--navH) !important;
}

/* Ensure the fixed nav is truly fixed and uses the same height var */
header.top-nav,
#site-top-nav.top-nav,
.top-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--navH) !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
}

/* Neutralize legacy spacer bars / offset helpers that cause double padding */
.nav-offset,
.nav-spacer,
#nav-offset,
#nav-spacer{
  display: none !important;
  height: 0 !important;
}

/* Home page legacy spacer (inline div height:64px/72px) — neutralize */
body > div[style*="height:64px"],
body > div[style*="height:72px"]{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* If any wrapper tries to use "top:0" positioning, undo it */
main, .site-main, .page-container{
  top: auto !important;
}

/* Improve anchor/scroll positioning under fixed nav */
:where(h1,h2,h3,h4,h5,h6,[id]){
  scroll-margin-top: calc(var(--navH) + 12px);
}

/* =============================================================
   About page hero image
   - New hero image: 1600×600
   - Show full image (no crop) and remove overlay filter
   ============================================================= */

/* Force the correct hero ratio and prevent cropping */
.about-hero{
  aspect-ratio: 1600 / 600 !important;

  overflow: hidden !important;
}

/* Show the whole image; keep it centered */
.about-hero__img{
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;

  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Remove the extra dark/blur overlay sitting on top of the hero */
.about-hero::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}