/*
Theme Name: Swertz Schilderwerken
Theme URI: https://www.swertzschilderwerken.nl
Author: Swertz Schilderwerken
Description: Custom thema voor Swertz Schilderwerken, schildersbedrijf in Alkmaar. Gebouwd op maat, geen page builder of framework nodig.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: swertz
*/


  :root{
    --purple:#51267F;
    --purple-dark:#331A54;
    --purple-mid:#6B3AA0;
    --purple-tint:#F3EEF9;
    --ink:#1F1F22;
    --grey-600:#5C5A62;
    --grey-400:#9C9AA1;
    --grey-300:#E7E5E9;
    --grey-100:#FAF9FB;
    --white:#FFFFFF;
    --line: rgba(31,31,34,0.09);
    --line-dark: rgba(255,255,255,0.16);
    --radius-sm:10px;
    --radius:16px;
    --radius-lg:22px;
    --shadow: 0 1px 2px rgba(20,16,30,0.04), 0 10px 26px -14px rgba(20,16,30,0.12);
    --shadow-hover: 0 22px 42px -18px rgba(20,16,30,0.20);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope', sans-serif;
    background:var(--white);
    color:var(--ink);
    line-height:1.68;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.12; }
  .eyebrow{
    font-weight:700; font-size:12px; color:var(--purple);
    letter-spacing:0.14em; text-transform:uppercase; margin-bottom:16px; display:block;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
  section{ padding:128px 0; }
  @media(max-width:700px){ section{ padding:72px 0; } .wrap{ padding:0 24px; } }

  /* ---------- NAV ---------- */
  header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  nav{ max-width:1180px; margin:0 auto; padding:0 40px; height:88px; display:flex; align-items:center; justify-content:space-between; }
  .logo img{ height:60px; width:auto; }
  .nav-links{ display:flex; gap:40px; }
  .nav-links a{ font-size:15px; font-weight:600; color:var(--ink); transition:color .2s; }
  .nav-links a:hover{ color:var(--purple); }
  .nav-cta{ padding:13px 26px; background:var(--purple); color:var(--white); border-radius:999px; font-size:14.5px; font-weight:700; transition:all .2s; }
  .nav-cta:hover{ background:var(--purple-dark); transform:translateY(-1px); }
  @media(max-width:900px){ .nav-links{ display:none; } nav{ height:72px; } .logo img{ height:48px; } }

  /* ---------- HERO ---------- */
  .hero{ background:var(--purple-dark); color:var(--white); padding-top:200px; padding-bottom:120px; position:relative; overflow:hidden; }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-eyebrow{ font-weight:700; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:#D9BFF2; margin-bottom:28px; }
  .hero h1{ font-size:clamp(36px, 5.6vw, 64px); max-width:760px; }
  .hero p.lead{ max-width:520px; margin-top:28px; font-size:18px; line-height:1.6; color:rgba(255,255,255,0.82); font-weight:400; }
  .hero-actions{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-size:15px; font-weight:700; border-radius:999px; transition:all .2s; cursor:pointer; border:1px solid transparent; }
  .btn-purple{ background:var(--purple); color:var(--white); }
  .btn-purple:hover{ background:#6B3AA0; transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(81,38,127,0.5); }
  .btn-outline-light{ border-color:rgba(255,255,255,0.35); color:var(--white); }
  .btn-outline-light:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
  .trust-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:48px; }
  .trust-badge{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.08); border:1px solid var(--line-dark); padding:10px 18px; border-radius:999px; }
  .trust-badge svg{ flex-shrink:0; }

  /* ---------- PORTFOLIO ---------- */
  .portfolio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:48px; flex-wrap:wrap; }
  .portfolio-head h2{ font-size:clamp(30px,3.8vw,44px); }
  .portfolio-head p{ color:var(--grey-600); font-size:15.5px; max-width:380px; }
  .portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:20px; }
  .tile{ position:relative; overflow:hidden; border-radius:var(--radius); display:flex; align-items:flex-end; }
  .tile.large{ grid-column:span 2; grid-row:span 2; }
  @media(max-width:820px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } .tile.large{ grid-column:span 2; grid-row:span 1; } }
  .tile .bg{ position:absolute; inset:0; }
  .tile .bg svg{ width:100%; height:100%; display:block; }
  .tile .bg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tile .cap{ position:relative; z-index:1; padding:18px 20px; font-size:13px; color:rgba(255,255,255,0.92); background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent); width:100%; }
  .tile .cap b{ display:block; font-weight:700; font-size:17px; margin-bottom:3px; }
  .portfolio-note{ text-align:center; margin-top:32px; font-size:13.5px; color:var(--grey-400); }

  /* ---------- TRUST / REVIEWS ---------- */
  .trust{ background:var(--grey-100); }
  .trust-top{ display:grid; grid-template-columns:0.55fr 1.45fr; gap:56px; align-items:center; margin-bottom:56px; }
  @media(max-width:760px){ .trust-top{ grid-template-columns:1fr; gap:32px; } }
  .rating{ text-align:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow); }
  .rating .score{ font-weight:800; font-size:56px; color:var(--purple); line-height:1; }
  .rating .stars{ color:var(--purple); font-size:17px; margin:10px 0 6px; letter-spacing:3px; }
  .rating .label{ font-size:13px; color:var(--grey-600); }
  .badge-strip{ display:flex; flex-wrap:wrap; gap:14px; }
  .badge-strip div{ display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; font-size:14px; font-weight:600; flex:1; min-width:200px; box-shadow:var(--shadow); }
  .badge-strip svg{ flex-shrink:0; color:var(--purple); }
  .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media(max-width:820px){ .review-grid{ grid-template-columns:1fr; } }
  .review-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
  .review-card .stars{ color:var(--purple); font-size:14px; letter-spacing:2px; margin-bottom:16px; }
  .review-card p.quote{ font-size:16px; line-height:1.6; color:var(--ink); }
  .review-card .who{ margin-top:22px; font-size:13.5px; color:var(--grey-600); font-weight:600; }

  /* ---------- SECTION HEAD (shared) ---------- */
  .section-head{ max-width:620px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(28px,3.6vw,40px); }
  .section-head p{ margin-top:16px; color:var(--grey-600); font-size:16px; }

  /* ---------- DIENSTEN (homepage cards) ---------- */
  .service-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; }
  a.service{ display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:all .2s; box-shadow:var(--shadow); }
  a.service:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--purple-tint); }
  .service svg{ color:var(--purple); margin-bottom:20px; }
  .service h3{ font-size:18px; font-weight:700; }
  .service p{ font-size:13.5px; color:var(--grey-600); margin-top:8px; line-height:1.55; }

  /* ---------- SERVICE DETAIL (diensten hub + individual pages) ---------- */
  .service-detail-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; }
  .service-detail{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow); }
  .service-detail svg.ico-lg{ color:var(--purple); margin-bottom:20px; }
  .service-detail h3{ font-size:21px; margin-bottom:10px; font-weight:700; }
  .service-detail p{ font-size:14.5px; color:var(--grey-600); margin-bottom:18px; line-height:1.6; }
  .service-detail ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
  .service-detail li{ font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:9px; }
  .service-detail li svg{ flex-shrink:0; color:var(--purple); }

  /* ---------- ABOUT (homepage strip + over-ons) ---------- */
  .about{ background:var(--grey-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about .wrap{ display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
  .about p{ font-size:17px; max-width:640px; color:var(--ink); line-height:1.6; }
  .about .segments{ font-size:13px; color:var(--grey-600); margin-top:12px; letter-spacing:0.02em; }

  .about-intro{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  @media(max-width:820px){ .about-intro{ grid-template-columns:1fr; gap:36px; } }
  .about-intro h2{ font-size:clamp(28px,3.6vw,40px); }
  .about-intro p{ color:var(--grey-600); margin-top:18px; font-size:16px; line-height:1.65; }
  .about-visual-block{ aspect-ratio:4/3; border-radius:var(--radius-lg); background:linear-gradient(155deg,#4A4A4D,#2B2B2D); }

  .value-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:24px; }
  .value-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
  .value-card svg{ color:var(--purple); margin-bottom:16px; }
  .value-card h3{ font-size:17.5px; margin-bottom:8px; font-weight:700; }
  .value-card p{ font-size:14px; color:var(--grey-600); line-height:1.55; }

  /* ---------- MERKEN ---------- */
  .merken{ text-align:center; }
  .merken-row{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px 0; margin-top:12px; }
  .merken-row span{ font-weight:700; font-size:21px; color:var(--grey-400); padding:0 36px; border-right:1px solid var(--line); }
  .merken-row span:last-child{ border-right:none; }
  @media(max-width:700px){ .merken-row span{ padding:0 16px; font-size:18px; border-right:none; } }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:780px; }
  .faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
  .faq-item summary{ cursor:pointer; font-weight:700; font-size:17.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; font-size:24px; color:var(--purple); flex-shrink:0; font-weight:400; }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item p{ margin-top:14px; color:var(--grey-600); font-size:15px; max-width:660px; line-height:1.6; }

  /* ---------- CONTACT ---------- */
  .offerte{ background:var(--grey-100); }
  .offerte-box{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:56px; display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; box-shadow:var(--shadow); }
  @media(max-width:820px){ .offerte-box{ grid-template-columns:1fr; padding:32px; } }
  .offerte-info h2{ font-size:clamp(28px,3.4vw,36px); }
  .offerte-info p{ margin-top:12px; color:var(--grey-600); font-size:15.5px; }
  .contact-list{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
  .contact-list div{ display:flex; gap:12px; align-items:center; font-size:14.5px; }
  .contact-list svg{ color:var(--purple); flex-shrink:0; }
  form{ display:flex; flex-direction:column; gap:16px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:520px){ .form-row{ grid-template-columns:1fr; } }
  label{ font-size:12.5px; letter-spacing:0.03em; color:var(--grey-600); margin-bottom:7px; display:block; font-weight:600; }
  input, textarea{ width:100%; background:var(--grey-100); border:1px solid var(--grey-300); color:var(--ink); padding:14px 16px; font-family:'Manrope',sans-serif; font-size:15px; border-radius:var(--radius-sm); transition:border-color .2s, background .2s; }
  input::placeholder, textarea::placeholder{ color:var(--grey-400); }
  input:focus, textarea:focus{ outline:none; border-color:var(--purple); background:var(--white); }
  textarea{ resize:vertical; min-height:100px; }
  .submit-btn{ align-self:flex-start; }
  .form-foot{ font-size:12px; color:var(--grey-400); }

  /* ---------- PAGE HERO (subpages) ---------- */
  .page-hero{ background:var(--purple-dark); color:var(--white); padding-top:180px; padding-bottom:64px; }
  .breadcrumb{ font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; }
  .breadcrumb a:hover{ color:#D9BFF2; }
  .page-hero .eyebrow{ color:#D9BFF2; }
  .page-hero h1{ font-size:clamp(34px,4.8vw,52px); max-width:720px; }
  .page-hero p.lead{ max-width:560px; margin-top:18px; font-size:16.5px; color:rgba(255,255,255,0.8); line-height:1.6; }

  /* ---------- FILTER BAR (portfolio) ---------- */
  .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
  .filter-btn{ padding:11px 22px; border:1px solid var(--grey-300); border-radius:999px; font-size:14px; font-weight:600; background:var(--white); color:var(--grey-600); cursor:pointer; transition:all .2s; font-family:'Manrope',sans-serif; }
  .filter-btn:hover{ border-color:var(--purple); color:var(--purple); }
  .filter-btn.active{ background:var(--purple); border-color:var(--purple); color:var(--white); }
  .tile.is-hidden{ display:none; }

  /* ---------- RELATED SERVICES / CTA BAND ---------- */
  .related-services{ display:flex; flex-wrap:wrap; gap:12px; }
  .related-services a{ padding:11px 22px; border:1px solid var(--grey-300); border-radius:999px; font-size:14px; font-weight:600; color:var(--ink); transition:all .2s; }
  .related-services a:hover{ border-color:var(--purple); color:var(--purple); }
  .cta-band{ background:var(--grey-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
  .cta-band h2{ font-size:clamp(24px,3.2vw,32px); }
  .cta-band p{ color:var(--grey-600); font-size:15px; margin-top:8px; }

  /* ---------- VIEW-ALL LINK ---------- */
  .view-all{ font-size:14px; font-weight:700; color:var(--purple); display:inline-flex; align-items:center; gap:6px; }
  .view-all:hover{ color:var(--purple-mid); }

  /* ---------- PHOTO FRAME / GALLERY ---------- */
  .photo-frame{ border-radius:var(--radius); overflow:hidden; background:var(--grey-100); }
  .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-caption{ font-size:13px; color:var(--grey-400); margin-top:12px; }
  .photo-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .photo-gallery .photo-frame{ aspect-ratio:4/3; }
  .photo-gallery .full{ grid-column:1/-1; aspect-ratio:16/9; }

  /* ---------- MAP ---------- */
  .map-frame{ width:100%; aspect-ratio:16/6; border:0; border-radius:var(--radius); display:block; filter:grayscale(0.1); }

  /* ---------- SEGMENTS (legacy list) ---------- */
  .seg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media(max-width:760px){ .seg-grid{ grid-template-columns:1fr; } }
  .seg-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
  .seg-card .n{ font-weight:700; font-size:14px; color:var(--purple); }
  .seg-card h3{ font-size:21px; margin:12px 0 10px; font-weight:700; }
  .seg-card p{ font-size:14.5px; color:var(--grey-600); }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); color:rgba(255,255,255,0.62); padding:44px 0; }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; font-size:13.5px; }
  .footer-inner img{ height:24px; filter:brightness(0) invert(1); opacity:0.9; }
  .footer-left{ display:flex; align-items:center; gap:14px; }
  .footer-left img{ height:48px; width:auto; }
  .footer-links{ display:flex; gap:26px; }
  .footer-links a:hover{ color:#D9BFF2; }

  ::selection{ background:#D9BFF2; color:var(--purple-dark); }
  .contact-cta{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:0 auto; }
  .contact-cta a{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 24px; box-shadow:var(--shadow); transition:all .2s; }
  .contact-cta a:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--purple-tint); }
  .contact-cta svg{ color:var(--purple); margin-bottom:6px; }
  .contact-cta .label{ font-size:12.5px; color:var(--grey-600); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }
  .contact-cta .value{ font-size:19px; font-weight:800; color:var(--ink); word-break:break-word; }
  @media(max-width:600px){ .contact-cta{ grid-template-columns:1fr; } }
  .mobile-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
  .mobile-panel{ display:none; position:fixed; top:72px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--line); padding:24px 32px 28px; flex-direction:column; gap:18px; z-index:99; box-shadow:0 16px 30px -16px rgba(20,16,30,0.25); }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{ font-size:16px; font-weight:600; color:var(--ink); }
  .mobile-panel .nav-cta{ align-self:flex-start; margin-top:4px; }
  @media(max-width:900px){ .mobile-toggle{ display:block; } }
e-sticky-cta{ display:none; }
  @media(max-width:900px){
    body{ padding-bottom:66px; }
    .mobile-sticky-cta{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:98; box-shadow:0 -10px 26px -14px rgba(20,16,30,0.22); }
    .mobile-sticky-cta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:17px 10px; font-size:14.5px; font-weight:700; }
    .mobile-sticky-cta a.call{ background:var(--purple); color:var(--white); }
    .mobile-sticky-cta a.mail{ background:var(--ink); color:var(--white); }
  }