/* =================================================================
   Rakennus Veikko — brand.css (v4 / tokens-v2)
   Single source of brand-level styling. Mirrors brandi-ohjeisto-4.html.
   ================================================================= */

:root {
  /* Brand */
  --yellow: #FADC57;
  --orange: #ECA342;
  --red: #D32F2F;
  --red-deep: #9A1B1B;

  /* Ink + neutrals (warm) */
  --ink: #0A0908;
  --ink-800: #1A1815;
  --stone-700: #2E2A24;
  --stone-600: #4D473E;
  --stone-500: #736D5F;
  --stone-400: #A8A193;
  --stone-300: #D4CFC0;
  --stone-200: #E8E5DC;
  --stone-100: #F5F3EE;
  --cream: #FDFBF7;
  --white: #FFFFFF;
  --mesh-bg: #FAF8F2;

  /* Blob ornament fills */
  --blob-yellow: rgba(250,220,87,.45);
  --blob-orange: rgba(236,163,66,.40);
  --blob-peach:  rgba(255,220,160,.35);

  /* Gridlines */
  --gridline-soft:    rgba(10,9,8,.025);
  --gridline-medium:  rgba(10,9,8,.05);
  --gridline-strong:  rgba(10,9,8,.08);
  --hairline-on-ink:  rgba(255,255,255,.08);

  /* Spacing scale (4px base) */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Border widths */
  --bw-hairline: 1px; --bw-regular: 1.5px; --bw-thick: 2px;

  /* Shadows — cream-tinted */
  --shadow-ink: 10, 9, 8;
  --shadow-xs:    0 1px 2px rgba(var(--shadow-ink),.04);
  --shadow-sm:    0 1px 2px rgba(var(--shadow-ink),.06), 0 1px 1px rgba(var(--shadow-ink),.04);
  --shadow-md:    0 4px 12px rgba(var(--shadow-ink),.08), 0 2px 4px rgba(var(--shadow-ink),.04);
  --shadow-lg:    0 16px 40px rgba(var(--shadow-ink),.12), 0 4px 8px rgba(var(--shadow-ink),.06);
  --shadow-diffuse: 0 24px 60px rgba(var(--shadow-ink),.10), 0 8px 16px rgba(var(--shadow-ink),.05);
  --shadow-brand: 0 10px 24px rgba(236,163,66,.28), 0 2px 6px rgba(250,220,87,.25);

  /* Signature gradients */
  --rv-grad-signature: linear-gradient(110deg, #FADC57 0%, #ECA342 100%);
  --rv-grad-sun: linear-gradient(110deg, #FFE58A 0%, #FADC57 45%, #ECA342 100%);

  /* Material button gradients */
  --rv-grad-button-primary:     linear-gradient(180deg, #FCDF61 0%, #ECA342 100%);
  --rv-grad-button-primary-h:   linear-gradient(180deg, #FFE782 0%, #F0AC4A 100%);
  --rv-grad-button-secondary:   linear-gradient(180deg, #1A1815 0%, #0A0908 100%);
  --rv-grad-button-secondary-h: linear-gradient(180deg, #2E2A24 0%, #1A1815 100%);
  --rv-grad-button-danger:      linear-gradient(180deg, #E55454 0%, #B82828 100%);
  --rv-grad-button-danger-h:    linear-gradient(180deg, #ED6464 0%, #C72C2C 100%);

  --btn-underbar-rest: 3px;
  --btn-underbar-active: 5px;
  --btn-underbar-press: 1px;

  /* Opacity */
  --opacity-disabled: .45; --opacity-muted: .60; --opacity-subtle: .80;

  /* Type */
  --font-sans: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;
  --fs-display: 72px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-overline: 12px;
  --lh-display: 76px; --lh-h1: 52px; --lh-h2: 44px; --lh-h3: 32px; --lh-h4: 28px;
  --lh-body-lg: 28px; --lh-body: 24px; --lh-body-sm: 20px; --lh-caption: 16px;
  --ls-display: -0.035em; --ls-tight: -0.028em; --ls-snug: -0.02em;
  --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.14em; --ls-eyebrow: 0.12em;

  /* Motion */
  --rv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .2s; --t-med: .32s; --t-slow: .48s;
}

/* =================================================================
   BASE
   ================================================================= */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11","ss01","ss03";
  color: var(--stone-700);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

img { max-width: 100%; display: block; height: auto; }
::selection { background: var(--yellow); color: var(--ink); }

/* Skip link */
.skip-link, .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; top: var(--s-3); left: var(--s-3);
  width: auto; height: auto; clip: auto;
  z-index: 9999;
  background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  outline: 2px solid var(--yellow); outline-offset: 2px;
}

/* Focus rings */
:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* =================================================================
   TYPE
   ================================================================= */
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-family: var(--font-sans); }

h1 {
  font-weight: var(--fw-extrabold);
  font-size: clamp(36px, 5vw, var(--fs-h1));
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
h2 {
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.6vw, var(--fs-h2));
  line-height: 1.18;
  letter-spacing: var(--ls-snug);
}
h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-snug);
}
h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

p {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--stone-600);
  max-width: 65ch;
  text-wrap: pretty;
}

/* =================================================================
   EYEBROW
   ================================================================= */
.rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--stone-500);
  margin: 0 0 var(--s-4);
}
.rv-eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--stone-400);
  flex: 0 0 24px;
}
.rv-eyebrow--accent::after {
  content: "";
  display: inline-block;
  width: 32px; height: 2px;
  margin-left: var(--s-2);
  background: var(--rv-grad-signature);
  border-radius: 1px;
  flex: 0 0 32px;
}

/* Accent underline — replaces gradient-text on headlines. */
.rv-accent-underline {
  position: relative;
  display: inline;
  background-image: var(--rv-grad-signature);
  background-repeat: no-repeat;
  background-size: 100% 12px;
  background-position: 0 92%;
  padding: 0 .04em;
}

/* Label-caps for trust strip captions, attribution */
.rv-label-caps {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--stone-500);
}

/* =================================================================
   BUTTON MATERIAL SYSTEM (Gutenberg block-style hooks)
   ================================================================= */
.wp-block-button .wp-block-button__link.wp-element-button {
  --btn-underbar: var(--btn-underbar-rest);
  --btn-underbar-color: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-sm);
  letter-spacing: 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 calc(var(--btn-underbar) * -1) 0 0 var(--btn-underbar-color);
  transition:
    box-shadow var(--t-fast) var(--rv-ease),
    background var(--t-fast) var(--rv-ease),
    color var(--t-fast) var(--rv-ease),
    border-color var(--t-fast) var(--rv-ease),
    transform var(--t-fast) var(--rv-ease),
    opacity var(--t-fast) var(--rv-ease);
}
.wp-block-button .wp-block-button__link.wp-element-button:hover { --btn-underbar: var(--btn-underbar-active); }
.wp-block-button .wp-block-button__link.wp-element-button:active { --btn-underbar: var(--btn-underbar-press); transform: translateY(1px); }
.wp-block-button .wp-block-button__link.wp-element-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wp-block-button .wp-block-button__link.wp-element-button:disabled,
.wp-block-button.is-disabled .wp-block-button__link.wp-element-button {
  --btn-underbar: 1px;
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Primary */
.wp-block-button.is-style-rv-primary .wp-block-button__link.wp-element-button {
  background: var(--rv-grad-button-primary);
  color: var(--ink);
  border-color: rgba(var(--shadow-ink), .12);
  --btn-underbar-color: var(--ink);
}
.wp-block-button.is-style-rv-primary .wp-block-button__link.wp-element-button:hover {
  background: var(--rv-grad-button-primary-h);
}

/* Ink (secondary) */
.wp-block-button.is-style-rv-ink .wp-block-button__link.wp-element-button {
  background: var(--rv-grad-button-secondary);
  color: var(--white);
  border-color: var(--ink);
  --btn-underbar-color: var(--yellow);
}
.wp-block-button.is-style-rv-ink .wp-block-button__link.wp-element-button:hover {
  background: var(--rv-grad-button-secondary-h);
}

/* Outline */
.wp-block-button.is-style-rv-outline .wp-block-button__link.wp-element-button {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--ink);
  border-width: var(--bw-regular);
  --btn-underbar-color: var(--stone-300);
}
.wp-block-button.is-style-rv-outline .wp-block-button__link.wp-element-button:hover {
  --btn-underbar-color: var(--ink);
}

/* Ghost */
.wp-block-button.is-style-rv-ghost .wp-block-button__link.wp-element-button {
  --btn-underbar: 0;
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  --btn-underbar-color: var(--ink);
}
.wp-block-button.is-style-rv-ghost .wp-block-button__link.wp-element-button:hover { --btn-underbar: var(--btn-underbar-rest); }
.wp-block-button.is-style-rv-ghost .wp-block-button__link.wp-element-button:active { --btn-underbar: var(--btn-underbar-press); }

/* =================================================================
   FORM CONTROLS
   ================================================================= */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], select, textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: border-color var(--t-fast) var(--rv-ease), box-shadow var(--t-fast) var(--rv-ease);
}
input::placeholder, textarea::placeholder { color: var(--stone-400); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
textarea { min-height: 120px; resize: vertical; }
label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

/* =================================================================
   REVEAL CASCADE
   ================================================================= */
/* Frontend: .js class is added by interactions.js on first run.
   Without .js (editor, no-script, or before JS loads), content stays visible. */
html.js .rv-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--rv-ease), transform var(--t-slow) var(--rv-ease); }
html.js .rv-reveal.is-in { opacity: 1; transform: none; }
html.js .rv-reveal > * { transition-delay: calc(var(--index, 0) * 80ms); }
/* Block editor: WordPress never adds .js to <html>, so reveal blocks render fully visible. */
.editor-styles-wrapper .rv-reveal { opacity: 1; transform: none; }

/* =================================================================
   SECTION RHYTHM
   ================================================================= */
.rv-section {
  padding: var(--s-20) var(--s-6);
  position: relative;
}
@media (min-width: 768px) {
  .rv-section { padding: var(--s-24) var(--s-10); }
}
.rv-section + .rv-section { border-top: 1px solid var(--stone-200); }

.rv-container { max-width: 1280px; margin: 0 auto; }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rv-reveal { opacity: 1; transform: none; }
}