/*
00. VARIABLES
01. TOOLS
02. GLOBALS
03. ELEMENTS
04. OBJECTS
05. COMPONENTS
06. UTILITIES
*/
/* VARIABLES */
/* VARIABLES
===========================================

===========================================*/
:root {
  /* Spacing
  ----------------------------------------- */
  --spacing-3xs: 0.1rem;
  --spacing-2xs: 0.18rem;
  --spacing-xs: 0.3rem;
  --spacing-s: 0.5rem;
  --spacing-base: 1rem;
  --spacing-l: 2rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 8rem;
  --spacing-3xl: 16rem;
  /* Flow space */
  --flow-space: 1em;
  /* Border radius */
  --border-radius-3xs: var(--spacing-3xs);
  --border-radius-2xs: var(--spacing-2xs);
  --border-radius-xs: var(--spacing-xs);
  --border-radius-s: var(--spacing-s);
  --border-radius: var(--spacing-base);
  --border-radius-l: var(--spacing-l);
  /* Typography
  ----------------------------------------- */
  --font-base: system-ui, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-accent: system-ui, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --measure: 96ch;
  --font-size-xs: clamp(0.79rem, -0.02vi + 0.79rem, 0.78rem);
  --font-size-s: clamp(0.89rem, 0.1vi + 0.86rem, 0.94rem);
  --font-size-base: clamp(1rem, 0.25vi + 0.94rem, 1.13rem);
  --font-size-l: clamp(1.13rem, 0.45vi + 1.01rem, 1.35rem);
  --font-size-xl: clamp(1.27rem, 0.71vi + 1.09rem, 1.62rem);
  --font-size-2xl: clamp(1.42rem, 1.04vi + 1.16rem, 1.94rem);
  --font-size-3xl: clamp(1.6rem, 1.46vi + 1.24rem, 2.33rem);
  --font-size-4xl: clamp(1.8rem, 1.99vi + 1.3rem, 2.8rem);
  --font-size-5xl: clamp(2.03rem, 2.66vi + 1.36rem, 3.36rem);
  --line-height-xs: 1.1;
  --line-height-s: 1.2;
  --line-height-normal: 1.5;
  /* Colours
  ----------------------------------------- */
  --white: hsla(0,0%,100%,1);
  --grey-100: hsla(214,10%,96%,1);
  --grey-200: hsla(214,10%,90%,1);
  --grey-300: hsla(214,10%,75%,1);
  --grey-400: hsla(214,10%,65%,1);
  --grey-500: hsla(214,10%,50%,1);
  --grey-600: hsla(214,10%,45%,1);
  --grey-700: hsla(214,10%,40%,1);
  --grey-800: hsla(214,10%,30%,1);
  --grey-900: hsla(214,15%,20%,1);
  --black: hsla(0,50%,10%,1);
  --positive: hsla(120,75%,25%,1);
  --positiveLight: hsla(120,75%,90%,1);
  --caution: hsla(45,75%,50%,1);
  --cautionLight: hsla(45,75%,90%,1);
  --negative: hsla(0,75%,50%,1);
  --negativeLight: hsla(0,75%,90%,1);
  --neutral: hsla(200,40%,35%,1);
  --neutralLight: hsla(200,40%,90%,1);
  --color-primary-100: hsla(240,100%,99%,1);
  --color-primary-200: hsla(240,100%,92%,1);
  --color-primary-300: hsla(240,100%,80%,1);
  --color-primary-400: hsla(240,100%,75%,1);
  --color-primary-500: hsl(240, 100%, 45%);
  --color-primary-600: hsla(240,100%,40%,1);
  --color-primary-700: hsla(240,100%,25%,1);
  --color-primary-900: hsla(240,50%,25%,1);
  /* Image gallery
  ----------------------------------------- */
  --gallery-minmax: 8rem;
}

/* GLOBALS */
/* RESET
===========================================
===========================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

body {
  line-height: var(--line-height-normal);
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

input,
button,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
}

/* GLOBALS
===========================================
===========================================*/
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
}

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

article > * {
  max-width: 65ch;
}

blockquote {
  max-width: 50ch;
}

/* THEMES
===========================================

===========================================*/
:root,
[data-selected-theme=light] {
  --color-background: var(--white);
  --color-text: var(--black);
  --color-action: var(--color-primary-500);
  --color-separator: var(--black);
  --color-code-background: var(--grey-300);
  --color-code-text: var(--black);
  --color-nav-links: var(--grey-900);
}

[data-selected-theme=dark] {
  --color-background: var(--grey-800);
  --color-text: var(--grey-200);
  --color-action: var(--color-primary-400);
  --color-separator: var(--grey-200);
  --color-code-background: var(--grey-700);
  --color-code-text: var(--color-text);
  --color-nav-links: var(--grey-100) ;
}

/* ELEMENTS */
/* BLOCKQUOTE
===========================================
===========================================*/
blockquote {
  background-color: var(--grey-100);
  border-radius: var(--spacing-xs);
  font-size: var(--font-size-base);
  padding: var(--spacing-base) var(--spacing-l);
}

cite {
  display: block;
  font-size: var(--font-size-s);
  font-style: normal;
  margin-top: var(--spacing-s);
  text-align: right;
}

/* CODE
===========================================
===========================================*/
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 0.9em;
}

code {
  background-color: var(--color-code-background);
  color: var(--color-code-text);
  border-radius: 4px;
  padding: 1px 5px 3px;
}

pre > code {
  background-color: transparent;
  color: var(--grey-200);
}

/* DIALOG
===========================================
===========================================*/
dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* FORMS
===========================================
===========================================*/
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

legend {
  display: none;
}

label {
  display: block;
}

/* All inputs except button */
/* input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]) {
  display: block;
  width: 100%;
} */
input:not([type=button]):not([type=submit]):not([type=reset]):not([type=file]),
select,
textarea {
  padding: var(--spacing-s);
}

input[type=radio],
input[type=checkbox] {
  margin-left: inherit;
}

/* HEADINGS
===========================================
===========================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-accent);
  line-height: var(--line-height-s);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

h3 {
  font-size: var(--font-size-l);
}

/* LINKS
===========================================
===========================================*/
a {
  color: var(--color-action);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* LISTS
===========================================

===========================================*/
/* Targets all <ul>s with no class (mainly for body copy) */
ul:not([class]),
ol:not([class]) {
  margin-left: var(--spacing-base);
}

/* PRE
===========================================
===========================================*/
pre {
  background-color: var(--grey-900);
  color: var(--grey-100);
  border-radius: var(--spacing-s);
  padding: var(--spacing-l);
  white-space: pre-wrap;
  word-break: break-all;
}

/* TABLES
===========================================
===========================================*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  border: 1px solid var(--black);
  padding: var(--spacing-s);
  vertical-align: top;
}

th {
  text-align: left;
}

/* OBJECTS */
/* BOX
===========================================
===========================================*/
[class^=o-box] {
  padding: var(--spacing-base);
  border: var(--spacing-2xs) solid;
  --color-light: var(--white);
  --color-dark: var(--black);
  color: var(--color-dark);
  background-color: var(--color-light);
}

.o-box * {
  color: inherit;
}

.o-box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}

/* Size variants */
.o-box--0 {
  padding: 0;
}

.o-box--xs {
  padding: var(--spacing-xs);
}

.o-box--s {
  padding: var(--spacing-s);
}

.o-box--m {
  padding: var(--spacing-base);
}

.o-box--l {
  padding: var(--spacing-l);
}

.o-box--xl {
  padding: var(--spacing-xl);
}

/* Border variants */
.o-box--borderless {
  border-color: transparent;
}

/* CLUSTER
===========================================
===========================================*/
[class^=o-cluster] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-l);
  justify-content: flex-start;
  align-items: center;
}

/* Size variants */
.o-cluster--1 {
  gap: var(--space, 1rem);
}

/* FLEX
===========================================
===========================================*/
.flex {
  display: flex;
  gap: var(--spacing-base);
}

/* SIDEBAR
===========================================
===========================================*/
.with-sidebar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}

.with-sidebar > :last-child {
  flex-basis: 250px;
  flex-grow: 1;
}

.with-sidebar > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 55%;
}

/* WRAPPER
===========================================
===========================================*/
.o-wrapper {
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding: var(--spacing-base);
}

/* COMPONENTS */
/* Buttons
========================================================================== */
[class^=c-btn] {
  background-color: var(--black);
  border: 0;
  color: var(--white);
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  padding-inline: var(--spacing-base);
  padding-block: var(--spacing-s);
  text-align: center;
  text-decoration: none;
}

[class^=c-btn]:hover {
  background-color: var(--grey-800);
}

[class^=c-btn]:focus {
  box-shadow: 0 0 0 4px gold;
}

.c-btn:active {
  box-shadow: 0 0 0 4px gold;
}

.c-btn--primary {
  background-color: var(--black);
  color: var(--white);
}

.c-btn--secondary {
  color: var(--blue-800);
  background-color: var(white);
}

.c-btn--tertiary {
  border-color: transparent;
  color: var(--blue-500);
}

.c-btn--tertiary:hover,
.c-btn--tertiary:focus {
  text-decoration: underline;
}

/*
.c-btn--other {
  background-color: $Grey20;
  border-color: transparent;
  border-bottom-color: $Grey50;
  color: $Grey90; 

  &:visited {
    color: $Grey90;
  }

  &:hover,
  &:focus {
    background-color: lighten( $Grey50, 25% );
    border-color: lighten( $Grey50, 25% ); 
    color: var(--white);
  }

  &:active {
    // border-bottom-color: lighten( var(--blue-500), 5% );
  }
}
*/
/* Size variants
========================================================================== */
.c-btn--s {
  font-size: theme("fontSize.sm");
  padding: calc(var(--u-xs) / 1.3) var(--u-xs) calc(var(--u-xs) / 1.3);
}

.c-btn--m {
  padding: var(--u-xs) var(--u-m);
}

.c-btn--l {
  font-size: var(--f1);
  padding: var(--u-m) var(--u8);
}

.c-btn--xl {
  font-size: var(--f3);
  padding: var(--u-xl) var(--u10);
}

/* FAMILY CARD
===========================================
===========================================*/
.family {
  border: 1px solid var(--grey-200);
  box-shadow: 2px 2px 2px var(--grey-300);
  padding: var(--spacing-l);
  border-radius: var(--border-radius-2xs);
}

/* GALLERY
===========================================
===========================================*/
rw-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--gallery-minmax), 1fr));
  grid-gap: var(--spacing-base);
  padding-inline: clamp(var(--spacing-base), 1.8vw, var(--spacing-2xl));
  margin-inline: auto;
  max-inline-size: 80rem;
}

rw-gallery figure {
  box-shadow: 0px 1px 2px var(--grey-700);
  border-radius: var(--border-radius-3xs);
  display: block;
  line-height: 0;
  overflow: hidden;
}

rw-gallery a {
  display: inline-block;
}

rw-gallery a:focus img {
  border: var(--spacing-xs) solid var(--grey-900);
}

rw-gallery figure img {
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

rw-gallery figcaption {
  font-size: var(--font-size-s);
  padding: var(--spacing-s);
  line-height: 1.4;
}

#shadow-root figcaption:not(dialog) {
  border: 2px solid red;
}

rw-gallery dialog {
  padding: 0;
}

/* NAV PRIMARY
===========================================
===========================================*/
.c-nav-primary {
  margin-bottom: var(--spacing-l);
}

.c-nav-primary ul {
  list-style-type: none;
}

.c-nav-primary [data-state=active],
.c-nav-primary [aria-current=page] {
  font-weight: bold;
}

/* UTILITIES */
/* SPACING
===========================================
===========================================*/
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-s {
  padding: var(--spacing-s);
}

.p-base {
  padding: var(--spacing-base);
}

.p-l {
  padding: var(--spacing-l);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.p-3xl {
  padding: var(--spacing-3xl);
}

.pl-0 {
  padding-left: 0;
}

.pl-xs {
  padding-left: var(--spacing-xs);
}

.pl-s {
  padding-left: var(--spacing-s);
}

.pl-base {
  padding-left: var(--spacing-base);
}

.pl-l {
  padding-left: var(--spacing-l);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

.pl-2xl {
  padding-left: var(--spacing-2xl);
}

.pl-3xl {
  padding-left: var(--spacing-3xl);
}

.pr-0 {
  padding-right: 0;
}

.pr-xs {
  padding-right: var(--spacing-xs);
}

.pr-s {
  padding-right: var(--spacing-s);
}

.pr-base {
  padding-right: var(--spacing-base);
}

.pr-l {
  padding-right: var(--spacing-l);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

.pr-2xl {
  padding-right: var(--spacing-2xl);
}

.pr-3xl {
  padding-right: var(--spacing-3xl);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pb-s {
  padding-bottom: var(--spacing-s);
}

.pb-base {
  padding-bottom: var(--spacing-base);
}

.pb-l {
  padding-bottom: var(--spacing-l);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}

.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}

.pt-0 {
  padding-top: 0;
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pt-s {
  padding-top: var(--spacing-s);
}

.pt-base {
  padding-top: var(--spacing-base);
}

.pt-l {
  padding-top: var(--spacing-l);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pt-2xl {
  padding-top: var(--spacing-2xl);
}

.pt-3xl {
  padding-top: var(--spacing-3xl);
}

.ph-0 {
  padding-left: 0;
  padding-right: 0;
}

.ph-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.ph-s {
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}

.ph-base {
  padding-left: var(--spacing-base);
  padding-right: var(--spacing-base);
}

.ph-l {
  padding-left: var(--spacing-l);
  padding-right: var(--spacing-l);
}

.ph-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.ph-2xl {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}

.ph-3xl {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}

.pv-0 {
  padding-bottom: 0;
  padding-top: 0;
}

.pv-xs {
  padding-bottom: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

.pv-s {
  padding-bottom: var(--spacing-s);
  padding-top: var(--spacing-s);
}

.pv-base {
  padding-bottom: var(--spacing-base);
  padding-top: var(--spacing-base);
}

.pv-l {
  padding-bottom: var(--spacing-l);
  padding-top: var(--spacing-l);
}

.pv-xl {
  padding-bottom: var(--spacing-xl);
  padding-top: var(--spacing-xl);
}

.pv-2xl {
  padding-bottom: var(--spacing-2xl);
  padding-top: var(--spacing-2xl);
}

.pv-3xl {
  padding-bottom: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
}

.m-0 {
  margin: 0;
}

.m-s {
  margin: var(--spacing-s);
}

.m-base {
  margin: var(--spacing-base);
}

.m-l {
  margin: var(--spacing-l);
}

.m-xl {
  margin: var(--spacing-xl);
}

.m-2xl {
  margin: var(--spacing-2xl);
}

.m-3xl {
  margin: var(--spacing-3xl);
}

.ml-0 {
  margin-left: 0;
}

.ml-s {
  margin-left: var(--spacing-s);
}

.ml-base {
  margin-left: var(--spacing-base);
}

.ml-l {
  margin-left: var(--spacing-l);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.ml-2xl {
  margin-left: var(--spacing-2xl);
}

.ml-3xl {
  margin-left: var(--spacing-3xl);
}

.mr-0 {
  margin-right: 0;
}

.mr-s {
  margin-right: var(--spacing-s);
}

.mr-base {
  margin-right: var(--spacing-base);
}

.mr-l {
  margin-right: var(--spacing-l);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mr-2xl {
  margin-right: var(--spacing-2xl);
}

.mr-3xl {
  margin-right: var(--spacing-3xl);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-s {
  margin-bottom: var(--spacing-s);
}

.mb-base {
  margin-bottom: var(--spacing-base);
}

.mb-l {
  margin-bottom: var(--spacing-l);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.mb-3xl {
  margin-bottom: var(--spacing-3xl);
}

.mt-0 {
  margin-top: 0;
}

.mt-s {
  margin-top: var(--spacing-s);
}

.mt-base {
  margin-top: var(--spacing-base);
}

.mt-l {
  margin-top: var(--spacing-l);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mt-3xl {
  margin-top: var(--spacing-3xl);
}

/* VISIBILITY
===========================================
===========================================*/
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}