/*
Theme Name: Guifi Content Creators
Theme URI: https://guifi.nl
Description: Child theme van Mokko voor Guifi Content Creators. Bevat de site-specifieke aanpassingen en custom Elementor-widgets (o.a. Guifi FAQ).
Author: GuifiLab
Author URI: https://guifi.nl
Template: mokko
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guificc
Tags: one-column, two-columns, custom-menu, featured-images, theme-options
*/

/* ── Header: 15px marge links/rechts, ook op smallere schermen ────────────────
   Mokko geeft .main-header__layout een gutter van 15px
   (padding: calc(var(--bs-gutter-x)/1.6) = 1.5rem/1.6), maar bij data-menu=fixed
   krijgt .main-header__inner `position:fixed; left:0; right:0; width:100%`.
   Een fixed element rekent tegen de viewport, dus die padding van de ouder telt
   niet meer mee: zodra de viewport smaller is dan --main-header-width-md (1320px)
   plakken logo en pills tegen de schermrand.

   Oplossing: de breedte 30px inhouden i.p.v. padding toevoegen. Zo blijft de
   max-width van 1320px + `margin:0 auto` op brede schermen exact zoals hij was
   (logo op x=60 bij 1440px), en telt de 15px alleen als de header anders de rand
   zou raken. Padding zou de animatie van het thema raken: .main-header__inner
   transitioned op `padding` en de gescrollde staat (.move) zet die zelf op
   .5rem 1.5rem.

   Onder 1024px zet Mokko de inner terug op position:relative — dan werkt de
   padding van .main-header__layout wél, dus daar niets doen (anders 30px). */
@media (min-width:1024px){
  body[data-menu=fixed] .main-header .main-header__inner{width:calc(100% - 30px)}
}

/* ── Guifi FAQ-widget (herbruikbaar: intro links, accordeon rechts) ───────────
   Tokens staan bovenaan zodat kleuren/afmetingen per site te tweaken zijn.
   Lettertype erft bewust van Mokko (Google Fonts via Kirki) i.p.v. hardcoded. */
.guifi-faq{
  --faq-ink:#111;
  --faq-muted:#7a7a7a;
  --faq-gap:72px;
  --faq-intro-width:420px;
}

/* full-width zodat het blok niet meekrimpt/verbreedt met de open/dichte content */
.elementor-widget-guifi-faq{width:100% !important}
.guifi-faq{display:flex;gap:var(--faq-gap);align-items:flex-start;width:100%}
.guifi-faq__intro{flex:0 0 var(--faq-intro-width);max-width:var(--faq-intro-width)}
.guifi-faq__title{font-size:52px;font-weight:400;line-height:58px;color:var(--faq-ink);margin:0 0 24px;letter-spacing:-0.55px}
.guifi-faq__text,.guifi-faq__text p{font-size:16px;line-height:1.6;color:var(--faq-muted);margin:0}
.guifi-faq__list{flex:1 1 0;min-width:0}
.guifi-faq__item{border:0}
/* gesloten vraag (+ icoon) staat gedimd (opacity .5); geopende vraag vol zwart */
.guifi-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;
  padding:24px 0;font-size:24px;font-weight:400;line-height:32px;color:var(--faq-ink);
  opacity:.5;transition:opacity .2s}
.guifi-faq__q::-webkit-details-marker{display:none}
.guifi-faq__q::marker{content:""}
.guifi-faq__q:hover{opacity:1}
.guifi-faq__item[open] .guifi-faq__q{opacity:1}
/* icoon: + (gesloten) -> − (open); dunne lijnen, dimt mee met de vraag */
.guifi-faq__icon{position:relative;width:16px;height:32px;flex-shrink:0}
.guifi-faq__icon::before,.guifi-faq__icon::after{content:"";position:absolute;background:var(--faq-ink);transition:opacity .25s ease}
.guifi-faq__icon::before{left:0;right:0;top:15px;height:1.5px}      /* horizontale lijn (−) */
.guifi-faq__icon::after{top:8px;bottom:8px;left:7px;width:1.5px}    /* verticale lijn (samen met − = +) */
.guifi-faq__item[open] .guifi-faq__icon::after{opacity:0}           /* open -> alleen − */
.guifi-faq__a{padding:0 0 12px 0;margin-top:-6px;max-width:601px}
.guifi-faq__a,.guifi-faq__a p{font-size:18px;line-height:32px;color:var(--faq-ink)}
.guifi-faq__a p{margin:0 0 12px}
.guifi-faq__a p:last-child{margin-bottom:0}
/* Tablet en kleiner: intro boven de vragen in plaats van ernaast.
   Het omslagpunt lag op 900px, waardoor een tablet van 1024px nog de
   tweekolomsopmaak kreeg: 420px vaste intro liet dan maar 484px over voor de
   antwoorden. Nu klapt hij op 1024px om, gelijk aan het tabletbreekpunt van
   Elementor.

   align-items staat op de basisregel op flex-start. In een kolom is dat de
   dwarsrichting, dus krompen intro en vragenlijst tot hun eigen inhoud in
   plaats van de volle breedte te pakken — 352px en 566px binnen een blok van
   852px. Vandaar stretch plus expliciete breedtes; ook de maximale
   antwoordbreedte gaat eraf, anders blijft dat deel alsnog smal. */
@media(max-width:1024px){
  .guifi-faq{flex-direction:column;gap:28px;align-items:stretch}
  .guifi-faq__intro{flex:none;max-width:none;width:100%}
  .guifi-faq__list{width:100%}
  .guifi-faq__a{max-width:none}
}

@media(max-width:900px){
  .guifi-faq__title{font-size:36px;line-height:1.1}
  .guifi-faq__q{font-size:20px;padding:18px 0;line-height:1.3}
  .guifi-faq__a,.guifi-faq__a p{font-size:16px;line-height:1.6}
}

/* ── Rank Math breadcrumbs (styling 1:1 overgenomen van guifi.nl) ──────────────
   Zelfstandig gezet (font/kleur/grootte expliciet) zodat de crumbs er meteen
   goed uitzien zodra je de [rank_math_breadcrumb]-shortcode/-widget plaatst,
   los van de Mokko-defaults. guifi.nl zet .separator/.last hard op 14px en
   erft kleur (#18181B) + font (Blauer Nue) van de body — hier expliciet gepind.
   Tokens bovenaan om per site te tweaken. */
.rank-math-breadcrumb{
  --bc-ink:#18181B;     /* tekst-/linkkleur — guifi --c-grey-900 */
  --bc-hover:#7a7a7a;   /* link-hover: grijs (guifi muted-grijs) */
  --bc-size:16px;       /* grootte */
  font-family:"Blauer Nue","Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--bc-size);
  line-height:1.5;
  color:var(--bc-ink);
}
.rank-math-breadcrumb p{margin:0;font-size:var(--bc-size)}
.rank-math-breadcrumb a{
  color:var(--bc-ink);
  font-size:var(--bc-size);
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease;
}
.rank-math-breadcrumb a:hover{color:var(--bc-hover)}
.rank-math-breadcrumb span{font-size:var(--bc-size) !important}  /* .separator + .last */
.rank-math-breadcrumb .last{color:var(--bc-ink)}                 /* huidige pagina */

/* ── Homepage: transparante header over de donkere video, vast in "dark background"-
   look ONGEACHT de light/dark-toggle. Logo + menu-items worden wit via het theme
   (.ms-nb--white, staat alleen op de homepage). De twee pills (zoek + light/dark-
   toggle) willen we hier WIT houden met een donker icoon, ook als de bezoeker naar
   light of dark mode switcht. Daarom pinnen we op die controls de kleur-tokens
   hard: witte pill-achtergrond + donker icoon. (data-menu=default → de header scrollt
   gewoon weg, er is geen aparte "gescrollde" state om rekening mee te houden.) */
.ms-nb--white .header__search-icon,
.ms-nb--white .ms_theme_mode{
  --color-contrast-lower:#ffffff;        /* witte pill-achtergrond */
  --color-contrast-high:hsl(0,0%,17%);   /* donker icoon (leesbaar op wit) */
}

/* ── Zoekresultaten ───────────────────────────────────────────────
   "Lees meer" in dezelfde stijl als de knoppen in Elementor (#10b981, wit,
   radius 8, padding 16/32) — inclusief hun gedrag: die hebben helemaal geen
   hover-effect. Mokko geeft links in de postlijst standaard een hover met
   verschuivende ::before/::after-panelen, een kleurwissel op de <span> en een
   transform. Dat werkt niet op een dichte knop, dus alles staat hier uit. */
.search-results .post-footer .guifi-zoek__knop,
.search-results .post-footer .guifi-zoek__knop:hover,
.search-results .post-footer .guifi-zoek__knop:focus,
.search-results .post-footer .guifi-zoek__knop:active,
.guifi-zoek__knop,
.guifi-zoek__knop:hover,
.guifi-zoek__knop:focus,
.guifi-zoek__knop:active{
  display:inline-block;
  background:#10b981 !important;
  color:#ffffff !important;
  padding:16px 32px;
  border-radius:8px;
  font-size:15px;
  line-height:1;
  font-weight:600;
  letter-spacing:.45px;
  text-decoration:none;
  transform:none !important;
  transition:none !important;
}

/* De <span> in de knop erft anders de kleurwissel en de transform van het thema. */
.guifi-zoek__knop span,
.guifi-zoek__knop:hover span,
.guifi-zoek__knop:focus span,
.guifi-zoek__knop:active span{
  color:#ffffff !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* De schuivende panelen van het thema helemaal weghalen. */
.search-results .post-footer .guifi-zoek__knop::before,
.search-results .post-footer .guifi-zoek__knop::after,
.guifi-zoek__knop::before,
.guifi-zoek__knop::after,
.guifi-zoek__knop span::before,
.guifi-zoek__knop span::after{content:none !important;}

/* Zichtbare focus voor toetsenbordgebruik blijft wel staan. */
.guifi-zoek__knop:focus-visible{outline:2px solid #0e0e10;outline-offset:3px;}

/* De zijkolom bevat op deze pagina alleen het zoekveld. */
.search-results .ms-sidebar .widget-title{margin-bottom:16px;}

/* ── Kruimelpad bovenaan de projectpagina's ───────────────────────────────────
   Komt uit de mu-plugin guifi-seo-breadcrumbs en staat boven de Elementor-
   inhoud. De maximale breedte volgt die van Elementors boxed containers
   (--container-max-width: 1280px), zodat de kruimel links uitlijnt met de
   eerste sectie eronder in plaats van tegen de schermrand te plakken.
   De kleur en de dark-mode-variant komen uit de bestaande regels voor
   .rank-math-breadcrumb; hier staat alleen de plaatsing. */
.guifi-kruimelpad{max-width:1280px;margin:0 auto;padding:28px 20px 0;text-align:center;}
.guifi-kruimelpad .rank-math-breadcrumb p{margin:0;font-size:14px;line-height:1.5;}
.guifi-kruimelpad .rank-math-breadcrumb a{text-decoration:none;}
.guifi-kruimelpad .rank-math-breadcrumb a:hover,
.guifi-kruimelpad .rank-math-breadcrumb a:focus-visible{text-decoration:underline;}
.guifi-kruimelpad .rank-math-breadcrumb .separator{padding:0 4px;}

@media (max-width:767px){
	.guifi-kruimelpad{padding:20px 15px 0;}
	.guifi-kruimelpad .rank-math-breadcrumb p{font-size:13px;}
}