/*
Theme Name:   Box-Fit Child
Theme URI:    https://boxfitgym.nl
Description:  Box-Fit Gym child theme op basis van Blocksy. Concept A — Warm Antraciet + Blauw.
Author:       Dygistic — Dylan Grefte
Author URI:   https://dygistic.com
Template:     blocksy
Version:      1.0.0
License:      Private
Text Domain:  boxfit-child
*/

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS
   Pas hier de kleuren aan — ze propageren door de hele site.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Brand kleuren */
  --bf-dark:        #2C2C2C;   /* Antraciet — primaire achtergrond donkere secties */
  --bf-dark-mid:    #3A3A3A;   /* Iets lichter antraciet voor cards */
  --bf-dark-deep:   #1E1E1E;   /* Diepste donker — footer, pricing bg */
  --bf-accent:      #1A4E87;   /* Blauw accent — buttons, CTA's, highlights */
  --bf-accent-dk:   #143D6E;   /* Donkerder blauw — hover states */
  --bf-accent-bg:   rgba(26, 78, 135, 0.08); /* Lichte blauwe achtergrond */

  /* Neutrale kleuren */
  --bf-bg:          #F5F2ED;   /* Warme off-white — lichte secties */
  --bf-bg-card:     #FFFFFF;   /* Pure wit — cards */
  --bf-border:      #E2DDD6;   /* Lichte border */
  --bf-text:        #2C2C2C;   /* Primaire tekst */
  --bf-muted:       #6F6F6F;   /* Secundaire tekst */

  /* Typografie */
  --bf-font-heading: 'Barlow Condensed', sans-serif;
  --bf-font-body:    'Barlow', sans-serif;

  /* Spacing */
  --bf-section-pad:  4.5rem 5%;
  --bf-radius:       4px;
  --bf-radius-lg:    8px;

  /* Shadows */
  --bf-shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --bf-shadow-md:    0 6px 24px rgba(0,0,0,0.10);
  --bf-shadow-lg:    0 16px 48px rgba(0,0,0,0.14);
}

/* ═══════════════════════════════════════════════════════
   GOOGLE FONTS IMPORT
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════
   BASE RESET & TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--bf-font-body);
  color: var(--bf-text);
  background: var(--bf-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bf-font-heading);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--bf-text);
}

p {
  font-weight: 300;
  line-height: 1.75;
  color: var(--bf-muted);
}

a {
  color: var(--bf-accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--bf-accent-dk);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   BLOCKSY OVERRIDES — Navigatie
   ═══════════════════════════════════════════════════════ */
.site-header,
#wpadminbar ~ .site-header {
  background: var(--bf-dark) !important;
  border-bottom: none !important;
}

.site-header .site-title a,
.site-header .ct-logo {
  color: #fff !important;
}

/* Nav links */
.ct-header-navigation .menu-item > a,
.ct-header-navigation .menu-item > .ct-menu-link {
  font-family: var(--bf-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.2s;
}

.ct-header-navigation .menu-item > a:hover,
.ct-header-navigation .menu-item:hover > .ct-menu-link {
  color: #fff !important;
}

/* CTA button in nav */
.ct-header-navigation .menu-item.menu-item-cta > a {
  background: var(--bf-accent) !important;
  color: #fff !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: var(--bf-radius) !important;
  font-weight: 600 !important;
}

.ct-header-navigation .menu-item.menu-item-cta > a:hover {
  background: var(--bf-accent-dk) !important;
}

/* ═══════════════════════════════════════════════════════
   BLOCKSY OVERRIDES — Buttons
   ═══════════════════════════════════════════════════════ */
.wp-block-button .wp-block-button__link,
.ct-button,
button[type="submit"],
input[type="submit"],
.woocommerce .button,
.woocommerce button.button {
  font-family: var(--bf-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--bf-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bf-radius) !important;
  padding: 0.9rem 2rem !important;
  transition: background 0.2s, transform 0.15s !important;
  cursor: pointer !important;
}

.wp-block-button .wp-block-button__link:hover,
.ct-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce .button:hover {
  background: var(--bf-accent-dk) !important;
  transform: translateY(-1px) !important;
}

/* Ghost/outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid var(--bf-accent) !important;
  color: var(--bf-accent) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--bf-accent) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════ */

/* Sections */
.bf-section { padding: var(--bf-section-pad); }
.bf-section-dark { background: var(--bf-dark); color: #fff; }
.bf-section-dark h1, .bf-section-dark h2, .bf-section-dark h3 { color: #fff; }
.bf-section-dark p { color: rgba(255,255,255,0.65); }
.bf-section-light { background: var(--bf-bg-card); }
.bf-section-off { background: var(--bf-bg); }

/* Label boven sectietitels */
.bf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bf-accent);
  margin-bottom: 0.75rem;
}

.bf-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--bf-accent);
  display: block;
  flex-shrink: 0;
}

.bf-eyebrow--light {
  color: rgba(255,255,255,0.7);
}

.bf-eyebrow--light::before {
  background: rgba(255,255,255,0.7);
}

/* Sectietitel */
.bf-heading {
  font-family: var(--bf-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: 1rem;
}

.bf-heading--light { color: #fff; }
.bf-heading--accent span { color: var(--bf-accent); }

/* Quote / blockquote */
.bf-quote {
  border-left: 3px solid var(--bf-accent);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--bf-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.25rem 0;
}

/* Buttons */
.bf-btn {
  display: inline-block;
  background: var(--bf-accent);
  color: #fff;
  padding: 0.9rem 2rem;
  font-family: var(--bf-font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--bf-radius);
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.bf-btn:hover {
  background: var(--bf-accent-dk);
  color: #fff;
  transform: translateY(-1px);
}

.bf-btn--dark {
  background: var(--bf-dark);
}

.bf-btn--dark:hover {
  background: var(--bf-dark-mid);
}

.bf-btn--ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
}

.bf-btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Cards */
.bf-card {
  background: var(--bf-bg-card);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.bf-card:hover {
  box-shadow: var(--bf-shadow-md);
  transform: translateY(-2px);
}

.bf-card--dark {
  background: var(--bf-dark-mid);
  border-color: #444;
}

/* Strip / announce bar */
.bf-strip {
  background: var(--bf-accent);
  padding: 0.8rem 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  overflow: hidden;
}

.bf-strip-item {
  font-family: var(--bf-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bf-strip-item::before {
  content: '✓';
  opacity: 0.8;
}

/* Pricing cards */
.bf-price-card {
  background: var(--bf-dark-mid);
  padding: 2.25rem;
  transition: background 0.2s;
}

.bf-price-card.is-featured {
  background: var(--bf-accent);
}

.bf-price-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.25rem;
}

.bf-price-amount {
  font-family: var(--bf-font-heading);
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.bf-price-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-top: 0.3rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════════════
   HERO SECTIE
   ═══════════════════════════════════════════════════════ */
.bf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 70px);
  overflow: hidden;
}

.bf-hero-left {
  background: var(--bf-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 6%;
  position: relative;
  overflow: hidden;
}

.bf-hero-left::after {
  content: 'FIT';
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  font-family: var(--bf-font-heading);
  font-size: 16rem;
  font-weight: 800;
  color: rgba(255,255,255,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.bf-hero-title {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.bf-hero-title span {
  color: var(--bf-accent);
  display: block;
}

.bf-hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 2rem;
  font-weight: 300;
}

.bf-hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.bf-hero-stat-num {
  font-family: var(--bf-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.bf-hero-stat-num em {
  color: var(--bf-accent);
  font-style: normal;
}

.bf-hero-stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

.bf-hero-right {
  position: relative;
  overflow: hidden;
}

.bf-hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bf-hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(44,44,44,0.3) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════════════
   FLORIS / OVER ONS SECTIE
   ═══════════════════════════════════════════════════════ */
.bf-floris {
  display: grid;
  grid-template-columns: 380px 1fr;
  background: var(--bf-bg-card);
  border-top: 1px solid var(--bf-border);
  border-bottom: 1px solid var(--bf-border);
}

.bf-floris-img {
  overflow: hidden;
}

.bf-floris-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bf-floris-content {
  padding: 4.5rem 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

/* ═══════════════════════════════════════════════════════
   AANBOD GRID
   ═══════════════════════════════════════════════════════ */
.bf-aanbod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.bf-aanbod-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.bf-aanbod-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.bf-card:hover .bf-aanbod-card-img img {
  transform: scale(1.04);
}

.bf-aanbod-card-body {
  padding: 1.5rem;
}

.bf-aanbod-card-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  font-family: var(--bf-font-heading);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   PRICING GRID
   ═══════════════════════════════════════════════════════ */
.bf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #3a3a3a;
  margin-top: 2.5rem;
  border-radius: var(--bf-radius);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════ */
.bf-cta-banner {
  border: 1px solid var(--bf-border);
  border-left: 4px solid var(--bf-accent);
  border-radius: var(--bf-radius);
  background: var(--bf-bg-card);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2.5rem;
}

/* ═══════════════════════════════════════════════════════
   FORMS (Contact / Proefles)
   ═══════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--bf-font-body);
  font-size: 0.95rem;
  color: var(--bf-text);
  background: var(--bf-bg-card);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--bf-accent);
  box-shadow: 0 0 0 3px var(--bf-accent-bg);
}

label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bf-text);
  margin-bottom: 0.35rem;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bf-dark-deep) !important;
  color: rgba(255,255,255,0.4) !important;
  border-top: 1px solid #2a2a2a !important;
}

.site-footer a {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.78rem;
}

.site-footer a:hover {
  color: rgba(255,255,255,0.8) !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile first
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  :root {
    --bf-section-pad: 3rem 5%;
  }

  /* Hero */
  .bf-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .bf-hero-left {
    padding: 3rem 5%;
  }

  .bf-hero-left::after {
    font-size: 8rem;
  }

  .bf-hero-right {
    display: none; /* Foto valt weg op mobiel, content staat centraal */
  }

  .bf-hero-stats {
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  /* Floris */
  .bf-floris {
    grid-template-columns: 1fr;
  }

  .bf-floris-img {
    height: 280px;
  }

  .bf-floris-content {
    padding: 2.5rem 5%;
  }

  /* Grids → 1 kolom */
  .bf-aanbod-grid {
    grid-template-columns: 1fr;
  }

  .bf-pricing-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  /* CTA banner */
  .bf-cta-banner {
    grid-template-columns: 1fr;
    padding: 2rem;
    gap: 1.5rem;
  }

  /* Strip */
  .bf-strip {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem;
  }

  .bf-strip-item {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .bf-hero-title {
    font-size: 2.4rem;
  }

  .bf-heading {
    font-size: 1.8rem;
  }

  .bf-btn {
    width: 100%;
    text-align: center;
  }
}