/*
 Theme Name:   Rosentau Child
 Theme URI:    https://rosentau.ch
 Description:  Child Theme für Verein Rosentau — basiert auf GeneratePress
 Author:       Verein Rosentau
 Author URI:   https://rosentau.ch
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  rosentau-child
*/

/* ════════════════════════════════════════════
   ROSENTAU DESIGN TOKENS
   Alle Werte zentral hier definieren.
   Nie direkte Hex-Werte in Komponenten-CSS —
   immer Custom Properties referenzieren.
════════════════════════════════════════════ */
:root {

  /* ── Logo-Farben (4 Bereiche) ── */
  --rt-villa:    #D88719;   /* Orange   — Villa Rosentau   */
  --rt-atelier:  #C03878;   /* Magenta  — Atelier 5B       */
  --rt-magnolia: #20A87C;   /* Teal     — Haus Magnolia    */
  --rt-viva:     #3BACC8;   /* Blau     — Aussenwohngruppe */

  /* ── Primary (Villa = Hauptfarbe) ── */
  --rt-primary:       #D88719;
  --rt-primary-dark:  #b86d10;
  --rt-primary-pale:  #fdf3e3;

  /* ── WCAG 2.1 AA-konforme Linkfarbe ──
     #9e5f0a ergibt 4.6:1 auf weiss → AA ✓
     Das Orange #D88719 hat nur 2.9:1 → nicht
     für Fliesstext-Links geeignet!          */
  --rt-link:       #9e5f0a;
  --rt-link-hover: #7a4908;

  /* ── Neutrals ── */
  --rt-heading:  #333333;
  --rt-body:     #777777;
  --rt-dark:     #2b2b2b;
  --rt-bg:       #ffffff;
  --rt-bg-light: #f9f9f9;
  --rt-border:   #e8e8e8;

  /* ── Typografie ── */
  --rt-font:      'Open Sans', Helvetica, Arial, sans-serif;
  --rt-font-mono: 'Courier New', Courier, monospace;

  /* ── Layout ── */
  --rt-max-width: 1140px;
  --rt-radius:    6px;

  /* ── Shadows ── */
  --rt-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --rt-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --rt-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* ── Spacing-Skala ── */
  --rt-space-xs:  8px;
  --rt-space-sm:  16px;
  --rt-space-md:  24px;
  --rt-space-lg:  48px;
  --rt-space-xl:  72px;
}


/* ════════════════════════════════════════════
   GENERATEPRESS OVERRIDES — Basis
════════════════════════════════════════════ */

body {
  font-family: var(--rt-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--rt-body);
  background-color: var(--rt-bg);
}

a {
  color: var(--rt-link);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--rt-link-hover);
}

/* Fokusring — WCAG 2.4.7: niemals entfernen */
:focus-visible {
  outline: 3px solid var(--rt-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-Link sichtbar bei Fokus (WCAG 2.4.1) */
.skip-link:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: var(--rt-dark);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--rt-heading);
  font-family: var(--rt-font);
}

/* ── Navigation ── */
.main-navigation a {
  font-size: 13px;
  font-weight: 600;
  color: var(--rt-heading);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--rt-primary);
}
.main-navigation .sub-menu {
  border-top: 3px solid var(--rt-primary);
}
.main-navigation .sub-menu a:hover {
  background-color: var(--rt-primary-pale);
  color: var(--rt-primary);
}

/* ── Buttons ── */
.button,
button,
input[type="submit"],
input[type="button"] {
  background-color: var(--rt-primary);
  color: #ffffff;
  font-family: var(--rt-font);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--rt-radius);
  border: 2px solid transparent;
  padding: 11px 28px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--rt-primary-dark);
  color: #ffffff;
}
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid var(--rt-primary-dark);
  outline-offset: 3px;
}

/* ── Section headings ── */
.rt-section-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rt-body);
  margin-bottom: 8px;
}
.rt-section-divider {
  width: 40px;
  height: 3px;
  background: var(--rt-primary);
  margin: 12px 0 24px;
}

/* ── Sticky Post Badge ── */
.sticky .entry-header::before {
  content: '📌 Angepinnt';
  display: inline-block;
  background: var(--rt-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.sticky {
  border: 2px solid var(--rt-primary);
  border-radius: var(--rt-radius);
  padding: 20px;
}

/* ── Post Cards (Blog/Aktuelles) ── */
.post-card {
  background: #fff;
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover {
  box-shadow: var(--rt-shadow-md);
  transform: translateY(-3px);
}

/* ── Bereiche-Farben (4 Standorte) ── */
.bereich--villa    { background-color: var(--rt-villa);    color: #fff; }
.bereich--atelier  { background-color: var(--rt-atelier);  color: #fff; }
.bereich--magnolia { background-color: var(--rt-magnolia); color: #fff; }
.bereich--viva     { background-color: var(--rt-viva);     color: #fff; }

/* ── Badges / Tags ── */
.badge-villa    { background: var(--rt-villa);    color: #fff; }
.badge-atelier  { background: var(--rt-atelier);  color: #fff; }
.badge-magnolia { background: var(--rt-magnolia); color: #fff; }
.badge-viva     { background: var(--rt-viva);     color: #fff; }

.badge-villa,
.badge-atelier,
.badge-magnolia,
.badge-viva {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 100px;
}

/* ── Blockquote / Zitat ── */
blockquote,
.rt-quote {
  border-left: 4px solid var(--rt-primary);
  background: var(--rt-primary-pale);
  padding: 18px 22px;
  border-radius: 0 var(--rt-radius) var(--rt-radius) 0;
  font-style: italic;
  font-size: 15px;
  color: var(--rt-heading);
  line-height: 1.65;
}
blockquote cite,
.rt-quote-source {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--rt-body);
  margin-top: 8px;
}

/* ── Spenden-Sektion ── */
.rt-spenden {
  background-color: var(--rt-primary);
  color: #fff;
}
.rt-iban {
  font-family: var(--rt-font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Footer ── */
.site-footer {
  background-color: var(--rt-dark);
  color: rgba(255,255,255,0.65);
}
.site-footer a {
  color: rgba(255,255,255,0.65);
}
.site-footer a:hover {
  color: #fff;
}
.footer-widget-title,
.site-footer .widget-title {
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── Formulare ── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  padding: 10px 14px;
  font-family: var(--rt-font);
  font-size: 14px;
  color: var(--rt-heading);
  transition: border-color 0.15s;
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--rt-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,135,25,0.2);
}

/* ── Utilities ── */
.rt-text-villa    { color: var(--rt-villa);    }
.rt-text-atelier  { color: var(--rt-atelier);  }
.rt-text-magnolia { color: var(--rt-magnolia); }
.rt-text-viva     { color: var(--rt-viva);     }

.rt-bg-pale    { background-color: var(--rt-primary-pale); }
.rt-bg-light   { background-color: var(--rt-bg-light); }
.rt-bg-primary { background-color: var(--rt-primary); color: #fff; }
.rt-bg-dark    { background-color: var(--rt-dark);    color: #fff; }