/*
Theme Name: Boehncke Coaching
Theme URI: https://resilienztraining-koeln.com
Author: Webdesigner
Description: Premium WordPress Theme – Boehncke Resilienz Coaching
Version: 3.6.0
License: GNU General Public License v2 or later
Text Domain: boehncke
*/

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  --orange: #e26719;
  --orange-dark: #c45610;
  --orange-light: #f5a96e;
  --orange-xlight: #fdf0e6;
  --dark: #1e1a17;
  --dark-2: #2D2926;
  --gray: #6B6761;
  --gray-light: #9e9a96;
  --cream: #F9F7F2;
  --cream-mid: #F3EFE7;
  --border: #e8e4de;
  --white: #ffffff;
  --font-body: 'Karla', sans-serif;
  --font-heading: 'Jost', sans-serif;
  --font-family-body: 'Karla', sans-serif;
  --font-family-heading: 'Jost', sans-serif;
  --radius: 2px;
  --shadow-sm: 0 2px 12px rgba(226,103,25,0.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.08);
  --shadow-lg: 0 24px 80px rgba(0,0,0,0.12);
}

/* =============================================
   BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

.admin-bar #global-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #global-header { top: 46px; } }

/* =============================================
   TYPOGRAPHY UTILITIES
   ============================================= */
.heading { font-family: var(--font-heading); font-weight: 300; }
.orange-text { color: var(--orange); }
.orange-gradient {
  background: linear-gradient(135deg, #e26719 0%, #f08030 50%, #c45610 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--orange);
}

/* =============================================
   ANIMATIONS & MOTION
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideRight {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes counter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Scroll reveal system */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* USP items */
.usp-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.usp-item.visible { opacity: 1; transform: translateY(0); }

/* cursor glow removed */

/* =============================================
   BUTTONS
   ============================================= */
/* =============================================
   BUTTONS – Magnetic Fill (Option A)
   Fill wipes from bottom to top on hover
   ============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 0;
  text-decoration: none;
}
.btn-primary::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: var(--orange-dark);
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-primary:hover::before { height: 100%; }
.btn-primary:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(226,103,25,0.35);
}
.btn-primary svg { transition: transform 0.3s ease; position: relative; z-index: 1; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary span { position: relative; z-index: 1; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 0;
  text-decoration: none;
}
.btn-outline::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: var(--orange);
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-outline:hover::before { height: 100%; }
.btn-outline:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(226,103,25,0.25);
}
.btn-outline svg { transition: transform 0.3s ease; position: relative; z-index: 1; }
.btn-outline:hover svg { transform: translateX(4px); }
.btn-outline span { position: relative; z-index: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  transition: gap 0.3s ease, opacity 0.2s ease;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.btn-ghost:hover { gap: 14px; opacity: 0.8; }
.btn-ghost svg { transition: transform 0.3s ease; }
.btn-ghost:hover svg { transform: translateX(4px); }

/* =============================================
   DROPDOWN – JS controlled (no CSS hover issues)
   ============================================= */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 230px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0.2s;
  z-index: 200;
  transform: translateX(-50%) translateY(8px);
}
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Arrow */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.nav-dropdown-menu a {
  display: block;
  padding: 13px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dark);
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  text-decoration: none;
  position: relative;
}
.nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-dropdown-menu a:hover { color: var(--orange); background: var(--orange-xlight); padding-left: 28px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  transition: gap 0.3s ease;
}
.btn-ghost:hover { gap: 14px; }
.btn-ghost svg { transition: transform 0.3s ease; }
.btn-ghost:hover svg { transform: translateX(4px); }

/* =============================================
   SECTION PADDING
   ============================================= */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 64px 0; } }

/* =============================================
   KACHELN / TILES
   ============================================= */
.tile {
  position: relative;
  min-height: 300px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
  cursor: pointer;
}
.tile::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 3px;
  background: var(--orange);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tile:hover::before { width: 100%; }

/* =============================================
   CONTACT FORM
   ============================================= */
.form-field { position: relative; margin-bottom: 28px; }
.form-field label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
  font-family: var(--font-body);
}
.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark);
  outline: none;
  transition: border-color 0.3s ease;
}
.form-input:focus { border-color: var(--orange); }
.form-input::placeholder { color: #ccc; }
.form-input:focus + .form-line,
.form-input:not(:placeholder-shown) + .form-line { width: 100%; }
.form-line {
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--orange);
  transition: width 0.4s ease;
}

/* =============================================
   DROPDOWN NAV
   ============================================= */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dark);
  transition: color 0.2s ease, background 0.2s ease;
  border-bottom: 1px solid var(--border);
}
.nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-dropdown-menu a:hover { color: var(--orange); background: var(--orange-xlight); }

/* =============================================
   PAGE HERO (Unterseiten)
   ============================================= */
.page-hero {
  padding: 140px 0 80px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(226,103,25,0.04) 100%);
}
.page-hero-line {
  width: 48px; height: 3px;
  background: var(--orange);
  margin-bottom: 24px;
  animation: slideRight 0.8s ease forwards;
}

/* =============================================
   CARDS
   ============================================= */
.service-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--orange);
  transition: height 0.4s ease;
}
.service-card:hover { border-color: var(--orange); transform: translateY(-4px); }
.service-card:hover::after { height: 100%; }

/* =============================================
   SEMINAR CARDS
   ============================================= */
.seminar-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.seminar-item:hover {
  border-color: var(--orange);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

/* =============================================
   STATS / COUNTERS
   ============================================= */
.stat-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 300;
  color: var(--orange);
  line-height: 1;
  animation: counter 0.6s ease forwards;
}

/* =============================================
   PROGRESS BARS (for skills/methods)
   ============================================= */
.progress-bar {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--orange);
  width: 0;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================
   FOOTER LOGO
   ============================================= */
.footer-logo img { filter: brightness(0) invert(1); }

/* =============================================
   WP CONTENT
   ============================================= */
.wp-page { padding-top: 80px; }
.prose { max-width: 760px; line-height: 1.85; color: var(--gray); }
.prose h2 { font-family: var(--font-heading); font-weight: 300; font-size: 1.8rem; color: var(--dark); margin: 2rem 0 1rem; }
.prose h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--dark); margin: 1.5rem 0 0.5rem; }
.prose p { margin-bottom: 1.2rem; }
.prose strong { color: var(--dark); font-weight: 600; }
.prose a { color: var(--orange); }
.prose ul { list-style: none; padding: 0; }
.prose ul li { padding-left: 20px; position: relative; margin-bottom: 8px; }
.prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--orange); }

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* =============================================
   SELECTION
   ============================================= */
::selection { background: var(--orange); color: var(--white); }

/* =============================================
   LOADING LINE
   ============================================= */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  z-index: 9999;
  transition: width 0.3s ease;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .tile { min-height: 260px; }
}
@media (max-width: 768px) {
  .tile { min-height: 220px; padding: 32px 24px; }
  .nav-dropdown-menu { min-width: 180px; }
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }
}

/* =============================================
   CARD HOVER LINE FIX (position:relative needed)
   ============================================= */
[onmouseover] { position: relative; }

/* =============================================
   MOBILE OVERHAUL
   ============================================= */

/* Force single column on small screens */
@media (max-width: 1023px) {
  /* Grid overrides */
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero section */
  #hero { min-height: 100svh !important; }
  #hero > div:nth-child(2) { width: 100% !important; opacity: 0.15 !important; }
  #hero > div:nth-child(2) > div:first-child { background: linear-gradient(180deg, #fff 0%, transparent 30%, transparent 70%, #fff 100%) !important; }
  #hero > .relative { padding: 100px 20px 80px !important; }
  #hero h1 span { font-size: clamp(36px, 9vw, 64px) !important; }
  #hero p { font-size: 15px !important; }

  /* Section padding */
  section { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Tile grids */
  .tile { min-height: 200px !important; padding: 32px 24px !important; }

  /* Seminar items */
  .seminar-item { flex-wrap: wrap !important; gap: 12px !important; }

  /* Stats row */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="border-top"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* About section portrait */
  [style*="height:600px; object-fit:cover"] { height: 400px !important; }

  /* Outplacement circle */
  [style*="width:360px; height:360px"] { width: 260px !important; height: 260px !important; }

  /* Kacheln section header padding */
  [style*="max-width:1280px"][style*="padding:0 32px 48px"] { padding: 0 20px 32px !important; }
}

@media (max-width: 767px) {
  /* Container padding */
  [style*="max-width:1280px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="max-width:1280px; margin:0 auto; padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Typography */
  h1, h2 { word-break: break-word; }

  /* Stats 2 column on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="border-top"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Hero USPs scroll */
  #hero .flex.items-center { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 8px !important; }
  #hero .flex.items-center > div { flex-shrink: 0 !important; padding: 0 16px !important; }

  /* Page hero padding */
  .page-hero { padding: 110px 0 48px !important; }

  /* Buttons full width on small screens */
  .btn-primary, .btn-outline { padding: 13px 20px !important; font-size: 10px !important; }

  /* Hero CTAs stacked */
  #hero .flex.flex-col { gap: 12px !important; }

  /* Modal */
  #seminar-modal > div { padding: 32px 20px !important; }
  #seminar-modal > div > form > div:first-child { grid-template-columns: 1fr !important; }

  /* Logo grid */
  [style*="display:flex; flex-wrap:wrap"][style*="gap:0"] { gap: 0 !important; }
  [style*="min-width:140px"] { min-width: 110px !important; padding: 12px 16px !important; }
  [style*="min-width:140px"] img { height: 44px !important; }

  /* Dropdown in header */
  #global-header { padding: 0 !important; }
  #global-header nav { padding: 0 16px !important; }

  /* Remove decorative frame on mobile */
  [style*="position:absolute; bottom:-28px"] { display: none !important; }
  [style*="position:absolute; bottom:-24px; right:-16px"] { position: static !important; margin-top: 16px !important; display: inline-block !important; }

  /* Kacheln no gap on mobile */
  .tile { min-height: 180px !important; padding: 28px 20px !important; }

  /* Change Management phase boxes */
  [style*="width:60px; background:var(--orange)"] { width: 48px !important; }

  /* Footer grid */
  footer .grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Outplacement circle hide on mobile */
  [style*="width:360px; height:360px"] { display: none !important; }

  /* 3-column grids → 1 column */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Tailwind responsive helpers */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2,1fr) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width: 1023px) {
  .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  .lg\:hidden { display: none !important; }
  .hidden.lg\:flex { display: none !important; }
  .lg\:hidden.p-2 { display: block !important; }
}

/* =============================================
   BODY PADDING FOR FIXED HEADER
   ============================================= */
body { padding-top: 0; }
/* Hero sections handle their own top padding */
/* Non-hero page templates need top offset */
.wp-page { padding-top: 106px; }
.page-hero { padding-top: 140px !important; }

/* =============================================
   MOBILE LOGO SECTION FIX
   ============================================= */
@media (max-width: 767px) {
  /* Logo grid - 2 per row on mobile */
  #boe-nav { padding: 12px 16px !important; }
  #boe-mobile-nav { padding: 12px 16px 20px !important; }

  /* Logo section fix - 2 columns */
  [style*="display:flex; flex-wrap:wrap"][style*="gap:0"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Seminar item fix */
  .seminar-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 20px 16px !important;
  }
  .seminar-item > div:first-child { width: auto !important; }

  /* Section padding */
  [style*="padding:100px 0"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:80px 0"]  { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Hero text size */
  #hero { padding-top: 0; }
  #hero h1 span { font-size: clamp(32px,8vw,52px) !important; }

  /* Outplacement section - stack */
  #hero + section + section + section .grid { display: block !important; }

  /* Hide decorative circle on mobile */
  [style*="width:360px"][style*="aspect-ratio"] { display: none !important; }
}

/* =============================================
   TRAININGS TILE – dark text fix
   ============================================= */
/* Target the Trainings tile specifically via background color */
[style*="background:#f3efe6"] h3,
[style*="background:#f3efe6"] p,
[style*="background: #f3efe6"] h3,
[style*="background: #f3efe6"] p { color: var(--dark) !important; }
[style*="background:#f3efe6"] a,
[style*="background: #f3efe6"] a { color: var(--orange) !important; }

/* =============================================
   TOP PADDING / ADMIN BAR FIX
   ============================================= */
.admin-bar #boe-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar #boe-header { top: 46px !important; }
}

/* Ensure hero sections aren't cut off by fixed header */
#hero { padding-top: 0 !important; }
.page-hero { padding-top: 136px !important; }
.wp-page { padding-top: 106px !important; }

/* =============================================
   LOGO UPLOAD – custom logo from Customizer
   ============================================= */
/* If custom logo is used via Customizer, ensure proper sizing */
#boe-logo .custom-logo-link img,
#boe-logo .custom-logo { height: 70px !important; width: auto !important; display: block !important; }

/* =============================================
   HERO MOBILE – clean white + grid, centered
   ============================================= */
@media (max-width: 767px) {
  /* Hide the right-side coaching photo on mobile */
  #hero > div:nth-child(2) { display: none !important; }

  /* White background with subtle grid pattern */
  #hero { background: #fff !important; }
  #hero > div:first-child { background: #fff !important; }

  /* Show a subtle dot grid instead */
  #hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(226,103,25,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
  }

  /* Center all hero content */
  #hero > .relative { 
    text-align: center !important;
    padding: 100px 20px 60px !important;
    position: relative;
    z-index: 1;
  }
  #hero h1 { text-align: center !important; }
  #hero h1 span { 
    color: var(--dark) !important;
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  #hero h1 span:last-child { color: var(--orange) !important; }
  #hero p { 
    color: var(--gray) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Center the label row */
  #hero > .relative > div:first-child { justify-content: center !important; }
  /* Center USP strip */
  #hero .absolute.bottom-12 { display: none !important; }
  /* Center CTA buttons */
  #hero > .relative > div[style*="display:flex"] { 
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  #hero > .relative > div[style*="display:flex"] a { 
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }
  /* Scroll indicator hidden on mobile */
  #hero > div[style*="bottom:32px"] { display: none !important; }
}

/* =============================================
   SEMINAR ITEM – mobile fix (Screen 4)
   ============================================= */
@media (max-width: 767px) {
  .seminar-item {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px 12px !important;
    padding: 20px !important;
    align-items: start !important;
  }
  /* Orange left bar */
  .seminar-item > div:first-child {
    display: none !important;
  }
  /* Main content - full width top */
  .seminar-item > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .seminar-item > div:nth-child(2) h3 {
    font-size: 16px !important;
    white-space: normal !important;
  }
  .seminar-item > div:nth-child(2) p {
    white-space: normal !important;
    font-size: 11px !important;
  }
  /* Price */
  .seminar-item > div:nth-child(3) {
    font-size: 15px !important;
  }
  /* Status */
  .seminar-item > div:nth-child(4) {
    justify-content: flex-end !important;
  }
  /* Button - full width */
  .seminar-item > a,
  .seminar-item > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 12px !important;
  }
}

/* =============================================
   LOGO GRID – mobile 2 columns (Screen 5)
   ============================================= */
@media (max-width: 767px) {
  /* Target the logo flex container */
  div[style*="display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  div[style*="display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0"] > div {
    width: 100% !important;
    min-width: unset !important;
    padding: 16px !important;
    margin: 0 !important;
  }
  div[style*="display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0"] img {
    height: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}

/* =============================================
   SEMINAR ITEM – improved flex wrapping
   ============================================= */
.seminar-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--border);
  flex-wrap: wrap;
  transition: all 0.2s ease;
}
.seminar-item:hover { border-color: var(--orange); }
/* Main content always takes as much space as possible */
.seminar-item > div[style*="flex:1"] { flex: 1 1 200px; min-width: 0; }
/* Prevent content squish on any screen */
.seminar-item > div[style*="white-space:nowrap"],
.seminar-item > a,
.seminar-item > button { flex-shrink: 0; }

@media (max-width: 600px) {
  .seminar-item {
    display: grid !important;
    grid-template-areas:
      "content content"
      "price status"
      "btn btn" !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 18px 16px !important;
    align-items: start !important;
  }
  .seminar-item > div:first-child { display: none !important; } /* orange bar */
  .seminar-item > div[style*="flex:1"] { grid-area: content !important; }
  .seminar-item > div[style*="font-size:16px"] { grid-area: price !important; }
  .seminar-item > div[style*="display:flex; align-items:center; gap:6px"] { grid-area: status !important; justify-content: flex-end !important; }
  .seminar-item > a,
  .seminar-item > button { grid-area: btn !important; width: 100% !important; justify-content: center !important; }
  .seminar-item h3 { font-size: 15px !important; white-space: normal !important; }
  .seminar-item p { font-size: 11px !important; white-space: normal !important; }
}

/* =============================================
   LOGOS GRID – class-based, no borders on mobile
   ============================================= */
/* =============================================
   LOGOS – Desktop: 1 row horizontal | Mobile: 2×3 grid
   ============================================= */
.logos-grid {
  display: flex;
  flex-wrap: nowrap;           /* force single row on desktop */
  justify-content: center;
  align-items: stretch;
  border: 1px solid var(--border);
}
.logo-item {
  flex: 1;
  padding: 28px 24px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  transition: background 0.25s ease;
  min-width: 0;                /* allow shrinking */
}
.logo-item:last-child { border-right: none; }
.logo-item:hover { background: var(--orange-xlight); }
.logo-item img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  .logos-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: unset !important;
    border: 1px solid var(--border) !important;
    gap: 0 !important;
  }
  .logo-item {
    flex: unset !important;
    padding: 24px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* right column: add left border */
  .logo-item:nth-child(even) {
    border-left: 1px solid var(--border) !important;
  }
  /* last row: remove bottom border */
  .logo-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .logo-item img {
    height: 36px !important;
    max-width: 120px !important;
  }
}

/* =============================================
   HERO – hide background image on mobile
   ============================================= */
@media (max-width: 767px) {
  .hero-bg-image {
    display: none !important;
  }
  #hero {
    background: #fff !important;
    min-height: 100svh !important;
  }
  /* Dot grid on mobile hero */
  #hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(226,103,25,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
  }
  /* Content z-index above dots */
  #hero > div[style*="z-index:2"] {
    z-index: 2 !important;
    padding: 100px 20px 60px !important;
  }
  /* Center everything in hero */
  #hero > div[style*="z-index:2"] > div {
    max-width: 100% !important;
    text-align: center !important;
  }
  #hero > div[style*="z-index:2"] > div > div:first-child {
    justify-content: center !important;
  }
  /* Headline smaller on mobile */
  #hero h1 span {
    font-size: clamp(34px, 8.5vw, 52px) !important;
  }
  /* Paragraph */
  #hero p[style*="max-width:520px"] {
    font-size: 15px !important;
    max-width: 100% !important;
  }
  /* CTA buttons stacked centered */
  #hero div[style*="display:flex"][style*="gap:16px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #hero div[style*="display:flex"][style*="gap:16px"] a {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
  /* Hide USP strip */
  #hero div[style*="absolute"][style*="bottom"] { display: none !important; }
}

/* =============================================
   SEMINAR ITEM – clean mobile layout
   ============================================= */
.sem-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
  overflow: hidden;
}
.sem-item:hover { border-color: var(--orange); }
.sem-left { width: 4px; background: var(--orange); flex-shrink: 0; }
.sem-body { flex: 1; min-width: 0; padding: 20px 24px; }
.sem-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 20px 24px;
}
.sem-btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .sem-item {
    flex-wrap: wrap !important;
  }
  .sem-left { display: none !important; }
  .sem-body {
    flex: 1 1 100% !important;
    padding: 16px 16px 8px !important;
    border-bottom: 1px solid var(--border);
  }
  .sem-body h3 { font-size: 16px !important; }
  .sem-meta { white-space: normal !important; }
  .sem-right {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    padding: 12px 16px 16px !important;
    gap: 10px !important;
    justify-content: space-between;
  }
  .sem-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =============================================
   PROSE / WP CONTENT – Block Editor styles
   ============================================= */
.wp-content h1, .wp-content h2, .wp-content h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--dark);
  margin: 1.5em 0 0.5em;
  line-height: 1.2;
}
.wp-content h2 { font-size: clamp(20px, 2.5vw, 28px); }
.wp-content h3 { font-size: clamp(16px, 2vw, 22px); }
.wp-content p  { color: var(--gray); line-height: 1.8; margin-bottom: 1em; font-family: var(--font-body); font-size: 15px; }
.wp-content ul, .wp-content ol { color: var(--gray); line-height: 1.8; margin: 0 0 1em 1.5em; font-family: var(--font-body); font-size: 15px; }
.wp-content li { margin-bottom: 0.4em; }
.wp-content strong { color: var(--dark); font-weight: 600; }
.wp-content a { color: var(--orange); text-decoration: underline; }
.wp-content a:hover { opacity: 0.8; }
.wp-content hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

/* =============================================
   KOMFORTZONE SECTION – responsive
   ============================================= */
@media (max-width: 767px) {
  /* 2-col SVG + image → 1-col stacked */
  [style*="grid-template-columns:1fr 1fr"][style*="align-items:center"] { grid-template-columns: 1fr !important; }
  /* 4-col zones → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}