/* ============================================
   SideQuestHustle · v2 Theme (sitewide)
   Brutalist editorial aesthetic
   ============================================ */

:root {
  --sqh-cream: #FAF8F5;
  --sqh-ink: #0F0F10;
  --sqh-ink-60: #5B5B5F;
  --sqh-ink-40: #8E8E92;
  --sqh-ink-10: rgba(15, 15, 16, 0.1);
  --sqh-coral: #FF6F61;
  --sqh-coral-light: #FF8A7A;
  --sqh-coral-dark: #E5594C;
}

/* Body: cream bg + ink text globally */
body {
  background: var(--sqh-cream) !important;
  color: var(--sqh-ink);
}

/* Override Tailwind's bg-gray-50 / bg-gray-100 which many pages use
   for section backgrounds — let them still feel distinct from body */
.bg-gray-50 { background-color: #F0EDE6 !important; }
.bg-gray-100 { background-color: #EBE7DE !important; }

/* Headings: tighter tracking, blacker weight for display hierarchy */
h1, h2, h3 {
  color: var(--sqh-ink);
  letter-spacing: -0.015em;
}

/* Eyebrow label utility (for inline usage) */
.sqh-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sqh-ink-60);
}

/* Italic serif numeral (for section numbering accent) */
.sqh-serif-num {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--sqh-ink-40);
}

/* Brutalist card treatment */
.sqh-brutal,
.sqh-brutal-sm,
.sqh-brutal-lg {
  border: 2px solid var(--sqh-ink);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sqh-brutal    { box-shadow: 4px 4px 0 var(--sqh-ink); }
.sqh-brutal-sm { box-shadow: 3px 3px 0 var(--sqh-ink); }
.sqh-brutal-lg { box-shadow: 6px 6px 0 var(--sqh-ink); }
.sqh-brutal:hover,
.sqh-brutal-sm:hover,
.sqh-brutal-lg:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--sqh-ink);
}

/* Tabular numerals for stats/prices */
.sqh-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Magic-link form styling (matches homepage) */
.sqh-magic-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sqh-magic-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--sqh-ink);
  border-radius: 8px;
  font-size: 14px;
  color: var(--sqh-ink);
  outline: none;
  font-family: inherit;
}
.sqh-magic-form input[type="email"]:focus {
  box-shadow: 0 0 0 4px rgba(255, 111, 97, 0.25);
}
.sqh-magic-form button[type="submit"] {
  background: var(--sqh-ink);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 2px solid var(--sqh-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease;
  font-family: inherit;
}
.sqh-magic-form button[type="submit"]:hover {
  background: var(--sqh-coral);
}

/* Progressive upgrade: any element with class `bg-white` that's also
   got a typical card class (rounded-lg, rounded-xl, p-6 etc.) picks up
   a subtle ink border instead of the default soft shadow — feels more
   brutalist without rewriting markup. Only applied when no border is
   already set by tailwind. */
.bg-white.rounded-lg.shadow-md,
.bg-white.rounded-lg.shadow-sm,
.bg-white.rounded-xl.shadow-md,
.bg-white.rounded-xl.shadow-sm,
.bg-white.rounded-xl.shadow-lg {
  border: 1px solid var(--sqh-ink-10);
  box-shadow: 3px 3px 0 var(--sqh-ink) !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.bg-white.rounded-lg.shadow-md:hover,
.bg-white.rounded-lg.shadow-sm:hover,
.bg-white.rounded-xl.shadow-md:hover,
.bg-white.rounded-xl.shadow-sm:hover,
.bg-white.rounded-xl.shadow-lg:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--sqh-ink) !important;
}

/* Button polish: primary coral buttons get a tiny hard shadow on hover */
.bg-coral:hover,
a.bg-coral:hover,
button.bg-coral:hover {
  box-shadow: 3px 3px 0 var(--sqh-ink);
  transform: translate(-1px, -1px);
}

/* Tables: cleaner ink-style for data */
table thead.bg-coral {
  background: var(--sqh-ink) !important;
}

/* Hide any remaining Beehiiv iframes while JS replaces them */
iframe.beehiiv-embed { display: none !important; }

/* Details/summary (FAQs) — clean chevron when no custom icon */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Details with marker disabled in Firefox */
details > summary { list-style: none; }

/* Smooth scroll for anchor CTAs */
html { scroll-behavior: smooth; }

/* Nav logo stays coral */
header a[href="/"].text-2xl.text-coral {
  color: var(--sqh-coral);
}

/* Selection: coral highlight */
::selection { background: var(--sqh-coral); color: white; }

/* ========================================================================
   GUIDE PAGES — editorial numbered sections (CSS counter)
   Applies to articles with the <section class="mb-12"> pattern.
   ======================================================================== */
main article {
  counter-reset: sqh-section;
}
/* Only count sections that actually start with an H2 (skips the intro prose) */
main article > section.mb-12:has(> h2:first-child) {
  counter-increment: sqh-section;
  position: relative;
}
main article > section.mb-12 > h2:first-child {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
main article > section.mb-12 > h2:first-child::before {
  content: counter(sqh-section, decimal-leading-zero);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--sqh-ink-40);
  font-size: 2.25rem;
  line-height: 1;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  main article > section.mb-12 > h2:first-child::before { font-size: 3rem; }
}
main article > section.mb-12 > h2:first-child::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sqh-ink-10);
  margin-left: 0.5rem;
  align-self: center;
}

/* Article H1 polish: tighter tracking, coral final word */
main article > header > h1 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

/* Article intro paragraph: larger, softer */
main article > section.prose > p:first-child {
  font-size: 1.15rem;
  color: var(--sqh-ink-60);
  line-height: 1.65;
}

/* Quick stats box auto-upgrade: if a div uses coral/10 left-border pattern,
   replace with brutalist card style */
.bg-coral\/10.border-l-4.border-coral {
  background: white !important;
  border: 2px solid var(--sqh-ink) !important;
  border-left-width: 2px !important;
  box-shadow: 4px 4px 0 var(--sqh-ink) !important;
  border-radius: 16px !important;
}

/* Tables: auto-upgrade to v2 treatment */
main article table thead {
  background: var(--sqh-ink) !important;
}
main article table thead th,
main article table thead tr,
main article table thead td {
  color: #fff !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
main article table {
  border: 1px solid var(--sqh-ink-10);
  box-shadow: 3px 3px 0 var(--sqh-ink);
}

/* Callout-style left-border boxes: soften the border and add rounded right */
main article .bg-yellow-50.border-l-4,
main article .bg-blue-50.border-l-4,
main article .bg-green-50.border-l-4,
main article p.bg-blue-50,
main article p.bg-yellow-50 {
  border-radius: 0 8px 8px 0;
}