/*
Theme Name: BSHT Hundeschule
Theme URI: https://bsht-webseite.itfire.de/
Author: Kevin S. Knarren + ChatGPT
Author URI: https://itfire.de/
Description: Leichtes, schnelles Starter-Theme für eine Hundeschule (Hero + Kurs-Teaser + Testimonials + Kontakt-CTA). Basis: blank Theme, ohne Page Builder, Gutenberg-freundlich.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bsht-hundeschule
Tags: hund, hundeschule, clean, responsive
*/

/* standardmäßig ausblenden – nur mobil zeigen */
.submenu-toggle { display: none; }

/* Reset/Defaults */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; color:#0f172a; background:#ffffff; line-height:1.6; }
img { max-width:100%; height:auto; }
a { color:#1d4ed8; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Layout */
.container { width: min(1100px, 92%); margin: 0 auto; }
.site-header { position: sticky; top:0; z-index: 50; background: #0b1b38; color:#fff; }
.site-header .inner { display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; gap: 1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand:hover { text-decoration:none; }

/* Platzhalter-Logo (Fallback) */
.brand-logo { width:42px; height:42px; border-radius:8px; background:#60a5fa; display:inline-block; }
/* WordPress Custom Logo */
.custom-logo { max-height:42px; width:auto; height:auto; display:inline-block; border-radius:8px; }
.custom-logo-link { display:inline-flex; align-items:center; }
.brand-title { font-weight:700; letter-spacing:.2px; color:#fff; }

/* NAV BASIS */
.nav { position: relative; }
#primary-menu { list-style:none; display:flex; gap:1rem; padding:0; margin:0; }
.nav a { color:#cbd5e1; }
.nav a:hover { color:#fff; text-decoration:none; }

/* Hero / Sections */
.hero { background: linear-gradient(120deg,#0b1b38 0%, #102753 100%); color:#fff; padding: clamp(3rem, 8vw, 6rem) 0; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin:0 0 .5rem; }
.hero p { max-width: 62ch; opacity:.92; }
.hero .cta { display:flex; gap:.8rem; margin-top:1rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.7rem 1rem; border-radius:999px; font-weight:600; border:1px solid transparent; }
.btn-primary { background:#60a5fa; color:#0b1b38; }
.btn-primary:hover { background:#93c5fd; }
.btn-outline { border-color:#93c5fd; color:#93c5fd; }
.btn-outline:hover { background:rgba(255,255,255,.08); }

.section { padding: clamp(2rem, 6vw, 4rem) 0; }
.section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .8rem; }

.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:1rem; box-shadow: 0 1px 2px rgba(2,6,23,.04); }
.card h3 { margin-top:0; }

.testimonials blockquote { background:#0b1b380d; border-left: 4px solid #0b1b38; padding:1rem; margin:0; border-radius:10px; }

.callout { background:#f1f5f9; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; }

.site-footer { background:#0b1b38; color:#cbd5e1; padding:2rem 0; margin-top:2rem; }
.site-footer a { color:#fff; }
.site-footer .cols { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Menu toggle small (Burger) → Label, nicht Button */
.menu-toggle { display:none; background:transparent; color:#fff; border:1px solid #334155; border-radius:10px; padding:.4rem .6rem; cursor:pointer; }

/* Dropdown: Basis */
.nav li { position: relative; }
.nav li > a { display:inline-block; padding:.4rem 0; }

/* Submenu: versteckt */
.nav ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #0b1b38;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: .5rem 0;
  box-shadow: 0 6px 20px rgba(2,6,23,.25);
  z-index: 9999;
}
.nav ul.sub-menu li { width: 100%; }
.nav ul.sub-menu a { color:#cbd5e1; padding:.5rem .9rem; display:block; }
.nav ul.sub-menu a:hover { background: rgba(255,255,255,.06); color:#fff; text-decoration:none; }

/* Desktop: zeigen bei Hover */
@media (hover:hover){
  .nav li:hover > ul.sub-menu { display:block; }
}

/* Pfeil am Elternelement (nur Desktop sichtbar) */
.nav .menu-item-has-children > a::after {
  content: "▾";
  margin-left: .35rem;
  font-size: .8em;
  opacity: .8;
}

/* --------- Mobile --------- */
@media (max-width: 840px){
  /* Burger sichtbar */
  .menu-toggle { display:inline-flex; }

  /* Top-Level-UL mobil ausblenden */
  #primary-menu { display:none; }

  /* 1) CSS-Fallback: Checkbox checkt Menü sichtbar */
  .nav-toggle:checked ~ .nav #primary-menu {
    display:flex;
    position:absolute;
    top:100%;
    right:0;
    background:#0b1b38;
    padding:1rem;
    flex-direction:column;
    min-width: 220px;
    border-bottom-left-radius:12px;
    z-index: 9999;
  }

  /* 2) JS-Bonus: wenn .nav.open gesetzt wird */
  .nav.open #primary-menu {
    display:flex;
    position:absolute;
    top:100%;
    right:0;
    background:#0b1b38;
    padding:1rem;
    flex-direction:column;
    min-width: 220px;
    border-bottom-left-radius:12px;
    z-index: 9999;
  }

  /* Submenus im Mobil-Menü */
  .nav ul.sub-menu {
    position: static;
    display: none;           /* zu, bis per Toggle geöffnet */
    min-width: 0;
    background: #0b1b38;
    border: 1px solid #334155;
    border-radius: 10px;
    margin:.4rem 0 .6rem .6rem;
  }

  /* Toggle-Button neben Elternlink sichtbar */
  .submenu-toggle { display: inline-flex; }

  /* Mobil: CSS-Pfeil am Link entfernen (wir haben Button) */
  .nav .menu-item-has-children > a::after { content: ""; }

  /* Wenn geöffnet (per .open am <li>) */
  .nav li.open > ul.sub-menu { display:block; }

  .submenu-toggle {
    margin-left: .35rem;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: .1rem .45rem;
    background: transparent;
    color: #cbd5e1;
    font-size: .9rem;
  }
  .submenu-toggle:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }
}

/* Screenreader-only Text */
.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;
}

/* Body fix: kein Scrollen bei offenem Offcanvas (nur via JS genutzt) */
body.no-scroll { overflow: hidden; }

.highlight {
  background: #fff7ed;              /* warmes, freundliches Highlight */
  border: 1px solid #fed7aa;
  border-radius: 16px;
  padding: 1.25rem 1.25rem;
  font-size: 1.1rem;
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
	text-align: center;
}
.highlight p { margin: 0; }
.highlight strong {
  display:block;
  font-size: 1.15rem;
  margin-bottom: .35rem;
}