/*
Theme Name: Perfect Fit
Theme URI: https://perfectfittraining.nl
Author: Perfect Fit Training en Coaching
Description: Thema voor Perfect Fit Training en Coaching. Levert header, footer, globale stijlen en widget-areas; pagina-inhoud wordt met Elementor beheerd.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perfect-fit
Tags: elementor, one-column, custom-menu, custom-logo, editor-style
*/

/* ============================================================
   1. Tokens — Perfect Fit design system
   ============================================================ */
:root{
  --pf-ink:#2A2620;
  --pf-stone:#4C463C;
  --pf-yellow:#FDD21D;
  --pf-deep-yellow:#7A5E00;
  --pf-sand:#F6F1E8;
  --pf-offwhite:#FFFDF6;
  --pf-line:#E3DCCE;
  --pf-field:#C9C0AE;
  --pf-dark-line:rgba(255,253,246,.15);
  --pf-font-display:"Newsreader",Georgia,serif;
  --pf-font-ui:"Karla","Helvetica Neue",Arial,sans-serif;
  --pf-container:1180px;
  --pf-gap:24px;
  --pf-radius:6px;
  --pf-radius-btn:4px;
}

/* ============================================================
   2. Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--pf-offwhite);
  color:var(--pf-stone);
  font-family:var(--pf-font-ui);
  font-size:17px;
  line-height:1.7;
  text-wrap:pretty;
}
h1,h2,h3,h4{font-family:var(--pf-font-display);color:var(--pf-ink);font-weight:400;margin:0 0 16px}
h1{font-size:clamp(34px,7vw,56px);line-height:1.1}
h2{font-size:clamp(28px,5.2vw,40px);line-height:1.15}
h3{font-size:clamp(21px,3vw,26px);line-height:1.25;font-weight:500}
p{margin:0 0 16px}
a{color:var(--pf-deep-yellow);text-decoration:underline;text-decoration-color:var(--pf-yellow);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness 150ms ease-out}
a:hover{text-decoration-thickness:3px}
img{max-width:100%;height:auto;border-radius:var(--pf-radius)}
:focus-visible{outline:2px solid var(--pf-deep-yellow);outline-offset:2px}
.pf-skip{position:absolute;left:-9999px}
.pf-skip:focus{left:16px;top:16px;z-index:9999;background:var(--pf-offwhite);padding:12px 16px;border-radius:var(--pf-radius)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ============================================================
   3. Layout helpers (ook bruikbaar in Elementor HTML-widgets)
   ============================================================ */
.pf-container{max-width:var(--pf-container);margin:0 auto;padding:0 24px}
.pf-kicker{font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-stone);margin-bottom:16px}
.pf-lead{font-size:clamp(17px,2vw,19px);line-height:1.65;max-width:56ch}
.pf-small{font-size:14px;line-height:1.6}
.pf-note{border-left:3px solid var(--pf-yellow);padding-left:24px;font-size:17px;line-height:1.7}

/* ============================================================
   4. Header
   ============================================================ */
.pf-header{position:sticky;top:0;z-index:500;background:var(--pf-offwhite);border-bottom:1px solid var(--pf-line)}
.pf-header__bar{display:flex;align-items:center;gap:24px;max-width:var(--pf-container);margin:0 auto;padding:12px 24px}
.pf-header__logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.pf-header__logo img{height:44px;width:auto;border-radius:0}
.pf-header__logo-text{font-family:var(--pf-font-display);font-size:22px;color:var(--pf-ink);text-decoration:none}
.pf-header__spacer{flex:1 1 auto}
.pf-header__cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.pf-header__cta .widget{margin:0}

/* Navigatie */
.pf-nav{display:flex;flex:0 0 auto}
.pf-nav ul{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0}
.pf-nav a{font-family:var(--pf-font-ui);font-size:15px;font-weight:600;color:var(--pf-ink);text-decoration:none;padding:10px 0;display:inline-block;border-bottom:2px solid transparent}
.pf-nav a:hover,.pf-nav .current-menu-item>a,.pf-nav .current-menu-ancestor>a{border-bottom-color:var(--pf-yellow)}
.pf-nav li{position:relative}

/* Mega-dropdown */
.pf-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.pf-mega{position:absolute;top:100%;left:-24px;min-width:min(1132px,calc(100vw - 48px));background:var(--pf-offwhite);border:1px solid var(--pf-line);border-top:3px solid var(--pf-yellow);border-radius:0 0 var(--pf-radius) var(--pf-radius);padding:24px;display:none;grid-template-columns:repeat(4,1fr);gap:24px}
.pf-nav li:hover>.pf-mega,.pf-nav li:focus-within>.pf-mega{display:grid}
.pf-mega__item{display:block;padding:16px;border:1px solid transparent;border-radius:var(--pf-radius);text-decoration:none}
.pf-mega__item:hover{background:var(--pf-sand);border-color:var(--pf-line)}
.pf-mega__title{font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ink);margin-bottom:8px}
.pf-mega__body{font-size:15px;line-height:1.6;color:var(--pf-stone)}
.pf-mega__promo{grid-column:span 2;align-self:start;background:var(--pf-sand);border:1px solid var(--pf-line);border-top:3px solid var(--pf-yellow);border-radius:var(--pf-radius);padding:16px}
.pf-mega__promo .widget-title{font-family:var(--pf-font-display);font-weight:500;font-size:20px;line-height:1.25;color:var(--pf-ink);margin:0 0 8px}

/* Hamburger + mobiel paneel */
.pf-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;background:transparent;border:1px solid var(--pf-field);border-radius:var(--pf-radius-btn);color:var(--pf-ink);cursor:pointer}
.pf-mobile{display:none;background:var(--pf-offwhite);border-top:1px solid var(--pf-line);padding:16px 24px 24px}
.pf-mobile.is-open{display:block}
.pf-mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pf-mobile li{border-bottom:1px solid var(--pf-line)}
.pf-mobile a{display:block;padding:14px 0;font-weight:600;font-size:17px;color:var(--pf-ink);text-decoration:none}
.pf-mobile .sub-menu a{padding-left:16px;font-weight:400;font-size:16px}

@media (max-width:1024px){
  .pf-nav{display:none}
  .pf-header__cta{display:none}
  .pf-burger{display:inline-flex}
}

/* ============================================================
   5. Buttons (ook voor Elementor-knoppen via klasse)
   ============================================================ */
.pf-btn,.elementor-button.pf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--pf-radius-btn);font-family:var(--pf-font-ui);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--pf-ink);background:var(--pf-ink);color:var(--pf-offwhite);transition:background 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out}
.pf-btn:hover{background:var(--pf-deep-yellow);border-color:var(--pf-deep-yellow);color:var(--pf-offwhite)}
.pf-btn--secondary{background:transparent;color:var(--pf-ink)}
.pf-btn--secondary:hover{background:var(--pf-ink);color:var(--pf-offwhite)}
.pf-btn--accent{background:var(--pf-yellow);border-color:var(--pf-yellow);color:var(--pf-ink)}
.pf-btn--accent:hover{background:var(--pf-ink);border-color:var(--pf-ink);color:var(--pf-offwhite)}
.pf-btn--light{background:transparent;border-color:var(--pf-offwhite);color:var(--pf-offwhite)}
.pf-btn--light:hover{background:var(--pf-offwhite);color:var(--pf-ink)}

/* ============================================================
   6. Kaarten en tabellen voor HTML-widgets
   ============================================================ */
.pf-card{background:var(--pf-offwhite);border:1px solid var(--pf-line);border-radius:var(--pf-radius);padding:24px}
.pf-card--flush{padding:0;overflow:hidden}
.pf-card__head{margin:0;padding:10px 16px;background:var(--pf-sand);border-bottom:3px solid var(--pf-yellow);font-family:var(--pf-font-display);font-weight:500;font-size:20px;line-height:1.25;color:var(--pf-ink)}
.pf-card__row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:baseline;padding:12px 16px;border-top:1px solid var(--pf-line)}
.pf-card__row strong{font-weight:600;color:var(--pf-ink)}
.pf-card__price{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--pf-ink)}
.pf-card__note{padding:12px 16px;border-top:1px solid var(--pf-line);font-size:13px;line-height:1.6;color:var(--pf-stone)}
.pf-grid{display:grid;gap:var(--pf-gap)}
.pf-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pf-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pf-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

.pf-tablewrap{overflow-x:auto;max-width:100%}
table.pf-table{width:100%;min-width:720px;border-collapse:collapse;font-family:var(--pf-font-ui)}
table.pf-table th{text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--pf-field);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ink)}
table.pf-table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--pf-line);font-size:16px;line-height:1.5;color:var(--pf-stone)}
table.pf-table td:first-child{font-weight:600;color:var(--pf-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
table.pf-table th:last-child,table.pf-table td:last-child{text-align:left}
table.pf-table .pf-on{color:var(--pf-ink)}
@media (max-width:880px){
  table.pf-table{min-width:0}
  table.pf-table th,table.pf-table td{padding-right:8px;font-size:14px}
  table.pf-table th .pf-day-long{display:none}
  table.pf-table th .pf-day-short{display:inline}
}
table.pf-table th .pf-day-short{display:none}

/* ============================================================
   7. Footer
   ============================================================ */
.pf-fotostrip{background:var(--pf-ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;line-height:0}
.pf-fotostrip .widget{margin:0;min-width:0}
.pf-fotostrip img{width:100%;height:100%;aspect-ratio:1/1;max-height:240px;object-fit:cover;border-radius:0;display:block}
.pf-footer{background:var(--pf-ink);color:rgba(255,253,246,.8);padding:56px 24px 40px}
.pf-footer__inner{max-width:var(--pf-container);margin:0 auto}
.pf-footer__logo{display:block;margin-bottom:40px}
.pf-footer__logo img{height:64px;width:auto;border-radius:0}
.pf-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px var(--pf-gap);align-items:start}
.pf-footer h2,.pf-footer h3,.pf-footer .widget-title{font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C9C2B4;margin:0 0 16px}
.pf-footer a{color:var(--pf-offwhite);text-decoration:none;border-bottom:1px solid transparent}
.pf-footer a:hover{border-bottom-color:var(--pf-yellow)}
.pf-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-footer__col--contact{border-left:3px solid var(--pf-yellow);padding-left:24px}
.pf-footer__affil{margin-top:40px;padding-top:32px;border-top:1px solid var(--pf-dark-line);display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.pf-footer__affil-label{font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C9C2B4;flex:0 0 auto}
.pf-footer__affil-logos{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;flex:1 1 200px;min-width:0}
.pf-footer__affil-logos .widget{margin:0;flex:1 1 92px;min-width:0;max-width:132px}
.pf-footer__affil-logos img{max-height:48px;width:auto;border-radius:4px}
.pf-footer__legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--pf-dark-line);display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px;line-height:1.6}
.pf-footer__legal .widget{margin:0}
.pf-footer__legal p{margin:0}

/* ============================================================
   8. Elementor-compatibiliteit
   ============================================================ */
.pf-site-main{display:block}
.pf-site-main--elementor{padding:0}
.pf-entry{max-width:var(--pf-container);margin:0 auto;padding:56px 24px 96px}
body.elementor-page .pf-entry{max-width:none;margin:0;padding:0}
.elementor-widget-container>p:last-child{margin-bottom:0}
.elementor .pf-note{border-left:3px solid var(--pf-yellow)}

/* Contact Form 7 in Perfect Fit-stijl */
.wpcf7-form p{margin:0 0 24px}
.wpcf7-form label{display:block;font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ink);margin-bottom:8px}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form input[type=date],.wpcf7-form select,.wpcf7-form textarea{width:100%;min-height:48px;padding:0 14px;font-family:var(--pf-font-ui);font-size:16px;color:var(--pf-ink);background:var(--pf-offwhite);border:1px solid var(--pf-field);border-radius:var(--pf-radius)}
.wpcf7-form textarea{min-height:120px;padding:12px 14px}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{border-color:var(--pf-ink);outline:2px solid var(--pf-deep-yellow);outline-offset:2px}
.wpcf7-form input[type=submit]{min-height:48px;padding:0 24px;background:var(--pf-ink);color:var(--pf-offwhite);border:1px solid var(--pf-ink);border-radius:var(--pf-radius-btn);font-family:var(--pf-font-ui);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.wpcf7-form input[type=submit]:hover{background:var(--pf-deep-yellow);border-color:var(--pf-deep-yellow)}
.wpcf7-not-valid-tip{font-size:14px;color:#8A2B1F}
.wpcf7-response-output{border:1px solid var(--pf-line)!important;border-radius:var(--pf-radius);padding:16px!important;margin:0!important}

/* ============================================================
   9. Donkere secties (Elementor-klasse .pf-dark)
   ============================================================ */
.pf-dark, .pf-dark p, .pf-dark li{color:rgba(255,253,246,.9)}
.pf-dark h1,.pf-dark h2,.pf-dark h3,.pf-dark .elementor-heading-title{color:var(--pf-offwhite)}
.pf-dark .pf-kicker,.pf-dark .pf-kicker .elementor-heading-title{color:#C9C2B4}
.pf-dark a{color:var(--pf-offwhite)}
.pf-dark .pf-note{color:var(--pf-offwhite)}
.pf-dark .pf-card{background:#3B352C;border-color:rgba(255,253,246,.15)}
.pf-dark .pf-card p,.pf-dark .pf-card footer{color:rgba(255,253,246,.9)}
.pf-dark table.pf-table th{color:var(--pf-offwhite);border-bottom-color:rgba(255,253,246,.3)}
.pf-dark table.pf-table td{color:rgba(255,253,246,.85);border-bottom-color:rgba(255,253,246,.15)}
.pf-dark .pf-btn{border-color:var(--pf-offwhite);background:transparent;color:var(--pf-offwhite)}
.pf-dark .pf-btn:hover{background:var(--pf-offwhite);color:var(--pf-ink)}
.pf-dark .pf-btn--accent{background:var(--pf-yellow);border-color:var(--pf-yellow);color:var(--pf-ink)}

/* Kicker-heading uit Elementor */
.pf-kicker .elementor-heading-title{font-family:var(--pf-font-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-stone)}