/*
Theme Name:   Hello Elementor Child – Beauty Blog
Theme URI:    https://beautycenter-me.de/
Description:  Child-Theme für Hello Elementor. Erzeugt ein Neil-Patel-ähnliches Blog-Layout mit zweispaltiger Ansicht, klebriger Sidebar, automatischem Inhaltsverzeichnis, letzten Artikeln, Autorenbox und Teilen-Buttons.
Author:       Beauty Center ME
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child-beautyblog
*/

/* =========================================================
   0. Design-Variablen  ->  HIER zentral anpassen
   ========================================================= */
:root{
  --bc-accent:        #b76e79;   /* Markenfarbe (Rosé/Mauve – passt zu Beauty). Hier deine Farbe eintragen */
  --bc-accent-dark:   #9c5560;
  --bc-text:          #1f2329;
  --bc-text-soft:     #5b6470;
  --bc-line:          #e7e9ee;
  --bc-bg-soft:       #f7f5f6;
  --bc-radius:        14px;
  --bc-content-width: 760px;
  --bc-sidebar-width: 320px;
  --bc-gap:           48px;
  --bc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   1. Grundgerüst – zweispaltiges Layout
   ========================================================= */
.bc-single{
  font-family: var(--bc-font);
  color: var(--bc-text);
  background: #fff;
}
.bc-single *{ box-sizing: border-box; }

.bc-wrap{
  max-width: calc(var(--bc-content-width) + var(--bc-sidebar-width) + var(--bc-gap) + 80px);
  margin: 0 auto;
  padding: 0 40px;
}

.bc-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bc-sidebar-width);
  gap: var(--bc-gap);
  align-items: start;
  padding: 40px 0 80px;
}

/* =========================================================
   2. Breadcrumbs + Kopfbereich
   ========================================================= */
.bc-breadcrumbs{
  font-size: 14px;
  color: var(--bc-text-soft);
  padding: 22px 0 0;
}
.bc-breadcrumbs a{ color: var(--bc-text-soft); text-decoration: none; }
.bc-breadcrumbs a:hover{ color: var(--bc-accent); }
.bc-breadcrumbs span[aria-current]{ color: var(--bc-text); }
.bc-breadcrumbs .sep{ margin: 0 8px; opacity: .5; }

.bc-cat-pill{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bc-accent);
  background: var(--bc-bg-soft);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.bc-title{
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  color: var(--bc-text);
}

/* Autoren-/Meta-Zeile */
.bc-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 26px;
  border-bottom: 1px solid var(--bc-line);
  margin-bottom: 32px;
}
.bc-meta img.bc-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.bc-meta .bc-author-name{ font-weight: 700; font-size: 15px; }
.bc-meta .bc-meta-line{ font-size: 13.5px; color: var(--bc-text-soft); margin-top: 2px; }
.bc-meta .dot{ margin: 0 7px; opacity: .5; }

/* Beitragsbild */
.bc-featured{
  margin: 0 0 36px;
  border-radius: var(--bc-radius);
  overflow: hidden;
}
.bc-featured img{ width: 100%; height: auto; display: block; }

/* =========================================================
   3. Typografie des Beitrags
   ========================================================= */
.bc-content{
  font-size: 18px;
  line-height: 1.78;
  color: #2a2f37;
}
.bc-content > *{ max-width: var(--bc-content-width); }
.bc-content p{ margin: 0 0 1.35em; }

.bc-content h2{
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 2.2em 0 .7em;
  padding-top: .2em;
  scroll-margin-top: 100px;   /* damit Anker nicht unter Sticky-Header verschwinden */
}
.bc-content h3{
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  margin: 1.8em 0 .6em;
  scroll-margin-top: 100px;
}
.bc-content h2::after{
  content:"";
  display:block;
  width: 56px; height: 4px;
  background: var(--bc-accent);
  border-radius: 4px;
  margin-top: 14px;
}
.bc-content a{ color: var(--bc-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.bc-content a:hover{ color: var(--bc-accent); }
.bc-content ul, .bc-content ol{ margin: 0 0 1.4em; padding-left: 1.4em; }
.bc-content li{ margin-bottom: .6em; }
.bc-content ul li::marker{ color: var(--bc-accent); }
.bc-content strong{ color: var(--bc-text); }
.bc-content img{ border-radius: var(--bc-radius); height: auto; }
.bc-content blockquote{
  border-left: 4px solid var(--bc-accent);
  background: var(--bc-bg-soft);
  margin: 1.6em 0;
  padding: 18px 24px;
  border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
  font-style: italic;
  color: var(--bc-text-soft);
}

/* =========================================================
   4. Teilen-Buttons
   ========================================================= */
.bc-share{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--bc-line);
}
.bc-share .bc-share-label{ font-weight: 700; font-size: 14px; margin-right: 4px; }
.bc-share a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bc-bg-soft);
  color: var(--bc-text-soft);
  transition: .18s;
}
.bc-share a:hover{ background: var(--bc-accent); color: #fff; transform: translateY(-2px); }
.bc-share svg{ width: 17px; height: 17px; fill: currentColor; }

/* =========================================================
   5. Autorenbox (unten)
   ========================================================= */
.bc-authorbox{
  display: flex;
  gap: 20px;
  margin: 44px 0 0;
  padding: 28px;
  background: var(--bc-bg-soft);
  border-radius: var(--bc-radius);
}
.bc-authorbox img{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bc-authorbox .bc-ab-name{ font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.bc-authorbox .bc-ab-bio{ font-size: 15px; color: var(--bc-text-soft); line-height: 1.6; }

/* =========================================================
   6. SIDEBAR
   ========================================================= */
.bc-sidebar{ position: sticky; top: 90px; align-self: start; }
.bc-widget{
  background: #fff;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  padding: 22px 22px 24px;
  margin-bottom: 26px;
}
.bc-widget-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bc-text-soft);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.bc-widget-title::before{
  content:""; width: 18px; height: 3px; background: var(--bc-accent); border-radius: 3px;
}

/* --- Inhaltsverzeichnis --- */
#bc-toc-widget{ display: none; }            /* per JS eingeblendet, wenn Überschriften existieren */
.bc-toc-list{ list-style: none; margin: 0; padding: 0; }
.bc-toc-list li{ margin: 0; }
.bc-toc-list a{
  display: block;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--bc-text-soft);
  text-decoration: none;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  transition: .15s;
}
.bc-toc-list a:hover{ color: var(--bc-text); }
.bc-toc-list a.bc-toc-sub{ padding-left: 28px; font-size: 13.5px; }
.bc-toc-list a.is-active{
  color: var(--bc-accent-dark);
  font-weight: 600;
  border-left-color: var(--bc-accent);
}

/* --- Letzte Artikel --- */
.bc-recent{ list-style: none; margin: 0; padding: 0; }
.bc-recent li{ margin-bottom: 16px; }
.bc-recent li:last-child{ margin-bottom: 0; }
.bc-recent a{ display: flex; gap: 12px; text-decoration: none; align-items: center; }
.bc-recent .bc-thumb{
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 10px; object-fit: cover; background: var(--bc-bg-soft);
}
.bc-recent .bc-rtitle{
  font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--bc-text);
}
.bc-recent a:hover .bc-rtitle{ color: var(--bc-accent-dark); }
.bc-recent .bc-rdate{ font-size: 12.5px; color: var(--bc-text-soft); margin-top: 3px; }

/* --- CTA-Box --- */
.bc-cta{
  background: linear-gradient(160deg, var(--bc-accent), var(--bc-accent-dark));
  color: #fff;
  border: none;
  text-align: center;
}
.bc-cta .bc-widget-title{ color: rgba(255,255,255,.85); }
.bc-cta .bc-widget-title::before{ background: #fff; }
.bc-cta h4{ font-size: 19px; margin: 0 0 8px; font-weight: 800; }
.bc-cta p{ font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; opacity: .92; }
.bc-cta .bc-btn{
  display: inline-block;
  background: #fff;
  color: var(--bc-accent-dark);
  font-weight: 700; font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: .18s;
}
.bc-cta .bc-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* =========================================================
   7. Mobiles Inhaltsverzeichnis (einklappbar, über dem Text)
   ========================================================= */
.bc-toc-mobile{ display: none; margin: 0 0 30px; }
.bc-toc-mobile details{
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-bg-soft);
}
.bc-toc-mobile summary{
  list-style: none; cursor: pointer;
  padding: 16px 20px; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between;
}
.bc-toc-mobile summary::-webkit-details-marker{ display: none; }
.bc-toc-mobile summary::after{ content:"+"; font-size: 22px; color: var(--bc-accent); }
.bc-toc-mobile details[open] summary::after{ content:"–"; }
.bc-toc-mobile .bc-toc-list{ padding: 0 20px 14px; }

/* =========================================================
   8. Responsiv
   ========================================================= */
@media (max-width: 1024px){
  .bc-wrap{ padding: 0 24px; }
  .bc-layout{ grid-template-columns: 1fr; gap: 0; }
  .bc-sidebar{ position: static; }
  .bc-sidebar #bc-toc-widget{ display: none !important; }  /* Desktop-TOC ausblenden */
  .bc-toc-mobile{ display: block; }
  .bc-content > *{ max-width: 100%; }
  /* Sidebar-Reste (Letzte Artikel / CTA) unter den Beitrag schieben */
  .bc-sidebar{ margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 640px){
  .bc-wrap{ padding: 0 18px; }
  .bc-content{ font-size: 17px; }
  .bc-title{ font-size: 28px; }
  .bc-sidebar{ grid-template-columns: 1fr; }
  .bc-authorbox{ flex-direction: column; text-align: center; align-items: center; }
}