/* VARIABLES
--------------------------------------------- */

:root {
    --fnt-family-primary: "Syne", sans-serif;
    --fnt-family-secondary: "EB Garamond", serif;
    --fnt-family-tertiary: "DM Mono", monospace;

    --clr-background: #ffffff;
    --clr-background-muted: #f4f7fb;

    --clr-background-cobalt: rgba(0, 47, 167, .08);
    --clr-background-mint: rgba(0, 200, 150, .08);
    --clr-background-ice: rgba(0, 163, 224, .08);

    --clr-border-cobalt: rgba(0, 47, 167, .1);
    --clr-border-mint: rgba(0, 200, 150, .1);
    --clr-border-ice: rgba(90, 129, 144, 0.1);

    --clr-cobalt: #002fa7;
    --clr-cobalt-dark: #1b3166;
    --clr-cobalt-light: #204cbb;

    --clr-mint: #00c896;
    --clr-mint-dark: #04aa80;
    --clr-mint-light: #02daa4;

    --clr-ice: #00a3e0;
    --clr-ice-dark: #008abc;
    --clr-ice-light: #14c0fe;

    --clr-success: #00C896;
    --clr-warning: #faa05a;
    --clr-danger: #cb1a2c;

    --clr-text: #0a0f1e;
    --clr-text-light: #fafbfe;

    --clr-link: var(--clr-cobalt);
    --clr-link-hover: var( --clr-cobalt-light);

    --border-color: rgba(0, 0, 0, 0.07);

    --border-radius-sm: 0 0 0 12px;
    --border-radius-md: 0 0 0 20px;
    --border-radius-lg: 0 0 0 28px;
    --border-radius-xl: 0 0 0 36px;

    --shadow-sm: 0 4px 8px rgba(0, 0, 0, .1);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, .1);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .1);

    --wheel-paper:  #FFFFFF;
    --wheel-ink:    #22201C;
    --wheel-ink-60: #22201C99;
    --wheel-ring:   #ffffff;

    /* five curated segment colors, one per category */
    --wheel-c1: #00A3E0; /* strategy — muted blue   */
    --wheel-c2: #008ABC; /* design   — plum         */
    --wheel-c3: #204CBB; /* build    — clay         */
    --wheel-c4: #002FA7; /* growth   — forest green */
    --wheel-c5: #1B3166; /* support  — ochre        */

}

/* BASE
--------------------------------------------- */

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 18px);
}


body {
    color: var(--clr-text);
    font-family: var(--fnt-family-primary);
    background-color: var(--clr-background-muted);
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 1.72;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fnt-family-secondary);
    color: var(--clr-text);
    font-weight: bold;
    line-height: 1;
    margin-top: 1.5em;
}

h1 {
    font-size: 5rem;
}

h1 em, h2 em {
    font-family: var(--fnt-family-primary);
    font-size: 0.85em;
    color: var(--clr-theme, --clr-cobalt);
    font-weight: normal;
}

a {
    color: var(--clr-link);
    transition: all .25s ease;
    text-decoration: none;
}

a:hover {
    color: var(--clr-link-hover);
    text-decoration: none;
}

strong {
    font-weight: bold;
}

em {
    color: var(--clr-cobalt);
    font-style: normal;
}

ul {
	list-style-type: "—  ";
    padding-left: 1.2em;
}


/* LAYOUT
--------------------------------------------- */

/* - Header - */

.site-header {
    background-color: var(--clr-background);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 999;
}

.site-header__top {
    border-bottom: 1px solid var(--border-color);
    padding: .25rem 0;
}

.site-header__top-nav {
    display: flex;
}


.site-header__logo {

}
 
.site-nav {

}

.site-footer {
    background-color: var(--clr-background);
    border-top: 1px solid var(--border-color);
}


/* MENU
--------------------------------------------- */

.menu-main {
 
}

.menu-main > .menu-main__item > .menu-main__link {
    font-family: var(--fnt-family-primary);
    color: var(--clr-text);
    text-transform: none;
    font-size: .889rem;
    position: relative;
}

.menu-main > .menu-main__item > .menu-main__link:hover {
    color: var(--clr-ice);
}

.menu-main > .menu-main__item > .menu-main__link::before {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    top: -1px;
    left: 50%;
    right: 50%;
    background-color: var(--clr-ice-light);
    opacity: 0;
    transition: all .25s ease;
}

.menu-main > .menu-main__item > .menu-main__link[aria-expanded="true"]::before, 
.menu-main > .menu-main__item > .menu-main__link:hover::before {
    opacity: 1;
    left: 0;
    right: 0;
}

.menu-main > .menu-main__item.current-menu-item > .menu-main__link,
.menu-main > .menu-main__item.current-menu-ancestor > .menu-main__link,
.menu-main > .menu-main__item > .menu-main__link[aria-expanded="true"] {
    color: var(--clr-ice);
}

.menu-main__subnav {
}

.menu-main__subnav > .menu-main__item > .menu-main__link {
    font-family: var(--fnt-family-primary);
    color: var(--clr-text);
    text-transform: none;
    font-size: .889rem;
    position: relative;
    gap: .5rem;
}

.menu-main__subnav > .menu-main__item > .menu-main__link:hover {
    color: var(--clr-ice);
}

/* - Mobile navigation - */

.menu-main-mobile {
    padding: 2rem 0;
}

.menu-main-mobile .menu-main-mobile__item > .menu-main-mobile__link {
    color: var(--clr-text);
    padding: .5rem 0;
}

.menu-main-mobile .menu-main-mobile__item.current-menu-item > .menu-main-mobile__link,
.menu-main-mobile .menu-main-mobile__item.current-menu-ancestor > .menu-main-mobile__link,
.menu-main-mobile .menu-main-mobile__item > .menu-main-mobile__link:hover {
    color: var(--clr-ice);
}

.menu-main-mobile > .menu-main-mobile__item > .menu-main-mobile__link {
    font-size: 1.35rem;
}

.menu-main-mobile__subnav {
    padding: 0 !important;
}

/* - Main - */

.site-main {
    padding: 0 0 4rem 0;
    --clr-theme: var(--clr-cobalt);
}

.site-main--theme-ice {
    padding: 0 0 4rem 0;
    --clr-theme: var(--clr-ice);
}

.site-main--theme-mint {
    padding: 0 0 4rem 0;
    --clr-theme: var(--clr-mint);
}


/* - Footer - */

.site-footer {

}


/* COMPONENTS
--------------------------------------------- */

.lang-switcher {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
    font-size: .8rem;
    font-family: var(--fnt-family-tertiary);
}

.lang-switcher__lang + .lang-switcher__lang {
    position: relative;
    padding-left: 1rem;
}

.lang-switcher__lang + .lang-switcher__lang::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0.75em;
    width: 1px;
    background-color: currentColor;
    opacity: 0.3;
}

.hero {
    padding: 4rem 0;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--clr-text-light);

}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(301deg,rgba(2, 22, 72, 0) 0%, rgb(2, 22, 72) 70%);
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__claim {
    font-family: var(--fnt-family-tertiary);
    font-size: .8rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.hero__title {
    font-size: 6rem;
    font-family: var(--fnt-family-secondary);
    line-height: 1;
    color: var(--clr-text-light);
}

.hero__title em {
    color: var(--clr-ice);
    font-family: var(--fnt-family-primary);
    font-weight: normal
}

.hero__excerpt {

}

.hero__counter {
	position: relative;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.18);
	padding: .2rem 1rem;
	width: 100%;
    z-index: 2;
    border-radius: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hero__counter-number {
    font-size: 2rem;
    font-weight: bold;
}

.hero__counter-subject {
    font-family: var(--fnt-family-tertiary);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

@media only screen and (min-width : 768px) {
	.hero__counter {
		position: absolute;
		right: 2rem;
		bottom: 0;
		margin: 0;
		display: block;
		padding: .25rem 1rem 1rem 1rem;
		width: auto;
	}

}

.button {
    margin: 0;
    border: none;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    -webkit-appearance: none;
    display: inline-block;
    box-sizing: border-box;
    padding: .75em 30px;
    vertical-align: middle;
    font-size: .85rem;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    transition: .1s ease-in-out;
    transition-property:color, background-color, border-color, box-shadow, transform;
    font-family: var(--fnt-family-tertiary);
    letter-spacing: .1em;
    border-radius: var(--border-radius-md);
    line-height: 1.2;
}

.button--lg {
    padding: 1em 40px;
    font-size: 1rem;
}

.button--block {
    display: block;
}

.button--large {
    font-size: 1rem;
}

.button--cobalt {
    background-color: var(--clr-cobalt);
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 47, 167, .2);
}

.button--cobalt:hover {
    background-color: var(--clr-cobalt-light);
    color:#fff;
    box-shadow: 0 6px 12px rgba(0, 47, 167, .3);
    transform: translateY(-1px);
}

.button--ice {
    background-color: var(--clr-ice);
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 163, 224, .2);
    
}

.button--ice:hover {
    background-color: var(--clr-ice-light);
    color:#fff;
    box-shadow: 0 6px 12px rgba(0, 163, 224, .3);
    transform: translateY(-1px);
}

.button--ghost {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    box-shadow: 0 4px 8px rgba(255, 255, 255, .05);
}

.button--ghost:hover {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    box-shadow: 0 4px 8px rgba(255, 255, 255, .1);
    transform: translateY(-1px);
}

.button--icon {
    display: flex; 
    gap: .5rem;
    align-items: center;
    padding-right: 15px;
    justify-content: space-between;
}

.button--disabled {
    opacity: .75;
}

.stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.stack > * {
    margin: 0 !important;
}

.stack--stretch {
  align-items: stretch;
}

.stack--centered {
    align-items: center;
}

.stack--lg {
    gap: 2rem;
}

.stack--sm {
    gap: .5rem;
}

.stack--xs {
    gap: .4rem;
}

.uk-nav-divider > * {
    display: none !important;
}

.uk-accordion li {
    background-color: var(--clr-background);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    display: block;
    margin-bottom: 1rem;
}

.uk-accordion .uk-accordion-title {
    padding: 1rem 1.5rem;
}

.uk-accordion .uk-accordion-content {
    border-top: 1px solid #e8e9eb;
    padding: 1rem 1.5rem;
    margin-top: 0;
}

.card {
    --clr-card-theme: var(--clr-text);
    background-color: var(--clr-background);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-top: 4px solid transparent;
    position: relative;
    display: flex;
	flex-direction: column;
    margin-bottom: 2rem;
}

a.card {
    color: var(--clr-text);
}

a.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card__header {
    background-color: var(--clr-theme);
    padding: 1.5rem;
    color: var(--clr-text-light);
}

.card__image {
    aspect-ratio: 1;
    margin: 0;
}

.card__body {
    padding: 1.5rem;
    /*height: 100%;*/
}

.card__footer {
    border-top: 1px solid #eee;
    padding: 1.5rem;
	margin-top: auto;
}

.card__footer--sm {
    padding: 1rem 1.5rem;
}

.card__title {
    color: var(--clr-card-theme);
    line-height: 1.1;
}

.card--theme { --clr-card-theme: var(--clr-theme); border-color: var(--clr-theme); }
.card--cobalt { --clr-card-theme: var(--clr-cobalt); border-color: var(--clr-card-theme); }
.card--ice    { --clr-card-theme: var(--clr-ice); border-color: var(--clr-card-theme); }
.card--mint   { --clr-card-theme: var(--clr-mint); border-color: var(--clr-card-theme); }
.card--muted   { border-color: var(--clr-background-muted); }

.card .dash {
    background-color: var(--clr-card-theme);
}

.card--dark {
    --clr-card-theme: var(--clr-cobalt-dark);
    background-color: var(--clr-card-theme);
    color: var(--clr-text-light);
}

.card--dark.card--cobalt {
    --clr-card-theme: var(--clr-cobalt-dark);
}

.card--dark.card--ice {
    --clr-card-theme: var(--clr-ice-dark);
}

.card--dark.card--mint {
    --clr-card-theme: var(--clr-mint-dark);
}

.card--dark .card__title {
    color: var(--clr-text-light);
}

.card--dark .dash {
    background-color: currentColor;
}

.card--rounded {
    border-radius: 20px;
}

.card--small .card__body {
    padding: .75rem 1rem;
}

.dash {
    display: inline-block;
    width: 2em;
    height: 2px;
    vertical-align: middle;
    background-color: currentColor;
    transform: translateY(-50%);
}

.dash--cobalt { background-color: var(--clr-cobalt); }
.dash--ice    { background-color: var(--clr-ice); }
.dash--mint   { background-color: var(--clr-mint); }

.wheel,
.wheel__svg {
    width: 100%;
}

.sector { cursor: pointer; transform-origin: 350px 390px; transition: filter .24s var(--ease), transform .24s var(--ease); }
.sector:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.sector--active { filter: brightness(1.12) saturate(1.1); transform: scale(1.018); }

.toast {
    padding: 1rem;
    border-radius: var(--border-radius-md);
    display: block;
    text-align: center;
    font-size: .85rem;
    margin: 0 20px;
}

.toast--cobalt {
    background-color: var(--clr-background-cobalt);
    border: 1px solid var(--clr-border-cobalt);
    color: var(--clr-cobalt-dark);
}

.breadcrumbs {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: .75rem 0;
    font-family: var(--fnt-family-tertiary);
}

.breadcrumbs__entry {
    font-size: .7rem;
    color: var(--clr-theme);
}

.post-header__kicker {
    font-family: var(--fnt-family-tertiary);
    font-size: .7rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.post-header__title {
    margin-top: 0;
}

.upcoming-events {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.upcoming-event {
	display: flex;
	flex-direction: column;
    padding: .5em 1em;
    background-color: var(--clr-background-cobalt);
    border-radius: .75em;
    border: 1px solid var(--clr-border-cobalt);
    font-size: .85rem;
	line-height: 1.1;
	gap: .35rem;
	font-size: .9rem;
}

.upcoming-event__datetime {
	font-family: var(--fnt-family-tertiary);
    font-size: .65rem;
}

.upcoming-event__title {
	font-weight: bold;
}

.upcoming-event__meta {
	opacity: .6;
}

.badge {
    display: flex;
    align-items: center;
    padding: .5em 1em;
    gap: .5em;
    background-color: var(--clr-background);
    border-radius: .75em;
    box-shadow: var(--shadow-sm);
    border: 1px solid #eeeeee;
    font-family: var(--fnt-family-tertiary);
    font-size: .65rem;
}

.badge--cobalt {
    background-color: var(--clr-background-cobalt);
    border-color: var(--clr-border-cobalt);
}

.badge--ice {
    background-color: var(--clr-background-ice);
    border-color: var(--clr-border-ice);
}

.badge--mint {
    background-color: var(--clr-background-mint);
    border-color: var(--clr-border-mint);
}

.aspect-4-3 {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Wheel
--------------------------------------------- */

.wheel-wrap{
    width: 100%;
    max-width: 900px;
  }

  .wheel-svg{
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* each wedge group: base state */
  .segment{
    cursor: pointer;
    transform: translate(0, 0);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    outline: none;
  }
  .segment path{
    stroke: var(--wheel-paper);
    stroke-width: 3;
    transition: filter 220ms ease, opacity 220ms ease;
  }

  .segment .icon-glyph{
    stroke: none;
    fill: var(--wheel-ring);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .segment .seg-label{
    fill: var(--wheel-ring);
    font-size: 15px;
    font-weight: normal;
    text-anchor: middle;
    pointer-events: none;
    font-family: var(--fnt-family-primary);
  }

  /* hover / focus: nudge outward along the wedge's own radial axis + brighten */
  .segment:hover,
  .segment:focus-visible{
    transform: translate(var(--wheel-tx), var(--wheel-ty));
  }

  .segment:focus-visible path{
    stroke: var(--wheel-ink);
  }

  /* center panel, sitting in the donut hole — content swaps on hover/focus */
  .center-panel{
    pointer-events: none; /* clicks pass through to whatever's beneath the hole */
  }
  .center-bg{
    fill: #ffffff;
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .center-panel.is-visible .center-bg{
    opacity: 1;
  }
  .center-title{
    fill: var(--clr-cobalt);
    font-family: var(--fnt-family-secondary);
    font-size: 18px;
    font-weight: bold;
    text-anchor: middle;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease 30ms, transform 200ms ease 30ms;
  }
  .center-body tspan{
    fill: var(--wheel-ink-60);
    font-size: 13px;
  }
  .center-body{
    text-anchor: middle;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease 60ms, transform 200ms ease 60ms;
  }
  .center-idle{
    fill: var(--wheel-ink-60);
    font-size: 13.5px;
    text-anchor: middle;
    transition: opacity 200ms ease;
  }
  .center-panel.is-visible .center-title,
  .center-panel.is-visible .center-body{
    opacity: 1;
    transform: translateY(0);
  }
  .center-panel.is-visible .center-idle{
    opacity: 0;
  }

  /* small arrow glyphs in the gaps between wedges, signaling a path/flow */
  .flow-arrow{
    pointer-events: none;
    fill: var(--wheel-paper);
  }

  @media (prefers-reduced-motion: reduce){
    .segment, .segment path, .segment .icon-glyph,
    .center-bg, .center-title, .center-body, .center-idle{
      transition: none;
    }
  }

/* Courses
--------------------------------------------- */

.courses-header {
    background-color: var(--clr-cobalt);
    box-shadow: 0 16px 32px rgba(0, 47, 167, .2);
    color: var(--clr-text-light);
}

.courses-header a {
    color: var(--clr-text-light);
}

.courses-header__title {
    font-size: 2rem;
    color: var(--clr-text-light);
    margin: 0;
    margin-bottom: 2rem;
}

.course-card {
    --clr-card: var(--clr-cobalt);
    background-color: var(--clr-background);
    border-radius: var(--border-radius-lg);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
    border-top: 4px solid var(--clr-card);
    position: relative;
    display: block;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.course-card:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 16px 0px;
}

.course-card--featured {
    --clr-card: var(--clr-mint);
}

.course-card__title a {
    color: var(--clr-card);
}

.course-card__meta,
.course-card__body {
    padding: 1.5rem;
}

.course-card__meta {
    background-color: var(--clr-background-cobalt);
    border-right: 4px solid var(--clr-card);
}

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

.course-card__time {
    opacity: .75;
}

.course-card__price {
    display: flex;
    align-items: center;
    padding: .35em .65em;
    gap: .5em;
    background-color: var(--clr-background-cobalt);
    border: 1px solid var(--clr-border-cobalt);
    border-radius: .75em;
    box-shadow: var(--shadow-sm);
    font-family: var(--fnt-family-primary);
    font-size: .8rem;
    font-weight: bold;
}

.course {}

.course__price {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
}

.course__details {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.course__details > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course__details .icon {
    font-size: 1.25rem;
}

.course__details-label {
    font-family: var(--fnt-family-tertiary);
    text-transform: uppercase;
    font-size: .65rem;
    opacity: .6;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.course__details-value {
    font-size: .9rem;
}

.course h4 {
    font-family: var(--font-family-tertiary);
    font-size: .85rem;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--clr-ice-dark);
    letter-spacing: .15em;
    margin-top: 2rem;
}

.course h4:first-child {
    margin-top: 0;
}

.course h2 {
    color: var(--clr-cobalt);
    margin: 1rem 0;
}


/* Base setup — kills default bullets, sets up spacing for the icon */
.icon-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.icon-list li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.icon-list li::before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.75em;
    line-height: 1;
    flex-shrink: 0;

    /* Required for Material Symbols to render correctly */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.icon-list--checkmark li::before {
    content: 'task_alt';
    color: var(--clr-mint);
}


/* UTILITIES
--------------------------------------------- */

/* ── Background utilities ── */
.bg-white          { background-color: var(--clr-background); }
.bg-cobalt         { background-color: var(--clr-background-cobalt); }
.bg-mint           { background-color: var(--clr-background-mint); }
.bg-ice            { background-color: var(--clr-background-ice); }

/* ── Brand color backgrounds ── */
.bg-cobalt-solid       { background-color: var(--clr-cobalt); }
.bg-cobalt-dark        { background-color: var(--clr-cobalt-dark); }
.bg-cobalt-light       { background-color: var(--clr-cobalt-light); }
.bg-mint-solid         { background-color: var(--clr-mint); }
.bg-mint-dark          { background-color: var(--clr-mint-dark); }
.bg-mint-light         { background-color: var(--clr-mint-light); }
.bg-ice-solid          { background-color: var(--clr-ice); }
.bg-ice-dark           { background-color: var(--clr-ice-dark); }
.bg-ice-light          { background-color: var(--clr-ice-light); }

/* ── State backgrounds ── */
.bg-success        { background-color: var(--clr-success); }
.bg-warning        { background-color: var(--clr-warning); }
.bg-danger         { background-color: var(--clr-danger); }

/* ── Text color utilities ── */
.text-cobalt       { color: var(--clr-cobalt); }
.text-cobalt-dark  { color: var(--clr-cobalt-dark); }
.text-cobalt-light { color: var(--clr-cobalt-light); }
.text-mint         { color: var(--clr-mint); }
.text-mint-dark    { color: var(--clr-mint-dark); }
.text-mint-light   { color: var(--clr-mint-light); }
.text-ice          { color: var(--clr-ice); }
.text-ice-dark     { color: var(--clr-ice-dark); }
.text-ice-light    { color: var(--clr-ice-light); }
.text-success      { color: var(--clr-success); }
.text-warning      { color: var(--clr-warning); }
.text-danger       { color: var(--clr-danger); }
.text-base         { color: var(--clr-text); }
.text-light         { color: var(--clr-text-light); }
.text-muted        { opacity: .6; }
.text-lighter       { opacity: .8; }

.text-smaller {font-size: .85em;}
.text-sm {font-size: .9rem;}
.text-xs     {font-size: .8rem;}
.text-xxs     {font-size: .65rem;}
.text-xl { font-size: 2rem;}
.text-upcase {text-transform: uppercase;}
.text-spaced {letter-spacing: .15em;}

.font-tertiary { font-family: var(--fnt-family-tertiary);}

/* ── Border color utilities ── */
.border-cobalt       { border-color: var(--clr-cobalt); }
.border-cobalt-dark  { border-color: var(--clr-cobalt-dark); }
.border-cobalt-light { border-color: var(--clr-cobalt-light); }
.border-mint         { border-color: var(--clr-mint); }
.border-mint-dark    { border-color: var(--clr-mint-dark); }
.border-mint-light   { border-color: var(--clr-mint-light); }
.border-ice          { border-color: var(--clr-ice); }
.border-ice-dark     { border-color: var(--clr-ice-dark); }
.border-ice-light    { border-color: var(--clr-ice-light); }
.border-success      { border-color: var(--clr-success); }
.border-warning      { border-color: var(--clr-warning); }
.border-danger       { border-color: var(--clr-danger); }
.border-rounded-sm { border-radius: .75em;}

/* ── Fill utilities (SVG icons) ── */
.fill-cobalt       { fill: var(--clr-cobalt); }
.fill-mint         { fill: var(--clr-mint); }
.fill-ice          { fill: var(--clr-ice); }
.fill-success      { fill: var(--clr-success); }
.fill-warning      { fill: var(--clr-warning); }
.fill-danger       { fill: var(--clr-danger); }

/* ── Fill utilities (SVG icons) ── */
.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

/* WOOCOMMERCE
--------------------------------------------- */

.wc-block-checkout__guest-checkout-notice {
    display: none !important;
}

@container (min-width: 700px) {
    .wc-block-checkout__sidebar {
        top: 140px;
    }
}

.wp-block-woocommerce-checkout-order-summary-block {
    background-color: var(--clr-background);
    border-radius: var(--border-radius-md);
}

.wc-block-components-order-summary-item__image {
    display: none !important;
}

.wc-block-components-additional-fields-list > dt {
    font-family: var(--fnt-family-tertiary);
    font-size: .75rem;
    opacity: .6;
    line-height: 1.25;
    color: #333;
    font-weight: 400;
    text-transform: uppercase;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
    line-height: 1.25;
}

.wc-block-components-additional-fields-list > dd {
    line-height: 1.25;
}

/* OVERRIDES
--------------------------------------------- */

.uk-navbar-dropdown {
    border-radius: 8px;
    width: 280px;
}

.uk-offcanvas-bar {
    background-color: var(--clr-background);
}

.uk-offcanvas-close {
    color: var(--clr-text) !important;
}

.uk-select, .uk-input, .uk-textarea {
    border-radius: var(--border-radius-sm);
    border-color: var(--clr-border-cobalt);
    background-color: var(--clr-background-cobalt);
    color: var(--clr-text);
    font-family: var(--fnt-family-tertiary);
    font-size: .8rem;
}

.courses-filters .uk-select,
.courses-filters .uk-input {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--clr-text-light);
}

.courses-filters .uk-input:focus, 
.courses-filters .uk-select:focus {
    border-color: rgba(255, 255, 255, 1);
}

.courses-filters .uk-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.courses-filters .uk-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-description-list > dt {
    font-family: var(--fnt-family-tertiary);
    font-size: .75rem;
    opacity: .6;
    line-height: 1.25;
}

.uk-description-list > dd {
    line-height: 1.25;
}

.uk-description-list-divider>dt:nth-child(n+2) {
    margin-top: 10px;
    padding-top: 10px;
}

.uk-form-label {
    font-family: var(--fnt-family-tertiary);
    font-size: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hf-message {
    padding: 1.5rem;
    background-color: var(--clr-background);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--clr-background);
}

.hf-message-success {
    border-top: 4px solid var(--clr-mint);
}

/* MEDIA QUERIES
--------------------------------------------- */

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 640px) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 960px) {}

/* Large Devices, wide Screens */
@media only screen and (min-width : 1200px) {}

/* Extra large Devices */
@media only screen and (min-width : 1400px) {}