/*
Theme Name: TunHûs Block Theme
Theme URI: https://tunhus.com/
Author: TunHûs
Description: Onderhoudbare block theme voor TunHûs: extra woonruimte op eigen grond, helder geregeld.
Version: 1.1.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: tunhus
*/

:root {
  --tunhus-orange:#D84D14;
  --tunhus-sand:#CCB067;
  --tunhus-khaki:#4E401C;
  --tunhus-apricot:#FFEAC0;
  --tunhus-coffee:#2C1912;
  --tunhus-bg:#F8F6F1;
  --tunhus-line:#E4DDD2;
}

html { scroll-behavior: smooth; }
body { background: var(--tunhus-bg); color: var(--tunhus-coffee); }
a { text-underline-offset: .18em; }
.wp-site-blocks { overflow-x: hidden; background: var(--tunhus-bg); }
.wp-block-site-title a { text-decoration: none; }

.tunhus-shell { max-width: 1440px; margin: 0 auto; background: var(--tunhus-bg); }
.tunhus-section { border-top: 1px solid var(--tunhus-line); }
.tunhus-grid-line > * { border-left: 1px solid var(--tunhus-line); }
.tunhus-grid-line > *:first-child { border-left: 0; }
.tunhus-eyebrow { color: var(--tunhus-orange); font-size: 13px; letter-spacing: .04em; font-weight: 700; }
.tunhus-card { border: 1px solid var(--tunhus-line); background: rgba(255,255,255,.42); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tunhus-card:hover { transform: translateY(-2px); border-color: rgba(216,77,20,.35); box-shadow: 0 18px 45px rgba(44,25,18,.08); }
.tunhus-model-price { color: var(--tunhus-orange); font-weight: 700; }
.tunhus-muted { opacity: .72; }

.tunhus-hero {
  min-height: 500px;
  background:
    linear-gradient(90deg, rgba(248,246,241,1) 0%, rgba(248,246,241,.96) 31%, rgba(248,246,241,.62) 47%, rgba(248,246,241,.05) 64%),
    linear-gradient(135deg, rgba(78,64,28,.12), rgba(216,77,20,.06)),
    radial-gradient(circle at 78% 23%, rgba(255,234,192,.42), transparent 24%),
    linear-gradient(155deg, transparent 0 44%, rgba(78,64,28,.18) 44% 45%, transparent 45% 100%);
  position: relative;
}
.tunhus-hero::after {
  content:"";
  position:absolute;
  right:7%; top:18%; bottom:12%; width:43%;
  border:1px solid rgba(44,25,18,.18);
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(78,64,28,.16) 0 20%, rgba(78,64,28,.03) 20% 100%),
    repeating-linear-gradient(90deg, rgba(44,25,18,.16) 0 2px, transparent 2px 34px),
    linear-gradient(90deg, rgba(204,176,103,.22), rgba(255,255,255,.3));
  box-shadow: 0 30px 80px rgba(44,25,18,.12);
}
.tunhus-hero::before {
  content:"";
  position:absolute;
  right:4%; bottom:8%; width:48%; height:18%;
  background: radial-gradient(ellipse at center, rgba(78,64,28,.18), transparent 68%);
  filter: blur(8px);
}
.tunhus-hero-content { position: relative; z-index: 1; max-width: 610px; }
.tunhus-hero h1 { letter-spacing: -.045em; }

.tunhus-icon { width: 34px; height: 34px; color: #75634b; margin-bottom: 18px; }
.tunhus-mini-card { min-height: 132px; }
.tunhus-plan {
  aspect-ratio: 1.25 / 1;
  border: 1px solid var(--tunhus-line);
  background:
    linear-gradient(90deg, transparent 48%, rgba(44,25,18,.16) 48% 50%, transparent 50%),
    linear-gradient(0deg, transparent 52%, rgba(44,25,18,.12) 52% 54%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(44,25,18,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(44,25,18,.08) 0 1px, transparent 1px 30px),
    #F3EFE7;
}
.tunhus-plan-wide { aspect-ratio: 1.8 / 1; }
.tunhus-step-num { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; line-height: 1; }
.tunhus-payment { border-top: 1px solid var(--tunhus-line); border-bottom: 1px solid var(--tunhus-line); }
.tunhus-kit-box {
  min-height: 190px;
  background:
    radial-gradient(circle at 65% 46%, rgba(216,77,20,.12), transparent 18%),
    linear-gradient(135deg, #3d3627 0 34%, #6e5b35 34% 35%, #d9c69d 35% 66%, #f5efe4 66% 100%);
  border: 1px solid var(--tunhus-line);
}
.tunhus-partner-tile { border:1px solid var(--tunhus-line); min-height:86px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; }

@media (max-width: 900px) {
  .tunhus-hero { min-height: auto; }
  .tunhus-hero::before, .tunhus-hero::after { display:none; }
  .tunhus-grid-line > * { border-left:0; border-top:1px solid var(--tunhus-line); }
  .tunhus-grid-line > *:first-child { border-top:0; }
}

/* Responsive hardening */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.wp-site-blocks, body { max-width: 100vw; overflow-x: hidden; }
.tunhus-shell { width: 100%; max-width: 1440px; }
.tunhus-shell > .wp-block-group__inner-container,
.tunhus-shell > .wp-block-columns,
.tunhus-shell > .wp-block-group { max-width: 1280px; margin-left: auto; margin-right: auto; }
.wp-block-columns { gap: clamp(18px, 2.2vw, 34px); }
.wp-block-column { min-width: 0; }
.wp-block-navigation { gap: 18px; }
.wp-block-navigation__container { gap: 18px; align-items: center; }
.tunhus-nav-cta a { border: 1px solid currentColor; border-radius: 3px; padding: 8px 12px; }

/* Make the wireframe-style sections behave like grids instead of fragile equal columns. */
.tunhus-grid-line.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}
.tunhus-grid-line.wp-block-columns > .wp-block-column {
  width: auto !important;
  flex-basis: auto !important;
  padding: clamp(18px, 2vw, 28px);
}
.tunhus-grid-line.wp-block-columns > .wp-block-column:first-child {
  padding-left: 0;
}
.tunhus-grid-line.wp-block-columns > .wp-block-column:last-child {
  padding-right: 0;
}

/* Model cards: equal and readable on desktop, stacked cleanly on smaller screens. */
.tunhus-section .wp-block-columns.alignwide:not(.tunhus-grid-line):has(.tunhus-card) {
  display: grid !important;
  grid-template-columns: minmax(180px, .7fr) repeat(3, minmax(220px, 1fr));
  align-items: stretch;
}
.tunhus-card { height: 100%; }
.tunhus-card .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(84px, 38%) 1fr;
  align-items: center;
  gap: 16px;
}
.tunhus-card .wp-block-column { width: auto !important; flex-basis: auto !important; }

/* Partner/configuration block should not squeeze into unreadable columns. */
.tunhus-kit-box { width: 100%; }
.tunhus-partner-tile { margin: 0 0 12px 0; }

@media (min-width: 1200px) {
  .tunhus-hero-content { margin-left: 0; }
  .tunhus-shell { border-left: 1px solid rgba(228,221,210,.7); border-right: 1px solid rgba(228,221,210,.7); }
}

@media (max-width: 1180px) {
  .tunhus-section .wp-block-columns.alignwide:not(.tunhus-grid-line):has(.tunhus-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tunhus-section .wp-block-columns.alignwide:not(.tunhus-grid-line):has(.tunhus-card) > .wp-block-column:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .tunhus-shell {
    max-width: 100%;
    border-left: 0;
    border-right: 0;
  }
  .tunhus-shell[style] {
    padding-left: clamp(18px, 5vw, 28px) !important;
    padding-right: clamp(18px, 5vw, 28px) !important;
  }
  .tunhus-hero {
    padding-top: 56px !important;
    padding-bottom: 52px !important;
  }
  .tunhus-hero h1 { font-size: clamp(42px, 13vw, 64px) !important; }
  .wp-block-navigation__responsive-container-open { display: flex; }
  .tunhus-grid-line.wp-block-columns {
    grid-template-columns: 1fr;
  }
  .tunhus-grid-line.wp-block-columns > .wp-block-column {
    padding: 22px 0;
    border-left: 0 !important;
    border-top: 1px solid var(--tunhus-line);
  }
  .tunhus-grid-line.wp-block-columns > .wp-block-column:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .tunhus-section .wp-block-columns.alignwide:not(.tunhus-grid-line):has(.tunhus-card) {
    grid-template-columns: 1fr;
  }
  .tunhus-card .wp-block-columns {
    grid-template-columns: minmax(96px, 34%) 1fr;
  }
  .tunhus-payment.wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .tunhus-payment > .wp-block-column {
    width: auto !important;
    flex-basis: auto !important;
    padding: 12px 0;
  }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .tunhus-shell[style] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .wp-block-site-title { font-size: 31px !important; }
  .tunhus-hero h1 { font-size: clamp(38px, 14vw, 54px) !important; line-height: 1 !important; }
  .tunhus-hero p { font-size: 16px !important; }
  .wp-block-buttons { width: 100%; }
  .wp-block-button, .wp-block-button__link { width: 100%; text-align: center; }
  .tunhus-card .wp-block-columns {
    grid-template-columns: 1fr;
  }
  .tunhus-plan, .tunhus-plan-wide {
    aspect-ratio: 1.7 / 1;
  }
  .tunhus-payment.wp-block-columns {
    grid-template-columns: 1fr;
  }
  .wp-block-columns.is-not-stacked-on-mobile {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}