/*
Theme Name: Tasty Busy
Theme URI: https://www.tastybusy.nl
Author: Tasty Busy
Description: Eigen thema voor Tasty Busy: intro met logo-animatie, portfolio-tegels met video, golflijn-menu, gele accenten en kleurvlak-overgangen. Werkt samen met de plugin Tasty Busy Portfolio.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tastybusy
*/

/* Poppins, meegeleverd met het thema (geen verbinding met Google nodig) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/poppins-700.woff2') format('woff2'); }

:root {
  --geel: #ffcf01;
  --paars: #4a3a69;
  --bg: #fff;
  --pad: clamp(16px, 4vw, 48px);
  --gap: 1rem;
  --header-h: 112px;
  --logo-h: 80px;
  /* Vierkant waarin de intro speelt. Op een telefoon breder dan het scherm,
     zodat het logo groot genoeg is; de achtergrond loopt buiten het vierkant door. */
  --stage: min(100vh, 140vw);
  /* Maximale hoogte van media op portfoliopagina's: altijd helemaal in beeld. */
  --fit-h: calc(100vh - var(--header-h) - 2 * var(--gap));
  /* Het golflijntje (menu en menuknop) */
  --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3q3-3 6 0t6 0' fill='none' stroke='%234a3a69' stroke-width='1.5'/%3E%3C/svg%3E");
}
@supports (height: 100dvh) {
  :root { --stage: min(100dvh, 140vw); }
}
@supports (height: 100svh) {
  :root { --fit-h: calc(100svh - var(--header-h) - 2 * var(--gap)); }
}
@media (max-width: 700px) {
  :root { --header-h: 84px; --logo-h: 56px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--paars);
  background: var(--bg);
}
@supports (height: 100svh) {
  body { min-height: 100svh; }
}
/* De inhoud rekt mee, zodat de footer altijd onderaan het venster staat */
body > main { flex: 1 0 auto; }
/* Sjabloon "Gele pagina": de hele pagina geel */
.pagina-geel { --bg: var(--geel); }

/* Toegankelijkheid */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 400;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  border-radius: 99px;
  background: var(--paars);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------- Header */
/* Wit bovenaan, geel zodra je naar beneden scrolt; op portfoliopagina's meteen geel */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  background: var(--bg);
  transition: background-color .3s ease;
}
.site-header.is-scrolled,
.site-header--geel { background: var(--geel); }
/* Ingelogd: onder de WordPress-werkbalk blijven */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
.site-logo { display: block; height: var(--logo-h); color: var(--paars); }
.site-logo__img { display: block; height: 100%; }
.site-logo svg { display: block; height: 100%; width: auto; }

/* Menu-items met een ruim klikvlak dat ook het golfje en de ruimte ertussen dekt,
   zodat de hover niet wegvalt als de muis tussen woord en golfje of tussen twee items staat. */
.site-nav {
  --nav-px: clamp(8px, 1.5vw, 20px);
  --nav-py: 10px;
  display: flex;
  margin-right: calc(-1 * var(--nav-px));
  font-weight: 500;
}
.site-nav a { position: relative; padding: var(--nav-py) var(--nav-px); color: inherit; text-decoration: none; }
/* Geen blauw tik-vlakje (Android) op menu en logo */
.site-nav a, .site-logo { -webkit-tap-highlight-color: transparent; }

/* Golflijn onder het huidige tabblad. Verschijnen = van links naar rechts getekend worden;
   verdwijnen = snel vervagen. Er staat steeds één lijn: hover je een ander tabblad, dan
   verdwijnt die onder het huidige en komt hij terug zodra je stopt met hoveren. */
.site-nav a::after {
  content: '';
  position: absolute;
  left: var(--nav-px);
  right: var(--nav-px);
  bottom: calc(var(--nav-py) - 9px);
  height: 6px;
  background: var(--golf) repeat-x 0 0 / 12px 6px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .15s ease, clip-path 0s linear .15s;
}
.site-nav a[aria-current]::after,
.site-nav a:focus-visible::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path .5s cubic-bezier(.3, .6, .4, 1), opacity 0s;
}
.site-nav:has(a:not([aria-current]):focus-visible) a[aria-current]::after {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .15s ease, clip-path 0s linear .15s;
}
@media (hover: hover) {
  .site-nav a:hover::after {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transition: clip-path .5s cubic-bezier(.3, .6, .4, 1), opacity 0s;
  }
  /* Hover op het huidige tabblad: de lijn opnieuw tekenen */
  .site-nav a[aria-current]:hover::after { animation: teken .5s cubic-bezier(.3, .6, .4, 1); }
  /* Hover op een ander tabblad: lijn onder het huidige tabblad tijdelijk weg */
  .site-nav:has(a:not([aria-current]):hover) a[aria-current]::after {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: opacity .15s ease, clip-path 0s linear .15s;
  }
}
@keyframes teken { from { clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- Menuknop (mobiel) */
/* Drie golflijntjes die bij openen recht trekken tot een kruisje */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--paars);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle svg { display: block; width: 32px; height: 32px; overflow: visible; }
.menu-toggle svg * {
  transform-origin: 16px 16px;
  transition: transform .35s cubic-bezier(.6, 0, .3, 1), opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] .mi-top { transform: rotate(45deg) scaleY(.01); }
.menu-toggle[aria-expanded="true"] .mi-bot { transform: rotate(-45deg) scaleY(.01); }
.menu-toggle[aria-expanded="true"] .mi-mid { opacity: 0; transform: scaleX(0); }

@media (max-width: 700px) {
  .menu-toggle { display: flex; }
  /* In het schermvullende menu is het ruime klikvlak niet nodig */
  .site-nav { --nav-px: 0px; --nav-py: 0px; margin-right: 0; }
  .site-header.menu-open { background: var(--geel); }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding: 9vh var(--pad) calc(var(--header-h) + 4vh);
    background: var(--geel);
    font-size: clamp(32px, 9vw, 44px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .site-header.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
  }
  /* Items schuiven kort na elkaar zacht omhoog */
  .site-nav a {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
  }
  .site-header.menu-open .site-nav a { opacity: 1; transform: none; transition-delay: .08s; }
  .site-header.menu-open .site-nav a:nth-child(2) { transition-delay: .15s; }
  .site-header.menu-open .site-nav a:nth-child(3) { transition-delay: .22s; }
  .site-header.menu-open .site-nav a:nth-child(n+4) { transition-delay: .29s; }
  /* Golflijn groter bij de grote letters, en getekend zodra het menu opengaat */
  .site-nav a::after { bottom: -12px; height: 9px; background-size: 18px 9px; }
  .site-header.menu-open .site-nav a[aria-current]::after { animation: teken .6s cubic-bezier(.3, .6, .4, 1) .3s both; }
}
/* Pagina eronder scrolt niet zolang het menu open is. Alleen op <html>: overflow op <body>
   maakt van body een eigen scrollvlak, en dan schiet de plakkende header buiten beeld. */
html.menu-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle *, .site-nav, .site-nav a, .site-nav a::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- Portfolio-tegels */
/* Masonry (3 / 2 / 1 kolommen), beelden niet bijgesneden. Zonder JavaScript een gewoon raster. */
.site-main { padding: 8px var(--pad) 96px; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: var(--gap);
}
.portfolio-grid.is-masonry { display: flex; }
.portfolio-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--paars);
  text-decoration: none;
  background: #f3efe6;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tile__media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Gele laag met de titel: bij hover, of op de telefoon als je je vinger op de tegel houdt */
.tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  background: var(--geel);
  opacity: 0;
  transition: opacity .3s ease;
}
.tile__title {
  font-size: clamp(1.15rem, 1rem + .4vw, 1.333rem);
  line-height: 1.3;
  word-break: break-word;
}
@media (hover: hover) {
  .tile:hover .tile__overlay { opacity: 1; }
}
.tile:focus-visible .tile__overlay,
.tile.is-pressed .tile__overlay { opacity: 1; }

/* ---------------------------------------------------------------- Portfolio- en gewone pagina's */
.entry { --media-gap: 1.5rem; padding: var(--gap) var(--pad) 96px; }
/* Titel van het project bovenaan de portfoliopagina.
   Kleur, grootte, dikte en uitlijning stel je in onder Weergave → Tasty Busy. */
.entry-titel {
  margin: clamp(8px, 2vh, 24px) 0 var(--media-gap);
  color: var(--titel-kleur, var(--paars));
  font-family: Poppins, system-ui, sans-serif;
  font-size: var(--titel-grootte, clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem));
  font-weight: var(--titel-dikte, 700);
  line-height: 1.15;
  text-align: var(--titel-uitlijning, left);
  text-wrap: balance;
}
/* Vaste ruimte (één regel) tussen alle visuals: tussen rijen, binnen kolommen en in galerijen.
   Marges die in de editor zijn ingesteld worden genegeerd, zodat het overal gelijk is. */
.entry-content,
.entry-content .wp-block-column,
.entry-content .wp-block-gallery { display: flex; flex-direction: column; gap: var(--media-gap); }
.entry-content > *,
.entry-content .wp-block-column > *,
.entry-content .wp-block-gallery > * { margin-block: 0 !important; }
.entry-content .wp-block-columns { gap: var(--media-gap); margin: 0 !important; }
.entry-content .wp-block-spacer { display: none; }
.entry-content figure { margin: 0; }
/* Afbeeldingen met een link erom: de link over de hele breedte, zodat de afbeelding in het midden staat */
.entry-content figure > a { display: block; }
/* Galerijen: afbeeldingen gecentreerd onder elkaar */
.entry-content .wp-block-gallery { align-items: center; }
.entry-content .wp-block-gallery > figure { width: auto !important; max-width: 100%; }
.entry-content .wp-element-caption:empty,
.wp-block-minimalio-blocks-minimalio-gallery[data-caption-enabled="false"] figcaption { display: none; }
.entry-content .wp-element-caption { margin: .5em 0 0 !important; text-align: center !important; }
/* Kolommen onder elkaar (smal scherm): lege opvulkolommen weglaten, anders dubbele ruimte */
@media (max-width: 781px) {
  .entry-content .wp-block-column:not(:has(*)) { display: none; }
}
/* Tekst: rustige, gecentreerde kolom */
.entry-content :is(p, ul, ol, h1, h2, h3, h4, blockquote) { width: 100%; max-width: 70ch; margin-inline: auto; line-height: 1.6; }
.entry-content :is(h1, h2, h3, h4) { line-height: 1.2; }
.entry-content a { color: inherit; }

/* Alle media altijd helemaal in beeld: hooguit schermhoog, verhouding blijft kloppen.
   Uitzondering: geef het blok de extra CSS-klasse "geen-schermhoogte". */
.entry-content img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: var(--fit-h);
  object-fit: contain;
  margin-inline: auto;
}
.video-wrap {
  --ar: 16 / 9;
  position: relative;
  width: min(100%, calc(var(--fit-h) * var(--ar)));
  margin-inline: auto;
}
.video-wrap video { display: block; width: 100%; height: auto; }
.entry-content .geen-schermhoogte img,
.entry-content img.geen-schermhoogte { max-height: none; }
.entry-content .geen-schermhoogte .video-wrap { width: 100%; }

/* Geluidsknop (alleen bij video's met geluid) */
.sound-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-radius: 99px;
  background: var(--paars);
  color: #fff;
  font: 500 14px Poppins, system-ui, sans-serif;
  cursor: pointer;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle.is-hint { background: var(--geel); color: var(--paars); animation: hint 1.2s ease-in-out 3; }
@keyframes hint { 50% { transform: scale(1.08); } }

/* Extra tekst boven en onder de afbeeldingen (velden bij het portfolio-item) */
.entry-tekst { max-width: 70ch; margin: 0 auto var(--media-gap); line-height: 1.6; }
.entry-tekst--onder { margin: var(--media-gap) auto 0; }
.entry-tekst p { margin: 0 0 1em; }
.entry-tekst p:last-child { margin-bottom: 0; }
.entry-tekst a { color: inherit; }

/* Titel van gewone pagina's (bijvoorbeeld de algemene voorwaarden) */
.pagina__titel { max-width: 70ch; margin: clamp(16px, 4vh, 48px) auto var(--media-gap); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.1; }

/* Terug-knop onderaan: een pijltje van lijnen */
.entry-back { display: flex; justify-content: center; padding-top: calc(2 * var(--media-gap)); }
.back-link { display: inline-flex; padding: 12px; color: var(--paars); border-radius: 99px; }
.back-link svg { display: block; width: 44px; height: 22px; transition: transform .3s cubic-bezier(.3, .6, .4, 1); }
@media (hover: hover) {
  .back-link:hover svg { transform: translateX(-6px); }
}
.back-link:focus-visible { outline: 2px solid var(--paars); outline-offset: 2px; }

/* ---------------------------------------------------------------- Sjabloon "Gele pagina" (Koffie?) */
/* Rustig en clean: tekst in een gecentreerde kolom */
.koffie {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 10vh, 120px) var(--pad) clamp(48px, 10vh, 120px);
}
.koffie h1 {
  margin: 0 0 .9em;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
}
.koffie p { margin: 0; font-size: clamp(1.15rem, .95rem + .9vw, 1.8rem); line-height: 1.45; }
.koffie p + p { margin-top: 1.1em; }
.koffie p.has-small-font-size { margin-top: 2.4em; font-size: .95rem !important; }
.koffie a { color: inherit; }
/* Laptop en groter: iets kleinere letters (tablet en mobiel houden hun formaat) */
@media (min-width: 1025px) {
  .koffie h1 { font-size: 3.1rem; }
  .koffie p:not(.has-small-font-size) { font-size: 1.35rem; }
}

/* ---------------------------------------------------------------- Footer */
/* ©Tasty Busy links, Instagram-knop precies in het midden */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px var(--pad) 28px;
  color: var(--paars);
  font-size: 14px;
}
.site-footer__copy { margin: 0; }
.site-footer__insta {
  display: inline-flex;
  padding: 8px;
  color: var(--paars);
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.site-footer__insta svg { display: block; width: 28px; height: 28px; }
/* Bij hover of aantikken: van paars naar geel (op een gele pagina: wit) */
.site-footer__insta:active,
.site-footer__insta:focus-visible { color: var(--geel); outline: none; }
.pagina-geel .site-footer__insta:active,
.pagina-geel .site-footer__insta:focus-visible { color: #fff; }
@media (hover: hover) {
  .site-footer__insta:hover { color: var(--geel); }
  .pagina-geel .site-footer__insta:hover { color: #fff; }
}

/* ---------------------------------------------------------------- Intro */
.intro { display: none; }
html.intro-active { overflow: hidden; }
.intro-active .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--geel);
  cursor: pointer;
}
.intro__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage);
  height: var(--stage);
  transform: translate(-50%, -50%);
}
.intro__stage svg { overflow: visible; }
.intro.is-leaving { opacity: 0; transition: opacity .7s ease .1s; }
.intro-logo .site-logo { visibility: hidden; }
/* Het logo dat van het midden naar de header vliegt */
.logo-flyer {
  position: fixed;
  z-index: 101;
  color: var(--paars);
  pointer-events: none;
  transform-origin: 0 0;
}
.logo-flyer svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Pagina-overgang */
/* Kleurvlakken (paars, dan geel) schuiven horizontaal over het scherm; de laag vangt klikken af */
.pt { position: fixed; inset: 0; z-index: 300; overflow: hidden; }
.pt-vlak { position: absolute; inset: 0; }
.pt-vlak--paars { background: var(--paars); }
.pt-vlak--geel { background: var(--geel); }
/* Tot het script het overneemt: de nieuwe pagina meteen geel bedekken, zodat hij niet even zichtbaar is */
html[data-entering] body::after { content: ''; position: fixed; inset: 0; z-index: 299; background: var(--geel); }