/* ===== Skillet & Starlight — Dark Greyscale Theme ===== */

:root {
  --tt-black: #0a0a0b;
  --tt-slate-950: #0b0f19;
  --tt-slate-900: #0f1625;
  --tt-slate-800: #111827;
  --tt-slate-700: #1f2937;
  --tt-slate-600: #374151;
  --tt-slate-500: #6b7280;
  --tt-slate-300: #d1d5db;
  --tt-white: #ffffff;
  --tt-accent: #e5e7eb;
}

body { background-color: var(--tt-black); color: #e5e7eb; }
a { color: var(--tt-accent); }
a:hover { color: #ffffff; }

/* Navbar core */
.navbar-dark { background-color: var(--tt-slate-950); border-bottom: 1px solid #222835; }
.navbar-dark .navbar-brand, .navbar-dark .nav-link { color: #e5e7eb; }
.navbar-dark .nav-link:hover { color: #ffffff; }

/* Hero background */
.sxs-hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(255,255,255,.03), transparent 65%),
    linear-gradient(180deg, var(--tt-slate-950), #070a11);
  color: var(--tt-white);
  overflow: hidden;
}
.sxs-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 2px 2px; opacity: .12;
}

/* Cards & sections */
.bg-dim { background-color: var(--tt-slate-900) !important; }
.card { background-color: var(--tt-slate-800); color: #e5e7eb; border-color: var(--tt-slate-700); }
.card .text-secondary { color: #9ca3af !important; }
.badge.text-bg-primary { background-color: var(--tt-slate-700) !important; color: #e5e7eb !important; }
.badge.text-bg-secondary { background-color: var(--tt-slate-900) !important; color: #cbd5e1 !important; }

.btn-primary { background-color: var(--tt-accent); color: #0b0f19; border-color: var(--tt-accent); }
.btn-primary:hover { background-color: #ffffff; border-color: #ffffff; color: #0b0f19; }
.btn-outline-secondary { color: #e5e7eb; border-color: var(--tt-slate-600); }
.btn-outline-secondary:hover { background: var(--tt-slate-700); border-color: #4b5563; color: #ffffff; }

.form-control { background-color: var(--tt-slate-900); border-color: #24364f; color: #e5e7eb; }
.form-control::placeholder { color: #9ca3af; }

.rounded-2xl { border-radius: 1rem; }
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* Chips look */
.sxs-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; font-size: .8rem; border-radius: 999px;
  background: var(--tt-slate-800); color: #e5e7eb; border: 1px solid var(--tt-slate-600);
}
.sxs-chip i { color: #9ca3af; }

/* Footer */
.sxs-footer { background: linear-gradient(180deg, #0a0e17, #05070d 70%); color: #cbd5e1; }
.sxs-footer a { color: #cfe1ff; }
.sxs-footer a:hover { color: #ffffff; }

/* Focus ring */
:focus-visible { outline: 2px dashed var(--tt-accent); outline-offset: 2px; }

/* Code styling (inline + blocks) */
.sxs-hero code, .card code, .entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(255,255,255,.06);
  border: 1px solid #2a3446;
  color: #e5e7eb;
  padding: .125rem .375rem;
  border-radius: .375rem;
  font-size: .85em;
}
.sxs-hero pre, .card pre, .entry-content pre, pre {
  background: #0f1625;
  border: 1px solid #2a3446;
  color: #e5e7eb;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  overflow: auto;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre code { background: transparent; border: 0; padding: 0; }

/* === v1.6 additions === */
/* Slim, consistent navbar height */
:root{ --nav-h-desktop:64px; --nav-h-mobile:52px; }
.navbar.sticky-top{ padding-top:0; padding-bottom:0; height:var(--nav-h-mobile); }
@media (min-width: 992px){ .navbar.sticky-top{ height:var(--nav-h-desktop); } }
.navbar .container{ height:100%; }
.navbar-brand, .navbar-nav .nav-link, .navbar-toggler{ display:flex; align-items:center; }
.navbar-nav .nav-link{ padding-top:.5rem; padding-bottom:.5rem; line-height:1.1; }

/* Hover dropdown on desktop */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu { display:block; }
  .navbar .dropdown-menu { margin-top:0; }
}

/* Highlight Explore when a child category link is active */
.navbar .menu-item-has-children.current-menu-ancestor > a.nav-link { text-decoration: underline; }

/* Hide-on-scroll navbar */
.navbar.sticky-top{ will-change: transform, background-color, box-shadow; transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease; }
.navbar.sticky-top.nav-hide{ transform: translateY(-100%); }
.navbar.sticky-top.nav-show{ transform: translateY(0); }
.navbar.sticky-top.nav-scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* Hide Understrap Read More in cards */
.post-card .understrap-read-more-link{ display:none !important; }

/* Keep hero layout tidy around the logo */
.sxs-hero .hero-logo-wrap { line-height: 0; }
.sxs-hero .hero-logo, .sxs-hero .custom-logo { max-width: 100%; }

/* --- Offcanvas (mobile menu) — dark + clean list (single canonical block) --- */
.offcanvas.offcanvas-dark,
.offcanvas.offcanvas-dark .offcanvas-header,
.offcanvas.offcanvas-dark .offcanvas-body { background: #0b0f19 !important; color: #e5e7eb !important; }
.offcanvas.offcanvas-dark .btn-close { filter: invert(1) grayscale(1); opacity: .9; }
.offcanvas.offcanvas-dark a,
.offcanvas.offcanvas-dark .nav-link { color: #e5e7eb !important; text-decoration: none; }
.offcanvas.offcanvas-dark a:hover,
.offcanvas.offcanvas-dark .nav-link:hover { color: #ffffff !important; background: #111827; }
.offcanvas.offcanvas-dark ul,
.offcanvas.offcanvas-dark .menu,
.offcanvas.offcanvas-dark .sub-menu { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.offcanvas.offcanvas-dark .sub-menu a { padding-left: .75rem; }
.offcanvas.offcanvas-dark .btn-outline-light { border-color: #9ca3af; color: #e5e7eb; }
.offcanvas.offcanvas-dark .btn-outline-light:hover { background: #1f2937; border-color: #cbd5e1; color: #fff; }
.offcanvas.offcanvas-dark .btn-light { background: #e5e7eb; color: #0b0f19; border-color: #e5e7eb; }
.offcanvas.offcanvas-dark .btn-light:hover { background: #fff; color: #0b0f19; }
.offcanvas-backdrop.show { opacity: .6; }

/* ===== Skillet & Starlight — resilient hero layout (final) ===== */
@media (min-width: 992px){
  .sxs-hero{
    --logo-top: 2px;
    --logo-height: 250px;
    --pill-gap: 75px;
  }
  .sxs-hero .container{ position: relative; }

  /* logo across both columns */
  .sxs-hero .hero-logo-wrap,
  .sxs-hero .custom-logo-link,
  .sxs-hero img.custom-logo,
  .sxs-hero img.hero-logo,
  .sxs-hero [class*="logo"] > img,
  .sxs-hero [class*="logo"]{
    position: absolute !important;
    left: 50% !important; top: var(--logo-top) !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    display: block !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: none !important;
    max-height: var(--logo-height) !important;
    height: auto !important; width: auto !important; max-width: 95vw !important;
    margin: 0 !important;
  }

  /* reserve space below logo */
  .sxs-hero .col-lg-7,
  .sxs-hero .col-lg-5{
    padding-top: calc(var(--logo-top) + var(--logo-height) + 16px);
  }

  /* pill centered over RIGHT column */
  .sxs-hero .col-lg-7 > .badge{
    position: absolute !important;
    top: calc(var(--logo-top) + var(--logo-height) + var(--pill-gap)) !important;
    left: 58.3333% !important;                /* 7/12 */
    width: calc(41.6667% - 2rem) !important;  /* 5/12 minus padding */
    margin: 0 1rem; transform: none !important;
    text-align: center; z-index: 4;
  }

  /* equal height + feature card docks low */
  .sxs-hero .row.align-items-center{ align-items: stretch !important; }
  .sxs-hero .col-lg-5{ display: flex; flex-direction: column; }
  .sxs-hero .col-lg-5 > .feature-card,
  .sxs-hero .col-lg-5 > .card:first-child{
    margin-top: auto !important; margin-bottom: 0 !important;
    transform: translateY(-10px);
  }

  /* chips left with headroom */
  .sxs-hero .col-lg-7{ display: flex; flex-direction: column; }
  .sxs-hero [aria-label="Popular categories"]{
    margin-top: .75rem !important;
    display: flex; flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: .5rem .5rem;
  }
}

/* Mobile/tablet: logo back in flow; pill normal; chips left */
@media (max-width: 991.98px){
  .sxs-hero .hero-logo-wrap,
  .sxs-hero .custom-logo-link,
  .sxs-hero img.custom-logo,
  .sxs-hero img.hero-logo,
  .sxs-hero [class*="logo"] > img,
  .sxs-hero [class*="logo"]{
    position: static !important; transform: none !important;
    margin-left: auto; margin-right: auto;
  }
  .sxs-hero .col-lg-7 > .badge{
    position: static !important; width: auto;
    transform: none; left: auto; top: auto;
  }
  .sxs-hero [aria-label="Popular categories"]{ justify-content: flex-start !important; }
}

/* Tablet/Mobile: pill displays nicely above Featured even before JS runs */
@media (max-width: 991.98px){
  .sxs-hero .col-lg-5 > .badge,
  .sxs-hero .col-lg-7 > .badge{
    position: static !important;
    display: block;
    width: auto;
    margin: 0 auto .5rem;
    text-align: center;
  }
}