/* =========================================================================
   cannabuddy.org -- shared stylesheet for index.html and 404.html.

   Extracted deliberately: the two pages previously carried duplicate copies
   and had ALREADY drifted in six places (text-size-adjust, text-rendering,
   .cta font-size, :active feedback, the box-shadow transition). One file,
   one request, cached for a year -- and this pattern is the template for six
   more site migrations, so two hand-maintained copies would become fourteen.

   Campton is a licensed webfont served from this domain per the site owner's
   licence. Everything routes through --font-sans, so swapping to a free
   geometric sans (Jost is the closest match) is a one-line change.
   ========================================================================= */

@font-face{
  font-family:Campton;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/campton-book.woff2') format('woff2');
}
@font-face{
  font-family:Campton;
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/campton-bold.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   Brand tokens, taken from cannabuddy.com's live stylesheet so the two
   properties read as one brand -- then adjusted where the source palette
   fails WCAG AA. Ratios below are measured, not estimated.

   --brand is DARKER than cannabuddy.com's #ef742a in the light theme:
   white on #ef742a is 2.92:1, and the CTA is 16-17.6px bold, just under the
   large-text threshold, so it needs 4.5:1. #bf4f0c gives 4.84:1 and still
   reads as the brand orange. The same token drives the wordmark accent,
   which needs 3:1 as large text and gets 4.84:1.

   In the dark theme the button keeps the bright orange and flips its LABEL
   dark instead (--on-brand), which is both higher contrast and the idiomatic
   dark-UI treatment.
   ------------------------------------------------------------------------- */
:root{
  --brand:      #bf4f0c;   /* white on this: 4.84:1  */
  --brand-deep: #9e4108;   /* white on this: 6.54:1  */
  --on-brand:   #ffffff;
  --leaf:       #abd590;
  --ink:        #3d3632;   /* on --surface: 10.80:1  */
  --ink-soft:   #6b635c;   /* on --surface:  5.36:1  */
  --muted:      #6f6960;   /* on --surface:  4.95:1  */
  --surface:    #f7f4ed;
  --border:     #e5e1d7;
  --ring:       #9e4108;
  --font-sans:  Campton, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:      #ff8a45;   /* on --surface: 6.47:1; label is dark, not white */
    --brand-deep: #ef742a;
    --on-brand:   #2a2522;
    --ink:        #f4efe7;   /* on --surface: 13.20:1 */
    --ink-soft:   #c3bbb1;   /* on --surface:  7.98:1 */
    --muted:      #9b938a;   /* on --surface:  5.00:1 */
    --surface:    #2a2522;
    --border:     #453d38;
    --ring:       #ff8a45;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* 100vh first as the fallback: browsers without svh drop the declaration
     entirely, and without a fallback the footer floats up under the content. */
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:2rem 1.25rem;
  font-family:var(--font-sans);
  color:var(--ink);
  /* Flat colour is declared BEFORE the gradients on purpose: a browser without
     color-mix() invalidates only the background-image and keeps this. */
  background:var(--surface);
  background-image:
    radial-gradient(58rem 42rem at 50% -12%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
    radial-gradient(38rem 30rem at 50% 118%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 72%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

main{
  text-align:center;
  max-width:38rem;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}

/* The logomark + wordmark are a single link to cannabuddy.com. Since the
   Shop Now button was removed (2026-08-12) this is the ONLY interactive
   element on the page, so its affordance and its focus state matter more
   than they would on a page full of controls.

   inline-block, not block: shrink-to-fit keeps the focus ring hugging the
   brand instead of spanning main's full 38rem.

   color:inherit is load-bearing -- without it the UA's default link colour
   (blue) overrides `.wordmark`'s inherited --ink and the split "Canna"/
   "Buddy" colouring silently disappears. */
.brandlink{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  border-radius:1.25rem;
  transition:transform .18s ease;
}
.brandlink:hover{transform:translateY(-2px)}
/* Measured, both themes, against --surface:
     light  --brand-deep #9e4108 -> 5.92:1
     dark   --brand-deep #ef742a -> 5.23:1
   Both clear the 3:1 large-text bar with room, so the hover state cannot
   become the failing one. */
.brandlink:hover .wordmark b{color:var(--brand-deep)}
/* Solid, not an alpha tint -- same reasoning as .cta:focus-visible below.
   --ring measures 5.92:1 (light) / 6.47:1 (dark) against --surface, over the
   3:1 WCAG 2.2 focus-appearance bar. offset clears the drop-shadow. */
.brandlink:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:6px;
}

.mark{
  width:clamp(6.5rem, 17vw, 9.5rem);
  height:auto;
  display:block;
  margin:0 auto 1.75rem;
  filter:drop-shadow(0 10px 22px rgba(61,54,50,.14));
}

.wordmark{
  margin:0;
  font-size:clamp(2.1rem, 7.5vw, 3.25rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
}
/* Split colouring echoes the logomark: dark "Canna", brand "Buddy". */
.wordmark b{font-weight:700;color:var(--brand)}

/* `.tagline` lived here and was removed 2026-08-12 with the copy it styled
   ("We've scoured the internet..."). Nothing else used it -- checked before
   deleting. `.cta` below is NOT dead: 404.html still uses it for its
   "Back to CannaBuddy" button, which is why it survives the same cleanup. */

.cta{
  display:inline-block;
  padding:.95rem 2.6rem;
  border-radius:999px;
  background:var(--brand);
  color:var(--on-brand);
  font-size:clamp(1rem, 3vw, 1.1rem);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 8px 20px -6px color-mix(in srgb, var(--brand) 65%, transparent);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cta:hover{
  background:var(--brand-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -6px color-mix(in srgb, var(--brand) 70%, transparent);
}
.cta:active{transform:translateY(0)}
/* Solid, not an alpha tint: rgba(...,.45) composited to ~1.55:1 against the
   page, well under the 3:1 WCAG 2.2 focus-appearance bar. */
.cta:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:3px;
}

footer{
  font-size:.85rem;
  color:var(--muted);
  padding-top:2.5rem;
}

/* 404-only */
.code{
  margin:0;
  font-size:clamp(3rem,12vw,4.5rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--brand);
}
.notfound h1{
  margin:.75rem 0 0;
  font-size:clamp(1.25rem,4.5vw,1.6rem);
  font-weight:700;
  letter-spacing:-.01em;
}
/* :not(.code) is load-bearing. `.notfound p` (specificity 0-1-1) outranks
   `.code` (0-1-0) AND comes later, so without it this rule wins for
   <p class="code">404</p> and the numeral silently loses its brand colour,
   its zero margin and its line-height. Before the CSS was extracted the
   competing rule was a bare `p{}` (0-0-1) and `.code` won — so the extraction
   itself introduced this. Caught by the delta review gate. */
.notfound p:not(.code){
  margin:.85rem auto 2rem;
  max-width:30ch;
  color:var(--ink-soft);
  line-height:1.5;
  text-wrap:balance;
}

@keyframes rise{
  from{opacity:0; transform:translateY(14px)}
  to  {opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
  main{animation:none}
  .cta,.brandlink{transition:none}
  .cta:hover,.brandlink:hover{transform:none}
}