/* style.css – BesD-Liste (Frontend + Editor)
   Fix:
   - Erzwingt Icon-Größe über width/height via CSS-Variablen
     => skaliert Mask/SVG garantiert, auch wenn irgendwo font-size/width/height überschrieben werden.
*/

.besd-liste{
  width: 100%;

  /* Defaults: erben */
  --besd-liste-icon-size: 1em;
  --besd-liste-icon-color: currentColor;
}

/* UL reset – wir nutzen eigene Marker */
.besd-liste__ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.besd-liste__li{
  display: flex;
  align-items: flex-start;
  gap: .6em;
  margin: .65em 0;
}

/* Marker links (Frontend/save) */
.besd-liste__mark{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;

  /* Marker-Spalte passt sich Icon-Größe an */
  width: calc(var(--besd-liste-icon-size) + 0.45em);
  line-height: 1.2;
  margin-top: .05em;
}

/* Bullet fallback */
.besd-liste__bullet{
  display: inline-block;
  width: 1em;
  text-align: center;
  line-height: 1.2;
}

/* Text */
.besd-liste__text{
  display: inline;
}

/* ==== WICHTIGER TEIL: Icon erzwingen ==== */
/* Mehr Spezifität als .besd-svg-glyph aus dem Plugin => überschreibt sicher */
.besd-liste .besd-svg-glyph{
  width: var(--besd-liste-icon-size);
  height: var(--besd-liste-icon-size);

  /* Farbe unabhängig vom Text möglich */
  color: var(--besd-liste-icon-color);
}

/* ===== Editor-Layout ===== */

.besd-liste__row{
  display: flex;
  gap: .8em;
  width: 100%;
}

.besd-liste__iconcell{
  flex: 0 0 220px;
  display: flex;
  gap: .6em;
  align-items: flex-start;
}

.besd-liste__icon{
  margin-top: .15em;
}

.besd-liste__iconactions{
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.besd-liste__textcell{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .35em;
}

.besd-liste__itemactions{
  display: flex;
  gap: .35em;
  flex-wrap: wrap;
}

.besd-liste__footer{
  margin-top: .8em;
}

/* ===== Icon Modal ===== */
.besd-liste__iconmodal .components-modal__content{
  padding-top: 12px;
}
.besd-liste__iconmodal-top{
  margin-bottom: 12px;
}
.besd-liste__icongrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
}
.besd-liste__iconbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
}
.besd-liste__iconbtn .besd-svg-glyph{
  width: 22px;
  height: 22px;
}


/* ===== Gutenberg Editor: gleiche Breite wie andere Blöcke + zentriert ===== */
.editor-styles-wrapper .wp-block-besd-besd-liste{
  /* nutzt WP Content-Size, sonst Fallback */
  max-width: var(--wp--style--global--content-size, 840px);
  margin-left: auto;
  margin-right: auto;
}

/* Sicherheit: innerer Wrapper füllt diese Breite sauber aus */
.editor-styles-wrapper .wp-block-besd-besd-liste > .besd-liste{
  width: 100%;
}