/* ============================================================
   Client Support — theme overrides (progressive enhancement)
   ------------------------------------------------------------
   support.css defaults the hero intro elements to opacity:0 and
   only reveals them when <html> gains the `support-motion-ready`
   class (added by support.js). If JS fails to load, the hero
   would stay invisible forever. These rules make the hero visible
   by DEFAULT; the animation still plays when motion-ready is set,
   because support.css's `html.support-motion-ready ...` rules win
   on specificity. No visual change when JS is present.
   ============================================================ */
.support-hero .eyebrow,
.support-hero h1,
.support-hero .lead,
.support-hero-buttons,
.support-routing-panel {
  opacity: 1;
  transform: none;
}

/* When JS is available, hand control back to support.css so the
   entrance animation runs from its opacity:0 start state. */
html.support-motion-ready .support-hero .eyebrow,
html.support-motion-ready .support-hero h1,
html.support-motion-ready .support-hero .lead,
html.support-motion-ready .support-hero-buttons {
  opacity: 0;
}
html.support-motion-ready .support-routing-panel {
  opacity: 0;
}

/* Service-area icons: render the Font Awesome iconpicker glyph in
   the same box the static design used for its unicode glyph. */
.service-area-card .area-icon .nxtzen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.service-area-card .area-icon .nxtzen-icon i {
  font-size: inherit;
  line-height: 1;
}

/* ------------------------------------------------------------------
   Responsive fix (production prep): the support-header is a fixed-height
   space-between row (logo + nav + Create Ticket action). On very narrow
   phones (<=430px) the action button cannot fit and overflows the viewport.
   Allow the header to wrap at small widths only. Desktop layout untouched. */
@media (max-width: 430px) {
  .support-header .container {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .support-header-actions { flex-wrap: wrap; }
}