/* =============================================================================
   Botonomy blog theme — DIRECTION D overlay
   -----------------------------------------------------------------------------
   Loaded AFTER style.css (see functions.php enqueue), so it overrides rather
   than replaces. Deliberately targets the theme's EXISTING class names —
   .site-header/.navbar, .footer-*, .entry-content, .post-card — so the PHP
   markup barely changes and the blog can't diverge structurally from what is
   already working.

   Mirrors src/styles/tokens.css + src/index.css on the React site. When a token
   changes there it must change here too; there is no build step linking them.

   Load-bearing rules carried over from the React side (each fixed a real defect):
     · Never size a scroll track in `vh` — a frame sized to content makes `vh`
       resolve against the whole document and the page grows without bound.
     · A diagonal cut is invisible unless the surface differs in value from what
       is behind it, and `clip-path` clips `border-*` away, so tone carries it.
     · Bound a reserved text zone as a PERCENTAGE, not in `ch` — `ch` scales
       with the headline's own size.
   ============================================================================= */

:root {
  /* --- Direction D additions (additive; the --bo-* mirror block stays) ------ */
  --bo-surface-0: #08070A;   /* mega panel */
  --bo-surface-1: #0B0A0F;   /* cards on the field */
  --bo-surface-2: #12111A;   /* footer floor */
  --bo-line:      rgba(247, 245, 240, 0.16);
  --bo-line-soft: rgba(247, 245, 240, 0.09);
  --bo-cut:       3.2vw;
  --bo-cut-sm:    2.6vw;
  --bo-read:      64ch;
  --bo-ease:      cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================== DARK SHELL ============================== */
body {
  background: #050505;
  color: #F7F5F0;
}
/* The contour field, as a pseudo-element so no wrapper markup is needed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 18% 12%, transparent 0 38px, rgba(247,245,240,.055) 38px 39px),
    repeating-radial-gradient(circle at 88% 78%, transparent 0 46px, rgba(255,138,0,.05) 46px 47px),
    radial-gradient(60% 48% at 76% 8%, rgba(255,77,77,.16), transparent 72%),
    radial-gradient(52% 44% at 12% 88%, rgba(78,19,128,.38), transparent 74%),
    #050505;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(247,245,240,.022) 0 1px, transparent 1px 3px);
}
/* Reading is not done over a pattern — the article page quiets the field. */
body.single::before { filter: saturate(.5) brightness(.62); }

.site-wrapper { position: relative; z-index: 1; }

/* ================================ NAV ================================== */
.site-header { background: transparent; border-bottom: 1px solid var(--bo-line-soft); }
.navbar { background: transparent !important; box-shadow: none !important; }

.navbar-nav > li > a,
.nav-dropdown-toggle {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: rgba(247,245,240,.7);
  background: none;
  border: 0;
}
.navbar-nav > li > a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] { color: #F7F5F0; }

/* the mega panel — opaque, because even 3% translucency ghosts headings through */
.nav-dropdown-menu {
  background: var(--bo-surface-0);
  border: 1px solid var(--bo-line);
  border-radius: .5rem;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.95);
}
.nav-dd-kicker { font-family: "IBM Plex Mono", ui-monospace, monospace; color: rgba(247,245,240,.4); }
.nav-dd-title  { color: #F7F5F0; font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }
.nav-dd-row    { color: #F7F5F0; border-radius: 0; }
.nav-dd-row:hover { background: rgba(78,19,128,.42); }
.nav-dd-badge  { background: rgba(247,245,240,.06); border: 1px solid var(--bo-line); color: #FF8A00; }

/* social row — the glyph carries the accent so it never fights the CTA */
.navbar-social { display: flex; align-items: center; gap: 0; padding-left: .875rem; border-left: 1px solid var(--bo-line-soft); }
.navbar-social a {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: #FF8A00;
  transition: color .22s var(--bo-ease), background .22s var(--bo-ease), transform .22s var(--bo-ease);
}
.navbar-social a:hover { color: #F7F5F0; background: rgba(247,245,240,.08); transform: translateY(-1px); }
.navbar-social svg { width: 16px; height: 16px; display: block; }
@media (max-width: 959px) { .navbar-social { display: none; } }

/* ============================== ARTICLE ================================= */
/* Featured hero: native 16:9, never cropped. Headline composited over the
   reserved left zone as real type — nothing is rendered into the image. */
.d-hero-banner {
  position: relative;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  max-width: min(100% - 3rem, 68rem);
  aspect-ratio: 16 / 9;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid var(--bo-line);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9);
}
.d-hero-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-hero-banner .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.86) 26%, rgba(5,5,5,.42) 52%, transparent 78%);
}
/* percentage-bounded, NOT `ch` — `ch` scales with the headline's own size and
   let the title run to 96% of the plate */
.d-hero-banner .lockup {
  position: absolute;
  inset: 0 40% 0 0;
  z-index: 2;
  display: grid;
  align-content: center;
  padding: clamp(1.25rem, 3vw, 3rem);
}
.d-hero-banner .lockup h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  text-transform: none;          /* uppercase is hostile at reading length */
  text-wrap: balance;
  color: #F7F5F0;
}
.d-hero-banner .lockup .kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: #FFB366; margin-bottom: .75rem;
}
@media (max-width: 760px) {
  /* 16:9 leaves no room for type — the plate keeps its ratio and the headline
     drops below it rather than competing for the same pixels. */
  .d-hero-banner { aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; max-width: 100%; }
  .d-hero-banner .media { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--bo-line); }
  .d-hero-banner img { position: absolute; }
  .d-hero-banner .scrim { display: none; }
  .d-hero-banner .lockup { position: static; inset: auto; padding: 1.25rem 1.5rem 0; }
}

/* the quiet interior: raised panel, held measure, accent only on links */
.entry-content {
  position: relative;
  z-index: 1;
  max-width: calc(var(--bo-read) + 7rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: rgba(18,18,18,.92);
  border: 1px solid var(--bo-line-soft);
  border-radius: .75rem;
}
.entry-content > * { max-width: var(--bo-read); margin-inline: auto; }
.entry-content p  { font-size: 1.0625rem; line-height: 1.76; color: rgba(247,245,240,.84); }
.entry-content li { color: rgba(247,245,240,.82); line-height: 1.68; }
.entry-content h2, .entry-content h3 { color: #F7F5F0; }
.entry-content h2 {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.03em;
  font-size: clamp(1.125rem, 2vw, 1.4375rem); margin: 2.5em 0 .9em;
}
.entry-content strong { color: #F7F5F0; }
.entry-content a { color: #FFB366; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { color: #FF8A00; }
.entry-content blockquote {
  margin: 2.25em 0; padding-left: 1.25rem;
  border-left: 3px solid #FF8A00; background: none;
}
.entry-content blockquote p {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3; color: #F7F5F0;
}
.entry-content img { border-radius: .5rem; }

.author-bio {
  background: rgba(18,18,18,.92);
  border: 1px solid var(--bo-line-soft);
  border-radius: .75rem;
}
.author-bio-name { color: #F7F5F0; }
.author-bio-text, .author-bio-label { color: rgba(247,245,240,.68); }

/* post cards on the archive / related rail */
.post-card {
  background: var(--bo-surface-1);
  border: 1px solid var(--bo-line);
  border-radius: .5rem;
}
.post-card-body h2, .post-card-body h3 { color: #F7F5F0; }
.post-card-body p { color: rgba(247,245,240,.7); }

/* ============================== FOOTER ================================= */
/* The cut only reads if the surface differs in value from the page behind it,
   and clip-path clips border-top away — so tone carries the edge. */
.site-footer,
.footer-inner {
  background: var(--bo-surface-2);
  border-top: 0;
  border-radius: 0;
  clip-path: polygon(0 var(--bo-cut-sm), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--bo-cut-sm) + clamp(3rem, 6vw, 5rem));
}
.footer-tagline, .footer-copy, .footer-legal a { color: rgba(247,245,240,.7); }
.footer-col a { color: rgba(247,245,240,.7); text-decoration: none; }
.footer-col a:hover { color: #F7F5F0; }
.footer-col > strong,
.footer-col > span:first-child {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,245,240,.4); font-weight: 400;
}
.footer-bottom { border-top: 1px solid var(--bo-line-soft); }

/* social — filled accent circles; down here there is no competing CTA, so this
   is deliberately the loudest element on the page */
.footer-social { display: flex; flex-wrap: wrap; gap: .625rem; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FF4D4D, #FF8A00);
  color: #fff;
  transition: transform .25s var(--bo-ease), filter .25s var(--bo-ease);
}
.footer-social a:hover { transform: translateY(-3px); filter: brightness(1.1); }
.footer-social svg { width: 19px; height: 19px; display: block; }

.footer-status { color: rgba(247,245,240,.4); }
.footer-status .dot,
.footer-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF8A00; box-shadow: 0 0 0 3px rgba(255,138,0,.2);
}

/* newsletter blocks — reuse the theme's own markup, restyle the surface */
.nl-banner, .nl-inline-wrap {
  background: var(--bo-surface-1);
  border: 1px solid var(--bo-line);
  border-radius: .75rem;
}
.nl-banner-heading, .nl-inline-heading { color: #F7F5F0; }
.nl-banner-sub, .nl-inline-text { color: rgba(247,245,240,.7); }
.nl-input, .nl-input-dark {
  background: rgba(18,18,18,.9);
  border: 1px solid var(--bo-line);
  color: #F7F5F0;
  border-radius: .375rem;
}
.nl-input::placeholder { color: rgba(247,245,240,.4); }
.nl-input:focus { outline: 0; border-color: #FF8A00; background: #1E1E24; }
.nl-btn-gradient { background: linear-gradient(100deg, #FF4D4D, #FF8A00); color: #fff; border: 0; }

/* ============================ ACCESSIBILITY ============================ */
a:focus-visible, button:focus-visible {
  outline: 2px solid #FF8A00;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}