/* =========================================================
   CLIPHORIUM — CANONICAL NAV + FOOTER (CORE, MOBILE FRIENDLY)
   - One system for every page
   - Rails ONLY on header bottom + footer top
   - NO lasers under links
   - NO black/pill background behind links
   - Footer 3-column desktop → stacked mobile
   ========================================================= */

:root{
  --chBarWidth: min(1320px, calc(100% - 32px)); /* mobile-safe */
  --glassTop: rgba(255,255,255,0.030);
  --glassMid: rgba(255,255,255,0.016);
  --glassBase: rgba(11,11,14,0.52);
  --line: rgba(255,255,255,0.12);
  --gold: #D4AF37;
  --goldHi: #F6E08A;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --dim: rgba(255,255,255,0.50);
}

/* =========================
   LAYOUT: footer to bottom
   ========================= */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* If a page uses <main>, this works perfectly */
main, .ch-main, .page-main{
  flex: 1 1 auto;
}

/* =========================
   BAR SHELLS (MATCHED)
   ========================= */
header.ch-navbar,
footer.ch-footerbar{
  width: var(--chBarWidth);
  margin-left:auto;
  margin-right:auto;

  background:
    radial-gradient(1200px 220px at 50% -60px, var(--glassTop), transparent 65%),
    linear-gradient(180deg, var(--glassMid), var(--glassBase));

  border: 1px solid var(--line);
  border-radius: 18px;

  backdrop-filter: blur(9px) saturate(135%);
  -webkit-backdrop-filter: blur(9px) saturate(135%);

  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

header.ch-navbar{
  margin: 12px auto 10px auto;
  z-index: 9999;
}
footer.ch-footerbar{
  margin: 10px auto 22px auto;
  margin-top: auto; /* push footer down */
}

/* Rails ONLY on bar edges */
header.ch-navbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(212,175,55,0),
    rgba(246,224,138,0.95),
    rgba(212,175,55,0)
  );
  opacity:.92;
}

footer.ch-footerbar::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:2px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(212,175,55,0),
    rgba(246,224,138,0.95),
    rgba(212,175,55,0)
  );
  opacity:.92;
}

/* =========================
   INNER STRUCTURE
   ========================= */
.ch-navbar-inner{
  width:100%;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  background: transparent;
  border:0;
  box-shadow:none;
}

.ch-footerbar-inner{
  width:100%;
  padding: 12px 14px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 14px;
  background: transparent;
  border:0;
  box-shadow:none;
}

.ch-brand,
.ch-footer-left a{
  display:flex;
  align-items:center;
  padding:0;
  background: transparent;
  border:0;
  box-shadow:none;
}

/* Desktop logo size */
header.ch-navbar img,
footer.ch-footerbar img{
  height:124px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* =========================
   LINK GROUPS
   ========================= */
.ch-navlinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  background: transparent;
}

.ch-footlinks{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  background: transparent;
}

/* =========================
   ABSOLUTE LASER/PILL KILL
   ========================= */
header.ch-navbar a,
footer.ch-footerbar a,
header.ch-navbar nav a,
footer.ch-footerbar nav a{
  background: transparent !important;
  background-image:none !important;
  background-color: transparent !important;

  text-decoration: none !important;
  text-decoration-line: none !important;

  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 8px 10px;
  border-radius: 12px;

  color: rgba(255,255,255,0.82);
}

header.ch-navbar a::before,
header.ch-navbar a::after,
footer.ch-footerbar a::before,
footer.ch-footerbar a::after,
header.ch-navbar nav a::before,
header.ch-navbar nav a::after,
footer.ch-footerbar nav a::before,
footer.ch-footerbar nav a::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

header.ch-navbar a .laser,
footer.ch-footerbar a .laser,
header.ch-navbar a [class*="laser"],
footer.ch-footerbar a [class*="laser"]{
  display:none !important;
}

/* Hover = premium outline only */
header.ch-navbar nav a:hover,
footer.ch-footerbar nav a:hover{
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.35) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* Footer right text */
.ch-footer-right{
  justify-self:end;
  text-align:right;
  max-width: 520px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.2;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet: keep bar tight but allow breathing room */
@media (max-width: 980px){
  header.ch-navbar img,
  footer.ch-footerbar img{
    height: 96px;
  }
  .ch-navbar-inner{
    gap: 10px;
  }
}

/* Mobile: stack header + make nav scrollable row */
@media (max-width: 760px){
  header.ch-navbar img{
    height: 86px;
  }

  .ch-navbar-inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 12px;
    gap: 10px;
  }

  /* Nav becomes a clean scroll row instead of wrapping into chaos */
  .ch-navlinks{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .ch-navlinks::-webkit-scrollbar{ display:none; }

  .ch-navlinks a{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Footer becomes stacked */
  .ch-footerbar-inner{
    grid-template-columns: 1fr;
    text-align:center;
    gap: 10px;
  }

  .ch-footlinks{
    justify-content:center;
  }

  .ch-footer-right{
    justify-self:center;
    text-align:center;
    max-width:none;
  }

  footer.ch-footerbar img{
    height: 86px;
    margin: 0 auto;
  }
}

/* Tiny phones */
@media (max-width: 420px){
  header.ch-navbar img,
  footer.ch-footerbar img{
    height: 78px;
  }
  header.ch-navbar a,
  footer.ch-footerbar a{
    padding: 7px 9px;
    font-size: 13px;
  }
}

/* =========================================================
   MOBILE HAMBURGER (GOLD) — FINAL
   ========================================================= */

/* Hamburger button (hidden on desktop) */
.ch-hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;

  width: 44px;
  height: 44px;

  border-radius: 14px;

  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.42);

  cursor:pointer;
  user-select:none;

  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.ch-hamburger:active{
  transform: translateY(1px);
}

.ch-hamburger .ch-burger-lines{
  width: 18px;
  height: 12px;
  position: relative;
}

.ch-hamburger .ch-burger-lines span{
  position:absolute;
  left:0; right:0;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--goldHi));
}

.ch-hamburger .ch-burger-lines span:nth-child(1){ top:0; }
.ch-hamburger .ch-burger-lines span:nth-child(2){ top:5px; opacity:0.95; }
.ch-hamburger .ch-burger-lines span:nth-child(3){ top:10px; opacity:0.90; }

/* Dropdown panel (mobile only) */
.ch-mobile-panel{
  display:none;
  position:absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 10px);

  padding: 10px;

  background:
    radial-gradient(900px 220px at 50% -60px, rgba(255,255,255,0.035), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(11,11,14,0.72));

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;

  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);

  box-sizing: border-box;
}

header.ch-navbar.ch-nav-open .ch-mobile-panel{
  display:block;
}

.ch-mobile-panel a{
  display:block;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,0.88) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.ch-mobile-panel a:hover{
  border-color: rgba(212,175,55,0.35) !important;
}

/* Mobile layout: hide normal nav links, show hamburger */
@media (max-width: 760px){
  .ch-navbar-inner{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Keep logo left, hamburger right */
  .ch-navlinks{
    display:none !important;
  }

  .ch-hamburger{
    display:flex !important;
  }

  header.ch-navbar img{
    height: 86px !important;
  }
}

/* =========================================================
   HARD SAFETY: hamburger NEVER shows on desktop
   ========================================================= */
@media (min-width: 761px){
  header.ch-navbar .ch-hamburger,
  header.ch-navbar .ch-mobile-panel,
  header.ch-navbar button[aria-label="Open menu"]{
    display: none !important;
  }
}