/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/
/* ==========================================================================
   Globale Marchhart-Designtokens (netzwerkweit, alle 4 Sites), aus
   docs/design-system.md. Dieselben Werte wie unten in .mh-home, hier auf
   :root gehoben, damit auch Komponenten außerhalb der Homepage (z. B. der
   Netzwerk-Switcher im Header) darauf zugreifen können.
   ========================================================================== */
:root {
  --mh-primary: #51778f;
  --mh-primary-dark: #3c3e40;
  --mh-text: #3c3e40;
  --mh-bg-alt: #f4f5f6;
  --mh-border: #a1afba;
  --mh-lab: #d58b52;
  --mh-air: #66a0c8;
  --mh-office: #929b86;
  --mh-radius: 4px;
  --mh-focus-ring: 0 0 0 2px #fff, 0 0 0 4px #51778f;
}

/* ==========================================================================
   Marchhart Homepage – Richtung C2 (Cinematic)
   Namespaced unter .mh-home, um Kollisionen mit Woodmart/Bootstrap-Klassen
   (u.a. .container, .btn) zu vermeiden. Quelle: docs/design-system.md
   ========================================================================== */

.mh-home {
  --mh-primary: #51778f;
  --mh-primary-dark: #3c3e40;
  --mh-text: #3c3e40;
  --mh-bg: #ffffff;
  --mh-bg-alt: #f4f5f6;
  --mh-surface: #dbdfe3;
  --mh-border: #a1afba;
  --mh-lab: #d58b52;
  --mh-air: #66a0c8;
  --mh-office: #929b86;
  --mh-max-width: 1320px;
  --mh-radius: 4px;
  --mh-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--mh-primary);

  font-family: 'Barlow', 'URW DIN', system-ui, -apple-system, sans-serif;
  color: var(--mh-text);
  line-height: 1.6;
}

.mh-home img { max-width: 100%; display: block; }

.mh-container {
  max-width: var(--mh-max-width);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 960px) {
  .mh-container { padding-inline: 64px; }
}

.mh-home h1, .mh-home h2, .mh-home h3 {
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--mh-primary-dark);
}
.mh-home h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); }
.mh-home h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem); }
.mh-home h3 { font-size: 1.25rem; font-weight: 600; }
.mh-home p { margin: 0 0 16px; max-width: 68ch; }

.mh-home a.mh-link { text-decoration: underline; text-underline-offset: 0.15em; color: var(--mh-primary); }
.mh-home a.mh-link:hover { color: var(--mh-primary-dark); }

.mh-home a:focus-visible,
.mh-home button:focus-visible {
  outline: none;
  box-shadow: var(--mh-focus-ring);
  border-radius: var(--mh-radius);
}

@media (prefers-reduced-motion: reduce) {
  .mh-home * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Hero */
.mh-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #1c1e1f center/cover no-repeat;
}
.mh-hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: 70% center;
}
.mh-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,30,31,0.92) 0%, rgba(28,30,31,0.75) 32%, rgba(28,30,31,0.15) 65%, rgba(28,30,31.0.15) 100%),
              linear-gradient(0deg, rgba(28,30,31,0.55) 0%, rgba(28,30,31,0) 45%);
}
.mh-hero-content { position: relative; z-index: 2; padding-block: 48px 72px; max-width: 640px; }
.mh-hero-eyebrow { color: var(--mh-surface); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 8px; }
.mh-hero h1 { color: #fff; margin-bottom: 16px; }
.mh-hero p { color: #eef1f3; font-size: 1.1rem; max-width: 46ch; }

.mh-btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 14px 28px; border-radius: var(--mh-radius); margin-top: 16px;
}
.mh-btn-primary { background: var(--mh-primary); color: #fff; }
.mh-btn-primary:hover { background: #5f8aa4; }
.mh-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); }
.mh-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Solutions band (pills with icons) */
.mh-solutions-band { background: var(--mh-primary-dark); padding-block: 24px; }
.mh-pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; justify-content: center; }
.mh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; text-decoration: none;
  font-weight: 600; color: var(--mh-text); background: #fff; border: 1.5px solid transparent;
}
.mh-pill:hover { background: var(--mh-bg-alt); }
.mh-pill-lab { border-color: var(--mh-lab); }
.mh-pill-air { border-color: var(--mh-air); }
.mh-pill-office { border-color: var(--mh-office); }
.mh-pill-icon { width: 18px; height: 18px; flex: none; }
.mh-pill-lab .mh-pill-icon { color: var(--mh-lab); }
.mh-pill-air .mh-pill-icon { color: var(--mh-air); }
.mh-pill-office .mh-pill-icon { color: var(--mh-office); }

/* Sections */
.mh-section { padding-block: 64px; }
@media (min-width: 600px) { .mh-section { padding-block: 88px; } }
@media (min-width: 1280px) { .mh-section { padding-block: 120px; } }
.mh-section-alt { background: var(--mh-bg-alt); }
.mh-section-intro { max-width: 62ch; margin-bottom: 32px; }

/* Teaser grid */
.mh-teaser-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .mh-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mh-teaser-grid { grid-template-columns: repeat(3, 1fr); } }
.mh-teaser { text-decoration: none; color: var(--mh-text); display: block; }
.mh-teaser-media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 16px; }
.mh-teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.mh-teaser-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 4px 10px 4px 12px; border-radius: 2px;
  color: var(--mh-text); background: var(--mh-bg-alt); border-left: 4px solid var(--mh-border); margin-bottom: 8px;
}
.mh-tag-lab { border-left-color: var(--mh-lab); }
.mh-tag-air { border-left-color: var(--mh-air); }
.mh-tag-office { border-left-color: var(--mh-office); }
.mh-teaser h3 { margin-bottom: 4px; }
.mh-teaser p { font-size: 0.95rem; }
.mh-teaser-link { text-decoration: underline; font-weight: 600; font-size: 0.9rem; color: var(--mh-primary); }

/* Benefits */
.mh-benefits-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .mh-benefits-layout { grid-template-columns: 1fr 1fr; } }
.mh-benefits-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.mh-benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.mh-benefit-list li { display: flex; gap: 16px; align-items: flex-start; }
.mh-benefit-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mh-surface);
  display: flex; align-items: center; justify-content: center; color: var(--mh-primary-dark); font-weight: 700;
}
.mh-benefit-list h3 { margin-bottom: 2px; }
.mh-benefit-list p { margin: 0; font-size: 0.95rem; }

/* Project reference */
.mh-project-card { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .mh-project-card { grid-template-columns: 1fr 1fr; align-items: center; } }
.mh-project-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Story band */
.mh-story-band { position: relative; color: #fff; background: #1c1e1f center/cover no-repeat; min-height: 460px; display: flex; align-items: center; }
.mh-story-content { position: relative; z-index: 2; max-width: 560px; }
.mh-story-content h2 { color: #fff; }
.mh-story-content p { color: #eef1f3; }

/* CTA band */
.mh-cta-band { background: var(--mh-primary); color: #fff; text-align: center; padding-block: 48px; }
.mh-cta-band h2 { color: #fff; margin-bottom: 24px; }

/* Insights */
.mh-insights-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .mh-insights-grid { grid-template-columns: repeat(2, 1fr); } }
.mh-insight-card { text-decoration: none; color: var(--mh-text); display: block; }
.mh-insight-card img { aspect-ratio: 16/10; object-fit: cover; margin-bottom: 16px; }
.mh-insight-meta { font-size: 0.8rem; color: var(--mh-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.mh-insight-card h3 { margin-bottom: 4px; }

/* Stats */
.mh-stats-band { background: var(--mh-primary-dark); color: #fff; padding-block: 64px; }
.mh-stats-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .mh-stats-layout { grid-template-columns: 1fr 1fr; } }
.mh-stats-content h2 { color: #fff; }
.mh-stats-content p { color: #d8dde0; }
.mh-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mh-stat { border-left: 3px solid var(--mh-air); padding-left: 16px; }
.mh-stat-number { font-size: 2rem; font-weight: 700; display: block; color: #fff; }
.mh-stat-label { font-size: 0.9rem; color: #c7ced2; }

/* Filmstrip */
.mh-filmstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 640px) { .mh-filmstrip { grid-template-columns: repeat(4, 1fr); } }
.mh-filmstrip img { aspect-ratio: 1/1; object-fit: cover; }

/* ==========================================================================
   Woodmart-Header: volle Breite statt 1320px-Boxed-Container (User-Wunsch)
   ========================================================================== */
.whb-row > .container {
  max-width: none;
  padding-inline: 24px;
}
@media (min-width: 960px) {
  .whb-row > .container { padding-inline: 64px; }
}

/* ==========================================================================
   Netzwerk-Switcher: schnelles Wechseln zwischen Marchhart/Air/Lab/Office.
   Erscheint netzwerkweit oberhalb des Headers auf allen vier Sites (siehe
   woodmart_after_body_open-Hook in functions.php). Volle Breite wie der
   Header, gleiches 24/64px-Innenabstand-Raster.
   ========================================================================== */
.mh-network-switcher {
  background: var(--mh-bg-alt);
  border-bottom: 1px solid var(--mh-border);
}
.mh-network-switcher__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 24px;
}
@media (min-width: 960px) {
  .mh-network-switcher__inner { padding-inline: 64px; }
}
.mh-network-switcher__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mh-text);
}
.mh-network-switcher__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
}
.mh-network-switcher__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--mh-text);
  text-decoration: none;
}
a.mh-network-switcher__link:hover {
  color: var(--mh-primary);
  text-decoration: underline;
}
a.mh-network-switcher__link:focus-visible {
  outline: none;
  box-shadow: var(--mh-focus-ring);
  border-radius: var(--mh-radius);
}
.mh-network-switcher__link.is-current {
  font-weight: 700;
}
.mh-network-switcher__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--mh-primary);
}
.mh-network-switcher__dot--lab { background: var(--mh-lab); }
.mh-network-switcher__dot--air { background: var(--mh-air); }
.mh-network-switcher__dot--office { background: var(--mh-office); }

@media (max-width: 599px) {
  .mh-network-switcher__label { display: none; }
}