/*------------------------------------*\
    
    MicroHealth Design System Refresh

    Design tokens........Global colors, fonts, and scale.
    Typography...........Global font + heading enforcement.
    Buttons..............Primary, secondary, tertiary styles.
    Overrides............Targeted fixes for legacy rules.
    UberMenu.............Caret alignment and spacing.
    Breakpoints..........Desktop-only adjustments.

\*------------------------------------*/


/*------------------------------------*\
    Design Tokens
\*------------------------------------*/

:root {
  --color-primary: #e96325;
  --color-primary-hover: #883915;
  --color-secondary: #6e9226;
  --color-secondary-hover: #3b530b;
  --color-tertiary: #273b91;
  --color-tertiary-hover: #0c1a55;
  --color-inverse-tertiary: #f5f5f5;
  --color-inverse-tertiary-hover: #757575;

  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --h1-size: 64px;
  --h2-size: 45px;
  --h3-size: 24px;
  --h4-size: 18px;
  --body-size: 16px;
}


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

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  font-size: var(--body-size);
  font-weight: 500;
}

p,
ul li,
ol li {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
[class*="heading"],
[class*="title"],
.entry-title,
.page-title,
.section-title,
.wp-block-heading {
  font-family: var(--font-sans);
}

h1 { font-size: var(--h1-size); font-weight: 700; }
h2 { font-size: var(--h2-size); font-weight: 700; }
h3 { font-size: var(--h3-size); font-weight: 600; }
h4 { font-size: var(--h4-size); font-weight: 500; }


/*------------------------------------*\ 
    Buttons
\*------------------------------------*/

.btn-primary,
.btn-secondary {
  border-radius: 8px;
}

/* Primary */
.btn.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* Secondary */
.btn.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  box-shadow: none;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: #fff;
  box-shadow: none;
  outline: none;
}

/* Tertiary */
.btn.btn-tertiary,
.btn.btn-tertiary:visited {
  background: transparent;
  border: 0;
  color: var(--color-tertiary);
  font-weight: 600;
  text-decoration: none;
}

.btn.btn-tertiary:hover,
.btn.btn-tertiary:focus {
  color: var(--color-tertiary-hover);
  text-decoration: underline;
}

/* Inverse Tertiary */
.btn.btn-inverse-tertiary {
  background: transparent;
  border: 0;
  color: var(--color-inverse-tertiary);
  text-decoration: none;
}

.btn.btn-inverse-tertiary:hover,
.btn.btn-inverse-tertiary:focus {
  color: var(--color-inverse-tertiary-hover);
  text-decoration: underline;
}


/*------------------------------------*\  
    Targeted Overrides
\*------------------------------------*/

.page-header .btn.btn-primary,
.page-header .btn.btn-secondary {
  box-shadow: none;
}

.news-cards__btn a[target="_blank"].btn::before {
  visibility: hidden;
}


/*------------------------------------*\
    UberMenu
\*------------------------------------*/

.ubermenu .ubermenu-target {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ubermenu .ubermenu-target-title {
  line-height: 1.1;
}

.ubermenu .ubermenu-sub-indicator {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-left: 0;
  top: -1px;
}

@media screen and (max-width: 1199px) {
  .ubermenu .ubermenu-sub-indicator {
    top: 10px;
  }
}


/*------------------------------------*\ 
    Breakpoints
\*------------------------------------*/

@media (min-width: 1200px) {
.ubermenu .ubermenu-sub-indicator {
  position: relative;
}

  .header-btn .btn.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
    box-shadow: none;
  }

  .header-btn .btn.btn-secondary:hover,
  .header-btn .btn.btn-secondary:focus {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: #fff;
  }
}