/*
Theme Name: Momentblatt
Description: Eigenes Momentblatt-Theme (Child von Botiga). Marke: Ink/Creme/Sand/Gold, DM Serif Display. Quelle der Markenwerte: BRAND.md im Repo.
Author: Momentblatt / M. Brennecke
Template: botiga
Version: 1.0.0
Text Domain: momentblatt
*/

/* === Marken-Schriften (lokal, OFL — DSGVO-sicher, kein Google-CDN) === */
@font-face{
  font-family:"DM Serif Display";
  src:url("fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"DM Serif Display";
  src:url("fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}

/* === Markenfarben (BRAND.md) === */
:root{
  --mb-ink:#5C5148; --mb-creme:#FDFBF6; --mb-sand:#F3EAD9;
  --mb-gold:#C9A86A; --mb-gold-dark:#A8813E;
}

/* === Grundflächen === */
body{background-color:var(--mb-creme);color:var(--mb-ink);}
/* Mobil-Schutz: nichts darf die Seite seitlich aufziehen */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;height:auto;}
@media (max-width:600px){
  .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:100%!important;}
  .wp-block-media-text__content{padding:0 6%!important;}
}
.site-header,.top-bar{background-color:var(--mb-creme);}
.site-footer,.footer-widgets{background-color:var(--mb-sand);color:var(--mb-ink);}

/* === Typografie: Marken-Serif für Headlines === */
h1,h2,h3,h4,h5,h6,.site-title,
.woocommerce-loop-product__title,.product_title{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400;color:var(--mb-ink);letter-spacing:.01em;
}
h1{font-size:2.6rem;}
body,p,li,input,textarea,select,button{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  "Helvetica Neue",Arial,sans-serif;
}

/* === Links & Akzente === */
a{color:var(--mb-gold-dark);}
a:hover{color:var(--mb-ink);}

/* === Buttons: Ink, Hover Gold — ruhig und edel === */
button,.button,.wp-block-button__link,input[type=submit],
.woocommerce a.button,.woocommerce button.button,
.single_add_to_cart_button,.checkout-button{
  background-color:var(--mb-ink)!important;color:#fff!important;
  border-color:var(--mb-ink)!important;border-radius:4px;
  letter-spacing:.06em;
}
button:hover,.button:hover,.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.single_add_to_cart_button:hover,.checkout-button:hover{
  background-color:var(--mb-gold-dark)!important;
  border-color:var(--mb-gold-dark)!important;
}

/* === Shop-Elemente === */
.woocommerce span.price,.woocommerce .price{color:var(--mb-ink);}
.onsale,.woocommerce span.onsale{
  background-color:var(--mb-gold)!important;color:var(--mb-ink)!important;
}

/* === Header: Logo (logo_header.png ohne Tagline; Groesse steuern die
   Botiga-Mods site_logo_size_desktop/tablet/mobile = 260/220/170px).
   height:auto ist Pflicht - sonst staucht die Mobil-Breite die Wortmarke
   (Hoehe blieb sonst beim Attribut-Wert haengen). Text-Titel steckt im Logo. === */
.custom-logo,.site-branding img{height:auto!important;width:260px!important;
  max-width:100%;}
@media (max-width:1024px){.custom-logo,.site-branding img{width:190px!important;}}
@media (max-width:600px){.custom-logo,.site-branding img{width:128px!important;}}
.site-branding .site-title,.site-branding .site-description{display:none;}

/* === Startseite: Seitentitel ausblenden === */
.home .entry-header,.home h1.entry-title{display:none;}

/* === USP-Leiste (Startseite, wp:html-Block): 6 Punkte, 2 Reihen a 3 === */
.mb-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;
  background:var(--mb-sand);border-radius:12px;padding:40px 48px;margin:6px 0;}
@media (max-width:900px){.mb-usp{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mb-usp{grid-template-columns:1fr;}}
.mb-usp-item{display:flex;align-items:center;gap:18px;}
.mb-usp-item svg{width:48px;height:48px;flex:0 0 auto;}
.mb-usp-item strong{display:block;font-size:17px;color:var(--mb-ink);
  letter-spacing:.02em;font-weight:600;}
.mb-usp-item span{display:block;font-size:14px;color:#9A8F84;margin-top:3px;}

/* === "So funktioniert's"-Band (Startseite, wp:html-Block) === */
.mb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  margin:10px 0;}
@media (max-width:760px){.mb-steps{grid-template-columns:1fr;}}
.mb-step{text-align:center;padding:0 12px;}
.mb-step svg{width:66px;height:66px;}
.mb-step .nr{font-family:"DM Serif Display",Georgia,serif;font-size:56px;
  line-height:1;color:var(--mb-gold);}
.mb-step strong{display:block;font-size:18px;color:var(--mb-ink);
  margin-top:10px;font-weight:600;}
.mb-step p{font-size:14.5px;color:#9A8F84;margin-top:8px;line-height:1.55;}
.mb-step .line{width:56px;border-top:2px solid var(--mb-gold);
  margin:14px auto 0;}