/*
Theme Name:  Shuttle Pro Child
Template:    shuttle-pro
Author:      Queller Finnbahn e. V.
Author URI:  https://queller-finnbahn.de
Description: Child-Theme von "Shuttle Pro". Bündelt die Design-Auffrischung von
             queller-finnbahn.de (Vereins-Grün #79a52b, dunklere/luftigere
             Typografie, Navigations-Akzente, abgerundete Bilder, grüne
             Pill-Buttons, Footer-Tint, Fokus-Ringe, Mobil-Feinschliff).
             Zuvor als Customizer „Zusätzliches CSS" umgesetzt – jetzt
             versionierbar und portabel als Child-Theme.
Version:     1.0.0
Text Domain: shuttle-pro-child
*/

/* ============================================================
   Queller Finnbahn e. V. – Design-Auffrischung
   Akzentfarbe aus dem Vereinslogo (Oliv-/Lindgrün).
   (Inhalt zuvor: Customizer „Zusätzliches CSS", Iterationen 1–3.)
   ============================================================ */

:root{
  --qf-green:#79a52b;        /* Hauptakzent, dem Logo entnommen */
  --qf-green-dark:#5d8120;   /* Hover / aktiver Zustand */
  --qf-green-tint:#f1f6e7;   /* zarter Abschnitts-/Footer-Hintergrund */
  --qf-ink:#374049;          /* Fließtext – dunkler als das Theme-Grau #767676 */
  --qf-head:#28303a;         /* Überschriften */
}

/* --- Basis-Typografie: dunkler, luftiger & kräftiger für bessere Lesbarkeit ---
   Theme-Standard war Weight 300 (Light) -> auf Mobil zu dünn. Basis auf 400. */
body{ color:var(--qf-ink); font-size:17px; line-height:1.75; font-weight:400; }
#content p, #content li, #content .wpb_text_column,
#content td, #content th, #content div{ color:var(--qf-ink); font-weight:400; }
a{ color:var(--qf-green); transition:color .2s ease; }
a:hover{ color:var(--qf-green-dark); }

/* „Lead"-Absätze, die komplett in <strong> gewickelt sind (z. B. Intro der
   Startseite), entfetten – echte Inline-Betonungen bleiben fett. */
#content p > strong:only-child{ font-weight:400; }

/* --- Überschriften: kräftiger, dunkler, mit dezentem Akzent-Strich --- */
#content h1,#content h2,#content h3,#content h4{
  color:var(--qf-head); font-weight:700; letter-spacing:.2px; line-height:1.25;
}
#content h2, #content h3{ position:relative; padding-bottom:.55rem; margin-bottom:1.1rem; }
#content h2::after, #content h3::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:3px; background:var(--qf-green); border-radius:3px;
}

/* --- Navigation: mehr Luft, sanfte Hover-Unterstreichung, Akzentfarbe --- */
.main-navigation ul li a{
  position:relative; color:var(--qf-head); font-weight:600;
  letter-spacing:.3px; transition:color .2s ease;
}
/* höhere Spezifität (#pre-header-core) + !important, um das Theme-Blau zu schlagen.
   Inkl. Eltern-/Vorfahren-Menüpunkte (z. B. „Der Verein" bei aktiver Unterseite). */
#pre-header-core.main-navigation ul li a:hover,
#pre-header-core.main-navigation ul li.current-menu-item > a,
#pre-header-core.main-navigation ul li.current_page_item > a,
#pre-header-core.main-navigation ul li.current-menu-parent > a,
#pre-header-core.main-navigation ul li.current-menu-ancestor > a,
#pre-header-core.main-navigation ul li.current_page_parent > a,
#pre-header-core.main-navigation ul li.current_page_ancestor > a,
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-parent > a,
.main-navigation ul li.current-menu-ancestor > a{ color:var(--qf-green) !important; }
/* Nur Menüpunkte OHNE Untermenü bekommen die Unterstreichung – sonst würde
   das ::after die native Dropdown-Caret von „Der Verein" grün einfärben. */
.main-navigation ul li:not(.menu-item-has-children) > a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  height:2px; width:0; background:var(--qf-green); transition:width .25s ease;
}
.main-navigation ul li:not(.menu-item-has-children) > a:hover::after,
.main-navigation ul li:not(.menu-item-has-children).current-menu-item > a::after,
.main-navigation ul li:not(.menu-item-has-children).current_page_item > a::after{ width:100%; }
/* Sicherheitshalber: falls das Theme die Caret über ::after mit eigener Breite
   rendert, keinesfalls grün hinterlegen. */
.main-navigation ul li.menu-item-has-children > a::after{ background:transparent !important; }

/* --- Logo / Seitentitel --- */
#logo .site-title{ color:var(--qf-head); font-weight:800; letter-spacing:.3px; }

/* --- Header-Bild: weicher Schatten + Akzent-Rand unten für Tiefe --- */
header #site-header{ box-shadow:0 6px 24px rgba(0,0,0,.08); border-bottom:4px solid var(--qf-green); }

/* --- Seitentitel-Band (#intro) auf Unterseiten: EINHEITLICHER Grünton ---
   Das Theme legt hinter den Titel einen <span> mit rgba(255,255,255,.05) ->
   erzeugt einen zweiten, helleren Grün-Kasten. Entfernen = ein sauberes Band. */
#intro span{ background:transparent !important; }
/* Titel etwas ruhiger: mehr Buchstaben-Abstand, kein harter Kasten */
#intro .page-title, #intro h1, #intro span{ letter-spacing:.5px; }

/* --- Inhaltsbilder: abgerundet, weicher Schatten, sanfter Hover-Zoom --- */
#content img,
.vc_figure img,
.vc_single_image-img{
  border-radius:12px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vc_single_image-wrap, .vc_figure{ overflow:hidden; border-radius:12px; }
#content a img:hover,
.vc_figure:hover img{ transform:scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,.18); }

/* --- Buttons / CTA (WPBakery + Ninja Forms): einladend, rund, Hover-Lift --- */
.vc_btn3, .wpb_button, a.vc_general.vc_btn3,
button[type=submit], .nf-form-content input[type=button], .nf-form-content input[type=submit]{
  background:var(--qf-green) !important; border:0 !important; color:#fff !important;
  border-radius:999px !important; padding:.85em 1.9em !important; font-weight:700 !important;
  letter-spacing:.3px; box-shadow:0 6px 16px rgba(121,165,43,.35);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.vc_btn3:hover, .wpb_button:hover, a.vc_general.vc_btn3:hover,
button[type=submit]:hover, .nf-form-content input[type=button]:hover{
  background:var(--qf-green-dark) !important; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(121,165,43,.45);
}
/* der grüne „Jetzt Mitglied werden"-Balken (WPBakery Call-to-Action/Message-Box) */
.vc_cta3, .vc_message_box, .vc_general.vc_cta3-container{ border-radius:14px !important; overflow:hidden; }

/* --- Vertikaler Rhythmus: etwas mehr Luft zwischen Blöcken --- */
.wpb_text_column, .wpb_single_image, .vc_figure{ margin-bottom:1.6rem; }

/* --- Footer: heller Tint, aufgeräumt, Akzent-Links --- */
footer{ background:var(--qf-green-tint); border-top:1px solid #e5ecd6; padding:1.6rem 0; }
footer, footer *{ color:#5a6470; }
footer a{ color:var(--qf-green-dark) !important; font-weight:600; }
footer a:hover{ color:var(--qf-green) !important; }

/* --- Fokus-Sichtbarkeit (Barrierefreiheit) --- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid rgba(121,165,43,.55); outline-offset:2px;
}

/* --- Mobile Lesbarkeit: größer, luftiger, klar 400 (nie 300) --- */
@media (max-width:782px){
  body{ font-size:18px; line-height:1.75; font-weight:400; }
  #content p, #content li, #content .wpb_text_column, #content div{
    font-size:18px; line-height:1.75; font-weight:400;
  }
  #content h1{ font-size:1.8rem; }
  #content h2, #content h3{ font-size:1.5rem; }
}

/* --- Startseite (page-id-18): Weißraum-Lücke der 2-Spalten-Row entschärfen ---
   Nur Desktop. Zwei kleine Bilder der breiten linken Spalte nebeneinander
   statt gestapelt (füllt die Spalte), Spalten vertikal zentriert. */
@media (min-width:783px){
  /* Spalten vertikal zentrieren -> Rest-Höhe wird oben/unten verteilt statt
     als eine große Lücke unten. Bilder bleiben gestapelt und etwas größer. */
  .page-id-18 #content .vc_row.vc_row-fluid{ display:flex; align-items:center; flex-wrap:wrap; }
  .page-id-18 #content .vc_row.vc_row-fluid > [class*="vc_col-"]{ float:none; }
  .page-id-18 #content .vc_col-sm-8 .wpb_single_image img{ width:78%; }
}