/*
Theme Name: Mt28
Theme URI: https://mt28.fi
Author: Mt28 ry (built with Claude)
Author URI: https://mt28.fi
Description: Custom theme for mt28.fi — Mt28 ry. Business-like, clean, phone-first, bilingual (Finnish default + English). Vanilla CSS/JS + GSAP; cinematic modules ported from /components. No page builder.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mt28
Tags: custom-menu, featured-images, translation-ready, full-width-template
*/

/* =========================================================================
   Design tokens — from the official brand kit (see docs/design/DESIGN-SYSTEM.md)
   ========================================================================= */
:root{
  /* palette — TASTE-STANDARD: no pure #000; warm monochrome canvas; tinted darks */
  --mt-black:#0c100f;    /* off-black, teal-tinted (was #000000 — pure black is banned) */
  --mt-sand:#dbd2c6;
  --mt-teal:#1f5d5d;     /* primary brand */
  --mt-aqua:#98c4c6;     /* secondary tint */
  --mt-gold:#c8983b;     /* accent — WORKING value (displayed gold). ⚠ printed kit hex #13312e
                            reads near-black-green; confirm with Anniina before locking. */
  --mt-ink:#101513;      /* near-black body text on light */
  --mt-paper:#fbfbf9;    /* warm bone canvas (was stark #fff) */
  --mt-muted:#5b6360;
  --mt-shadow:15 44 42;  /* teal-tinted shadow base (rgb channels) — never raw black */

  /* type */
  --mt-font-head:'Questrial', system-ui, -apple-system, sans-serif;
  --mt-font-body:'Quicksand', system-ui, -apple-system, sans-serif;
  --mt-fs-base:17px;
  --mt-lh:1.6;

  /* layout */
  --mt-maxw:1140px;
  --mt-gutter:clamp(18px, 5vw, 40px);
  --mt-radius:14px;
  --mt-header-h:80px;   /* roomier bar so the (now legible, enlarged) logo breathes — 2026-06-03 */

  /* motion */
  --mt-ease:cubic-bezier(.22,.61,.36,1);
  --mt-dur:.45s;
}

/* =========================================================================
   Base / reset
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--mt-font-body);
  font-size:var(--mt-fs-base);
  line-height:var(--mt-lh);
  color:var(--mt-ink);
  background:var(--mt-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Finnish compounds are long: never let a single token force horizontal scroll. */
  overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--mt-teal);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--mt-font-head);font-weight:400;line-height:1.12;letter-spacing:.4px;margin:0 0 .4em;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:clamp(20px,3vw,26px)}
p{margin:0 0 1em;text-wrap:pretty}

/* reduced motion: respect the OS setting */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--mt-teal);color:#fff;padding:10px 16px;z-index:1000}
.skip-link:focus{left:8px;top:8px}

/* TASTE-STANDARD: visible, branded keyboard focus on every control (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mt-gold);outline-offset:3px;border-radius:3px;
}

/* shared layout primitive */
.mt-container{width:100%;max-width:var(--mt-maxw);margin-inline:auto;padding-inline:var(--mt-gutter)}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}