/*
Theme Name: TopConsulenten Blog
Theme URI: https://topconsulenten.blog
Author: TopConsulenten
Description: Licht child-thema van Twenty Twenty-Five met merkkleuren, Open Sans, Hind, merkenheader, homepage-hero, inspiratiekaarten en verhalengrid.
Template: twentytwentyfive
Version: 0.1.21
Text Domain: topconsulenten-blog
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Shared content width — header, hero and horoscope pages align to this edge */
:root{
  --tc-wrap: 72rem;
  --tc-gutter: var(--wp--preset--spacing--40, 1.25rem);
  --tc-heading: #09292F;
  --tc-text: #2B3A42;
  --tc-text-muted: #555555;
  --tc-brand: #1478C5;
  --tc-brand-hover: #0F64A8;
  --tc-link: #0F64A8;
  --tc-link-hover: #0C528A;
}

/* Header: match topconsulenten.nl nav#navbar.
   Colour is #3097D1 (identical to .nl; Kees, 11 nov 2026). Height is locked
   at 60px at every width — same as .nl h-15. Logo/wordmark follow Tailwind sm (640). */
.tc-header{
  background:#3097D1 !important;
  color:#fff;
  min-height:60px !important;
  height:60px !important;
  max-height:60px !important;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  overflow:hidden;
  box-shadow:0 5px 14px -9px rgba(0,0,0,.65);
}
.tc-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
  max-width:var(--tc-wrap);
  margin-inline:auto;
  width:100%;
  height:40px;
  min-height:40px;
  max-height:40px;
  padding:0 6px;
  box-sizing:border-box;
}
.tc-brand{
  display:inline-flex;
  align-items:center;
  color:#fff;
  text-decoration:none;
  line-height:1.5;
  flex:0 0 auto;
}
.tc-brand:hover,.tc-brand:focus{color:#fff;text-decoration:none;opacity:.92}
.tc-brand:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.tc-brand__icon{
  display:block;
  flex:0 0 auto;
  width:32px;
  height:32px;
  margin-right:.25rem;
}
.tc-brand__text{
  font-family:"Open Sans",sans-serif;
  font-weight:600;
  font-size:14px;
  font-style:normal;
  letter-spacing:normal;
  line-height:20px;
  color:#fff;
  text-transform:none;
  white-space:nowrap;
}
.tc-header__end{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex:0 0 auto;
  min-width:0;
}
.tc-nav{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.tc-nav a{
  color:#fff !important;
  font-family:"Open Sans",sans-serif;
  font-weight:600;
  font-size:.875rem;
  line-height:1.5;
  letter-spacing:normal;
  text-decoration:none !important;
  text-transform:none;
  white-space:nowrap;
}
.tc-nav a:hover,.tc-nav a:focus{opacity:.92}
.tc-nav a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
.tc-header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#09292F !important;
  font-family:"Open Sans",sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:20px;
  border-radius:6px;
  padding:6px 6px;
  height:40px;
  box-sizing:border-box;
  text-decoration:none !important;
  white-space:nowrap;
  border:1px solid #cce3fd;
  flex:0 0 auto;
}
.tc-header-cta:hover,.tc-header-cta:focus{opacity:.94;color:#09292F !important}
.tc-header-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tc-cta-short{display:inline}
.tc-cta-full{display:none}
@media (min-width:640px){
  /* .nl sm: 44×44 logo, 20px/28px/600 wordmark, inner 44px, padding 0 16px */
  .tc-header__inner{height:44px;min-height:44px;max-height:44px;gap:1.25rem;padding:0 16px}
  .tc-brand__icon{width:44px;height:44px;margin-right:.4rem}
  .tc-brand__text{font-size:20px;line-height:28px}
  .tc-header__end{gap:1.5rem}
  .tc-nav{gap:1.5rem}
  .tc-nav a{font-size:1rem}
  .tc-header-cta{padding:6px 12px;font-size:14px;line-height:20px}
  /* Full CTA label from sm if it fits; keep short until 900 so 60px never wraps */
}
@media (min-width:900px){
  .tc-cta-short{display:none}
  .tc-cta-full{display:inline}
}

/* Homepage hero — heights and type match topconsulenten.nl Tailwind tokens:
   min-h-[430px] sm:min-h-[470px] md:min-h-[520px]
   type: text-3xl / min-[380px]:text-4xl / sm:text-5xl / md:text-6xl
   Fixed height (not min-only) so the blog's extra button+pills do not stretch
   the hero past .nl. Padding-top matches .nl pt-12 / min-[380px]:pt-16 / sm:pt-20 / md:pt-24. */
.tc-home-hero.wp-block-cover{
  box-sizing:border-box !important;
  height:430px !important;
  min-height:430px !important;
  max-height:430px !important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:48px 0 16px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:hidden;
}
@media (min-width:380px){
  .tc-home-hero.wp-block-cover{
    padding:64px 0 16px !important;
  }
}
@media (min-width:640px){
  .tc-home-hero.wp-block-cover{
    height:470px !important;
    min-height:470px !important;
    max-height:470px !important;
    padding:80px 0 24px !important;
  }
}
@media (min-width:768px){
  .tc-home-hero.wp-block-cover{
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
    padding:96px 0 48px !important;
  }
}
.tc-home-hero.wp-block-cover .wp-block-cover__background.has-background-dim{
  /* Darker than .nl: the new sunset sky is brighter, so the overlay is
     strengthened to keep white body text at >= 4.5:1 and the large heading at >= 3:1. */
  opacity:1 !important;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.50) 50%,rgba(0,0,0,.72) 100%) !important;
}
.tc-home-hero .wp-block-cover__image-background{
  object-fit:cover;
  /* 48% 50%: on the tall mobile crop this keeps the sunset sky and the start of the dune path in frame. */
  object-position:48% 50%;
  width:100%;
  height:100%;
}
.tc-home-hero.wp-block-cover .wp-block-cover__inner-container{
  /* Beat WP cover rule `.has-custom-content-position .wp-block-cover__inner-container{margin:0}`
     which left the inner box shrink-to-content at the viewport edge. Same wrap + gutter as the header. */
  width:100% !important;
  max-width:var(--tc-wrap) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--tc-gutter);
  padding-right:var(--tc-gutter);
  box-sizing:border-box;
  text-align:center;
}
@media (max-width:720px){
  .tc-home-hero.wp-block-cover .wp-block-cover__inner-container{
    padding-left:.75rem;
    padding-right:.75rem;
  }
}
@media (max-width:380px){
  .tc-home-hero.wp-block-cover .wp-block-cover__inner-container{
    padding-left:.6rem;
    padding-right:.6rem;
  }
}
.tc-home-hero .tc-hero-copy{
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.tc-home-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:normal;
  /* .nl: text-3xl (30px) leading-[1.04] tracking-[-0.025em] */
  font-size:30px;
  line-height:31.2px;
  letter-spacing:-0.75px;
  text-wrap:balance;
  color:#fff;
  margin:0 auto;
  max-width:650px;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.tc-home-hero .tc-hero-copy p{
  font-family:"Open Sans",sans-serif;
  font-weight:500;
  /* .nl: text-base leading-snug, mt-4 */
  font-size:16px;
  line-height:22px;
  text-wrap:balance;
  color:#fff;
  max-width:620px;
  margin:16px auto 0;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}
@media (min-width:380px){
  /* .nl min-[380px]: text-4xl / text-lg, mt-5, pt-16 */
  .tc-home-hero h1{font-size:36px;line-height:37.44px;letter-spacing:-0.9px}
  .tc-home-hero .tc-hero-copy p{font-size:18px;line-height:24.75px;margin-top:20px}
}
@media (min-width:640px){
  /* .nl sm: text-5xl (48px) / text-xl (20px) */
  .tc-home-hero h1{font-size:48px;line-height:49.92px;letter-spacing:-1.2px}
  .tc-home-hero .tc-hero-copy p{font-size:20px;line-height:27.5px}
}
@media (min-width:768px){
  /* .nl md: text-6xl (60px) / text-2xl (24px) */
  .tc-home-hero h1{font-size:60px;line-height:62.4px;letter-spacing:-1.5px}
  .tc-home-hero .tc-hero-copy p{font-size:24px;line-height:33px}
}
.tc-home-hero .tc-hero-actions{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.tc-home-hero .tc-hero-btn-primary .wp-block-button__link,
a.tc-hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#1478C5 !important;
  color:#fff !important;
  font-family:"Open Sans",sans-serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  border-radius:3px;
  border:none;
  padding:.9rem 1.5rem;
  text-decoration:none !important;
  text-shadow:none;
  box-shadow:none;
}
.tc-home-hero .tc-hero-btn-primary .wp-block-button__link:hover,
a.tc-hero-button:hover{background:#0F64A8 !important;color:#fff !important}
.tc-hero-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
a.tc-hero-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#fff !important;
  font-family:"Open Sans",sans-serif;
  font-weight:600;
  font-size:.875rem;
  line-height:1.2;
  text-decoration:none !important;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
a.tc-hero-pill:hover,
a.tc-hero-pill:focus{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.85);
}
a.tc-hero-pill:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
a.tc-hero-pill svg{
  width:1rem;
  height:1rem;
  flex:0 0 auto;
}
@media (max-width:600px){
  a.tc-hero-button,
  .tc-home-hero .tc-hero-btn-primary .wp-block-button__link{width:auto}
  .tc-home-hero .tc-hero-actions{gap:.75rem}
  a.tc-hero-pill{font-size:.8125rem;padding:.4rem .75rem}
}

/* Inspiratiekaarten (voorheen "tools") */
.tc-section-intro{text-align:center;max-width:36rem;margin-left:auto;margin-right:auto}
.tc-section-intro h2{
  font-family:var(--wp--preset--font-family--hind,"Hind",sans-serif);
  font-size:clamp(1.375rem,2.2vw,1.75rem);
  color:#09292F;
  margin:0 0 .4rem;
}
.tc-section-intro p{margin:0;font-size:.9375rem;color:var(--tc-text-muted,#555);line-height:1.5}
.tc-discover{
  display:grid !important;
  grid-template-columns:1fr;
  grid-auto-rows:auto;
  gap:1.15rem; /* ~18px */
  margin-top:1.5rem;
  margin-bottom:0;
  width:100%;
  align-items:stretch;
}
@media (min-width:700px){
  .tc-discover{grid-template-columns:repeat(2,1fr)}
  .tc-tool-card{height:100%}
}
@media (min-width:1100px){
  .tc-discover.tc-discover--ready-for-more{grid-template-columns:repeat(3,1fr)}
}
.tc-tool-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:#fff;
  border-radius:8px;
  padding:1.35rem 1.35rem 1.45rem;
  text-decoration:none;
  color:var(--tc-text,#2B3A42);
  border:1px solid #EFEFEF;
  box-shadow:0 0 2px rgba(0,0,0,.04);
  height:auto;
  min-height:0;
  position:relative;
  box-sizing:border-box;
  transition:box-shadow .15s ease,transform .15s ease;
}
a.tc-tool-card:hover{box-shadow:0 4px 16px rgba(9,41,47,.08);transform:translateY(-1px);text-decoration:none;color:#09292F}
.tc-tool-card--soon{opacity:.92;cursor:default}
.tc-tool-icon{
  width:44px;height:44px;border-radius:8px;
  background:#D7EBF6;color:#0F64A8;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.tc-tool-icon svg{display:block;width:26px;height:26px}
.tc-tool-card h2,.tc-tool-card h3{
  font-family:var(--wp--preset--font-family--hind,"Hind",sans-serif);
  font-size:1.125rem;font-weight:700;margin:0 0 .35rem;color:#09292F;line-height:1.25;
}
.tc-tool-card p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--tc-text,#2B3A42)}
.tc-tool-meta{margin-top:auto;padding-top:.35rem;font-size:.8125rem;font-weight:600;color:#0F64A8}
.tc-tool-badge{
  display:inline-block;margin-top:auto;padding:.2rem .5rem;border-radius:3px;
  background:#F7F7F7;color:var(--tc-text-muted,#555);font-size:.75rem;font-weight:600;letter-spacing:.02em;width:max-content;
}

/* Stories / archive cards */
.tc-stories-link{
  display:inline-block;margin-top:1.5rem;font-size:.9375rem;font-weight:600;color:#0F64A8;text-decoration:none;
}
.tc-stories-link:hover{color:#0C528A}
.tc-story-grid.wp-block-post-template,
.tc-stories .wp-block-post-template{
  display:grid!important;
  grid-template-columns:1fr;
  gap:1.75rem 1.35rem;
}
@media (min-width:600px){
  .tc-story-grid.wp-block-post-template,
  .tc-stories .wp-block-post-template{grid-template-columns:repeat(2,1fr)!important}
}
@media (min-width:900px){
  .tc-story-grid.wp-block-post-template,
  .tc-stories .wp-block-post-template{grid-template-columns:repeat(3,1fr)!important}
}
.tc-story-card{
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.tc-story-card .wp-block-post-featured-image{margin:0 0 .65rem;aspect-ratio:3/2}
.tc-story-card .wp-block-post-featured-image img,
.tc-story-card .wp-block-post-featured-image a{
  aspect-ratio:3/2;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:4px;
  display:block;
}
.tc-story-card .wp-block-post-title,
.tc-story-card .wp-block-post-title a{
  font-family:var(--wp--preset--font-family--hind,"Hind",sans-serif)!important;
  font-size:1.0625rem!important;
  font-weight:700!important;
  line-height:1.3!important;
  color:#09292F!important;
  text-decoration:none!important;
  letter-spacing:0;
}
.tc-story-card .wp-block-post-title a:hover,
.tc-story-card .wp-block-post-title a:focus{color:#0F64A8!important}

/* CTA band */
.tc-home-cta{
  background:#D7EBF6;
  border-radius:8px;
  padding:1.5rem 1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
  align-items:center;
  justify-content:space-between;
}
.tc-home-cta p{margin:0;font-size:1rem;color:#09292F;max-width:36rem}
.tc-home-cta .wp-block-button__link{white-space:nowrap}

/* Footer typografie kleiner */
.tc-footer,
.tc-footer p,
.tc-footer li,
.tc-footer a{
  font-size:.8125rem!important;
  line-height:1.5;
}
.tc-footer h3,
.tc-footer .wp-block-heading{
  font-size:.875rem!important;
  line-height:1.3;
  margin:0 0 .5rem;
  letter-spacing:.01em;
}
.tc-footer .wp-block-columns{gap:1.25rem!important}

/* Broodtekst: donkerder dan het oude grijs, headings blijven #09292F */
body{
  color:var(--tc-text,#2B3A42);
}
.entry-content,
.entry-content p,
.wp-block-post-content,
.wp-block-post-content p,
.wp-block-group p,
.tc-home-cta p{
  color:var(--tc-text,#2B3A42);
}
.tc-footer,
.tc-footer p,
.tc-footer li{
  color:var(--tc-text,#2B3A42);
}
.tc-footer a{color:#0F64A8;}
.tc-footer a:hover,.tc-footer a:focus{color:#0C528A;}
.tc-footer h3,
.tc-footer .wp-block-heading{
  color:var(--tc-heading,#09292F);
}

@media (max-width:699px){
  .tc-discover{
    grid-template-columns:1fr !important;
    gap:1.15rem;
  }
  .tc-tool-card{
    height:auto !important;
    gap:.55rem;
    padding:1.15rem 1.15rem 1.2rem;
  }
  .tc-tool-meta{
    margin-top:.5rem;
    padding-top:0;
  }
  .tc-tools-section{
    margin-bottom:2rem !important;
  }
}

/* Verhalengrid: forceer 1 kolom op smalle schermen, ook bij columns-3 / flex */
@media (max-width:599px){
  .tc-story-grid.wp-block-post-template,
  .tc-stories .wp-block-post-template,
  .wp-block-post-template.is-flex-container.columns-3,
  ul.wp-block-post-template.columns-3{
    display:grid !important;
    grid-template-columns:1fr !important;
    flex-direction:column !important;
    gap:1.5rem !important;
  }
  .wp-block-post-template.is-flex-container.columns-3>li,
  .tc-stories .wp-block-post-template>li,
  ul.wp-block-post-template.columns-3>li{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Single: H1 blijft de articeltitel, maar niet reusachtig */
.single .wp-block-post-title,
.page:not(.home) .wp-block-post-title,
.wp-block-query-title{
  font-size:clamp(1.5rem,2vw + 1rem,2rem)!important;
  line-height:1.2;
  color:#09292F;
}


/* 0.1.10 — compacte strip onder de twee uitgelichte kaarten */
.tc-more-tools-wrap{
  margin-top:1.35rem;
  text-align:left;
}
.tc-more-tools-label{
  margin:0 0 .55rem;
  font-size:.875rem;
  font-weight:600;
  color:#09292F;
}
.tc-more-tools{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .85rem;
  margin:0;
  padding:0;
}
.tc-more-tools a{
  font-size:.9375rem;
  font-weight:600;
  color:#0F64A8;
  text-decoration:none;
}
.tc-more-tools a:hover,
.tc-more-tools a:focus{color:#0C528A;text-decoration:underline}
@media (max-width:699px){
  .tc-more-tools{gap:.4rem .75rem}
}