/*
Theme Name:     Astra Child Theme Foto-WG
Theme URI:      https://wpastra.com
Description:    Individuelles Retro-Design fuer die Foto-WG
Author:         Foto-WG
Author URI:     https://foto-wg.de
Template:       astra
Version:        1.0.0
Text Domain:    astra-child-foto-wg
*/

/* ==========================================================================
   1. LOKALE SCHRIFTARTEN ANMELDEN (100% UNABHÄNGIG VOM BACKEND)
   ========================================================================== */

@font-face {
    font-family: 'FotoWG-Yesteryear';
    src: url('fonts/yesteryear.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FotoWG-PoiretOne';
    src: url('fonts/poiret-one.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Montserrat - Normale & Fette Schriftstärken */
@font-face {
    font-family: 'FotoWG-Montserrat';
    src: url('fonts/montserrat-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Montserrat - Kursive & Fett-Kursive Schriftstärken */
@font-face {
    font-family: 'FotoWG-Montserrat';
    src: url('fonts/montserrat-variable-italic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. GLOBALE FLIEẞTEXT-EINSTELLUNGEN
   ========================================================================== */
body, p, span, li, input, textarea {
    font-family: 'FotoWG-Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
}

/* Weist starke/fette Texte der richtigen Stärke (700 = Bold) zu */
strong, b, h1, h2, h3, h4, h5, h6 {
    font-family: 'FotoWG-Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Stellt sicher, dass kursiver Text automatisch die Kursiv-Datei anspricht */
em, i, blockquote {
    font-family: 'FotoWG-Montserrat', sans-serif !important;
    font-style: italic !important;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
  color: #fff;
}

body.wp-child-theme-astra-child .ast-pagination .page-numbers.current {
  color: #ffffff !important;
  border-color: #f6617b !important;
  background-color: #f6617b !important;
}

body #content a,
nav.navigation,
nav.post-navigation a span,
nav.post-navigation a p {
  color: #ff617b !important;
}



/* ==========================================================================
   3. COMPUTER-ANSICHT (Ab 922 Pixel Breite)
   ========================================================================== */
@media (min-width: 922px) {
	
	
	body.wp-child-theme-astra-child {
		background-image: url('images/foto-wg-main_bg_.jpg');
	
	}
	
    /* Filmstreifen-Hintergrund */
    .site-primary-header-wrap, 
    header .main-header-bar,
    .ast-primary-header-bar {
        background-image: url('images/filmstreifen.png');
        background-repeat: repeat-x !important;
        background-position: center center !important;
        background-size: auto 100% !important;
        min-height: 97px !important; 
    }

    /* Oberste Menüebene im Filmstreifen (Jetzt korrekt verknüpft!) */
    .main-header-menu > .menu-item > a {
        font-family: 'FotoWG-Yesteryear', cursive !important;
        font-size: 28px !important; 
        color: #ffffff !important;
        text-transform: none !important;
        transition: all 0.3s ease-in-out;
		text-shadow: 3px 4px 5px #000 !important;
		font-size: 40px !important;
		/* padding-top: 12px;
    	padding-bottom: 12px; */
		min-height: 97px !important;
    }

    /* Dein angepasster Hover-Glüheffekt in Rosa */
    .main-header-menu > .menu-item > a:hover {
        /*color: #ff00ea !important; */
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 
                     0 0 20px rgba(255, 0, 234, 0.6) !important;
    }
	.main-header-menu .menu-link, .main-header-menu > a.menu-link {
  		 padding: 0 0.3em;
	}
	#primary-site-navigation-desktop .sub-menu {
		border-top-width: 0px;
	}
	#ast-desktop-header {
		margin-top: 30px;
	}
	
	
	/* ==========================================================================
   	   Footer COMPUTER-ANSICHT (Ab 922 Pixel Breite)
  	   ========================================================================== */
	
	/* Der untere Filmstreifen-Hintergrund für den Footer */
    .site-footer {
        background-image: url('images/foto-wg-streifen_unten.png') !important;
        background-repeat: repeat-x !important;
        background-position: center center !important;
        background-size: auto 100% !important;
        min-height: 120px !important; /* Gleiche Höhe wie oben */
    }
	/* Zentriert das Footer-Menü und das Copyright sauber in einer Reihe */
	.site-primary-footer-inner-wrap.ast-builder-grid-row {
		display: flex !important;
		justify-content: center !important; /* Bringt beide Blöcke in die Mitte */
		align-items: center !important;     /* Setzt sie auf die gleiche Höhe */
		gap: 40px !important;              /* Abstand zwischen Menü und Copyright */
		flex-wrap: wrap !important;        /* Automatischer Umbruch auf Handys */
	}

	/* Verhindert den Umbruch und lässt den Boxen genug Platz */
	.site-footer-section, 
	.ast-builder-layout-element.ast-flex,
	.ast-footer-copyright {
		width: auto !important;
		max-width: max-content !important;
		white-space: nowrap !important; /* VERBIETET den Zeilenumbruch im Text! */
	}

	/* Setzt eventuelle Absatz-Abstände im Copyright zurück, damit nichts verzerrt */
	.ast-footer-copyright p {
		margin: 0 !important;
		display: inline-block !important; /* Hier ist dein Inline-Block, um ganz sicherzugehen! */
	}
	
	
	
	/* ==========================================================================
     BLOG
     ========================================================================== */
	
	/* BLOG-RESTORATION (Macht aus 3 Spalten -> 1 große Spalte auf dem PC)*/
    .ast-blog-layout-2 .ast-row .ast-article-post,
    .ast-separate-container .ast-article-post {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }


	 /* 1. DIE BLOG-ARTIKEL (Übersicht & Detailseite) */
    .foto-wg-css #main article {
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.5); /* Weiß mit 50% Transparenz */
        box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    }

	/* WEG A: Für die Beitrags-Detailseiten & Archivseiten */
    .ast-separate-container.ast-two-container #secondary .widget,
    .ast-separate-container.ast-two-container #secondary aside.widget_block,
    
    /* WEG B: Für die Blog-Startseite (Nutzt laut Ihrem Screenshot die Klasse .blog im body) */
    body.blog #secondary .widget,
    body.blog #secondary aside.widget_block {
        background-color: rgba(255, 255, 255, 0.5);
        padding: 30px; 
        box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
        margin-bottom: 25px; 
    }
	

	
	
	/* Sidebar */
	aside.widget_block	{
	  padding: 30px !important;
	}
	/* Zwingt die rechte Seitenleiste auf die perfekte optische Höhe */
	#secondary {
		margin-top: 60px !important; /* Passt die Seitenleiste an den Rahmen des Inhalts an */
		padding-top: 0 !important;
	}

	/* Entfernt eventuelle zusätzliche Innenabstände des ersten Widgets */
	#secondary aside.widget_block:first-child,
	#secondary .widget:first-child {
		margin-top: 0 !important;
	}


	
	.ast-separate-container .ast-article-inner {
	  background: none !important;
	  background-image: none;
	}
	body.wp-child-theme-astra-child .ast-article-inner {
	  box-shadow: none;
	}
	.ast-article-post .post-thumb-img-content {
	  border: 10px solid #fff;
	  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.4) !important;
	  margin-left: 0px !important;
	  margin-right: 0px !important;
	  margin-top: 5px !important;
	}
	body.wp-child-theme-astra-child.ast-row .blog-layout-4 .post-content, .blog-layout-4 .post-thumb {
	  padding-left: -5px;
	  padding-right: -5px;
	}
	
	body.wp-child-theme-astra-child .ast-blog-single-element{
	  margin-left: 5px;
	  margin-right: 5px;
	}
	
	.ast-right-sidebar #secondary {
		padding-left: 45px;
	  }
	
	/* 1. Hintergrund, Padding und Schatten für die Beitrags-Detailseite */
	body.single-post #primary #main article {
		padding: 10px !important;
		background-color: rgba(255, 255, 255, 0.5) !important;
		box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
	}

	/* 2. Textabstände auf der Detailseite anpassen (damit der Text nicht am Rand klebt) */
	body.single-post .entry-content, 
	body.single-post .entry-header {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 15px !important;
	}

	/* 3. Das Beitragsbild auf der Detailseite als Polaroid rahmen (Klassen-Fix) */
	body.single-post .post-thumb,
	body.single-post .ast-article-post .post-thumb-img-content {
		border: 10px solid #fff !important;
		box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.4) !important;
		margin-bottom: 20px !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		display: block !important;
	}

	
	/* Blog Ende */
	
	/* ==========================================================================
   	Chice machen CSS spielerein
  	 ========================================================================== */
	
	/*  Auge Hover*/
	
		/* 1. Den Bild-Container vorbereiten */
		.post-thumb-img-content {
			position: relative !important;
			display: block;
			overflow: hidden;
		}

		/* 2. Dunkles Overlay beim Hover */
		.post-thumb-img-content::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			opacity: 0;
			transition: opacity 0.4s ease;
			z-index: 1;
			pointer-events: none; /* WICHTIG: Erlaubt Klicks durch das Overlay hindurch */
		}

		/* 3. Das Auge-Icon MIT dem rosa Kreis im Hintergrund */
		.post-thumb-img-content::after {
			content: "\f06e";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;

			position: absolute;
			top: 50%;
			left: 50%;

			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;
			background-color: #ff617b;
			border-radius: 50%;

			color: #ffffff;
			font-size: 28px;

			opacity: 0;
			transform: translate(-50%, -50%) rotate(-180deg) scale(0.5);
			transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			z-index: 2;
			pointer-events: none; /* WICHTIG: Erlaubt Klicks durch das Icon hindurch */
		}

		/* 4. Der Hover-Effekt */
		.post-thumb-img-content:hover::before {
			opacity: 1;
		}

		.post-thumb-img-content:hover::after {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(0deg) scale(1);
		}

	
	/*- Auge ende -*/
	
	/*- Ramen um Fotos -*/

		/* Polaroid-Rahmen für ALLE Bilder im Artikel-Fließtext (außer Ausnahmen) */
		.entry-content img:not(.kein-rahmen):not(.wp-block-spacer img) {
			border: 10px solid #ffffff !important;
			box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.4) !important;
			background-color: #ffffff;
			box-sizing: border-box;

			/* FIX: Erlaubt Bildern, nebeneinander zu stehen */
			display: inline-block !important; 

			/* Abstand zu anderen Elementen und Bildern */
			margin-bottom: 20px;
			margin-right: 15px; 

			vertical-align: middle; /* Richtet nebeneinanderstehende Bilder mittig aus */
		}

		/* Falls ein Bild exakt zentriert auf einer eigenen Zeile stehen soll */
		.entry-content .aligncenter img:not(.kein-rahmen) {
			display: block !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

	/*- Ramen um Fotos -*/

}


/* ==========================================================================
   4. MOBIL-ANSICHT & DROPDOWN (Unter 921 Pixel Breite)
   ========================================================================== */
@media (max-width: 921px) {
    /* Mobil-Header komplett ohne Filmstreifen - nur Retro-Schwarz */
    .ast-header-break-point .site-primary-header-wrap,
    .ast-header-break-point .ast-primary-header-bar,
    .ast-mobile-header-wrap,
    .ast-mobile-header-wrap .ast-primary-header-bar,
    #masthead .ast-mobile-header-wrap,
    #masthead .main-header-bar {
        background-image: none !important;
        background-color: #000000 !important; 
        min-height: 70px !important; 
    }
    
    /* Hamburger-Menü-Icon in Weiß */
    .ast-mobile-menu-trigger-minimal .ast-icon svg,
    .ast-mobile-menu-buttons .ast-icon svg,
    .ast-mobile-menu-trigger-wrap .ast-icon svg {
        fill: #ffffff !important;
    }
	
	/* Mobil-Footer ohne Filmstreifen */
    .site-footer {
        background-image: none !important;
        background-color: #000000 !important;
        min-height: 70px !important;
    }
	
	

	

}


/* ==========================================================================
   5. UNTERMENÜ / DROPDOWN (Für beide Ansichten - Ohne gelben Strich!)
   ========================================================================== */
.main-header-menu .sub-menu {
    background-color: rgba(20, 20, 20, 0.8) !important; /* Halbtransparentes Dunkelgrau */
    box-shadow: 0 8px 16px rgba(0,0,0,0.5) !important;
}

/* Texte im Untermenü (Jetzt korrekt verknüpft!) */
.main-header-menu .sub-menu a {
    font-family: 'FotoWG-PoiretOne', sans-serif !important;
    font-size: 18px !important; 
    color: #ffffff !important;
    letter-spacing: 2px !important; 
    text-transform: uppercase !important; 
    transition: all 0.2s ease-in-out;
	
}

/* Hover-Effekt im Untermenü - Passend in Rosa */
.main-header-menu .sub-menu a:hover {
    color: #ffffff !important;
    background: transparent !important; 
    padding-left: 15px !important; /* Text rückt leicht nach rechts */
    /* text-shadow: 0 0 5px rgba(255, 0, 234, 0.5) !important; */
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 
                     0 0 20px rgba(255, 0, 234, 0.6) !important; /* Hover-Glüheffekt in Rosa */
}


/* ===================================================
   1. ANIMATION: Untermenü als Kasten ausfahren lassen
   =================================================== */

/* 1. Startzustand des Untermenüs (geschlossener Kasten) */
.main-header-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  overflow: hidden;
  max-height: 0; 
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease, visibility 0.3s;
}

/* 2. REIN FÜR DIE OPTIK: Verhindert, dass die inneren Links beim Tabben springen */
.main-header-menu .sub-menu > li {
  overflow: visible;
  min-height: auto;
}

/* 3. AUSLÖSER: Klappt aus bei Maus-Hover ODER wenn sich die Tab-Taste im Element befindet */
.main-header-menu .menu-item-1977:hover .sub-menu,
.main-header-menu .menu-item-1977:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  max-height: 400px; /* Groß genug für alle deine Unterlinks */
}


/******** Löschen ??? *********/

/* ==========================================================================
   ENDGÜLTIGER FIX: BLOG-ARTIKEL ANGLEICHUNG (Ganz unten in der Datei)
   ========================================================================== */
@media (min-width: 922px) {
    
    /* Erzwingt das gleiche Layout für Übersicht und Artikel */
    body.blog #main article,
    body.single-post #main article,
    .ast-separate-container.ast-two-container #main article {
        padding: 15px !important; /* !important wird hier benötigt, um den alten Suchfehler oben zu schlagen */
        background-color: rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
        margin-bottom: 30px !important;
    }

    /* Löscht das doppelte Astra-Padding auf der Detailseite */
    body.single-post .ast-article-inner {
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    
    /* Text-Abstand zum Rand */
    body.single-post .entry-content, 
    body.single-post .entry-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/******** Löschen ??? ENDE *********/

/* ==========================================================================
   1. DIE BLOG-ARTIKEL (Spezifitäts-Hammer für perfekte Symmetrie)
   ========================================================================== */
@media (min-width: 922px) {
    
    /* Fügt #primary hinzu, um den blockierenden Code aus Zeile 265 sauber zu schlagen */
    body.blog #primary #main article,
    body.single-post #primary #main article,
    body #primary #main article.ast-article-single,
    body #primary #main article.ast-article-post {
        --ast-single-post-padding: 40px 40px 40px 40px !important;
        padding: 40px !important; 
        background-color: rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
        margin-bottom: 30px !important; 
    }

    /* Schaltet doppelte innere Abstände von Astra auf null */
    body.blog .ast-article-inner,
    body.archive .ast-article-inner,
    body.single-post .ast-article-inner,
    body.single-post .ast-article-single,
    .ast-single-post-featured-section { 
        padding: 0 !important; 
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    
    /* Verhindert das Verrutschen des Textes */
    body.single-post .entry-content, 
    body.single-post .entry-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   2. DIE WIDGETS IN DER SEITENLEISTE (Absolut stabiler Standard-Look)
   ========================================================================== */
@media (min-width: 922px) {
    #secondary .widget,
    #secondary aside.widget_block {
        background-color: rgba(255, 255, 255, 0.5) !important;
        padding: 30px !important; 
        box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
        margin-bottom: 25px !important; 
    }
    #secondary {
        margin-top: 10px !important;
        padding-top: 0 !important;
    }
    #secondary aside.widget_block:first-child,
    #secondary .widget:first-child {
        margin-top: 0 !important;
    }
}