/*
Theme Name:   Annas Schmökerecke
Theme URI:    https://annas-schmoekerecke.de
Description:  Brand-Child-Theme für Annas Schmökerecke, aufbauend auf Kadence. Bringt Brand-Farben, Schriften (Caveat/Lora/Inter), Block-Patterns und Button-Styles mit.
Author:       Annas Schmökerecke
Author URI:   https://annas-schmoekerecke.de
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         e-commerce, woocommerce, block-patterns, two-columns, custom-logo, custom-colors, full-site-editing
Text Domain:  annas-schmoekerecke
*/

/* ============================================================
   BRAND-VARIABLEN
   ============================================================
   Diese Farb- und Schrift-Variablen werden überall genutzt.
   Wenn ihr ein Brand-Element später ändern wollt, hier ist
   die einzige Stelle, an der ihr es tun müsst.
*/
:root {
  --as-creme:       #F5EDE0;
  --as-creme-deep:  #EBDFCB;
  --as-paper:       #FBF7EE;
  --as-brown:       #6B3F1F;
  --as-brown-mid:   #8B5A35;
  --as-brown-soft:  #A87A55;
  --as-coral:       #C5614A;
  --as-coral-deep:  #A84D38;
  --as-coral-light: #F5D9CE;
  --as-sage:        #8FA078;
  --as-sage-deep:   #6F7F5C;
  --as-sage-light:  #D8DFCB;
  --as-ink:         #2C2620;
  --as-muted:       #847468;
  --as-line:        #D8CBB8;

  --as-font-display: 'Caveat', cursive;
  --as-font-body:    'Lora', Georgia, serif;
  --as-font-ui:      'Inter', system-ui, sans-serif;

  --as-shadow:       0 14px 40px -18px rgba(80, 50, 25, 0.35);
}

/* ============================================================
   GLOBALE TYPOGRAFIE
   Body-Text bekommt Lora als Standard, UI-Elemente Inter,
   handlettering-artige Akzente Caveat.
*/
body,
.wp-site-blocks,
.entry-content {
  font-family: var(--as-font-body);
  color: var(--as-ink);
  background-color: var(--as-paper);
  line-height: 1.65;
}

.wp-block-button__link,
.button,
button,
input[type="button"],
input[type="submit"],
.kadence-btn,
.menu-item a,
.wp-block-navigation-item__label {
  font-family: var(--as-font-ui);
}

/* ============================================================
   ÜBERSCHRIFTEN
   H1-H3 in handlettering-artigem Caveat für emotionale Sektionen,
   H4-H6 in Lora bold für strukturierte Inhalte.
   Caveat ist groß angesetzt, weil die Schriftform schmal ist.
*/
h1, .h1, .is-style-as-handwritten {
  font-family: var(--as-font-display);
  color: var(--as-brown);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(40px, 6vw, 72px); }

h2, .h2 {
  font-family: var(--as-font-display);
  color: var(--as-brown);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(34px, 4.5vw, 52px);
}

h3, .h3 {
  font-family: var(--as-font-body);
  color: var(--as-brown);
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 26px);
}

h4, h5, h6 {
  font-family: var(--as-font-body);
  color: var(--as-brown);
  font-weight: 600;
}

/* ============================================================
   BUTTONS
   Korallrot-Hauptbutton + Outline-Sekundärvariante.
*/
.wp-block-button .wp-block-button__link,
.button,
.kadence-btn {
  background-color: var(--as-coral);
  color: var(--as-creme);
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: none;
  box-shadow: var(--as-shadow);
  transition: background-color 0.2s, transform 0.1s;
}

.wp-block-button .wp-block-button__link:hover,
.button:hover,
.kadence-btn:hover {
  background-color: var(--as-coral-deep);
  transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--as-coral);
  border: 1.5px solid var(--as-coral);
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--as-coral);
  color: var(--as-creme);
}

/* ============================================================
   LINKS
*/
a {
  color: var(--as-coral);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
a:hover { border-bottom-color: var(--as-coral); }

.wp-block-navigation a,
.menu-item a {
  border: none;
  color: var(--as-brown);
}
.wp-block-navigation a:hover,
.menu-item a:hover {
  color: var(--as-coral);
  border: none;
}

/* ============================================================
   FORMULARE
*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-family: var(--as-font-body);
  font-size: 16px;
  padding: 14px 18px;
  border: 1.5px solid var(--as-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--as-ink);
  outline: none;
  transition: border-color 0.2s;
}
textarea {
  border-radius: 12px;
  min-height: 130px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--as-coral);
}

/* ============================================================
   WOOCOMMERCE
   Produkt-Karten, Preise, Buttons in Brand-Style.
*/
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--as-brown);
  font-family: var(--as-font-body);
  font-weight: 600;
  font-size: 22px;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--as-font-body);
  color: var(--as-brown);
  font-weight: 600;
  font-size: 17px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background: var(--as-coral) !important;
  color: var(--as-creme) !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: var(--as-font-ui) !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: var(--as-shadow);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--as-coral-deep) !important;
}

.woocommerce .price del { color: var(--as-muted); opacity: 0.7; }

/* Produktbild-Rahmen weicher */
.woocommerce ul.products li.product a img {
  border-radius: 8px;
}

/* ============================================================
   HEADER & NAVIGATION
   Kleine Anpassungen für den Sticky-Header.
*/
.site-header,
.wp-site-blocks > header {
  background-color: rgba(245, 237, 224, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(107, 63, 31, 0.08);
}

.site-branding img,
.wp-block-site-logo img {
  max-height: 110px;
  height: auto;
  width: auto;
}

/* ============================================================
   FOOTER
*/
.site-footer,
.wp-site-blocks > footer {
  background-color: var(--as-brown);
  color: var(--as-creme-deep);
  padding: 60px 24px 32px;
}
.site-footer a,
.wp-site-blocks > footer a {
  color: var(--as-creme-deep);
}
.site-footer a:hover,
.wp-site-blocks > footer a:hover {
  color: var(--as-coral);
  border-bottom-color: var(--as-coral);
}

/* ============================================================
   UTILITY-KLASSEN
   In Block-Editor verwendbar via "Erweitert → Zusätzliche CSS-Klasse".
*/
.as-eyebrow {
  font-family: var(--as-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--as-coral);
}

.as-handwritten {
  font-family: var(--as-font-display) !important;
  color: var(--as-brown);
}

.as-bookish-card {
  background: var(--as-paper);
  border: 1px solid var(--as-line);
  border-radius: 8px;
  padding: 28px;
}

.as-callout-coral {
  background: var(--as-creme);
  border-left: 4px solid var(--as-coral);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
}

.as-callout-sage {
  background: var(--as-sage-light);
  border-left: 4px solid var(--as-sage);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
}

/* ============================================================
   COOKIE-BANNER / REAL COOKIE BANNER
   Sanfte Anpassung an Brand-Look, falls Real Cookie Banner aktiv.
*/
.rcb-blocker-overlay,
#real-cookie-banner * {
  font-family: var(--as-font-ui) !important;
}
.rcb-button-accept-all,
.rcb-button-save {
  background: var(--as-coral) !important;
  border-radius: 999px !important;
}