/*
Theme Name: Sole Kozijnen
Theme URI: https://www.solekozijnen.nl
Author: Sole Kozijnen B.V.
Author URI: https://www.solekozijnen.nl
Description: Professioneel WordPress thema voor Sole Kozijnen – kunststof kozijnen, ramen en deuren specialist.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: solekozijnen
Tags: business, custom-menu, featured-images, full-width-template, translation-ready
*/

:root {
  --color-primary:  #0F2A47;
  --color-accent:   #F59E0B;
  --color-bg:       #F8FAFC;
  --color-bg-alt:   #F5F7FA;
  --color-border:   #E5E9F0;
  --color-muted:    #6B7280;
  --color-text:     #1F2937;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Manrope', sans-serif;
  margin: 0 0 .5em;
  line-height: 1.2;
}

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

a { color: var(--color-primary); text-decoration: none; }

/* Mobile body padding for sticky CTA bar */
@media (max-width: 1023px) {
  body { padding-bottom: 72px; }
}

/* ── Mobile nav drawer ────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  top: 0; right: -100%;
  width: min(85vw, 360px);
  height: 100%;
  background: var(--color-primary);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
}
.mobile-drawer.open { right: 0; }
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Sticky mobile CTA bar ────────────────────────────────────── */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-primary);
  z-index: 9990;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
}
@media (min-width: 1024px) { .mobile-cta-bar { display: none; } }

/* ── FAQ Accordion ────────────────────────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer {
  max-height: 600px;
}
.faq-icon-plus  { display: block; }
.faq-icon-minus { display: none; }
.faq-item.open .faq-icon-plus  { display: none; }
.faq-item.open .faq-icon-minus { display: block; }

/* ── Before/After slider ──────────────────────────────────────── */
#ba-container { user-select: none; cursor: ew-resize; }
#ba-handle { cursor: ew-resize; }

/* ── Blog cards ───────────────────────────────────────────────── */
.blog-card { transition: transform 0.2s ease, box-shadow 0.2s ease; display: block; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,42,71,0.12); }
.blog-image { transition: transform 0.5s ease; }
.blog-card:hover .blog-image { transform: scale(1.05); }

/* ── Line clamp utilities ─────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── WP alignment helpers ─────────────────────────────────────── */
.alignleft  { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter{ margin: 0 auto 1rem; display: block; }

/* ── WP Galleries ─────────────────────────────────────────────── */
.wp-block-image img { border-radius: 1rem; }

/* ── Skip link ────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-accent);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 .5rem .5rem;
  z-index: 99999;
  font-weight: 700;
}
.skip-link:focus { top: 0; }