/*
Theme Name:   speCTraMet
Theme URI:    https://spectramt.eu
Description:  Child theme of Twenty Twenty-Five for the speCTraMet project website.
Author:       speCTraMet Consortium
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  spectramt
*/

/* ═══════════════════════════════════════════════
   DESIGN TOKENS  (mirror of template CSS vars)
   ═══════════════════════════════════════════════ */
:root {
  --sm-navy:      #082133;
  --sm-navy-2:    #0d3148;
  --sm-ink:       #173142;
  --sm-muted:     #667d89;
  --sm-mist:      #f3f7f7;
  --sm-paper:     #fbfcfb;
  --sm-teal:      #35c4be;
  --sm-teal-dark: #179e99;
  --sm-line:      #dce7e8;

  /* Typography */
  --sm-font-body:  'DM Sans', sans-serif;
  --sm-font-mono:  'Space Mono', monospace;

  /* Letter-spacing tokens */
  --sm-ls-tight:   -0.04em;
  --sm-ls-normal:   0em;
  --sm-ls-wide:     0.18em;
  --sm-ls-wider:    0.22em;
  --sm-ls-widest:   0.32em;

  /* Line-height tokens */
  --sm-lh-hero:  0.98;
  --sm-lh-tight: 1.08;
  --sm-lh-base:  1.72;
  --sm-lh-loose: 1.80;
}

/* ═══════════════════════════════════════════════
   BASE ELEMENTS
   ═══════════════════════════════════════════════ */
body {
  font-family: var(--sm-font-body);
  color: var(--sm-ink);
  background: var(--sm-paper);
  font-size: 16px;
  line-height: var(--sm-lh-base);
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ─────────────────────────────────── */
h1, .h1 {
  font-family: var(--sm-font-body);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 700;
  line-height: var(--sm-lh-hero);
  letter-spacing: -0.055em;
}

h2, .h2 {
  font-family: var(--sm-font-body);
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 700;
  line-height: var(--sm-lh-tight);
  letter-spacing: -0.04em;
  color: var(--sm-ink);
}

h3, .h3 {
  font-family: var(--sm-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* ── Body text ────────────────────────────────── */
p {
  font-size: 16px;
  line-height: var(--sm-lh-base);
}

/* ── Links ────────────────────────────────────── */
a {
  color: var(--sm-teal-dark);
  text-decoration: none;
}
a:hover {
  color: var(--sm-teal);
}


/* ═══════════════════════════════════════════════
   TYPOGRAPHY UTILITY CLASSES
   Use these in the block editor via "Additional
   CSS class(es)" field, or inside HTML blocks.
   ═══════════════════════════════════════════════ */

/* Mono / eyebrow base */
.sm-mono {
  font-family: var(--sm-font-mono) !important;
}

/* ── Eyebrow label (Space Mono, tiny, uppercase) */
.is-style-spectramt-eyebrow,
.sm-eyebrow {
  font-family: var(--sm-font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: var(--sm-ls-wider);
  color: var(--sm-teal-dark);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

/* Hero eyebrow (slightly larger, lighter teal) */
.sm-eyebrow--hero {
  font-family: var(--sm-font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #75e7e0;
  margin-bottom: 1.5rem;
}

/* ── Mono label (stats, footer category titles) */
.is-style-spectramt-mono-label,
.sm-mono-label {
  font-family: var(--sm-font-mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: var(--sm-ls-wide);
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* ── Stat value */
.is-style-spectramt-stat-value,
.sm-stat-value {
  font-family: var(--sm-font-body) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: var(--sm-ls-tight);
  color: #ffffff;
}

/* ── Hero heading */
.is-style-spectramt-hero-heading,
.sm-hero-heading {
  font-family: var(--sm-font-body) !important;
  font-size: clamp(46px, 6vw, 78px) !important;
  font-weight: 700 !important;
  line-height: var(--sm-lh-hero) !important;
  letter-spacing: -0.055em !important;
  color: #ffffff;
}

/* ── Section heading */
.is-style-spectramt-section-heading,
.sm-section-heading {
  font-family: var(--sm-font-body) !important;
  font-size: clamp(24px, 3vw, 44px) !important;
  font-weight: 700 !important;
  line-height: var(--sm-lh-tight) !important;
  letter-spacing: -0.04em !important;
  color: var(--sm-ink);
}

/* ── Lead paragraph (hero subtitle) */
.sm-lead {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(227, 237, 239, 0.82);
}

/* ── Body large (challenge section) */
.sm-body-large {
  font-size: 17px;
  line-height: var(--sm-lh-loose);
  color: #516b78;
}

/* ── Legal / fine print */
.sm-legal {
  font-size: 12px;
  line-height: 1.65;
  color: #7a909a;
}

/* ── Partner / card label */
.sm-partner-label {
  font-family: var(--sm-font-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: var(--sm-ls-tight);
  color: #375361;
}

/* ── Badge / tag (EU, EURAMET, etc.) */
.sm-tag {
  font-family: var(--sm-font-body);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--sm-line);
  padding: 0.5rem 0.75rem;
  display: inline-block;
}

/* ── Header brand name (dark background — white + teal CT) */
.sm-brand-name {
  font-family: var(--sm-font-body);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: var(--sm-ls-tight);
  color: #ffffff;
  line-height: 1;
}
/* "CT" span inside the brand name on dark backgrounds */
.sm-brand-name .sm-ct {
  color: var(--sm-teal);
}

/* ── Header brand name — light background variant (#173142 + teal CT) */
.sm-brand-name--light {
  font-family: var(--sm-font-body);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: var(--sm-ls-tight);
  color: var(--sm-ink);
  line-height: 1;
}
.sm-brand-name--light .sm-ct {
  color: var(--sm-teal);
}

/* ── Header brand subline */
.sm-brand-subline {
  font-family: var(--sm-font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--sm-ls-widest);
  color: rgba(168, 186, 194, 1);
  margin-top: 0.25rem;
  text-align: center;
}
/* Subline on light backgrounds */
.sm-brand-subline--light {
  font-family: var(--sm-font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--sm-ls-widest);
  color: var(--sm-muted);
  margin-top: 0.25rem;
  text-align: center;
}

/* ── Footer brand (dark background — white + teal CT) */
.sm-footer-brand {
  font-family: var(--sm-font-body);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--sm-ls-tight);
  color: #ffffff;
  line-height: 1;
}
.sm-footer-brand .sm-ct {
  color: var(--sm-teal);
}

/* ── Nav links */
.is-style-spectramt-nav-link,
.sm-nav-link {
  font-family: var(--sm-font-body);
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  position: relative;
}
.sm-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--sm-teal);
  transition: width 0.25s ease;
}
.sm-nav-link:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════
   BUTTON STYLES
   ═══════════════════════════════════════════════ */

/* Primary CTA (teal) */
.wp-block-button .is-style-spectramt-cta-primary,
.wp-block-button__link.is-style-spectramt-cta-primary {
  background-color: var(--sm-teal) !important;
  color: var(--sm-navy) !important;
  font-family: var(--sm-font-body);
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: 0 !important;
  padding: 1rem 1.5rem !important;
  border: none;
  transition: background-color 0.2s ease;
}
.wp-block-button .is-style-spectramt-cta-primary:hover {
  background-color: #ffffff !important;
  color: var(--sm-navy) !important;
}

/* Ghost CTA (outline) */
.wp-block-button .is-style-spectramt-cta-ghost,
.wp-block-button__link.is-style-spectramt-cta-ghost {
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: var(--sm-font-body);
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 1rem 1.5rem !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button .is-style-spectramt-cta-ghost:hover {
  background-color: #ffffff !important;
  color: var(--sm-navy) !important;
}

/* Contact us button (header) */
.sm-btn-contact {
  font-family: var(--sm-font-body);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.75rem 1.25rem;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.sm-btn-contact:hover {
  background: #ffffff;
  color: var(--sm-navy);
}

/* ═══════════════════════════════════════════════
   SECTION BACKGROUNDS
   ═══════════════════════════════════════════════ */
.sm-bg-navy   { background-color: var(--sm-navy);  }
.sm-bg-paper  { background-color: var(--sm-paper); }
.sm-bg-mist   { background-color: var(--sm-mist);  }
.sm-bg-mist-2 { background-color: #f4f8f8; }

/* ═══════════════════════════════════════════════
   COLOUR TEXT UTILITIES
   ═══════════════════════════════════════════════ */
.sm-text-white       { color: #ffffff; }
.sm-text-teal        { color: var(--sm-teal); }
.sm-text-teal-dark   { color: var(--sm-teal-dark); }
.sm-text-muted       { color: var(--sm-muted); }
.sm-text-white-60    { color: rgba(255,255,255,0.60); }
.sm-text-white-45    { color: rgba(255,255,255,0.45); }

/* ═══════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sm-hero-heading,
  .is-style-spectramt-hero-heading {
    font-size: clamp(36px, 10vw, 46px) !important;
  }
}