/* Custom Properties */
:root {
  --ff-sans: GillSans, Calibri, Trebuchet, sans-serif;
  --ff-serif: Palatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times,
    ‘Times New Roman’, serif;

  /* Font sizes - mobile */
  --fs-200: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;
  --fs-800: 2rem;
  --fs-900: 2.25rem;

  /* Font weights */
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* colours */

  --clr-neutral-100: #f2f2f2;
  --clr-neutral-200: #e2e2e2;
  --clr-neutral-400: #737373;
  --clr-neutral-500: #464444bd;
  --clr-neutral-900: #0d0d0d;
  --clr-accent-400: #f2e205;
  --clr-accent-500: #d9b918;
  --gradient: linear-gradient(#acd1f2, #6089bf);
  --transparentBackgroud: hsla(198, 7%, 35%, 0.7);

  /* spacing */
  --top-spacing: 300px; /* Tweak depending on final logo size */

  /* box shadow */
  --bs-down: 0px 3px 4px #464444bd;
  --bs-down-right: 5px 8px 4px var(--clr-neutral-400);
  --bs-tb: 0px 8px 2px var(--clr-neutral-400),
    0px -5px 2px var(--clr-neutral-400);
}

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  line-height: 1.2;
}

body,
h1,
h2,
h3,
h4,
figure {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-padding-top: var(--top-spacing);
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-400);
  line-height: 1.4;
  background-color: var(--clr-neutral-100);
  min-height: 100vh;
}

/* Typography */
h1.title {
  font-family: var(--ff-serif);
  font-size: var(--fs-900);
  text-align: center;
}

.title {
  font-size: var(--fs-900);
}

.subtitle {
  font-family: var(--ff-sans);
  font-size: var(--fs-600);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus,
i:hover,
i:focus {
  color: var(--clr-accent-400);
  background-color: #6089bf;
  text-decoration: underline;
}

.download:hover,
.download:focus,
a:active,
i:active {
  color: var(--clr-accent-500);
}

.download:hover,
.download:focus {
  background-color: var(--clr-neutral-900);
}

:focus {
  outline: 2px solid var(--clr-accent-500);
}

@media (max-width: 800px) {
  .hero {
    color: var(--clr-neutral-100);
    background-image: url("../images/lantern-tall.jpg");
    background-size: 800px;
    background-position: center;
  }

  .lrg {
    display: none;
  }

  .title {
    background-color: var(--transparentBackgroud);
    padding: 1rem;
  }
}

/* Components */
/* Navigation - mobile */
body header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  z-index: 100;
  top: 0;
}

header {
  width: 100%;
  padding: 2rem;
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-900);
}

nav a {
  text-transform: uppercase;
}

nav a:hover,
nav a:focus {
  text-decoration: none;
  background-color: var(--clr-neutral-900);
}

.primary-nav {
  display: none;
}

header .split > * + * {
  margin-left: 2rem;
  padding: 0.8em 0;
}

header .split {
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  margin: 0 auto;
}

.nav-toggle:checked ~ .primary-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.logo {
  max-width: 150px;
}

section {
  padding: 5rem 0;
}

footer {
  padding: 2rem 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-400);
}

footer a:hover,
footer a:focus {
  background-color: var(--clr-neutral-400);
}

/* Utilities */
.grid {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

.grid-5 {
  grid-column: -1 / 1;
}

.grid-4 {
  grid-column: -1 / 1;
}

.grid-3 {
  grid-column: -1 / 1;
}

.grid-2 {
  grid-column: -1 / 1;
}

.grid-1 {
  grid-column: -1 / 1;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.border {
  border: 2px solid var(--clr-neutral-400);
}

.split {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.split > * + * {
  margin-top: 1rem;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.img--float {
  float: left;
  margin-right: 1rem;
  box-shadow: 5px 8px 4px #464444bd;
}

.tall {
  max-width: 13rem;
}

.sml {
  max-width: 20rem;
}

.lrg {
  max-width: 30rem;
}

/* Area styles */
/* Hero */
.hero {
  padding-top: 5rem;
  padding-bottom: 20rem;
}

/* About */
.about {
  padding: 10rem 2rem;
  background: var(--gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  box-shadow: var(--bs-down);
}

.p--c {
  color: var(--clr-neutral-100);
  font-weight: var(--fw-600);
  line-height: 2;
  background-color: var(--transparentBackgroud);
  padding: 2rem;
}

/* Seminars */
.seminars {
  background-color: var(--clr-neutral-200);
  box-shadow: var(--bs-tb);
}

.seminar h3 {
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.highlight::before {
  content: "";
  display: block;
  height: 0.5rem;
  background-color: var(--clr-accent-400);
  position: absolute;
  z-index: -1;
  transform: translate(0rem, 1rem);
}

/* Highlights on titles */
.highlight.mg::before {
  width: 16ch;
}
.highlight.ws::before {
  width: 8ch;
}

.highlight.sw::before {
  width: 27ch;
}
.highlight.fc::before {
  width: 11ch;
}

.seminar {
  background-color: var(--clr-neutral-100);
}

.seminars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0.5rem;
  gap: 3rem;
}

.seminar {
  grid-column: -1 / 1;
  padding: 1rem;
  border: 5px outset var(--clr-accent-500);
  box-shadow: 5px 8px 4px var(--clr-neutral-400);
}

/* Fees area */
.fees p {
  margin-top: 0;
}

/* Contact Area */
.contact {
  color: var(--clr-neutral-100);
  background-image: url("../images/Image2.jpg");
  box-shadow: var(--bs-tb);
}

.contact .colour {
  background-color: var(--transparentBackgroud);
  font-weight: var(--fw-600);
  padding: 1rem;
  border: 2px solid var(--clr-neutral-200);
}

.flex-100,
.form {
  flex-basis: 100%;
}

.form {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* form {
  text-align: center;
} */

input[type="text"],
input[type="email"],
select,
textarea {
  color: var(--clr-neutral-900);
  padding: 0.75em;
  border: 2px solid var(--clr-neutral-900);
  box-shadow: var(--bs);
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

/* Footer */
footer a {
  margin: 0 auto;
}

/* For desktops */
@media (min-width: 60rem) {
  :root {
    --top-spacing: 200px;

    /* Desktop Fonts */
    --fs-200: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 1.75rem;
    --fs-800: 2.5rem;
    --fs-900: 3rem;
  }

  /* Components */
  /* Navigation */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
  }

  .primary-nav {
    display: flex;
    margin: 0 auto;
  }

  i.fa-bars {
    display: none;
  }

  .primary-nav .primary-nav__list {
    display: flex;
    margin: 0;
    padding: 0.8em 0;
    gap: 1rem;
  }

  /* Safari gap Fall back */
  nav ul > li + li {
    margin: 0 0 0 0.5rem;
  }

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

  .grid-5 {
    grid-column: span 5;
  }

  .grid-4 {
    grid-column: span 4;
  }

  .grid-3 {
    grid-column: span 3;
  }

  .grid-2 {
    grid-column: span 2;
  }

  .grid-1 {
    grid-column: span 1;
  }

  .split {
    flex-direction: row;
    align-items: center;
  }

  .split > * + * {
    margin-top: 0;
    margin-left: 1rem;
  }

  .experience .split,
  .fees .split,
  .contact .split,
  .split-start {
    align-items: start;
  }

  /* Seminars */
  .seminars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }

  .seminar {
    grid-column: span 2;
  }
}

@media (min-width: 1400px) {
  /* Hero */
  .hero {
    color: var(--clr-neutral-100);
    background-image: url("../images/lantern-wide.jpg");
    background-size: cover;
    outline: var(--clr-accent-400);
  }

  /* About */
  .about {
    background-image: url("../images/paddock.jpeg");
  }
}

/* For iPhone XS */
@media only screen and (max-device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  /* Font sizes - mobile */
  :root {
    --fs-200: 2rem;
    --fs-400: 2.5rem;
    --fs-500: 3em;
    --fs-600: 3.5rem;
    --fs-800: 5rem;
    --fs-900: 6rem;
  }

  .hero {
    color: var(--clr-neutral-100);
    background-image: url("../images/lantern-tall.jpg");
    background-position: center;
  }

  .lrg {
    display: none;
  }

  .tall {
    max-width: 25rem;
  }

  .hero .title {
    background-color: var(--transparentBackgroud);
    padding: 1rem;
  }

  /* Utilities */
  .grid {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }

  .grid-5 {
    grid-column: -1 / 1;
  }

  .grid-4 {
    grid-column: -1 / 1;
  }

  .grid-3 {
    grid-column: -1 / 1;
  }

  .grid-2 {
    grid-column: -1 / 1;
  }

  .grid-1 {
    grid-column: -1 / 1;
  }

  .border {
    border: none;
  }

  .split {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .split > * + * {
    margin: 1rem auto;
  }

  /* Area styles */ /* Seminars */
  .highlight::before {
    display: none;
  }

  .seminars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0.5rem;
    gap: 3rem;
  }

  .seminar {
    grid-column: -1 / 1;
    padding: 1rem;
    border: 5px outset var(--clr-accent-500);
    box-shadow: 5px 8px 4px var(--clr-neutral-400);
  }

  /* Contact Area */
  .contact {
    color: var(--clr-neutral-100);
    background-image: none;
    background: radial-gradient(var(--clr-neutral-400), var(--clr-neutral-900));
    box-shadow: var(--bs-tb);
  }

  .contact .colour {
    background-color: var(--transparentBackgroud);
    font-weight: var(--fw-600);
    padding: 1rem;
    border: none;
  }
}