/*
  ===== Preamble =====

  Responsiveness breakpoints:
  - sm -> < 768px
  - md -> >= 768px
  - lg -> >= 1024px
*/

/* Iconify Icon layout shift fix */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* 
  |============================|
  |===== Font Definitions =====|
  |============================|
*/

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wdth\,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Italic-VariableFont_wdth\,wght.ttf")
    format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-VariableFont_wdth\,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf")
    format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* 
  |=========================|
  |===== Global Styles =====|
  |=========================|
*/

:root {
  /* Enable support for light / dark mode switching for light-dark() function. */
  color-scheme: light dark;

  /* Primary color */
  --color-primary-50: oklch(97.7% 0.013 236.62);
  --color-primary-100: oklch(95.1% 0.026 236.824);
  --color-primary-200: oklch(90.1% 0.058 230.902);
  --color-primary-300: oklch(82.8% 0.111 230.318);
  --color-primary-400: oklch(74.6% 0.16 232.661);
  --color-primary-500: oklch(68.5% 0.169 237.323);
  --color-primary-600: oklch(58.8% 0.158 241.966);
  --color-primary-700: oklch(50% 0.134 242.749);
  --color-primary-800: oklch(44.3% 0.11 240.79);
  --color-primary-900: oklch(39.1% 0.09 240.876);
  --color-primary-950: oklch(29.3% 0.066 243.157);

  /* Grayscale color */
  --color-grayscale-50: oklch(98.5% 0 0);
  --color-grayscale-100: oklch(96.7% 0.001 286.375);
  --color-grayscale-200: oklch(92% 0.004 286.32);
  --color-grayscale-300: oklch(87.1% 0.006 286.286);
  --color-grayscale-400: oklch(70.5% 0.015 286.067);
  --color-grayscale-500: oklch(55.2% 0.016 285.938);
  --color-grayscale-600: oklch(44.2% 0.017 285.786);
  --color-grayscale-700: oklch(37% 0.013 285.805);
  --color-grayscale-800: oklch(27.4% 0.006 286.033);
  --color-grayscale-900: oklch(21% 0.006 285.885);
  --color-grayscale-950: oklch(14.1% 0.005 285.823);

  /* Global context-aware colors */
  /* Main */
  --color-main-bg: light-dark(
    var(--color-grayscale-50),
    var(--color-grayscale-800)
  );
  --color-main-text: light-dark(
    var(--color-grayscale-950),
    var(--color-grayscale-50)
  );

  /* Header */
  --color-header-bg: light-dark(
    var(--color-grayscale-200),
    var(--color-grayscale-700)
  );
  --color-header-text: var(--color-main-text);

  /* Footer */
  --color-footer-bg: light-dark(
    var(--color-grayscale-300),
    var(--color-grayscale-900)
  );
  --color-footer-text: light-dark(
    var(--color-grayscale-700),
    var(--color-grayscale-200)
  );
  --color-footer-text-alt: light-dark(
    var(--color-grayscale-600),
    var(--color-grayscale-400)
  );

  /* Fonts */
  --font-display:
    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-content:
    "Open Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shadows */
  --shadow-header: 0 0 0.5rem 0
    light-dark(var(--color-grayscale-400), var(--color-grayscale-900));
}

* {
  box-sizing: border-box;
}

/* Use smooth scrolling by default, ignore if user specified otherwise. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 
  |=========================|
  |===== Helper Styles =====|
  |=========================|
*/

/* 
  Elements with this class are invisible to the user, 
  but readable by assistive screen readers. 
*/
.visually-hidden {
  position: absolute;
  padding: 0;
  margin: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* 
  |=======================|
  |===== Page Layout =====|
  |=======================|
*/

html,
body {
  width: 100dvw;
  height: 100dvh;
}

body {
  background-color: var(--color-main-bg);
  color: var(--color-main-text);

  font-family: var(--font-content);
  font-size: 1rem;
}

header {
  grid-row: 1 / 2;
}

main {
  grid-row: 2 / 3;
}

footer {
  grid-row: 3 / 4;
}

/* 
  |==================|
  |===== Header =====|
  |==================|
*/

.header {
  width: 100%;
  height: 4rem;

  display: flex;
  justify-content: center;

  font-family: var(--font-display);

  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  height: inherit;
  position: relative;

  width: 100%;
  border-radius: 0;
  margin-block-start: 0;

  background-color: oklch(from var(--color-header-bg) l c h / 0.5);
  backdrop-filter: blur(0.5rem);
  color: var(--color-header-text);

  box-shadow: var(--shadow-header);

  @media (width >= 768px) {
    width: 90%;
    border-radius: 100vh;
    margin-block-start: 1rem;

    flex-wrap: nowrap;

    padding-inline: 1.5rem;
  }

  @media (width >= 1024px) {
    width: 75%;

    padding-inline: 3rem;
  }

  &:has(.header__nav.open) {
    box-shadow: none;
  }
}

.header__logo {
  flex: 0;
  height: 3rem;

  margin-inline-start: 1.5rem;

  @media (width >= 768px) {
    margin-inline-start: 0;
  }

  & img {
    height: inherit;
  }
}

.header__nav {
  /* Wrap to next line on small devices. */
  flex-basis: 100%;

  display: flex;
  align-items: center;

  @media (width < 768px) {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    /* 
      This cuts the menu at the top, so that it doesn't overlap with the rest of the header.
      At the same time, it makes space of 2rem for the box-shadow to appear 
      (which `overflow: hidden;` wouldn't allow).
      */
    clip-path: inset(0 -2rem -2rem -2rem);

    visibility: hidden;
    transition: visibility 0.5s ease;

    &.open {
      visibility: visible;

      & .header__list {
        transform: translateY(0);
      }
    }
  }
}

.header__list {
  display: flex;
  flex-direction: column;

  gap: 1rem;
  width: 100%;
  padding: 1rem 1rem;
  margin: 0;

  @media (width < 768px) {
    transform: translateY(-100%);

    transition: transform 0.5s cubic-bezier(0.15, 1, 0.3, 1);

    background-color: oklch(from var(--color-header-bg) l c h / 0.75);
    backdrop-filter: blur(0.5rem);
    box-shadow: var(--shadow-header);
  }

  @media (width >= 768px) {
    flex-direction: row;
    justify-content: end;
    overflow-y: auto;
  }

  & li {
    list-style: none;
  }
}

.header__link {
  color: var(--color-header-text);
  text-decoration: none;
  font-weight: 600;
  position: relative;

  transition: color 0.25s ease;

  padding-block: 0.5rem;
  padding-inline: 0.25rem;

  display: inline-block;
  width: 100%;
  font-size: 1.5rem;

  @media (width >= 768px) {
    display: inline;
    padding: 0;
    font-size: 1rem;
  }

  &:hover {
    color: var(--color-primary-500);
  }

  &::after {
    position: absolute;
    content: "";

    bottom: -0.375rem;
    left: 0;
    right: 0;
    width: 0;
    height: 0.25rem;

    transition: width 0.25s ease;

    background-color: var(--color-primary-500);
    border-radius: 100vh;
  }

  &:hover::after {
    width: 100%;
  }
}

.header__menu-toggle {
  appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;

  border-radius: 0.5rem;
  font-size: 2rem;
  aspect-ratio: 1 / 1;

  justify-self: end;
  transition: background-color 0.25s ease;

  margin-inline-end: 1.5rem;
  margin-block: 0.5rem;

  @media (width >= 768px) {
    display: none;
  }

  &:hover {
    background-color: oklch(
      from light-dark(var(--color-grayscale-300), var(--color-grayscale-600)) l
        c h / 0.75
    );
  }
}

/* 
  |================|
  |===== Main =====|
  |================|
*/

main {
  margin: 0 auto;

  width: 90%;

  @media (width >= 768px) {
    width: 80%;
  }

  @media (width >= 1024px) {
    width: 67%;
  }

  & h2 {
    position: relative;
    width: fit-content;

    font-size: 2rem;

    &::after {
      position: absolute;
      content: "";
      bottom: -0.375rem;
      left: 0;
      right: 0;

      width: 100%;
      height: 0.25rem;

      background-color: light-dark(
        var(--color-primary-600),
        var(--color-primary-400)
      );
    }
  }

  & p {
    text-align: justify;
  }
}

/* |===== Section: Home =====| */

#home {
  width: 100%;
}

.home__hero {
  display: flex;
  flex-direction: column;

  margin: 4rem;

  @media (width >= 768px) {
    flex-direction: row;
  }

  @media (width >= 1024px) {
  }

  & .home__hero-image-wrapper {
    width: 100%;
    flex: 1;

    filter: drop-shadow(0 0 0.75rem var(--color-primary-500));

    & img {
      width: 100%;
      clip-path: polygon(10% 20%, 85% 0%, 50% 100%);
    }
  }

  & hgroup {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    & h1 {
      margin-block: 0 1rem;
      font-size: 3rem;
    }

    & p {
      margin-block: 0;
      font-size: 1.5rem;
    }
  }
}

/* |===== Section: Home =====| */

.about__education-card {
  padding: 1rem;

  background-color: light-dark(
    var(--color-grayscale-300),
    var(--color-grayscale-700)
  );
  border-radius: 1rem;

  margin-block-end: 0.5rem;

  & summary {
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    list-style: none;

    & iconify-icon {
      float: right;
      font-size: 1.5rem;
    }
  }

  &[open] iconify-icon {
    transform: rotate(0.5turn);
  }
}

/* 
  |==================|
  |===== Footer =====|
  |==================|
*/

.footer {
  width: 100%;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);

  display: flex;
  justify-content: center;

  padding-block: 1.5rem;

  & hr {
    width: 75%;
    height: 0.125rem;
    margin: 0 auto;

    flex-basis: 100%;

    background-color: var(--color-primary-500);
  }
}

.footer__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  width: 90%;

  @media (width >= 768px) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  @media (width >= 1024px) {
    width: 75%;
  }

  & h3 {
    font-size: 1.5rem;
    margin-block: 0 1rem;
  }
}

.footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5rem;

  text-decoration: none;

  & img {
    height: 4rem;
  }

  & p {
    margin-block: 0;
    color: var(--color-footer-text-alt);
  }
}

.footer__socials {
  & ul {
    list-style: none;
    padding-inline-start: 0;

    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
  }

  & a {
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--color-footer-text-alt);
    transition: color 0.25s ease;

    &:hover {
      color: var(--color-footer-text);
    }
  }
}

.footer__contact {
  & address {
    font-style: normal;

    & :is(a, span) {
      text-decoration: none;
      color: var(--color-footer-text-alt);
    }
  }
}

.footer__copyright {
  color: var(--color-footer-text-alt);
  text-align: center;
  width: 100%;

  & p {
    margin-block: 0;
    color: var(--color-footer-text-alt);
  }
}