@font-face {
    font-family: "Martel";
    font-weight: 400;
    src: url("fonts/Martel/martel-regular.woff2") format("woff2"),
        url("fonts/Martel/martel-regular.woff") format("woff"),
        url("fonts/Martel/martel-regular.tff") format("ttf");
}

@font-face {
  font-family: "Lato";
  font-weight: 400;
    src: url("fonts/Lato/lato-regular.woff2") format("woff2"),
        url("fonts/Lato/lato-regular.woff") format("woff"),
        url("fonts/Lato/lato-regular.tff") format("ttf");
}


/* CSS Reset 
 * https://www.joshwcomeau.com/css/custom-css-reset/
 */

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Base Settings */
:root {
    --clr-text: hsl(356, 30%, 9%);
    --clr-background: hsl(0, 0%, 100%);
    --clr-far-background: hsl(0, 0%, 96%);
    --clr-accent: #16d0ae;
    --step--2: clamp(0.6913rem, 0.6408rem + 0.2522vw, 0.8363rem);
    --step--1: clamp(0.7775rem, 0.7105rem + 0.3348vw, 0.97rem);
    --step-0: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
    --step-1: clamp(0.9844rem, 0.8729rem + 0.5576vw, 1.305rem);
    --step-2: clamp(1.1075rem, 0.9662rem + 0.7065vw, 1.5138rem);
    --step-3: clamp(1.2456rem, 1.068rem + 0.888vw, 1.7563rem);
    --step-4: clamp(1.4019rem, 1.181rem + 1.1043vw, 2.0369rem);
    --step-5: clamp(1.5769rem, 1.3034rem + 1.3674vw, 2.3631rem);
}

h1 {
    font-family: "Lato", sans-serif;
    letter-spacing: .1ch;
    font-size: var(--step-5);
}
h2 {
    font-family: "Lato", sans-serif;
    letter-spacing: .1ch;
    font-size: var(--step-4);
}
h3 {
    font-family: "Lato", sans-serif;
    letter-spacing: .05ch;
    font-size: var(--step-3);
}
h4 {
    font-family: "Lato", sans-serif;
    letter-spacing: .05ch;
    font-size: var(--step-2);
}
h5 {
    font-family: "Lato", sans-serif;
    font-size: var(--step-1);
}
p {
    font-size: var(--step-0);
    text-wrap: balance;
}
li {
    font-size: var(--step-0);
}
span {
    font-size: var(--step--1);
}

html {
    color-scheme: light;
}

body {
    font-family: "Martel", sans-serif;
}

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

.visually-hidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.side_by_side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 650px) {
    .side_by_side {
        flex-direction: row;
        align-items: start;
    }

    .side_by_side {
      margin-top: 0;
    }
}

/* Individual styles */
main {
    margin: auto;
    max-width: 90ch;
    padding: 2ch;
}

section {
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-accent);
  margin-bottom: 1rem;
}

.title{
    padding-bottom: 1rem;
    text-align: center;
}

/* -- header */
/* ----- Desktop header */
header {
    padding-top: 5rem;
    padding-bottom: 2rem;
    margin: auto;
    max-width: 86ch;
    overflow: hidden;
}

header button {
  visibility: hidden;
}

#nav__top {}
#nav__tray {}

.logo {
    margin: auto;
    padding-bottom: 1rem;
}

.logo img {
    max-width: 10ch;
    max-height: 12ch;
}

nav {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}

nav a {
  font-family: "Lato", sans-serif;
  font-size: var(--step-1);
}


nav:before, nav:after {
  position: relative;
  top: 1.25ch;
  content: "";
  width: 100ch;
  height: 0;
  border: 1px solid var(--clr-accent);
}

nav a {
    text-decoration: none;
    color: black;
}

/* ----- Mobile header */
@media (max-width: 650px) {
  header {
    padding-top: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--clr-accent);
  }

  header button {
    --btn-size: 3rem;
    visibility: visible;
    width: var(--btn-size);
    height: var(--btn-size);
    border: none;
  }

  #nav__toggle {
    background: url("assets/hamburger.svg") no-repeat;
    background-size: var(--btn-size) var(--btn-size);
  }

  #nav__toggle[data-visible="true"] {
    background: url("assets/cross.svg") no-repeat;
    background-size: var(--btn-size) var(--btn-size);
  }

  #nav__tray {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: white;
    transform: translateX(100%);
    transition: transform 200ms ease-out;
  }

  #nav__tray[data-visible="true"] {
    transform: translateX(0%);
  }

  nav {
    gap: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
  }

  nav a {
    padding: min(2vh, 2rem);
    font-size: var(--step-4);
  }

  nav a:hover {
    background-color: rgba(0,0,0,0.1);
  }

  nav:before, nav:after {
    border: none;
  }

  .logo {
    margin: 0;
    padding: 0;
  }

  .logo img {
      max-width: 5ch;
      max-height: 6ch;
  }

  #nav__top {
    display: flex;
    margin-inline: 2rem;
    justify-content: space-between;
    align-items: center;
  }
}

/* -- Testimonals (Index page) */
.testimonal {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.testimonal p{
    text-indent: calc(-.75 * var(--step-1));
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 0.5rem;
    border-left: 1px solid #000;
}


.testimonal p:before {
    background: white;
    content: open-quote;
    font-size: var(--step-1);
}

.testimonal p:after {
    content: close-quote;
    font-size: var(--step-1);
}

.testimonal span {
    display: block;
    text-align: end;
}

/* -- hero headshot (Index page) */
.hero__headshot img {
    border-radius: .5rem;
    max-width: 70vw;
}

@media (min-width: 650px) {
    .hero__headshot img {
        max-width: 25ch;
    }
}

/* -- offerings (Sessions Page) */
.offering {
  margin-top: 1rem;
  margin-bottom: 1rem;
} 

.offering p {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.offering .price {
  font-size: var(--step-0);
  font-weight: bold;
}

/* -- faq (Sessions Page) */
.faq {
  margin-bottom: 1.5rem;
} 

.faq p {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

/* -- Contact form (Contact Page) */
.form_section {
    margin: auto;
    max-width: 50ch;
    --input-gap: .75rem;
}

form {
  display: grid;
  --form-border-clr: rgba(0,0,0,.3);
  --form-bg-clr: rgba(0,0,0,.05);
}

.span2 {} /* unneeded for mobile */
.v2 {}

@media (min-width: 650px) {
  form {
    display: grid;
    grid-format-columns: 1fr 1fr;
    column-gap: 1rem;
    padding-bottom: 3rem;
  }

  .span2 {
    grid-column: span 2;
  }

  .v2 {
    grid-row: span 2;
  }
}

form input {
  border: 1px solid var(--form-border-clr);
  background-color: var(--form-bg-clr);
  margin-bottom: var(--input-gap);
  display: block;
  width: 100%;
}

form .req:after {
  content: "*";
  margin: .5ch;
  color: red;
}

form textarea {
  border: 1px solid var(--form-border-clr);
  background-color: var(--form-bg-clr);
  margin-bottom: var(--input-gap);
  display: block;
  width: 100%;
}

form label {
  margin-top: var(--input-gap);
  margin-bottom: .25rem;
  width: 100%;
}

form .submit_button {
  border-radius: 100vw;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border: none;
  box-shadow: 1px 1px 2px rgba(0,0,0, .2);
  background-color: var(--form-border-clr);
  width: 10ch;
}

form .submit_button:hover ,
form .submit_button:focus {
  background-color: var(--clr-accent);
}

/* about headshot (About Me Page) */
.about__headshot {
  border-radius: .5rem;
  max-width: 60vw;
}

@media (min-width: 650px) {
    .about__headshot img {
        border-radius: .5rem;
        max-width: 25ch;
    }
}