/**
 * Theme Name:     BKI
 * Author:         Niels van Dijk
 * Template:       twentytwentyfive
 * Text Domain:	   bki
 * Description:    Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
 */

html {
    scroll-behavior: smooth;
}


/* Light/dark mode */
:root {
  /* Surfaces */
  --bg: #F7FAFC;        /* page background */
  --surface: #FFFFFF;   /* cards / sections */
  --surface-2: #EEF6F6; /* subtle tinted panels (teal hint) */

  /* Text */
  --text: #0B1220;      /* main text */
  --text-muted: #334155;/* secondary text */
  --heading: #08101C;   /* big titles */

  /* UI */
  --border: #D0D7E2;
  --shadow: 0 10px 30px rgba(8, 16, 28, 0.10);

  /* Brand / actions (teal = “science / climate” without politics) */
  --accent: #0F766E;          /* buttons, highlights */
  --accent-hover: #0B5F59;
  --accent-contrast: #FFFFFF; /* text on accent */

  /* Links (trustworthy blue) */
  --link: #0B5CAD;
  --link-hover: #084A8B;

  /* Focus (highly visible, AA-friendly) */
  --focus: #0B5CAD;

  /* Status (no reds) */
  --info: #0B5CAD;
  --success: #0F766E;
  --warning: #B45309; /* amber, not red */
  
  /* gradients */
  --righta: #8EFFBC;
  --rightb: #E6FFF1;
  
  --wronga: #FFC28C;
  --wrongb: #FFF4E9;
  
    --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-text: var(--accent-contrast);
  --btn-border: transparent;

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--accent);
  --btn-secondary-border: var(--accent);
  
}

/* DARK */
:root.is-dark {
  /* Surfaces */
  --bg: #07131A;
  --surface: #0B1F2A;
  --surface-2: #0E2A2A;

  /* Text */
  --text: #E6F0F5;
  --text-muted: #B2C6D2;
  --heading: #F2F8FB;

  /* UI */
  --border: #1E3A46;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45);

  /* Accent */
  --accent: #2DD4BF;          /* brighter teal for dark */
  --accent-hover: #1FBFAE;
  --accent-contrast: #062026; /* dark text on bright teal */

  /* Links */
  --link: #7DD3FC;
  --link-hover: #A5E4FF;

  /* Focus */
  --focus: #7DD3FC;

  /* Status */
  --info: #7DD3FC;
  --success: #2DD4BF;
  --warning: #FDE68A;
  
  /* gradients */
  --righta: #0A612E;
  --rightb: #052A15;
  
  --wronga: #893114;
  --wrongb: #581C05;
  
    --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-text: var(--accent-contrast);
  --btn-border: transparent;

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--accent);
  --btn-secondary-border: var(--accent);
}

/* Apply globally */
body {
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Common block “surfaces” (helps FSE layouts) */
.wp-site-blocks,
.wp-block-group,
.wp-block-post-content {
  color: var(--text);
}

/* Optional: if you use “card sections” a lot */
.has-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 1.25rem;
}

/* Primary buttons */
.wp-block-button__link {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--btn-border);
  border-radius: 999px; /* modern, friendly */
  padding: 0.75em 1.5em;
  font-weight: 600;
}

.wp-block-button__link:hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text);
}

.wp-block-button__link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Secondary / outline style */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--btn-secondary-text);
  color: var(--accent-contrast);
}

/* dark mode toggle button */
.theme-toggle{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}

.theme-toggle .icon{
  width:1.5rem;
  height:1.5rem;
  display:block;
  max-width:100%;
  max-height:100%;
}

.theme-toggle .icon *{
  fill: var(--text);
}

.is-dark .theme-toggle .sun{ display:none; }
.is-light .theme-toggle .moon{ display:none; }

.theme-toggle:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.lock-mode p, .lock-mode h1, .lock-mode h2 {
	color: #070F1A;
}

/* Homepage slides */
.slide {
display: flex;
  align-items: center;
  min-height: 100vh;
}

.home main {
	margin-top: 0 !important;
}

.home main > div {
	padding-top: 0 !important;
}

.right {
	background: linear-gradient(90deg,var(--righta) 0%, var(--rightb) 100%);
	padding: 0px 4px;
}
.wrong {
	background: linear-gradient(90deg,var(--wronga) 0%, var(--wrongb) 100%);
	padding: 0px 4px;
}

.slide h1 span {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition:
    transform 600ms ease,
    opacity 600ms ease,
    filter 600ms ease;
}

.slide h1.is-visible span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* navigation */
header {
	background: var(--surface);
	position: fixed;
  width: 100%;
  z-index: 1;
}

.is-dark .wp-block-site-logo img {
	filter: invert(1);
}

.wp-site-blocks {
	padding-top: 1px;
}

/* optional: respect reduced motion 
@media (prefers-reduced-motion: reduce) {
  .slide h1 span {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
*/

/* blocks */
#domeinen .hidden {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height 0.4s ease,
    opacity 0.3s ease;
}

#domeinen .hidden.is-visible {
  opacity: 1;
}

#domeinen .wp-block-column {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
  background: var(--surface);
}

#domeinen .wp-block-column.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#domeinen .wp-block-column .is-style-text-annotation  {
	cursor: pointer;
}

.is-dark #domeinen .wp-block-image img {
	filter: invert(1);
}

.wp-block-embed__wrapper {
	border-radius: 10px;
  overflow: hidden;
}

.partnerrow {
  overflow: hidden;
  display: flex;
  /* optional nice edge fade */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}


.partnerrow .track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ticker var(--duration, 40s) linear infinite;
}

.partnerrow.reverse .track {
  animation-direction: reverse;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shift))); }
}

.partnerrow figure {
  flex: 0 0 auto;
  margin: 0 1rem;        /* spacing between logos */
    filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.04));

}

.partnerrow figure:nth-child(even) {
	z-index: 9;
}
.partnerrow figure:nth-child(odd) {
	z-index: 1;
}

.partnerrow img {
height: 13vw;
  width: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 1;
  clip-path: polygon(40% 7.67949%, 43.1596% 6.20615%, 46.52704% 5.30384%, 50% 5%, 53.47296% 5.30384%, 56.8404% 6.20615%, 60% 7.67949%, 81.65064% 20.17949%, 84.50639% 22.17911%, 86.97152% 24.64425%, 88.97114% 27.5%, 90.44449% 30.6596%, 91.34679% 34.02704%, 91.65064% 37.5%, 91.65064% 62.5%, 91.34679% 65.97296%, 90.44449% 69.3404%, 88.97114% 72.5%, 86.97152% 75.35575%, 84.50639% 77.82089%, 81.65064% 79.82051%, 60% 92.32051%, 56.8404% 93.79385%, 53.47296% 94.69616%, 50% 95%, 46.52704% 94.69616%, 43.1596% 93.79385%, 40% 92.32051%, 18.34936% 79.82051%, 15.49361% 77.82089%, 13.02848% 75.35575%, 11.02886% 72.5%, 9.55551% 69.3404%, 8.65321% 65.97296%, 8.34936% 62.5%, 8.34936% 37.5%, 8.65321% 34.02704%, 9.55551% 30.6596%, 11.02886% 27.5%, 13.02848% 24.64425%, 15.49361% 22.17911%, 18.34936% 20.17949%);
  background: #fff;
}

.partnerrow img:hover {
  filter: none;
  opacity: 1;
}

.gform-body input, .gform-body label {
  font-size: 80% !important;

}

.gform-body label {
	  color: var(--text) !important;
}

.gform_button {
	background-color: var(--btn-bg) !important;
	border-radius: 999px !important;
  padding: 0.75em 1.5em !important;
  font-weight: 600 !important;
}
	
/* FAQ */
 .bki-faq {
    cursor: pointer;
  }
  .bki-faq h2 {
    user-select: none;

padding-left: 1.5em;
font-size: 25px;
  }
 
.bki-faq:hover h2 {
	text-decoration: underline;
}

  .bki-faq h2::before {  
  	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96.3 402.9l10.7-26.2-17.8-22C63.1 322.4 48 282.7 48 240 48 136.8 138.2 48 256 48s208 88.8 208 192-90.2 192-208 192c-30.5 0-59.2-6-85.1-16.8l-16.8-7c-5.6 1.9-28.8 9.9-69.8 24l12-29.4zM0 512c34.9-12 85.7-29.5 152.5-52.4 31.6 13.1 66.7 20.4 103.5 20.4 141.4 0 256-107.5 256-240S397.4 0 256 0 0 107.5 0 240C0 294.4 19.3 344.6 51.8 384.8 32.7 431.8 15.4 474.2 0 512zM256 165.2c17.7 0 32 14.3 32 32 0 13.2-6.8 20.5-15.8 25.6-9.4 5.3-20 6.6-30.5 8-2.3 .3-4.6 .6-6.9 .9l0 53.5 42.4 0 0-18.3c4.8-1.7 10.3-4 15.8-7.1 17.6-9.9 37.4-29.2 37.4-62.5 0-41.1-33.3-74.4-74.4-74.4s-74.4 33.3-74.4 74.4l42.4 0c0-17.7 14.3-32 32-32zM232 312l0 48 48 0 0-48-48 0z"/></svg>');
width: 25px;
  position: absolute;
  margin-left: -1.5em;
  }

  .bki-faq p {
    max-height: 0;            /* Hidden initially */
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    margin: -.4em;
  }

  .bki-faq.active p {
    max-height: 200px;        /* Adjust based on expected text length */
    opacity: 1;
	margin: 0em;
  }
  
/* footer */
.koekje-banner {
  position: fixed; inset: auto 1rem 1rem 1rem;
  max-width: fit-content; margin: 0 auto;
  background: #08101C; color: #fff;
  padding: 1rem; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  z-index: 99999; display: none;
  font-size: 14px; line-height: 1.4;
  gap: 1em;
}
.koekje-banner.show { display: flex; }
.koekje-actions {  }
.koekje-btn {
  background: #0F766E; color: #111;
  border: 0; border-radius: 8px;
  padding: .6rem 1rem; font-weight: 600;
  cursor: pointer;
}
.koekje-text a { color: #fff; text-decoration: underline; }
  

@media screen and (min-width: 1024px) {
.slide > div {
max-width: 80% !important;
}