/* 
    ==================================================================
    - Variables -
    Description: CSS variable declarations.
    ==================================================================
*/
:root {

  --chamberlain-orange: #fea415;
  --black-bear: #040302;
  --brown-bear: #27241f;
  --old-brown-bear: #3e392f;

  /* Theme 1 */
  --birch-bark: #f6f1ea;
  --birch-skin: #f0e8db;
  --winter-dusk: #4d74b3;

  /* Theme 2 */
  --snow-fall: #faf8f4;
  --winter-morning: #a9bcdb;
  --cut-maple: #e1d1b7;

  /* Theme 3 */
  --bobcat-fur: #eae7e1;
  --foggy-forest: #9da276;
  --rocky-lichen: #ccd8c5;

  /* Context Colours */
  --text-colour: var(--brown-bear);
  --primary-colour: var(--chamberlain-orange);
  --bg-colour: var(--birch-bark);
  --second-colour: var(--birch-skin);
  --accent-colour: var(--winter-dusk);

  /* Borders */
  --border-radius: var(--space-xs-s);

  /* Type Sizes */
  --measure: 60ch;

  /* Step -2: 11.11px → 12.80px */
  --step--2: clamp(0.6944rem, 0.6576rem + 0.1837vw, 0.8rem);

  /* Step -1: 13.33px → 16.00px */
  --step--1: clamp(0.8331rem, 0.7751rem + 0.2902vw, 1rem);

  /* Step 0: 16.00px → 20.00px */
  --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);

  /* Step 1: 19.20px → 25.00px */
  --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);

  /* Step 2: 23.04px → 31.25px */
  --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);

  /* Step 3: 27.65px → 39.06px */
  --step-3: clamp(1.7281rem, 1.4801rem + 1.2402vw, 2.4413rem);

  /* Step 4: 33.18px → 48.83px */
  --step-4: clamp(2.0738rem, 1.7335rem + 1.7011vw, 3.0519rem);

  /* Step 5: 39.81px → 61.04px */
  --step-5: clamp(2.4881rem, 2.0266rem + 2.3076vw, 3.815rem);


  /* Spacing */
  /* Space 2xs: 8px → 10px */
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);

  /* Space xs: 12px → 15px */
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);

  /* Space s: 16px → 20px */
  --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);

  /* Space m: 24px → 30px */
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);

  /* Space l: 32px → 40px */
  --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);

  /* Space xl: 48px → 60px */
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);

  /* Space 2xl: 64px → 80px */
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);

  /* Space 3xl: 96px → 120px */
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);

  /* One-up pairs */
  /* Space 2xs-xs: 8px → 15px */
  --space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);

  /* Space xs-s: 12px → 20px */
  --space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);

  /* Space s-m: 16px → 30px */
  --space-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);

  /* Space m-l: 24px → 40px */
  --space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);

  /* Space l-xl: 32px → 60px */
  --space-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);

  /* Space xl-2xl: 48px → 80px */
  --space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);

  /* Space 2xl-3xl: 64px → 120px */
  --space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);

  /* Custom pairs */
  /* Space s-l: 16px → 40px */
  --space-s-l: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem);

  /* Space m-xl: 24px → 60px */
  --space-m-xl: clamp(1.5rem, 0.7174rem + 3.913vw, 3.75rem);

  /* Space l-2xl: 32px → 80px */
  --space-l-2xl: clamp(2rem, 0.9565rem + 5.2174vw, 5rem);

  /* Space m-2xl: 24px → 80px */
  --space-m-2xl: clamp(1.5rem, 0.2826rem + 6.087vw, 5rem);

  /* Grids */
  --grid-max-width: 77.50rem;
  --grid-gutter: var(--space-s-l, clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem));
  --grid-columns: 12;
}


/* 
    ==================================================================
    - Resets -
    Description: Default reset rules.
    ==================================================================
*/

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-gutter: stable;
  overflow: auto;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 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 */
body {
  min-height: 100vh;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

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

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

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: inherit;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

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

/* Kill button styles */
button {
  outline: none;
  border: none;
}

/* 
    ==================================================================
    - Typography -
    Description: Default type styles.
    ==================================================================
*/

body {
  color: var(--text-colour);
  font-family: 'Merriweather', serif;
  font-size: var(--step-0);
  line-height: 1.7;
  line-break: normal;
  word-break: normal;
}

* {
  max-inline-size: var(--measure);
}

html, 
body, 
div, 
header, 
nav, 
main, 
section,
footer,
ul,
li {
  max-inline-size: none; 
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.1;

  font-family: 'Work Sans', sans-serif;
}

h1 {
  font-size: var(--step-5);
  max-width: 50ch;

  letter-spacing: -0.1rem;

  color: var(--primary-colour);
}

h2 {
  font-size: var(--step-3);
  max-width: 28ch;

  letter-spacing: -0.1rem;

  color: var(--accent-colour);
}

h3 {
  font-size: var(--step-2);
  max-width: 28ch;
}

ul,
ol {
  padding-inline-start: 1em;
}

p {
  margin-block: 0;
}

a {
  color: var(--accent-colour);
}

a:has([class]) {
  color: inherit;
}

blockquote {
  padding-inline-start: 1em;
  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--step-1);
}

:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3) + * {
  --flow-space: 0.5em;
  margin-top: var(--flow-space);
}

/* Table */
table {
  border-collapse: collapse;
  border: none;
}

th, td {
  border: none;
  background-color: transparent;
  text-align: left;

  display: block;

  padding-inline: var(--space-xs);
}

tr {
  display: block;
}

tr + tr {
  margin-top: var(--space-xs);
}

td:first-of-type {
  padding-inline-start: 0;
  font-weight: 600;
}

@media screen and (min-width: 600px) {
  th, td {
    display: table-cell;
  }

  tr {
    display: table-row;
  }

  tr + tr {
    margin-top: 0;
  }
}

/* Button */
button {
  padding: 0;

  background-color: var(--accent-colour);

  border: 2px solid var(--accent-colour);
  
  color: var(--bg-colour);

  overflow: hidden;

  cursor: pointer;
}

@media screen and (min-width: 600px){ 
  button {
    border-radius: 50px var(--border-radius) var(--border-radius) 50px;

  }
}

button a {
  padding: var(--space-xs) var(--space-m);
  display: block;
  height: 100%;
}

button a:hover {
  background-color: var(--bg-colour);
  color: var(--accent-colour);
}

/* Page Layout */
body {
  background-color: var(--bg-colour);
}

header {
  padding-inline: 0;
}
@media screen and (min-width: 600px){
  header {
    border-radius: 0;
    background-color: var(--second-colour);
    padding-inline: var(--space-s-l);
  }
}

nav {
  padding-top: var(--space-s);
  gap: var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 600px){
  nav {
    padding-block: var(--space-s);
    flex-direction: row;
    justify-content: space-between;
  }
}

nav ul {
  margin: 0;
  padding: 0;

  width: 100%;
}

nav ul li {
  width: 100%;
}

nav ul li button {
  width: 100%;
}

@media screen and (min-width: 600px){
  nav ul, nav ul li, nav ul li button {
    width: auto;
  }
}

nav li a {
  text-decoration: none;
}

nav .logo {
  display: block;
}

nav .logo img {
  height: 70px;
  width: auto;
}

main section:last-of-type{
  padding-bottom: var(--grid-gutter);
}

section {
  display: grid;
  gap: var(--grid-gutter);

  background-color: var(--bg-colour);

  padding-top: var(--grid-gutter);

  padding-inline: var(--space-s-l);
}

.box {
  background-color: var(--second-colour);
  padding: var(--space-s-l);
  border-radius: var(--border-radius);
  flex-basis: 100%;
  position: relative;
}

.box.link {
  padding: 0;
  background-color: none;
  overflow: hidden;
}

.box > *:first-child {
  margin-top: 0;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.wrapper {
  grid-column-start: 1;
  grid-column-end: 13;
}

.box.centre {
  text-align: center;

  display: flex;
  align-items: center;
  flex-direction: column;
}

.stacker {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
}

.secondary {
  background-color: var(--old-brown-bear);
  color: var(--birch-bark);
}

.box-link {
  height: 100%;
  width: 100%;
  min-width: 0;
  max-inline-size: none;

  background-color: var(--accent-colour);
  padding: var(--space-s-l);

  transition: all 0.15s ease-out, transform 0.3s ease-in-out;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-s-m);

  text-decoration: none;
}

.box-link:hover{
  background-color: var(--primary-colour);

  transform: scale(1.02);
  transition: all 0.15s ease-out, transform 0.3s ease-in-out;
}

.box-link:hover * {
  color: var(--bg-colour);
}

.hero-icon {
  font-size: 5rem;
  line-height: 5rem;
  margin: 0;
  padding: 0;
  color: var(--birch-skin);
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--birch-bark);
}

.text-wrapper h2 {
  margin: 0;
  padding: 0;
  color: var(--birch-skin)
}

.text-wrapper * {
  transition: color 0.25s ease-out;
}

@media screen and (min-width: 900px) {
  .stacker {
    flex-direction: row;
  }
}

/* Specific */
.intro > .wrapper {
  background-image: url("images/home-bg.jpeg");
  background-size: cover;
  background-position: center center;

  color: var(--birch-bark);
  text-align: center;

  padding: var(--space-m-2xl);

  border-radius: var(--border-radius);

  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 600px) {
  .intro > .wrapper {
    border-radius: 50% 50% var(--border-radius) var(--border-radius);
  }
}