/* ============================================
  BUTTON SYSTEM — LIGHT/DARK THEME SUPPORT
  HOW IT WORKS:
  --------------------------------------------
  - Theme classes (`.section-theme-light`, `.section-theme-dark`) are applied on a parent container.
  - Button styles (`.btn--primary`, `.btn--secondary`, `.btn--tertiary`) read values from CSS variables defined in the theme class.
  - This avoids duplicating styles and allows dynamic theme switching.

  NOTE:
  - The .btn class is used on <a> elements for button-like primary, secondary, and tertiary actions.
  - The disabled attribute is not valid on <a>, so use the .disabled class to visually disable them.
  - For accessibility, also set aria-disabled="true" via JavaScript when disabling <a> elements.

============================================ */
:root {
  --btn-bg-primary-hover: var(--bg-slate);
  --btn-bg-primary: var(--bg-slate);
  --btn-bg-secondary: var(--light-color);
  --btn-border-secondary: var(--bg-slate);
  --btn-border-size: 1px;
  --btn-border-tertiary: var(--bg-slate);
  --btn-box-shadow: 0 0 24px var(--bg-slate);
  --btn-color-primary: var(--bg-white);
  --btn-color-secondary-hover: var(--light-color);
  --btn-color-secondary: var(--bg-slate);
  --btn-color-tertiary: var(--bg-slate);
  --btn-default-bg: var(--bg-white);
  --btn-default-border: var(--bg-slate);
  --btn-default-color: var(--bg-slate-dark);
  --btn-default-outline: 2px dashed var(--bg-slate);
  --btn-disabled-background: #6f7682;
  --btn-disabled-color: #6f7682;
  --btn-disabled-primary-color: #f9fafd;
  --btn-display: inline-flex;
  --btn-font-family: var(--body-font-family);
  --btn-font-size: var(--font-size-b1);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-inline-size: auto;
  --btn-justify-content: center;
  --btn-letter-spacing: 1.6px;
  --btn-line-height: var(--size-2x);
  --btn-link-decoration: underline;
  --btn-margin: var(--size-1x) 0;
  --btn-outline: 2px dashed var(--bg-slate);
  --btn-padding: var(--size-base-plus) var(--size-3x);
  --btn-text-align: center;
  --btn-text-decoration: none;
  --btn-text-transform: uppercase;
  --btn-white-space: nowrap;
  --forward-arrow-margin: 0;
  --link-color: var(--bg-blue);
  --link-display: inline-flex;
  --link-flex-gap: var(--size-half);
  --link-focus-color: var(--bg-navy);
  --link-font-style: normal;
  --link-hover-color: var(--bg-navy);
  --link-line-height: normal;
  --link-visited-color: var(--bg-berry);
}

@media screen and (min-width: 768px) {
  :root {
    --btn-margin: var(--size-base-plus) 0;
  }
}

.section--bg-light,
.section--bg-white,
.section--bg-lightgradient-with-sprite {
  --btn-bg-primary: var(--bg-slate);
  --btn-color-primary: var(--bg-white);
  --btn-bg-secondary: var(--light-color);
  --btn-border-secondary: var(--bg-slate);
  --btn-color-secondary: var(--bg-slate);
  --btn-border-tertiary: var(--bg-slate);
  --btn-color-tertiary: var(--bg-slate);
  --btn-outline: 2px dashed var(--bg-slate);
  --btn-bg-primary-hover: var(--bg-slate);
  --btn-color-secondary-hover: var(--light-color);
  --btn-box-shadow: 0 0 9px var(--bg-slate);
  --link-color: var(--bg-blue);
  --link-hover-color: var(--bg-navy);
  --link-focus-color: var(--bg-navy);
  --link-visited-color: var(--bg-berry);
  --external-icon-color: var(--bg-blue);
  --btn-default-bg: var(--bg-slate);
  --btn-default-color: var(--bg-white);
  --btn-default-border: var(--bg-slate);
  --btn-default-outline: 2px dashed var(--bg-slate);
  --btn-disabled-background: #6f7682;
  --btn-disabled-color: #6f7682;
}

.section--bg-dark,
.section--bg-darkgradient,
.section--bg-darkgradient-with-sprite,
.section--bg-darkgradient-with-sprite-lb,
.section--bg-lightgradient,
.section--bg-dark-blue,
.image-text__grid--dark,
.section--bg-slate-dark {
  --btn-bg-primary: var(--bg-white);
  --btn-color-primary: var(--bg-slate-dark);
  --btn-bg-secondary: var(--bg-slate-dark);
  --btn-border-secondary: var(--bg-white);
  --btn-color-secondary: var(--bg-white);
  --btn-border-tertiary: var(--bg-white);
  --btn-color-tertiary: var(--bg-white);
  --btn-outline: 2px dashed var(--bg-white);
  --btn-bg-primary-hover: var(--bg-white);
  --btn-bg-secondary-hover: var(--bg-slate-dark);
  --btn-box-shadow: 0 0 9px var(--bg-white);
  --link-color: var(--bg-white);
  --link-hover-color: var(--bg-light-blue);
  --link-focus-color: var(--bg-white);
  --link-visited-color: var(--link-dark-visited);
  --external-icon-color: var(--bg-white);
  --btn-default-bg: var(--bg-white);
  --btn-default-color: var(--bg-slate-dark);
  --btn-default-border: var(--bg-white);
  --btn-default-outline: 2px dashed var(--bg-white);
  --btn-disabled-primary-color: #00060e;
  --btn-disabled-background: #b1b3b3;
  --btn-disabled-color: #b1b3b3;
}

/* ============================
   BASE BUTTON STYLES
============================= */
button:not(.link),
.btn {
  align-items: center;
  background-color: var(--btn-default-bg);
  border: var(--btn-border-size) solid var(--btn-default-border);
  box-sizing: border-box;
  color: var(--btn-default-color);
  cursor: pointer;
  display: var(--btn-display);
  font-family: var(--btn-font-family);
  font-size: var(--font-size-b2);
  font-weight: var(--btn-font-weight);
  gap: var(--size-1x);
  inline-size: var(--btn-inline-size);
  justify-content: var(--btn-justify-content);
  letter-spacing: 1.2px;
  line-height: var(--btn-line-height);
  margin: var(--btn-margin);
  padding: var(--btn-padding);
  position: relative;
  text-align: var(--btn-text-align);
  text-decoration: var(--btn-text-decoration);
  text-transform: var(--btn-text-transform);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
  white-space: var(--btn-white-space);
}

@media screen and (min-width: 768px) {
  .btn {
    font-size: var(--btn-font-size);
    letter-spacing: var(--btn-letter-spacing);
  }
}

button:not(.link) {
  font-size: var(--btn-font-size);
  letter-spacing: var(--btn-letter-spacing);
}

.btn__forward-arrow {
  display: inline-grid;
  margin-inline: var(--forward-arrow-margin);
}

/* stylelint-disable-next-line selector-max-type */
.btn__forward-arrow svg {
  block-size: 11px;
  grid-area: 1 / 1 / 2 / 2;
  inline-size: 11px;
  margin-block-end: 2px;
  transition: transform 0.3s ease;
}

/* stylelint-disable-next-line selector-max-type,  selector-max-compound-selectors */
button:not(.link):focus .btn__forward-arrow svg:first-child,
/* stylelint-disable-next-line selector-max-type,  selector-max-compound-selectors */
button:not(.link, .disabled, :disabled):hover .btn__forward-arrow svg:first-child,
/* stylelint-disable-next-line selector-max-type,  selector-max-compound-selectors */
.btn:not(.disabled, :disabled):focus .btn__forward-arrow svg:first-child,
/* stylelint-disable-next-line selector-max-type,  selector-max-compound-selectors */
.btn:not(.disabled, :disabled):hover .btn__forward-arrow svg:first-child {
  transform: translateX(80%);
}

button:not(.link):disabled,
.btn:disabled,
.btn.disabled {
  background-color: transparent;
  border-color: var(--btn-disabled-background);
  color: var(--btn-disabled-background);
  cursor: not-allowed;
}

button:not(.link):disabled::after,
.btn:disabled::after,
.btn.disabled::after {
  color: var(--btn-disabled-color);
  filter: grayscale(1) opacity(0.4);
  transform: none;
}

.btn:not(:disabled):hover::after,
.btn:not(.disabled):hover::after,
button:not(.link, :disabled):hover::after {
  color: var(--btn-default-color);
  transform: translateX(3px);
}

a.btn:hover,
a.btn:visited,
a.btn:active,
button:not(.link):hover,
button:not(.link):visited,
button:not(.link):active {
  text-decoration: var(--btn-text-decoration);
}

.btn:focus-visible,
button:not(.link):focus-visible {
  outline: var(--btn-default-outline);
  outline-offset: var(--size-half);
}

/* ============================
   BUTTON TYPES
============================= */
.btn.btn--primary {
  background-color: var(--btn-bg-primary);
  color: var(--btn-color-primary);
}

.btn.btn--primary:not(.link):disabled,
.btn.btn--primary:not(.link).disabled {
  background-color: var(--btn-disabled-background);
  color: var(--btn-disabled-primary-color);
}

.btn.btn--primary:not(.disabled):hover,
.btn.btn--primary:not(:disabled):hover {
  background-color: var(--btn-bg-primary-hover);
  box-shadow: var(--btn-box-shadow);
  color: var(--btn-color-primary);
}

.btn.btn--primary.disabled:hover,
.btn.btn--primary:disabled:hover {
  background-color: var(--btn-disabled-background);
  box-shadow: none;
  color: var(--btn-disabled-primary-color);
}

/* ---------------------------- */
.btn.btn--secondary {
  background-color: transparent;
  border: 1px solid var(--btn-border-secondary);
  color: var(--btn-color-secondary);
}

.btn.btn--secondary:disabled,
.btn.btn--secondary.disabled {
  border-color: var(--btn-disabled-background);
  color: var(--btn-disabled-color);
}

.btn.btn--secondary:focus::after,
.btn.btn--tertiary:focus::after,
.btn.btn--secondary:not(:disabled):hover::after,
.btn.btn--secondary:not(.disabled):hover::after,
.btn.btn--tertiary:not(:disabled):hover::after,
.btn.btn--tertiary:not(.disabled):hover::after {
  transform: translateX(3px);
}

.btn.btn--secondary:not(:disabled):hover,
.btn.btn--secondary:not(.disabled):hover {
  background-color: transparent;
  box-shadow: 0 var(--size-half) var(--size-base-plus) rgb(0 0 0 / 10%);
  color: var(--btn-color-secondary);
}

.btn.btn--secondary.disabled:hover,
.btn.btn--secondary:disabled:hover {
  background-color: transparent;
  border-color: var(--btn-disabled-background);
  box-shadow: none;
  color: var(--btn-disabled-color);
}

/* ---------------------------- */
.btn.btn--tertiary {
  background-color: transparent;
  border: none;
  border-block-end: 1px solid var(--btn-border-tertiary);
  border-radius: 0;
  color: var(--btn-color-tertiary);
}

.btn.btn--tertiary:disabled,
.btn.btn--tertiary.disabled {
  border-block-end-color: var(--btn-disabled-background);
  color: var(--btn-disabled-color);
}

.btn.btn--tertiary:not(:disabled):hover,
.btn.btn--tertiary:not(.disabled):hover {
  border-block-end-color: var(--btn-border-tertiary);
  color: var(--btn-color-tertiary);
}

.btn.btn--tertiary:disabled:hover,
.btn.btn--tertiary.disabled:hover {
  border-block-end-color: var(--btn-disabled-background);
  color: var(--btn-disabled-color);
}

/* ============================
   LINKS
============================= */
a:not(.btn),
a:not(.btn):link,
.link {
  align-items: baseline;
  color: var(--link-color);
  display: var(--link-display);
  font-family: var(--body-font-family);
  font-size: var(--btn-font-size);
  font-style: var(--link-font-style);
  font-weight: var(--btn-font-weight);
  gap: var(--link-flex-gap);
  line-height: var(--link-line-height);
  text-decoration-line: var(--btn-link-decoration);
  text-decoration-skip-ink: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

/* === Hover and Focus === */
a:not(.btn):hover,
.link:hover {
  color: var(--link-hover-color);
}

a:not(.btn):focus-visible,
.link:focus-visible {
  border: 2px dashed var(--link-focus-color);
  border-radius: 6px;
  color: var(--link-focus-color);
  display: inline-block;
  outline: none;
  padding: 10px;
}

/* === Visited State === */
a:not(.btn):visited {
  color: var(--link-visited-color);
}

a:not(.btn)[target='_blank']:hover,
a:not(.btn, [target]):hover,
.link[data-external='true']:hover {
  color: var(--link-hover-color);
}

a:not(.btn).b3-regular,
a:not(.btn).b3-medium,
a:not(.btn).b3-semibold {
  --btn-font-weight: var(--font-weight-bold);
  --btn-link-decoration: underline;

  font-size: var(--font-size-b3);
  line-height: 1.5;
}

a:not(.btn).b3-medium,
a:not(.btn).b3-semibold {
  line-height: 1.67;
}

a:not(.btn).b3-regular:focus-visible,
a:not(.btn).b3-medium:focus-visible,
a:not(.btn).b3-semibold:focus-visible {
  display: var(--link-display);
}

.footer__disclosure a:not(.btn).b3-regular:hover,
.footer__disclosure a:not(.btn).b3-medium:hover,
.footer__disclosure a:not(.btn).b3-semibold:hover {
  --link-hover-color: var(--bg-light-blue);
}

/* ============================
   Custom Plan Sites - Bart
============================= */
.theme-ipcbartplans .btn {
  --btn-color-primary: #f2f2f2;
  --btn-color-secondary: #f2f2f2;
  --btn-box-shadow: none;
  --btn-bg-primary-hover: var(--bg-dark-green);
  --btn-font-weight: 600;

  background-color: var(--bg-green);
  border: none;
  border-radius: 4px;
  letter-spacing: normal;
}

.theme-ipcbartplans .btn__forward-arrow {
  display: none;
}

/* stylelint-disable-next-line selector-max-compound-selectors */
.theme-ipcbartplans :is(.green-bart-background, .blue-bart-background) a:not(.btn) {
  --link-visited-color: var(--bg-navy);
}

/* stylelint-disable-next-line selector-max-compound-selectors */
.theme-ipcbartplans :is(.green-bart-background, .blue-bart-background) a:not(.btn):focus-visible {
  --link-focus-color: var(--bg-navy);

  padding: 1px;
}