/*
 Theme Name:   GGG Basel
 Theme URI:    http://www.ggg-basel.ch
 Description:  Divi Child Theme
 Author:       Christian Casulli
 Author URI:   http://www.casulli.ch
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
 Text Domain:  divi-child-theme
*/

/* ==== Add your own styles below this line ====
 * -------------------------------------------- */





/* ==========================================================
   GGG BASEL - MOBILE NAVIGATION
   ==========================================================

   Zentrale Mobile-Navigation der GGG Basel Website.

   Aufbau:

   .ggg-mobile-navigation
       .ggg-mobile-header
       .ggg-mobile-menu

   Desktop bleibt vollstaendig unveraendert.
   ========================================================== */


/* ----------------------------------------------------------
   GESAMTE MOBILE-NAVIGATION AUF DESKTOP AUSBLENDEN
   ---------------------------------------------------------- */

.ggg-mobile-navigation {
	display: none;
}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (max-width: 1399px) {


	/* ------------------------------------------------------
	   OBERER GGG CLAIM
	   ------------------------------------------------------

	   Aktueller, visuell gepruefter Mobile-Stand.

	   Der Claim erhaelt oben 32px Abstand. Dadurch ist der
	   vollstaendige Claim innerhalb der gruenen Flaeche
	   sichtbar und der darunterliegende Mobile-Header sitzt
	   an der gewuenschten Position.
	   ------------------------------------------------------ */

	.ggg-mobile-top-claim {
		padding-top: 32px !important;
		padding-bottom: 0 !important;
	}


	/* Divis mobilen margin-top von -40px neutralisieren */
	.ggg-mobile-top-claim > .et_pb_row {
		margin-top: 0 !important;
	}



	/* ------------------------------------------------------
	   MOBILE-NAVIGATION
	   ------------------------------------------------------ */

	.ggg-mobile-navigation {
		display: block;
		width: 100%;

		position: relative;
		z-index: 1000;

		background: #ffffff;
	}



	/* ------------------------------------------------------
	   MOBILE HEADER
	   ------------------------------------------------------ */

	.ggg-mobile-header {
		display: flex;

		align-items: center;
		justify-content: space-between;

		padding: 10px 24px;

		background: #ffffff;

		width: 100%;
		box-sizing: border-box;

		position: relative;

		/*
		 * Header bleibt ueber dem darunterliegenden Menue.
		 */
		z-index: 2;
	}



	/* ------------------------------------------------------
	   GGG BASEL LOGO
	   ------------------------------------------------------ */

	.ggg-mobile-logo {
		display: block;
		line-height: 0;
	}


	.ggg-mobile-logo img {
		display: block;

		width: 130px;
		height: auto;
		max-width: 100%;
	}



	/* ------------------------------------------------------
	   HAMBURGER / X BUTTON
	   ------------------------------------------------------ */

	.ggg-mobile-menu-toggle {
		display: flex;
		flex-direction: column;

		align-items: flex-end;
		justify-content: center;

		gap: 6px;

		background: transparent;
		border: 0;

		padding: 10px 0 10px 10px;
		margin: 0;

		cursor: pointer;
	}


	.ggg-mobile-menu-line {
		display: block;

		width: 32px;
		height: 2px;

		background: #000000;

		/*
		 * Fuer die Transformation zum X.
		 */
		transform-origin: center;
		transition:
			transform 0.25s ease,
			opacity 0.20s ease,
			width 0.25s ease;
	}


	/* Oberste Hamburger-Linie bewusst kuerzer */
	.ggg-mobile-menu-line--short {
		width: 21px;
	}



	/* ------------------------------------------------------
	   HAMBURGER WIRD ZUM X
	   ------------------------------------------------------ */

	.ggg-mobile-navigation.is-open .ggg-mobile-menu-toggle {
		position: relative;

		width: 42px;
		height: 42px;
		padding: 0;
	}


	.ggg-mobile-navigation.is-open .ggg-mobile-menu-line {
		position: absolute;

		right: 0;

		width: 32px;
	}


	.ggg-mobile-navigation.is-open .ggg-mobile-menu-line:nth-child(1) {
		transform: rotate(45deg);
	}


	.ggg-mobile-navigation.is-open .ggg-mobile-menu-line:nth-child(2) {
		opacity: 0;
	}


	.ggg-mobile-navigation.is-open .ggg-mobile-menu-line:nth-child(3) {
		transform: rotate(-45deg);
	}



	/* ------------------------------------------------------
	   MOBILE-MENUE
	   ------------------------------------------------------ */

	.ggg-mobile-menu {
		width: 100%;
		box-sizing: border-box;

		background: #ffffff;

		padding: 0 24px 32px;
	}


	/*
	 * Das HTML-hidden-Attribut soll immer Vorrang haben.
	 */
	.ggg-mobile-menu[hidden],
	.ggg-mobile-menu-main[hidden],
	.ggg-mobile-submenu[hidden] {
		display: none !important;
	}



	/* ------------------------------------------------------
	   SUCHE
	   ------------------------------------------------------ */

	.ggg-mobile-search {
		display: flex;
		align-items: center;

		width: 100%;

		padding: 22px 0 14px;

		border-bottom: 1px solid #000000;
	}


	.ggg-mobile-search-field {
		flex: 1;

		min-width: 0;

		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;

		background: transparent !important;

		padding: 0;

		font-family: inherit;
		font-size: 14px;
		font-weight: 500;

		color: #000000;
	}


	.ggg-mobile-search-field::placeholder {
		color: #000000;
		opacity: 1;
	}


	/* Suchbutton */
	.ggg-mobile-search-submit {
		position: relative;

		width: 34px;
		height: 34px;

		flex: 0 0 34px;

		border: 0;
		background: transparent;

		padding: 0;
		margin: 0;

		cursor: pointer;
	}


	/*
	 * Lupe rein mit CSS gezeichnet.
	 */
	.ggg-mobile-search-submit span::before {
		content: "";

		position: absolute;

		width: 13px;
		height: 13px;

		border: 2px solid #000000;
		border-radius: 50%;

		left: 7px;
		top: 6px;
	}


	.ggg-mobile-search-submit span::after {
		content: "";

		position: absolute;

		width: 9px;
		height: 2px;

		background: #000000;

		transform: rotate(45deg);

		left: 19px;
		top: 20px;
	}



	/* ------------------------------------------------------
	   HAUPTMENUE
	   ------------------------------------------------------ */

	.ggg-mobile-menu-main {
		padding-top: 18px;
	}


	.ggg-mobile-menu-item {
		display: flex;

		align-items: center;
		justify-content: space-between;

		width: 100%;

		padding: 17px 0;

		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.18);

		background: transparent;

		text-align: left;

		font-family: inherit;
		font-size: 15px;
		font-weight: 500;

		color: #000000;

		cursor: pointer;
	}


	.ggg-mobile-menu-arrow {
		font-size: 27px;
		font-weight: 300;
		line-height: 1;

		margin-left: 20px;
	}



	/* ======================================================
	   UNTERMENUES
	   ======================================================

	   Die Untermenues ersetzen beim Oeffnen die eigentliche
	   Hauptnavigation.

	   Die Suche und der Spendenbereich bleiben bestehen.

	   Die Navigation innerhalb eines Untermenues ist bewusst
	   flach aufgebaut. Es gibt keine weiteren Akkordeons.
	   ====================================================== */

	.ggg-mobile-submenu {
		width: 100%;
		box-sizing: border-box;

		padding-top: 18px;
	}



    	/* ------------------------------------------------------
        ZURUECK-BUTTON
        ------------------------------------------------------

        Der Zurueck-Button steht als erste Aktion innerhalb
        eines Untermenues.

        Das offizielle GGG-Gruen kennzeichnet die
        Rueckwaerts-Navigation und unterscheidet sie
        von den schwarzen Menueeintraegen.
        ------------------------------------------------------ */

        .ggg-mobile-submenu-back {
        display: inline-flex;

        align-items: center;
        gap: 8px;
    
        border: 0;
        background: transparent;
    
        padding: 8px 0 14px;
        margin: 0;
    
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
    
        /* Offizielles GGG-Gruen */
        color: #5b968b;
    
        cursor: pointer;
    }


	.ggg-mobile-submenu-back-arrow {
		display: inline-block;

		font-size: 24px;
		font-weight: 300;
		line-height: 0.8;
	}



	/* ------------------------------------------------------
	   TITEL DES AKTUELLEN UNTERMENUES
	   ------------------------------------------------------

	   Einheitliche Darstellung fuer saemtliche Untermenues:

	   - Unser Jubilaeum
	   - Ueber uns
	   - Organisationen
	   - Fokus
	   - Service
	   - Foerdergesuche

	   Der Titel verwendet dieselbe Schriftgroesse wie die
	   normalen Navigationseintraege. Durch das hoehere
	   Schriftgewicht bleibt seine Funktion als Bereichstitel
	   trotzdem klar erkennbar.

	   Auf eine schwarze Trennlinie wird bewusst verzichtet.
	   Dadurch wird die Navigation ruhiger und die bereits
	   vorhandene Linie unter der Suche bleibt die dominante
	   horizontale Trennung.
	   ------------------------------------------------------ */

	.ggg-mobile-submenu-title {
		padding: 4px 0 12px;

		border-bottom: 0;

		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;

		color: #000000;
	}



	/* ------------------------------------------------------
	   LINKS INNERHALB DER UNTERMENUES
	   ------------------------------------------------------ */

	.ggg-mobile-submenu-links {
		width: 100%;
	}


	.ggg-mobile-submenu-links a {
		display: block;

		width: 100%;
		box-sizing: border-box;

		padding: 15px 0;

		border-bottom: 1px solid rgba(0, 0, 0, 0.18);

		font-family: inherit;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;

		color: #000000 !important;

		text-decoration: none !important;
	}


	/*
	 * Kein zusaetzlicher Farbumschlag auf Touch-Geraeten.
	 * Die Links bleiben im visuellen GGG-System.
	 */
	.ggg-mobile-submenu-links a:hover,
	.ggg-mobile-submenu-links a:active {
		color: #000000 !important;
		text-decoration: none !important;
	}



	/* ------------------------------------------------------
	   GRUPPEN IM UNTERMENUE "ORGANISATIONEN"
	   ------------------------------------------------------

	   Organisationen besitzt drei Inhaltsgruppen:

	   - Wirkungsfelder
	   - Patronate
	   - Organisationen

	   Die Gruppenueberschriften sind keine Links und dienen
	   ausschliesslich der visuellen und semantischen
	   Orientierung innerhalb des umfangreichen Menues.

	   Sie bilden innerhalb dieses Untermenues eine zweite
	   klare Hierarchieebene.
	   ------------------------------------------------------ */

	.ggg-mobile-submenu-group {
		padding-top: 22px;
	}


	.ggg-mobile-submenu-group-title {
		padding-bottom: 7px;

		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;

		letter-spacing: 0;

		color: #000000;
	}



	/* ------------------------------------------------------
	   SPENDENBEREICH
	   ------------------------------------------------------ */

	.ggg-mobile-donate {
		display: flex;

		align-items: center;
		justify-content: space-between;

		margin-top: 25px;
		padding-top: 18px;

		text-decoration: none;

		color: #000000;
	}


	.ggg-mobile-donate-label {
		font-size: 15px;
		font-weight: 500;
	}


	.ggg-mobile-donate img {
		display: block;

		width: 90px;
		height: auto;
	}



	/* ------------------------------------------------------
	   TASTATUR-FOKUS
	   ------------------------------------------------------

	   Sichtbarer Fokus fuer Tastaturbenutzer.
	   ------------------------------------------------------ */

	.ggg-mobile-menu-toggle:focus-visible,
	.ggg-mobile-menu-item:focus-visible,
	.ggg-mobile-submenu-back:focus-visible,
	.ggg-mobile-submenu-links a:focus-visible,
	.ggg-mobile-search-submit:focus-visible,
	.ggg-mobile-donate:focus-visible,
	.ggg-mobile-logo:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 4px;
	}

}



/* ==========================================================
   GGG – MOBILE HERO AUF UNTERSEITEN
   ----------------------------------------------------------
   Überträgt die auf der Startseite ermittelten Mobile-Werte
   zentral auf die Standard-Herozeilen der Unterseiten.
   ========================================================== */

@media only screen and (max-width: 767px) {

    .ggg-hero-standard .ggg-film-row {

        /* Hero über die gesamte Bildschirmbreite */
        width: 100% !important;
        max-width: 100vw !important;

        /* Mobile Hero-Höhe analog Startseite */
        height: 55vh !important;

        /* Hero 50px nach oben ziehen */
        margin-top: -50px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        /* Mobile Innenabstände analog Startseite */
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}





/* ==========================================================
   GGG BASEL – DESKTOP-NAVIGATION / RESPONSIVE BREAKPOINT
   ==========================================================

   Bis 1399px:
   - Desktop-Header ausblenden
   - Die bestehende Hamburger-Navigation übernimmt

   Ab 1400px:
   - Desktop-Header bleibt sichtbar
   - Die bestehende Mobile-Navigation bleibt ausgeblendet

   Die Canvas-Mega-Menüs und deren JavaScript-Steuerung
   werden durch diese Regeln nicht verändert.
   ========================================================== */

@media (max-width: 1399px) {

    /* Desktop-Navigation auf Tablet und Mobile ausblenden */
    .ggg-desktop-navigation {
        display: none !important;
    }

}

@media (min-width: 1400px) {

    /* Mobile-Navigation auf Desktop ausblenden */
    .ggg-mobile-navigation {
        display: none !important;
    }

}




/*
 * ============================================================
 * GGG BASEL – HOVER-BAUM
 * ============================================================
 *
 * Problem:
 * Divi 5 blendet das Baumbild beim Hover teilweise mit
 * display: none aus. Dadurch verschwindet das Bild und
 * das Layout bricht zusammen.
 *
 * Lösung:
 * Das Bild bleibt auch beim Hover sichtbar.
 * Der bestehende Divi-Bildwechsel zwischen dem normalen
 * und dem farbigen Baum bleibt erhalten.
 *
 * Die Regel wirkt ausschliesslich auf das Bildmodul
 * mit der CSS-Klasse .ggg-baum-hover.
 * ============================================================
 */

.ggg-baum-hover img {
    display: inline-block !important;
}