/**
Theme Name: GRO Child
Author: Good Men 
Author URI: http://wpastra.com/about/
Description: Child theme of the Astra theme for GRO
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: gro-child
Template: astra
*/

/* --- Tunables för exklusiv känsla --- */
:root {
  --burger-size: 40px;                 /* ikonbredd */
  --burger-thickness: 1px;             /* linjetjocklek */
  --burger-gap: 8px;                   /* avstånd mellan linjerna */
  --burger-radius: 1px;                /* linjernas rundning */
  --burger-duration: 420ms;            /* hastighet på transition */
  --burger-ease: cubic-bezier(.4,0,.2,1);
}

/* block style variations */

/* Style variant: Narrow 70% for core/separator */
.wp-block-separator.is-style-narrow-70 {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: block;          /* säkerställer att max-width uppför sig som väntat */
}

/* För varianten med dekorativ linje (om tema/inställningar lägger bredd på ett inner-element) */
.wp-block-separator.is-style-narrow-70:where(hr, .wp-block-separator__rule) {
  max-width: 100%;         /* låt inner-elementet fylla 70%-containern */
}





/* navigering ----------------------------------------------------*/
/* Dölj Astras egen ikon i togglern */
.ast-mobile-menu-trigger-minimal .mobile-menu-toggle-icon { display: none !important; }

/* fix hamburger menu outline */
.ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
    border-width: 0px !important;
    outline:none;
}
.ast-mobile-popup-drawer.active .menu-toggle-close:focus {
    border-width: 0px !important;
    outline:none;
}

/* Gör knappen till en "ikon-yta" (behåller aria/onclick från Astra) */
.ast-mobile-menu-trigger-minimal {
  position: relative;
  width: var(--burger-size);
  height: calc(var(--burger-thickness) * 3 + var(--burger-gap) * 2);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* De två pseudo-elementen ritar alla tre linjer i stängt läge */
.ast-mobile-menu-trigger-minimal::before,
.ast-mobile-menu-trigger-minimal::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  width: 40px;
  height: var(--burger-thickness);
  margin: 0 auto;
  background: var(--ast-global-color-0);                 /* följer tema/hoverfärg */
  border-radius: var(--burger-radius);
  transform: translateY(-50%);
  transition:
    transform var(--burger-duration) var(--burger-ease),
    box-shadow var(--burger-duration) var(--burger-ease),
    background-color var(--burger-duration) var(--burger-ease),
    opacity var(--burger-duration) var(--burger-ease);
}

/* ::before = mittenlinjen + ÖVERSTA via box-shadow */
.ast-mobile-menu-trigger-minimal::before {
  box-shadow: 0 calc(var(--burger-gap) * -1) 0 0 currentColor;
}

/* ::after = NEDERSTA via box-shadow (själva elementet blir "andra" mittenlinjen vid öppet läge) */
.ast-mobile-menu-trigger-minimal::after {
  box-shadow: 0 var(--burger-gap) 0 0 currentColor;
}

/* --- Öppet läge: rotera till ett kryss och ta bort skugg-linjerna --- */
.ast-mobile-menu-trigger-minimal[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(45deg);
  box-shadow: none;                        /* tar bort övre linjen */
}

.ast-mobile-menu-trigger-minimal[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(-45deg);
  box-shadow: none;                        /* tar bort nedre linjen */
}

/* Diskret färgtransition vid hover/fokus om du vill */
.ast-mobile-menu-trigger-minimal { transition: color var(--burger-duration) var(--burger-ease); }
.ast-mobile-menu-trigger-minimal:hover,
.ast-mobile-menu-trigger-minimal:focus-visible { color: var(--ast-global-color-2, currentColor); }

/* Respekt för användare som valt reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
  .ast-mobile-menu-trigger-minimal,
  .ast-mobile-menu-trigger-minimal::before,
  .ast-mobile-menu-trigger::after { transition: none !important; }
}

/* Gör klickytan större med mer padding */
.ast-button-wrap .menu-toggle.main-header-menu-toggle {
        padding: 1em;
}        


/* Astra mobilheader: håll hamburgaren innanför 20px padding -----------------------------------*/
@media (max-width: 1280px){
  /* 1) Nollställ “drag ut”-marginalen på högra sektionen */
  #ast-mobile-header .site-header-primary-section-right,
  #ast-mobile-header .ast-grid-right-section{
    margin-inline-end: 0 !important;   /* var ofta negativt */
  }

  /* 2) Ta bort ev. marginaler på wrapper/knapp */
  #ast-mobile-header .ast-button-wrap{
    margin: 0 !important;
  }
  #ast-mobile-header .menu-toggle.main-header-menu-toggle{
    margin: 0 !important;
    padding-inline: 20px;              /* egen tapp-yta men innanför paddingen */
    box-sizing: content-box;
  }

  /* 3) Se till att ikonens box inte “sticker ut” */
  #ast-mobile-header .mobile-menu-toggle-icon,
  #ast-mobile-header .ahfb-svg-iconset{
    display: inline-flex;
  }
}

@media (max-width: 1280px){
  #ast-mobile-header .ast-primary-header-bar{ padding-inline: 20px; }
}


/* transtions */

:root{
  --overlay-close-top: 48px;
  --overlay-close-right: 48px;
  --overlay-link-gap: 18px;
}

/* —— CENTRERING UTAN ATT STÖRA ASTRAS SHOW/HIDE —— */
/* Gäller oavsett om desktop- eller mobilcontainern är aktiv */
.ast-desktop-popup-content > .ast-builder-menu-mobile,
.ast-mobile-popup-content  > .ast-builder-menu-mobile{
  min-height: 100vh;
  min-height: 100dvh;          /* bättre på iOS/Android */
  display: grid;               /* påverkar bara barnet, inte växlaren */
  place-items: center;         /* vertikalt + horisontellt */
  width: 100%;
  text-align: center;
  padding: 0 !important;
  margin: 0;
}

/* Hjälp: låt navet fylla bredd så centrering blir snygg */
.ast-desktop-popup-content .ast-main-header-bar-alignment,
.ast-mobile-popup-content  .ast-main-header-bar-alignment,
.ast-desktop-popup-content .main-header-bar-navigation,
.ast-mobile-popup-content  .main-header-bar-navigation,
.ast-desktop-popup-content .main-navigation,
.ast-mobile-popup-content  .main-navigation{
  width: 100%;
}

/* Vertikal spacing mellan menyvalen */
.ast-desktop-popup-content .main-header-menu,
.ast-mobile-popup-content  .main-header-menu{
  margin: 0; 
  padding: 0; 
  list-style: none;
}
.ast-desktop-popup-content .main-header-menu > li + li,
.ast-mobile-popup-content  .main-header-menu > li + li{
  margin-top: var(--overlay-link-gap);
}
.ast-desktop-popup-content .main-header-menu .menu-item > .menu-link,
.ast-mobile-popup-content  .main-header-menu .menu-item > .menu-link{
  display: inline-block;
  text-decoration: none;
}

/* —— STÄNG-KRYSSET I HÖGER HÖR N —— */
.menu-toggle-close,
.ast-desktop-popup-close,
.ast-mobile-popup-close{
  position: fixed;                 /* ankra i viewporten */
  top: var(--overlay-close-top);
  right: var(--overlay-close-right);
  z-index: 1000;
  padding: 12px;                   /* större klickyta */
  background: transparent;
  border: 0;
  line-height: 1;
  color: inherit;
}
.menu-toggle-close svg{ 
  width: 24px; 
  height: 24px; 
  color: var(--ast-global-color-4);
}

/* När WP-admin-baren syns: flytta ned krysset lite */
body.admin-bar .menu-toggle-close,
body.admin-bar .ast-desktop-popup-close,
body.admin-bar .ast-mobile-popup-close{
  top: calc(var(--overlay-close-top) + 32px);
}
@media (max-width: 782px){
  body.admin-bar .menu-toggle-close,
  body.admin-bar .ast-desktop-popup-close,
  body.admin-bar .ast-mobile-popup-close{
    top: calc(var(--overlay-close-top) + 46px);
  }
}

/* Reduced motion respekt */
@media (prefers-reduced-motion: reduce){
  .ast-desktop-popup-content,
  .ast-mobile-popup-content{ transition: none !important; }
}

/* Custom style menu close button -----------------------------------------*/

/* 1) Dölj Astras inbyggda SVG i stängknappen */
.menu-toggle-close .ast-close-svg,
.menu-toggle-close .ast-svg-iconset svg {
  display: none !important;
}

/* 2) Själva knappen: behåll bra klickyta men rita ikon med ::before/::after */
.menu-toggle-close{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;                 /* klickyta – justera vid behov */
  line-height: 1;
  color: inherit;                /* ikonen följer textfärgen */
}

/* 3) Ikonens “canvas”: 20×20 px */
.menu-toggle-close::before,
.menu-toggle-close::after{
  content: "";
  position: absolute;
  width: 20px;                   /* ikonbredd */
  height: 1px;                   /* 1 px tunna linjer */
  background: #fff;      /* färgen följer temat */
  border-radius: 1px;            /* lite mjukare ändar */
  top: 50%;
  left: 50%;
  transform-origin: center;
}

/* Diagonalerna (X) */
.menu-toggle-close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-toggle-close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* (Valfritt) subtil feedback */
.menu-toggle-close { transition: transform .15s ease; }
.menu-toggle-close:hover,
.menu-toggle-close:focus-visible { transform: scale(1.04); }

/* (Valfritt) hög DPI finlir – minskar anti-alias-känslan på vissa skärmar */
@media (min-resolution: 2dppx){
  .menu-toggle-close::before,
  .menu-toggle-close::after{
    height: 1px; /* behåll 1px även på retina */
  }
}




/* Footer styling ------------------------------------------------*/
.astra-footer-horizontal-menu {
    gap: 18px;
}


/* Hero mobile style */

 @media (max-width: 544px) {
  .gro-video-cover {
    min-height: 411px!important;
  }
  .gro-video-cover h1 {
    font-size: 48px!important;
  }

  .gro-video-anim {
    min-height: 200px!important;
  }

  .gro-image-cover {

    min-height: 500px!important;

  }
 }



/* Transitions ----------------------------------------------------*/

/* ================================
   LUXE ANIMATIONS (slow + subtle)
   ================================ */

:root{
  --luxe-ease: cubic-bezier(.2,.8,.2,1);
  --luxe-dur: 2.25s;     /* entré för text */
  --luxe-stagger: .16s;  /* mellanrum mellan element */
  --luxe-delay: 0s;    /* liten startfördröjning */

    --cover-ease: cubic-bezier(.1,1,.22,1); /* easeOutQuint-känsla */
  --cover-dur: 2.45s;                     /* gärna 1.3–1.6s */
}

/* Respektera användare som vill minska rörelser */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Säkerställ att fullbredd verkligen blir fullbredd */
.wp-block-cover.alignfull{ max-width: 100vw; }

/* --------------------------------
   TEXTREVEAL (lägg klass: luxe-reveal
   på Group-blocket som omsluter texten)
-----------------------------------*/
.luxe-reveal > *{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity var(--luxe-dur) var(--luxe-ease) var(--luxe-delay),
    transform var(--luxe-dur) var(--luxe-ease) var(--luxe-delay),
    filter calc(var(--luxe-dur)*.9) var(--luxe-ease) var(--luxe-delay);
  will-change: transform, opacity, filter;
}

/* Stagger (utöka vid behov) */
.luxe-reveal > *:nth-child(1){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*0); }
.luxe-reveal > *:nth-child(2){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*1); }
.luxe-reveal > *:nth-child(3){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*2); }
.luxe-reveal > *:nth-child(4){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*3); }
.luxe-reveal > *:nth-child(5){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*4); }
.luxe-reveal > *:nth-child(6){ transition-delay: calc(var(--luxe-delay) + var(--luxe-stagger)*5); }

.luxe-reveal.is-inview > *{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --------------------------------
   COVER ENTRÉ + PARALLAX
   (lägg klass: luxe-cover luxe-parallax
   på Cover-blocket)
-----------------------------------*/
.luxe-cover{
  position: relative;
  overflow: hidden;   /* snyggare när bilden skalar in */
  isolation: isolate; /* separera overlay/filters */
}

/* Startläge: lätt inzoom + väntar på .is-inview */
.luxe-cover .wp-block-cover__image-background,
.luxe-cover video.wp-block-cover__video-background{
  transform: scale(1.035) translateY(var(--parallax,0px));
  transition: transform var(--cover-dur) var(--cover-ease);
  will-change: transform;
}

/* När den kommer in: börja direkt, ebbas ut långsamt */
.luxe-cover.is-inview .wp-block-cover__image-background,
.luxe-cover.is-inview video.wp-block-cover__video-background{
  transform: scale(1) translateY(var(--parallax,0px));
}

/* Parallax-variabel (sätts av JS) */
.luxe-parallax{ --parallax: 0px; }

/* --------------------------------
   DISKRET OVERLAY (VALFRITT)
   Lägg även klassen luxe-overlay på Cover
   om du vill ha en svag gradient för läsbarhet
-----------------------------------*/
.luxe-cover.luxe-overlay::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.16) 0%,
      rgba(0,0,0,.08) 35%,
      rgba(0,0,0,.22) 100%);
  opacity: 0;
  transition: opacity 1.2s var(--luxe-ease);
  z-index: 1;
}
.luxe-cover.luxe-overlay.is-inview::before{ opacity: 1; }

/* Se till att texten ligger över overlayn */
.luxe-cover .wp-block-cover__inner-container{
  position: relative; z-index: 2;
}

/* --------------------------------
   SMÅ HJÄLPARE (VALFRITT)
-----------------------------------*/

/* Mjukare hover för knappar/ länkar inne i luxe-reveal */
.luxe-reveal a,
.luxe-reveal .wp-block-button__link{
  transition: transform .35s var(--luxe-ease), opacity .35s var(--luxe-ease);
}
.luxe-reveal a:hover,
.luxe-reveal .wp-block-button__link:hover{
  transform: translateY(-1px);
  opacity: .92;
}

/* fade up animation --------------------------------------------------*/

:root{
  --fade-ease: cubic-bezier(.2,.8,.2,1);
  --fade-dur: 3.8s;     /* långsammare, lyxigt */
  --fade-shift: 36px;   /* hur mycket de glider uppåt */
  --fade-stagger: .12s; /* mellanrum mellan syskon */
}
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1 !important; transform:none !important; }
}

.fade-up{
  opacity: 0;
  transform: translateY(var(--fade-shift));
  will-change: transform, opacity;
  transition:
    opacity var(--fade-dur) var(--fade-ease),
    transform var(--fade-dur) var(--fade-ease);
}

/* triggas när elementet är i vy */
.fade-up.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* valfri “stagger” inom en lista */
.fade-stagger > *{ transition-delay: 0s; }
.fade-stagger > *:nth-child(1){ transition-delay: calc(var(--fade-stagger)*0); }
.fade-stagger > *:nth-child(2){ transition-delay: calc(var(--fade-stagger)*1); }
.fade-stagger > *:nth-child(3){ transition-delay: calc(var(--fade-stagger)*2); }
.fade-stagger > *:nth-child(4){ transition-delay: calc(var(--fade-stagger)*3); }
.fade-stagger > *:nth-child(5){ transition-delay: calc(var(--fade-stagger)*4); }
/* lägg gärna till fler rader vid behov */



/*---------------------*/

/* =========================================
   COVER GLIDE — SMOOTH (matchar fade-up-känslan)
   ========================================= */

:root{
  /* Lugnare kurva (samma karaktär som fade-up) */
  --cv-ease: cubic-bezier(.2,.8,.2,1);
  --cv-dur: 2s;     /* lite längre svans */
  --cv-shift: 14px;   /* vertikal startförflyttning */
  --cv-zoom: 1.03;    /* diskret startzoom (lite mindre = mjukare) */
}

@media (prefers-reduced-motion: reduce){
  .cover-glide .wp-block-cover__image-background,
  .cover-glide video.wp-block-cover__video-background{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.cover-glide{
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Startläge – ingen transition än (undviker krockar/skutt) */
.cover-glide .wp-block-cover__image-background,
.cover-glide video.wp-block-cover__video-background{
  opacity: 0;
  transform: scale(var(--cv-zoom)) translateY(var(--cv-shift)) translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: none;
  transform-origin: 50% 50%;
}

/* Inview – en lugn, sammanhängande glidning */
.cover-glide.inview .wp-block-cover__image-background,
.cover-glide.inview video.wp-block-cover__video-background{
  opacity: 1;
  transform: scale(1) translateY(0) translateZ(0);
  transition:
    transform var(--cv-dur) var(--cv-ease),
    opacity  calc(var(--cv-dur) * .9) var(--cv-ease);
}

/* FINJUSTERING (valfritt, aktivera någon av dessa om du vill)
   1) ÄNNU MJUKARE KURVA (Material “decelerate”)
      --cv-ease: cubic-bezier(0.0, 0.0, 0.2, 1);
   2) LITE MER TID
      --cv-dur: 1.6s;
   3) MINST MÖJLIG STARTZOOM
      --cv-zoom: 1.02;
*/





/* style overlapp bottles -----------------------------------------------*/

.overlap-row {
    margin-top: -150px!important;
}

@media (max-width: 782px) {
    .overlap-row {
    margin-top: 0px!important;
    }
}    

@media (max-width: 782px) {
    .right-col-first {
        flex-direction: column-reverse;
    }
}    

@media (max-width: 782px) {
    .product-row {
        margin-bottom: 40px;
    }
}

 @media (max-width: 544px) {
    .wp-block-columns .wp-block-column:not(:last-child) {
        margin-bottom:0px;
    }
}

/* FAQ ---------------------------------------------*/

.uagb-question strong {
    font-weight: 400!important;
}

/* 1) Gör Spectras SVG osynlig, utan att lägga display:none */
.uagb-faq-icon-wrap svg path{
  fill: transparent !important;
  stroke: transparent !important;
}

/* 2) Host-elementet */
.uagb-faq-icon-wrap{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  line-height:1 !important;
}

/* 3) Plus-ikon från din fil (färgen kommer från SVG-filen) */
.uagb-faq-icon-wrap::before{
  content:"";
  display:inline-block;
  width:20px; height:20px;
  background: no-repeat center/contain
    url("/wp-content/themes/gro-child/assets/icons/faq-plus.svg");
}

/* 4) Minus när öppen – träffar båda fallen */
.uagb-icon-active.uagb-faq-icon-wrap::before,
.uagb-faq-questions-button[aria-expanded="true"] .uagb-faq-icon-wrap::before,
[aria-expanded="true"] .uagb-faq-icon-wrap::before{
  background-image: url("/wp-content/themes/gro-child/assets/icons/faq-minus.svg");
}


/* Contact form styling -----------------------------------*/
.uagb-forms-main-submit-button {
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}


html:not(.no-js) .subtle[data-aos=fade-up] {
	transform: translate3d(0, 80px, 0);
}
/* scroll up custom icon -----------------------------------*/

/* Dölj Astras inbyggda scroll-to-top-ikon */
#ast-scroll-top .ast-icon.icon-arrow .ast-arrow-svg { display: none !important; }

/* Behåll knappen – ersätt bara själva ikonen */
#ast-scroll-top .ast-icon.icon-arrow{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tunables */
:root{
  --scrolltop-size: 24px;   /* ikonens storlek – håll 24×24 för knivskarp 1px */
  --scrolltop-dy: 2px;      /* sänk ikonen lite (mer topp-padding) */
}

/* Ny ikon: pil med skaft (1px), spetsen förlängd 2 px åt båda sidor */
#ast-scroll-top .ast-icon.icon-arrow::before{
  content: "";
  display: inline-block;
  width: var(--scrolltop-size);
  height: var(--scrolltop-size);
  background-color: currentColor;

  /* Mask (inline SVG). Spetsens hörn vid x=4 och x=20 istället för 6/18. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M12 5 L12 21 M4 11 L12 5 L20 11' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M12 5 L12 21 M4 11 L12 5 L20 11' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;

  /* Sänk ikonen lite för extra topp-padding */
  transform: translateY(var(--scrolltop-dy));
  transition: transform .15s ease;
}

/* Liten hover-känsla utan att sticka upp för mycket */
#ast-scroll-top:hover .ast-icon.icon-arrow::before{
  transform: translateY(calc(var(--scrolltop-dy) - 1px));
}


/* Responsive top and bottom padding on text rows */
.text-row {
 padding-block: clamp(96px, 10vw + 80px, 176px) !important; 
}

.text-row-space-top {
    padding-top: clamp(96px, 10vw + 80px, 176px) !important;
}

.scrollsequence-pages-wrap{
height:55vh!important;
}
.scrollsequence-page{
height:55vh!important;
}

.scrollsequence-wrap{
 height: calc(700px + 50vh)!important;
}