/*
Theme Name: Autohaus Josef Tschiltsch KG
Description: Statische Unternehmensseite des Autohaus Josef Tschiltsch KG in
             Poelfing-Brunn. Rekonstruktion der urspruenglichen Seite, ohne
             Fahrzeug-Feed. Legt Seiten, Menues und Startseite beim Aktivieren
             selbst an.
Version: 1.1.6
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autohaus-tschiltsch
*/

/* ==========================================================================
   Autohaus Josef Tschiltsch KG — rebuilt stylesheet
   Design values recovered from the original ap24-basetheme-ultimate /
   ap24-demo-2 theme (styles.css.php) served by the live site.
   ========================================================================== */

/* ---------- design tokens (from the original generated CSS) ---------- */
:root {
    --bg:            #000000;
    --bg-soft:       #131313;
    --bg-grey-row:   #1a1a1a;
    --accent:        #767571;  /* headings, nav pills, links */
    --accent-light:  #8c8c8c;  /* hover */
    --text:          #ffffff;
    --line:          #b3b4b7;
    --panel:         #e0e0e0;
    --panel-border:  #bcbcbc;
    --white:         #ffffff;

    --font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --container: 1170px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-light); }

/* Sichtbarer Fokus. Vorher gab es gar keinen: wer ohne Maus bedient, sah
   nicht, wo er steht. :focus-visible greift nur bei Tastatur und
   Hilfsmitteln -- am Mausklick aendert sich nichts. */
:focus-visible {
    outline: 2px solid var(--line);
    outline-offset: 2px;
}

/* Sprungmarke: erste Station der Tabulatortaste, sichtbar nur im Fokus.
   Erspart es, sich vor jedem Seiteninhalt durch die Navigation zu tasten. */
.skip-link {
    position: absolute;
    left: 15px;
    top: -60px;
    z-index: 100;
    padding: 10px 18px;
    background: var(--accent);
    color: #000;
    font-weight: 700;
}
.skip-link:focus { top: 10px; color: #000; }

h1, h2, h3, h4, h5 { margin: 0 0 10px; font-weight: 700; line-height: 1.25; }
h1 { font-size: 3em; color: var(--accent); margin-top: 0; }
h3 { font-size: 24px; }
p  { margin: 0 0 1px; }

ul { list-style: none; margin: 0; padding: 0; }

/* ---------- layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col { padding: 0 15px; width: 100%; }

.my_row     { padding: 70px 0; }
/* when .my_row sits on a .container it must keep the 15px gutter, otherwise
   the negative margin on .row overflows the viewport (as the original theme
   handled with its own .my_row.container rule) */
.my_row.container { padding-left: 15px; padding-right: 15px; }
.my_row.top_row { padding-top: 30px; }
.row_grey   { background: var(--bg-soft); }
.center     { text-align: center; }
.clearfix::after { content: ''; display: table; clear: both; }

.section_title {
    font-size: 2.6em;
    color: var(--accent);
    /* Die Vorlage hatte 70px -- gedacht fuer die Fahrzeuggitter darunter, die
       es nicht mehr gibt. Bei einem Absatz Text riss der Abstand die
       Ueberschrift von ihrem Inhalt los. */
    margin-bottom: 44px;
}

#pageTitleWrapper h1 {
    padding: 15px 0;
    margin: 0;
    color: var(--accent);
    text-align: center;
    text-transform: uppercase;
}

/* ==========================================================================
   Header
   ========================================================================== */
#main_header { position: relative; }

.top_container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

#site-logo { text-align: left; padding-top: 20px; }
#site-logo img { width: 300px; display: block; }

.location_wrap {
    padding-top: 30px;
    margin-bottom: 15px;
    text-align: right;
    font-weight: 600;
}
.location_wrap p { margin-bottom: 1px; }
.location_wrap a { color: var(--accent); }

/* --- nav bar --- */
.navbar-wrapper-fixed {
    background: linear-gradient(to right,
        #131313 1%, #111111 34%, #2b2b2b 52%, #111111 69%, #131313 100%);
}

.fixed_nav_container {
    padding: 24px 0 14px;
    text-align: center;
    position: relative;
}

.navbar-toggle {
    display: none;
    background: var(--accent);
    border: 0;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0 15px 0 auto;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #000;
    margin: 4px 0;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

#menu-primary-navigation {
    text-transform: uppercase;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}
#menu-primary-navigation > li {
    transform: skew(20deg);
    background: var(--accent);
    margin: 10px;
    position: relative;
}
#menu-primary-navigation > li > a {
    transform: skew(-20deg);
    display: block;
    color: #000;
    font-size: 16px;
    border-bottom: 3px solid transparent;
    padding: 5px 20px;
    white-space: nowrap;
}
#menu-primary-navigation > li > a:hover,
#menu-primary-navigation > li > a:focus,
#menu-primary-navigation > li.active > a {
    border-bottom: 3px solid #000;
    color: #000;
}


/* ==========================================================================
   Main
   ========================================================================== */
#main_container { min-height: 50vh; }

.entry_content p { margin-bottom: 1em; }
.entry_content a { text-decoration: underline; }

.alignleft { float: left; margin: 0 15px 15px 0; }

/* ==========================================================================
   Services / contact blocks
   ========================================================================== */
article.service { margin-bottom: 30px; }
article.service h3 { color: var(--text); }
article.service ul li { padding: 4px 0; color: var(--accent-light); }
article.service ul li.not_available { font-style: italic; }

.hours_table p { margin-bottom: 4px; }
/* feste Breite, damit Zeiten und „geschlossen“ untereinander stehen */
.hours_table span { display: inline-block; min-width: 2.8em; }
.hours_table h4 { color: var(--text); }

/* ==========================================================================
   Forms (recreated from Contact Form 7 markup)
   ========================================================================== */
.wpcf7 { max-width: 100%; }
.wpcf7 p { margin: 0 0 12px; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: #1c1c1c;
    /* 3,15:1 gegen die Feldfuellung. Der vorherige Wert #3a3a3a kam auf 1,5:1
       -- die Feldgrenzen waren kaum auszumachen. */
    border: 1px solid #6b6a67;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: #8c8c8c; }

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.wpcf7-form textarea { min-height: 140px; resize: vertical; }

.wpcf7-form label { display: block; margin-bottom: 4px; color: var(--accent-light); }

.wpcf7-form .acceptance-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0;
    color: var(--accent-light);
}
.wpcf7-form .acceptance-line input[type="checkbox"] {
    width: auto;
    margin-top: 4px;
    flex: none;
}
.wpcf7-form .acceptance-line a { font-weight: 700; text-decoration: underline; }

.wpcf7-submit {
    display: inline-block;
    background: var(--accent);
    color: #000;
    border: 0;
    padding: 10px 34px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transform: skew(-20deg);
}
.wpcf7-submit:hover { background: var(--accent-light); }
.submit_wrapper { margin-top: 10px; }

.form-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #3a3a3a;
    background: #141414;
    color: var(--accent-light);
    font-size: 13px;
}
.form-note strong { color: var(--text); }

/* ==========================================================================
   Imprint
   ========================================================================== */
/* Die Originalseite zentrierte den Block -- das trug vier Zeilen, nicht die
   vollstaendige Offenlegung. Linksbuendig in begrenzter Breite, als Block
   mittig, bleibt sie lesbar. */
#imprint_wrapper { max-width: 720px; margin: 0 auto; line-height: 1.75; }
#imprint_wrapper p { margin: 0 0 2px; }
#imprint_wrapper a { text-decoration: underline; }
#imprint_wrapper .imprint_name { font-weight: 700; }
#imprint_wrapper .imprint_intro {
    color: var(--accent-light);
    font-size: 13px;
    margin-bottom: 4px;
}

/* Abschnittsmarken statt blosser Ueberschriften: die Haarlinie gliedert die
   Seite fuers Ueberfliegen -- man sucht im Impressum meist eine Angabe, nicht
   den Fliesstext. */
#imprint_wrapper h4 {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 30px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2a;
}

/* Beschriftung und Wert in zwei Spalten: die Werte fluchten untereinander,
   was die datenlastigen Abschnitte (Firmenbuch, Kontakt) lesbar macht. */
#imprint_wrapper .kv { display: grid; grid-template-columns: 170px 1fr; gap: 0 14px; }
#imprint_wrapper .k  { color: var(--accent-light); }

@media (max-width: 560px) {
    /* Nebeneinander wird zu eng -- Beschriftung ueber den Wert. */
    #imprint_wrapper .kv { grid-template-columns: 1fr; gap: 0; }
    #imprint_wrapper .k  { font-size: 12px; }
}
/* Rechtstexte: begrenzte Zeilenlaenge. Ueber die volle Containerbreite ergaben
   sich bei 14px rund 180 Zeichen je Zeile -- lesbar sind 45 bis 75. */
.legal_text { max-width: 760px; line-height: 1.75; }
.legal_text p { margin-bottom: 1.15em; }
.legal_text strong { color: var(--text); }
.legal_text a { text-decoration: underline; }

/* Die Vorlage klebt Zwischenueberschriften als <strong> per <br> an den
   Absatz. Am Text selbst laesst sich das nicht aendern -- er steht in der
   Datenbank. Diese Regel macht daraus trotzdem eine sichtbare Ueberschrift. */
.legal_text p > strong:first-child {
    display: block;
    color: var(--accent);
    font-size: 16px;
    margin: 34px 0 6px;
}
.legal_text > p:first-child > strong:first-child { margin-top: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
#main_footer {
    background: #000;
    border-top: 5px solid var(--accent);
    margin-top: 60px;
}
#main_footer > section { border-bottom: 5px solid var(--accent); }

#footer_nav {
    background: linear-gradient(to right,
        #000000 1%, #000000 34%, #2b2b2b 52%, #111111 69%, #131313 100%);
    margin-bottom: 10px;
}
#footer_nav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#footer_nav ul { display: flex; flex-wrap: wrap; }
#footer_nav ul li { padding: 10px; }
#footer_nav a {
    color: var(--accent);
    font-size: 14px;
    padding: 15px 0;
}
.footer_credit {
    text-align: right;
    color: var(--accent);
    font-size: 14px;
    padding: 15px 0;
}

/* ==========================================================================
   Grid helpers (Bootstrap-like columns the original relied on)
   ========================================================================== */
.col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-8, .col-md-4 {
    padding: 0 15px;
    width: 100%;
}

@media (min-width: 768px) {
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.3333%; }
    .col-sm-5  { width: 41.6667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-8  { width: 66.6667%; }
    .col-md-4  { width: 33.3333%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 1024px) {
    #site-logo img { width: 220px; }
    .top_container { padding: 0 20px; }
}

@media only screen and (max-width: 991px) {
    .navbar-toggle { display: block; }
    .navbar-collapse {
        display: none;
        width: 100%;
    }
    .navbar-collapse.open { display: block; }
    #menu-primary-navigation { display: block; }
    #menu-primary-navigation > li { transform: none; margin: 6px 15px; }
    /* groessere Tippflaeche: 39px waren fuer den Daumen knapp */
    #menu-primary-navigation > li > a { transform: none; padding: 11px 20px; }
}

@media only screen and (max-width: 767px) {
    .top_container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #site-logo { padding-top: 15px; }
    #site-logo img { width: 200px; }
    .location_wrap { text-align: center; padding-top: 10px; }
    .my_row { padding: 40px 0; }
    .section_title { margin-bottom: 30px; }
    .alignleft { float: none; margin: 0 0 15px; }
    #footer_nav .container { justify-content: center; }
    .footer_credit { text-align: center; width: 100%; }
    #main_footer { margin-top: 30px; }
}

@media only screen and (max-width: 500px) {
    .section_title { font-size: 2em; }
    h1 { font-size: 2em; }
}


/* ==========================================================================
   WordPress-spezifische Ergaenzungen
   ========================================================================== */

/* Admin-Leiste nicht ueber den Header legen */
body.admin-bar #main_header { padding-top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #main_header { padding-top: 46px; }
}

/* Ausrichtungsklassen des Editors */
.alignright   { float: right; margin: 0 0 15px 15px; }
.aligncenter  { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }

/* Listen aus dem Editor */
.entry_content ul,
.legal_text ul { list-style: disc; margin: 0 0 1em 1.4em; }
.entry_content ol,
.legal_text ol { list-style: decimal; margin: 0 0 1em 1.4em; }
.entry_content li,
.legal_text li { padding: 2px 0; }

.entry_content h2, .entry_content h3, .entry_content h4,
.legal_text h2, .legal_text h3, .legal_text h4 {
    color: var(--accent);
    margin-top: 1.4em;
}

/* Bildunterschriften */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--accent-light); }

/* Menuepunkte aus wp_nav_menu */
#menu-primary-navigation li.menu-item > a { display: block; }
#footer_nav .simnple-navbar ul { display: flex; flex-wrap: wrap; }