/*
Theme Name: Mobiele Houtzagerij Braakman
Theme URI: https://prikr.io
Author: prikr
Author URI: https://prikr.io
Description: Fundament child theme for mobielehoutzagerijbraakman.nl — Figma-specific overrides.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: fundament
Text Domain: mobiele-houtzagerij-braakman
*/

/* ─────────────────────────────────────────────────────────────
 * Brand-derived CSS custom properties.
 * hero-one overlay uses the site's dark-muted colour instead of gray.
 * ───────────────────────────────────────────────────────────── */
:root {
  --hero-one-overlay-from: rgb(var(--bg-surface-dark-muted) / 0.9);
  --hero-one-overlay-to:   rgb(var(--bg-surface-dark-muted) / 0.2);
}

/* ─────────────────────────────────────────────────────────────
 * Block-level overrides — Figma design system alignment.
 * Braakman is a square brand: buttonRadius = 16, cardRadius = 0.
 * ───────────────────────────────────────────────────────────── */

/* hero-two — image-right variant gets asymmetric padding per Figma */
@media (min-width: 768px) {
  .wp-block-fundament-hero-two .fundament-card.md\:flex-row-reverse {
    padding: 48px 48px 48px 80px !important;
  }
}

/* archive-cards — square/rounded arrow avatar per btn-radius (16px on Braakman) */
.wp-block-fundament-archive-cards .archive-cards__arrow {
  border-radius: var(--btn-radius, 9999px) !important;
}

/* values — no border on value cards per Figma */
.wp-block-fundament-values .fundament-card {
  border: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
 * Brand-specific typography tweaks
 * ───────────────────────────────────────────────────────────── */

/* Logo — 5rem (80px) max-height op braakman header/footer. Parent rendert
   op h-14 (56px); deze override tilt naar 80px. Geen width/height auto
   omdat dat SVG's 0×0 maakte — alleen max-height. */
.fd-logo img {
  max-height: 5rem !important;
}

/* Menu pill — braakman brand: 28px gap tussen items desktop.
   (24px outer-padding zit vanaf v1.8.34 in de parent theme; item-padding zetten
    we hier op 0 zodat de gap-only spacing pattern werkt.) */
@media (min-width: 1024px) {
  .fd-nav__pill {
    gap: 28px !important;
  }
  .fd-nav__pill > div > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Buttons — bold label text.
   Parent theme .btn hardcodes font-weight: 500. Braakman = 700 (New Science Bold).
   NOTE: don't override .btn padding — parent uses flex layout with arrow slots +
   .btn__text internal padding for spacing. Overriding breaks text↔arrow gap. */
.fd-btn,
.fd-btn .btn__text {
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────
 * UPPERCASE headings across all Fundament blocks per Figma.
 * Braakman brand: New Science Bold in ALL CAPS at every hierarchy level.
 * Attribute-selector targets any .wp-block-fundament-<name> wrapper.
 * ───────────────────────────────────────────────────────────── */
[class^="wp-block-fundament-"] h1,
[class*=" wp-block-fundament-"] h1,
[class^="wp-block-fundament-"] h2,
[class*=" wp-block-fundament-"] h2,
[class^="wp-block-fundament-"] h3,
[class*=" wp-block-fundament-"] h3,
[class^="wp-block-fundament-"] h4,
[class*=" wp-block-fundament-"] h4,
[class^="wp-block-fundament-"] h5,
[class*=" wp-block-fundament-"] h5 {
  text-transform: uppercase !important;
}

/* FAQ questions + approach step titles use <span>, not <h*> — uppercase them too. */
.wp-block-fundament-faq [data-faq-toggle] span,
.wp-block-fundament-approach [data-approach-toggle] span {
  text-transform: uppercase !important;
}

/* Arrow tiles: force 56×56 fixed (Figma icon-primary size) on slider nav + card arrows.
   Parent .btn-arrow can vary — pin to spec. */
.wp-block-fundament-service-cards .btn-arrow,
.wp-block-fundament-archive-cards .archive-cards__arrow,
.wp-block-fundament-image-slider .btn-arrow {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
}

/* H5 = 20px on desktop per Figma. Parent uses text-xl (24px) on 7 blocks;
   override here so braakman matches its design system without regressing
   approved Fundament sites. */
@media (min-width: 768px) {
  .wp-block-fundament-values h5,
  .wp-block-fundament-service-cards h5,
  .wp-block-fundament-contact-one h5,
  .wp-block-fundament-contact-two h5,
  .wp-block-fundament-team h5,
  .wp-block-fundament-archive-cards h3,
  .wp-block-fundament-approach [data-approach-toggle] span {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}