/*
Theme Name: Autohaus Theme
Author: PRO LACK
Version: 1.0
*/

/* =========================================
   Basis
   ========================================= */

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Standard-Container-Breite wie beim Original */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* =========================================
   HEADER PRO LACK – 1:1 ARTIG
   ========================================= */

/* Abstand oben/unten im Header */
.site-header,
#masthead {
    padding: 2.4rem 0 2rem;
}

/* Innen-Layout: Logo links, Navi rechts */
.site-header .container,
#masthead .container,
.ah-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
}

/* Logo links */

.site-branding,
.ah-logo {
    flex: 0 0 auto;
}

.site-branding img,
.ah-logo img {
    display: block;
    max-width: 260px;
    height: auto;
}

/* Navigation rechts – generisch über .main-navigation UND .ah-nav */

.main-navigation,
.ah-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

/* Menüliste horizontal */

.main-navigation ul,
.ah-nav .menu {
    display: flex;
    gap: 3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menüpunkte */

.main-navigation li,
.ah-nav .menu-item {
    margin: 0;
    padding: 0;
}

.main-navigation a,
.ah-nav .menu-item a {
    display: inline-block;
    padding-bottom: 0.8rem;
    font-family: 'PlayRegular', 'Play', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 0.95rem;          /* etwas kleiner, damit nichts umbrechen muss */
    letter-spacing: 0.35em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    position: relative;
    white-space: nowrap;
}

/* gelbe Unterstreichung */

.main-navigation a::after,
.ah-nav .menu-item a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #d7df23;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* aktiv + Hover */

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation a:hover::after,
.main-navigation a:focus::after,
.ah-nav .current-menu-item > a::after,
.ah-nav .current_page_item > a::after,
.ah-nav .menu-item a:hover::after,
.ah-nav .menu-item a:focus::after {
    opacity: 1;
    transform: scaleX(1);
}

/* etwas Abstand nach unten, damit der Content nicht klebt */

.site-main {
    padding-top: 1.5rem;
}

/* Mobile Menü-Toggle NUR auf kleineren Screens anzeigen */
@media (min-width: 840px) {
    .mobile-menu-toggle,
    .mobile-menu-toggle-inside {
        display: none;
    }
}

/* =========================================
   FOOTER – GRUNDDESIGN / FARBE
   ========================================= */

.site-footer {
    background-color: #3f3d3d;        /* dunkles Grau */
    color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 0.95rem;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    text-decoration: underline;
}

/* Wrapper für kompletten „Inhalts“-Footer (Block-Editor-Bereich) */

.autohaus-footer {
    padding: 4rem 0 0;
}

.autohaus-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ----------------------------------------------------------
   Obere Zeile: 3 Text-Blöcke (Telefon, Mail, Kontaktformular)
   ---------------------------------------------------------- */

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-top-col {
    flex: 1 1 0;
}

.footer-top-col strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------
   Untere Zeile: Öffnungszeiten, Standort, Logo, Karte
   ---------------------------------------------------------- */

.footer-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: 3rem;
    padding-bottom: 2.5rem;
}

.footer-bottom h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-bottom p {
    margin: 0;
}

/* Logo-Spalte */

.autohaus-footer-col-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-img {
    max-width: 260px;
    height: auto;
}

/* Google Maps rechts bündig, ohne oberen Abstand */

.autohaus-footer-col-map {
    display: flex;
    flex-direction: column;
}

.autohaus-footer-col-map iframe {
    width: 100%;
    min-height: 260px;
    border: 0;
}

/* ----------------------------------------------------------
   Untere Zeile mit Copyright-Balken
   ---------------------------------------------------------- */

.site-footer .site-info {
    margin-top: 0;
    padding: 1.5rem 2rem 2rem;
    font-size: 0.8rem;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer .site-info a {
    color: #ffffff;
}

/* =========================================
   FOOTER AN BLOCK-STRUKTUR ANGEPASST
   (wp-block-group.footer etc.)
   ========================================= */

footer.wp-block-group.footer {
    background-color: #373736;
    color: #ffffff;
    padding: 4rem 0;
}

footer.wp-block-group.footer a {
    color: #ffffff;
    text-decoration: none;
}

footer.wp-block-group.footer a:hover,
footer.wp-block-group.footer a:focus {
    text-decoration: underline;
}

/* Inhalt zentriert, maximale Breite */

footer.wp-block-group.footer .wp-block-group__inner-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Erste große Spalte links (Kontakt + Öffnungszeiten + Standort) */

footer.wp-block-group.footer .first-column {
    padding-bottom: 2rem;
}

/* Text direkt unter den Icons statt daneben */

footer.wp-block-group.footer .wp-block-rh-block-icon-list {
    display: block;
    margin-bottom: 0.75rem;
}

footer.wp-block-group.footer .wp-block-rh-block-icon-list .rh-block-icon {
    display: inline-block;
    color: #ffffff;
}

/* Typografie im Footer */

footer.wp-block-group.footer p {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

footer.wp-block-group.footer p.contact {
    font-weight: 600;
}

/* Überschriften „ÖFFNUNGSZEITEN / STANDORT“ */

footer.wp-block-group.footer h4.wp-block-heading {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.7rem;
}

/* Spaltenabstände im unteren Block (Öffnungszeiten / Standort / Logo) */

footer.wp-block-group.footer
.rh-columns-block-9e4760e2-1045-4641-bad4-092162cf539b
.wp-block-column {
    margin-bottom: 1.5rem;
}

/* Logo unten links neben Google-Map */

footer.wp-block-group.footer figure.wp-block-image {
    margin: 0;
}

/* Google Maps – nicht am oberen Rand kleben */

footer.wp-block-group.footer .rh-gmap-block-740e4e4087 {
    margin-top: 1rem;
}

/* Map soll die gesamte rechte Spalte ausfüllen */

footer.wp-block-group.footer .rh-gmap-block-740e4e4087,
footer.wp-block-group.footer .rh-gmap-block-740e4e4087 .embed-privacy-container,
footer.wp-block-group.footer .rh-gmap-block-740e4e4087 .embed-privacy-overlay {
    height: 100%;
}

/* Schwarzer Balken ganz unten (Impressum / Ströer) */

#colophon.site-footer {
    background-color: #000000;
    color: #ffffff;
}

#colophon.site-footer .site-info.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.8rem;
}

#colophon.site-footer a {
    color: #ffffff;
    text-decoration: none;
}

#colophon.site-footer a:hover {
    text-decoration: underline;
}

/* Footer-Credits Links nebeneinander mit etwas Abstand */

#colophon .footer-credits span + span {
    margin-left: 1.5rem;
}

/* ==========================================================================
   PRO LACK – Header & Footer Overrides
   (am Ende von style.css einfügen)
   ========================================================================== */

/* 1) PlayRegular einbinden (falls weiter oben schon vorhanden, ist doppelt egal) */
@font-face {
    font-family: 'PlayRegular';
    src: url('Schriften/PlayRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2) HEADER / NAVIGATION
   Wir hängen uns an das WordPress-Menü:
   <ul id="main-menu" class="nav-menu">…  */

/* Header-Innenbereich: Logo links, Menü rechts */
.site-header .container,
#masthead .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation selbst nach rechts schieben */
.main-navigation {
    margin-left: auto;
}

/* Grundlayout für das Hauptmenü */
#main-menu.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4.5rem;                /* Abstand zwischen den Menüpunkten */
    text-transform: uppercase;
    letter-spacing: 0.35em;     /* Abstand zwischen Buchstaben wie im Original */
    font-family: 'PlayRegular', 'Poppins', 'Open Sans', Arial, sans-serif;
    font-size: 13px;            /* kleiner als vorher, damit kein Umbruch entsteht */
    line-height: 1.2;
}

/* Listenelemente sauber halten */
#main-menu.nav-menu > li {
    margin: 0;
    padding: 0;
}

/* Links im Menü */
#main-menu.nav-menu > li > a {
    display: inline-block;
    padding: 32px 0 26px;       /* vertikale Position der Schrift */
    text-decoration: none;
    color: #111111;
}

/* Hover/Fokus, keine Unterstreichung */
#main-menu.nav-menu > li > a:hover,
#main-menu.nav-menu > li > a:focus {
    color: #111111;
    text-decoration: none;
}

/* Aktive Seite mit gelbem Unterstrich (wie Referenzseite) */
#main-menu.nav-menu > li.current-menu-item > a,
#main-menu.nav-menu > li.current_page_item > a {
    position: relative;
}

#main-menu.nav-menu > li.current-menu-item > a::after,
#main-menu.nav-menu > li.current_page_item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 100%;
    height: 4px;
    background-color: #d6df1f;  /* Ströer/ProLack-Gelb */
}

/* 3) FOOTER – GRAUTON UND ABSTÄNDE
   Hier greifen wir die vorhandenen Autohaus-Theme-Klassen auf. */

/* großer Footerbereich (Kontakt + Öffnungszeiten + Map) */
.ah-footer-main {
    background: #55575b;        /* Grauton wie auf autohaus-prolack.de */
    color: #f9fafb;
}

/* Innenabstände im Footer-Grid etwas harmonischer */
.ah-footer-main-inner {
    padding-top: 60px;
    padding-bottom: 40px;
}

/* falls irgendwo ein zusätzlicher Abstand vor .ah-footer gesetzt wird */
.ah-footer {
    margin-top: 0;
}

/* unterer Footer-Streifen mit Impressum/Datenschutz */
.site-footer {
    background: #333436;
    color: #f9fafb;
    font-size: 12px;
}

.site-footer .site-info.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-top: 15px;
    padding-bottom: 15px;
}

.site-footer .footer-credits span {
    margin-right: 1.5rem;
}

.site-footer .footer-credits a {
    color: #f9fafb;
    text-decoration: none;
}

.site-footer .footer-credits a:hover,
.site-footer .footer-credits a:focus {
    text-decoration: underline;
}

/* SVG-Branding (Ströer) sauber neben die Links setzen */
#rh-branding {
    display: block;
    max-width: 180px;
    height: auto;
}