/* JOTP global styles */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --jotp-black: #0a0a0a;
  --jotp-ink: #050505;
  --jotp-paper: #f6f4ef;
  --jotp-paper-dim: #e8e4dc;
  --jotp-line: rgba(255,255,255,0.12);
  --jotp-line-dark: rgba(0,0,0,0.12);
  --jotp-mute: rgba(255,255,255,0.55);
  --jotp-mute-2: rgba(255,255,255,0.4);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-cond: 'Archivo Narrow', 'Archivo', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-display); background: var(--jotp-paper); color: var(--jotp-ink); }
button { font-family: inherit; }

/* ──────────────────────────────────────────────────────────────
   JOTP Logo — recreated as styled type so it scales cleanly.
   Approximates the wide stencil-y wordmark from the brand.
   ────────────────────────────────────────────────────────────── */
.jotp-mark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  display: inline-block;
  line-height: 0.9;
}

/* Cinematic film-strip texture (subtle) */
.grain::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Reset to disable scrolling on artboards rendered inside the design canvas */
.jotp-stage * { scrollbar-width: none; }
.jotp-stage *::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────────────────────
   MOBILE — overrides for ≤ 760px
   Targets the inline-styled JSX via data-mobile attributes.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* SITE NAV — collapse to compact mobile bar */
  nav[data-mobile="nav"] {
    height: 60px !important;
    padding: 0 18px !important;
  }
  nav[data-mobile="nav"] [data-mobile="nav-links"],
  nav[data-mobile="nav"] [data-mobile="nav-ig"] {
    display: none !important;
  }
  nav[data-mobile="nav"] [data-mobile="nav-cta"] {
    padding: 9px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
  nav[data-mobile="nav"] [data-mobile="nav-burger"] {
    display: flex !important;
  }
  /* Open mobile menu sheet */
  [data-mobile="nav-sheet"] {
    display: flex !important;
  }
  [data-mobile="nav-sheet"][data-open="false"] {
    pointer-events: none;
    opacity: 0;
  }

  /* HERO — restack everything */
  section#top {
    height: auto !important;
    min-height: 100vh !important;
    padding: 90px 20px 32px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  section#top > div:nth-child(1) {
    /* truck container */
    position: relative !important;
    height: 280px !important;
    margin: 24px -20px 0 !important;
    order: 3;
  }
  section#top > div:nth-child(2) {
    /* eyebrow + headline */
    position: relative !important;
    top: auto !important; left: auto !important;
    max-width: 100% !important;
    order: 1;
  }
  section#top > div:nth-child(2) h1 {
    font-size: 56px !important;
  }
  section#top > div:nth-child(2) p {
    font-size: 15px !important;
    max-width: 100% !important;
    margin-top: 18px !important;
  }
  section#top > div:nth-child(3) {
    /* right meta column — hide on mobile, redundant */
    position: relative !important;
    top: auto !important; right: auto !important;
    text-align: left !important;
    width: 100% !important;
    margin-top: 18px !important;
    order: 2;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  section#top > div:nth-child(3) > div:not(:first-child):not(:nth-child(2)) {
    display: none !important;
  }
  section#top > div:nth-child(3) > div:nth-child(2) {
    margin-top: 0 !important;
  }
  section#top > div:nth-child(4) {
    /* CTA bar */
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-top: 20px !important;
    order: 4;
  }
  section#top > div:nth-child(4) > div:first-child {
    flex-direction: column !important;
    gap: 10px !important;
  }
  section#top > div:nth-child(4) a {
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 11px !important;
  }
  section#top > div:nth-child(4) > div:nth-child(2) {
    text-align: left !important;
    font-size: 9px !important;
  }

  /* MARQUEE */
  section[data-mobile="marquee"] {
    padding: 18px 0 !important;
  }
  section[data-mobile="marquee"] .jotp-marquee-track span {
    font-size: 16px !important;
  }

  /* SECTION HEADERS — collapse two-col layouts */
  section#services > div > div:first-child,
  section#detailing > div > div:first-child,
  section#ceramic > div > div:first-child,
  section#reviews > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding-bottom: 24px !important;
    margin-bottom: 40px !important;
  }
  section#services h2,
  section#detailing h2,
  section#ceramic h2,
  section#reviews h2 {
    font-size: 44px !important;
    line-height: 0.95 !important;
  }
  section#services p,
  section#detailing p,
  section#ceramic p,
  section#reviews p {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  /* GENERAL SECTION PADDING */
  section#services, section#detailing, section#ceramic,
  section#pre-sale, section#reviews, section#faq, section#book {
    padding: 70px 20px !important;
  }
  section#about > div:nth-child(2) {
    padding: 50px 20px 70px !important;
  }
  section#about > div:nth-child(1) {
    height: 280px !important;
  }
  section#about > div:nth-child(1) > div:nth-child(3),
  section#about > div:nth-child(1) > div:nth-child(4) {
    top: 18px !important;
    left: 20px !important;
    right: 20px !important;
    font-size: 9px !important;
  }
  section#about > div:nth-child(1) > div:nth-child(4) {
    left: auto !important;
  }

  /* GRIDS — stack to single column */
  section#services > div > div:nth-child(2),
  section#detailing > div > div:nth-child(2),
  section#ceramic > div > div:nth-child(2),
  section#reviews > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  section#detailing > div > div:nth-child(2) > div {
    min-height: 0 !important;
  }
  section#ceramic > div > div:nth-child(2) > div {
    min-height: 0 !important;
    border-left: 1px solid rgba(0,0,0,0.12) !important;
    padding: 32px 24px !important;
  }
  section#services > div > div:nth-child(2) a {
    height: auto !important;
    min-height: 280px !important;
    padding: 28px 24px 24px !important;
  }
  section#services h3, section#detailing h3, section#ceramic .ceramic-name {
    font-size: 34px !important;
  }
  section#ceramic > div > div:nth-child(2) > div > div:nth-child(2) > div:first-child {
    font-size: 42px !important;
  }

  /* PRE-SALE — stack */
  section#pre-sale > div {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  section#pre-sale h2 { font-size: 44px !important; }
  section#pre-sale > div > div:first-child > p { font-size: 15px !important; }
  section#pre-sale > div > div:first-child > div:nth-child(4) {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }
  section#pre-sale > div > div:first-child > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  section#pre-sale > div > div:first-child > div:last-child a:first-child {
    text-align: center !important;
  }
  section#pre-sale > div > div:nth-child(2) {
    padding: 32px 24px !important;
  }
  section#pre-sale > div > div:nth-child(2) > div:nth-child(2) > div:first-child {
    font-size: 90px !important;
  }
  section#pre-sale > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
    font-size: 14px !important;
  }

  /* CERAMIC bottom CTA row */
  section#ceramic > div > div:nth-child(3) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  section#ceramic > div > div:nth-child(3) a {
    text-align: center !important;
  }

  /* ABOUT body — stack */
  section#about > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  section#about > div:nth-child(2) > div h2 {
    font-size: 38px !important;
  }
  section#about > div:nth-child(2) > div > div:nth-child(2) > div:last-child {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 36px !important;
  }
  section#about > div:nth-child(2) > div > div:nth-child(2) > div:last-child > div > div:first-child {
    font-size: 24px !important;
  }
  section#about > div:nth-child(2) > div > div:nth-child(2) > div:last-child > div > div:nth-child(2) {
    font-size: 9px !important;
  }

  /* REVIEWS */
  section#reviews > div > div:nth-child(2) > div {
    padding: 26px 22px 22px !important;
    min-height: 0 !important;
  }
  section#reviews > div > div:nth-child(2) > div p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  section#reviews > div > div:nth-child(2) > div > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* FAQ */
  section#faq h2 { font-size: 40px !important; }
  section#faq button span:first-child { font-size: 17px !important; }
  section#faq > div { max-width: 100% !important; }

  /* BOOKING — stack */
  section#book > div {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  section#book h2 { font-size: 44px !important; }
  section#book > div > div:nth-child(2) {
    padding: 28px 22px 24px !important;
    min-height: 0 !important;
  }

  /* FOOTER — stack columns */
  footer#contact {
    padding: 70px 20px 32px !important;
  }
  footer#contact > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 36px !important;
  }
  footer#contact > div:nth-child(2) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }
  footer#contact > div:nth-child(2) > div:last-child {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  footer#contact > div:last-child {
    margin-top: 48px !important;
  }
  footer#contact > div:last-child img,
  footer#contact > div:last-child svg {
    max-width: 92vw !important;
    height: auto !important;
  }
}