/*
--- 01 TYPOGRAPHY SYSTEM

- Font family:
"Archivo", sans-serif (self-hosted variable font in /fonts, see @font-face below)

- Font sizes (rem):
1.4 / 1.6 / 1.8 / 2 / 2.4 / 3 / 4.4 / 5.2

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

- Line heights:
Default: 1
Small (headings): 1.05
Medium: 1.2 (used on testimonials blackqouote and journey timeline text) 
Paragraph default: 1.6
About text: 1.6

- Letter spacing:
Headings: -0.5px
Section label: 2px

--- 02 COLORS

- Light / backgrounds:
#f1f3f5 (main light section bg)
#f5f5f4 (hero heading text, button text, subheadline)
#ced4da (form inputs, light grey)

- Dark:
#1a1a1c (testimonials + footer bg, secondary heading)
rgb(13, 13, 14) (hero scrim dark)

- Text greys:
#495057 (about text, journey text)
#3a3d42 (tertiary heading, quote text)
#6b7177 (quote author, copyright, footer links)
#555 (body default)

- Accent (teal):
#2a9d8f (primary — buttons, CTA, timeline, accent bar)
#238478 (darker teal — hover)

--- 03 SHADOWS

box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);     (general)
box-shadow: 0 20px 40px rgba(26, 26, 28, 0.3);        (about video lift)
box-shadow: 0 -1.2rem 2.4rem rgba(26, 26, 28, 0.04);  (contact section break)

--- 04 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 05 SECTION PADDING (vertical rhythm)

Default sections: 9.6rem 0  (journey, contact)
About: 6.4rem 0 9.6rem 0  (asymmetric — smaller top where it meets hero)
Testimonials (feature): 12rem 0
Hero: padding-top 9.6rem (reserves nav space) + min-height 100vh

--- 06 CONTAINER GUTTERS (horizontal)

.container: 0 3.2rem  (standard — about, contact, footer)
.journey-container: 0 3.2rem
.testimonials--container: 10rem 2rem  (intentionally tighter sides)

--- 07 BREAKPOINTS (queries.css — em-based, always 16px regardless of html font-size)

84em = 1344px  (smaller desktops)
75em = 1200px  (landscape tablets)
54em = 864px   (portrait — hero switches to stacked/centered layout)
max-height 45em = 720px  (short screens)
[34em = 544px — mobile nav collapse — NOT BUILT YET]

--- 08 WHITESPACE

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

/* ******************************************** */
/* FONTS (self-hosted Archivo, SIL OFL — fonts/OFL.txt) */
/* ******************************************** */

/* Variable font: one file covers weights 400–700.
   Split into latin / latin-ext like Google Fonts does, so the
   latin-ext file only downloads on pages that use those glyphs (ć) */

/* latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin italic */
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext italic */
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;

  /* for some reason needs to be on both html and body */
  overflow-x: hidden;

  /* Does NOT work on Safari and Microsoft edge,
   maybe it does after 2021 */
  /* scroll-behavior: smooth; */
}

body {
  /* font-family: "Archivo", sans-serif; */
  font-family: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
  /* evey element that overflows x axis will be hidden: */
  /* Only works if there is nothing absolutily position in relation to body */
  overflow-x: hidden;
}

/* ******************************************** */
/* GENERAL REUSABLE COMPONENTS */
/* ******************************************** */

.container {
  /* 1114px some convention usually used */
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
  /* margin-bottom: 9.6rem; */
}

/* .grid:last-child {
  margin-bottom: 0;
} */

.grid:not(:last-child) {
  margin-bottom: 9.6rem;
}

.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);
} */

.grid--center-v {
  align-items: center;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  letter-spacing: -0.5px;
}

.heading-primary {
  /* font-size: 5.2rem; */

  font-size: clamp(32px, 22.9px + 2.42vw, 52px);

  line-height: 1.05;
  margin-bottom: 3.2rem;
  color: #f5f5f4;
}

.heading-secondary {
  /* font-size: 4.4rem; */

  font-size: clamp(28px, 20.7px + 1.94vw, 44px);

  line-height: 1.2;
  margin-bottom: 9.6rem;
  color: #1a1a1c;
}

.heading-tertiary {
  /* font-size: 3rem; */

  font-size: clamp(22px, 18.4px + 0.97vw, 30px);

  line-height: 1.2;
  margin-bottom: 3.2rem;
  color: #3a3d42;
}

.section-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.6rem;
}

.section-intro {
  /* font-size: 2.4rem; */
  font-weight: 400;
  text-align: center;
  padding: 0 10rem 0 10rem;
  margin-bottom: 7.4rem;
}

.about-text,
.section-intro {
  font-size: clamp(18px, 15.3px + 0.73vw, 24px);
}

.btn,
.btn:link,
.btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  /* Only necessary for .btn */
  border: none;
  cursor: pointer;
  font-family: inherit;

  /* Put transition on original "state" */
  /* transition: background-color 0.3s; */
  transition: all 0.3s;
}

.btn--full {
  background-color: #2a9d8f;
  color: #f5f5f4;
}

/* .btn--full:link,
.btn--full:visited {
  background-color: #2a9d8f;
  color: #f5f5f4;
} */

.btn--full:hover,
.btn--full:active {
  background-color: #238478;
}

.btn--outline:link,
.btn--outline:visited {
  background-color: #f5f5f4;
  color: #3a3d42;
}

.btn--outline:hover,
.btn--outline:active {
  background-color: #ced4da;

  /* border: 3px solid #fff; */
  /* Trick to add border inside */
  box-shadow: inset 0 0 0 3px #fff;
}

/* this is great for keyboard users */
/* NEW — keyboard only, everywhere */
*:focus {
  outline: none; /* still suppress the default browser outline */
}

*:focus-visible {
  box-shadow: 0 0 0 0.8rem rgba(42, 157, 143, 0.5);
}

.footer-link:focus-visible {
  border-radius: 9px;
  box-shadow: 0 0 0 0.4rem rgba(42, 157, 143, 0.5); /* smaller, rounded, fits the icons */
}

/* HELPER/SETTINGS CLASSES */
.margin-right-sm {
  margin-right: 1.6rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

.center-text {
  text-align: center;
}

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