/* FONTS */
@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local(''),
    url("/assets/fonts/CooperHewitt-Medium.woff") format("woff");
}

@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local(''),
    url("/assets/fonts/CooperHewitt-Semibold.woff") format("woff");
}

@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: local(''),
    url("/assets/fonts/CooperHewitt-MediumItalic.woff") format("woff");
}

/* RESET */
/* We use :where selector to decrease specificity
 * making overriding easier
 */

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

/**
 * Improve focus styles
 *
 * Add spacing between content and its focus outline.
 */
:focus-visible {
  outline-offset: 3px;
}

/**
 * Disable text size adjustment
 * 
 * To improve readability on non-mobile optimized websites, browsers
 * like mobile Safari increase the default font size when you switch
 * a website from portrait to landscape. We don't want that for our 
 * optimized sites.
 *
 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Smooth scrolling for users that don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

/**
 * Increase line height
 *
 * Long paragraphs are easier to read if the line height is higher.
 */
:where(html) {
  line-height: 1.5;
}

/**
 * Add scrollbar gutter
 *
 * Prevent the page from “jumping” when switching from a long to a short page.
 *
 */
:where(html) {
  scrollbar-gutter: stable;
}

/**
 * Remove UA styles for h1s nested in sectioning content
 *
 * Nesting h1s in section, articles, etc., shouldn't influence the 
 * styling of the heading since nesting doesn't influence 
 * semantics either.
 * 
 * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
 * See https://github.com/whatwg/html/pull/11102
 * See https://html.spec.whatwg.org/#sections-and-headings
 */
:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

/* Remove default margin in favour of better control in authored CSS */
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}


/* Set core body defaults */
:where(body) {
  min-height: 100vh;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* Set shorter line heights on headings and interactive elements */
:where(h1, h2, h3, h4,
  button, input, label) {
  line-height: 1.2;
}

/* Balance text wrapping on headings */
:where(h1, h2,
  h3, h4) {
  text-wrap: balance;
}

/* Make images easier to work with */
:where(img,
  picture) {
  height: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

/* Improve line wrapping */
:where(p) {
  text-wrap: pretty;
}

/**
 * Optimize mark element in Forced Colors Mode
 *
 * The colors of the mark element don't change in Forced Colors Mode,
 * which can be problematic. Use system colors instead.
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
 */
@media (forced-colors: active) {
  mark {
    color: HighlightText;
    background-color: Highlight;
  }
}

/**
 * Announce del, ins, and s to screen readers
 * 
 * With the exception of NVDA (2024.4.2), which announces "deletion",
 * none of the common screen readers announces the <s> element.
 * Voice Over on macOS and iOS and Narrator don't announce 
 * <ins> and <del>. Usually, screen readers not announcing text-level
 * semantics is something we just accept, but devs using elements 
 * like <s> without knowing that they may not convey semantics is a 
 * common issue. We announce the start and end of stricken, inserted,
 * and deleted content with pseudo-elements. For languages other 
 * than English, you should provide translations, e.g. :lang(de) 
 * :where(s::before) { content: "Durchgestrichener Text Beginn "; }
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
 */
:where(del, ins, s)::before,
:where(del, ins, s)::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  content: "test"
}

:where(s)::before {
  content: "stricken text start ";
}

:where(s)::after {
  content: " stricken text end";
}

:where(del)::before {
  content: "deletion start ";
}

:where(del)::after {
  content: " deletion end";
}

:where(ins)::before {
  content: "insertion start ";
}

:where(ins)::after {
  content: " insertion end";
}


/* Avoid text overflows */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/**
 * Turn labels into block elements
 * 
 * Labels for inputs, selects, and textarea should be block 
 * elements.
 */
:where(label):has(+ :where(textarea, input, select)) {
  display: block;
}

/**
 * Increase the block-size of textareas
 *
 * The default height of textareas is small. We increase it a bit.
 */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
 * Inherit font styling in form elements
 * 
 * buttons, inputs, selects, and textarea should have the same font
 * family and size as the rest of the page.
 */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

/**
 * Normalize search input styles
 *  
 * Remove the rounded corners of search inputs on macOS and IOS 
 * and normalize the background color
 */
:where([type="search"]) {
  -webkit-appearance: textfield;
}

/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}

/**
 * Maintain direction in some input types
 * 
 * Some input types should remain left-aligned in right-to-left
 * languages,but only if the value isn't empty because the 
 * placeholder should be right-aligned.
 *
 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
 */
:where([type="tel"], [type="url"], [type="email"], [type="number"]):not( :placeholder-shown) {
  direction: ltr;
}

/**
 * Improve table styling
 *  
 * With the default styling, tables are hard to scan. These rules 
 * add padding and collapsed borders.
 */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
}

/**
 * Increase specificity of [hidden]
 *  
 * Make it harder to accidentally unhide elements with the 
 * [hidden] attribute while still maintaining the until-found 
 * functionality.
 */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Make it clear that interactive elements are interactive */
:where(a[href],
  area,
  button,
  input:where([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]),
  label[for],
  select,
  summary,
  [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type="file"]) {
  cursor: auto;
}

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
}

/* COLORS */
/* https://oklchroma.utilitybend.com/?p=primary%3Aok%3A80.2%2C0.198%2C80%3A0.02%7Cgrey%3Aok%3A50%2C0.022%2C88%3A0%7Csecondary%3Aok%3A50%2C0.039%2C166%3A0.05 */
:root {
  --primary: oklch(80.2% 0.198 80);
  --primary-base: 0.02;
  --primary-10: oklch(from var(--primary) 10% calc(var(--primary-base) + (sin(1.0 * pi) * c)) h);
  --primary-20: oklch(from var(--primary) 20% calc(var(--primary-base) + (sin(0.9 * pi) * c)) h);
  --primary-30: oklch(from var(--primary) 30% calc(var(--primary-base) + (sin(0.8 * pi) * c)) h);
  --primary-40: oklch(from var(--primary) 40% calc(var(--primary-base) + (sin(0.7 * pi) * c)) h);
  --primary-50: oklch(from var(--primary) 50% calc(var(--primary-base) + (sin(0.6 * pi) * c)) h);
  --primary-60: oklch(from var(--primary) 60% calc(var(--primary-base) + (sin(0.5 * pi) * c)) h);
  --primary-70: oklch(from var(--primary) 70% calc(var(--primary-base) + (sin(0.4 * pi) * c)) h);
  --primary-80: oklch(from var(--primary) 80% calc(var(--primary-base) + (sin(0.3 * pi) * c)) h);
  --primary-90: oklch(from var(--primary) 90% calc(var(--primary-base) + (sin(0.2 * pi) * c)) h);
  --primary-100: oklch(from var(--primary) 100% calc(var(--primary-base) + (sin(0.1 * pi) * c)) h);

  --grey: oklch(50.0% 0.021 88);
  --grey-base: 0;
  --grey-10: oklch(from var(--grey) 10% calc(var(--grey-base) + (sin(1.0 * pi) * c)) h);
  --grey-20: oklch(from var(--grey) 20% calc(var(--grey-base) + (sin(0.9 * pi) * c)) h);
  --grey-30: oklch(from var(--grey) 30% calc(var(--grey-base) + (sin(0.8 * pi) * c)) h);
  --grey-40: oklch(from var(--grey) 40% calc(var(--grey-base) + (sin(0.7 * pi) * c)) h);
  --grey-50: oklch(from var(--grey) 50% calc(var(--grey-base) + (sin(0.6 * pi) * c)) h);
  --grey-60: oklch(from var(--grey) 60% calc(var(--grey-base) + (sin(0.5 * pi) * c)) h);
  --grey-70: oklch(from var(--grey) 70% calc(var(--grey-base) + (sin(0.4 * pi) * c)) h);
  --grey-80: oklch(from var(--grey) 80% calc(var(--grey-base) + (sin(0.3 * pi) * c)) h);
  --grey-90: oklch(from var(--grey) 90% calc(var(--grey-base) + (sin(0.2 * pi) * c)) h);
  --grey-100: oklch(from var(--grey) 100% calc(var(--grey-base) + (sin(0.1 * pi) * c)) h);

  --secondary: oklch(50.0% 0.039 166);
  --secondary-base: 0.05;
  --secondary-10: oklch(from var(--secondary) 10% calc(var(--secondary-base) + (sin(1.0 * pi) * c)) h);
  --secondary-20: oklch(from var(--secondary) 20% calc(var(--secondary-base) + (sin(0.9 * pi) * c)) h);
  --secondary-30: oklch(from var(--secondary) 30% calc(var(--secondary-base) + (sin(0.8 * pi) * c)) h);
  --secondary-40: oklch(from var(--secondary) 40% calc(var(--secondary-base) + (sin(0.7 * pi) * c)) h);
  --secondary-50: oklch(from var(--secondary) 50% calc(var(--secondary-base) + (sin(0.6 * pi) * c)) h);
  --secondary-60: oklch(from var(--secondary) 60% calc(var(--secondary-base) + (sin(0.5 * pi) * c)) h);
  --secondary-70: oklch(from var(--secondary) 70% calc(var(--secondary-base) + (sin(0.4 * pi) * c)) h);
  --secondary-80: oklch(from var(--secondary) 80% calc(var(--secondary-base) + (sin(0.3 * pi) * c)) h);
  --secondary-90: oklch(from var(--secondary) 90% calc(var(--secondary-base) + (sin(0.2 * pi) * c)) h);
  --secondary-100: oklch(from var(--secondary) 100% calc(var(--secondary-base) + (sin(0.1 * pi) * c)) h);

}

/* SET VARIABLES */
:root {
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1240,16,1.2,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.6944rem, 0.8234rem + -0.1664vw, 0.7901rem);
  --step--1: clamp(0.8333rem, 0.9082rem + -0.0966vw, 0.8889rem);
  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  --step-1: clamp(1.125rem, 1.0989rem + 0.1304vw, 1.2rem);
  --step-2: clamp(1.2656rem, 1.205rem + 0.3033vw, 1.44rem);
  --step-3: clamp(1.4238rem, 1.318rem + 0.529vw, 1.728rem);
  --step-4: clamp(1.6018rem, 1.4377rem + 0.8205vw, 2.0736rem);

  /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  --measure: 50ch;

  /* COLORS */
  --color-dark: #101010;
  --color-dark-shade: #000000;
  --color-dark-glare: #212121;

  --color-light: #fefefe;
  --color-light-shade: #fff6d7;
  --color-light-glare: #fdfbf3;

  /* https://tints.dev/grey/E1DFD7 */
  --color-grey-50: #fdfdfc;
  --color-grey-100: #f8f8f6;
  --color-grey-200: #f4f3f0;
  --color-grey-300: #eeece8;
  --color-grey-400: #e7e5df;
  --color-grey-500: #e1dfd7;
  --color-grey-600: #bbb7a5;
  --color-grey-700: #968f73;
  --color-grey-800: #66614c;
  --color-grey-900: #322f25;
  --color-grey-950: #1a1914;

  /* https://tints.dev/grey/FFD46D */
  --color-primary-50: color-mix(in srgb, #fff9f0, white 80%);
  --color-primary-100: #fff4e0;
  --color-primary-200: #ffebc7;
  --color-primary-300: #ffe2a8;
  --color-primary-400: #ffda8a;
  --color-primary-500: #ffd46d;
  --color-primary-600: #ffba24;
  --color-primary-700: #db9200;
  --color-primary-800: #946000;
  --color-primary-900: #472d00;
  --color-primary-950: #241600;

  --color-secondary: oklch(0.86 0.0338 262.58);
  --color-secondary-shade: oklch(from var(--color-secondary) calc(l - 0.05) c h);
  --color-secondary-glare: oklch(from var(--color-secondary) calc(l + 0.05) c h);

  --color-tertiary: #6ac2b6;
  --color-tertiary-shade: #35a495;
  --color-tertiary-glare: #98e2d8;

  --pagefind-ui-primary: var(--color-primary-950);
  --pagefind-ui-text: var(--color-primary-950);
  --pagefind-ui-background: var(--color-primary-50);
  --pagefind-ui-border: var(--color-primary-300);
  --pagefind-ui-tag: green;

  --pagefind-ui-border-radius: 0px;
}

@media(prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    
    --color-primary-950: #fff9f0;
    --color-primary-900: #fff4e0;
    --color-primary-800: #ffebc7;
    --color-primary-700: #ffe2a8;
    --color-primary-600: #ffda8a;
    --color-primary-500: #ffd46d;
    --color-primary-400: #ffba24;
    --color-primary-300: #db9200;
    --color-primary-200: #946000;
    --color-primary-100: #472d00;
    --color-primary-50: color-mix(in srgb, #241600, black 80%);

    --color-light: #101010;
    --color-light-shade: #000000;
    --color-light-glare: #212121;
    --color-dark: #fefefe;
    --color-dark-shade: #fff6d7;
    --color-dark-glare: #fdfbf3;

    --pagefind-ui-primary: var(--color-primary);
    --pagefind-ui-text: var(--color-dark);
    --pagefind-ui-background: var(--color-light);
    --pagefind-ui-border: none;
    --pagefind-ui-tag: var(--color-dark);
  }
}

body {
  background-color: var(--color-primary-50);
  color: var(--color-primary-950);
  /* background-color: var(--color-light); */
  /* color: var(--color-dark); */
  font-family: "Cooper Hewitt";
  font-size: var(--step-0);
  font-weight: 500;
  /* body consists of header, main and footer */
  /* ensure header and footer are pushed to */
  /* start end and respectively */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

h1,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: 1pt;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

a {
  color: currentColor;
  text-decoration-color: var(--color-primary-500);
  text-decoration-thickness: 0.2ex;
  text-underline-offset: 0.3ex;
}

/* :where(a:visited) { */
/* color: rebeccapurple; */
/* } */

/* Behövs verkligen denna? */
/* a:focus-visible { */
/* outline: 2px solid currentColor; */
/* outline-offset: 2px; */
/* } */

a:hover {
  text-decoration-thickness: 0.3ex;
  text-decoration-skip-ink: none;
}

/* a:active { */
/* color: red; */
/* } */

/* [aria-current="page"] { */
/* color: green; */
/* } */

a[href$=".pdf"]::after {
  content: "↓";
  /* block-size: 1em; */
  padding-inline-start: 3pt;
  display: inline-block;
  /* inline-size: 1em; */
}

header button {
  background: unset;
  border: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-s) var(--space-xs);

  &[aria-expanded="true"] {
    background-color: var(--color-primary-100);
    /* border: 1px solid var(--grey-90); */
  }

  &:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    /* width: 50%; */
    /* left: 25%; */
    border-top: 2px solid var(--color-dark);
  }
}

[aria-expanded="false"]+* {
  display: none;
}

figcaption {
  max-inline-size: max-content;
  margin-inline: auto;
  padding-block-start: var(--space-xs);
}

/* Tables */
table, th, td {
  border: none;
}

table {
  border-block: 1px solid;
}

thead {
  border-block-end: 1px solid;
}

th {
  text-align: left;
}



/* button:hover { */
/* background-color: var(--color-primary-shade); */
/* text-decoration: underline; */
/* text-underline-offset: 1ex; */
/* text-decoration-thickness: 0.2ex; */
/* border-block-end: 2px solid; */
/* } */

header>div {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-block-end: var(--space-l);
  padding: var(--space-s) var(--space-xl);
}

header h1 {
  grid-row: 3;
}

header h2,
footer h2 {
  font-size: var(--step-1);
}

.home svg {
  height: 3em;
}

.head-nav {
  display: contents;
}

.nav-button {
  grid-column-end: end;
  /* border-inline-end: 1px solid; */
  position: relative;

  & span::before {
    /* content: url("/assets/chevron-down-solid.svg"); */
    display: inline-block;
    content: "";
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    height: 8px;
    width: 8px;
    vertical-align: middle;

    margin-inline-end: var(--space-3xs);
    margin-block-end: 4px;

  }

  &:is([aria-expanded="true"]) span::before {
    margin-block-end: -2px;
    transform: rotate(225deg);
  }

  &:not([aria-expanded="true"]) span::after {
    content: '';
    position: absolute;
    right: 0;
    height: 60%;
    top: 20%;
    border-right: 1px solid var(--color-dark);
  }
}

.head-nav .nav {
  background-color: var(--color-primary-100);
  /* border: 1px solid var(--color-primary-200); */
  grid-column: 1 / 5;
  grid-row: 2;
}

.search-button {
  grid-column-end: -1;
  position: relative;

  /* &::before { */
  /* content: url("/assets/magnifying-glass-solid.svg"); */
  /* } */

  /* &[aria-expanded="true"]::before { */
  /* height: 0.75em; */
  /* content: url("/assets/xmark-solid.svg"); */
  /* } */
}

button>svg {
  display: block;
}

.search-icon {
  width: 1rem;
  height: 1rem;

  [aria-expanded="true"] & {
    display: none;
  }
}

.cancel-icon {
  width: 1rem;
  height: 1rem;
  font-size: var(--step-1);

  [aria-expanded="false"] & {
    display: none;
  }
}

#search {
  display: contents;
}

#search .search-button {
  grid-column: 4;
  grid-row: 1;
}

#search .pagefind-ui {
  grid-column: 1 / 5;
  grid-row: 2;
}

#search-main {
  grid-column: 1 / 5;
  grid-row: 4;
}

#search .pagefind-ui {
  padding: var(--space-m);
  background-color: var(--color-primary-100);
  /* border: 1px solid var(--color-primary-200); */
}

footer {
  margin-block-start: var(--space-3xl);
  padding: var(--space-s);
  background-color: var(--color-primary-100);
  border-block-start: 2px solid var(--color-primary-200);
}

footer,
header {
  a:visited {
    color: currentColor;
  }

  & li,
  & ul {
    --stack-space: 0.5em;
  }
}

header nav,
footer nav {
  & ul {
    padding-inline-start: 0;
  }

  & li {
    list-style: none;
  }
}

:where(header .nav),
footer .nav {
  padding: var(--space-s);
  display: flex;
  gap: var(--space-l);
  flex-wrap: wrap;
}

hr {
  border: 0;
  height: 2px;
  background: color-mix(in srgb, currentColor, transparent 80%);
}

mark {
  background-color: var(--color-primary-500);
}

::selection {
  color: var(--color-primary-900);
  background-color: var(--color-primary-300);
}

/* .button::before { */
/* padding-inline-end: 2pt; */
/* fill: currentColor; */
/* } */

/* .button[href^="mailto:"]::before { */
/* content: url("/assets/envelope-solid.svg"); */
/* } */

/* .button[href^="tel:"]::before { */
/* content: url("/assets/phone-solid.svg"); */
/* } */

/* LAYOUTS */
.stack>*+* {
  margin-block-start: var(--stack-space, 1em);
}

:is(h1, h2, h3, blockquote) {
  --stack-space: 1.8em;
}

:is(section) {
  --stack-space: var(--space-xl)
}

:where(p, ul, ol, hr, picture, article, .button, .info-box) {
  --stack-space: 1lh;
}

/* Don't move heading anchors */
/* :is(.ha) { */
/* --stack-space: 0; */
/* } */

/* :is(.ha)+* { */
/* --stack-space: var(--space-s); */
/* } */

:is(h1, h2, h3, h4)+* {
  --stack-space: var(--space-s);
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-s);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  align-items: center;
  padding-inline-start: 0;
}

.icon {
  height: 0.75em;
  height: 1cap;
  margin: 0 0.15em;
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.with-sidebar> :first-child {
  flex-basis: 25rem;
  flex-grow: 1;
}

.with-sidebar> :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 30%;
  margin-block-start: 0;
}

/* UTILITIES */
.text-align\:center {
  text-align: center;
}

.skip-link {
  position: fixed;
  top: -30em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 1.5rem 2.5rem;
  background-color: white;
  color: black;
  font-size: var(--step-0);
  text-align: center;
  transition: top .1s linear;
  text-decoration: none;

  &:focus,
  &:focus-visible {
    top: 0;
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #fff;
  }
}

.button {
  display: inline-block;
  background-color: var(--color-primary-500);
  color: var(--color-primary-900);
  /* color: var(--color-dark); */
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: var(--space-2xs) var(--space-s);
  border-block-end: 4px solid var(--color-primary-600);

  &:hover {
    background-color: var(--color-primary-400);
  }

  &:active {
    border-block-end: none;
    border-block-start: 4px solid color-mix(in srgb, var(--color-primary-50), white 80%);
    /* transform: translateY(4px); */
  }
}

@media(prefers-color-scheme: dark) {
  .button {
    color: var(--color-primary-50);
  }
}


.info-box {
  padding: var(--space-s);
  background-color: var(--color-primary-200);
  border-inline-start: 5px solid var(--color-primary-400);
  /* border: 2px solid; */
}

.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
  grid-auto-flow: row;
  gap: var(--space-s);
  font-size: var(--step-1);
  padding-inline-start: 0;
  list-style: none;
  align-items: center;

  & li {
    padding-inline-start: var(--space-l);
    background-image: url("/assets/right-arrow.svg");
    background-position: 0 50%;
    background-size: 1.4em auto;
    background-repeat: no-repeat;
  }
}

.font-size\:small {
  font-size: var(--step--1);
}

.color\:soft {
  color: color-mix(in srgb, currentColor, transparent 40%);
}

.home {
  font-weight: bold;
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 1pt;

  &:not(:hover) {
    text-decoration: none;
  }
}


.browse {
  border-block: 1px solid;
  padding-block: var(--space-s);

  /* & h3 a::before { */
  /* { */
  /* } */
}

.test::before {
  position: absolute;
  content: "→";
  color: currentColor;
  top: 50%;
  right: 0;
}

.expand-target {
  position: relative;

  & h3>a::after {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
  }

  /* & h3 > a::after { */
  /* position: absolute; */
  /* content: ""; */
  /* bottom: 0; */
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* } */
}

.split {
  display: flex;
  justify-content: space-between;
}