/* =================================================================
   RAKENNUS VEIKKO — ETUSIVU v2
   Layout styles for the Figma "Rakennusveikko – www" onepager.

   Rules this file obeys:
   - No entrance animation. Nothing starts at opacity 0 or translated.
     Every block is fully visible in the editor and the front end.
   - No raw HTML in post content. Everything below is driven by classes
     that the editor sets through Advanced → Additional CSS class(es)
     or through the block Styles dropdown.
   - Values come from the tokens in brand.css. No new colours here.
   ================================================================= */


/* =================================================================
   1. SECTION SHELL
   ================================================================= */
.rv2-section {
  padding-block: clamp(56px, 7vw, 128px);
  padding-inline: clamp(20px, 4vw, 64px);
}

.rv2-section > .wp-block-group__inner-container,
.rv2-section > .wp-block-group {
  margin-inline: auto;
}

/* Section heading + lead. The eyebrow labels were removed in v2 —
   headings start straight away. */
.rv2-section h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0;
}

.rv2-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--stone-600);
  margin-block: var(--s-5) 0;
}

/* WordPress's constrained layout forces margin-left/right:auto — with
   !important — onto every non-aligned child, so anything narrower than the
   content track drifts to the middle.

   Pinning the lead to margin-inline:0 is NOT the fix: the section's track is
   1440px, so on a wider screen the heading itself is inset by
   (content box - 1440px) / 2, and a lead at 0 ends up left OF the heading.
   The lead has to start where the track starts, which is exactly that same
   offset — 0 once the viewport is narrower than the track.

   Nested in a column (hero, yhteys) the containing block is the column, the
   calc goes negative, max() clamps it to 0, and the lead sits flush. Same
   rule, both cases. */
.rv2-section .rv2-lead {
  max-width: 62ch;
  margin-inline: max(0px, calc((100% - 1440px) / 2)) auto !important;
}

.rv2-section--cream { background: var(--cream); }
.rv2-section--white { background: var(--white); }
.rv2-section--mesh  { background: var(--mesh-bg); }
.rv2-section--ink   { background: var(--ink-800); color: var(--white); }
.rv2-section--ink h2,
.rv2-section--ink h3 { color: var(--white); }
.rv2-section--ink p  { color: var(--stone-400); }

.rv2-section--gradient {
  background: var(--rv-grad-signature);
  color: var(--ink);
}
.rv2-section--gradient .rv2-lead,
.rv2-section--gradient p { color: var(--stone-700); }


/* =================================================================
   1b. BRAND BAND — the yellow header block from the Figma layout
   Gradient + logo (editable image block) + Veikko as a decorative
   background. The character is vector (SVG), so it stays sharp at any
   width and never needs a 2x raster.
   ================================================================= */
/* Art-directed: two crops of the same artwork, not one image stretched.

   Wide screens get the short crop (1790x517, 3.46:1) — the tall one grew to
   ~858px at 1920px wide and pushed the headline and CTA below the fold.
   Phones get the tall crop (1790x800, 2.24:1), because the short one flattens
   to ~108px there and Veikko all but disappears.

   Each rule's aspect-ratio matches its own file exactly, so `cover` never
   crops either one. */
.rv2-brandband {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1790 / 517;
  min-height: 190px;
  background: url(../images/rakennus-veikko-header-kapea.png) no-repeat center center / cover;

  /* Full-bleed grid: the middle track reproduces exactly what the sections
     below do (constrained 1440px, centred, with the section gutter as the
     minimum). The logo sits in that track, so its left edge lines up with
     every heading further down the page.

     Grid rather than `padding-inline: max(..., 50vw - 720px)` on purpose —
     100vw counts the scrollbar, which would offset the band a few pixels
     from the sections it is supposed to match. */
  display: grid;
  grid-template-columns:
    minmax(clamp(20px, 4vw, 64px), 1fr)
    minmax(0, 1440px)
    minmax(clamp(20px, 4vw, 64px), 1fr);
  align-items: center;
}

@media (max-width: 781px) {
  .rv2-brandband {
    aspect-ratio: 1790 / 800;
    background-image: url(../images/rakennus-veikko-header.png);
  }
}

/* The logo sits on the empty left half of the export. Editable image block —
   swap it from the media library without touching code. */
.rv2-brandband .wp-block-image {
  grid-column: 2;
  position: relative;
  z-index: 1;
  margin: 0;
  width: clamp(150px, 34vw, 560px);
}
.rv2-brandband .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  /* percentage now resolves against the grid track, not the whole band */
  .rv2-brandband .wp-block-image { width: 50%; }
}


/* =================================================================
   2. HERO
   ================================================================= */
.rv2-hero h1 {
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}

/* Gradient accent bar — a core Separator block with this class.
   Replaces the old background-clip:text treatment. */
.rv2-accent.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  height: 8px;
  width: min(420px, 60%);
  max-width: none;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--rv-grad-signature);
  margin: var(--s-4) 0 var(--s-6);
  opacity: 1;
}

/* Spec chip — the "Faktat" card */
.rv2-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 36px);
}
.rv2-card .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: 0;
  height: 1px;
  background: var(--stone-200);
  margin-block: var(--s-5);
  width: 100%;
  opacity: 1;
}
.rv2-fact strong {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.rv2-fact {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--stone-500);
}


/* =================================================================
   3. PALVELUT — hairline editorial rows
   ================================================================= */
.rv2-hairline.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: 0;
  height: 1px;
  background: var(--stone-200);
  width: 100%;
  max-width: none;
  margin: 0;
  opacity: 1;
}

.rv2-row {
  padding-block: var(--s-12);
  align-items: flex-start;
}
.rv2-row .rv2-num {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.028em;
  color: var(--stone-300);
  margin: 0;
}
.rv2-row h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  margin: var(--s-2) 0 0;
}
.rv2-kicker {
  margin: 0;
  font-size: var(--fs-overline);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--stone-500);
}
.rv2-row p:not(.rv2-kicker):not(.rv2-num) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--stone-600);
  margin: 0;
}


/* =================================================================
   4. LUPAUKSET — columns split by vertical hairlines
   ================================================================= */
.rv2-promises .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--hairline-on-ink);
  padding-left: clamp(24px, 3.5vw, 56px);
}
.rv2-promises .wp-block-column:not(:last-child) {
  padding-right: clamp(24px, 3.5vw, 56px);
}
.rv2-promises .rv2-num { color: var(--yellow); }
.rv2-promises h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--s-4) 0 var(--s-4);
}


/* =================================================================
   5. PROSESSI — numbered badges on a hairline rail
   ================================================================= */
.rv2-step { position: relative; }

.rv2-step .rv2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--rv-grad-button-primary);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1;
  margin: 0;
}

/* the rail continuing to the right of each badge */
.rv2-step .rv2-badge::after {
  content: "";
  position: absolute;
  left: 84px;
  right: 0;
  top: 32px;
  height: 2px;
  background: var(--stone-300);
}

.rv2-step h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--s-5) 0 var(--s-4);
}


/* =================================================================
   6. ASIAKKAAT — asymmetric testimonials
   ================================================================= */
.rv2-quote {
  background: var(--cream);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 56px);
}
.rv2-quote p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rv2-quote--plain {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.rv2-quote--plain p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--stone-700);
  letter-spacing: 0;
}
.rv2-cite {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--stone-500);
  margin: var(--s-4) 0 0;
}

/* Five-star rating drawn from the theme's own star.svg — no markup,
   no emoji, colour follows currentColor. */
.wp-block-separator.rv2-rating:not(.is-style-wide):not(.is-style-dots) {
  display: block;
  border: 0;
  width: 136px;
  max-width: none;
  height: 24px;
  margin: 0 0 var(--s-5);
  background: var(--orange);
  opacity: 1;
  font-size: 0;
  -webkit-mask-image: url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg);
  mask-image: url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg), url(../icons/star.svg);
  -webkit-mask-position: 0 0, 28px 0, 56px 0, 84px 0, 112px 0;
  mask-position: 0 0, 28px 0, 56px 0, 84px 0, 112px 0;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Same centring trap as .rv2-lead, different track. The quote card is a
   constrained group with no contentSize of its own, so it inherits
   theme.json's 720px — near enough the card's own width that its children
   were sometimes centred, sometimes not, depending on viewport. Widening the
   track to the card removes the ambiguity: every child now fills, auto
   margins resolve to 0, and the star strip lines up with the quote text. */
.rv2-quote {
  --wp--style--global--content-size: 100%;
}
.rv2-quote .wp-block-separator.rv2-rating,
.rv2-hero .wp-block-separator.rv2-accent {
  margin-inline: 0 auto !important;
}

.wp-block-separator.rv2-rating--sm:not(.is-style-wide):not(.is-style-dots) {
  width: 96px; height: 16px;
  -webkit-mask-position: 0 0, 20px 0, 40px 0, 60px 0, 80px 0;
  mask-position: 0 0, 20px 0, 40px 0, 60px 0, 80px 0;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
}


/* =================================================================
   7. YHTEYS — contact list + form card
   ================================================================= */
.rv2-contact-list .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: 0;
  height: 1px;
  background: rgba(10, 9, 8, 0.14);
  width: 100%;
  max-width: none;
  margin: 0;
  opacity: 1;
}
.rv2-contact-item {
  margin: 0;
  padding-block: var(--s-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--stone-700);
}
.rv2-contact-item strong {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.rv2-formcard {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3.2vw, 48px);
}
.rv2-formcard h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 var(--s-5);
}
/* CF7 inside the card fills the width */
.rv2-formcard .wpcf7-form-control-wrap { display: block; }
.rv2-formcard .wpcf7-submit { width: 100%; justify-content: center; }
.rv2-formnote {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--stone-500);
  margin: var(--s-4) 0 0;
}


/* =================================================================
   7b. FOOTER v2 — dark four-column + legal bar
   Shipped as a pattern so it can be dropped into the footer template
   part whenever you're ready. Nothing references it until you do.
   ================================================================= */
/* WordPress puts a default block-gap margin between the top-level blocks of a
   template — header part, main, footer part. styles.color.background in
   theme.json is cream (#FDFBF7), so that gap shows up as a pale stripe right
   above the footer. Every section here carries its own padding, so the gap
   at template level has nothing to contribute and is removed. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.rv2-footer {
  background: var(--ink);
  color: var(--stone-300);
  margin: 0;
  padding-block: clamp(56px, 6vw, 96px) clamp(28px, 3vw, 48px);
  padding-inline: clamp(20px, 4vw, 64px);
}
.rv2-footer a { color: var(--stone-300); text-decoration: none; }
.rv2-footer a:hover { color: var(--yellow); }

.rv2-footer-brand {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 var(--s-4);
}
.rv2-footer p {
  color: var(--stone-400);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.rv2-footer-title {
  font-size: var(--fs-overline);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--yellow);
  margin: 0 0 var(--s-5);
}
.rv2-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rv2-footer-list li {
  margin-bottom: var(--s-3);
  color: var(--stone-300);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.rv2-footer-rule.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: 0;
  height: 1px;
  width: 100%;
  max-width: none;
  background: var(--hairline-on-ink);
  margin: clamp(32px, 4vw, 64px) 0 var(--s-6);
  opacity: 1;
}
.rv2-footer-legal p {
  color: var(--stone-500);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  margin: 0;
}
.rv2-footer [class*="is-style-rv-icon-"]::before { background: var(--yellow); }

@media (max-width: 781px) {
  .rv2-footer-cols .wp-block-column + .wp-block-column { margin-top: var(--s-10); }
}


/* =================================================================
   8. ICONS — block styles, CSS mask, zero markup in content
   Registered in functions.php as core/paragraph + core/group styles.
   ================================================================= */
[class*="is-style-rv-icon-"] {
  position: relative;
  padding-left: 40px;
}
[class*="is-style-rv-icon-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--rv-icon) no-repeat center / contain;
  mask: var(--rv-icon) no-repeat center / contain;
}

.is-style-rv-icon-phone         { --rv-icon: url(../icons/phone.svg); }
.is-style-rv-icon-mail          { --rv-icon: url(../icons/mail.svg); }
.is-style-rv-icon-map-pin       { --rv-icon: url(../icons/map-pin.svg); }
.is-style-rv-icon-check         { --rv-icon: url(../icons/check.svg); }
.is-style-rv-icon-shield        { --rv-icon: url(../icons/shield.svg); }
.is-style-rv-icon-hammer        { --rv-icon: url(../icons/hammer.svg); }
.is-style-rv-icon-star          { --rv-icon: url(../icons/star.svg); }
.is-style-rv-icon-calendar      { --rv-icon: url(../icons/calendar.svg); }
.is-style-rv-icon-arrow-right   { --rv-icon: url(../icons/arrow-right.svg); }
.is-style-rv-icon-chevron-down  { --rv-icon: url(../icons/chevron-down.svg); }

/* icon colour follows the surrounding text; override per context */
.rv2-section--ink [class*="is-style-rv-icon-"]::before { background: var(--yellow); }
.rv2-contact-item::before { top: 0.55em; }


/* =================================================================
   9. STICKY NAV — hides on scroll down, returns on scroll up
   ================================================================= */
/* position/sticky/background/backdrop-filter already come from patterns.css
   (the Site Editor "rv-nav-*" header). Only the hide-on-scroll behaviour is
   added here — nothing above is redeclared. */
.rv-nav {
  transition: transform var(--t-med) var(--rv-ease),
              box-shadow var(--t-fast) var(--rv-ease),
              background-color var(--t-med) var(--rv-ease);
}

/* -----------------------------------------------------------------
   Overlay mode — only on pages using the Etusivu v2 template.
   The body class is added by rv_body_classes() in functions.php, so
   every other page keeps the normal opaque sticky bar.

   The bar is HIDDEN while the page sits at the top. There is no
   transparent-over-the-hero state at all any more: a blurred bar sitting on
   the artwork softened Veikko's face on phones, and the earlier tinted
   version read as a white stripe. The brand band is the identity up there;
   the bar only earns its place once you scroll back up.

   Because it is never shown over the band, its logo is simply always
   visible — no fade, so it can't appear to "pop in" on the way back up.
   ----------------------------------------------------------------- */
.rv-overlay-nav .rv-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(253, 251, 247, 0.85);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: var(--shadow-md);
  border-bottom: 0;
}

/* interactions.js is enqueued in the footer, so without this the bar would
   render over the hero for a frame or two on every load. */
.rv-overlay-nav .rv-nav:not(.is-ready) { transform: translateY(-100%); }

/* ...but never strand a no-JS visitor without navigation */
@media (scripting: none) {
  .rv-overlay-nav .rv-nav:not(.is-ready) { transform: none; }
}

/* the band starts at y=0; nothing must push it down */
.rv-overlay-nav .rv2-brandband { margin-top: 0; }

/* -----------------------------------------------------------------
   Mobile bar: keep the CTA whole.
   patterns.css only sets padding-inline on .rv-nav from 768px up, and
   .rv-nav-inner has none, so below that the row ran edge to edge and the
   button was the thing that got clipped off the right. Gutters restored,
   and everything in the right-hand cluster is pinned against shrinking.
   ----------------------------------------------------------------- */
@media (max-width: 781px) {
  .rv-nav { padding-inline: 16px; }
  .rv-nav-inner { gap: 12px; min-width: 0; }

  .rv-nav-logo img,
  .rv-nav-logo .custom-logo { max-height: 36px; }

  /* the hamburger may shrink; the CTA may not */
  .rv-nav-menu,
  .rv-nav .wp-block-navigation { min-width: 0; flex-shrink: 1; }

  .rv-nav-cta { gap: 12px; flex-shrink: 0; }
  .rv-nav-cta .wp-block-buttons,
  .rv-nav-cta .wp-block-button { flex-shrink: 0; }
  .rv-nav-cta .wp-block-button__link {
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* On the narrowest phones logo + hamburger + number + button cannot all
     fit without something being cut. The number steps aside — it is still
     one tap away in the hero, the contact section and the footer, whereas
     the CTA has nowhere else to go in the bar. */
  .rv-nav-cta p { display: none; }
  .rv-nav-logo img,
  .rv-nav-logo .custom-logo { max-height: 32px; }
  .rv-nav-cta .wp-block-button__link { padding: 11px 14px; }
}
.rv-nav.is-scrolled { box-shadow: var(--shadow-md); }
.rv-nav.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* anchors must not land underneath the bar */
:target,
[id^="palvelut"], [id^="lupaukset"], [id^="prosessi"],
[id^="asiakkaat"], [id^="yhteys"] {
  scroll-margin-top: 96px;
}


/* =================================================================
   10. RESPONSIVE
   Gutenberg stacks columns at 781px on its own; these rules keep the
   custom ornaments (rails, dividers, cards) correct at every width.
   ================================================================= */
@media (max-width: 1200px) {
  .rv2-step .rv2-badge::after { left: 76px; }
}

@media (max-width: 900px) {
  .rv2-rating { margin-bottom: var(--s-4); }
  .rv2-card { padding: var(--s-6); }
}

@media (max-width: 781px) {
  /* stacked columns: vertical dividers become horizontal ones */
  .rv2-promises .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--hairline-on-ink);
    padding-left: 0;
    padding-top: var(--s-8);
    margin-top: var(--s-8);
  }
  .rv2-promises .wp-block-column:not(:last-child) { padding-right: 0; }

  /* the stepper rail is meaningless once stacked */
  .rv2-step .rv2-badge::after { display: none; }
  .rv2-step + .rv2-step { margin-top: var(--s-10); }

  .rv2-row { padding-block: var(--s-8); }
  .rv2-row .rv2-num { font-size: var(--fs-h3); }
  .rv2-row h3 { margin-top: var(--s-1); }

  .rv2-accent.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: min(260px, 70%); height: 6px; }

  .rv2-quote p { font-size: var(--fs-h4); line-height: var(--lh-h4); }

  .rv-nav { position: sticky; }
}

@media (max-width: 600px) {
  .rv2-section { padding-inline: 20px; }
  .rv2-contact-item strong { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  [class*="is-style-rv-icon-"] { padding-left: 34px; }
  [class*="is-style-rv-icon-"]::before { width: 20px; height: 20px; }
}

/* Motion preference: the sticky bar simply stays put. */
@media (prefers-reduced-motion: reduce) {
  .rv-nav { transition: none; }
  .rv-nav.is-hidden { transform: none; pointer-events: auto; }
}


/* =================================================================
   11. EDITOR PARITY
   The editor canvas has no <body> background and no alignfull wrapper,
   so section backgrounds need re-asserting there.
   ================================================================= */
.editor-styles-wrapper .rv2-section {
  border-radius: 0;
}
.editor-styles-wrapper .rv2-section--ink { color: var(--white); }
.editor-styles-wrapper .rv2-section--ink h2,
.editor-styles-wrapper .rv2-section--ink h3 { color: var(--white); }