/*
Theme Name: Grøn Koncert Child
Theme URI: https://groenkoncert.dk/
Description: Child theme til Gron
Author: Laura
Author URI: http://laurablem.dk/ 
Template: groenkoncert
Version: 3.0.0
Text Domain: groenkoncert-child
*/

/* Merchandise side generelt */

/* Wrapper til hele merchandise-siden, hvor baggrund og tekstfarve sættes */
.page-merchandise-wrapper{
    background: rgb(240,240,240,1);
    position:relative;
    color: #048F40;

}

/* Laver det prikkede baggrundslag, som ligger bag sidens indhold */
.page-merchandise-wrapper:before{
    content:'';
    display:block;
    background-image:url('assets/img/dotted.svg');
    background-repeat:repeat;
    background-position:5px 5px;
    background-attachment: fixed;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:0;
}

/* Print-slideshow */

/* Sætter fontstørrelsen på h3-overskrifterne i print-slidesne */
.textslideshow h3{
    font-size:22px;
}
/* Gør slideshow-billedet relativt, så pseudo-elementet med rammen kan placeres ud fra det */
.textslideshow .textimg__slideshow{
    position:relative;
}
/* Laver den grønne dekorative ramme bag slideshowsne */
.textslideshow .textimg__slideshow:before{
    content:'';
    display:block;
    position:absolute;
    top: -10px;
    left: -10px;
    height: 100%;
    width: 100%;
    border: 3px solid #048F40;   
}

/* Justerer rammen fra 576px og op, da udgangspunktet er de mindre skærme */
@media (min-width: 576px) {
    /* Giver den dekorative ramme lidt mere afstand på større skærme */
    .textslideshow .textimg__slideshow:before{
        top: -15px;
        left: -15px;
    }
}
/* Grøn tekstfarve i print-slideshowet */
.page-merchandise-wrapper .component.textimg{
    color:#048F40;
}

/* Almindelige tekstsektioner */
/* Sikrer at tekstområdet i tekstmodulerne også får den grønne tekstfarve */
.page-merchandise-wrapper .component.textmodule .text__wrap{
    color:#048F40;
}

/* Justerer afstanden omkring tekstmodulerne på merchsiden */
.page-merchandise-wrapper section.component.textmodule {
    padding-top: 80px;
    padding-bottom: 20px;
    margin-bottom: 0;
    min-height: auto;
}

/* Fjerner ekstra padding og margin inde i tekstmodulerne */
.page-merchandise-wrapper section.component.textmodule .container,
.page-merchandise-wrapper section.component.textmodule .text__wrap {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Merchkort */

/* Wrapper for merchkort-elementer */
.merchkort-wrapper {
    position:relative;
  	margin-bottom: 60px;
}
/* Gør merchkort-billederne mindre og placerer dem i midten */
.merchkort-wrapper img{
    width: 50%;
    display: block;
    margin: 0 auto;
}

/* Bannerlink - "Dit køb betyder noget"-sektion */
/* Farvetema for bannerlink-komponenten */
.page-merchandise-wrapper .component.bannerlink{
    color:#048F40;
}

/* Justerer luften omkring teksten i bannerlink-modulet */
.page-merchandise-wrapper .component.bannerlink .text-center{
    margin-top: -30px;
  	margin-bottom: 70px;
}

/* Merchkort navigation */

/* Centrerer merchkort-navigationen og gør den fleksibel */
.merchkort-navbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  	gap: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
  	max-width: 750px;
 	margin-left: auto;
 	margin-right: auto;
}
/* Styling af alle knapperne i merchkort-navigationen */
.merchkort-navbar-button {
    background:#04a64b;
   	color: white;
    width:150px;
  	height: 50px;
    transition:all 1s ease;
  	border: none;
    outline: none;
  	margin-bottom: 10px;
}

/* Styling af den knap der er aktiv/valgt */
.merchkort-navbar-button.is-active {
    background:#004f20;
    width:180px;
	height: 50px;
}

/* Tablet-størrelse for merchkort-knapperne */
@media (max-width: 991px) {

     /* Styling af knapperne på tablet (størrelse) */
    .merchkort-navbar-button {
        width: 110px;
        height: 40px;
        font-size: 15px;
    }

     /* Styling af den aktive knap på tablet (størrelse) */
    .merchkort-navbar-button.is-active {
        width: 110px;
        height: 40px;
        font-size: 15px;
    }
}

/* Mobil-størrelse for merchkort-knapperne */
@media (max-width: 576px) {

     /* Styling af knapperne på mobil (størrelse) */
    .merchkort-navbar-button {
        width: 90px;
        height: 35px;
        font-size: 13px;
    }

     /* Styling af den aktive knap på mobil (størrelse) */
    .merchkort-navbar-button.is-active {
        width: 90px;
        height: 35px;
        font-size: 13px;
    }
}

/* Triple slider */

/* Afstand over triple slider-komponenten */
.page-merchandise-wrapper .component.triple_sider {
    margin-top: 20px;
}

/* Breakpoints for antallet af billeder i trippelslideren */
/* 3 billeder på desktop */
.image-gallery-triple .textimg__slideshow-item{
    width: calc(33.333% - 10px);
    margin-right: 10px;
    margin-bottom: 60px;
}

/* 2 billeder på tablet */
@media (max-width: 991px) {
    .image-gallery-triple .textimg__slideshow-item{
        width: calc(50% - 10px);
    }
}

/* 1 billede på mobil */
@media (max-width: 576px) {
    .image-gallery-triple .textimg__slideshow-item{
        width: 100%;
        margin-right: 0;
    }
}

/* Frontpage banner - Hero sektionen */
/* Gør så overskrift og underoverskrift står tættere sammen */
.page-merchandise-wrapper .gk-frontpage-banner h4.date {
    line-height: 0.5;
}

/* Tablet-størrelse for bannerets linjeafstand (mindre) */
@media (max-width: 991px) {
    .page-merchandise-wrapper .gk-frontpage-banner h4.date {
        line-height: 0.3;
    }
}
/* Mobil-størrelse for bannerets linjeafstand (mindre endnu) */
@media (max-width: 576px) {
    .page-merchandise-wrapper .gk-frontpage-banner h4.date {
        line-height: 0.2;
    }
}

/* Inspirationsslider (trippelslideren) */

/* Gør baggrunden mørkegrøn på overskrift-modulet over inspirationsslideren */
.page-merchandise-wrapper section.component.textmodule:nth-of-type(11) {
    background: #004f20;
    margin-bottom: 0;
    padding-bottom: 0;
  	padding-top: 60px;
}

/* Grøn baggrund og afstand på inspirationsslideren */
.page-merchandise-wrapper .component.triple_sider:nth-of-type(4) {
    background: #004f20;
    margin-top: 0;
    padding-top: 0;
  	padding-bottom: 60px;
}

/* Hvid overskrift på den grønne baggrund */
.page-merchandise-wrapper section.component.textmodule:nth-of-type(11) h1 {
    color: white;
  	margin-bottom: 80px;
}

/* Dekorativ ramme bag inspirationsslideren */

/* Gør inspirationsslideren relativ, så pseudo-elementet (den dekorative ramme) kan placeres korrekt */
.page-merchandise-wrapper .component.triple_sider:nth-of-type(4) {
    position: relative;
    z-index: 1;
}

/* Gør selve slideren relativ, så rammen følger sliderens placering */
.page-merchandise-wrapper .component.triple_sider:nth-of-type(4) .image-gallery-triple {
    position: relative;
    z-index: 1;
}

/* Hvid dekorativ ramme bag inspirationsslideren */
.page-merchandise-wrapper .component.triple_sider:nth-of-type(4) .image-gallery-triple::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
	transform: translateX(-50%);
    width: calc(100% + 60px);
    height: 100%;
    border: 3px solid white;
    z-index: -1;
    pointer-events: none;
}

/* Mobil-størrelse for den hvide ramme */
@media (max-width: 575px) {
      /* Gør sådan at rammen er fuld bredde på mobil */
    .page-merchandise-wrapper .component.triple_sider:nth-of-type(4) .image-gallery-triple::before {
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: calc(100% - 25px);
        box-sizing: border-box;
    }
}

/* Justerer luften i tekstmodulet efter slideren */
.page-merchandise-wrapper section.component.textmodule:nth-of-type(12) {
    padding-bottom: 20px;
    margin-bottom: 0;
    min-height: auto;
  	padding-top: 120px;
}