/*
Theme Name: KVK Westmalle
Theme URI: https://kvkwestmalle.be
Author: KVK Westmalle
Author URI: https://kvkwestmalle.be
Description: Modern, professional WordPress theme for KVK Westmalle voetbalclub. Built around Electric Royal Blue (#0066CA), black and white, with Montserrat typography.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kvk-westmalle
*/


  :root{
    --blue:#0066CA;
    --blue-deep:#00458C;
    --blue-tint:#EFF5FC;
    --blue-tint-2:#DCEAFB;
    --black:#000000;
    --white:#FFFFFF;
    --line:#E4E9F0;
    --gray:#53585F;
    --radius:2px;
    --maxw:1240px;
    --font:'Montserrat',-apple-system,sans-serif;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --page-bg:#FFFFFF; }
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:hidden;}
  body{
    margin:0; font-family:var(--font); color:var(--black); background:var(--white);
    -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  svg:not([width]){ width:100%; aspect-ratio:1; display:block; }
  a{color:inherit; text-decoration:none;}
  button{font-family:var(--font); cursor:pointer;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- Type scale ---------- */
  h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-0.01em;}
  .eyebrow{font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--blue);}
  p{margin:0 0 1em; color:var(--gray); font-size:16px; line-height:1.65;}
  .display{ font-size:clamp(40px,6vw,76px); line-height:0.98; font-weight:800; text-transform:uppercase; }
  .h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.05; font-weight:800; }
  .h3{ font-size:22px; font-weight:700; }
  .lede{ font-size:19px; color:var(--gray); max-width:560px; }

  /* ---------- Buttons ---------- */
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; font-weight:700; font-size:15px;
    border:2px solid transparent; border-radius:var(--radius); transition:background-color .15s ease, color .15s ease, border-color .15s ease; }
  .btn-primary{ background:var(--blue); color:var(--white); }
  .btn-primary:hover{ background:var(--blue-deep); }
  .btn-black{ background:var(--black); color:var(--white); }
  .btn-black:hover{ background:#1a1a1a; }
  .btn-outline{ background:transparent; border-color:var(--black); color:var(--black); }
  .btn-outline:hover{ background:var(--black); color:var(--white); }
  .btn-outline-white{ background:transparent; border-color:var(--white); color:var(--white); }
  .btn-outline-white:hover{ background:var(--white); color:var(--black); }
  .btn:focus-visible, a:focus-visible, button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

  /* ---------- Header ---------- */
  /* transform/backface-visibility/will-change: promotes the sticky header to
     its own GPU compositing layer. Without this, iOS Safari repaints the
     whole page (every overflow:hidden card/section included) on each scroll
     frame whenever a sticky element is present, which is felt as the entire
     page wobbling/jittering while scrolling — a well-known WebKit quirk, not
     a layout bug. This has no visible effect, it only changes how the
     browser renders the existing header. */
  header.site{ position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--line);
    transform:translateZ(0); -webkit-backface-visibility:hidden; will-change:transform; }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; height:84px; }
  .logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; letter-spacing:-0.01em; }
  .logo .crest{ width:40px; height:40px; flex:0 0 auto; }
  .logo .word b{ color:var(--blue); }
  nav.main{ display:flex; align-items:center; gap:6px; }
  nav.main > a, .has-dropdown > button{
    font-size:14.5px; font-weight:600; padding:10px 14px; border-radius:var(--radius); background:transparent; border:none; color:var(--black);
    display:flex; align-items:center; gap:6px;
  }
  nav.main > a:hover, .has-dropdown > button:hover{ color:var(--blue); }
  nav.main > a.active{ color:var(--blue); }
  .has-dropdown{ position:relative; }
  .dropdown{ position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--line); min-width:210px;
    box-shadow:0 12px 28px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s ease; padding:8px; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown a{ display:block; padding:10px 12px; font-size:14.5px; font-weight:600; border-radius:var(--radius); }
  .dropdown a:hover{ background:var(--blue-tint); color:var(--blue); }
  .header-actions{ display:flex; align-items:center; gap:10px; }
  .cta-join{ background:var(--blue); color:var(--white); padding:11px 20px; font-weight:700; font-size:14px; border-radius:var(--radius); }
  .cta-join:hover{ background:var(--blue-deep); }
  .accident-link{ font-size:13.5px; font-weight:700; color:var(--black); border:2px solid var(--black); padding:9px 14px; border-radius:var(--radius); }
  .accident-link:hover{ background:var(--black); color:var(--white); }
  .shop-link{ font-size:13.5px; font-weight:700; color:var(--white); background:var(--blue); padding:11px 16px; border-radius:var(--radius); }
  .shop-link:hover{ background:var(--blue-deep,#004a96); }
  .burger{ display:none; background:none; border:none; width:40px; height:40px; align-items:center; justify-content:center; }
  .burger span, .burger::before, .burger::after{ content:''; display:block; width:22px; height:2px; background:var(--black); position:relative; transition:.2s; }
  .burger::before{ position:absolute; transform:translateY(-7px); }
  .burger::after{ position:absolute; transform:translateY(7px); }

  @media (max-width:980px){
    nav.main, .header-actions .cta-join, .header-actions .accident-link, .header-actions .shop-link{ display:none; }
    .burger{ display:flex; }
  }
  #mobileNav{ position:fixed; inset:0; background:var(--white); z-index:80; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; }
  #mobileNav.open{ transform:translateX(0); }
  .mobile-top{ display:flex; justify-content:space-between; align-items:center; height:84px; padding:0 20px; border-bottom:1px solid var(--line);}
  .mobile-links{ padding:14px 20px 40px; }
  .mobile-links a{ display:block; padding:16px 0; font-size:20px; font-weight:700; border-bottom:1px solid var(--line); }
  .mobile-sub a{ font-size:16px; font-weight:600; padding:12px 0 12px 16px; color:var(--gray); }

  /* ---------- Section rhythm ---------- */
  .section{ padding:96px 0; }
  .section.tight{ padding:72px 0; }
  @media (max-width:768px){ .section{ padding:64px 0; } }
  .section.blue{ background:var(--blue); color:var(--white); }
  .section.blue p{ color:rgba(255,255,255,.82); }
  .section.black{ background:var(--black); color:var(--white); }
  .section.black p{ color:rgba(255,255,255,.7); }
  .section.tint{ background:var(--blue-tint); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap; }

  /* diagonal divider */
  .stripe-divider{ height:46px; background:repeating-linear-gradient(135deg, var(--blue) 0 26px, var(--blue-deep) 26px 52px); }

  /* ---------- Hero ---------- */
  .hero{ position:relative; background:var(--black); color:var(--white); overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch; min-height:640px; }
  .hero-copy{ position:relative; z-index:2; padding:120px 0 90px; display:flex; flex-direction:column; justify-content:center; }
  .hero-copy .wrap{ padding-right:0; }
  .hero-visual{ position:relative; background:var(--blue);
    clip-path:polygon(18% 0, 100% 0, 100% 100%, 0% 100%); }
  .hero-visual .field{ position:absolute; inset:0; background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 60px, transparent 60px 120px),
      linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%); }
  .hero-visual .badge-big{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .hero-tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
    padding:8px 14px; font-size:12.5px; font-weight:700; letter-spacing:.05em; border-radius:20px; margin-bottom:26px; width:fit-content; color:var(--white); }
  .hero-tag .dot{ width:7px; height:7px; background:var(--blue); border-radius:50%; }
  .hero h1{ font-size:clamp(44px,6.6vw,82px); line-height:.95; text-transform:uppercase; }
  .hero h1 span{ color:var(--blue); display:block; }
  .hero .lede{ color:rgba(255,255,255,.78); margin:26px 0 34px; font-size:18px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; min-height:auto; }
    .hero-visual{ clip-path:none; height:260px; order:-1; }
    .hero-copy{ padding:52px 0 56px; }
  }

  /* Page hero (interior pages) */
  .page-hero{ background:var(--black); color:var(--white); padding:76px 0 64px; position:relative; overflow:hidden; }
  .page-hero::after{ content:''; position:absolute; right:-60px; bottom:0px; width:280px; height:290px; background:var(--blue); opacity:.9;
    clip-path:polygon(45% 0,100% 0,100% 100%,70% 100%,0 100%); }
  .page-hero .wrap{ position:relative; z-index:2; }
  .page-hero .eyebrow{ color:var(--blue); }
  .page-hero h1{ color:var(--white); font-size:clamp(34px,5vw,56px); text-transform:uppercase; margin-top:10px; }
  .breadcrumb{ font-size:13px; color:rgba(255,255,255,.55); margin-bottom:16px; }
  .breadcrumb a:hover{ color:var(--white); }

  /* ---------- Cards ---------- */
  .grid{ display:grid; gap:28px; }
  .grid-6{ grid-template-columns:repeat(6,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  @media (max-width:980px){ .grid-6{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .grid-6{ grid-template-columns:repeat(2,1fr); } .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } }
  @media (max-width:420px){ .grid-6{ grid-template-columns:1fr; } }

  .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
  .card-media{ aspect-ratio:4/3; position:relative; background:var(--blue-tint-2); display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .card-media svg{ width:60%; height:60%; opacity:.9; }
  .card-media .tag{ position:absolute; top:14px; left:14px; background:var(--blue); color:var(--white); font-size:11.5px; font-weight:700;
    padding:6px 10px; letter-spacing:.04em; }
  .card-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
  .card-date{ font-size:12.5px; font-weight:700; color:var(--blue); margin-bottom:8px; letter-spacing:.03em;}
  .card h4{ font-size:18px; margin-bottom:10px; line-height:1.25; }
  .card p{ font-size:14.5px; margin-bottom:14px; }
  .card .readmore{ margin-top:auto; font-weight:700; font-size:14px; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
  .card:hover .readmore{ text-decoration:underline; }
  .card:hover .card-media svg{ transform:scale(1.04); }
  .card-media svg{ transition:transform .25s ease; }

  /* generic svg illustration blocks used instead of photography */
  .art-block{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--blue) 0%, var(--blue-deep) 100%); }
  .art-block.dark{ background:linear-gradient(150deg,#111 0%, #000 100%); }
  .art-block svg{ width:56%; opacity:.92; }

  /* ---------- Feature / intro section ---------- */
  .intro-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
  @media (max-width:860px){ .intro-split{ grid-template-columns:1fr; gap:36px; } }
  .stat-row{ display:flex; gap:36px; margin-top:30px; flex-wrap:wrap; }
  .stat b{ display:block; font-size:34px; font-weight:800; color:var(--blue); }
  .stat span{ font-size:13px; color:var(--gray); font-weight:600; }

  /* ---------- Events ---------- */
  .event-row{ display:flex; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
  .event-row:first-child{ padding-top:0; }
  .event-date{ flex:0 0 84px; text-align:center; background:var(--blue-tint); border:1px solid var(--blue-tint-2); padding:12px 6px; border-radius:var(--radius); }
  .event-date .d{ font-size:26px; font-weight:800; color:var(--blue); line-height:1; }
  .event-date .m{ font-size:12px; font-weight:700; text-transform:uppercase; color:var(--gray); margin-top:4px; }
  .event-body h4{ font-size:19px; margin-bottom:6px; }
  .event-meta{ font-size:13.5px; color:var(--gray); font-weight:600; margin-bottom:8px; }
  .event-meta span::after{ content:'·'; margin:0 8px; }
  .event-meta span:last-child::after{ content:''; }

  /* Match rows (Wedstrijden — full calendar list), mirrors .event-row */
  .match-row{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
  .match-row:first-child{ padding-top:0; }
  .match-row.is-past{ opacity:.5; }
  .match-row-date{ flex:0 0 60px; text-align:center; background:var(--blue-tint); border:1px solid var(--blue-tint-2); padding:8px 4px; border-radius:var(--radius); }
  .match-row-date .d{ font-size:19px; font-weight:800; color:var(--blue); line-height:1; }
  .match-row-date .m{ font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--gray); margin-top:2px; }
  .match-row-body{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .match-row-teams{ font-weight:700; font-size:15px; color:var(--black); }
  .match-row-teams span{ color:var(--black); }
  .match-row-teams .vs{ color:var(--gray); font-weight:500; margin:0 6px; }
  .match-row-teams .us{ color:var(--blue); }
  .match-row-time{ font-size:13px; font-weight:600; color:var(--gray); }

  /* ---------- Membership CTA ---------- */
  .cta-block{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center; }
  @media (max-width:860px){ .cta-block{ grid-template-columns:1fr; } }

  /* ---------- Sponsors ---------- */
  /* Full-bleed: deliberately not inside .wrap, so with ~60 sponsors the
     grid can use the whole page width instead of being capped at 1240px. */
  .sponsor-grid-wrap{ padding:0 28px; }
  @media (max-width:640px){ .sponsor-grid-wrap{ padding:0 20px; } }
  .sponsor-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  /* min-width:0 + overflow:hidden: by default a grid item won't shrink
     below its content's natural size, so a single wide logo image could
     push its column wider than its 1fr share and overflow the row off the
     right edge of the screen. This forces every cell to respect its
     allotted share regardless of what image is inside it. */
  .sponsor-cell{ background:var(--white); aspect-ratio:2/1; display:flex; align-items:center; justify-content:center; padding:18px; min-width:0; overflow:hidden; }
  @media (max-width:1400px){ .sponsor-grid{ grid-template-columns:repeat(8,1fr); } }
  @media (max-width:1100px){ .sponsor-grid{ grid-template-columns:repeat(6,1fr); } }
  @media (max-width:768px){ .sponsor-grid{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:480px){ .sponsor-grid{ grid-template-columns:repeat(2,1fr); } }
  /* Primarily hidden server-side (wp_is_mobile(), see footer.php) so none of
     the ~60 sponsor logos are ever requested on mobile — this is a visual
     backstop for the in-between cases that check doesn't catch. */
  @media (max-width:768px){ .sponsor-footer-section{ display:none; } }
  .sponsor-cell span{ font-weight:800; color:#B9BFC9; font-size:14px; letter-spacing:.02em; text-align:center; }

  /* Homepage sponsor banner — a compact, title-free logo strip (no cards,
     no heading): logos flow together and wrap onto as many rows as needed,
     with a subtle grayscale→color lift on hover for linked sponsors. */
  .sponsor-banner-section{ background:var(--white); padding-top:44px; padding-bottom:44px; }
  /* Primarily hidden server-side (wp_is_mobile(), see front-page.php) so the
     logo images are never requested on mobile in the first place — this is
     a visual-only backstop for the in-between cases that check doesn't
     catch, e.g. a tablet or a resized desktop browser window. */
  @media (max-width:768px){ .sponsor-banner-section{ display:none; } }
  .sponsor-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:36px 48px; }
  .sponsor-banner-logo{ display:flex; align-items:center; justify-content:center; height:104px; }
  .sponsor-banner-logo img{ height:104px; width:auto; max-width:250px; object-fit:contain; display:block; }

  /* ---------- Footer ---------- */
  footer.site{ background:var(--black); color:var(--white); padding:72px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14); }
  @media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-grid h5{ font-size:13px; font-weight:700; letter-spacing:.05em; color:rgba(255,255,255,.5); margin-bottom:18px; }
  .footer-grid a, .footer-grid p{ display:block; font-size:14.5px; color:rgba(255,255,255,.82); margin-bottom:12px; }
  .footer-grid a:hover{ color:var(--blue); }
  .footer-crest{ width:48px; margin-bottom:16px; }
  .footer-crest img, .footer-crest svg{ width:100%; height:auto; display:block; }
  .footer-logo{ font-size:22px; font-weight:800; margin-bottom:14px; }
  .footer-logo b{ color:var(--blue); }
  .social-row{ display:flex; gap:10px; margin-top:16px; }
  .social-row a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0; }
  .social-row a:hover{ background:var(--blue); border-color:var(--blue); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px; }
  .footer-bottom p{ font-size:13px; color:rgba(255,255,255,.45); margin:0; }

  /* ---------- Tables (content-editor tables, e.g. Lidgelden fee table) ----------
     Scoped broadly to any table an admin builds via the block editor inside a
     content area, so pasted/rebuilt tables always get a subtle row divider and
     never the block editor's own boxed cell borders (which can be set as inline
     styles that only !important can override). */
  .article-body table, table.fees, .fees table{ width:100%; border-collapse:collapse; margin:0; }
  .article-body table th, .article-body table td,
  table.fees th, table.fees td, .fees table th, .fees table td{
    text-align:left; padding:16px 18px; font-size:15px;
    border:none !important;
    border-bottom:1px solid var(--line) !important;
  }
  .article-body table tr:last-child th, .article-body table tr:last-child td,
  table.fees tr:last-child th, table.fees tr:last-child td,
  .fees table tr:last-child th, .fees table tr:last-child td{ border-bottom:none !important; }
  .article-body table th, table.fees th, .fees table th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); font-weight:700; background:var(--blue-tint); }
  .article-body table td:nth-child(2), table.fees td.price, .fees table td:nth-child(2){ font-weight:800; color:var(--blue); font-size:17px; }
  .fees{ margin:0; }

  /* Training info accordion */
  .accordion-item{ border-bottom:1px solid var(--line); }
  .accordion-item button{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 4px; background:none; border:none; text-align:left; }
  .accordion-item button .cat{ font-size:19px; font-weight:800; }
  .accordion-item button .plus{ font-size:24px; font-weight:300; color:var(--blue); transition:transform .2s; }
  .accordion-item.open button .plus{ transform:rotate(45deg); }
  .accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .accordion-item.open .accordion-panel{ max-height:260px; }
  .accordion-panel-inner{ padding:0 4px 26px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:640px){ .accordion-panel-inner{ grid-template-columns:1fr; } .accordion-item.open .accordion-panel{ max-height:420px; } }
  .ti-field{ font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--gray); text-transform:uppercase; margin-bottom:6px; }
  .ti-value{ font-size:16px; font-weight:700; }

  /* Profile cards */
  .profile-card{ text-align:left; }
  .profile-photo{ aspect-ratio:1/1; background:var(--blue-tint-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; border-radius:var(--radius); overflow:hidden;}
  .profile-photo svg{ width:46%; opacity:.85; }
  .profile-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
  .profile-role{ font-size:12px; color:var(--blue); font-weight:600; }

  /* Team cards (Ploegen) — photo-forward variant of the profile card */
  .team-card{ display:block; text-align:left; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .15s ease; }
  .team-card:hover, .team-card:focus-visible{ border-color:var(--blue); }
  .team-card:hover .team-photo svg{ transform:scale(1.04); }
  .team-photo svg{ transition:transform .25s ease; }
  .team-photo{ aspect-ratio:4/3; background:var(--blue-tint-2); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
  .team-photo svg{ width:34%; opacity:.85; }
  .team-photo .tag{ position:absolute; top:14px; left:14px; background:var(--blue); color:var(--white); font-size:11.5px; font-weight:700; padding:6px 10px; letter-spacing:.04em; }
  .team-card-body{ padding:20px; }
  .team-name{ font-weight:800; font-size:19px; margin-bottom:6px; }
  .team-coach{ font-size:13.5px; color:var(--blue); font-weight:600; margin-bottom:10px; }
  .team-meta{ font-size:13px; color:var(--gray); font-weight:600; }
  .team-meta span::after{ content:'·'; margin:0 7px; }
  .team-meta span:last-child::after{ content:''; }

  /* Highlighted team sponsors (team detail page) — deliberately more
     prominent than the muted footer sponsor strip: white cards, a blue
     top border, generous padding, and a lift on hover/focus when linked. */
  .team-sponsors-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:860px){ .team-sponsors-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .team-sponsors-grid{ grid-template-columns:1fr; } }
  .team-sponsor-card{ display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--blue); padding:26px 20px; min-height:120px; transition:transform .15s ease, box-shadow .15s ease; }
  .team-sponsor-card img{ height:70px; width:auto; max-width:100%; object-fit:contain; display:block; }
  a.team-sponsor-card:hover, a.team-sponsor-card:focus-visible{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
  /* Single column variant for the narrow sponsor slot on a team's own detail page */
  .team-sponsors-grid--stack{ grid-template-columns:1fr; }

  /* Team detail page: photo / trainingsinfo / sponsors, three across */
  .team-detail-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:36px; align-items:start; }
  @media (max-width:860px){ .team-detail-grid{ grid-template-columns:1fr; } }
  .team-detail-photo{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
  .team-detail-list{ list-style:none; margin:0; padding:0; }
  .team-detail-list li{ display:flex; flex-direction:column; gap:2px; padding:14px 0; border-bottom:1px solid var(--line); }
  .team-detail-list li:first-child{ padding-top:0; }
  .team-detail-list li strong{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray); }
  .team-detail-list li span{ font-size:16px; font-weight:600; }

  /* Next-match cards (homepage "Volgende wedstrijden" + Wedstrijden page) —
     white cards so they read clearly whether placed on the black homepage
     section or directly on a light page background. */
  .match-card{ display:block; text-align:left; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
  .match-card:hover, .match-card:focus-visible{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.18); }
  .match-photo{ aspect-ratio:16/7; background:var(--blue); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
  .match-photo img{ width:100%; height:100%; object-fit:cover; }
  .match-photo .tag{ position:absolute; top:14px; left:14px; background:var(--black); color:var(--white); font-size:11.5px; font-weight:700; padding:6px 10px; letter-spacing:.04em; }
  .match-card-body{ padding:22px; }
  .match-when{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
  .match-teams{ display:flex; align-items:baseline; gap:10px; font-weight:800; font-size:19px; margin-bottom:14px; flex-wrap:wrap; color:var(--black); }
  .match-teams span{ color:var(--black); }
  .match-teams .vs{ color:var(--gray); font-weight:600; font-size:15px; }
  .match-teams .us{ color:var(--blue); }
  .match-card .arrow{ font-size:13.5px; font-weight:700; color:var(--black); }

  /* Steps (Ongeval) */
  .steps{ counter-reset:step; }
  .step{ display:flex; gap:22px; padding:30px 0; border-bottom:1px solid var(--line); }
  .step:first-child{ padding-top:0; }
  .step-num{ flex:0 0 auto; width:44px; height:44px; border:2px solid var(--blue); color:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; }
  .step h4{ font-size:19px; margin-bottom:8px; }
  .step p a{ color:var(--blue); text-decoration:underline; font-weight:600; }
  .step p a:hover, .step p a:focus-visible{ color:var(--blue-deep,#004a96); }

  .info-box{ background:var(--blue-tint); border-left:4px solid var(--blue); padding:22px 24px; margin:32px 0; }
  .info-box p{ margin:0; color:var(--black); }
  .info-box strong{ display:block; margin-bottom:6px; }

  /* Inline action shown inside a step (e.g. the form-download link) */
  .step-action{ display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:var(--white); font-weight:700; font-size:14px; padding:10px 16px; border-radius:8px; margin-top:14px; text-decoration:none; }
  .step-action:hover, .step-action:focus-visible{ background:var(--blue-deep,#004a96); }
  .step-action-icon{ width:16px; height:16px; display:inline-flex; }
  .step-action-icon svg{ width:100%; height:100%; }

  /* Structured contact block shown inside a step (e.g. the secretary's details) */
  .step-contact{ margin-top:14px; padding:14px 16px; background:var(--blue-tint); border-radius:8px; display:flex; flex-direction:column; gap:2px; font-size:14px; }
  .step-contact strong{ font-size:14px; }
  .step-contact a{ color:var(--blue); font-weight:600; }

  /* "Belangrijk om te weten" — warnings & non-essential info pulled out of the
     step flow on purpose, so the steps above stay short and clear for parents.
     Black is used deliberately (per the brand's own principle: black =
     strength/attention) instead of an off-brand warning color. */
  .warning-box{ background:var(--black); color:var(--white); padding:26px 28px; margin:40px 0 0; border-radius:var(--radius,10px); }
  .warning-box-head{ font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); opacity:.7; margin-bottom:18px; }
  .warning-item{ padding:14px 0; border-top:1px solid rgba(255,255,255,.15); }
  .warning-item:first-of-type{ border-top:none; padding-top:0; }
  .warning-item h4{ font-size:16px; margin:0 0 6px; color:var(--white); }
  .warning-item p{ margin:0; color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.6; }

  .external-note{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--gray); background:var(--blue-tint); padding:8px 12px; border-radius:20px; margin-top:14px;}

  /* Category pills */
  .pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
  .pill{ padding:9px 16px; font-size:13.5px; font-weight:700; border:1.5px solid var(--line); border-radius:20px; background:var(--white); }
  .pill.active, .pill:hover{ border-color:var(--blue); color:var(--blue); }

  .featured-article{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; border:1px solid var(--line); margin-bottom:56px; }
  .featured-article .card-media{ aspect-ratio:auto; height:100%; }
  .featured-article .card-body{ padding:36px; justify-content:center; }
  .featured-article h3{ font-size:28px; margin-bottom:14px; }
  @media (max-width:800px){ .featured-article{ grid-template-columns:1fr; } .featured-article .card-media{ aspect-ratio:16/9; } }

  .article-content{ max-width:720px; margin:0 auto; }
  .article-content .article-body p, .article-body p{ color:var(--black); font-size:17px; line-height:1.75; }
  .article-meta-row{ display:flex; gap:16px; align-items:center; margin:18px 0 30px; font-size:13.5px; color:var(--gray); font-weight:600; }

  .club-tile{ position:relative; padding:36px 28px; border:1px solid var(--line); min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
  .club-tile::before{ content:''; position:absolute; top:0; right:0; width:70px; height:70px; background:var(--blue-tint); clip-path:polygon(100% 0,0 0,100% 100%); }
  .club-tile h3{ font-size:22px; margin-bottom:10px; }
  .club-tile:hover{ border-color:var(--blue); }
  .club-tile .arrow{ color:var(--blue); font-weight:700; }

  .team-select{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
  .team-btn{ padding:10px 18px; border:1.5px solid var(--line); font-weight:700; font-size:14.5px; border-radius:20px; background:var(--white); }
  .team-btn.active{ background:var(--black); color:var(--white); border-color:var(--black); }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  a[href]:focus-visible, button:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

/* ---------- WordPress core / editor compatibility ---------- */
.alignwide{ max-width:1400px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100%; max-width:none; }
.alignleft{ float:left; margin:0 24px 16px 0; }
.alignright{ float:right; margin:0 0 16px 24px; }
.aligncenter{ display:block; margin:0 auto 16px; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:13px; color:var(--gray); margin-top:6px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
nav.main > a.current-menu-item, nav.main > a.current_page_item{ color:var(--blue); }
.has-dropdown.current-menu-parent > button, .has-dropdown.current_page_parent > button{ color:var(--blue); }
.article-body img{ max-width:100%; height:auto; margin:20px 0; }
.article-body a{ color:var(--blue); text-decoration:underline; }
.article-body ul, .article-body ol{ color:var(--black); padding-left:22px; margin-bottom:1em; }
.article-body ul li, .article-body ol li{ margin-bottom:10px; line-height:1.75; }
.article-body ul li:last-child, .article-body ol li:last-child{ margin-bottom:0; }
.wp-block-quote, blockquote{ border-left:4px solid var(--blue); margin:24px 0; padding:4px 0 4px 20px; font-style:italic; color:var(--black); }
.admin-bar header.site{ top:32px; }
@media (max-width:782px){ .admin-bar header.site{ top:46px; } }
.pagination{ display:flex; gap:10px; margin-top:40px; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:10px 16px; border:1.5px solid var(--line); font-weight:700; font-size:14px; }
.pagination .current{ background:var(--black); color:#fff; border-color:var(--black); }
.pagination a:hover{ border-color:var(--blue); color:var(--blue); }