/* ============================================================
   Erigo Core — header icon (tt_content.header_icon)
   ============================================================
   Markup: Partials/ContentElements/Header/All.html
     .frame-header.frame-header--has-icon
       .frame-header--icon-{top|left|right|bottom}
       .frame-header--align-{left|center|right}   (tt_content.header_position)
       > .frame-header__icon > img.frame-header__icon-img (1–10, side by side)
       > .frame-header__text
   Layout selectors are wrapped in :where() (zero specificity), so a client
   theme restyles them with any plain class selector. Size and gap are
   tokens: --erigo-header-icon-size / --erigo-header-icon-gap.
   ============================================================ */

:where(.frame-header--has-icon) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--erigo-header-icon-gap, var(--erigo-space-xs, 0.75rem));
}

:where(.frame-header--icon-bottom) {
  flex-direction: column-reverse;
}

:where(.frame-header--icon-left, .frame-header--icon-right) {
  flex-direction: row;
  align-items: center;
}

:where(.frame-header--icon-right) {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* header_position → alignment of the whole icon + text group */
:where(.frame-header--icon-top.frame-header--align-center, .frame-header--icon-bottom.frame-header--align-center) {
  align-items: center;
}

:where(.frame-header--icon-top.frame-header--align-right, .frame-header--icon-bottom.frame-header--align-right) {
  align-items: flex-end;
}

:where(.frame-header--icon-left.frame-header--align-center, .frame-header--icon-right.frame-header--align-center) {
  justify-content: center;
}

:where(.frame-header--icon-left.frame-header--align-right) {
  justify-content: flex-end;
}

:where(.frame-header--icon-right.frame-header--align-right) {
  justify-content: flex-start;
}

:where(.frame-header__icon) {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--erigo-header-icons-gap, var(--erigo-space-2xs, 0.5rem));
  line-height: 0;
}

/* Plain class (not :where) so the base `img { height: auto }` reset does
   not collapse it; resize via --erigo-header-icon-size. */
.frame-header__icon-img {
  display: block;
  width: var(--erigo-header-icon-size, 3rem);
  height: var(--erigo-header-icon-size, 3rem);
  object-fit: contain;
}

:where(.frame-header__text) {
  min-width: 0;
}