/* Table of Contents

1. Custom properties

2. CSS reset (based on Andy Bell's https://piccalil.li/blog/a-modern-css-reset/)

3. Other global styles

4. Typography

5. Utility classes

6. Layout

7. Components

*/

/* =====================
   1. Custom properties
   ===================== */

:root {
  /* Colours */
  --clr-dark: 0, 0%, 11%;
  --clr-light: 231 77% 90%;
  --clr-white: 0, 0%, 100%;
  --clr-light-grey: 0, 0%, 97%;
  --clr-yellow: 55, 100%, 71%;
  --clr-wai-1: 186, 70%, 79%;
  --clr-wai-2: 187, 67%, 60%;
  --clr-wai-3: 189, 66%, 50%;
  --clr-wai-4: 192, 95%, 31%;

  /* Font-sizes */
  --fs-900: 9.375rem;
  --fs-800: 6.25rem;
  --fs-700: 3.5rem;
  --fs-600: 2rem;
  --fs-500: 1.75rem;
  --fs-400: 1.125rem;
  --fs-300: 1rem;
  --fs-200: 0.875rem;

  /* Font-families */
  --ff-sans-normal: 'Inter', sans-serif;
  --ff-mono: 'Roboto', sans-serif;
  /* --ff-serif: serif; */
}

@media (max-width: 35em) {
  :root {
    --fs-900: 6.25rem;
    --fs-800: 3.5rem;
    --fs-700: 2rem;
    --fs-600: 1.75rem;
    --fs-500: 1.5rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-200: 0.875rem;
  }
}
/* ================
   2. Reset
   ================ */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 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 root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden; /* for mobile menu issues */
}

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

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

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================
   3. Other global styles
   ====================== */

/* Stop animations firing when window resizes */
/* https://css-tricks.com/stop-animations-during-window-resizing/ */
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}
::selection {
  background-color: hsl(var(--clr-wai-1));
  color: hsl(var(--clr-dark));
}

/* ================
     4. Typography
   ================ */
body {
  font-family: var(--ff-sans-normal);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: hsl(var(--clr-dark));
}

a {
  text-decoration: none;
  color: hsl(var(--clr-wai-3));
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:visited {
  text-decoration: none;
  color: hsl(var(--clr-wai-4));
}

code {
  font-family: var(--ff-mono);
  background-color: #80808046;
  letter-spacing: 0.2ch;
}

.code-block {
  font-family: var(--ff-mono);
  font-stretch: expanded;
  background-color: rgba(0, 0, 0, 0.774);
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  letter-spacing: 0.2ch;
  margin-bottom: 0.5rem;
}

/* Header title text */
.image-text {
  background-image: url(/assets/wai.jpg);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-text {
  font-family: sans-serif;
  font-weight: var(--fs-400);
  text-transform: uppercase;
  font-size: calc(1rem + 6vw);
  line-height: 1;
  text-align: center;
  margin: 0;
  margin-bottom: 1rem;
}

h1 {
  font-family: sans-serif;
  font-weight: var(--fs-400);
  text-transform: uppercase;
  font-size: var(--fs-700);
  line-height: 1;
  color: hsl(var(--clr-wai-4));
  text-align: center;
  margin: 0;
  margin-bottom: 1rem;
}

h2 {
  color: hsl(var(--clr-wai-4));
  font-size: var(--fs-700);
  margin-bottom: 0.5rem;
}

h3 {
  color: hsl(var(--clr-wai-3));
  font-size: var(--fs-500);
  margin-bottom: 0.3rem;
}

.eda-prompt {
  color: hsl(var(--clr-wai-3));
  font-size: var(--fs-400);
  font-style: italic;
  padding-bottom: min(20vh, 1em);
}

/* ====================
     5. Utility classes
  ===================== */

/* General */

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
  justify-content: center;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-space, 1rem);
}

.container {
  padding-inline: 2em;
  margin-inline: auto;
  max-width: var(--max-with, 80rem);
}

.blog-post {
  --max-with: 50rem;
}

.homepage {
  --max-with: 90vw;
  --min-width: ;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/* ===================
     6. Layout
  ==================== */

/* Primary header */

.primary-header {
  align-items: center;
  justify-content: space-between;
}

/* Logo */

.logo {
  display: inline-block;
  padding-left: 2rem;

  color: hsl(var(--clr-wai-3));
  font-size: var(--fs-700);
}

.logo a {
  color: hsl(var(--clr-wai-3));
  font-size: var(--fs-700);
}

/* Primary navigation */

.primary-navigation {
  --gap: 4rem;
  --underline-gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-navigation a {
  text-decoration: none;
  color: hsl(var(--clr-dark));
}

.underline-indicators * {
  cursor: pointer;
  padding: var(--underline-gap, 1rem) 0;
  border: 0;
  border-bottom: 0.2rem solid hsl(var(--clr-wai-3), 0);
}

.underline-indicators *:hover,
.underline-indicators *:focus {
  border-color: hsl(var(--clr-wai-3), 0.4);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-wai-3), 1);
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 35em) {
  .logo {
    padding-left: 1rem;
    padding-top: 1rem;
  }
  .primary-navigation {
    --gap: 2em;
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    flex-direction: column;

    padding: min(30vh, 10rem) 2em;
    background: hsl(var(--clr-wai-3), 0.96);

    transform: translateX(100%);
    transition: transform 350ms ease-out;
  }

  @supports (backdrop-filter: blur(1rem)) {
    .primary-navigation {
      background: hsl(var(--clr-wai-3), 0.6);
      backdrop-filter: blur(1rem);
    }
  }

  .primary-navigation[data-visible='true'] {
    transform: translateX(0%);
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 9999;
    border: 0;
    background: none;
    right: 1rem;
    font-size: var(--fs-500);
  }
  .mobile-nav-toggle[aria-expanded='true'] {
    position: fixed;
  }
}

@media (min-width: 35em) {
  .primary-navigation {
    --gap: 3rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
    padding-inline: clamp(2rem, 10vw, 10rem);
  }
}

/* Sections */

/* section {
  padding-block: min(20vh, 1rem);
} */
/* See end of stylesheet – temporary specific breakpoints added for EDA assessment */

p {
  padding-bottom: min(20vh, 1rem);
}

/* Footer */

footer {
  margin-top: 2rem;
  align-items: center;
  justify-content: space-between;
  background-color: hsl(var(--clr-wai-3));
  color: hsl(var(--clr-white));
  list-style: none;
  padding: 1rem;
}

footer p {
  display: grid;
  place-content: center;
  padding-bottom: 0;
}

footer ul {
  list-style: none;
  padding-right: 1rem;
}

footer a {
  color: hsl(var(--clr-white));
  text-decoration: none;
  font-size: var(--fs-500);
}

footer a:hover,
footer a:focus {
  color: hsl(var(--clr-yellow));
}
/* ===================
     7. Components
   =================== */

/* Cards */
.card {
  --image-url: url('../assets/blog-images/dog-rabbit.jpg');
  --gap: 3rem;
  color: hsl(var(--clr-white));
  background-image: var(--image-url);
  background-size: cover;
  background-position: center;
  padding: 10rem 0 0;
  border: 3px solid hsl(var(--clr-wai-3));
  /* max-width: 35ch; */
  max-width: 100%;
  display: block;
  border-radius: 1rem;
  overflow: hidden; /* needed to make bottom corners rounded due to card-content */
  transition: transform 500ms ease;
}

.card:hover {
  transform: scale(1.05);
}

.card-content {
  --padding: 1.5rem;
  padding-bottom: var(--padding);
}

.card-title {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: hsl(var(--clr-dark));
}

.card-title > a {
  color: hsl(var(--clr-dark));
  background-color: hsl(var(--clr-yellow));
  padding-inline: 0.3ch;
}

.card-title:hover > a {
  text-decoration: none;
}

.card-body {
  color: hsl(var(--clr-dark));
}

/* Buttons */

.button {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  color: hsl(var(--clr-white));
  background-color: hsl(var(--clr-wai-3));
  padding: 0.5em 1.25em;
  border-radius: 1.25em;
}

.button a {
  color: hsl(var(--clr-white));
}

.button:hover,
.button:focus {
  background-color: hsl(var(--clr-wai-1));
  text-decoration: none;
  color: hsl(var(--clr-wai-4));
}

/* Media Queries for EDA Assessment (The site was already fully responsive but didn't use the specific breakpoints mentioned in the COmpetency Requirements, so I've added these tweaks in case having media queries for those break points was mandatory  */

@media (max-width: 320px) {
  section {
    padding-block: 0px;
  }
}

@media (min-width: 320px) {
  section {
    padding-block: 5px;
  }
}

@media (min-width: 768px) {
  section {
    padding-block: 0.5rem;
  }
}

@media (min-width: 1200px) {
  section {
    padding-block: 1rem;
  }
}