@import "tailwindcss";

/* Tailwind scans these files for the classes they use. */
@source "../public_html/index.html";
@source "../public_html/assets/js/main.js";

/* ==========================================================================
   Marvs Global brand tokens: RED and BLACK.
   Change a colour or size here, run `npm run build`, and the whole page follows.
   Contrast notes: white on brand red 5.2:1. Brand red on white 5.2:1, on bone 4.8:1.
   Brand red is NOT used for small text on ash (4.3:1): use brand-dark there (5.7:1). Brand-light is for text on black (6.5:1).
   ========================================================================== */
@theme {
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-ink: #0a0a0a;          /* the brand black */
  --color-coal: #151515;         /* cards on black */
  --color-brand: #d71920;        /* the brand red */
  --color-brand-dark: #b3141a;   /* red for small text on light grey, and hover on light surfaces */
  --color-brand-light: #ff5a5f;  /* red for text on black */
  --color-paper: #ffffff;
  --color-bone: #f5f5f3;         /* light section background */
  --color-ash: #e9e9e6;          /* alternate light section background */
  --color-muted: #4a4a4a;        /* secondary text. 8.9:1 on white */
  --color-line: #d5d5d1;
  --color-line-strong: #8a8a8a;

  --text-display: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.03em;
  --text-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-h1--line-height: 1.05;
  --text-h1--letter-spacing: -0.025em;
  --text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: -0.02em;
  --text-h3: 1.375rem;
  --text-h3--line-height: 1.25;
  --text-h3--letter-spacing: -0.01em;
  --text-stat: clamp(3rem, 2rem + 4vw, 4.5rem);
  --text-stat--line-height: 1;
  --text-stat--letter-spacing: -0.03em;
  --text-lead: 1.25rem;
  --text-lead--line-height: 1.55;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.9375rem;
  --text-small--line-height: 1.5;

  --radius-photo: 0px;
  --radius-control: 4px;
  --container-page: 76rem;
}

/* The font is a file in /assets/fonts, so nothing loads from Google. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Lets a class apply only when JavaScript is off: `noscript:hidden` */
@custom-variant noscript (@media (scripting: none));

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
  body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body--line-height); text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom, 0px); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-wrap: balance; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }
  .on-dark :focus-visible { outline-color: #fff; }
  .on-red :focus-visible { outline-color: #fff; }
  ::selection { background: var(--color-brand); color: #fff; }
  [hidden] { display: none !important; }
}

@layer components {
  /* Photo slot: shows a labelled placeholder until the real photo file is uploaded to /images */
  .photo { position: relative; overflow: hidden; background: var(--color-ash); }
  .photo::after { content: "Placeholder photo. " attr(data-note); position: absolute; inset: auto 0 0 0; z-index: 0; padding: 1rem; font-size: var(--text-small); line-height: 1.5; color: var(--color-muted); }
  .photo > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
  .on-dark .photo::after { color: rgb(255 255 255 / 0.85); }

  /* Slide-in mobile menu (a native <dialog>) */
  .menu-panel { transform: translateX(100%); transition: transform 250ms ease-out, overlay 250ms allow-discrete, display 250ms allow-discrete; }
  .menu-panel[open] { transform: none; }
  @starting-style { .menu-panel[open] { transform: translateX(100%); } }
  .menu-panel::backdrop { background: rgb(10 10 10 / 0.7); }

  /* ---- Hero slider ----
     Without JavaScript the four slides simply stack and every one can be read.
     The script adds .slider-on, which stacks them in one place and fades between them. */
  .slider-on .slides { display: grid; touch-action: pan-y; }
  .slider-on .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
  .slider-on .slide[data-active="true"] { opacity: 1; visibility: visible; transition: opacity 600ms ease; }

  /* The active slide button carries a bar that fills over 7 seconds. When it finishes, the script moves to the next slide. */
  .tab .bar { width: 0; }
  .slider-on .tab[aria-current="true"] .bar { width: 100%; }
  .slider-on.is-playing .tab[aria-current="true"] .bar { width: 0; animation: bar-fill 7000ms linear forwards; }
  .slider-on.is-held .tab .bar { animation-play-state: paused; }
}

@keyframes bar-fill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .slider-on .slide { transition: none; }
}