/*
 * Sheer design tokens + opt-in utility classes.
 * Loaded site-wide, but nothing here styles an element unless it carries a sheer-* class,
 * so existing pages are unaffected.
 *
 * In Avia, put the classes in the element's "Custom CSS Class" field.
 * Avia adds that class to the element wrapper, so each rule also targets the inner
 * heading / paragraph / button.
 */

:root {
  /* Fonts */
  --font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Colors */
  --sheer-white: #ffffff;
  --sheer-indigo: #2b338f;
  --sheer-navy: #001558;
  --sheer-black: #1c1f22;
  --sheer-medium-grey: #6e7c89;
  --sheer-cool-grey: #d1dce5;
  --sheer-mist: #f6f8fa;
  --sheer-deep-teal: #006d77;
  --sheer-teal: #0a9396;
  --sheer-bright-blue: #0000ff;
  --sheer-sky-blue: #4cc9f0;
  --sheer-soft-aqua: #90e0ef;
  --sheer-deep-green: #00c320;
  --sheer-cta-green: #00bb0e;

  /* Display */
  --display-font-size: 48px;
  --display-font-weight: 800;
  --display-line-height: 1.2;

  /* H1 */
  --h1-font-size: 36px;
  --h1-font-weight: 800;
  --h1-line-height: 1.4;
  --h1-letter-spacing: 0;
  --h1-text-transform: none;

  /* H2 */
  --h2-font-size: 32px;
  --h2-font-weight: 600;
  --h2-line-height: 1.4;
  --h2-letter-spacing: 0;
  --h2-text-transform: uppercase;

  /* H3 */
  --h3-font-size: 28px;
  --h3-font-weight: 700;
  --h3-line-height: 1.4;
  --h3-letter-spacing: 0;
  --h3-text-transform: none;

  /* H4 */
  --h4-font-size: 24px;
  --h4-font-weight: 600;
  --h4-line-height: 1.4;
  --h4-letter-spacing: 0;
  --h4-text-transform: none;

  /* H5 */
  --h5-font-size: 20px;
  --h5-font-weight: 600;
  --h5-line-height: 1.4;
  --h5-letter-spacing: 0;
  --h5-text-transform: none;

  /* H6 */
  --h6-font-size: 18px;
  --h6-font-weight: 600;
  --h6-line-height: 1.4;
  --h6-letter-spacing: 0;
  --h6-text-transform: none;

  /* Body */
  --body-font-size: 24px;
  --body-font-weight: 400;
  --body-line-height: 1.4;
  --body-letter-spacing: 0;

  /* Lead */
  --lead-font-size: 28px;
  --lead-font-weight: 400;
  --lead-line-height: 1.4;

  /* Small */
  --small-font-size: 18px;
  --small-font-weight: 400;
  --small-line-height: 1.5;

  /* Button */
  --button-font-size: 16px;
  --button-font-weight: 600;
  --button-line-height: 1.4;
  --button-text-transform: uppercase;

  /* Spacing (8-point scale) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 128px;
}

/* Scale the type down on smaller screens */
@media only screen and (max-width: 989px) {
  :root {
    --display-font-size: 40px;
    --h1-font-size: 32px;
    --h2-font-size: 28px;
    --h3-font-size: 24px;
    --h4-font-size: 21px;
    --body-font-size: 20px;
    --lead-font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --display-font-size: 34px;
    --h1-font-size: 28px;
    --h2-font-size: 24px;
    --h3-font-size: 22px;
    --h4-font-size: 20px;
    --h5-font-size: 18px;
    --body-font-size: 18px;
    --lead-font-size: 21px;
    --small-font-size: 16px;
  }
}

/* ---------- Typography ---------- */

#top #wrap_all .sheer-display,
#top #wrap_all .sheer-display .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
}

#top #wrap_all .sheer-h1,
#top #wrap_all .sheer-h1 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);
}

#top #wrap_all .sheer-h2,
#top #wrap_all .sheer-h2 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);
}

#top #wrap_all .sheer-h3,
#top #wrap_all .sheer-h3 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: var(--h3-text-transform);
}

#top #wrap_all .sheer-h4,
#top #wrap_all .sheer-h4 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
}

#top #wrap_all .sheer-h5,
#top #wrap_all .sheer-h5 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  text-transform: var(--h5-text-transform);
}

#top #wrap_all .sheer-h6,
#top #wrap_all .sheer-h6 .av-special-heading-tag {
  font-family: var(--font-heading);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: var(--h6-text-transform);
}

#top #wrap_all .sheer-body,
#top #wrap_all .sheer-body p,
#top #wrap_all .sheer-body li {
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

#top #wrap_all .sheer-lead,
#top #wrap_all .sheer-lead p {
  font-family: var(--font-body);
  font-size: var(--lead-font-size);
  font-weight: var(--lead-font-weight);
  line-height: var(--lead-line-height);
}

#top #wrap_all .sheer-small,
#top #wrap_all .sheer-small p,
#top #wrap_all .sheer-small li {
  font-family: var(--font-body);
  font-size: var(--small-font-size);
  font-weight: var(--small-font-weight);
  line-height: var(--small-line-height);
}

/* ---------- Text colors ---------- */

#top #wrap_all .sheer-white,
#top #wrap_all .sheer-white :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-white); }
#top #wrap_all .sheer-indigo,
#top #wrap_all .sheer-indigo :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-indigo); }
#top #wrap_all .sheer-navy,
#top #wrap_all .sheer-navy :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-navy); }
#top #wrap_all .sheer-black,
#top #wrap_all .sheer-black :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-black); }
#top #wrap_all .sheer-medium-grey,
#top #wrap_all .sheer-medium-grey :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-medium-grey); }
#top #wrap_all .sheer-teal,
#top #wrap_all .sheer-teal :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-teal); }
#top #wrap_all .sheer-deep-teal,
#top #wrap_all .sheer-deep-teal :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-deep-teal); }
#top #wrap_all .sheer-bright-blue,
#top #wrap_all .sheer-bright-blue :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-bright-blue); }
#top #wrap_all .sheer-green,
#top #wrap_all .sheer-green :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--sheer-deep-green); }

/* ---------- Backgrounds (use on av_section / columns) ---------- */

#top .sheer-bg-white { background-color: var(--sheer-white); }
#top .sheer-bg-navy { background-color: var(--sheer-navy); }
#top .sheer-bg-indigo { background-color: var(--sheer-indigo); }
#top .sheer-bg-mist { background-color: var(--sheer-mist); }
#top .sheer-bg-cool-grey { background-color: var(--sheer-cool-grey); }
#top .sheer-bg-medium-grey { background-color: var(--sheer-medium-grey); }
#top .sheer-bg-black { background-color: var(--sheer-black); }
#top .sheer-bg-green { background-color: var(--sheer-cta-green); }
#top .sheer-bg-gradient { background-image: linear-gradient(90deg, var(--sheer-navy) 0%, var(--sheer-bright-blue) 100%); }

/* ---------- Button (put sheer-btn on an av_button) ---------- */

#top #wrap_all .sheer-btn .avia-button,
#top #wrap_all a.sheer-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  text-transform: var(--button-text-transform);
  letter-spacing: 0.02em;
  color: var(--sheer-white);
  background-color: var(--sheer-cta-green);
  border: 0;
  border-radius: 6px;
  padding: 10px 26px;
  box-shadow: none;
  opacity: 1;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#top #wrap_all .sheer-btn .avia-button:hover,
#top #wrap_all a.sheer-btn:hover {
  color: var(--sheer-white);
  background-color: #009c1a;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}

#top #wrap_all .sheer-btn .avia-button .avia_iconbox_title { color: inherit; }