/* ==========================================================================
   KJ Print N' Go — core.css
   Design tokens, reset, typography, layout primitives, buttons, forms,
   sticky header, footer, mobile action bar.

   Design direction: Apple-style restraint (generous white space, tight
   display typography, neutral greys, pill buttons) with the shop's own
   CMYK ink colours used only as a signature accent — the printed work
   supplies the colour, the page itself stays quiet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals.
     Not a pure greyscale — the whole ramp is biased toward the brand cyan.
     Flat #86868b-style greys are what make a page read as "unstyled"; a
     25-30 point hue shift keeps text feeling part of the brand while still
     reading as text. Contrast on white / cool / warm surfaces:
     ink 17.3/16.1/16.6, ink-2 5.7/5.3/5.5, ink-3 5.0/4.7/4.8 — all AA.
     (The old --ink-3 was 3.62 on white, i.e. below AA. This fixes that.) */
  --ink:        #171b21;   /* primary text */
  --ink-2:      #5c6876;   /* secondary text */
  --ink-3:      #637180;   /* tertiary / captions */
  --line:       #ccd6e0;   /* hairline borders */
  --line-soft:  #e4ebf2;

  /* Surfaces — three planes, not two. Alternating white/grey alone still
     reads as one long white page; a cool band and a warm band give the
     sections a rhythm you can actually see. */
  --bg:         #ffffff;   /* canvas */
  --bg-2:       #f4f7fa;   /* cool band  (cyan-tinted) */
  --bg-3:       #fdfaf4;   /* warm band  (yellow-tinted) */
  --dark:       #0d1117;   /* dark showcase band, blue-black not neutral */

  /* Brand CMYK inks — sampled from the KJ Print N' Go logo.
     These are for GRAPHICS ONLY (dots, rules, gradients). None of them is
     legible as small text on white: cyan is 2.6:1, magenta 4.3:1,
     yellow 1.5:1. Use --brand / --brand-2 below for anything you can read. */
  --c: #29abe2;            /* cyan */
  --m: #ec008c;            /* magenta */
  --y: #ffd200;            /* yellow */
  --k: #171b21;            /* key / black */
  --ink-rule: linear-gradient(90deg, var(--c) 0%, var(--m) 38%, var(--y) 72%, var(--k) 100%);

  /* Readable brand accents — the logo inks darkened until they pass AA.
     --brand 5.8:1, --brand-2 6.1:1 on white. */
  --brand:      #0b6d8f;   /* deep cyan — links, labels, primary accent */
  --brand-2:    #c2005f;   /* deep magenta — secondary accent */
  --brand-soft: #eaf3f8;   /* tinted wash for chips and icon plates */

  /* Interactive */
  --link: var(--brand);
  --link-hover: #095a77;
  --focus: var(--brand);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 7.2vw, 5.25rem);  /*  44 -> 84 */
  --fs-h2:      clamp(2rem, 4.6vw, 3.25rem);     /*  32 -> 52 */
  --fs-h3:      clamp(1.3125rem, 2vw, 1.625rem); /*  21 -> 26 */
  --fs-lead:    clamp(1.125rem, 1.7vw, 1.4375rem);
  --fs-body:    1.0625rem;                       /*  17 — Apple's body size */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;

  /* Space & shape */
  /* 64px, not 48. The header CTA is a ~42px pill; at 48px it had under 3px
     of clear space above and below it and read as jammed into the bar. */
  --nav-h:       64px;
  --section-y:   clamp(72px, 9.5vw, 136px);
  --gutter:      clamp(20px, 5vw, 40px);
  --maxw:        1120px;
  --maxw-wide:   1440px;
  --maxw-text:   680px;

  --r-sm:   12px;
  --r:      18px;
  --r-lg:   28px;
  --r-pill: 980px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.04);
  --shadow:    0 2px 8px rgba(0,0,0,.06), 0 18px 46px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.07), 0 34px 80px rgba(0,0,0,.12);

  /* Motion — Apple leans on a strong ease-out for entrances */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:      .4s;
  --dur-slow: .8s;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchors so the sticky header never covers a heading. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--bg-2); }   /* soft placeholder while lazy images load */

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* A single, consistent focus ring for keyboard users. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; color: #fff; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.028em; line-height: 1.07; }
p { margin: 0; }

.display { font-size: var(--fs-display); letter-spacing: -.035em; line-height: 1.04; }
.h2      { font-size: var(--fs-h2); }
.h3      { font-size: var(--fs-h3); letter-spacing: -.022em; line-height: 1.2; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--ink-2);
  font-weight: 400;
}

.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.xs    { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }

/* Eyebrow: a small caps label above a heading, sitting on a CMYK hairline.
   Brand-coloured, not grey — the eyebrow is the one piece of section
   furniture that should carry colour, and it labels the section without
   competing with the heading above it. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 3px; border-radius: 2px;
  background: var(--ink-rule);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap      { width: 100%; max-width: var(--maxw);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.measure   { max-width: var(--maxw-text); }

.section        { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section--grey  { background: var(--bg-2); }   /* cool plane */
.section--warm  { background: var(--bg-3); }   /* warm plane */
.section--dark  { background: var(--dark); color: #eef3f7; }
.section--dark .lead,
.section--dark .muted   { color: #9fb0bd; }
/* On the dark band the deep cyan is too low-contrast, so the eyebrow
   switches to the bright logo cyan, which reads cleanly on near-black. */
.section--dark .eyebrow { color: var(--c); }

.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 20px; }

.hr { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons & text CTAs
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform .18s var(--ease);
}
.btn:hover  { text-decoration: none; }
.btn:active { transform: scale(.975); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #f0f0f2; color: var(--ink); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm    { padding: 9px 18px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* Apple's signature inline "link >" call to action. */
.cta-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-lead);
  color: var(--link);
  letter-spacing: -.015em;
}
.cta-link:hover { text-decoration: none; }
.cta-link::after {
  content: "\203A";
  font-size: 1.25em; line-height: 1;
  transform: translateY(-.06em);
  transition: transform var(--dur) var(--ease);
}
.cta-link:hover::after { transform: translate(4px, -.06em); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* --------------------------------------------------------------------------
   6. Sticky header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* JS adds .is-stuck once the page scrolls, revealing the hairline. */
.header.is-stuck { border-bottom-color: rgba(0,0,0,.11); }

.header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--maxw-wide); margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__mark { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: #fff; }
.brand__name { font-size: 15px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: var(--fs-xs);
  color: var(--ink);
  opacity: .85;
  transition: opacity var(--dur) var(--ease);
}
.nav__link:hover { opacity: 1; text-decoration: none; color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger — two bars that cross into an X when open. */
.nav-toggle {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
}
.nav-toggle__bars { position: relative; width: 17px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:first-child { top: 1px; }
.nav-toggle__bars span:last-child  { bottom: 1px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* Full-screen mobile menu */
.mobile-nav {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 12px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px;
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  /* Each link eases in just after the panel opens. */
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.mobile-nav__link:hover { text-decoration: none; color: var(--ink); }
.mobile-nav.is-open .mobile-nav__link { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__link:nth-child(1) { transition-delay: .04s; }
.mobile-nav.is-open .mobile-nav__link:nth-child(2) { transition-delay: .08s; }
.mobile-nav.is-open .mobile-nav__link:nth-child(3) { transition-delay: .12s; }
.mobile-nav.is-open .mobile-nav__link:nth-child(4) { transition-delay: .16s; }
.mobile-nav.is-open .mobile-nav__link:nth-child(5) { transition-delay: .20s; }
.mobile-nav__foot { margin-top: 28px; display: grid; gap: 12px; }

@media (max-width: 833px) {
  .nav { display: none; }
  .header__actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; }
.field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
/* --brand-2, not the raw logo magenta: #ec008c is only 4.25:1 on white. */
.field__label .req { color: var(--brand-2); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.select {
  /* Custom chevron, since appearance:none removed the native one. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(0,113,227,.16);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

/* Invalid styling only kicks in after a submit attempt. */
form.was-validated .input:invalid,
form.was-validated .select:invalid,
form.was-validated .textarea:invalid {
  border-color: #d70015;
  box-shadow: 0 0 0 3px rgba(215,0,21,.12);
}

.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: 1 / -1; }
}

/* Checkbox pills used for "what do you need?" on the quote form. */
.chip-set { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover span { border-color: var(--ink-3); color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Inline status message shown after a submit attempt. */
.form-status {
  display: none;
  margin-top: 18px; padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.5;
}
.form-status.is-visible { display: block; }
.form-status--ok   { background: #e8f5ec; color: #1a7f3c; }
.form-status--err  { background: #fdeceb; color: #b3261e; }
.form-status--info { background: var(--bg-2); color: var(--ink-2); }

/* Honeypot — a field only a bot will fill in. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--bg-2); padding-block: clamp(48px, 6vw, 72px) 32px; font-size: var(--fs-sm); }
.footer__top {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }

.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__brand img { width: 36px; height: 36px; border-radius: 9px; }
.footer__brand strong { font-size: 1rem; letter-spacing: -.02em; }

.footer h4 {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }

.footer__bottom {
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between;
  color: var(--ink-3); font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.social-row a:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.social-row svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   9. Mobile action bar — a neighbourhood print shop lives on phone calls,
      so Call and Quote stay within thumb reach on small screens.
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%);
  transition: transform .35s var(--ease-out);
}
.action-bar.is-visible { transform: none; }
.action-bar .btn { flex: 1; padding-block: 12px; }

@media (max-width: 833px) {
  .action-bar { display: flex; }
  body { padding-bottom: 68px; }   /* keep the footer clear of the bar */
}