/* =======================================================================
   Datei: style.css (optimierte Struktur)

   Ziele dieser Version
   - Bestehendes Layout beibehalten (3 Spalten / Sidebar-Boxen / WPRM)
   - "Karteikarten" als universelles System: .cn-card (Alias zu .rezept-section)
   - 5 optionale Inhalts-Boxen als Varianten (Wissen, Beispiel, Merke, Checkliste, Deep Dive)
   - Full-bleed für Checkbox-Listen automatisch passend zum Karten-Padding

   Hinweis
   - Alte Inhalte mit .rezept-section bleiben kompatibel.
   - Neue Inhalte: im Group-Block einfach Block-Stil (oder Klasse) nutzen.

   Letzter Stand: 2025-12-31
   ======================================================================= */


/* =====================================================
   0) DESIGN TOKENS (Graustufen)
   ===================================================== */

:root{
  --cn-white: #fff;
  --cn-bg: #f3f4f6;
  --cn-border-soft: #E5E7EB;
  --cn-border-strong: #9CA3AF;

  --cn-radius-card: 0.85rem;
  --cn-radius-soft: 14px;

  --cn-card-pad-y: 0.4rem;
  --cn-card-pad-x: 1.8rem;

  --cn-text: #111;
  --cn-text-muted: #555;
  --cn-link: #314F7A;
  --cn-focus: #58789F;
}


/* ===================================================
   1) HEADER
   =================================================== */

/* Kompakter Icon-Button, immer quadratisch */
form.wp-block-search.header-search .wp-block-search__button,
.wp-block-search.header-search .wp-block-search__button{
  width: 2.1rem !important;
  height: 2.1rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icon sauber mittig & etwas größer */
form.wp-block-search.header-search .wp-block-search__button svg,
.wp-block-search.header-search .wp-block-search__button svg{
  width: 1.05rem !important;
  height: 1.05rem !important;
}

/* Schöner Fokus: Feld + Button reagieren */
form.wp-block-search.header-search .wp-block-search__input:focus,
.wp-block-search.header-search .wp-block-search__input:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px currentColor !important;
}

/* Moderner Fokus nur bei Tastatur */
form.wp-block-search.header-search .wp-block-search__input:focus-visible,
.wp-block-search.header-search .wp-block-search__input:focus-visible,
form.wp-block-search.header-search .wp-block-search__button:focus-visible,
.wp-block-search.header-search .wp-block-search__button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px currentColor !important;
}

/* Optional: etwas Abstand zwischen Feld und Button */
form.wp-block-search.header-search,
.wp-block-search.header-search{
  gap: 0.35rem !important;
}


/* ===================================================
   2) REZEPT-TEMPLATE – 3-Spalten-Layout (TT5)
   Klasse am Columns-Block: .three-col-center-max
   =================================================== */

/* Desktop: 3 Spalten als Grid */
@media (min-width: 1024px) {
  .three-col-center-max.is-layout-flex,
  .three-col-center-max.is-layout-constrained {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 900px) minmax(220px, 1fr);
    column-gap: 0 !important;
    gap: 0 !important;
    align-items: flex-start;
  }

  .three-col-center-max > .wp-block-column {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
  }

  .three-col-center-max > .wp-block-column:nth-child(2) {
    padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
    box-sizing: border-box;
  }
}

/* Tablet/Mobile: untereinander – Reihenfolge: Mitte, Links, Rechts */
@media (max-width: 1023.98px) {
  .three-col-center-max {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  .three-col-center-max > .wp-block-column {
    width: 100%;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .three-col-center-max > .wp-block-column:nth-child(2) { order: 1; }
  .three-col-center-max > .wp-block-column:nth-child(1) { order: 2; }
  .three-col-center-max > .wp-block-column:nth-child(3) { order: 3; }
}


/* =====================================================
   3) SPRUNGMARKEN
   ===================================================== */

html { scroll-behavior: smooth; }
:where(h2,h3,h4,[id]) { scroll-margin-top: 96px; }

.nc-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin: 0.3rem;
  padding: .4rem;
  background: var(--cn-bg);
  border: 1px solid var(--cn-border-soft);
  border-radius: var(--cn-radius-soft);
}

.nc-jumps a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cn-border-soft);
  background: var(--cn-white);
  color: #374151;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.2;
}

.nc-jumps a:hover{
  border-color: var(--cn-border-strong);
  color: var(--cn-link);
}

.nc-jumps a:focus-visible{
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}



/* =====================================================
   Bilder – Basis (für alle)
   ===================================================== */
.wp-block-image img,
.wp-block-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
}



/* =====================================================
   Bilder – Opt-in Varianten
   ===================================================== */

/* Rahmen + runde Ecken (nur wenn Klasse gesetzt ist) */
.wp-block-image.bild--rahmen img,
.wp-block-gallery.bild--rahmen img {
  border: 2px solid #9CA3AF;
  border-radius: 15px;
  overflow: hidden;
}

/* Caption (ebenfalls nur bei dieser Variante) */
.wp-block-image.bild--rahmen figcaption,
.wp-block-gallery.bild--rahmen figcaption {
  margin-top: 0.5rem;
  color: #555;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
}





/* =====================================================
   4) INHALTSVERZEICHNIS (LuckyWP TOC)
   CSS: .recipe-toc
   ===================================================== */

.recipe-toc.lwptoc{
  line-height: 1.35;
  margin-top: 0;
}

.recipe-toc .lwptoc_title{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .35rem 0;
}

.recipe-toc .lwptoc_items,
.recipe-toc .lwptoc_item_label,
.recipe-toc .lwptoc_items a{
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
}

.recipe-toc ul,
.recipe-toc ol{
  margin: .35rem 0 0 0;
  padding-left: 1.1rem;
}

.recipe-toc li{
  margin: .12rem 0;
}

.recipe-toc a{ text-decoration: none; }
.recipe-toc a:hover{ text-decoration: underline; }


/* =====================================================
   5) SIDEBAR-BOXEN (links Meta / rechts "Auch interessant")
   CSS: .recipe-meta-panel / .recipe-side-panel
   ===================================================== */

.recipe-meta-panel,
.recipe-side-panel{
  background: var(--cn-bg);
  border-radius: 0.9rem;
  border: 1px solid #dde1e7;
  padding: 1.6rem 1.5rem;
  max-width: 92%;
  margin: 1rem auto;
  box-sizing: border-box;
}

.recipe-meta-panel { font-size: 0.8rem; line-height: 1.5; }
.recipe-side-panel { font-size: 0.9rem; line-height: 1.5; }

.recipe-meta-panel :where(h2,h3,h4),
.recipe-side-panel :where(h2,h3,h4){
  font-size: 0.90rem;
  line-height: 1.25;
  margin: 0 0 0.6rem 0;
}

.recipe-meta-panel :where(p,li),
.recipe-side-panel :where(p,li){
  font-size: 1em;
  line-height: 1.5;
}


/* --- Linke Meta-Box Inhalte --- */

/* Zeit + Portionen */
.recipe-meta-time-servings { margin: 0.1rem 0 0.8rem; }

/* Nährwerte-Bereich */
.recipe-meta-nutrition{
  margin: 0 0 1rem;
  padding: 0.45rem 0 0.55rem;
  border-top: 1px solid #d0d4dc;
  border-bottom: 1px solid #d0d4dc;
}

.recipe-meta-nutrition p{
  margin: 0.05rem 0;
  line-height: 1.2;
}

.recipe-meta-nutrition .recipe-meta-label{
  font-weight: normal;
  color: #333;
  display: inline-block;
  min-width: 7em;
  margin-right: 0.25rem;
}

.recipe-meta-nutrition .recipe-meta-unit{
  font-size: 0.75em;
  color: var(--cn-text-muted);
}

/* Kategorien & Stichworte – Linie und Pillen */
.recipe-meta-category,
.recipe-meta-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--cn-bg);
  border: 1px solid var(--cn-border-soft);
  border-radius: var(--cn-radius-soft);
  padding-top: 0.4rem;
  margin: 0.3rem;
}

.recipe-meta-category .recipe-meta-pills a,
.recipe-meta-tags .recipe-meta-pills a{
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--cn-border-soft);
  background: var(--cn-white);
  color: #374151;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.2;
  margin: 0 0 0.4rem 0.4rem;
}

.recipe-meta-category .recipe-meta-pills a:hover,
.recipe-meta-tags .recipe-meta-pills a:hover{
  border-color: var(--cn-border-strong);
  color: var(--cn-link);
}

.recipe-meta-category .recipe-meta-pills a:focus-visible,
.recipe-meta-tags .recipe-meta-pills a:focus-visible{
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}


/* --- Rechte Sidebar (Auch interessant) – Typo fix --- */

.recipe-side-panel .wp-block-heading{
  font-size: 1.05rem !important;
  line-height: 1.25;
  margin: 0 0 0.75rem 0;
}

.recipe-side-panel .wp-block-post-title{
  font-size: 1.1rem !important;
  line-height: 1.2;
  margin: 0.4rem 0 0.25rem 0;
}

.recipe-side-panel .wp-block-post-excerpt p{
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}


/* --- Jumplist klein + eng (falls aktiv) --- */
.recipe-meta-panel .recipe-meta-jumplist{
  list-style: none;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  margin: 0.5rem 0 0.9rem !important;
  padding: 0 !important;
}

.recipe-meta-panel .recipe-meta-jumplist li{ margin: 0.08rem 0 !important; }

.recipe-meta-panel .recipe-meta-jumplist a{
  text-decoration: none;
  border-bottom: 1px dashed #999;
  font-size: 1.2em !important;
  line-height: inherit !important;
}

.recipe-meta-panel .recipe-meta-jumplist a:hover{ border-bottom-style: solid; }


/* --- Meta-Box sticky + scrollbar (zusammengeführt) --- */
@media (min-width: 1024px){
  .recipe-meta-panel{
    position: sticky;
    top: 1.5rem;
    align-self: start;

    max-height: calc(100vh - 3rem);
    overflow: auto;
  }

  .recipe-meta-panel::-webkit-scrollbar{ width: 10px; }
  .recipe-meta-panel::-webkit-scrollbar-thumb{
    background: var(--cn-border-soft);
    border: 3px solid var(--cn-white);
    border-radius: 999px;
  }
}


/* =====================================================
   6) WPRM Rezeptkarte
   ===================================================== */

.wprm-recipe{
  margin-top: 2rem;
  margin-right: 0 !important;
  margin-bottom: 2rem;
  margin-left: 0 !important;
}

.wprm-recipe-name{
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem) !important;
  line-height: 1.15;
}


/* =====================================================
   7) UNIVERSAL: KARTEN FÜR FLIEßTEXT (Rezepte/Guides/Wissen)
   - Alias: .rezept-section bleibt gültig
   - Gutenberg Block-Style: .is-style-cn-card
   ===================================================== */

.wp-block-group.is-style-cn-card,
.cn-card,
.rezept-section{
  background: var(--cn-white);
  border: 1px solid var(--cn-border-strong);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-card-pad-y) var(--cn-card-pad-x) !important;
  margin: 2rem 0;
  box-sizing: border-box;

  font-size: 1rem;
  line-height: 1.65;
  color: var(--cn-text);

  --cn-pad-x: var(--cn-card-pad-x);
}

.wp-block-group.is-style-cn-card :where(p, ul, ol, blockquote),
.cn-card :where(p, ul, ol, blockquote),
.rezept-section :where(p, ul, ol, blockquote){
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
}

.wp-block-group.is-style-cn-card h2,
.cn-card h2,
.rezept-section h2{
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
  line-height: 1.2;
  margin: 1rem 0 0.75rem 0;
}

.wp-block-group.is-style-cn-card h3,
.cn-card h3,
.rezept-section h3{
  font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.45rem);
  line-height: 1.25;
  margin: 1rem 0 0.5rem 0;
}

.wp-block-group.is-style-cn-card h4,
.cn-card h4,
.rezept-section h4{
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 1rem 0 0.4rem 0;
}


/*Lengende in den Karten*/
.legende {
  background: #f3f4f6;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #374151;
  font-style: italic;
  font-size: 0.9em;
  padding: 0.75rem 1rem;
}

/* Link-Text in der Legende: gleiche Größe wie der Rest */
.legende a,
.legende a:visited {
  color: #374151;
  font-size: inherit !important;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
}

.legende a:hover,
.legende a:focus {
  text-decoration: none;
}








/* =====================================================
   8) ACF Checkbox-Listen (Shortcodes)
   - Full-bleed innerhalb der Karten, automatisch passend
   ===================================================== */

.rezept-checkbox-liste{
  font-size: 1rem;
  line-height: 1.4;
  margin: 0.35rem 0 0 0;
  padding-left: 0 !important;
}

.rezept-checkbox-liste li{ margin: 0.12rem 0; }

.rezept-checkbox-liste a{ text-decoration: none; }
.rezept-checkbox-liste a:hover{ text-decoration: underline; }

.wp-block-group.is-style-cn-card .rezept-checkbox-liste,
.cn-card .rezept-checkbox-liste,
.rezept-section .rezept-checkbox-liste{
  margin-left: calc(-1 * var(--cn-pad-x)) !important;
  margin-right: calc(-1 * var(--cn-pad-x)) !important;
  width: calc(100% + (2 * var(--cn-pad-x))) !important;
  max-width: none !important;
}


/* =====================================================
   9) QUELLENLISTE – block-liste-quelle
   ===================================================== */

.block-liste-quelle{
  --blq-text-size: 0.9rem;
  --blq-link-size: 1rem;
  --blq-line-height: 1.7;
  --blq-item-gap: 0.45em;

  font-size: var(--blq-text-size);
  line-height: var(--blq-line-height);
  font-style: italic;
}

.block-liste-quelle > li{
  margin: 0 0 var(--blq-item-gap) 0;
  font-size: var(--blq-text-size);
  line-height: var(--blq-line-height);
}

.block-liste-quelle > li::marker{ font-size: var(--blq-text-size); }

.block-liste-quelle a,
.block-liste-quelle a:visited{
  font-size: var(--blq-link-size);
  line-height: var(--blq-line-height);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  overflow-wrap: anywhere;
  word-break: normal;
}

.block-liste-quelle a:hover,
.block-liste-quelle a:focus-visible{
  text-decoration-thickness: 0.12em;
}

.block-liste-quelle ul,
.block-liste-quelle ol{
  margin-top: 0.35em;
}




/* =====================================================
   9) QUELLENLISTE – block-liste-spalte
   ===================================================== */

.block-liste-spalte{
  --blq-text-size: 1rem;
  --blq-link-size: 1rem;
  --blq-line-height: 1.1;
  --blq-item-gap: 0.45em;

  font-size: var(--blq-text-size);
  line-height: var(--blq-line-height);
  font-style: normal;
}

.block-liste-spalte > li{
  margin: 0 0 var(--blq-item-gap) 0;
  font-size: var(--blq-text-size);
  line-height: var(--blq-line-height);
}

.block-liste-spalte > li::marker{ font-size: var(--blq-text-size); }

.block-liste-spalte a,
.block-liste-spalte a:visited{
  font-size: var(--blq-link-size);
  line-height: var(--blq-line-height);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  overflow-wrap: anywhere;
  word-break: normal;
}

.block-liste-spalte a:hover,
.block-liste-spalte a:focus-visible{
  text-decoration-thickness: 0.12em;
}

.block-liste-spalte ul,
.block-liste-spalte ol{
  margin-top: 0.35em;
}









/* =====================================================
   10) OPTIONALE BOXEN (5 Varianten)
   - Gutenberg Block-Styles (core/group)
     .is-style-cn-wissen, .is-style-cn-beispiel, .is-style-cn-merke, .is-style-cn-checkliste
   - Deep Dive: core/details
     .is-style-cn-deepdive
   ===================================================== */

/* --- Spezialboxen: edel + Blicklenkung (nur diese Regeln geändert) ---
   Anforderungen:
   - leicht farblicher, entsättigter Hintergrund
   - Umrandung: gleicher Farbton, minimal kräftiger, durchgezogen
   - links: dicker Streifen (stärker gesättigt), bei ALLEN Boxen
   - Text-Kontrast: #374151
*/

/* Basis (gilt für Wissen/Beispiel/Merke/Checkliste) */
.wp-block-group.is-style-cn-wissen,
.wp-block-group.is-style-cn-beispiel,
.wp-block-group.is-style-cn-merke,
.wp-block-group.is-style-cn-checkliste{
  position: relative;
  border-radius: var(--cn-radius-soft);
  padding: 0.9rem 1rem 0.9rem 1.2rem; /* etwas mehr links */
  margin: 1rem 0;
  box-sizing: border-box;
  font-size: 0.95em;
  line-height: 1.6;
  color: #374151;

  /* pro Variante gesetzt */
  background: var(--cn-box-bg, var(--cn-bg));
  border: 1px solid var(--cn-box-border, var(--cn-border-soft));
}

/* Dicker linker Streifen bei ALLEN Varianten */
.wp-block-group.is-style-cn-wissen::before,
.wp-block-group.is-style-cn-beispiel::before,
.wp-block-group.is-style-cn-merke::before,
.wp-block-group.is-style-cn-checkliste::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 9px;
  background: var(--cn-box-stripe, var(--cn-border-strong));
  border-radius: var(--cn-radius-soft) 0 0 var(--cn-radius-soft);
}

/* Abstand Überschrift → erster Text in den Boxen */
.wp-block-group.is-style-cn-wissen :where(h2,h3,h4,.wp-block-heading) + :where(p,ul,ol),
.wp-block-group.is-style-cn-beispiel :where(h2,h3,h4,.wp-block-heading) + :where(p,ul,ol),
.wp-block-group.is-style-cn-merke :where(h2,h3,h4,.wp-block-heading) + :where(p,ul,ol),
.wp-block-group.is-style-cn-checkliste :where(h2,h3,h4,.wp-block-heading) + :where(p,ul,ol){
  margin-top: 0.3rem !important;
}


/* Spezialboxen: Innenabstände kompakter (wie Standard-Karten) */

/* Gutenberg-Block-Gap innerhalb der Gruppe reduzieren (wirkt oft stärker als Margins) */
.wp-block-group.is-style-cn-wissen,
.wp-block-group.is-style-cn-beispiel,
.wp-block-group.is-style-cn-merke,
.wp-block-group.is-style-cn-checkliste{
  --wp--style--block-gap: 0.55rem;
}

/* Kein Extra-Abstand oben/unten durch erstes/letztes Element */
.wp-block-group.is-style-cn-wissen > :first-child,
.wp-block-group.is-style-cn-beispiel > :first-child,
.wp-block-group.is-style-cn-merke > :first-child,
.wp-block-group.is-style-cn-checkliste > :first-child{
  margin-top: 0 !important;
}

.wp-block-group.is-style-cn-wissen > :last-child,
.wp-block-group.is-style-cn-beispiel > :last-child,
.wp-block-group.is-style-cn-merke > :last-child,
.wp-block-group.is-style-cn-checkliste > :last-child{
  margin-bottom: 0 !important;
}

/* Überschriften in Boxen: weniger Luft */
.wp-block-group.is-style-cn-wissen :where(h2,h3,h4,.wp-block-heading),
.wp-block-group.is-style-cn-beispiel :where(h2,h3,h4,.wp-block-heading),
.wp-block-group.is-style-cn-merke :where(h2,h3,h4,.wp-block-heading),
.wp-block-group.is-style-cn-checkliste :where(h2,h3,h4,.wp-block-heading){
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

/* Absätze/Listen in Boxen: kompakter */
.wp-block-group.is-style-cn-wissen :where(p, ul, ol),
.wp-block-group.is-style-cn-beispiel :where(p, ul, ol),
.wp-block-group.is-style-cn-merke :where(p, ul, ol),
.wp-block-group.is-style-cn-checkliste :where(p, ul, ol){
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
}
/* 1) WISSEN – blau (noch einen Tick kräftiger) */
.wp-block-group.is-style-cn-wissen{
  --cn-box-bg:     linear-gradient(180deg, rgba(79,111,191,0.095), rgba(79,111,191,0) 70px), #fff;
  --cn-box-border: #9FB0DE;
  --cn-box-stripe: #A3B2DA;
}

/* 2) BEISPIEL – lila */
.wp-block-group.is-style-cn-beispiel{
  --cn-box-bg:     linear-gradient(180deg, rgba(106,76,203,0.09), rgba(106,76,203,0) 70px), #fff;
  --cn-box-border: #B2A4E4;
  --cn-box-stripe: #C2B7E6;
}

/* 3) MERKE – rot */
.wp-block-group.is-style-cn-merke{
  --cn-box-bg:     linear-gradient(180deg, rgba(184,75,87,0.085), rgba(184,75,87,0) 70px), #fff;
  --cn-box-border: #D39CA4;
  --cn-box-stripe: #E0B9BC;
}

/* 4) CHECKLISTE – grün */
.wp-block-group.is-style-cn-checkliste{
  --cn-box-bg:     linear-gradient(180deg, rgba(47,125,87,0.085), rgba(47,125,87,0) 70px), #fff;
  --cn-box-border: #98C8AA;
  --cn-box-stripe: #B5D2C4;
}



/* Checkliste: Häkchenlisten */
.wp-block-group.is-style-cn-checkliste ul{
  list-style: none;
  padding-left: 0;
  margin: 0.6rem 0 0 0;
}
.wp-block-group.is-style-cn-checkliste li{
  position: relative;
  padding-left: 1.45rem;
  margin: 0.35rem 0;
}
.wp-block-group.is-style-cn-checkliste li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: var(--cn-box-stripe);
  font-weight: 800;
}


/* 5) DEEP DIVE – Details/Accordion */
.wp-block-details.is-style-cn-deepdive{
  background: var(--cn-white);
  border: 1px solid var(--cn-border-soft);
  border-radius: var(--cn-radius-soft);
  padding: 0.6rem 0.8rem;
  margin: 1rem 0;
}
.wp-block-details.is-style-cn-deepdive summary{
  cursor: pointer;
  font-weight: 600;
  color: #444;
}
.wp-block-details.is-style-cn-deepdive summary::-webkit-details-marker{ display:none; }