/*
 * v2-cohesion.css — makes the WordPress front-of-house (blog, /work, /resources,
 * single case studies) share the burksup.com V2 homepage design VOICE.
 *
 * Strategy: keep the theme's Tailwind + shared brand tokens (cream/red/charcoal
 * already match V2), but swap the TYPE to the V2 faces and add the handwritten
 * script accent. Loaded AFTER assets/css/output.css so these win.
 *
 * The three V2 webfonts are served from the Pages deployment at /fonts/* (V2-owned
 * routes on burksup.com), so we load them by absolute URL — same files the
 * homepage uses, so the type is pixel-identical.
 */

@font-face {
  font-family: "Lektorat Condensed";
  src: url("/fonts/Lektorat-CondensedExtrabold-DSk2XJWP.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Regular-C0RgVexg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tentang Nanti One";
  src: url("/fonts/tentang-nanti-one-C7wlalXw.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Override the theme's Tailwind font utilities to the V2 faces.
   font-display was DM Serif Display (serif) -> now the brutalist condensed display.
   font-body was Inter -> now PP Neue Montreal. !important guards against Tailwind
   utility specificity/layers. */
.font-display {
  font-family: "Lektorat Condensed", "Impact", "Haettenschweiler", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
body,
.font-body {
  font-family: "PP Neue Montreal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* Brutalist display headings read best UPPERCASE + tight (matches the homepage
   "WEBSITES THAT MAKE VISITORS" treatment). Applies to the big display headings
   without touching body copy. */
.font-display.is-display,
h1.font-display,
h2.font-display {
  text-transform: uppercase;
  line-height: 0.92;
}

/* The brand signature: handwritten red script accent. Mirrors the homepage
   .text-style-accent recipe (Tentang Nanti One, brand red, UPPERCASE, wide
   tracking, optical baseline lift). Use on the accent word inside a headline. */
.text-accent-script {
  font-family: "Tentang Nanti One", cursive !important;
  font-weight: 400 !important;
  color: var(--brand-red, #D72323);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05em;
  line-height: 0.9;
  display: inline-block;
  position: relative;
  top: 0.05em;
}

/* The theme still enqueues Caveat for legacy handwritten bits; alias any leftover
   Caveat usage to the real V2 script so nothing reads as a different hand. */
.font-hand,
.font-caveat {
  font-family: "Tentang Nanti One", cursive !important;
}

/* --- Mobile menu robustness -----------------------------------------------
 * Two issues fixed after the V2 header reskin:
 * 1) The header's backdrop-filter is now md:-only (see header.php) so it can't
 *    trap the fixed #mobile-menu on mobile.
 * 2) The panel's own translate-x-0 class does not reliably toggle in this
 *    Tailwind v4 build (it uses the `translate` CSS property, and the class flip
 *    doesn't land), leaving the panel parked off-screen at translate:100%.
 *    Drive the slide from the CONTAINER's open state instead — mobile-menu.js
 *    reliably adds `.opacity-100` to #mobile-menu when open. This overrides the
 *    `translate` property directly, so the panel slides in every time.
 */
/* The full-screen red overlay is a simple fade: the container's opacity +
 * pointer-events (reliably toggled by mobile-menu.js) drive show/hide; the panel
 * is pinned inset-0, so no fragile per-panel translate is involved. While the
 * menu is open, the sticky header goes transparent so the red reaches the very
 * top behind the logo + MENU pill (matches the homepage). */
header:has(#mobile-menu.opacity-100) {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}

/* --- Signature button per-letter ROLL-UP (ported from the homepage's
 * bup-nav.js char animation — pure CSS text-shadow trick, no GSAP). Add
 * class `.btn-roll` to a button/link and wrap its label in
 * <span data-button-animate-chars>Label</span>; btn-roll.js splits it into
 * per-char spans. On hover each char rolls up to its ghost copy 1.3em below. */
[data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; vertical-align: bottom; }
[data-button-animate-chars] span {
  display: inline-block; position: relative;
  text-shadow: 0 1.3em currentColor;
  transform: translateY(0) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-roll:hover [data-button-animate-chars] span,
.btn-roll:focus-visible [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}
@media (prefers-reduced-motion: reduce) {
  [data-button-animate-chars] span { transition: none !important; text-shadow: none; }
}

/* --- Blog prose polish -----------------------------------------------------
 * Tailwind-typography defaults its bullets/counters/captions/hr/links to a cool
 * gray (oklch) that reads off the warm brand palette. Repoint the prose vars to
 * charcoal/red. Headings stay sentence-case (Nick's call) and inherit the
 * repointed display face. Blockquotes drop the generic italic. */
.prose {
  --tw-prose-bullets: #3E3636;
  --tw-prose-counters: #3E3636;
  --tw-prose-captions: rgba(62, 54, 54, 0.6);
  --tw-prose-hr: rgba(62, 54, 54, 0.15);
  --tw-prose-quotes: #3E3636;
  --tw-prose-quote-borders: #D72323;
  --tw-prose-links: #D72323;
  --tw-prose-bold: #1B1A18;
}
.prose blockquote { font-style: normal; }