:root {
  --dhcs-blue: #17315a;
  --dhcs-teal: #2d6e8d;
  --dhcs-teal-hover: #335969;
  --dhcs-orange: #e47225;
  --dhcs-yellow: #f9a71c;
  --dhcs-yellow-hover: #ee9022;
  --dhcs-yellow-fg: var(--dhcs-blue);
  --dhcs-white: #fff;
  --dhcs-dark-gray: #515253;
  --dhcs-med-dark-gray: #696a6a;
  --dhcs-med-gray: #aaaaaa;
  --dhcs-light-gray: #eceef0;
  --dhcs-black: #1f1f1f;

  --font-size: 1rem;

  --gap-2: 0.5rem;
  --gap-4: 1rem;

  --border-radius-sm: 0.125rem;
  --border-radius: 0.5rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-radius-3xl: 1.5rem;

  /* buttons */
  --btn-transition: all 250ms ease-in-out;
  --btn-active: scale(0.95);

  /* primary */
  --btn-primary-bg: var(--dhcs-teal);
  --btn-primary-text: var(--white);
  --btn-primary-bg-hover: var(--dhcs-teal-hover);

  /* highlight btn */
  --btn-highlight-bg: var(--dhcs-yellow);
  --btn-highlight-text: var(--dhcs-yellow-fg);
  --btn-highlight-bg-hover: var(--dhcs-yellow-hover);

  /* primary outline */
  --btn-primary-outline-bg: var(--white);
  --btn-primary-outline-border: var(--dhcs-teal);
  --btn-primary-outline-text: var(--dhcs-teal);
  --btn-primary-outline-bg-hover: var(--dhcs-teal);

  /* highlight outline */
  --btn-highlight-outline-bg: var(--white);
  --btn-highlight-outline-border: var(--dhcs-orange);
  --btn-highlight-outline-text: var(--dhcs-orange);
  --btn-highlight-outline-bg-hover: var(--dhcs-orange);

  /* layout specific */
  --header-btm-size: 8rem;

  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@font-face {
  font-family: CaGov;
  src: url("../fonts/CaGov.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ca-gov-icon-"],
[class*=" ca-gov-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: CaGov !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="ca-gov-icon-"]::before {
  color: white;
}

.ca-gov-icon-home::before {
  content: "\e601";
}

.ca-gov-icon-facebook::before {
  content: "\e672";
}

.ca-gov-icon-share-linkedin::before {
  content: "\e676";
}

.ca-gov-icon-share-instagram::before {
  content: "\e9f9";
}

.ca-gov-icon-instagram::before {
  content: "\e9dd";
}

/* Fixed version */
/* [class^="ca-gov-icon-"]:hover::before, */
a:hover [class^="ca-gov-icon-"]::before,
a:focus [class^="ca-gov-icon-"]::before {
  color: #fdb81e !important;
}

.link-icon {
  text-decoration: none;
}

.link-icon:focus {
  border: 1px solid white;
}

a:not(.link-icon):focus {
  outline: 2px solid var(--dhcs-dark-gray);
}

/* BUTTONS */
.brand-primary-btn,
.brand-highlight-btn,
.brand-primary-outline-btn,
.brand-primary-ghost-btn,
.brand-highlight-outline-btn {
  transition: var(--btn-transition);
  border-radius: var(--border-radius);
  font-weight: 700;
  text-wrap: nowrap;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  text-decoration: none !important;
}

.brand-disabled-btn,
.brand-primary-btn:disabled,
.brand-highlight-btn:disabled,
.brand-primary-outline-btn:disabled,
.brand-primary-ghost-btn:disabled,
.brand-highlight-outline-btn:disabled,
.brand-primary-btn:disabled:hover,
.brand-highlight-btn:disabled:hover,
.brand-primary-outline-btn:disabled:hover,
.brand-primary-ghost-btn:disabled:hover,
.brand-highlight-outline-btn:disabled:hover,
.brand-primary-btn:disabled:active,
.brand-highlight-btn:disabled:active,
.brand-primary-outline-btn:disabled:active,
.brand-primary-ghost-btn:disabled:active,
.brand-highlight-outline-btn:disabled:active {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1.125rem;
  background-color: var(--dhcs-med-gray);
  transform: none;
  color: var(--dhcs-med-dark-gray);
  border: 1px solid var(--dhcs-med-gray);
}

.btn-fluid {
  width: 100%;
}

.brand-primary-btn:active,
.brand-highlight-btn:active,
.brand-primary-outline-btn:active,
.brand-primary-ghost-btn:active,
.brand-highlight-outline-btn:active {
  transform: var(--btn-active);
}

.brand-primary-ghost-btn {
  background-color: transparent;
  color: var(--dhcs-teal);
  border: none;
}

.brand-primary-ghost-btn:hover {
  background-color: var(--dhcs-med-gray);
}

.brand-primary-btn {
  background-color: var(--btn-primary-bg);
  color: #fff;
  border: none;
}

.brand-primary-btn:hover {
  background-color: var(--btn-primary-bg-hover);
  color: #fff;
}

.brand-highlight-btn {
  background-color: var(--btn-highlight-bg);
  color: var(--btn-highlight-text);
  border: none;
}

.brand-highlight-btn:hover {
  background-color: var(--btn-highlight-bg-hover);
}

.brand-primary-outline-btn {
  background-color: var(--btn-primary-outline-bg);
  color: var(--btn-primary-outline-text);
  border: 1px solid var(--btn-primary-outline-border);
}

.brand-primary-outline-btn:hover {
  background-color: var(--btn-primary-outline-bg-hover);
  color: var(--btn-primary-text);
}

.brand-highlight-outline-btn {
  background-color: var(--btn-highlight-outline-bg);
  color: var(--btn-highlight-outline-text);
  border: 1px solid var(--btn-highlight-outline-border);
}

.brand-highlight-outline-btn:hover {
  background-color: var(--btn-highlight-bg-hover);
  color: var(--btn-highlight-text);
}