/*
 Theme Name:   MietwagenPRO
 Theme URI:    https://www.mietwagenpro.de/
 Description:  MietwagenPRO Child Theme
 Author:       Werner Deuring
 Author URI:   https://www.mietwagenpro.de/
 Template:     tortuga
 Version:      1.2.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         mietwagenpro
 Text Domain:  tortugachild
*/

/* =========================================================
   Grundfarben
   ========================================================= */

:root {
    --mwp-header-height: 74px;
    --mwp-header-blue-start: #0b3faa;
    --mwp-header-blue-middle: #062c88;
    --mwp-header-blue-end: #051f6d;
    --mwp-orange: #ef5735;
    --mwp-header-text: #ffffff;
}


/* =========================================================
   Kompakter Header: Logo und Navigation in einer Zeile
   ========================================================= */

.site-header {
    position: relative;
    overflow: visible;
    color: var(--mwp-header-text) !important;
    background:
        linear-gradient(
            100deg,
            var(--mwp-header-blue-start) 0%,
            var(--mwp-header-blue-middle) 58%,
            var(--mwp-header-blue-end) 100%
        ) !important;
    box-shadow: 0 5px 18px rgba(3, 22, 76, 0.22);
}

/*
 * Das Logo behält dieselbe horizontale Position wie auf der
 * Lade- und Angebotsseite.
 */
.site-header .header-main.container {
    position: relative;
    z-index: 20;

    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: min(1540px, calc(100% - 64px)) !important;
    max-width: 1540px !important;
    min-height: var(--mwp-header-height) !important;
    height: var(--mwp-header-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Branding */

.site-header #logo.site-branding,
.site-header .site-branding {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 265px;
    width: 265px !important;
    max-width: 265px !important;
    min-height: 42px;
    height: 42px;

    margin: 0 !important;
    padding: 0 !important;
}

.site-header .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 265px !important;
    max-width: 265px !important;
    min-height: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: none !important;
}

/* Alte CSS-Ersatzlogos sicher deaktivieren */
.site-header .custom-logo-link::before,
.site-header .custom-logo-link::after,
.site-header .site-branding::before,
.site-header .site-branding::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Echtes WordPress-Logo */
.site-header .custom-logo-link .custom-logo,
.site-header .site-branding .custom-logo {
    float: none !important;
    display: block !important;

    width: 258px !important;
    max-width: 258px !important;
    height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    object-fit: contain;
    object-position: left center;

    visibility: visible !important;
    opacity: 1 !important;
}

.site-header .site-title,
.site-header .site-description {
    display: none !important;
}

.site-header .header-widgets {
    margin-left: auto;
}


/* =========================================================
   Navigation in derselben Headerzeile
   ========================================================= */

.primary-navigation-wrap {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;

    height: var(--mwp-header-height);
    margin: 0 !important;

    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;

    /* Nur die eigentlichen Navigationselemente sind klickbar. */
    pointer-events: none;
}

/*
 * Die rechte Menükante entspricht der rechten Kante von
 * Suchmaske und Contentbereich (maximal 1320 px).
 */
.primary-navigation-container {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: min(1320px, calc(100% - 40px)) !important;
    max-width: 1320px !important;
    height: 100%;

    margin: 0 auto !important;
    padding: 0 !important;

    pointer-events: none;
}

.primary-navigation,
.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;
    height: 100%;
    margin: 0 0 0 auto !important;

    pointer-events: auto;
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    color: #fff;
    list-style: none;
}

.main-navigation ul a,
.main-navigation ul a:link,
.main-navigation ul a:visited {
    color: #fff;
    text-decoration: none;
}


/* =========================================================
   Desktop-Navigation
   ========================================================= */

@media only screen and (min-width: 60em) {
    #masthead .main-navigation > ul.menu {
        display: flex;
        align-items: center;
        gap: 4px;

        margin: 0;
        padding: 0;
        border: 0;
    }

    .main-navigation > ul > li {
        margin: 0;
    }

    .main-navigation > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;

        min-height: 38px;
        padding: 8px 11px !important;

        border: 1px solid transparent !important;
        border-radius: 8px;

        color: rgba(255, 255, 255, 0.82) !important;
        background: transparent !important;
        box-shadow: none !important;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;

        transition:
            color 150ms ease,
            background-color 150ms ease,
            border-color 150ms ease;
    }

    .main-navigation > ul > li > a:hover,
    .main-navigation > ul > li > a:focus {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        background: rgba(255, 255, 255, 0.07) !important;
        transform: none !important;
    }

    /* Aktiver Menüpunkt: dezent statt als kräftiger Button */
    .main-navigation > ul > li.current-menu-item > a,
    .main-navigation > ul > li.current-menu-ancestor > a {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: inset 0 -2px 0 var(--mwp-orange) !important;
    }

    .main-navigation > ul > li.current-menu-item > a:hover,
    .main-navigation > ul > li.current-menu-ancestor > a:hover {
        border-color: rgba(255, 255, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.11) !important;
    }

    /* Desktop-Dropdown */
    .main-navigation ul ul {
        overflow: hidden;
        margin-top: 10px;
        padding: 7px;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 12px;

        background: #082971 !important;
        box-shadow: 0 16px 38px rgba(2, 17, 58, 0.28);
    }

    .main-navigation ul ul li a {
        width: 15rem;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.88) !important;
    }

    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li a:focus {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.09) !important;
    }
}


/* =========================================================
   Hero mit Hintergrundbild und Suchmaske
   ========================================================= */

.header-image {
    position: relative;
    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    height: auto !important;
    min-height: 480px;

    margin: 0;
    padding: clamp(24px, 4vw, 48px) 16px;

    overflow: visible;

    background-image: url('/wp-content/uploads/2021/05/cropped-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Theme-Bild nicht zusätzlich als IMG anzeigen */
.header-image .header_img {
    display: none !important;
}

/* Wrapper der Suchmaske */
.header-image .mwp-search-hero,
.mwp-search-hero {
    position: relative;
    z-index: 2;

    align-self: center;

    width: 100%;
    max-width: 1320px;

    margin: 0 auto !important;
    padding: 0;
}

.mwp-search-hero .mwp-search {
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
}

/* Autocomplete über allen nachfolgenden Bereichen */
.mwp-search-hero .mwp-search__suggestions {
    z-index: 1100;
}


/* =========================================================
   Individuelles Zusatzmenü
   ========================================================= */

div.custom-menu-class ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

div.custom-menu-class li {
    display: inline;
    padding-right: 20px;
}

div.custom-menu-class a {
    color: #fff;
}


/* =========================================================
   Container-Breakpoints
   ========================================================= */

@media (max-width: 1480px) {
    .site-header .header-main.container {
        width: min(1380px, calc(100% - 40px)) !important;
        max-width: 1380px !important;
    }

    .primary-navigation-container {
        width: min(1320px, calc(100% - 40px)) !important;
        max-width: 1320px !important;
    }
}

@media (max-width: 930px) {
    .site-header .header-main.container,
    .primary-navigation-container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
    }
}


/* =========================================================
   Tablet und Mobil: kompakter Header + Hamburger-Menü
   ========================================================= */

@media only screen and (max-width: 59.999em) {
    :root {
        --mwp-header-height: 64px;
    }

    .site-header {
        box-shadow: 0 4px 14px rgba(3, 22, 76, 0.20);
    }

    .site-header .header-main.container {
        min-height: var(--mwp-header-height) !important;
        height: var(--mwp-header-height) !important;
    }

    .site-header #logo.site-branding,
    .site-header .site-branding {
        flex-basis: 222px;
        width: 222px !important;
        max-width: 222px !important;
        min-height: 34px;
        height: 34px;
    }

    .site-header .custom-logo-link {
        width: 222px !important;
        max-width: 222px !important;
        min-height: 34px !important;
        height: 34px !important;
    }

    .site-header .custom-logo-link .custom-logo,
    .site-header .site-branding .custom-logo {
        width: 216px !important;
        max-width: 216px !important;
        height: 31px !important;
        max-height: 31px !important;
    }

    .primary-navigation-wrap {
        height: var(--mwp-header-height);
    }

    /*
     * Der mobile Button richtet sich an derselben rechten
     * Inhaltskante aus wie Suchmaske und Contentbereich.
     */
    .primary-navigation-container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        height: var(--mwp-header-height);
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .primary-navigation,
    .main-navigation {
        position: static !important;
        width: 100%;
        height: var(--mwp-header-height);
        margin: 0 !important;
    }

    /* Hamburger rechts und vertikal exakt zentriert */
    .primary-menu-toggle {
        position: absolute;
        top: 50%;
        right: 0;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 42px;
        min-width: 42px;
        height: 42px;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 10px;

        color: #fff !important;
        background: rgba(255, 255, 255, 0.07) !important;
        box-shadow: none !important;

        transform: translateY(-50%);

        transition:
            background-color 150ms ease,
            border-color 150ms ease,
            transform 150ms ease;
    }

    .primary-menu-toggle:hover,
    .primary-menu-toggle:focus,
    .primary-menu-toggle[aria-expanded="true"] {
        border-color: rgba(255, 255, 255, 0.23) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .primary-menu-toggle:active {
        transform: translateY(-50%) scale(0.97);
    }

    .primary-menu-toggle .icon {
        width: 22px;
        height: 22px;
        margin: 0;
        fill: currentcolor;
    }

    /* Auf Mobil nur das Symbol anzeigen */
    .primary-menu-toggle .menu-toggle-text {
        display: none !important;
    }

    /*
     * Das Menü schwebt unter dem Header und verschiebt weder
     * Hintergrundbild noch Suchmaske.
     */
    .main-navigation.toggled-on > ul.menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        z-index: 9999;

        display: block !important;
        overflow: visible;

        width: min(320px, calc(100vw - 28px));
        margin: 0;
        padding: 8px;

        border: 1px solid #dfe6f2;
        border-radius: 12px;

        background: #fff;
        box-shadow: 0 18px 48px rgba(5, 31, 109, 0.20);
    }

    .main-navigation.toggled-on > ul.menu > li {
        width: 100%;
        margin: 0;
    }

    .main-navigation.toggled-on > ul.menu > li + li {
        margin-top: 3px;
    }

    .main-navigation.toggled-on > ul.menu > li > a {
        display: flex;
        align-items: center;

        min-height: 44px;
        padding: 10px 46px 10px 12px !important;

        border: 0 !important;
        border-radius: 9px;

        color: #082971 !important;
        background: transparent !important;

        font-size: 14px;
        font-weight: 650;
        line-height: 1.3;
    }

    .main-navigation.toggled-on > ul.menu > li > a:hover,
    .main-navigation.toggled-on > ul.menu > li > a:focus {
        color: #082971 !important;
        background: #f1f5fc !important;
    }

    .main-navigation.toggled-on > ul.menu > li.current-menu-item > a,
    .main-navigation.toggled-on > ul.menu > li.current-menu-ancestor > a {
        color: #082971 !important;
        background: #edf3fd !important;
        box-shadow: inset 3px 0 0 var(--mwp-orange);
    }

    /* Untermenü-Schalter innerhalb des mobilen Panels */
    .main-navigation .dropdown-toggle {
        top: 2px;
        right: 2px;

        width: 40px;
        height: 40px;
        padding: 9px !important;

        border-radius: 8px;
        color: #082971 !important;
        background: transparent !important;
    }

    .main-navigation .dropdown-toggle:hover,
    .main-navigation .dropdown-toggle:focus {
        color: #082971 !important;
        background: #e8eef9 !important;
    }

    .main-navigation ul ul {
        position: static !important;
        left: auto !important;

        width: 100%;
        margin: 3px 0 6px;
        padding: 4px 4px 4px 12px;

        border: 0 !important;
        background: #f7f9fd !important;
        box-shadow: none !important;
    }

    .main-navigation ul ul li a {
        width: auto !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 8px;
        color: #17356f !important;
        background: transparent !important;
    }

    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li a:focus {
        color: #082971 !important;
        background: #e7effd !important;
    }
}


/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 720px) {
    .site-header .header-main.container {
        width: calc(100% - 18px) !important;
    }

    .primary-navigation-container {
        width: calc(100% - 20px) !important;
    }

    .main-navigation.toggled-on > ul.menu {
        width: min(320px, calc(100vw - 20px));
    }
}

@media (max-width: 520px) {
    :root {
        --mwp-header-height: 60px;
    }

    .site-header #logo.site-branding,
    .site-header .site-branding {
        flex-basis: 192px;
        width: 192px !important;
        max-width: 192px !important;
        min-height: 30px;
        height: 30px;
    }

    .site-header .custom-logo-link {
        width: 192px !important;
        max-width: 192px !important;
        min-height: 30px !important;
        height: 30px !important;
    }

    .site-header .custom-logo-link .custom-logo,
    .site-header .site-branding .custom-logo {
        width: 188px !important;
        max-width: 188px !important;
        height: 27px !important;
        max-height: 27px !important;
    }

    .primary-menu-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 9px;
    }

    .header-image {
        align-items: flex-start !important;

        min-height: 480px;
        padding: 24px 12px;

        background-position: 60% center;
    }

    .header-image::before {
        position: absolute;
        inset: 0;
        z-index: 1;

        content: '';

        background: rgba(16, 37, 74, 0.26);
        pointer-events: none;
    }

    .header-image .mwp-search-hero,
    .mwp-search-hero {
        z-index: 2;
        align-self: flex-start;
    }

    .mwp-search-hero .mwp-search {
        width: 100%;
        padding: 18px;
        border-radius: 14px;
    }
}

@media (max-width: 390px) {
    .site-header #logo.site-branding,
    .site-header .site-branding,
    .site-header .custom-logo-link {
        flex-basis: 170px;
        width: 170px !important;
        max-width: 170px !important;
    }

    .site-header .custom-logo-link .custom-logo,
    .site-header .site-branding .custom-logo {
        width: 166px !important;
        max-width: 166px !important;
        height: 25px !important;
        max-height: 25px !important;
    }
}


/* =========================================================
   Seitentitel
   ========================================================= */

.archive-title,
.page-title,
.entry-title {
    margin: 0;
    padding: 0;

    color: #dd5533;
    color: var(--title-color);

    overflow-wrap: break-word;

    font-size: 1.75rem;
    font-family: "Titillium Web", Arial, Helvetica, sans-serif;
    font-family: var(--title-font);
    font-weight: normal;
    font-weight: var(--title-font-weight);
    text-transform: var(--title-text-transform);
    line-height: 1.4;
    line-height: var(--title-line-height);
}

/* =========================================================
   Korrekturen 1.2.2
   - stabiler Desktop-Dropdown-Hoverbereich
   - zuverlässig klickbares mobiles Menü
   - keine doppelte Headergrafik auf Unterseiten
   ========================================================= */

/*
 * Auf Unterseiten enthält Tortuga zusätzlich ein echtes Headerbild.
 * Da das Child-Theme dieselbe Grafik bereits als CSS-Hintergrund nutzt,
 * wird nur dieses unmittelbare Theme-Bild ausgeblendet. Inhalte wie die
 * Suchmaske und deren Icons bleiben davon unberührt.
 */
.header-image > .header_img,
.header-image > img,
.header-image > a > img,
.header-image > picture,
.header-image > a > picture {
    display: none !important;
}

/* Desktop: Der unsichtbare obere Innenabstand bildet eine Hover-Brücke
 * zwischen Hauptpunkt und Dropdown. Das Menü schließt dadurch beim
 * Herunterfahren mit der Maus nicht mehr vorzeitig.
 */
@media only screen and (min-width: 60em) {
    .main-navigation ul ul {
        overflow: visible !important;
        margin-top: 0 !important;
        padding: 17px 7px 7px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .main-navigation ul ul::before {
        position: absolute;
        top: 10px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;

        content: '';

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 12px;
        background: #082971;
        box-shadow: 0 16px 38px rgba(2, 17, 58, 0.28);
        pointer-events: none;
    }

    .main-navigation ul ul > li {
        position: relative;
        z-index: 1;
    }
}

/* Mobil/Tablet: Das vorhandene Tortuga-Toggle bleibt funktional.
 * Die Navigation belegt nur noch den tatsächlich benötigten Bereich
 * rechts im Header und liegt nicht unsichtbar über Logo oder Seite.
 */
@media only screen and (max-width: 59.999em) {
    .primary-navigation-container {
        justify-content: flex-end !important;
    }

    .primary-navigation {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: 100% !important;
        margin: 0 0 0 auto !important;

        pointer-events: auto !important;
    }

    .main-navigation {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: 100% !important;
        margin: 0 !important;

        pointer-events: auto !important;
    }

    .primary-menu-toggle {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        z-index: 3;

        margin: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .primary-menu-toggle:active {
        transform: scale(0.97) !important;
    }

    .main-navigation.toggled-on > ul.menu {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   v1.2.3 – Mobile Hamburger zuverlässig rechts ausrichten
   ========================================================= */

@media only screen and (max-width: 59.999em) {

    /*
     * Der Navigations-Container belegt die volle verfügbare Breite.
     * Er dient als feste Positionierungsfläche für Button und Panel.
     */
    .site-header .primary-navigation-wrap {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: var(--mwp-header-height) !important;

        pointer-events: none !important;
    }

    .site-header .primary-navigation-container {
        position: relative !important;
        display: block !important;

        width: calc(100% - 28px) !important;
        max-width: none !important;
        height: var(--mwp-header-height) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        pointer-events: none !important;
    }

    /*
     * Keine eigene schmale Flexbox mehr neben dem Logo:
     * Der Button wird direkt an der rechten Containerkante verankert.
     */
    .site-header .primary-navigation,
    .site-header .main-navigation {
        position: static !important;
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none !important;
    }

    .site-header .primary-menu-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 100 !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;

        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .site-header .primary-menu-toggle:active {
        transform: translateY(-50%) scale(0.97) !important;
    }

    /*
     * Das aufgeklappte Menü hängt an derselben rechten Kante.
     * Es bleibt vollständig anklickbar.
     */
    .site-header .main-navigation.toggled-on > ul.menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 9999 !important;

        pointer-events: auto !important;
    }

    .site-header .main-navigation.toggled-on > ul.menu,
    .site-header .main-navigation.toggled-on > ul.menu * {
        pointer-events: auto !important;
    }
}

@media (max-width: 720px) {
    .site-header .primary-navigation-container {
        width: calc(100% - 20px) !important;
    }
}