/*
Theme Name: ICT Ocean
Theme URI: https://ict-ocean.eu
Author: ICT Ocean
Author URI: https://ict-ocean.eu
Description: Thema voor ICT Ocean, onafhankelijk kennisplatform over ICT voor het mkb.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ictocean
*/

/* ---------- Fonts (lokaal, AVG-vriendelijk) ---------- */
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/pt-sans-400.woff2) format("woff2")}
@font-face{font-family:"PT Sans";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/pt-sans-400-italic.woff2) format("woff2")}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/pt-sans-700.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --brand:#00467F; --brand-dark:#002E54; --accent:#E87722; --accent-text:#A34C00;
  --ink:#222B33; --muted:#4A5763; --surface:#FFFFFF; --surface-alt:#EEF3F8; --page:#F5F7FA;
  --border:#D3D9E0; --field-border:#7B8794; --on-brand:#FFFFFF; --placeholder:#C3CFDB;
  --font:"PT Sans",Arial,Helvetica,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --radius:3px; --wrap:1200px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:28px;color:var(--ink);background:var(--surface)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.main-nav :focus-visible,.site-footer :focus-visible,.box-brand :focus-visible,.dossier-head :focus-visible{outline-color:#FFFFFF}
h1,h2,h3,h4{font-weight:700;color:var(--brand);margin:0}
h1{font-size:32px;line-height:40px}
h2{font-size:24px;line-height:32px}
h3{font-size:19px;line-height:26px}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;background:var(--surface);padding:12px 16px;font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
@media (max-width:600px){.wrap{padding-left:var(--s2);padding-right:var(--s2)}}

/* ---------- Elementen ---------- */
.label{display:inline-block;font-size:13px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);text-decoration:none}
.meta{font-size:14px;line-height:20px;color:var(--muted)}
.btn,.wp-block-button__link,input[type=submit],button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--brand);color:var(--on-brand);font:inherit;font-weight:700;font-size:17px;border:0;border-radius:var(--radius);text-decoration:none;cursor:pointer}
.btn:hover,.wp-block-button__link:hover,input[type=submit]:hover,button[type=submit]:hover{background:var(--brand-dark);color:var(--on-brand)}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:hover{background:#D0661A;color:var(--ink)}
.btn--light{background:var(--surface);color:var(--brand)}
.btn--light:hover{background:var(--surface-alt);color:var(--brand-dark)}
.more{font-weight:700;text-decoration:none;display:inline-block;padding:14px 0}
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],select,textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--field-border);border-radius:var(--radius);min-height:44px;padding:0 12px;width:100%}
textarea{padding:10px 12px;min-height:160px;resize:vertical}
label{font-weight:700;font-size:15px}
.placeholder{background:var(--placeholder)}
.section-title{padding-bottom:var(--s1);border-bottom:2px solid var(--brand)}

/* ---------- Header ---------- */
.site-header{background:var(--surface)}
.site-header__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:20px;padding-bottom:20px}
.site-logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none}
.site-logo img{height:50px;width:auto}
.site-logo__tagline{font-size:13px;line-height:16px;color:var(--muted)}
.site-header__tools{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-size:15px}
.service-menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.service-menu a{text-decoration:none}
.service-menu a:hover{text-decoration:underline}
.search-inline{display:flex}
.search-inline__field{display:flex;align-items:center;gap:8px;height:44px;width:240px;padding:0 12px;border:1px solid var(--field-border);border-right:0;border-radius:var(--radius) 0 0 var(--radius)}
.search-inline__field input{border:0;min-height:0;height:40px;padding:0;outline-offset:4px}
.search-inline button{border-radius:0 var(--radius) var(--radius) 0;font-size:15px;padding:0 16px}
.main-nav{background:var(--brand)}
.main-nav .wrap{display:flex;align-items:stretch}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.main-nav a{display:flex;align-items:center;min-height:52px;padding:0 16px;color:var(--on-brand);font-weight:700;font-size:16px;text-decoration:none;border-bottom:4px solid transparent}
.main-nav li:first-child a{padding-left:0}
.main-nav a:hover{background:var(--brand-dark);color:var(--on-brand)}
.main-nav .current-menu-item>a,.main-nav .current-menu-ancestor>a,.main-nav .current-post-ancestor>a,.main-nav .current-category-ancestor>a{background:var(--brand-dark);border-bottom-color:var(--accent);padding-left:16px}
.main-nav .sub-menu{display:none}
.nav-toggle{display:none;align-items:center;gap:10px;min-height:52px;background:none;border:0;color:var(--on-brand);font:inherit;font-weight:700;font-size:16px;cursor:pointer;padding:0}
@media (max-width:860px){
  .search-inline__field{width:auto;flex:1}
  .site-header__tools,.search-inline{width:100%}
  .js .nav-toggle{display:inline-flex}
  .main-nav .wrap{flex-direction:column}
  .main-nav ul{flex-direction:column;padding-bottom:var(--s1)}
  .js .main-nav ul{display:none}
  .js .main-nav.is-open ul{display:flex}
  .main-nav a,.main-nav li:first-child a{padding:0 12px;border-bottom:0;border-left:4px solid transparent}
  .main-nav .current-menu-item>a{border-left-color:var(--accent);padding-left:12px}
}

/* ---------- Breadcrumb / page head ---------- */
.breadcrumb{font-size:14px;line-height:20px;color:var(--muted)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.page-head{background:var(--surface-alt);border-bottom:1px solid var(--border)}
.page-head .wrap{padding-top:var(--s3);padding-bottom:var(--s4);display:flex;flex-direction:column;gap:12px}
.page-head__intro{max-width:720px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);padding-top:4px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--field-border);color:var(--brand);font-weight:700;font-size:15px;text-decoration:none}
.chip:hover{border-color:var(--brand)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip--small{min-height:36px;padding:0 12px;font-size:14px}

/* ---------- Layout met zijbalk ---------- */
.layout{display:flex;flex-wrap:wrap;gap:40px;padding-top:40px;padding-bottom:var(--s5)}
.layout__main{flex:999 1 560px;min-width:0}
.layout__aside{flex:1 1 280px;display:flex;flex-direction:column;gap:28px}
.layout--article{gap:var(--s5)}
.layout--article .layout__main{max-width:760px}

/* ---------- Homepage ---------- */
.hero{background:var(--placeholder);background-size:cover;background-position:center}
.hero .wrap{min-height:400px;display:flex;align-items:center;padding-top:56px;padding-bottom:56px}
.hero__box{background:var(--surface);max-width:560px;width:100%;padding:var(--s4);border-bottom:6px solid var(--accent);display:flex;flex-direction:column;gap:12px}
.hero__title{font-size:40px;line-height:48px}
.hero__title a{text-decoration:none}
@media (max-width:600px){.hero__title{font-size:30px;line-height:38px}.hero__box{padding:var(--s3)}}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s5)}
.list-item{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.list-item__title{font-size:19px;line-height:26px;font-weight:700;color:var(--brand)}
.list-item:hover .list-item__title{text-decoration:underline}
.list-item__sub{font-size:14px;line-height:20px;color:var(--muted)}
.box-alt{background:var(--surface-alt);padding:var(--s3);display:flex;flex-direction:column;gap:12px;align-self:start}
.box-alt--accent{border-bottom:6px solid var(--accent)}
.box-brand{background:var(--brand);color:var(--on-brand);padding:var(--s3);display:flex;flex-direction:column;gap:10px;border-bottom:6px solid var(--accent)}
.box-brand h2,.box-brand h3,.box-brand a{color:var(--on-brand)}
.box-brand .label{color:var(--on-brand)}
.box-line{border:1px solid var(--border);border-top:4px solid var(--brand);padding:20px;display:flex;flex-direction:column;gap:10px}
.band{background:var(--surface-alt)}
.band .wrap{padding-top:var(--s5);padding-bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.band__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
.rubriek-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s2)}
.rubriek-card{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--brand);padding:var(--s2);display:flex;flex-direction:column;gap:10px}
.rubriek-card__name{font-size:19px;line-height:26px;font-weight:700;text-decoration:none}
.rubriek-card__link{font-size:15px;line-height:22px;color:var(--ink);padding-top:10px;border-top:1px solid var(--border);text-decoration:none}
.rubriek-card__link:hover{color:var(--brand);text-decoration:underline}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.card__img{aspect-ratio:16/10;background:var(--placeholder);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__title{font-size:19px;line-height:26px;font-weight:700;color:var(--brand)}
.card:hover .card__title{text-decoration:underline}
.card__intro{font-size:15px;line-height:22px}
.card--boxed{background:var(--surface);border:1px solid var(--border);padding:18px;gap:8px}
.section{padding-top:var(--s5);padding-bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}

/* ---------- Archief / rubriek ---------- */
.featured{display:flex;flex-wrap:wrap;gap:var(--s3);padding-bottom:var(--s4);border-bottom:2px solid var(--brand);text-decoration:none;color:var(--ink)}
.featured__img{flex:1 1 300px;min-height:220px;background:var(--placeholder)}
.featured__img img{width:100%;height:100%;object-fit:cover}
.featured__body{flex:1 1 300px;display:flex;flex-direction:column;gap:10px}
.featured__title{font-size:24px;line-height:32px;font-weight:700;color:var(--brand)}
.featured:hover .featured__title{text-decoration:underline}
.row-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.row-item__img{flex:0 0 160px;height:106px;background:#DCE3EA;overflow:hidden}
.row-item__img img{width:100%;height:100%;object-fit:cover}
.row-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.row-item__title{font-size:19px;line-height:26px;font-weight:700;color:var(--brand)}
.row-item:hover .row-item__title{text-decoration:underline}
.row-item__intro{font-size:15px;line-height:22px}
@media (max-width:600px){.row-item__img{flex-basis:96px;height:72px}}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--s1);padding-top:var(--s3)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--field-border);font-weight:700;text-decoration:none}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pagination .page-numbers.dots{border:0}
.numbered{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--ink);font-weight:700;font-size:15px;line-height:22px;text-decoration:none}
.numbered span:first-child{color:var(--accent-text);min-width:16px}
.numbered:hover span:last-child{color:var(--brand);text-decoration:underline}
.side-title{font-size:19px;line-height:26px;padding-bottom:var(--s1);border-bottom:2px solid var(--brand)}

/* ---------- Artikel ---------- */
.article-head{display:flex;flex-direction:column;gap:20px}
.article-lead{font-size:20px;line-height:30px}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.article-figure{margin:0;display:flex;flex-direction:column;gap:var(--s1)}
.article-figure figcaption,.wp-element-caption{font-size:14px;line-height:20px;color:var(--muted)}
.entry-content{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.entry-content>*{margin-top:0;margin-bottom:0}
.entry-content h2{margin-top:12px;scroll-margin-top:16px}
.entry-content h3{margin-top:8px}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li+li{margin-top:4px}
.entry-content blockquote{margin:0;padding:var(--s2) var(--s3);background:var(--surface-alt);border-top:4px solid var(--brand)}
.entry-content table{border-collapse:collapse;width:100%;font-size:15px}
.entry-content .wp-block-table{overflow-x:auto}
.entry-content th,.entry-content td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.entry-content th{background:var(--surface-alt)}
.entry-content figure{margin:0}
.entry-content a{text-underline-offset:2px}
.in-het-kort{background:var(--surface-alt);padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.in-het-kort>*{margin:0}
.in-het-kort h2,.in-het-kort h3,.in-het-kort .in-het-kort__title{font-size:19px;line-height:26px;margin:0!important}
.lees-ook{border:1px solid var(--border);border-top:4px solid var(--brand);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.lees-ook>*{margin:0}
.lees-ook a{font-size:19px;line-height:26px;font-weight:700;text-decoration:none}
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);padding-top:12px;margin-top:var(--s3);border-top:1px solid var(--border)}
.toc{display:flex;flex-direction:column;border-top:3px solid var(--brand)}
.toc__title{font-size:19px;line-height:26px;font-weight:700;color:var(--brand);padding:12px 0 4px}
.toc a{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:22px;text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- Dossier ---------- */
.dossier-head{background:var(--brand);color:var(--on-brand);border-bottom:6px solid var(--accent)}
.dossier-head a,.dossier-head h1,.dossier-head .breadcrumb,.dossier-head .label{color:var(--on-brand)}
.dossier-head .wrap{padding-top:var(--s3);padding-bottom:var(--s5);display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.dossier-head__text{flex:999 1 520px;display:flex;flex-direction:column;gap:14px}
.dossier-head__text h1{font-size:40px;line-height:48px}
.dossier-head__intro{font-size:19px;line-height:30px;max-width:680px}
.dossier-head__img{flex:1 1 300px;min-height:220px;background:#3E6A93;overflow:hidden}
.dossier-head__img img{width:100%;height:100%;object-fit:cover}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s3)}
.step{border:1px solid var(--border);border-top:4px solid var(--brand);display:flex;flex-direction:column}
.step__head{padding:18px 20px 10px;display:flex;flex-direction:column;gap:6px}
.step__link{padding:12px 20px;border-top:1px solid var(--border);font-weight:700;font-size:15px;line-height:22px;text-decoration:none}
.step__link:hover{text-decoration:underline}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--border)}
.faq summary{cursor:pointer;padding:14px 18px;min-height:44px;font-weight:700;color:var(--brand)}
.faq details>div{padding:0 18px 16px}
.plain-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none}
.plain-row span:first-child{font-weight:700}
.plain-row:hover span:first-child{text-decoration:underline}

/* ---------- Zoeken / formulieren ---------- */
.search-big{display:flex;max-width:640px}
.search-big__field{flex:1;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;background:var(--surface);border:1px solid var(--field-border);border-right:0;border-radius:var(--radius) 0 0 var(--radius)}
.search-big__field input{border:0;min-height:0;height:48px;padding:0}
.search-big button{min-height:52px;border-radius:0 var(--radius) var(--radius) 0;padding:0 22px}
.filters fieldset{margin:0 0 var(--s3);padding:0;border:0;display:flex;flex-direction:column;gap:4px}
.filters legend{font-size:19px;line-height:26px;font-weight:700;color:var(--brand);padding-bottom:var(--s1)}
.filters label{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:400}
.filters input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.results-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--brand)}
.results-bar select{width:auto;min-height:40px}
.entry-content form p{margin-bottom:18px}
.wpcf7-form label,.wpforms-field-label{display:block;margin-bottom:6px}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-dark);color:var(--on-brand);border-top:6px solid var(--accent);font-size:15px;line-height:22px}
.site-footer a{color:var(--on-brand)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s4)}
.site-footer__col{display:flex;flex-direction:column;gap:10px}
.site-footer__title{font-weight:700;font-size:17px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer .site-logo img{height:40px;width:auto}
.site-footer__bottom{border-top:1px solid #3E5C7A}
.site-footer__bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:var(--s2);padding-bottom:var(--s3);font-size:14px}
.site-footer__bottom ul{flex-direction:row;flex-wrap:wrap;gap:20px}

/* ---------- WordPress ---------- */
.alignwide{max-width:100%}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-block-image img{height:auto}
.sticky,.bypostauthor,.gallery-caption{}
.in-het-kort>.wp-block-group__inner-container,.lees-ook>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:8px}
.in-het-kort .wp-block-group__inner-container>*,.lees-ook .wp-block-group__inner-container>*{margin:0}

.row-item--noimg .row-item__img,.featured--noimg .featured__img{display:none}
.hero--noimg{background:var(--surface-alt)}
.hero--noimg .wrap{min-height:0}