/*
 * eggb-base.css — EggBlocks shared component shapes + Bootstrap resets
 *
 * Layer 1: structure only.
 * NO colors, NO fonts, NO decorative values.
 * All blocks link this file; themes override it.
 * Requires Bootstrap 5 (cegg-bootstrap5) to be loaded first.
 *
 * Contents:
 *   0. Bootstrap/theme-proofing resets (.eggb-block-title heading reset)
 *   1. CSS tokens (structural defaults only)
 *   2. .eggb-btn          — CTA button
 *   3. .eggb-chip         — feature tag / keyword badge
 *   4. .eggb-award        — ink-stamp award badge
 *   5. .eggb-label        — tiny uppercase tracking label (score metadata, score denominator)
 *   6. .eggb-section-title — section heading label (Pros / Cons / Best for / Specs)
 *   7. .eggb-price + modifiers — shared price typography
 *   8. .eggb-rule         — hairline separator
 *   9. .eggb-score-num + .eggb-score-denom — typographic score pair
 *  10. .eggb-item-list    — icon + text list (pros, cons, features, steps)
 *  11. .eggb-step-badge   — numbered circle badge (step counters, section headers)
 *  12. .eggb-timeline-col + .eggb-timeline-connector — vertical step column + connector line
 */


/* ─────────────────────────────────────────────
   0. Bootstrap / theme-proofing resets
   Anchor on .eggb-block so no theme selector can
   outspecify us by adding ancestor classes to ul/li.
───────────────────────────────────────────── */

.eggb-block.eggb-block p {
  margin-top: 0;
  margin-bottom: 0;
}

.eggb-block .eggb-item-list {
  padding-left: 0;
  margin-bottom: 0;
}

/* Shared heading reset — theme-proofs h1–h6 used as block titles.
   Blocks add .eggb-block-title to their heading element, then
   set font-size / font-weight / line-height via their own class. */
.cegg5-container .eggb-block .eggb-block-title,
.cegg5-container .eggb-block h1.eggb-block-title,
.cegg5-container .eggb-block h2.eggb-block-title,
.cegg5-container .eggb-block h3.eggb-block-title,
.cegg5-container .eggb-block h4.eggb-block-title,
.cegg5-container .eggb-block h5.eggb-block-title,
.cegg5-container .eggb-block h6.eggb-block-title {
  margin: 0;
  padding: 0;
  max-width: none;
  color: var(--eggb-text, inherit);
  text-decoration: none;
  font-size: var(--eggb-block-title-size, 1.25rem);
  font-weight: var(--eggb-block-title-weight, 700);
  line-height: 1.3;
}

/* Compact title for panel/card blocks. */
.cegg5-container .eggb-block .eggb-block-title--sm,
.cegg5-container .eggb-block h1.eggb-block-title--sm,
.cegg5-container .eggb-block h2.eggb-block-title--sm,
.cegg5-container .eggb-block h3.eggb-block-title--sm,
.cegg5-container .eggb-block h4.eggb-block-title--sm,
.cegg5-container .eggb-block h5.eggb-block-title--sm,
.cegg5-container .eggb-block h6.eggb-block-title--sm {
  font-size: var(--eggb-text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--eggb-text);
}

.eggb-block .eggb-item-list li {
  margin-bottom: 0;
}

.cegg5-container .eggb-block *:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--eggb-accent);
  outline-offset: 2px;
}

.cegg5-container .eggb-btn {
  border-radius: var(--eggb-radius);
}

.cegg5-container .eggb-block {
  --bs-border-color: var(--eggb-border);
}


/* ─────────────────────────────────────────────
   1. CSS tokens
   Structural fallbacks only. Theme files set
   real values; Gutenberg sidebar writes
   per-instance overrides as inline styles.
───────────────────────────────────────────── */

.eggb-block {
  /* Accent — buttons, score numeral, key borders */
  --eggb-accent:      currentColor;

  /* Filled CTA text color */
  --eggb-btn-filled-fg: #fff;

  /* Surface — panel / card background */
  --eggb-surface:     transparent;

  /* Border — hairlines, dividers */
  --eggb-border:      currentColor;

  /* Muted text — store labels, secondary copy */
  --eggb-text-muted:  currentColor;

  /* Shape tokens — themes override these */
  --eggb-radius:      0px;
  --eggb-radius-chip: 2px;
  --eggb-border-w:    1px;
}


/* ─────────────────────────────────────────────
   2. .eggb-btn — CTA button
   Outline style, inherits currentColor.
   Theme sets radius, border-width, font.
───────────────────────────────────────────── */

.eggb-btn {
  --eggb-btn-bg: transparent;
  --eggb-btn-border: var(--eggb-accent);
  --eggb-btn-fg: var(--eggb-accent);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .375em;
  padding:         .45em 1em;
  border:          var(--eggb-border-w) solid var(--eggb-btn-border);
  border-radius:   var(--eggb-radius);
  background:      var(--eggb-btn-bg);
  color:           var(--eggb-btn-fg);
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1.4;
  font-size:       .875em;
}

.cegg5-container .eggb-block .eggb-btn,
.cegg5-container .eggb-block .eggb-btn:hover,
.cegg5-container .eggb-block .eggb-btn:visited,
.cegg5-container .eggb-block .eggb-btn:focus,
.cegg5-container .eggb-block .eggb-btn:active {
  background: var(--eggb-btn-bg);
  border-color: var(--eggb-btn-border);
  color: var(--eggb-btn-fg);
  text-decoration: none;
}

.cegg5-container .eggb-block .eggb-btn:hover {
  text-decoration: none;
}

.eggb-btn:hover {
  --eggb-btn-bg: var(--eggb-accent);
  --eggb-btn-fg: var(--eggb-btn-filled-fg);
}

/* Filled modifier — solid accent background, surface text */
.eggb-btn.eggb-btn--filled {
  --eggb-btn-bg: var(--eggb-accent);
  --eggb-btn-border: var(--eggb-accent);
  --eggb-btn-fg: var(--eggb-btn-filled-fg);
}

.eggb-btn.eggb-btn--filled:hover {
  opacity: .88;
  --eggb-btn-bg: var(--eggb-accent);
  --eggb-btn-fg: var(--eggb-btn-filled-fg);
}

/* Text-link modifier — no border, no background */
.eggb-btn--text {
  --eggb-btn-bg: transparent;
  --eggb-btn-border: transparent;
  --eggb-btn-fg: var(--eggb-accent);
  border:     none;
  padding-left:  0;
  padding-right: 0;
}

.eggb-btn--text:hover {
  --eggb-btn-bg: transparent;
  --eggb-btn-fg: var(--eggb-accent);
  text-decoration: underline;
}


/* ─────────────────────────────────────────────
   3. .eggb-chip — feature tag / keyword badge
   Square corners, border + opacity.
   Theme controls radius, opacity, font-weight.
───────────────────────────────────────────── */

.eggb-chip {
  display:          inline-block;
  padding:          .25em .65em;
  border:           var(--eggb-border-w) solid var(--eggb-chip-border, currentColor);
  border-radius:    var(--eggb-radius-chip);
  background:       var(--eggb-chip-bg, transparent);
  color:            var(--eggb-chip-color, currentColor);
  font-size:        .75em;
  line-height:      1.5;
  white-space:      nowrap;
}


/* Signal-color modifiers — wire shared components to theme tokens.
   Theme defines --eggb-positive / --eggb-negative. */
.eggb-chip--positive {
  --eggb-chip-border: var(--eggb-positive, currentColor);
  --eggb-chip-color:  var(--eggb-positive, currentColor);
}
.eggb-chip--negative {
  --eggb-chip-border: var(--eggb-negative, currentColor);
  --eggb-chip-color:  var(--eggb-negative, currentColor);
}

.eggb-section-title--positive { color: var(--eggb-positive, currentColor); }
.eggb-section-title--negative { color: var(--eggb-negative, currentColor); }
.eggb-section-title--muted    { color: var(--eggb-text-muted, currentColor); }

.eggb-item-icon--positive { color: var(--eggb-positive, currentColor); }
.eggb-item-icon--negative { color: var(--eggb-negative, currentColor); }

.eggb-marker--positive { color: var(--eggb-positive, currentColor); font-weight: 600; }
.eggb-marker--negative { color: var(--eggb-negative, currentColor); font-weight: 600; }


/* Editorial type modifiers — set --eggb-signal-color for any block to consume.
   Theme defines --eggb-note/tip/warning/insight. */
.eggb--note    { --eggb-signal-color: var(--eggb-note,    currentColor); }
.eggb--tip     { --eggb-signal-color: var(--eggb-tip,     currentColor); }
.eggb--warning { --eggb-signal-color: var(--eggb-warning, currentColor); }
.eggb--insight { --eggb-signal-color: var(--eggb-insight, currentColor); }


/* ─────────────────────────────────────────────
   4. .eggb-award — award badge
   Theme sets bg, border, color.
   Default (base): outline only via currentColor.
   Filled variant: set --eggb-award-bg in theme.
───────────────────────────────────────────── */

.eggb-award {
  display:        inline-flex;
  align-items:    center;
  gap:            .3em;
  padding:        .2rem .55rem;
  border:         1.5px solid var(--eggb-award-border, currentColor);
  border-radius:  var(--eggb-radius-chip);
  background:     var(--eggb-award-bg, transparent);
  color:          var(--eggb-award-color, currentColor);
  font-size:      .6875em;
  line-height:    1.5;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space:    nowrap;
}


/* ─────────────────────────────────────────────
   5. .eggb-label — tiny uppercase tracking label
   Used for "Score", "Editor's note", metadata.
   No borders. Theme sets opacity / color.
───────────────────────────────────────────── */

.eggb-label {
  display:        block;
  font-size:      .6em;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity:        .5;
  line-height:    1.2;
}


/* ─────────────────────────────────────────────
   6. .eggb-section-title — section heading label
   Used for "Pros", "Cons", "Best for", "Specs", etc.
   Larger and bolder than .eggb-label.
   Color comes from the block via a modifier class
   or a local rule — base sets shape only.
───────────────────────────────────────────── */

.eggb-section-title {
  display:        block;
  font-size:      .6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height:    1.2;
  margin-bottom:  .5rem;
}


/* ─────────────────────────────────────────────
   7. .eggb-price — shared price typography
   Size modifiers cover most block needs;
   color stays theme-driven.
───────────────────────────────────────────── */

.eggb-price {
  font-weight:          700;
  line-height:          1;
  letter-spacing:       -.02em;
  font-variant-numeric: tabular-nums;
  white-space:          nowrap;
}

.eggb-price--lg { font-size: 1.125rem; }
.eggb-price--md { font-size: 1rem; }
.eggb-price--sm { font-size: .9375rem; }

.eggb-price-old {
  text-decoration:      line-through;
  font-variant-numeric: tabular-nums;
  white-space:          nowrap;
}

.eggb-price-meta {
  line-height: 1.35;
}


/* ─────────────────────────────────────────────
   8. .eggb-rule — hairline separator
   Renders as a horizontal line via border-top.
   Use <hr class="eggb-rule"> or a <div>.
───────────────────────────────────────────── */

.eggb-rule {
  border:     0;
  border-top: var(--eggb-border-w) solid currentColor;
  opacity:    .15;
  margin:     0;
}


/* ─────────────────────────────────────────────
   10. .eggb-item-list — icon + text list
   Used for pros/cons, feature lists, how-to steps.
   Resets list styles itself — no need for list-unstyled or mb-0.
   Icon color comes from a modifier or local rule.
───────────────────────────────────────────── */

.eggb-item-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .375rem;
}

.eggb-item-list li {
  display:     flex;
  align-items: flex-start;
  gap:         .5rem;
  line-height: 1.4;
}

.eggb-item-list .eggb-item-icon {
  flex-shrink:  0;
  margin-top:   .15em; /* optical alignment with first text line */
}

.eggb-item-list .eggb-icon {
  width:  1em;
  height: 1em;
}

.eggb-item-list .eggb-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}


/* ─────────────────────────────────────────────
   11. .eggb-score-num + .eggb-score-denom
   Typographic score pair — large numeral + denominator.
   No SVG rings. Theme sets font-family, font-size.
───────────────────────────────────────────── */

.eggb-score-num {
  display:        block;
  font-size:      2.25rem;
  font-weight:    700;
  line-height:    1;
  letter-spacing: -.04em;
  text-align:     center;
  color:          var(--eggb-accent);
}

.eggb-score-denom {
  display:        block;
  font-size:      .75em;
  letter-spacing: .04em;
  opacity:        .4;
  line-height:    1.2;
  text-align:     center;
}


/* ─────────────────────────────────────────────
   10. .eggb-step-badge — numbered circle badge
   Used for step counters in step lists and
   section headers. Accent-tinted circle with
   number inside. Theme controls accent color.
───────────────────────────────────────────── */

.eggb-step-badge {
  width:           2rem;
  height:          2rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   9999px;
  background:      color-mix(in srgb, var(--eggb-accent) 12%, transparent);
  color:           var(--eggb-accent);
  border:          var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 30%, transparent);
  font-weight:     700;
  font-size:       .75rem;
  letter-spacing:  .08em;
  flex-shrink:     0;
}


/* ─────────────────────────────────────────────
   11. .eggb-timeline-col + .eggb-timeline-connector
   Vertical step column used in timeline layouts
   (step-list, methodology, criteria).
   Column centers the badge and stretches for connector;
   connector is a 1px accent-tinted line that fills the gap.
───────────────────────────────────────────── */

.eggb-timeline-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex-shrink:    0;
  width:          2rem;
}

.eggb-timeline-connector {
  width:      1px;
  flex-grow:  1;
  background: color-mix(in srgb, var(--eggb-accent) 20%, transparent);
}