/* ===== Hero critical CSS ===== */

/* Tokens used below */
:root {
    --h1_font_size: 3.5em;
    --h1_line_height: 1.1;
    --h1_font_size_mobile: 2.5em;
    --h1_line_height_mobile: 1.1;
    --text_normal_font_size: 1em;
    --text_normal_line_height: 1.5;
    --imc_orange: rgba(255, 70, 55, 1);
    --imc_white: rgba(255, 255, 255, 1);
    --black_update: rgba(40, 40, 40, 1);
  }
  
  /* SiteOrigin panel grid flex layout (needed before front-flex.css loads) */
  .panel-grid.panel-no-style,
  .panel-grid.panel-has-style > .panel-row-style {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .panel-grid-cell { box-sizing: border-box; }
  
  /* Full-width stretch without waiting for SiteOrigin JS.
     Overrides the inline `margin-left/-right: -30px` with the
     classic "escape the container" trick so the gradient row fills
     the viewport on first paint. */
  .panel-row-style[data-stretch-type="full-width-stretch"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  
  /* Gradient container — paint the fallback gradient immediately so the
     area is never blank while the animated canvas warms up. Canvas then
     overlays on top via its inline positioning. */
  .gradient-main-animated-fade {
    position: relative;
    overflow: hidden;
    background-color: #f2f2f2;
    background-image:
      radial-gradient(circle at 97% 50%, #dddddd7d 40%, transparent 74.05%),
      radial-gradient(circle at 16% -10%, #da00001a 6%, transparent 39.05%),
      radial-gradient(circle at -14% 134%, #ffffff30 50%, transparent 81.05%);
    isolation: isolate;
  }
  .gradient-main-animated-fade > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    filter: blur(30px);
    pointer-events: none;
  }
  .gradient-main-animated-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
  }
  .gradient-main-animated-fade > *:not(canvas):not(style) {
    position: relative;
    z-index: 2;
  }
  
  /* Hero widget layout (subset of hero-widget.css) */
  .imc-hero-widget { position: relative; box-sizing: border-box; }
  .imc-hero-widget *,
  .imc-hero-widget *::before,
  .imc-hero-widget *::after { box-sizing: border-box; }
  .imc-hero-widget__viewport {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    isolation: isolate;
  }
  .imc-hero-widget__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imc-hero-widget--image .imc-hero-widget__media { pointer-events: none; }
  .imc-hero-widget__media-inner { position: relative; z-index: 0; width: 100%; }
  .imc-hero-widget__media-inner--custom { margin-left: auto; margin-right: auto; }
  .imc-hero-widget__figure { width: 100%; line-height: 0; }
  .imc-hero-widget__figure picture { display: block; width: 100%; }
  .imc-hero-widget__img { display: block; width: 100%; height: auto; max-width: 100%; }
  .imc-hero-widget__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 0;
  }
  .imc-hero-widget .imc-hero-widget__inner { width: 100%; }
  .imc-hero-widget__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    width: 100%;
  }
  .imc-hero-widget__stack .widget--update { margin: 0 !important; padding: 0 !important; width: 100%; }
  .imc-hero-widget__stack .imc-hero-widget__headline.widget--update { margin: 0 0 20px !important; }
  .imc-hero-widget__stack .imc-hero-widget__copy-wrap.widget--update { margin: 0 0 35px !important; }
  @media screen and (max-width: 768px) {
    .imc-hero-widget__stack .imc-hero-widget__headline.widget--update { margin-bottom: 40px !important; }
    .imc-hero-widget__stack .imc-hero-widget__copy-wrap.widget--update { margin-bottom: 25px !important; }
  }
  .imc-hero-widget__stack .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
  }
  .imc-hero-widget__hl--primary,
  .imc-hero-widget__copy--primary { color: var(--black_update); }
  
  /* Container used for the centered content column */
  .container {
    max-width: 1660px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
  }
  @media (max-width: 1078px) { .container { padding: 0 25px; } }
  @media (max-width: 768px)  { .container { max-width: 100vw; overflow: hidden; } }
  
  /* Typography used in the hero */
  .h1_update {
    font-size: var(--h1_font_size);
    line-height: var(--h1_line_height);
    margin: 0;
  }
  @media screen and (max-width: 1024px) {
    .h1_update {
      font-size: var(--h1_font_size_mobile);
      line-height: var(--h1_line_height_mobile);
    }
  }
  .bold      { font-weight: 700; }
  .ta-center { text-align: center; }
  .mono      { font-family: 'Roboto Mono', monospace; }
  .text_normal_update {
    font-size: var(--text_normal_font_size);
    line-height: var(--text_normal_line_height);
  }
  .copy p { margin: 0; }
  
  /* Primary CTA (matches .button--normal.button--red.button--solid in style.scss) */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 50px;
    padding: 0 15px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
  }
  .widget--update .button,
  .imc-hero-widget__stack .button {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .button--normal.button--red {
    color: var(--imc_white);
    border: 1px solid var(--imc_orange);
    background-color: var(--imc_orange);
  }
  
  /* Prevent body overflow on initial paint — same guard SiteOrigin uses
     for the "before-JS" state. */
  body.siteorigin-panels-before-js:not(.siteorigin-panels-css-container) {
    overflow-x: hidden;
  }