/*
Theme Name: GGS Laurensberg
Theme URI: https://ggs-laurensberg.de
Author: GGS Laurensberg
Description: Eigenes Theme der GGS Laurensberg, orientiert am Startseiten-Konzept der GGS Vaalserquartier.
Version: 0.1
Text Domain: ggs-laurensberg
*/

/* ---------- Tokens ---------- */
:root{
  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --ink:#1C2733;
  --muted:#5B6670;
  --line:#DCE3EA;
  --accent:#1961B4;
  --accent-soft:#D7E6F5;
  --accent-ink:#F4F8FC;
  --warm:#E2812C;
  --warm-soft:#FBE8D2;
  --radius:16px;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--warm)}
h1,h2,h3{margin:0 0 .5em;font-family:"Fraunces", Georgia, serif;line-height:1.15}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px}
.btn:hover{background:var(--warm);color:#20160a}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;font-size:14.5px;border-bottom:1px solid var(--line);padding-bottom:2px}
.btn-ghost:hover{color:var(--warm);border-color:var(--warm)}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--accent);border-bottom:1px solid var(--accent)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px;flex-wrap:wrap}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#FFFFFF}
.site-logo .mark{width:46px;height:46px;border-radius:12px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:none}
.site-logo .name{font-family:"Fraunces",serif;font-weight:600;font-size:28px;color:#FFFFFF}
.primary-nav ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0;font-size:14.5px;font-weight:600}
.primary-nav li{position:relative}
.primary-nav a{color:#FFFFFF;display:inline-block;padding-block:4px}
.primary-nav .current-menu-item > a{color:var(--warm)}

/* Untermenüs: Dropdown bei Hover (Maus) und Fokus (Tastatur) */
.primary-nav ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:20;
  flex-direction:column;
  gap:0;
  min-width:220px;
  /* Kein margin-top: direkt anschließend an den Menüpunkt, sonst verliert
     die Maus beim Herunterfahren den Hover-Bereich in der Lücke und das
     Untermenü schließt sich, bevor man klicken kann. Der optische Abstand
     kommt stattdessen über padding-top. */
  margin-top:0;
  padding:14px 8px 8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul{
  display:flex;
}
.primary-nav ul ul a{
  color:var(--ink);
  padding:8px 10px;
  border-radius:6px;
  white-space:nowrap;
}
.primary-nav ul ul a:hover,
.primary-nav ul ul a:focus{
  background:var(--bg);
  color:var(--accent);
}
.primary-nav ul ul .current-menu-item > a{color:var(--accent)}

/* ---------- Hero ---------- */
.hero{background:var(--surface)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;padding-block:56px;align-items:start}
.hero-text{grid-column:span 7;display:flex;flex-direction:column;gap:18px;min-width:0}
.hero-text h1{font-size:48px;font-weight:600;line-height:1.1}
.hero-text p{margin:0;color:var(--muted);font-size:18.5px;line-height:1.65;max-width:56ch}
.hero-text p strong{color:var(--ink)}
.hero-info{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.info-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.info-card.warm{background:var(--warm-soft);border-color:transparent}
.info-card .label{font-weight:700}
.info-card .date{color:var(--muted);font-size:14px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.hero-image{grid-column:span 5;min-width:0}
.hero-image .frame{aspect-ratio:4/3;border-radius:20px;overflow:hidden}
.hero-image .frame img{width:100%;height:100%;object-fit:cover;display:block}
.hero-image .frame-placeholder{width:100%;height:100%;background:linear-gradient(155deg,#E4EEF8 0%,#BFDAF2 55%,#8FBEE4 100%)}

/* ---------- Tiles ---------- */
.tiles{background:var(--bg)}
.tiles .wrap{padding-block:44px}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;color:inherit}
.tile .icon{width:40px;height:40px;border-radius:10px;background:var(--warm-soft);display:flex;align-items:center;justify-content:center}
.tile .title{font-weight:700;font-size:16px}
.tile .desc{color:var(--muted);font-size:14px}
.tile .btn-ghost{margin-top:auto}

/* ---------- Aktuelles ---------- */
.news{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news .wrap{padding-block:48px}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.news-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.news-card h3{font-size:18px;font-weight:600}
.news-card p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- Footer ---------- */
.site-footer{background:var(--accent);color:#FFFFFF}
.footer-grid{padding-block:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.footer-grid h4{font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
.footer-grid div{font-size:14px;line-height:1.7;opacity:.9}
.footer-legal{border-top:1px solid rgba(255,255,255,.14)}
.footer-legal .wrap{padding-block:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;opacity:.75}
.footer-legal a{color:inherit;text-decoration:underline}
.footer-legal-list{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0}

/* ---------- Normale Seiten ---------- */
.page-content{background:var(--surface)}
.page-content .wrap{padding-block:48px;max-width:860px}
.page-content h1{font-size:34px}
.page-content .entry-content{font-size:16px;line-height:1.7}
.page-content .entry-content h2{font-size:22px;margin-top:1.4em}
.page-content .entry-content ul{padding-left:1.2em}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-text,.hero-image{grid-column:1 / -1}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .tile-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}