/* stylelint-disable selector-class-pattern */

/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-idx-support.css
   Layer: IDX / Support Section
   Version: 1.0

   PURPOSE
   ----------------------------------------------------------------
   Owns:
   - Support section shell
   - Intro heading/body rhythm
   - Browse-by-location quick links
   - Support section responsive behavior
========================================================= */

/* #region TOKENS */
:root{
  --jsc-idx-intro-max: 1120px;

  --jsc-idx-links-max: 1120px;

  --jsc-idx-heading-gap: var(--jsc-space-md);

  --jsc-idx-body-gap: 12px;

  --jsc-idx-intro-heading-measure: 24ch;

  --jsc-idx-intro-body-measure: 60ch;

  --jsc-idx-lh-heading: 1.08;

  --jsc-idx-lh-body: 1.58;

  --jsc-idx-text-body: rgb(var(--jsc-rgb-black) / 72%);

  /* quick link tokens */

  --jsc-idx-links-gap-y: 24px;

  --jsc-idx-links-label-gap: var(--jsc-space-sm);

  --jsc-idx-links-pill-gap-x: var(--jsc-inline-gap-lg);

  --jsc-idx-links-pill-gap-y: var(--jsc-space-lg);

  --jsc-idx-pill-min-h: var(--jsc-box-lg);

  --jsc-idx-pill-pad-x: var(--jsc-size-16);

  --jsc-idx-rule-w: 64px;

  --jsc-idx-label-color: rgb(var(--jsc-rgb-mirage) / 56%);

  --jsc-idx-rule-color: rgb(var(--jsc-rgb-black) / var(--jsc-o-12));

  --jsc-idx-pill-border: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-10));

  --jsc-idx-pill-border-hover: rgb(var(--jsc-rgb-black) / var(--jsc-o-18));

  --jsc-idx-pill-bg-hover: rgb(var(--jsc-rgb-white) / 90%);

  --jsc-idx-pill-focus: rgb(var(--jsc-rgb-black) / 20%);

  --jsc-idx-shadow-pill-hover: 0 6px 14px rgb(var(--jsc-rgb-black) / var(--jsc-o-08));

  --jsc-idx-shadow-pill-active: 0 2px 6px rgb(var(--jsc-rgb-black) / var(--jsc-o-08));
}

/* #endregion TOKENS */

/* =========================================================
   1) SUPPORT SECTION SHELL
========================================================= */

/* #region Support Section Shell */
.jsc-idx-support.elementor-element{
  position: relative;
  z-index: var(--jsc-idx-shell-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--jsc-surface-light);
  padding-top: var(--jsc-space-lg);
  padding-bottom: var(--jsc-space-xl);
  padding-inline: var(--jsc-idx-section-pad-inline);
  overflow-x: clip;
}

.jsc-idx-support .jsc-idx-support__inner{
  width: 100%;
  max-width: var(--jsc-idx-section-max);
  margin: 0;
  padding-top: var(--jsc-idx-inner-pad-top);
  padding-bottom: var(--jsc-idx-inner-pad-bottom);
  align-self: center;
}

/* #endregion Support Section Shell */

/* =========================================================
   2) INTRO RHYTHM
========================================================= */

/* #region Intro Rhythm */
.jsc-idx-support__inner > .jsc-idx-support__intro-heading,
.jsc-idx-support__inner > .jsc-idx-support__intro-body{
  width: min(100%, var(--jsc-idx-intro-max));
  margin-inline: auto;
}

.jsc-idx-support__intro-heading.elementor-widget-heading .elementor-heading-title{
  margin: 0 0 var(--jsc-idx-heading-gap);
  padding: 0;
  max-width: var(--jsc-idx-intro-heading-measure);
  line-height: var(--jsc-idx-lh-heading);
}

.jsc-idx-support__intro-body.elementor-widget-text-editor p{
  margin: 0 0 var(--jsc-idx-body-gap);
  padding: 0;
  max-width: var(--jsc-idx-intro-body-measure);
  color: var(--jsc-idx-text-body);
  line-height: var(--jsc-idx-lh-body);
}

/* #endregion Intro Rhythm */

/* =========================================================
   3) QUICK LOCATION LINKS
========================================================= */

/* #region Quick Location Links */
.jsc-idx-support__quicklinks{
  margin-top: var(--jsc-space-lg);
  margin-bottom: var(--jsc-idx-links-gap-y);
  padding: 0;
}

.jsc-idx-support__inner > .jsc-idx-support__quicklinks{
  width: min(100%, var(--jsc-idx-links-max));
  margin-inline: auto;
  text-align: left;
  align-self: center;
  flex: 0 0 auto;
}

.jsc-idx-support__quicklinks .elementor-widget-container{
  margin: 0;
  padding: 0;
}

.jsc-idx-support__quicklinks h3{
  display: flex;
  align-items: center;
  gap: var(--jsc-idx-links-label-gap);
  margin: 0 0 var(--jsc-space-xs);
  color: var(--jsc-idx-label-color);
  font-size: var(--jsc-size-12);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.jsc-idx-support__quicklinks h3::after{
  content: "";
  width: var(--jsc-idx-rule-w);
  height: var(--jsc-rule-hairline);
  background: var(--jsc-idx-rule-color);
}

.jsc-idx-support__quicklinks ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--jsc-idx-links-pill-gap-y) var(--jsc-idx-links-pill-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jsc-idx-support__quicklinks a{
  display: inline-flex;
  align-items: center;
  min-height: var(--jsc-idx-pill-min-h);
  padding-inline: var(--jsc-idx-pill-pad-x);
  border: var(--jsc-stroke-hairline) solid var(--jsc-idx-pill-border);
  border-radius: var(--jsc-radius-pill);
  background: transparent;
  color: var(--jsc-text-on-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition:
    background var(--jsc-med) var(--jsc-idx-ease),
    border-color var(--jsc-med) var(--jsc-idx-ease),
    box-shadow var(--jsc-med) var(--jsc-idx-ease),
    transform var(--jsc-fast) var(--jsc-idx-ease);
}

.jsc-idx-support__quicklinks a:hover{
  background: var(--jsc-idx-pill-bg-hover);
  border-color: var(--jsc-idx-pill-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--jsc-idx-shadow-pill-hover);
}

.jsc-idx-support__quicklinks a:active{
  transform: translateY(0);
  box-shadow: var(--jsc-idx-shadow-pill-active);
}

.jsc-idx-support__quicklinks a:focus-visible{
  outline: var(--jsc-outline-w) solid var(--jsc-idx-pill-focus);
  outline-offset: 2px;
}

/* #endregion Quick Location Links */

/* =========================================================
   4) RESPONSIVE
========================================================= */

/* #region Responsive */
@media (max-width: 767.98px){
  :root{

    --jsc-idx-heading-gap: 12px;

    --jsc-idx-body-gap: 10px;

    --jsc-idx-links-gap-y: 20px;

    --jsc-idx-links-label-gap: 10px;

    --jsc-idx-links-pill-gap-x: 14px;

    --jsc-idx-links-pill-gap-y: 14px;

    --jsc-idx-pill-min-h: 46px;

    --jsc-idx-pill-pad-x: 18px;

    --jsc-idx-rule-w: 48px;
    
  }

  .jsc-idx-support__intro-heading.elementor-widget-heading .elementor-heading-title{
    max-width: none;
    font-size: clamp(44px, 9vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.02em;
  }

  .jsc-idx-support__intro-body.elementor-widget-text-editor p{
    max-width: none;
    font-size: clamp(18px, 3.8vw, 22px);
    line-height: 1.5;
  }
}

@media (max-width: 479.98px){
  :root{
    --jsc-idx-pill-min-h: 42px;

    --jsc-idx-pill-pad-x: 16px;

    --jsc-idx-links-pill-gap-x: 12px;

    --jsc-idx-links-pill-gap-y: 12px;

    --jsc-idx-rule-w: 36px;
  }

  .jsc-idx-support__intro-heading.elementor-widget-heading .elementor-heading-title{
    font-size: clamp(36px, 10vw, 52px);
  }

  .jsc-idx-support__intro-body.elementor-widget-text-editor p{
    font-size: 16px;
    line-height: 1.45;
  }

  .jsc-idx-support__quicklinks a{
    font-size: 13px;
  }
}

/* #endregion Responsive */

/* stylelint-enable selector-class-pattern */