/* ==========================================================================
   CONTENT ICON STYLE — one treatment for every decorative icon on the site

   The site already had this rule for the home page's icon wrappers, in
   style.css: "Keep decorative icon wrappers clean: red icons, no tile or circle
   behind them." It flattens .icon-wrap / .pillar-icon / .feature-icon and any
   div carrying an inline background around a Lucide glyph.

   What it could not reach was the per-page icon wrappers whose background is
   declared in a CSS class rather than inline — .crm-ico, .fm-ico, .am2-ico and
   their Arabic twin .amar-ico — plus the two wrappers the card slider added.
   Those kept their tinted tiles and circles, so the same icon looked different
   depending on which page it appeared on.

   This file finishes that job: same flattening, same brand red, and the icon
   sized to read as the card's lead element the way the home page's do (58-73px
   there, against 19-34px on the page templates).

   WHY IT LOADS LAST AND USES !important
   Several page templates print their own <style> block in the document body
   (.crm-ico, .fm-ico and .am2-ico are all declared that way), and a body style
   block outranks a stylesheet in <head> on order. This is the same reason
   st-gold-buttons.css is built the way it is.

   SCOPE — deliberately a hand-checked list, never a blanket selector.
   A rule like ".elementor-icon" or "[class*=ico] " would also strip the
   backgrounds off buttons, slider arrows, the floating contact rail and the
   language switcher. Every class below was confirmed in the browser to be a
   decorative content-icon wrapper, not a control.

   NOT TOUCHED, on purpose: *-btn / *-cta / *-tab-open / *-card-arrow (real
   controls), .st-slider-arrow and .fm-slider-controls (carousel controls),
   .ehc-rail (floating contact buttons), .logo-icon, .st-collapse-icon,
   .ehc-show-badge (a text pill, not an icon container), .amar-node and
   .am2-zone (architecture diagram boxes, where the box IS the content), and
   every card background — only the icon's own container is removed.

   To revert: dequeue 'st-icon-style' in functions.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Remove the container
   -------------------------------------------------------------------------- */
.crm-ico,
.fm-ico,
.am2-ico,
.amar-ico,
.am2-ant,
.st-card-slide-icon,
.st-ar-card-icon {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* These wrappers were sized to their tile (42-48px square). With the tile
     gone the box should shrink to the glyph instead of holding a gap. */
  inline-size: auto !important;
  block-size: auto !important;
  min-inline-size: 0 !important;
  color: var(--primary, #E22222) !important;

  display: inline-flex !important;
  align-items: center;
  /* Logical, so Arabic aligns to the right edge without a second rule. */
  justify-content: flex-start;
  margin-block-end: 14px;   /* icon -> heading, per the 12-18px band */
}

/* --------------------------------------------------------------------------
   2. Enlarge the glyph

   The wrappers above held 19-34px icons. The home page's equivalents run
   58-73px, which is what makes the icon read before the heading rather than as
   punctuation next to it.
   -------------------------------------------------------------------------- */
.crm-ico > svg,      .crm-ico > i,
.fm-ico > svg,       .fm-ico > i,
.am2-ico > svg,      .am2-ico > i,
.amar-ico > svg,     .amar-ico > i,
.am2-ant > svg,      .am2-ant > i,
.st-card-slide-icon > svg,  .st-card-slide-icon > i,
.st-ar-card-icon > svg,     .st-ar-card-icon > i {
  inline-size: 52px !important;
  block-size: 52px !important;
  color: var(--primary, #E22222) !important;
  stroke: currentColor;
  /* Lucide's default 2px stroke looks heavy once the glyph is this large. */
  stroke-width: 1.6;
}

/* --------------------------------------------------------------------------
   3. Cards that hold the icon directly

   .st-cap and the use-case rail card put the glyph in as a direct child rather
   than wrapping it, so there is no container to remove — only a size to fix.
   The card's own background stays: that is the card, not an icon tile.
   -------------------------------------------------------------------------- */
.st-cap > i,
.st-cap > svg,
.st-usecase--rail > i,
.st-usecase--rail > svg {
  flex: 0 0 44px !important;
  inline-size: 44px !important;
  block-size: 44px !important;
  color: var(--primary, #E22222) !important;
  stroke-width: 1.6;
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   4. Responsive

   Large enough to lead the card, never large enough to crowd the heading on a
   phone.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .crm-ico > svg,     .crm-ico > i,
  .fm-ico > svg,      .fm-ico > i,
  .am2-ico > svg,     .am2-ico > i,
  .amar-ico > svg,    .amar-ico > i,
  .am2-ant > svg,     .am2-ant > i,
  .st-card-slide-icon > svg, .st-card-slide-icon > i,
  .st-ar-card-icon > svg,    .st-ar-card-icon > i {
    inline-size: 46px !important;
    block-size: 46px !important;
  }
  .st-cap > i, .st-cap > svg,
  .st-usecase--rail > i, .st-usecase--rail > svg {
    flex: 0 0 40px !important;
    inline-size: 40px !important;
    block-size: 40px !important;
  }
}

@media (max-width: 599px) {
  .crm-ico > svg,     .crm-ico > i,
  .fm-ico > svg,      .fm-ico > i,
  .am2-ico > svg,     .am2-ico > i,
  .amar-ico > svg,    .amar-ico > i,
  .am2-ant > svg,     .am2-ant > i,
  .st-card-slide-icon > svg, .st-card-slide-icon > i,
  .st-ar-card-icon > svg,    .st-ar-card-icon > i {
    inline-size: 40px !important;
    block-size: 40px !important;
  }
  .st-cap > i, .st-cap > svg,
  .st-usecase--rail > i, .st-usecase--rail > svg {
    flex: 0 0 36px !important;
    inline-size: 36px !important;
    block-size: 36px !important;
  }
  .crm-ico, .fm-ico, .am2-ico, .amar-ico, .am2-ant,
  .st-card-slide-icon, .st-ar-card-icon { margin-block-end: 12px; }
}

/* --------------------------------------------------------------------------
   5. Hover

   A small lift only. The container is gone and does not come back on hover,
   and there is no glow — the icon is the element, not a decorated badge.
   -------------------------------------------------------------------------- */
.crm-ico > svg, .fm-ico > svg, .am2-ico > svg, .amar-ico > svg,
.st-card-slide-icon > svg, .st-ar-card-icon > svg,
.st-cap > svg, .st-usecase--rail > svg {
  transition: transform var(--transition, 200ms ease);
}
.crm-card:hover .crm-ico > svg,
.fm-card:hover .fm-ico > svg,
.am2-benefit:hover .am2-ico > svg,
a.st-card-slide:hover .st-card-slide-icon > svg,
.st-ar-card:hover .st-ar-card-icon > svg {
  transform: translateY(-3px) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .crm-ico > svg, .fm-ico > svg, .am2-ico > svg, .amar-ico > svg,
  .st-card-slide-icon > svg, .st-ar-card-icon > svg,
  .st-cap > svg, .st-usecase--rail > svg { transition: none; transform: none; }
}
