/*
Theme Name: Isshinkai Examens (Tijdelijk)
Theme URI: https://isshinkai.nl
Author: Isshinkai
Author URI: https://isshinkai.nl
Description: Tijdelijke theme voor Isshinkai. Startpagina met examendata en voorbereidende examentrainingen, plus een privacyverklaring-paginasjabloon. Bedoeld als tijdelijke homepage-vervanging.
Version: 1.1
Requires at least: 5.9
Requires PHP: 7.4
License: Unlicense
Text Domain: isshinkai-examens-tijdelijk
*/

:root{
    --red:#c10a0a;
    --ink:#161513;
    --ink-soft:#57534d;
    --ink-faint:#8c8880;
    --white:#ffffff;
    --line:#e7e4de;
    --off:#faf9f7;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', Helvetica, Arial, sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    font-size:16px;
    line-height:1.5;
  }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  .wrap{ max-width:920px; margin:0 auto; padding:0 32px; }
  h1,h2,h3{ font-weight:600; letter-spacing:-.01em; color:var(--ink); }
  .eyebrow{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-size:14px; font-weight:600;
    border:1px solid var(--ink); border-radius:2px; cursor:pointer; background:transparent; color:var(--ink);
    transition:background .15s, color .15s, border-color .15s;
  }
  .btn:hover{ background:var(--ink); color:#fff; }
  .btn-primary{ background:var(--red); border-color:var(--red); color:#fff; }
  .btn-primary:hover{ background:#9c0808; border-color:#9c0808; }
  .link{ font-size:14px; font-weight:600; color:var(--red); border-bottom:1px solid transparent; }
  .link:hover{ border-color:var(--red); }

  /* notice bar */
  .notice-bar{ background:var(--ink); color:#fff; }
  .notice-bar .wrap{ display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 32px; font-size:13px; text-align:center; flex-wrap:wrap; }
  .notice-bar strong{ color:#fff; }
  .notice-bar span.dot{ width:5px; height:5px; border-radius:50%; background:var(--red); flex:none; }
  @media (max-width:600px){
    .notice-bar span.dot{ display:none; }
  }

  /* header */
  header.site{ border-bottom:1px solid var(--line); }
  .header-inner{ max-width:1120px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ width:38px; height:38px; object-fit:cover; border-radius:50%; }
  .brand-word{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
  .header-cta{ display:flex; align-items:center; gap:20px; white-space:nowrap; flex-shrink:0; }
  .lang-switch{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-faint); }
  .lang-switch a{ color:var(--ink-faint); padding:2px 1px; border-bottom:2px solid transparent; }
  .lang-switch a:hover{ color:var(--ink); }
  .lang-switch a.active{ color:var(--red); border-color:var(--red); }
  .lang-switch .sep{ color:var(--line); }

  @media (max-width:600px){
    .lang-switch{ font-size:12px; gap:4px; }
  }

  /* hero */
  .hero{ padding:76px 0 64px; border-bottom:1px solid var(--line); background:var(--off); }
  .hero h1{ font-size:38px; line-height:1.18; max-width:680px; margin-bottom:18px; }
  .hero p.lead{ font-size:16.5px; color:var(--ink-soft); max-width:600px; line-height:1.65; margin-bottom:32px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

  /* section rhythm */
  section.block{ padding:56px 0; border-bottom:1px solid var(--line); }
  section.block:last-of-type{ border-bottom:none; }
  .block h2{ font-size:24px; margin-bottom:16px; }
  .block > .wrap > p.body{ font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:680px; margin-bottom:14px; }
  .block > .wrap > p.body:last-of-type{ margin-bottom:0; }
  .block .intro{ font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:680px; margin-bottom:32px; }

  /* exam card */
  .exam-card{ border:1px solid var(--line); background:var(--off); padding:32px; margin-top:8px; }
  .exam-card .exam-date{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
  .exam-card h3{ font-size:20px; margin-bottom:18px; }
  .exam-meta{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:20px; }
  .exam-meta div{ font-size:14px; color:var(--ink-soft); }
  .exam-meta div b{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
  .exam-meta div span{ color:var(--ink); font-weight:500; }
  .tbd{ display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--ink-faint); background:#fff; padding:10px 14px; font-size:13px; color:var(--ink-soft); }
  .tbd .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }

  /* training cards */
  .training-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; }
  .training-card{ border:1px solid var(--line); padding:28px; }
  .training-card .t-date{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
  .training-card h3{ font-size:17px; margin-bottom:4px; }
  .training-card .t-address{ font-size:13.5px; color:var(--ink-faint); margin-bottom:18px; }
  .t-schedule{ border-top:1px solid var(--line); }
  .t-row{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
  .t-row:last-child{ border-bottom:none; }
  .t-row .t-time{ flex:none; width:112px; font-weight:600; color:var(--ink); }
  .t-row .t-what{ color:var(--ink-soft); line-height:1.5; }
  .t-row .t-what .t-tag{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
  .t-row.open .t-what .t-tag{ color:var(--red); }

  /* footer */
  footer.site{ background:var(--off); border-top:1px solid var(--line); padding:48px 0 26px; }
  .footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; margin-bottom:32px; }
  .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .footer-brand img{ width:30px; height:30px; object-fit:cover; border-radius:50%; }
  .footer-brand span{ font-size:15px; font-weight:700; }
  footer.site .footer-inner > div:first-child{ max-width:340px; }
  footer.site p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
  .footer-col h5{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
  .footer-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:9px; }
  .footer-col a:hover{ color:var(--red); }
  .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); }
  .footer-bottom div{ display:flex; gap:18px; flex-wrap:wrap; }
  .footer-bottom a{ color:var(--ink-faint); }
  .footer-bottom a:hover{ color:var(--red); }

  @media (max-width:720px){
    .hero h1{ font-size:29px; }
    .training-grid{ grid-template-columns:1fr; }
    .exam-meta{ gap:18px; }
  }
  @media (max-width:480px){
    .header-inner{ padding:14px 20px; }
    .header-cta .link{ display:none; }
    .brand-word{ font-size:14.5px; }
  }


/* ============================================
   Privacyverklaring-template: navigatie, page-hero
   en juridische content-opmaak
   ============================================ */

nav.main-nav{ display:flex; align-items:center; gap:20px; }

.nav-item{ position:relative; }

nav.main-nav a{ font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap; padding-bottom:4px; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:5px; }

nav.main-nav a:hover, nav.main-nav a.active{ color:var(--ink); border-color:var(--red); }

.nav-item .caret{ font-size:10px; color:var(--ink-faint); transform:translateY(-1px); }

.nav-item:hover .caret{ color:var(--red); }

.dropdown{
    position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:210px; padding:8px;
    background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px rgba(0,0,0,.09);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, visibility .15s; margin-top:12px;
  }

.nav-item:hover .dropdown{ opacity:1; visibility:visible; pointer-events:auto; }

.dropdown a{ display:block; padding:9px 12px; font-size:13.5px; font-weight:500; color:var(--ink-soft); border-bottom:none !important; border-radius:2px; }

.dropdown a:hover{ background:var(--off); color:var(--red); border-color:transparent; }

/* page header */
  .page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); background:var(--off); }

.page-hero h1{ font-size:32px; margin-bottom:10px; }

.page-hero .updated{ font-size:13.5px; color:var(--ink-faint); }

/* legal content */
  .legal{ padding:56px 0 72px; }

.legal .col{ max-width:720px; }

.legal p.intro{ font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:8px; }

.legal-section{ padding-top:36px; margin-top:36px; border-top:1px solid var(--line); }

.legal-section:first-of-type{ border-top:none; margin-top:44px; padding-top:0; }

.legal-section h2{ font-size:19px; margin-bottom:14px; }

.legal-section h2 .num{ color:var(--red); margin-right:8px; }

.legal-section p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:12px; }

.legal-section p:last-child{ margin-bottom:0; }

.legal-section ul{ list-style:none; margin-bottom:12px; }

.legal-section ul li{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; padding-left:16px; position:relative; margin-bottom:8px; }

.legal-section ul li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--red); }

.legal-section ul li:last-child{ margin-bottom:0; }

.legal-section strong{ color:var(--ink); font-weight:600; }

@media (max-width:900px){
    nav.main-nav{ display:none; }
  }

@media (max-width:480px){
  .page-hero h1{ font-size:25px; }
}