/*
Theme Name: Grow Academy Child
Theme URI: https://www.growacademy.nu
Description: Child theme van Kadence voor Grow Academy. Bevat de paginatemplate "Grow Academy Home" met het volledige ontwerp en de dynamische WooCommerce-cursusloop. De homepage-stijl staat in assets/growacademy.css en wordt alleen op die template geladen.
Author: Cogentry
Template: kadence
Version: 1.0.0
Text Domain: growacademy-child
*/

/* Basisstijl van het child theme blijft bewust leeg: de homepage gebruikt assets/growacademy.css,
   de rest van de site (winkel, winkelwagen, account) volgt Kadence + het globale kleurenpalet. */

/* =========================================================================
   Mobiele header — correctie (2026-09-15)
   =========================================================================
   Probleem: op mobiel rendeerde het logo op zijn natuurlijke 289x110 px en
   stonden logo en hamburger onder elkaar. De Elementor-header werd daardoor
   207 px hoog. Op de homepage staat die header 'fixed', waardoor de bovenkant
   van de pagina — de aanduiding "Modern leerplatform" en de titel "Leer
   slimmer. / Groei verder." — erachter verdween en niet te bereiken was door
   te scrollen: die tekst stond al bovenaan, ONDER een vaste laag.

   Aanpak: niet de Elementor-template herbouwen, maar corrigeren via CSS.
   Dit bestand laadt NA post-50088.css, dus de overrides winnen op cascade.
   Resultaat: 207 -> 73 px.

   Let op bij wijzigen: het uitklapmenu staat in de flow van dezelfde
   container als het logo. Zonder punt 5 hieronder rekt het bij openen de rij
   op, schuift het logo mee en valt het paneel over de hamburger — waardoor
   die niet meer aan te klikken is en het menu niet meer dicht kan.

   Terugdraaien: backups/file-backups/style.css.pre-mobilefix-*
   ========================================================================= */

@media (max-width: 960px) {

  /* 1. Logo op een normale mobiele hoogte.
        Specificiteit (0,3,1) — gelijk aan de Elementor-regel, en dit bestand
        laadt later, dus deze wint zonder !important. */
  .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container img,
  .elementor-location-header .elementor-widget-image .elementor-widget-container img {
    width: auto;
    max-width: 100%;
    height: 40px;
  }

  /* 2. Logo links, hamburger rechts, op een rij.
        De twee binnenste containers stonden op --width:100%; elk vulde dus
        een hele regel en de rij brak af. Auto = zo breed als de inhoud.
        position:static is nodig voor punt 5: anders is de menucontainer het
        ankerpunt van het uitklappaneel in plaats van de headerbalk. */
  .elementor-location-header .e-con-inner {
    --flex-wrap: nowrap;
    --align-items: center;
    --justify-content: space-between;
    --gap: 12px;
    --row-gap: 12px;
  }
  .elementor-location-header .e-con-inner > .e-con {
    --width: auto;
    --flex-direction: row;
    --align-items: center;
    flex: 0 1 auto;
    position: static;
  }

  /* 3. De menuwidget mat 0 px hoog, waardoor de hamburger buiten de witte
        balk viel. Oorzaak: Elementor geeft de widget-inhoud height:100%,
        terwijl de widget zijn hoogte uit die inhoud haalt — een
        kringverwijzing die op nul uitkomt. Een min-height ter grootte van
        het tapdoel verbreekt hem. */
  .elementor-location-header .e-con .elementor-widget.elementor-widget-nav-menu > .elementor-widget-container {
    min-height: 44px;
  }

  /* 4. Verticale lucht terugbrengen: padding een keer op de buitenste rij
        in plaats van op elke rij apart. */
  .elementor-location-header .e-con-inner {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .elementor-location-header .e-con-inner > .e-con {
    padding-top: 0;
    padding-bottom: 0;
  }
  .elementor-location-header .elementor-widget:not(:last-child) {
    margin-bottom: 0;
  }

  /* 5. Het uitklappaneel uit de flow halen en onder de balk hangen.

        Twee dingen zaten in de weg. Ten eerste stond het paneel in de flow
        van de menucontainer: bij openen rekte het de rij op en schoof alles
        mee. Ten tweede staat er in de Elementor-pagina-CSS
        margin-top:-59px !important op dit paneel — een offset uit de tijd dat
        de header 207 px hoog was, die het paneel nu over de hamburger heen
        trok. Beide worden hier gecorrigeerd.

        De widget zelf op static zetten maakt de vaste headerbalk het
        ankerpunt, zodat top:100% precies de onderkant van die balk is.
        Het !important is er alleen om het !important hierboven te neutraliseren. */
  .elementor-location-header .elementor-widget.elementor-widget-nav-menu {
    position: static;
  }
  .elementor-location-header .e-con .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute;
    top: 100%;
    left: auto;
    right: 10px;
    width: auto;
    margin-top: 0 !important;
  }

  /* 6. Hamburger krijgt een volwaardig tapdoel (44px, WCAG 2.5.5).
        Stond op 33 px. */
  .elementor-location-header .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container img,
  .elementor-location-header .elementor-widget-image .elementor-widget-container img {
    height: 34px;
  }
}