/*
Breakpoints
*/

/* $bp-xs: 370px;
$bp-sm: 425px;
$bp-md: 600px;
$bp-tablet: 750px;
$bp-lg: 1100px;
$bp-1200: 1200px;
$bp-column: 1300px;
$bp-xl: 1440px;
$bp-1600: 1600px;
$bp-1800: 1800px; */

/*
CSS Variables
*/

:root {
  /* Font-family
  ---------------------------------- */
  --font-sans-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-sans: 'proxima-nova', var(--font-sans-base); /* 400 (regular), 700 (bold) */
  --font-wide: 'proxima-nova-extra-wide', var(--font-sans-base); /* 700 */
  --font-serif: 'guyot-headline', 'Georgia', 'Iowan Old Style',
    'Palatino Linotype', 'URW Palladio L', P052, serif; /* 600, 900 */
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;

  /* Font-size
  ---------------------------------- */
  --base-font-size: 17px;
  /* @link https://utopia.fyi/type/calculator/?c=320,16,1.2,1600,22,1.25,8,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --font-size--3: clamp(0.5787rem, 0.5474rem + 0.1566vw, 0.704rem);
  --font-size--2: clamp(0.6944rem, 0.6481rem + 0.2319vw, 0.88rem);
  --font-size--1: clamp(0.8333rem, 0.7667rem + 0.3333vw, 1.1rem);
  --font-size-0: clamp(1rem, 0.9063rem + 0.4688vw, 1.375rem);
  --font-size-1: clamp(1.2rem, 1.0703rem + 0.6484vw, 1.7188rem);
  --font-size-2: clamp(1.44rem, 1.2629rem + 0.8855vw, 2.1484rem);
  --font-size-3: clamp(1.728rem, 1.4886rem + 1.1969vw, 2.6855rem);
  --font-size-4: clamp(2.0736rem, 1.7528rem + 1.6042vw, 3.3569rem);
  --font-size-5: clamp(2.4883rem, 2.0614rem + 2.1348vw, 4.1962rem);
  --font-size-6: clamp(2.986rem, 2.4212rem + 2.824vw, 5.2452rem);
  --font-size-7: clamp(3.5832rem, 2.8398rem + 3.7167vw, 6.5565rem);
  --font-size-8: clamp(4.2998rem, 3.3259rem + 4.8698vw, 8.1956rem);

  /* Margin and Padding
  ---------------------------------- */
  /* @link https://utopia.fyi/space/calculator/?c=320,16,1.2,1600,22,1.25,8,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|xs-2xl&g=s,l,xl,12 */
  --space-3xs: clamp(0.25rem, 0.2188rem + 0.1563vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4531rem + 0.2344vw, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6719rem + 0.3906vw, 1.0625rem);
  --space-s: clamp(1rem, 0.9063rem + 0.4688vw, 1.375rem);
  --space-m: clamp(1.5rem, 1.3594rem + 0.7031vw, 2.0625rem);
  --space-l: clamp(2rem, 1.8125rem + 0.9375vw, 2.75rem);
  --space-xl: clamp(3rem, 2.7188rem + 1.4063vw, 4.125rem);
  --space-2xl: clamp(4rem, 3.625rem + 1.875vw, 5.5rem);
  --space-3xl: clamp(6rem, 5.4375rem + 2.8125vw, 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1406rem + 0.5469vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5rem, 0.3594rem + 0.7031vw, 1.0625rem);
  --space-xs-s: clamp(0.75rem, 0.5938rem + 0.7813vw, 1.375rem);
  --space-s-m: clamp(1rem, 0.7344rem + 1.3281vw, 2.0625rem);
  --space-m-l: clamp(1.5rem, 1.1875rem + 1.5625vw, 2.75rem);
  --space-l-xl: clamp(2rem, 1.4688rem + 2.6563vw, 4.125rem);
  --space-xl-2xl: clamp(3rem, 2.375rem + 3.125vw, 5.5rem);
  --space-2xl-3xl: clamp(4rem, 2.9375rem + 5.3125vw, 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.5625rem + 2.1875vw, 2.75rem);
  --space-xs-2xl: clamp(0.75rem, -0.4375rem + 5.9375vw, 5.5rem);

  /* Named spaces */
  --space-cluster: var(--space-m);
  --space-gap: var(--space-m);
  --space-stack: var(--space-m);
  --space-section: var(--space-2xl);

  --site-gutter: var(--space-s);
  --search-gutter: auto;
  --header-gap: var(--space-2xs);
  --header-height: calc((var(--space-xs) * 2) + var(--font-size-0) * 2.9);

  /* Other Measures
  ---------------------------------- */
  --letter-spacing-s: -0.0625rem;
  --letter-spacing: 0.0625rem;
  --measure-s: 45ch;
  --measure: 60ch;
  --radius-s: 3px;
  --radius: 8px;
  --radius-l: 50px;

  /* Colors
  ---------------------------------- */
  --color-white: #fff;
  --color-black: #000;
  --color-text-gray: #6b6b6b;

  /* Status colors */
  --color-success: #4b804d;
  --color-success-l: #699e6b;
  --color-success-ll: #d5efd3;
  --color-success-pale: #f0feed;

  --color-warning: hsl(41, 99%, 61%);
  --color-warning-l: #ffd652;
  --color-warning-pale: #fffae0;

  --color-danger: #ed3636;
  --color-danger-l: #f92f2f;
  --color-danger-ll: #ff7575;
  --color-danger-pale: #fff4f4;

  /* Warm gray */
  --color-warm-gray-ll: #fffaf1;
  --color-warm-gray-l: #f4efe7;
  --color-warm-gray: #e7e5df;
  --color-warm-gray-d: #cac9c4;
  --color-warm-gray-dd: #2a2a28;

  /* Cool gray */
  --color-cool-gray-ll: #f7f7f7;
  --color-cool-gray-l: #eee;
  --color-cool-gray: #dedede;
  --color-cool-gray-d: #bbb;
  --color-cool-gray-dd: hsl(60, 2%, 16%);

  /* Blue */
  --color-blue-light: hsl(198, 100%, 95%);
  --color-blue-bright: #3252ec;
  --color-blue-standard: #336194;
  --color-blue-dark: hsl(208, 51%, 22%);
  --color-blue-earth: #252b37;
  --color-blue-light-l: hsla(198, 100%, 95%, 0.1);
  --color-blue-border: #557082;

  /* Green */
  --color-green-light: hsl(148, 82%, 93%);
  --color-green-bright: hsl(145, 59%, 59%);
  --color-green-standard: #5d7c3c; /* #749b4b #5D7C3C */
  --color-green-dark: hsl(88, 35%, 25%);
  --color-green-earth: hsl(70, 25%, 18%);
  --color-green-light-l: hsla(148, 82%, 93%, 0.1);
  --color-green-hover: hsl(145, 59%, 69%);

  /* Yellow */
  --color-yellow-light: hsl(41, 100%, 92%);
  --color-yellow-bright: hsl(41, 99%, 56%);
  --color-yellow-standard: #926d26; /* #B5872F #926D26 */
  --color-yellow-dark: #694f20;
  --color-yellow-earth: hsl(31, 47%, 21%);
  --color-yellow-light-l: hsla(41, 100%, 92%, 0.1);
  --color-yellow-hover: hsl(41, 99%, 66%);

  /* Red */
  --color-red-light: hsl(21, 100%, 92%);
  --color-red-bright: hsl(16, 100%, 56%);
  --color-red-standard: #822629;
  --color-red-dark: #47171a;
  --color-red-earth: hsl(9, 45%, 15%);
  --color-red-light-l: hsla(21, 100%, 92%, 0.1);
  --color-red-hover: hsl(16, 100%, 66%);

  /* Purple */
  --color-purple-light: hsl(244, 41%, 93%);
  --color-purple-bright: #824ab4;
  --color-purple-standard: #552b6f;
  --color-purple-dark: hsl(278, 40%, 17%);
  --color-purple-earth: hsl(304, 21%, 13%);
  --color-purple-light-l: hsla(244, 41%, 93%, 0.1);

  /* Utility */
  --color-border: var(--color-cool-gray);

  /* Theme (default/blue) */
  --color-theme-dark: var(--color-blue-earth);
  --color-theme-dark-overlay: hsla(220, 20%, 18%, 95%);
  --color-theme-dark-l: hsl(220, 20%, 28%); /* blue-earth + 10% l */
  --color-theme-light: var(--color-blue-light);
  --color-theme-light-l: hsl(198, 100%, 100%); /* blue-light + 5% l */
  --color-theme-light-alpha: hsla(198, 100%, 95%, 10%); /* blue-light + 10% a */
  --color-theme-text-dark: var(--color-blue-earth);
  --color-theme-text-light: var(--color-warm-gray-ll);
  --color-theme-text-gray: var(--color-text-gray);
  --color-theme-text-alpha: hsla(198, 100%, 95%, 55%); /* blue-light + 55% a */
  --color-theme-border: var(--color-border);
  --color-theme-accent: var(--color-blue-standard);
  --color-theme-accent-hover: var(--color-theme-dark-l);

  /* Theme (green) */
  &:has([data-color-theme='green']) {
    --color-theme-dark: var(--color-green-earth);
    --color-theme-dark-overlay: hsla(70, 25%, 18%, 95%);
    --color-theme-dark-l: hsl(70, 25%, 28%);
    --color-theme-light: var(--color-green-light);
    --color-theme-light-l: hsl(148, 82%, 98%);
    --color-theme-light-alpha: hsla(148, 82%, 93%, 10%);
    --color-theme-text-dark: var(--color-green-earth);
    --color-theme-text-alpha: hsla(148, 82%, 93%, 55%);
    --color-theme-accent: var(--color-green-standard);
    --color-theme-accent-hover: var(--color-theme-dark-l);
  }

  /* Theme (yellow) */
  &:has([data-color-theme='yellow']) {
    --color-theme-dark: var(--color-yellow-earth);
    --color-theme-dark-overlay: hsla(31, 47%, 21%, 95%);
    --color-theme-dark-l: hsl(31, 47%, 31%);
    --color-theme-light: var(--color-yellow-light);
    --color-theme-light-l: hsl(41, 100%, 97%);
    --color-theme-light-alpha: hsla(41, 100%, 92%, 10%);
    --color-theme-text-dark: var(--color-yellow-earth);
    --color-theme-text-alpha: hsla(41, 100%, 92%, 55%);
    --color-theme-accent: var(--color-yellow-standard);
    --color-theme-accent-hover: var(--color-theme-dark-l);
  }

  /* Theme (red) */
  &:has([data-color-theme='red']) {
    --color-theme-dark: var(--color-red-earth);
    --color-theme-dark-overlay: hsla(9, 45%, 15%, 95%);
    --color-theme-dark-l: hsl(9, 45%, 25%);
    --color-theme-light: var(--color-red-light);
    --color-theme-light-l: hsl(21, 100%, 97%);
    --color-theme-light-alpha: hsla(21, 100%, 92%, 10%);
    --color-theme-text-dark: var(--color-red-earth);
    --color-theme-text-alpha: hsla(21, 100%, 92%, 55%);
    --color-theme-accent: var(--color-red-standard);
    --color-theme-accent-hover: var(--color-theme-dark-l);
  }

  /* Theme (purple) */
  &:has([data-color-theme='purple']) {
    --color-theme-dark: var(--color-purple-earth);
    --color-theme-dark-overlay: hsla(304, 21%, 13%, 95%);
    --color-theme-dark-l: hsl(278, 40%, 24%);
    --color-theme-light: var(--color-purple-light);
    --color-theme-light-l: hsl(244, 41%, 98%);
    --color-theme-light-alpha: hsla(244, 41%, 93%, 10%);
    --color-theme-text-dark: var(--color-purple-earth);
    --color-theme-text-alpha: hsla(244, 41%, 93%, 55%);
    --color-theme-accent: var(--color-purple-standard);
    --color-theme-accent-hover: var(--color-theme-dark-l);
  }

  /* Motion
  ---------------------------------- */
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

  --ease-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-authentic: cubic-bezier(0.4, 0, 0.2, 1);
  --cubic-wipe: cubic-bezier(0.79, 0.14, 0.15, 0.86);

  @media (min-width: 425px) {
    --search-gutter: 6.75rem;
    --site-gutter: var(--space-l);
  }

  @media (min-width: 500px) {
    --header-height: calc((var(--space-xs) * 2) + var(--font-size-0) * 2.75);
  }

  @media (min-width: 600px) {
    --header-gap: var(--space-xs);
    --header-height: calc(var(--space-s) * 2 + (var(--space-xs) * 2) + var(--font-size-0) * 1.45);
  }

  @media (min-width: 900px) {
    --search-gutter: 7.25rem;
  }

  @media (min-width: 1100px) {
    --header-height: calc(var(--space-s) * 2 + (var(--space-xs) * 2) + var(--font-size-0) * 1.45 - 1px);
  }

  @media (min-width: 1300px) {
    --search-gutter: 8rem;
  }

  @media (min-width: 1800px) {
    --site-gutter: var(--space-2xl);
  }

  /* Ultra wide screen text accommodation */

  @media (min-width: 2000px) {
    --base-font-size: 18px;
  }

  @media (min-width: 2250px) {
    --base-font-size: 20px;
  }

  @media (min-width: 2500px) {
    --base-font-size: 22px;
  }

  @media (min-width: 2750px) {
    --base-font-size: 24px;
  }

  @media (min-width: 3000px) {
    --base-font-size: 26px;
  }

  @media (min-width: 3200px) {
    --base-font-size: 28px;
  }
}

/*
Utilities 
*/

.cover-link {
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

/*
Composition 
*/

ul.grid,
ul.cluster {
  list-style: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* 
Cluster 
------------------------ */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-cluster);
  justify-content: flex-start;
  align-items: center;
}

/* 
Stack 
------------------------ */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  > * {
    margin-block: 0;
  }

  > * + * {
    margin-block-start: var(--space-stack);
  }

  &:only-child {
    block-size: 100%;
  }

  &[data-split-before='last'] {
    > :nth-last-child(2) {
      margin-block-end: auto;
    }
  }
}

/* 
Layer Stack 
------------------------ */
.layer-stack {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;

  > * {
    grid-row-start: 1;
    grid-column-start: 1;
  }
}

/*
Global EFCA 
*/

/* 
Layout
------------------------ */
.search-col {
  padding-inline: var(--site-gutter);

  @media (min-width: 1440px) {
    padding-inline: calc(
      var(--site-gutter) + var(--search-gutter) + var(--header-gap)
    );
  }
}

/* Setup vars */
.efca-header,
.efca-footer {
  /* Use OG color theme for now */
  /* --color-theme-dark
  --color-theme-dark-overlay
  --color-theme-dark-l
  --color-theme-text-dark */
  --color-og-dark: hsl(205, 56%, 13%);
  --color-og-dark-overlay: hsla(205, 56%, 13%, 80%);
  --color-og-dark-l: hsla(205, 56%, 23%); /* +10% l */
  --color-og-light: white;
  --color-og-text-dark: var(--color-og-dark);

  /* Global */
  --measure-s: 45ch;
  --color-white: #fff;
  --color-gray-l: var(--color-cool-gray-l);
  --color-gray-ll: var(--color-cool-gray-ll);
  --color-gray: var(--color-cool-gray);
  --color-gray-d: var(--color-cool-gray-d);

  /* Color theme */
  --color-bg-dark: var(--color-og-dark);
  --color-bg-dark-overlay: var(--color-og-dark-overlay);
  --color-bg-dark-l: var(--color-og-dark-l);
  --color-bg-light: var(--color-og-light);
  --color-bg-light-l: var(--color-theme-light-l);
  --color-bg-light-alpha: var(--color-theme-light-alpha);

  --color-text-dark: var(--color-og-text-dark);
  --color-text-light: var(--color-og-light);
  --color-text-gray: var(--color-theme-text-gray);
  --color-text-alpha: var(--color-theme-text-alpha);

  --color-accent: var(--color-theme-accent);
  --color-accent-hover: var(--color-theme-accent-hover);
  --color-divider: var(--color-theme-border);

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

  *:focus-visible {
    outline-offset: 5px;
  }
}

/* 
EFCA Header
------------------------ */
.efca-header {
  background-color: var(--color-bg-dark);
  border-block-end: 1px solid var(--color-bg-dark-l);
  font-size: var(--font-size--1);
  inline-size: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: border-color 0.1s;
  z-index: 9999;

  @media (min-width: 600px) {
    padding-block: calc(var(--space-s) / 2);
  }

  button {
    &:active {
      transform: translate3d(0, 2px, 0);
    }

    svg {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }

  a {
    text-decoration-style: solid;
    text-decoration-color: transparent;
    text-underline-offset: 0.2ex;
    transition: background-color 0.2s, border-color 0.2s, color 0.1s,
      text-decoration-color 0.1s;

    &:hover,
    &:focus-visible {
      text-decoration-color: inherit;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    ul,
    ul li + li {
      margin-block-start: var(--space-s);

      @media (min-width: 750px) {
        margin-block-start: var(--space-xs);
      }

      @media (min-width: 1200px) {
        margin-block-start: var(--space-2xs);
      }
    }
  }
}

.efca-header__inner {
  inline-size: 100%;
  padding-block: var(--space-xs);
  padding-inline: var(--site-gutter);
  position: relative;
  z-index: 1;

  @media (min-width: 600px) {
    border-radius: var(--radius);
    inline-size: calc(100% - var(--site-gutter));
    margin-inline-start: calc(var(--site-gutter) / 2);
    padding-inline: calc(var(--site-gutter) * 0.5);
    transition: background-color 0s linear;
  }
}

.efca-header__primary.cluster {
  column-gap: var(--header-gap);
  justify-content: space-between;
  position: relative;
  row-gap: var(--space-xs);
  z-index: 1;
}

.efca-header__actions.cluster {
  flex-grow: 1;
  flex-wrap: nowrap;
  gap: var(--header-gap);
  justify-content: flex-end;
}

/* 
EFCA Overlay / is overlaid
------------------------ */
body:has(.efca-header) .site-main, 
body:has(.efca-header) #main {
  padding-block-start: var(--header-height);
}

.efca-nav-overlay {
  background-color: transparent;
  bottom: 0;
  display: block;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color 0.2s;
  z-index: 0;
}

[data-is-efca-overlaid='true'] {
  .site-main,
  #main {
    inline-size: 100%;
    position: fixed;
    top: 0;
  }

  .efca-header {
    background-color: transparent;
    border-color: transparent;
    min-block-size: 100vh;
    padding-block-end: var(--space-l);
    /* scrollbar-gutter: stable; */

    /* @media (min-width: 600px) {
      overflow: auto;
    } */

    &::before {
      background-color: var(--color-bg-dark);
      block-size: var(--header-height);
      content: '';
      inline-size: 100%;
      position: absolute;
      top: 0;
    }
  }

  .efca-nav-overlay {
    background-color: var(--color-bg-dark);
    background-color: var(--color-bg-dark-overlay);
    backdrop-filter: blur(40px);
    pointer-events: all;
    overscroll-behavior: contain;
  }
}

/* 
EFCA Search or Nav active
------------------------ */
[data-is-efca-search-open='true'],
[data-is-efca-nav-open='true'] {
  .efca-header__inner {
    background-color: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding-block-end: var(--space-3xl);

    @media (min-width: 600px) {
      padding-block-end: var(--space-xs);
      transition: background-color 0.1s linear;
    }
  }

  .efca-header__primary {
    @media (width < 600px) {
      background-color: var(--color-white);
      position: sticky;
      top: var(--space-s);

      &::before {
        background-color: var(--color-white);
        block-size: calc(100% + 2 * var(--space-s));
        border-block-end: 1px solid var(--color-border);
        content: '';
        display: block;
        inline-size: calc(100% + 2 * var(--site-gutter));
        left: calc(-1 * var(--site-gutter));
        position: absolute;
        top: calc(-1 * var(--space-s));
        z-index: -1;
      }
    }
  }

  .efca-sitename,
  .efca-trigger.efca-trigger--search,
  #search-input,
  .efca-search-input-icon,
  .efca-search-form__submit,
  .efca-nav {
    color: var(--color-text-dark);
  }

  .efca-trigger--nav {
    background-color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-bg-light);

    &:hover,
    &:focus-visible {
      background-color: var(--color-bg-dark-l);
      border-color: var(--color-bg-dark-l);
    }
  }

  .efca-trigger.efca-trigger--search {
    border-color: var(--color-gray);

    &:hover,
    &:focus-visible {
      background-color: var(--color-gray);
      border-color: var(--color-gray);
    }
  }
}

[data-is-efca-search-open='true'] {
  .efca-header__primary::before {
    block-size: calc(200% + 3 * var(--space-s));
  }

  .efca-trigger.efca-trigger--search {
    background-color: var(--color-gray-l);
    border-color: var(--color-gray-l);
    justify-content: center;

    @media (min-width: 600px) {
      align-self: center;
      inline-size: 3.5rem;
      padding-inline: var(--space-xs);
    }

    @media (min-width: 750px) {
      block-size: 2.85rem;
      inline-size: 2.85rem;
    }

    @media (min-width: 1100px) {
      block-size: 3rem;
      inline-size: 3rem;
    }

    @media (min-width: 1300px) {
      block-size: 3.125rem;
      inline-size: 3.125rem;
    }

    @media (min-width: 1600px) {
      block-size: 3.25rem;
      inline-size: 3.25rem;
    }

    .efca-trigger__text {
      opacity: 0;
      position: absolute;
      transition-delay: 0s;
      visibility: hidden;
    }

    svg {
      block-size: 1.125rem;
      inline-size: 1.125rem;
      opacity: 0;
      transition-delay: 0s;
    }

    .icon--burger {
      opacity: 1;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--color-gray);
      border-color: var(--color-gray);
    }
  }

  .efca-search-form {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.1s;
    visibility: visible;

    button:hover {
      cursor: pointer;
    }

    input::placeholder {
      color: var(--color-text-dark);
    }

    input::-ms-input-placeholder {
      color: var(--color-text-dark);
    }

    @media (width < 750px) {
      block-size: 100%;
      position: absolute;
      top: calc(100% + var(--space-xs));
    }
  }

  .efca-search-form__submit {
    color: var(--color-gray-d);
    transition: background-color 0.2s, color 0.2s;
  }
}

/*
Nav
-------------------------- */
.efca-nav {
  color: var(--color-white);

  + .efca-nav-featured {
    margin-block-start: var(--space-xl);
  }
}

.efca-nav__list {
  display: grid;
  gap: var(--space-gap);
  grid-template-columns: 1fr;
  row-gap: var(--space-l);

  @media (min-width: 600px) {
    column-gap: var(--space-xl);
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 750px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(5, 1fr);
  }

  @media (min-width: 1600px) {
    column-gap: var(--space-xl);
  }
}

.efca-nav__link {
  color: var(--color-text-gray);
  font-size: var(--font-size-0);
  line-height: 1.2;

  @media (min-width: 1200px) {
    font-size: var(--font-size--1);
  }

  &:hover,
  &:focus-visible {
    color: var(--color-accent);
  }
}

.efca-nav__parent-link {
  color: var(--color-text-dark);
  display: inline-block;
  font-size: var(--font-size-1);
  font-weight: 600;
  line-height: 1.2;
  position: relative;

  @media (min-width: 1200px) {
    font-size: var(--font-size-0);
  }

  &::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3412 10.4194C18.5765 10.1773 18.5765 9.77882 18.3412 9.53664L11.6626 2.66164C11.4273 2.41945 11.0403 2.41945 10.805 2.66164C10.5698 2.90382 10.5698 3.30226 10.805 3.54445L16.4477 9.35304H2.12667C1.79275 9.35304 1.51953 9.63429 1.51953 9.97804C1.51953 10.3218 1.79275 10.603 2.12667 10.603H16.4477L10.805 16.4116C10.5698 16.6538 10.5698 17.0523 10.805 17.2944C11.0403 17.5366 11.4273 17.5366 11.6626 17.2944L18.3412 10.4194Z' fill='%231B3953'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    block-size: 0.75em;
    content: '';
    display: inline-block;
    inline-size: 0.75em;
    left: var(--space-3xs);
    margin-inline-end: -0.75em;
    position: relative;
  }

  &:hover,
  &:focus-visible {
    color: var(--color-accent);
  }
}

/*
Nav apps
-------------------------- */
.efca-nav-apps {
  --space-cluster: var(--space-2xs);

  @media (min-width: 600px) {
    border-top: 1px solid var(--color-divider);
    padding-block-start: var(--space-stack);
  }

  @media (min-width: 750px) {
    --space-cluster: var(--space-xs);

    padding-block-start: var(--space-s);
  }
}

.efca-nav-apps__list {
  row-gap: 0;

  @media (min-width: 425px) {
    column-gap: var(--space-s);
  }

  @media (min-width: 600px) {
    gap: var(--space-2xs);
  }

  li {
    flex-basis: 100%;

    @media (min-width: 425px) {
      flex-basis: calc(50% - var(--space-xs));
    }

    @media (min-width: 600px) {
      flex-basis: auto;
    }
  }
}

.efca-nav-apps__link {
  color: var(--color-text-dark);
  font-size: var(--font-size-0);
  font-weight: 500;
  border-block-end: 1px solid var(--color-border);
  padding: var(--space-s) 0;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

  @media (min-width: 600px) {
    --space-cluster: var(--space-3xs);

    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    padding: var(--space-2xs) var(--space-s);
  }

  @media (min-width: 750px) {
    font-size: var(--font-size--1);
    padding-inline: var(--space-xs);
  }

  &:hover,
  &:focus-visible {
    color: var(--color-accent);

    @media (min-width: 600px) {
      background-color: var(--color-bg-dark-l);
      border-color: var(--color-bg-dark-l);
      color: var(--color-bg-light);

      svg path {
        fill: var(--color-bg-light);
      }
    }
  }

  .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    flex-shrink: 0;

    svg {
      block-size: 100%;
      inline-size: 100%;
    }

    path {
      fill: var(--color-accent);
      transition: fill 0.2s;
    }
  }
}

/*
Submenu
-------------------------- */
.efca-header__submenus {
  @media (min-width: 600px) {
    padding-inline: var(--site-gutter);
    padding-inline: 3.125rem;
  }

  .efca-nav-submenu {
    @media (width < 600px) {
      padding-inline-start: var(--space-s);
    }
  }
}

.efca-submenu {
  --space-stack: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  inline-size: 100%;
  justify-content: flex-end;
  padding-block: var(--space-xl) var(--space-l);
  padding-inline: 0;
  position: absolute;
  visibility: hidden;
  block-size: 0;
  top: 0;
  transition: all 0s;

  > * {
    opacity: 0;
    transform: translate3d(0, calc(1 * var(--space-2xs)), 0);
    transition: opacity 0.4s 0.2s, transform 0.4s 0.2s var(--ease-authentic);

    &:nth-child(2) {
      transition-delay: 0.25s;
    }

    /* &:nth-child(3) {
      transition-delay: 0.3s;
    } */

    /* &:nth-child(4) {
      transition-delay: 0.35s;
    } */
  }

  &[data-is-open='true'] {
    block-size: auto;
    block-size: calc-size(auto, size);
    position: relative;
    visibility: visible;

    @media (min-width: 600px) {
      transition: block-size 0.3s var(--ease-authentic),
        visibility 0.3s var(--ease-authentic);
    }

    @media (width < 750px) {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }

    > * {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  &[data-submenu='search'] {
    padding-block-start: calc(1.25 * var(--space-3xl));

    @media (min-width: 600px) {
      padding-block-start: var(--space-3xl);
    }

    @media (min-width: 750px) {
      padding-block-start: var(--space-xl);
    }

    @media (min-width: 1100px) {
      padding-block-start: var(--space-3xl);
    }

    > * {
      transition-delay: 0.1s;
    }
  }
}

/*
Nav cards
-------------------------- */
.efca-nav-featured {
  --space-gap: var(--space-s);
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  row-gap: var(--space-xs);

  @media (min-width: 1000px) {
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  }
}

.nav-card {
  color: var(--color-text-dark);
  position: relative;
  transition: color 0.3s, transform 0.3s var(--ease-authentic);

  &::before {
    content: '';
    z-index: -1;
    opacity: 0;
    background-color: transparent;
    inline-size: 85%;
    block-size: 50%;
    transition: opacity 0.3s var(--ease-authentic);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    box-shadow: 0px 1.3px 2.2px -5px rgba(0, 0, 0, 0.02),
      0px 3.2px 5.3px -5px rgba(0, 0, 0, 0.028),
      0px 6px 10px -5px rgba(0, 0, 0, 0.035),
      0px 10.7px 17.9px -5px rgba(0, 0, 0, 0.042),
      0px 20.1px 33.4px -5px rgba(0, 0, 0, 0.05),
      0px 48px 80px -5px rgba(0, 0, 0, 0.07);
  }

  a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s,
      text-decoration-color 0.2s;
  }

  &:hover,
  &:focus-within {
    transform: translate3d(0, -0.75ex, 0);

    &::before {
      opacity: 1;
    }

    a {
      color: var(--color-bg-light);
    }

    .nav-card__inner {
      background-color: var(--color-bg-dark-l);
    }

    .nav-card__label {
      background-color: var(--color-bg-dark);
      color: var(--color-bg-light);
    }
  }
}

.nav-card__inner {
  background-color: var(--color-gray-l);
  block-size: 100%;
  border-radius: var(--radius);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: var(--space-s);
  transition: background-color 0.3s;
}

.nav-card__label {
  background-color: var(--color-gray-ll);
  border-radius: var(--radius-l);
  font-family: var(--font-wide);
  font-size: var(--font-size--3);
  font-weight: 600;
  inline-size: fit-content;
  letter-spacing: var(--letter-spacing);
  line-height: 1;
  margin-block-start: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}

.nav-card__title {
  font-size: var(--font-size-0);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  margin-block: var(--space-3xs) 0;

  @media (min-width: 1200px) {
    font-size: var(--font-size--1);
  }
}

/*
Search
-------------------------- */
.efca-search-form {
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 0;
  inline-size: calc(2 * var(--search-gutter));
  inline-size: 100%;
  opacity: 0;
  position: relative;
  transform: scale(0.9);
  transition: inline-size 0s var(--ease-authentic), opacity 0.4s 0s,
    transform 0.2s 0s var(--ease-authentic);
  visibility: hidden;

  @media (min-width: 1440px) {
    inline-size: calc(3.5 * var(--search-gutter));
  }

  input::placeholder {
    color: var(--color-accent);
    transition: color 0.1s;
  }

  input::-ms-input-placeholder {
    color: var(--color-accent);
    transition: color 0.1s;
  }

  * {
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
    font-weight: 500;
    line-height: 1.2;

    @media (min-width: 750px) {
      font-size: var(--font-size--1);
    }
  }

  &:focus-within {
    #search-input {
      background-color: var(--color-gray-l);
      border-color: var(--color-gray-l);
      outline-color: var(--color-accent);
      transition-delay: 0.1s;
    }
  }
}

#search-input {
  background-color: var(--color-gray-l);
  block-size: 100%;
  border: 1px solid var(--color-gray-l);
  border-radius: var(--radius-l);
  box-shadow: none;
  color: var(--color-white);
  inline-size: 100%;
  outline-color: transparent;
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px;
  padding-block: var(--space-2xs);
  padding-inline: calc(0.75rem + var(--space-l))
    calc(var(--space-2xl) + var(--space-xs));
  position: absolute;
  transition: background-color 0.2s, border-color 0.2s, outline-color 0.2s;

  &:hover {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
  }

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
}

.efca-search-form__clear {
  background-color: var(--color-gray-l);
  border: none;
  border-radius: var(--radius-l);
  color: var(--color-text-dark);
  font-size: var(--font-size--3);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  min-inline-size: auto;
  padding: calc(var(--space-xs) / 2) var(--space-2xs);
  position: absolute;
  right: var(--space-xl);
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;

  &:hover,
  &:focus-visible {
    background-color: var(--color-gray);
    color: var(--color-text-dark);
  }
}

.efca-search-input-icon {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 50%;
  color: var(--color-accent);
  display: flex;
  flex-grow: 1;
  inline-size: 24px;
  justify-content: center;
  left: calc(var(--space-s) - 3px);
  min-inline-size: auto;
  pointer-events: none;
  position: absolute;
  transition: color 0.2s;

  svg {
    block-size: 1.25rem;
    fill: currentColor;
    inline-size: 1.25rem;
  }
}

.efca-search-form__submit {
  background-color: var(--color-white);
  color: var(--color-gray);
  inline-size: 2.5rem;
  left: auto;
  right: var(--space-3xs);
  pointer-events: all;
  padding: 0.375rem;
  transition: background-color 0.2s, color 0.2s;

  @media (min-width: 750px) {
    inline-size: 2.25rem;
  }

  @media (min-width: 1300px) {
    inline-size: 2.5rem;
  }

  &[data-active='true'] {
    background-color: var(--color-accent);
    color: var(--color-text-light);
  }

  &[disabled] {
    cursor: default;

    &:active {
      transform: none;
    }
  }

  &:not([disabled]):hover,
  &:not([disabled]):focus-visible {
    background-color: var(--color-accent-hover);
  }

  svg {
    fill: currentColor;
  }
}

/*
Trigger buttons
-------------------------- */
.efca-trigger {
  align-items: center;
  align-self: stretch;
  appearance: none;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-bg-light);
  border-radius: var(--radius-l);
  color: var(--color-text-dark);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size--1);
  font-weight: 500;
  gap: var(--space-2xs);
  inline-size: auto;
  justify-content: center;
  line-height: 1.25;
  padding: calc(var(--space-xs) * 0.85) calc(var(--space-m) * 0.75);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    transform 0.2s;

  @media (min-width: 600px) {
    padding-inline: var(--space-s);
  }

  &.efca-trigger--nav {
    @media (min-width: 600px) {
      inline-size: var(--search-gutter);
    }
  }

  &.efca-trigger--search {
    background-color: transparent;
    border: 1px solid var(--color-text-alpha);
    color: var(--color-bg-light);
    justify-content: flex-start;
    margin-left: calc(-1 * var(--space-2xs));
    transition: background-color 0.2s, border-color 0.2s,
      inline-size 0.2s var(--ease-authentic), transform 0.2s;

    @media (min-width: 600px) {
      inline-size: calc(var(--search-gutter) + var(--space-3xs));
    }

    &:hover,
    &:focus-visible {
      background-color: var(--color-bg-light-alpha);
      border-color: var(--color-bg-light);
    }

    svg {
      opacity: 1;
      transition: opacity 0.1s 0.05s;
    }

    .icon--burger {
      opacity: 0;
      top: 0.5rem;
      transition: opacity 0.1s;
    }
  }

  &:hover,
  &:focus-visible {
    background-color: var(--color-bg-dark-l);
    border-color: var(--color-bg-dark-l);
    color: var(--color-bg-light);
  }

  .icon {
    fill: currentColor;
    flex-shrink: 0;
  }

  &[data-is-open='true'] {
    .icon--burger {
      border-top-color: transparent;
      transition-delay: 0s;

      &::before,
      &::after {
        margin-top: -2px;
        transition: margin 0.1s var(--ease-in-out-quart),
          transform 0.1s 0.1s var(--ease-in-out-quart);
      }

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }
    }
  }

  .icon--burger {
    block-size: 0;
    border-top: 2px solid currentColor;
    display: block;
    inline-size: 1.25rem;
    position: relative;
    transition: border-color 0.1s 0.1s var(--ease-in-out-quart);

    &::before,
    &::after {
      block-size: 0;
      border-top: 2px solid currentColor;
      content: '';
      display: block;
      inline-size: 100%;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: margin 0.1s 0.1s ease-in-out, transform 0.1s ease-in-out;
    }

    &::before {
      margin-top: -8px;
    }

    &::after {
      margin-top: 4px;
    }
  }
}

.efca-trigger__text {
  opacity: 1;
  transition: opacity 0.2s 0.2s;
  visibility: visible;

  @media (width < 600px) {
    display: none;
  }
}

/*
EFCA Sitename 
-------------------------- */
.efca-logo {
  block-size: 2rem;
  color: inherit;
  inline-size: 2rem;
  margin-block-start: -0.125rem;

  @media (min-width: 600px) {
    block-size: 2.5rem;
    inline-size: 2.5rem;
    margin-block-start: -0.25rem;
  }
}

@media (min-width: 1100px) {
  .with-long-sitename {
    &[data-sitename-version='expanded'] {
      .efca-sitename {
        inline-size: 420px;
      }

      .efca-sitename__full {
        content-visibility: visible;
        inline-size: auto;
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.1s;
        transition-duration: 0.2s;
        transition-timing-function: var(--ease-authentic);
      }

      .efca-sitename__short {
        content-visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, 1ch, 0);
        transition-delay: 0s;
        transition-duration: 0.1s;
        transition-timing-function: var(--ease-authentic);
      }
    }

    &[data-sitename-version='collapsed'] {
      .efca-sitename__full {
        content-visibility: hidden;
        opacity: 0;
      }

      .efca-sitename__short {
        content-visibility: visible;
        opacity: 1;
      }
    }
  }
}

.efca-sitename {
  align-items: center;
  border-radius: var(--radius);
  color: var(--color-bg-light);
  display: flex;
  flex-shrink: 0;
  inline-size: var(--search-gutter);
  min-block-size: 3rem;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: transform 0.1s;
  z-index: 3000;

  &:active {
    transform: translate3d(0, 1px, 0);
  }

  .efca-logo {
    fill: currentColor;
  }
}

.efca-sitename__full,
.efca-sitename__short {
  display: block;
  font-weight: 600;
  left: 2.5rem;
  line-height: 1;
  margin-block-start: -0.85rem;
  position: absolute;
  top: 50%;
  transition-property: opacity, transform;
  white-space: nowrap;

  @media (min-width: 600px) {
    left: 3rem;
    margin-block-start: -1rem;
  }
}

.efca-sitename__full {
  content-visibility: hidden;
  display: none;
  font-size: 1.25em;
  inline-size: 0;
  letter-spacing: -0.03125em;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 1ch, 0);
  transition-delay: 0s;
  transition-duration: 0.1s;
  transition-timing-function: var(--ease-authentic);

  @media (min-width: 1100px) {
    display: block;
  }
}

.efca-sitename__short {
  content-visibility: visible;
  font-size: 1.625em;
  line-height: 1.1538461538;
  opacity: 1;
  pointer-events: auto;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-authentic);
}

/*
EFCA Footer
-------------------------- */
.efca-footer {
  background-color: var(--color-bg-dark);
  border-block-start: 1px solid var(--color-bg-dark-l);
  color: var(--color-bg-light);
  font-size: var(--font-size--1);
  padding-block: var(--space-l);
  padding-inline: var(--site-gutter);

  a {
    color: inherit;

    &:hover,
    &:focus-visible {
      color: inherit;
    }
  }

  a:not([class]) {
    color: inherit;
    text-decoration-color: transparent;
    text-underline-offset: 0.2ex;
    transition: text-decoration-color 0.1s;

    &:hover,
    &:focus-visible {
      text-decoration-color: currentColor;
    }
  }

  path {
    fill: var(--color-bg-light);
    transition: fill 0.1s;
  }
}

[data-with-icon='true'] {
  align-items: center;
  display: flex;
  gap: var(--space-2xs);
}

.efca-footer__heading {
  font-size: var(--font-size-1);
  margin-block: 0 var(--space-2xs);
}

.efca-footer__kicker {
  font-weight: 500;
  line-height: 1.35;
  margin-block: 0 var(--space-m);
  max-inline-size: var(--measure-s);
  text-wrap: pretty;

  a {
    text-decoration-color: currentColor !important;

    &:hover,
    &:focus-visible {
      text-decoration-color: transparent !important;
    }
  }
}

.efca-footer__primary {
  align-items: center;
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.efca-footer__secondary {
  align-items: center;
  border-block-start: 1px solid var(--color-bg-dark-l);
  column-gap: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-block-start: var(--space-m);
  row-gap: var(--space-s);
}

.efca-footer__links {
  gap: var(--space-s);
}

.links__social {
  .cluster {
    align-items: center;
    gap: var(--space-3xs);
    margin: 0;
  }

  a {
    display: flex;
    padding: var(--space-3xs);

    &:hover,
    &:focus-visible {
      path {
        fill: var(--color-text-alpha);
      }
    }
  }

  .icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }
}

.links__legal {
  margin-block: 0;
  row-gap: var(--space-2xs);
}

.apps-grid {
  block-size: fit-content;
  display: grid;
  gap: var(--space-3xs);
  grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
  inline-size: 100%;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;

  @media (min-width: 1600px) {
    grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr));
  }

  .icon {
    block-size: 1.75rem;
    inline-size: 1.75rem;
    flex-shrink: 0;

    svg {
      block-size: 100%;
      inline-size: 100%;
    }
  }
}

.apps-grid__link.cluster {
  align-items: center;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  text-decoration: none;
  transition: background-color 0.1s;
  white-space: nowrap;

  &:hover,
  &:focus-visible {
    background-color: var(--color-bg-light-alpha);
  }

  path {
    fill: var(--color-text-alpha);
  }
}

.efca-footer__legal {
  color: var(--color-text-alpha);
  font-size: var(--font-size--2);
}