/*

-- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

Font Weights:
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

Line Heights:
Default: 1
Small: 1.05
Paragraph default: 1.6

Letter Spacing
-0.5px
0.75px


-- 02 COLOURS

- Primary: #e67e22
- Tints: #fdf2e9
- Shades: #cf711f
- Accents:
- Greys: #555 #333 #6f6f6f is the lightest allowed on #fdf2e9

-- 05 SHADOWS

-- 06 BORDER-RADIUS

Default: 9px

-- 07 WHITESPACE

-Spacing System (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-text: #555;
  --color-heading: #333;
  --color-muted: #767676;
  --color-accent: #2a4e35;
  --color-accent-dark: #10341c;
  --color-accent-soft: #718979;
  --color-surface: #f8f9f8;
  --color-surface-alt: #f2f5f2;
  --color-border: #d9e3db;
  --radius-base: 9px;
  --radius-large: 18px;
  --focus-ring: 0 0 0 0.3rem rgba(42, 78, 53, 0.22);
  --font-serif: "Cambo", "EB Garamond", Georgia, "Times New Roman", serif;
}

html {
  font-size: 62.5%;
  /* If we set the font size as a fixed value ie 10px, if the user increased their font-size, they would expect
  to see the size increase but that would not be the case unless we set that as a percentage. */
  overflow-x: hidden;

  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  line-height: 1;
  font-weight: 400;
  color: var(--color-text);

  /* Only works if there is nothing absolutely positioned in relation to body */
  overflow-x: hidden;
}

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

/*******************************/
/* GENERAL REUSABLE COMPONENTS */
/*******************************/
.grid {
  display: grid;
  gap: 9.6rem;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.textbox_container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 8rem;
}

.center_text {
  text-align: center;
}

.grid:not(:last-child) {
  margin-bottom: 9.6rem;
  /* This adds a margin bottom to all grids elements that are not the last child
  of its parent container  */
}

.grid_2_cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid_3_cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid_4_cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid_5_cols {
  grid-template-columns: repeat(5, 1fr);
}

.heading_primary,
.heading_secondary,
.heading_tertiary {
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.5px;
}

.heading_primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

.heading_secondary {
  font-size: 4.4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
}

.heading_tertiary {
  font-size: 3.6rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}

.heading_quaternary {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
}

.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-accent-soft);
  margin-bottom: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}

.bold {
  font-weight: 700;
}

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  padding: 1.6rem 3.2rem;
  border-radius: var(--radius-base);
  font-size: 2rem;
  font-weight: 500;
  text-decoration: none;

  /* Only necessary for btn itself */
  border: none;
  cursor: pointer;

  transition: all 0.3s;
}

.btn_full:link,
.btn_full:visited {
  background-color: var(--color-accent);
  color: white;
}

.btn_full:hover,
.btn_full:active {
  background-color: var(--color-accent-dark);
  color: white;
}

.btn:focus-visible,
.btn_full:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/*******************************/
/* SKIP LINK */
/*******************************/
.skip_link {
  position: absolute;
  top: -100%;
  left: 1.6rem;
  background-color: var(--color-accent);
  color: white;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-base);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  z-index: 99999;
  transition: top 0.2s;
}

.skip_link:focus {
  top: 1.6rem;
}

/*******************************/
/* BACK TO TOP BUTTON */
/*******************************/
.btn_back_top {
  position: fixed;
  bottom: 3.2rem;
  right: 3.2rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 2.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s,
    background-color 0.2s;
  z-index: 100;
  box-shadow: 0 0.4rem 1.2rem rgba(16, 52, 28, 0.25);
}

.btn_back_top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn_back_top:hover,
.btn_back_top:active {
  background-color: var(--color-accent-dark);
}

.btn_back_top:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/*******************************/
/* SLIDESHOW COUNTER */
/*******************************/
.slideshow_counter {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background-color: rgba(16, 52, 28, 0.72);
  color: #fff;
  font-size: 1.3rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  z-index: 9;
  pointer-events: none;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}