/* ==========================================================================
   TYPOGRAPHY SYSTEM
   ========================================================================== */

/* ==========================================================================
   1. FONT FAMILY
   ========================================================================== */

:root {
  /*
   * Refactor note: standardized to "Google Sans Flex" as the primary
   * project-wide font, per the Opcito CSS refactor spec, with Arial as
   * the web-safe fallback. Every font-family declaration across
   * custom.css / custom1.css / design-system.css that previously
   * referenced Sora, DM Sans, Plus Jakarta Sans, Inter, Google Sans,
   * or a bare Arial stack now consumes this single variable instead.
   * Icon fonts (FontAwesome, Slick) and the intentionally distinct
   * secondary/decorative font (--font-secondary, e.g. Playfair Display
   * on the horizontal timeline component) are left untouched.
   */
  --font-family-primary: "Google Sans", Arial, sans-serif;
}


/* ==========================================================================
   1c. COLOR TOKENS
   ========================================================================== */

:root {
  /*
   * Refactor note: only the handful of colors that are (a) an EXACT,
   * unambiguous repeated hex value and (b) used broadly enough across
   * unrelated components to represent a real shared design decision
   * were tokenized. Visually-close-but-different colors (the site has
   * ~10 distinct near-black grays and ~8 distinct orange/red accent
   * variants, likely deliberate hover/active/gradient states) were
   * deliberately left as literals — consolidating those would be a
   * real color change, not a safe refactor. See the optimization
   * summary for the full "not merged" list.
   */
  --color-white: #fff;               /* was #fff / #ffffff, 245 occurrences */
  --color-black: #000;               /* 41 occurrences */
  --color-brand-orange: #f75710;     /* primary CTA/accent orange, 62 occurrences */
  --color-heading-navy: #2a2b40;     /* design-system.css heading color, reused sitewide */
  --color-body-gray: #4c5153;        /* design-system.css body-copy color, reused sitewide */
  --color-navy-dark: #262b40;        /* distinct dark navy used for both text and dark-section backgrounds, 27 occurrences — NOT the same value as --color-heading-navy, kept separate */
}


/* ==========================================================================
   1b. GLOBAL SPACING / RADIUS TOKENS
   ========================================================================== */

:root {
  /*
   * Refactor note: this scale documents the recurring spacing values
   * found across custom.css / custom1.css (8 / 12 / 16 / 20 / 24 / 32 /
   * 40 / 48 / 64px, etc.). It is intentionally NOT applied as a blanket
   * find/replace across every padding/margin in the project — many of
   * those values sit inside complex shorthand, Drupal/Views-specific
   * selectors, or third-party (Bootstrap/Slick/TB Mega Menu/Webform)
   * overrides where a mechanical substitution risks a visual
   * regression that can't be verified without a rendered page. The
   * scale is provided here so it can be adopted incrementally, and it
   * has been applied already to the clearly reusable border-radius
   * values called out in section 12 below.
   */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /*
   * Border-radius scale. Applied to unambiguous, purely decorative
   * corner-rounding declarations (buttons, cards, pills, avatars) in
   * custom.css / custom1.css where the literal value exactly matches
   * one of these tokens. See the refactor summary for what was
   * consolidated vs. left alone.
   */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 50px;
  --radius-round: 50%;

  /*
   * Reusable card shadows — these two exact box-shadow values recur
   * verbatim across multiple unrelated card components, so they're
   * safe, zero-risk consolidation (same string in, same string out).
   * Other box-shadow values in the project are single-use or already
   * distinct (different blur/spread/opacity per component) and were
   * left as literals rather than forced into these two tokens.
   */
  --shadow-card: 0 3px 6px #00000029;
  --shadow-card-lg: 2px 3px 6px #00000040;
}


/* ==========================================================================
   2. TYPOGRAPHY COLORS
   ========================================================================== */

:root {
  --color-text-heading: #0d111d;
  --color-text-body: #474b5c;
  --color-text-muted: #a8aab3;

  --color-dark-heading: #ffffff;
  --color-dark-body: #d4d5d9;
}


/* ==========================================================================
   3. DESKTOP TYPOGRAPHY TOKENS
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     DISPLAY
     56 / 64 / Medium
     ------------------------------------------------------------------------ */

  --font-display-size: 3.5rem;
  --font-display-line-height: 4rem;
  --font-display-weight: 500;
  --font-display-letter-spacing: -0.02em;
  --font-display-word-spacing: normal;


  /* ------------------------------------------------------------------------
     HEADLINE 1
     48 / 56 / Medium
     ------------------------------------------------------------------------ */

  --font-h1-size: 3rem;
  --font-h1-line-height: 3.5rem;
  --font-h1-weight: 500;
  --font-h1-letter-spacing: -0.015em;
  --font-h1-word-spacing: normal;


  /* ------------------------------------------------------------------------
     HEADLINE 2
     36 / 40 / Medium
     ------------------------------------------------------------------------ */

  --font-h2-size: 2.25rem;
  --font-h2-line-height: 2.5rem;
  --font-h2-weight: 500;
  --font-h2-letter-spacing: -0.01em;
  --font-h2-word-spacing: normal;


  /* ------------------------------------------------------------------------
     HEADLINE 3
     24 / 32 / Medium
     ------------------------------------------------------------------------ */

  --font-h3-size: 1.5rem;
  --font-h3-line-height: 2rem;
  --font-h3-weight: 500;
  --font-h3-letter-spacing: normal;
  --font-h3-word-spacing: normal;


  /* ------------------------------------------------------------------------
     HEADLINE 4
     20 / 24 / Bold
     ------------------------------------------------------------------------ */

  --font-h4-size: 1.25rem;
  --font-h4-line-height: 1.5rem;
  --font-h4-weight: 700;
  --font-h4-letter-spacing: normal;
  --font-h4-word-spacing: normal;


  /* ------------------------------------------------------------------------
     TITLE
     18 / 20 / Bold
     ------------------------------------------------------------------------ */

  --font-title-size: 1.125rem;
  --font-title-line-height: 1.25rem;
  --font-title-weight: 700;
  --font-title-letter-spacing: normal;
  --font-title-word-spacing: normal;


  /* ------------------------------------------------------------------------
     BODY LARGE
     18 / 24 / Regular
     ------------------------------------------------------------------------ */

  --font-body-lg-size: 1.125rem;
  --font-body-lg-line-height: 1.5rem;
  --font-body-lg-weight: 400;
  --font-body-lg-letter-spacing: normal;
  --font-body-lg-word-spacing: normal;


  /* ------------------------------------------------------------------------
     BUTTON
     16 / 24 / Regular
     ------------------------------------------------------------------------ */

  --font-button-size: 1rem;
  --font-button-line-height: 1.5rem;
  --font-button-weight: 400;
  --font-button-letter-spacing: 0.01em;
  --font-button-word-spacing: normal;


  /* ------------------------------------------------------------------------
     BODY DEFAULT
     14 / 16 / Regular
     ------------------------------------------------------------------------ */

  --font-body-size: 0.875rem;
  --font-body-line-height: 1rem;
  --font-body-weight: 400;
  --font-body-letter-spacing: normal;
  --font-body-word-spacing: normal;


  /* ------------------------------------------------------------------------
     BODY SMALL
     12 / 14 / Regular
     ------------------------------------------------------------------------ */

  --font-body-sm-size: 0.75rem;
  --font-body-sm-line-height: 0.875rem;
  --font-body-sm-weight: 400;
  --font-body-sm-letter-spacing: 0.01em;
  --font-body-sm-word-spacing: normal;


  /* ------------------------------------------------------------------------
     CAPTION / HELPER
     14 / 20 / Regular
     ------------------------------------------------------------------------ */

  --font-caption-size: 0.875rem;
  --font-caption-line-height: 1.25rem;
  --font-caption-weight: 400;
  --font-caption-letter-spacing: normal;
  --font-caption-word-spacing: normal;


  /* ------------------------------------------------------------------------
     LABEL / TOOLTIP
     12 / 16 / Regular
     ------------------------------------------------------------------------ */

  --font-label-size: 0.75rem;
  --font-label-line-height: 1rem;
  --font-label-weight: 400;
  --font-label-letter-spacing: 0.01em;
  --font-label-word-spacing: normal;
}


/* ==========================================================================
   4. GLOBAL FONT RENDERING
   ========================================================================== */

html {
  font-size: 100%;

  /*
   * Prevent mobile browsers from automatically enlarging text.
   * This still allows normal browser zoom.
   */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /*
   * Better handling of font metrics.
   */
  font-synthesis: none;
}

body {
  margin: 0;

  font-family: var(--font-family-primary);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  font-style: normal;
  line-height: var(--font-body-line-height);

  color: var(--color-text-body);

  /*
   * Browser-controlled kerning.
   */
  font-kerning: normal;

  /*
   * Use standard OpenType features.
   */
  font-feature-settings: normal;

  /*
   * Normal numeric rendering.
   */
  font-variant-numeric: normal;

  /*
   * Let supporting fonts use optical sizing.
   */
  font-optical-sizing: auto;

  /*
   * Browser text rendering.
   */
  text-rendering: optimizeLegibility;

  /*
   * Never force custom word spacing globally.
   */
  word-spacing: normal;

  /*
   * Improve wrapping for long words/URLs.
   */
  overflow-wrap: break-word;

  /*
   * Allow natural language wrapping.
   */
  hyphens: auto;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   5. HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0px;

  font-family: var(--font-family-primary);
  font-style: normal;

  color: var(--color-text-heading);

  font-kerning: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;

  /*
   * Prevent awkward heading breaks.
   */
  text-wrap: balance;

  /*
   * Allow very long headings to wrap safely.
   */
  overflow-wrap: break-word;

  /*
   * Do not hyphenate headings by default.
   */
  hyphens: none;
}

h1 {
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--font-h1-letter-spacing);
  word-spacing: var(--font-h1-word-spacing);
}

h2 {
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  font-weight: var(--font-h2-weight);
  letter-spacing: var(--font-h2-letter-spacing);
  word-spacing: var(--font-h2-word-spacing);
}

h3 {
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  font-weight: var(--font-h3-weight);
  letter-spacing: var(--font-h3-letter-spacing);
  word-spacing: var(--font-h3-word-spacing);
}

h4 {
  font-size: var(--font-h4-size);
  line-height: var(--font-h4-line-height);
  font-weight: var(--font-h4-weight);
  letter-spacing: var(--font-h4-letter-spacing);
  word-spacing: var(--font-h4-word-spacing);
}
/*Paragraph*/


p {
  color: #515566;
  font-family: var(--font-family-primary);
  font-size:  var(--font-body-size);
  line-height: var(--font-body-line);
  font-weight: var(--font-body-weight);
  margin-bottom: 1rem;
  line-height: 21px;
}
/* ==========================================================================
   6. DISPLAY
   ========================================================================== */

.text-display {
  font-family: var(--font-family-primary);
  font-size: var(--font-display-size);
  line-height: var(--font-display-line-height);
  font-weight: var(--font-display-weight);
  font-style: normal;

  letter-spacing: var(--font-display-letter-spacing);
  word-spacing: var(--font-display-word-spacing);

  color: var(--color-text-heading);

  font-kerning: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;

  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}


/* ==========================================================================
   7. HEADLINE CLASSES
   ========================================================================== */

.text-h1 {
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  font-weight: var(--font-h1-weight);

  letter-spacing: var(--font-h1-letter-spacing);
  word-spacing: var(--font-h1-word-spacing);

  color: var(--color-text-heading);

  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

.text-h2,h2{
  font-size: var(--font-h2-size);
  line-height: var(--font-h1-line-height);
  font-weight: var(--font-h2-weight);

  letter-spacing: var(--font-h2-letter-spacing);
  word-spacing: var(--font-h2-word-spacing);

  color: var(--color-text-heading);

  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

.text-h3 {
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  font-weight: var(--font-h3-weight);

  letter-spacing: var(--font-h3-letter-spacing);
  word-spacing: var(--font-h3-word-spacing);

  color: var(--color-text-heading);

  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

.text-h4 {
  font-size: var(--font-h4-size);
  line-height: var(--font-h4-line-height);
  font-weight: var(--font-h4-weight);

  letter-spacing: var(--font-h4-letter-spacing);
  word-spacing: var(--font-h4-word-spacing);

  color: var(--color-text-heading);

  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}


/* ==========================================================================
   8. TITLE
   ========================================================================== */

.text-title {
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  font-weight: var(--font-title-weight);

  letter-spacing: var(--font-title-letter-spacing);
  word-spacing: var(--font-title-word-spacing);

  color: var(--color-text-heading);

  text-wrap: balance;
  overflow-wrap: break-word;
}


/* ==========================================================================
   9. BODY TEXT
   ========================================================================== */

.text-body-lg,
.text-body,
.text-body-sm {
  font-style: normal;

  font-kerning: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;

  /*
   * Body copy should be readable rather than tightly packed.
   */
  text-wrap: pretty;

  overflow-wrap: break-word;

  /*
   * Allows natural hyphenation where supported.
   */
  hyphens: auto;
}

.text-body-lg {
  font-size: var(--font-body-lg-size);
  line-height: var(--font-body-lg-line-height);
  font-weight: var(--font-body-lg-weight);

  letter-spacing: var(--font-body-lg-letter-spacing);
  word-spacing: var(--font-body-lg-word-spacing);

  color: var(--color-text-body);
}

.text-body {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: var(--font-body-weight);

  letter-spacing: var(--font-body-letter-spacing);
  word-spacing: var(--font-body-word-spacing);

  color: var(--color-text-body);
}

.text-body-sm {
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  font-weight: var(--font-body-sm-weight);

  letter-spacing: var(--font-body-sm-letter-spacing);
  word-spacing: var(--font-body-sm-word-spacing);

  color: var(--color-text-body);
}


/* ==========================================================================
   10. CAPTION / LABEL
   ========================================================================== */

.text-caption {
  font-size: var(--font-caption-size);
  line-height: var(--font-caption-line-height);
  font-weight: var(--font-caption-weight);

  letter-spacing: var(--font-caption-letter-spacing);
  word-spacing: var(--font-caption-word-spacing);

  color: var(--color-text-muted);

  overflow-wrap: break-word;
}

.text-label {
  font-size: var(--font-label-size);
  line-height: var(--font-label-line-height);
  font-weight: var(--font-label-weight);

  letter-spacing: var(--font-label-letter-spacing);
  word-spacing: var(--font-label-word-spacing);

  color: var(--color-text-muted);

  overflow-wrap: break-word;
}


/* ==========================================================================
   11. BUTTON TYPOGRAPHY
   ========================================================================== */

.text-button {
  font-family: inherit;

  font-size: var(--font-button-size);
  line-height: var(--font-button-line-height);
  font-weight: var(--font-button-weight);
  font-style: normal;

  letter-spacing: var(--font-button-letter-spacing);
  word-spacing: var(--font-button-word-spacing);

  /*
   * Buttons should not inherit unexpected text styles.
   */
  text-transform: none;
  text-decoration: none;

  font-kerning: normal;
  font-feature-settings: normal;
  font-synthesis: none;

  white-space: nowrap;
}


/* ==========================================================================
   12. LINKS
   ========================================================================== */

a {
  color: inherit;

  /*
   * Don't remove underline globally.
   * Components can intentionally override it.
   */
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;

  overflow-wrap: break-word;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================================
   13. TEXT SELECTION
   ========================================================================== */

::selection {
  /*background: currentColor;*/
  /*color: #ffffff;*/
}


/* ==========================================================================
   14. TEXT TRANSFORM UTILITIES
   ========================================================================== */

.text-uppercase {
  text-transform: uppercase;

  /*
   * Uppercase text generally benefits from additional tracking.
   */
  letter-spacing: 0.04em;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-normal-case {
  text-transform: none;
}


/* ==========================================================================
   15. LETTER-SPACING UTILITIES
   ========================================================================== */

.tracking-tight {
  letter-spacing: -0.02em;
}

.tracking-normal {
  letter-spacing: normal;
}

.tracking-wide {
  letter-spacing: 0.04em;
}


/* ==========================================================================
   16. WORD-SPACING UTILITIES
   ========================================================================== */

/*
 * IMPORTANT:
 *
 * Don't globally increase word-spacing.
 *
 * These utilities are intentional exceptions and should only be used
 * where the visual design requires additional separation.
 */

.word-spacing-normal {
  word-spacing: normal;
}

.word-spacing-wide {
  word-spacing: 0.08em;
}

.word-spacing-extra-wide {
  word-spacing: 0.16em;
}


/* ==========================================================================
   17. TEXT WRAPPING
   ========================================================================== */

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.text-wrap {
  text-wrap: wrap;
}

.text-nowrap {
  white-space: nowrap;
}


/* ==========================================================================
   18. READABILITY WIDTH
   ========================================================================== */

.text-readable {
  max-width: 65ch;
}

.text-readable-sm {
  max-width: 45ch;
}

.text-readable-lg {
  max-width: 75ch;
}


/* ==========================================================================
   19. TEXT COLORS
   ========================================================================== */

.text-primary {
  color: var(--color-text-heading);
}

.text-secondary {
  color: var(--color-text-body);
}

.text-muted {
  color: var(--color-text-muted);
}


/* ==========================================================================
   20. DARK THEME
   ========================================================================== */

.theme-dark {
  color: var(--color-dark-body);
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .text-display,
.theme-dark .text-h1,
.theme-dark .text-h2,
.theme-dark .text-h3,
.theme-dark .text-h4,
.theme-dark .text-title {
  color: var(--color-dark-heading);
}

.theme-dark .text-body-lg,
.theme-dark .text-body,
.theme-dark .text-body-sm,
.theme-dark .text-caption,
.theme-dark .text-label {
  color: var(--color-dark-body);
}


/* ==========================================================================
   21. MOBILE TYPOGRAPHY
   ========================================================================== */

@media (max-width: 767px) {

  :root {

    /* Display — 40 / 48 */
    --font-display-size: 2.5rem;
    --font-display-line-height: 3rem;

    /* H1 — 36 / 40 */
    --font-h1-size: 2.25rem;
    --font-h1-line-height: 2.5rem;

    /* H2 — 24 / 32 */
    --font-h2-size: 1.5rem;
    --font-h2-line-height: 2rem;

    /* H3 — 20 / 24 */
    --font-h3-size: 1.25rem;
    --font-h3-line-height: 1.5rem;

    /* H4 — 16 / 20 */
    --font-h4-size: 1rem;
    --font-h4-line-height: 1.25rem;

    /* Title — 14 / 16 */
    --font-title-size: 0.875rem;
    --font-title-line-height: 1rem;

    /* Body Large — 16 / 18 */
    --font-body-lg-size: 1rem;
    --font-body-lg-line-height: 1.125rem;

    /* Button — 14 / 20 */
    --font-button-size: 0.875rem;
    --font-button-line-height: 1.25rem;

    /* Body — 14 / 16 */
    --font-body-size: 0.875rem;
    --font-body-line-height: 1rem;

    /* Body Small — 12 / 14 */
    --font-body-sm-size: 0.75rem;
    --font-body-sm-line-height: 0.875rem;

    /* Caption — 12 / 16 */
    --font-caption-size: 0.75rem;
    --font-caption-line-height: 1rem;

    /* Label — 12 / 16 */
    --font-label-size: 0.75rem;
    --font-label-line-height: 1rem;
  }

  .text-display,
  .text-h1,
  .text-h2 {
    text-wrap: balance;
  }

  .text-display {
    letter-spacing: -0.015em;
  }

  .text-h1 {
    letter-spacing: -0.01em;
  }

  .text-h2 {
    letter-spacing: normal;
  }
}


/* ==========================================================================
   22. VERY SMALL SCREENS
   ========================================================================== */

@media (max-width: 374px) {

  :root {
    --font-display-size: 2.25rem;
    --font-display-line-height: 2.75rem;

    --font-h1-size: 2rem;
    --font-h1-line-height: 2.25rem;
  }
}


/* ==========================================================================
   23. ACCESSIBILITY / USER PREFERENCES
   ========================================================================== */

/*
 * Don't disable text zoom.
 * Browser zoom should continue to work.
 */

@media (prefers-contrast: more) {

  .text-body,
  .text-body-lg,
  .text-body-sm {
    letter-spacing: 0.01em;
  }
}


/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   25. BUTTONS
   ========================================================================== */

:root {
  --orange: #ff4d00;
  --orange-hover: #ff7a36;
  --orange-pressed: #e93600;

  --dark: #292d3d;
  --white: #ffffff;

  --button-font: "Google Sans", Arial, sans-serif;
}


/* BASE */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  height: 48px;
  padding: 0 24px;

  font-family: var(--button-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  word-spacing: normal;

  text-decoration: none;
  white-space: nowrap;

  border: 0;
  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}


/* PRIMARY */

.btn-primary {
  color: var(--white);
  background: var(--orange);
  border-radius: 12px;
}

.btn-primary:hover {
  background: var(--orange-hover);
}

.btn-primary:active {
  background: var(--orange-pressed);
}


/* SECONDARY */

.btn-secondary {
  color: #0d111d;
  background: #fff;
  border: 1.5px solid var(--dark);
  border-radius: 12px;
  padding-left: 24px;
  padding-right: 4px;
}

.btn-secondary:hover {
  border-color: var(--orange);
}

.btn-secondary:active {
  border-color: var(--orange);
}


/* SECONDARY ICON */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white);
  /*background: var(--dark);*/
  border-radius: 10px;
}

.btn-secondary:hover .btn-icon,
.btn-secondary:active .btn-icon {
  background: var(--orange);
}


/* TEXT BUTTON */

.btn-text {
  height: auto;
  padding: 0;
  color: #0d111d;
  background: transparent;
  border: 0;
}

.btn-text:hover {
  color: #0d111d;
}

.btn-text:active {
  color: #0d111d;
}


/* ARROW */
.btn-arrow {
  font-size: 20px;
  line-height: 1;
}

.btn-text .arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -5px;
  vertical-align: middle;
}

.btn-text svg {
  transition: stroke 0.2s ease;
}

.btn-text svg path {
  stroke: #0d111d;
  transition: stroke 0.2s ease;
}

.btn-text:hover svg path {
  stroke: var(--orange-hover);
}

.btn-text:active svg path {
  stroke: var(--orange-pressed);
}


/* FOCUS */

.btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}


/* DISABLED */

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* MOBILE */

@media (max-width: 767px) {

  .btn {
    height: 36px;
    padding: 0 16px;

    font-size: 12px;
    line-height: 16px;
  }

  .btn-primary {
    border-radius: 12px;
  }

  .btn-secondary {
    padding-left: 16px;
    padding-right: 3px;

    border-radius: 12px;
  }

  .btn-icon {
    width: 30px;
    height: 30px;

    border-radius: 8px;
  }

  .btn-text {
    height: auto;
    padding: 0;
  }

  .btn-arrow {
    font-size: 18px;
  }
}