/* ============================================================
   modern.css — Het Portaal visual modernization (CSS-only)
   Loads AFTER child-theme.min.css AND js_composer.min.css.
   Scope: every rule prefixed body.hetportaal (except documented
   inline-style overrides). Brand colors/fonts/logos/media UNCHANGED.
   Only spacing/layout/radius/shadow/component polish; proportions
   borrowed from the portaal-web reference.
   ============================================================ */

/* ----------------------------------------------------------------
   (a) TOKENS
   ---------------------------------------------------------------- */
:root{
/* --- BRAND (UNCHANGED) --- */
--hp-primary:#ee7c00;          /* orange */
--hp-primary-ink:#ffffff;      /* text on orange */
--hp-primary-tint:rgba(238,124,0,.15);
--hp-secondary:#bcd5f0;        /* light blue */
--hp-text:#333333;
--hp-text-muted:#666666;

/* --- NEUTRALS / BORDERS (new scaffolding, not a recolor) --- */
--hp-bg:#ffffff;
--hp-bg-subtle:#f6f7f9;
--hp-border:#e6e8eb;
--hp-border-strong:#d7dade;

/* --- SPACING SCALE --- */
--hp-space-1:4px;
--hp-space-2:8px;
--hp-space-3:12px;
--hp-space-4:16px;
--hp-space-5:24px;
--hp-space-6:28px;
--hp-space-7:40px;
--hp-space-8:64px;
--hp-section-y:clamp(48px, 6vw, 96px);
--hp-gutter:28px;
--hp-container:1240px;

/* --- RADIUS --- */
--hp-radius-sm:6px;
--hp-radius-md:10px;
--hp-radius-lg:18px;
--hp-radius-xl:28px;
--hp-radius-pill:999px;

/* --- SHADOWS --- */
--hp-shadow-sm:0 1px 2px rgba(20,24,31,.04), 0 1px 1px rgba(20,24,31,.03);
--hp-shadow-md:0 4px 14px -6px rgba(20,24,31,.10), 0 2px 4px rgba(20,24,31,.04);
--hp-shadow-lg:0 24px 48px -18px rgba(20,24,31,.18), 0 6px 14px -8px rgba(20,24,31,.08);

/* --- TYPE (sizes/rhythm only; families left to existing CSS) --- */
--hp-lh-body:1.65;
--hp-lh-heading:1.2;
--hp-tracking-heading:-0.01em;
--hp-fs-h1:clamp(2rem, 1.4rem + 2vw, 3rem);
--hp-fs-h2:clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
--hp-fs-h3:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);

/* --- MOTION / NAV --- */
--hp-ease:cubic-bezier(.4, 0, .2, 1);
--hp-dur:.18s;
--hp-nav-blur:saturate(180%) blur(10px);
--hp-nav-bg:rgba(255,255,255,.82);
}

/* ----------------------------------------------------------------
   (b) BASE / TYPE RHYTHM  (families untouched)
   ---------------------------------------------------------------- */
body.hetportaal{
color:var(--hp-text);
line-height:var(--hp-lh-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* sticky needs no overflow:hidden ancestor; keep horizontal containment */
body.hetportaal,
body.hetportaal #page{ overflow:visible; overflow-x:clip; }

body.hetportaal h1,
body.hetportaal h2,
body.hetportaal h3,
body.hetportaal h4{
line-height:var(--hp-lh-heading);
letter-spacing:var(--hp-tracking-heading);
margin-top:0;
}
body.hetportaal h1{ font-size:var(--hp-fs-h1); margin-bottom:var(--hp-space-5); }
body.hetportaal h2{ font-size:var(--hp-fs-h2); margin-bottom:var(--hp-space-4); }
body.hetportaal h3{ font-size:var(--hp-fs-h3); margin-bottom:var(--hp-space-3); }
body.hetportaal p{ margin-bottom:var(--hp-space-4); }
body.hetportaal a{ transition:color var(--hp-dur) var(--hp-ease); }

/* ----------------------------------------------------------------
   (c) LAYOUT — container width + section rhythm
   ---------------------------------------------------------------- */
body.hetportaal .container{ max-width:var(--hp-container); }
body.hetportaal #content{ padding-top:var(--hp-section-y); padding-bottom:var(--hp-section-y); }
body.hetportaal .wrapper{ padding-top:0; padding-bottom:0; }

/* ----------------------------------------------------------------
   (d) BUTTONS — pill + hover lift (orange kept)
   ---------------------------------------------------------------- */
body.hetportaal .btn,
body.hetportaal .woocommerce a.button,
body.hetportaal .woocommerce button.button,
body.hetportaal input[type="submit"].btn{
border-radius:var(--hp-radius-pill);
padding:.6em 1.4em;
font-weight:600;
border-width:1px;
transition:transform var(--hp-dur) var(--hp-ease),
             box-shadow var(--hp-dur) var(--hp-ease),
             background-color var(--hp-dur) var(--hp-ease),
color var(--hp-dur) var(--hp-ease);
}
body.hetportaal .btn-primary,
body.hetportaal .woocommerce a.button.alt,
body.hetportaal .woocommerce button.button.alt{
background-color:var(--hp-primary);
border-color:var(--hp-primary);
color:var(--hp-primary-ink);
box-shadow:var(--hp-shadow-sm);
}
body.hetportaal .btn-primary:hover,
body.hetportaal .btn-primary:focus,
body.hetportaal .woocommerce a.button:hover,
body.hetportaal .woocommerce button.button:hover{
transform:translateY(-2px);
box-shadow:var(--hp-shadow-md);
}
body.hetportaal .btn:focus-visible{
outline:2px solid var(--hp-primary);
outline-offset:2px;
}

/* ----------------------------------------------------------------
   (e) CARDS & GRIDS
   ---------------------------------------------------------------- */
/* List/news cards: .post.col-md-4.post-row > .post-inner */
body.hetportaal .row.row-eq-height > .post{ display:flex; }
body.hetportaal .post-inner{
display:flex;
flex-direction:column;
width:100%;
background:var(--hp-bg);
border:1px solid var(--hp-border);
border-radius:var(--hp-radius-lg);
overflow:hidden;
box-shadow:var(--hp-shadow-sm);
transition:transform var(--hp-dur) var(--hp-ease),
             box-shadow var(--hp-dur) var(--hp-ease),
             border-color var(--hp-dur) var(--hp-ease);
}
body.hetportaal .post-inner:hover{
transform:translateY(-4px);
box-shadow:var(--hp-shadow-lg);
border-color:var(--hp-secondary);
}
body.hetportaal .post-inner > a:first-child{ display:block; overflow:hidden; }
body.hetportaal .post-inner > a:first-child img,
body.hetportaal .post-inner img.wp-post-image{
width:100%;
height:auto;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
transition:transform .35s var(--hp-ease);
}
body.hetportaal .post-inner:hover > a:first-child img{ transform:scale(1.04); }
body.hetportaal .post-inner .entry-header{ padding:var(--hp-space-5) var(--hp-space-5) 0; }
body.hetportaal .post-inner .entry-header > a[href]:first-child{
font-size:.8rem;
font-weight:600;
letter-spacing:.02em;
text-transform:uppercase;
color:var(--hp-primary);
}
body.hetportaal .post-inner h3.entry-title{
font-size:var(--hp-fs-h3) !important; /* beats inline style="font-size:1.1rem" in content-list-single.php */
line-height:var(--hp-lh-heading);
margin:var(--hp-space-1) 0 0;
}
body.hetportaal .post-inner a.ttitle{ color:var(--hp-text); text-decoration:none; }
body.hetportaal .post-inner a.ttitle:hover h3.entry-title{ color:var(--hp-primary); }
body.hetportaal .post-inner .text-content{
padding:var(--hp-space-3) var(--hp-space-5) var(--hp-space-5);
color:var(--hp-text-muted);
margin-top:auto;
}

/* [layout] shortcode cards */
body.hetportaal .post.layout-one,
body.hetportaal .post.layout-two{
background:var(--hp-bg);
border:1px solid var(--hp-border);
border-radius:var(--hp-radius-lg);
box-shadow:var(--hp-shadow-sm);
padding:var(--hp-space-5);
margin-bottom:var(--hp-gutter);
transition:transform var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .post.layout-one:hover,
body.hetportaal .post.layout-two:hover{
transform:translateY(-4px);
box-shadow:var(--hp-shadow-lg);
}
body.hetportaal .post.layout-one .featured-image img,
body.hetportaal .post.layout-two .featured-image img{ border-radius:var(--hp-radius-md); }

/* ----------------------------------------------------------------
   (f) HEADER / NAV — sticky + blur (orange nav kept)
   ---------------------------------------------------------------- */
body.hetportaal #wrapper-navbar{
position:sticky;
top:0;
z-index:1030;
background:var(--hp-nav-bg);
-webkit-backdrop-filter:var(--hp-nav-blur);
backdrop-filter:var(--hp-nav-blur);
box-shadow:var(--hp-shadow-sm);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body.hetportaal #wrapper-navbar{ background:#fff; }
}
body.hetportaal #wrapper-navbar .header-bottom{ padding-top:var(--hp-space-3); padding-bottom:var(--hp-space-3); }
body.hetportaal #wrapper-navbar .navbar-brand{ padding-top:0; padding-bottom:0; }

/* primary menu links */
body.hetportaal .navbar-nav .nav-link{
font-weight:600;
padding:.5rem .9rem;
border-radius:var(--hp-radius-sm);
transition:background-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}
body.hetportaal .navbar-nav .nav-link:hover,
body.hetportaal .navbar-nav .nav-link:focus,
body.hetportaal .navbar-nav .active > .nav-link{
background:rgba(255,255,255,.18);
}
/* dropdowns */
body.hetportaal .navbar-nav .dropdown-menu{
border:1px solid var(--hp-border);
border-radius:var(--hp-radius-md);
box-shadow:var(--hp-shadow-md);
padding:var(--hp-space-2);
margin-top:var(--hp-space-2);
}
body.hetportaal .navbar-nav .dropdown-menu .nav-link,
body.hetportaal .navbar-nav .dropdown-menu .dropdown-item{ color:var(--hp-text); }
body.hetportaal .navbar-nav .dropdown-menu .nav-link:hover{ background:var(--hp-bg-subtle); }

/* search toggle + field */
body.hetportaal .btn.search-toggle{
border-radius:var(--hp-radius-pill);
color:var(--hp-primary-ink);
}
/* WPML legacy language switcher — spacing/radius only */
body.hetportaal .header_language_switcher .wpml-ls-legacy-dropdown,
body.hetportaal .header_language_switcher .wpml-ls{ min-width:0; }
body.hetportaal .header_language_switcher .wpml-ls a{
border-radius:var(--hp-radius-sm);
border-color:var(--hp-border);
}

/* ----------------------------------------------------------------
   (g) FOOTER — orange top kept, modern rhythm
   ---------------------------------------------------------------- */
body.hetportaal #wrapper-footer-top{
padding-top:var(--hp-section-y);
padding-bottom:var(--hp-section-y);
}
body.hetportaal .site-footer-top .widget-area{ color:var(--hp-primary-ink); }
body.hetportaal .site-footer-top h1,
body.hetportaal .site-footer-top h2,
body.hetportaal .site-footer-top h3,
body.hetportaal .site-footer-top .widget-title,
body.hetportaal .site-footer-top .widgettitle{
color:var(--hp-primary-ink);
margin-bottom:var(--hp-space-4);
}
body.hetportaal .site-footer-top a{
color:var(--hp-primary-ink);
text-decoration:none;
opacity:.92;
}
body.hetportaal .site-footer-top a:hover{ opacity:1; text-decoration:underline; }
body.hetportaal .site-footer-top .widget{ margin-bottom:var(--hp-space-6); }
body.hetportaal #wrapper-footer-bottom{
padding-top:var(--hp-space-5);
padding-bottom:var(--hp-space-5);
background:var(--hp-bg-subtle);
}
body.hetportaal #wrapper-footer-bottom .site-info{ color:var(--hp-text-muted); }

/* ----------------------------------------------------------------
   (h) FORMS / CF7 / SEARCH
   ---------------------------------------------------------------- */
body.hetportaal .search-form .form-control,
body.hetportaal .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.hetportaal .wpcf7 textarea,
body.hetportaal .wpcf7 select{
border:1px solid var(--hp-border-strong);
border-radius:var(--hp-radius-md);
padding:.6em .9em;
background:var(--hp-bg);
color:var(--hp-text);
transition:border-color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .search-form .form-control:focus,
body.hetportaal .wpcf7 input:focus,
body.hetportaal .wpcf7 textarea:focus,
body.hetportaal .wpcf7 select:focus{
border-color:var(--hp-primary);
box-shadow:0 0 0 3px var(--hp-primary-tint);
outline:none;
}
body.hetportaal .wpcf7 .wpcf7-submit{
border-radius:var(--hp-radius-pill);
background:var(--hp-primary);
color:var(--hp-primary-ink);
border:none;
padding:.6em 1.4em;
font-weight:600;
transition:transform var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .wpcf7 .wpcf7-submit:hover{ transform:translateY(-2px); box-shadow:var(--hp-shadow-md); }

/* ----------------------------------------------------------------
   (i) RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width:991px){
body.hetportaal #wrapper-navbar{
background:#fff; /* avoid orange bleed through blur on mobile */
-webkit-backdrop-filter:none;
backdrop-filter:none;
  }
}

/* ----------------------------------------------------------------
   (j) HOMEPAGE-SPECIFIC  (body.home / body.page-id-339)
   ---------------------------------------------------------------- */
/* fix double-container inset from the shortcode's inner .container */
body.home #content .container,
body.page-id-339 #content .container{ padding-left:0; padding-right:0; max-width:none; }
body.home .vc_grid-container,
body.home .vc_basic_grid{ margin-bottom:0; }

/* news grid -> responsive CSS grid (cancels .col-md-4 widths) */
body.home .row.row-eq-height,
body.page-id-339 .row.row-eq-height{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--hp-gutter);
margin:0;
}
body.home .row.row-eq-height > .post,
body.page-id-339 .row.row-eq-height > .post{
width:auto;
max-width:none;
flex:none;
padding:0;
margin:0;
}
@media (max-width:991px){
body.home .row.row-eq-height,
body.page-id-339 .row.row-eq-height{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575px){
body.home .row.row-eq-height,
body.page-id-339 .row.row-eq-height{ grid-template-columns:1fr; }
}

/* optional intro/hero band (filled via existing frontpage widgets) */
body.home .top-section.front{
background:var(--hp-bg-subtle);
padding-top:var(--hp-space-8);
padding-bottom:var(--hp-space-8);
margin-bottom:var(--hp-space-7);
}
body.home .top-section.front .container{ max-width:var(--hp-container); }