/* Hero banner on the docs index page introducing the redesigned FENECON EMS app. */

/* Animatable rotation angle powering the spinning gradient border below. Registering it
   with @property lets the browser interpolate the <angle> smoothly via @keyframes; in
   browsers without @property support the border still renders, just without the spin. */
@property --hero-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes hero-border-spin {
  to {
    --hero-border-angle: 360deg;
  }
}

.doc-hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 2rem;
  padding: 6px;
  border-radius: calc(0.75rem + 6px);
  /* The theme's base stylesheet enables automatic hyphenation (hyphens: auto) for body
     text elsewhere on the site. Since "hyphens" is inherited, disabling it here on the
     hero container itself overrides that for every heading/paragraph/button inside,
     keeping words whole instead of breaking them across lines with a hyphen. */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  /* The card's own navy background lives on .content (below); this element is just a thin
     frame whose background is the rotating cyan/yellow ring, visible in the 6px gap around it. */
  background: conic-gradient(
    from var(--hero-border-angle),
    var(--color-oem-primary, #0fcdf8),
    var(--color-oem-tertiary, #f6ff00),
    var(--color-oem-primary, #0fcdf8)
  );
  animation: hero-border-spin 6s linear infinite;
}

.doc-hero > .content {
  position: relative;
  border-radius: 0.75rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, var(--color-oem-secondary, #00204e) 0%, #0a3566 100%);
  color: #fff;
}

/* Soft blurred glow bleeding outward from behind the frame, using the same gradient and
   rotation so it stays in sync with the crisp ring above. Sits in the frame's own local
   stacking context (via isolation: isolate above), so it never leaks behind other page content. */
.doc-hero::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--hero-border-angle),
    var(--color-oem-primary, #0fcdf8),
    var(--color-oem-tertiary, #f6ff00),
    var(--color-oem-primary, #0fcdf8)
  );
  animation: hero-border-spin 6s linear infinite;
  filter: blur(8px);
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .doc-hero,
  .doc-hero::before {
    animation: none;
  }
}

/* Opt-out modifier: add role="doc-hero doc-hero-no-glow" to reuse the hero elsewhere without
   the rotating glow (e.g. on pages where the animation would be too flashy), keeping only the
   plain navy card. */
.doc-hero.doc-hero-no-glow {
  padding: 0;
  border-radius: 0.75rem;
  background: none;
  animation: none;
}

.doc-hero.doc-hero-no-glow::before {
  content: none;
}

.doc-hero .content > .paragraph {
  margin: 0 0 1rem;
}

.doc-hero .content > .paragraph:last-child {
  margin-bottom: 0;
}

.doc-hero-eyebrow {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--color-oem-tertiary, var(--color-oem-primary, #0fcdf8));
  color: var(--color-oem-secondary, #00204e);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc-hero h2.discrete {
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  border: none;
  color: #fff;
  font-size: 1.5rem;
}

.doc-hero-description p {
  margin: 0;
  max-width: 46rem;
  color: hsla(0, 0%, 100%, 0.9);
}

.doc-hero-actions p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.doc-hero-button {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Selectors are qualified with the .doc-hero ancestor so they reliably outrank
   the theme's base ".doc a { color: ... }" link-color rule (which otherwise
   wins on specificity and leaves the buttons showing the default blue link color). */
.doc-hero .doc-hero-button-primary {
  background: var(--color-oem-primary, #0fcdf8);
  color: var(--color-oem-secondary, #00204e);
}

.doc-hero .doc-hero-button-primary:hover,
.doc-hero .doc-hero-button-primary:focus {
  background: #fff;
  color: var(--color-oem-secondary, #00204e);
}

.doc-hero .doc-hero-button-secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid hsla(0, 0%, 100%, 0.65);
}

.doc-hero .doc-hero-button-secondary:hover,
.doc-hero .doc-hero-button-secondary:focus {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Hide the "open portal" button until the script in head-scripts.hbs (initHeroPortalLink)
   has decided whether to keep the desktop portal link or swap it for the mobile app link,
   avoiding a visible flash of the wrong variant. Always visible if JavaScript is disabled
   (see the noscript fallback in head-meta.hbs), so no-JS users still see the default link. */
#doc-hero-portal-link {
  visibility: hidden;
}

#doc-hero-portal-link.doc-hero-portal-link-ready {
  visibility: visible;
}

@media screen and (max-width: 600px) {
  .doc-hero > .content {
    padding: 1.25rem 1.25rem;
  }

  .doc-hero-actions p {
    flex-direction: column;
  }

  .doc-hero-button {
    text-align: center;
  }
}