/* 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);
}

/* 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;
}

.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: absolute;
    right: 2rem;
    bottom: 2rem;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.18);
    padding: .25rem 1rem 1rem 1rem;
    z-index: 2;
    border-radius: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.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;
}

.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--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;
}

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

.stack > * {
    margin: 0;
}

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

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

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

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

.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: block;
    margin-bottom: 2rem;
}

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

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

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

.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 .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;
}

.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;
}

/* 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-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);
}

/* WORDPRESS
--------------------------------------------- */


/* 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 {
    border-radius: 8px;
    border-color: var(--clr-border-cobalt);
    background-color: var(--clr-background-cobalt);
    color: var(--clr-text);
}


/* 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) {}