/* FireYourSEOAgency shared styles.
   Design tokens: see assets/js/tw-config.js and design-system/MASTER.md.
   Style: neubrutalist. Hard edges, thick borders, offset shadows, no soft radius. */

:root {
  --ember: #FF4D00;
  --ember-deep: #C63C00;
  --ink: #0B0B0D;
  --paper: #FAFAF7;
  --signal: #FFD400;
  --rise: #22C55E;
  --rise-deep: #15803D;
  --smoke: #3A3A3F;
  --ash: #B9B9B3;
}

html {
  scroll-behavior: smooth;
}

/* The hidden attribute must always win, even against Tailwind display utilities
   like .grid or .inline-flex, otherwise JS show/hide logic silently breaks. */
[hidden] {
  display: none !important;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[id] {
  scroll-margin-top: 90px;
}

a, button, summary, [role="button"], label[for] {
  cursor: pointer;
  touch-action: manipulation;
}

/* Focus: ember-deep passes 3:1 against paper, white and ink surrounds */
:focus-visible {
  outline: 3px solid var(--ember-deep);
  outline-offset: 3px;
}
.on-ember :focus-visible,
.on-ember:focus-visible {
  outline-color: var(--ink);
}

/* Display type */
.font-display {
  letter-spacing: 0.01em;
}

.hero-line {
  font-size: clamp(3.3rem, 16vw, 9.5rem);
  line-height: 0.94;
}

.h2-display {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1;
}

/* AGENCY gets fired: thick signal strike through the word */
.strike-fired {
  position: relative;
  white-space: nowrap;
}
.strike-fired::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 0.09em;
  background: var(--signal);
  transform: rotate(-2deg);
}

/* Buttons */
.btn-brut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--ember);
  color: var(--ink);
  border: 4px solid var(--ink);
  padding: 0.9rem 1.6rem;
  box-shadow: 8px 8px 0 0 var(--ink);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
  text-decoration: none;
}
.btn-brut:hover {
  transform: translate(2px, 2px);
  box-shadow: 6px 6px 0 0 var(--ink);
  background: #FF5E14;
}
.btn-brut:active {
  transform: translate(7px, 7px);
  box-shadow: 1px 1px 0 0 var(--ink);
}
.btn-on-dark {
  border-color: var(--paper);
  box-shadow: 8px 8px 0 0 var(--signal);
}
.btn-on-dark:hover {
  box-shadow: 6px 6px 0 0 var(--signal);
}
.btn-on-dark:active {
  box-shadow: 1px 1px 0 0 var(--signal);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(250, 250, 247, 0.08);
  transform: none;
}

/* Cards react on hover: they lift against their shadow and the shadow
   grows. Uses the standalone translate property so it composes with any
   Tailwind transform utilities already on the card (like the raised
   Most Popular pack). Transform and shadow only, no layout shift. */
article[class*="shadow-brut"],
aside[class*="shadow-brut"],
div[class*="shadow-brut"],
a[class*="shadow-brut"] {
  transition: translate 0.18s ease-out, box-shadow 0.18s ease-out;
}
article[class*="shadow-brut"]:hover,
aside[class*="shadow-brut"]:hover,
div[class*="shadow-brut"]:hover,
a[class*="shadow-brut"]:hover {
  translate: -3px -3px;
}
article.shadow-brut:hover,
aside.shadow-brut:hover,
div.shadow-brut:hover,
a.shadow-brut:hover,
a.shadow-brut-sm:hover {
  box-shadow: 11px 11px 0 0 #0B0B0D;
}
article.shadow-brut-ember:hover,
aside.shadow-brut-ember:hover,
div.shadow-brut-ember:hover {
  box-shadow: 11px 11px 0 0 #FF4D00;
}

/* Nav links */
.nav-link {
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.nav-link:hover {
  border-bottom-color: var(--signal);
}

/* Text links in body copy */
.link-loud {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-out, color 0.15s ease-out;
}
.link-loud:hover {
  text-decoration-color: var(--signal);
}

/* Hero media: slow Ken Burns zoom, once */
.kenburns {
  animation: kenburns 16s ease-out both;
}
@keyframes kenburns {
  from { opacity: 0; transform: scale(1); }
  12%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1.12) translate(-1.5%, 1%); }
}

/* Fade-in used by the case study caption */
.cs-fade-in {
  animation: csFadeIn 0.4s ease-out both;
}
@keyframes csFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Accordion */
details.acc {
  background: #FFFFFF;
  border: 3px solid var(--ink);
}
details.acc + details.acc {
  margin-top: 0.75rem;
}
details.acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  min-height: 44px;
}
details.acc summary::-webkit-details-marker {
  display: none;
}
details.acc summary:hover {
  background: #F1F1EC;
}
details.acc .acc-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--smoke);
  line-height: 1.65;
}
details.acc .acc-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--signal);
}
details.acc .acc-icon svg {
  transition: transform 0.2s ease-out;
}
details.acc[open] .acc-icon svg {
  transform: rotate(45deg);
}

/* Sticky mobile buy bar */
#mobile-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
#mobile-buy-bar.is-visible {
  transform: translateY(0);
}
@media (min-width: 768px) {
  #mobile-buy-bar {
    display: none;
  }
}

/* Buy button slots: reserve space so nothing jumps when buttons render */
.buy-slot {
  min-height: 64px;
  display: flex;
  align-items: stretch;
}
.buy-slot > * {
  width: 100%;
}
.buy-slot .shopify-buy-frame {
  width: 100%;
}

/* Case study: scroll-scrubbed stage. The tall wrapper gives the scroll
   distance; the inner block pins below the header while progress drives
   the animation, so scrolling back rewinds it. */
.cs-scroll {
  height: 560vh;
}
.cs-sticky {
  position: sticky;
  top: 64px;
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0 1rem;
}

.cs-panel {
  background: #FFFFFF;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 0 var(--ink);
  position: relative;
  overflow: hidden;
}
.cs-disclaimer {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.75rem;
  text-align: center;
}
.cs-searchbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 1rem 0.75rem;
  border: 3px solid var(--ink);
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  color: var(--smoke);
  background: #FFFFFF;
}
.cs-pack {
  margin: 0 1rem;
  border: 3px solid var(--ink);
  background: #FFFFFF;
}
.cs-pack-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.cs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}
.cs-pack .cs-row + .cs-row {
  border-top: 2px solid #E5E5E0;
}
.cs-gap {
  margin: 0.6rem 1rem;
  text-align: center;
  color: var(--smoke);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cs-lowlist {
  margin: 0 1rem 1rem;
  border: 3px solid #C9C9C2;
  background: #F3F3EE;
}
.cs-lowlist .cs-row {
  color: var(--smoke);
}
.cs-lowlist .cs-row + .cs-row {
  border-top: 2px solid #DBDBD4;
}
.cs-cafe {
  position: relative;
  background: #FFFFFF;
  z-index: 5;
  will-change: transform;
}
#cs-tapcard {
  will-change: transform, opacity;
}
.cs-pos {
  flex: none;
  font-weight: 800;
  font-size: 0.78rem;
  border: 2px solid currentColor;
  padding: 0.1rem 0.4rem;
}
.cs-name {
  font-weight: 700;
  color: var(--ink);
}
.cs-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.stars .stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: calc(var(--rating, 0) / 5 * 100%);
}
.cs-caption {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--signal);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  opacity: 0;
  z-index: 6;
}
.cs-tapcard {
  position: absolute;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion: kill animation and show final, static states */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .kenburns {
    animation: none;
    opacity: 1;
  }
}