/* List of things to fix:
  1. Make alt images for mobile and desktop versions of the website
  2. Find a more efficient way to calculate the height of the privacy policy scrollbar text on desktop
  3. Write alt text for images in Japanese
  4. Convert the images to webp
  6. break down the js script to avoid errors on pages without the scrollbar field?
  8. instead of loading the fonts with import, load them directly in the page header
*/

/* List of media queries
@media (width <= calc(399 / 16 * 1rem))
@media (width >= calc(400 / 16 * 1rem)) -- for footer
@media (width >= calc(600 / 16 * 1rem))
@media (width >= calc(1000 / 16 * 1rem))
@media (width >= calc(1248 / 16 * 1rem)) -- for section title padding
@media (width >= calc(1260 / 16 * 1rem)) -- for section items grid
*/

@import url("/fonts/css/general-sans.css");
@import url("/fonts/css/newsreader.css");
@import url("/fonts/css/libre-baskerville.css");

@layer global {
  /* Fonts */
  :root {
    --font-primary: "Newsreader", Garamond, Georgia, serif;
    --font-secondary: "GeneralSans-Variable", Verdana, Arial, sans-serif;
    --font-display: "Libre Baskerville", Garamond, Georgia, serif;

    --fs-12px: calc(12 / 16 * 1rem);
    --fs-14px: calc(14 / 16 * 1rem);
    --fs-16px: calc(16 / 16 * 1rem);
    --fs-17px: calc(17 / 16 * 1rem);
    --fs-18px: calc(18 / 16 * 1rem);
    --fs-19px: calc(19 / 16 * 1rem);
    --fs-20px: calc(20 / 16 * 1rem);
    --fs-22px: calc(22 / 16 * 1rem);
    --fs-24px: calc(24 / 16 * 1rem);
    --fs-26px: calc(26 / 16 * 1rem);
    --fs-28px: calc(28 / 16 * 1rem);
    --fs-30px: calc(30 / 16 * 1rem);
    --fs-32px: calc(32 / 16 * 1rem);
    --fs-36px: calc(36 / 16 * 1rem);
    --fs-38px: calc(38 / 16 * 1rem);
    --fs-48px: calc(48 / 16 * 1rem);

    --font-size-h1: var(--fs-30px);
    --font-size-language: var(--fs-18px);
    --font-size-topnav: var(--fs-18px);
    --font-size-h2: var(--fs-24px);
    --font-size-h3: var(--fs-20px);
    --font-size-project-subtitle: var(--fs-14px);
    --font-size-project-tags: var(--fs-12px);
    --font-size-body-text: var(--fs-16px);
    --font-size-email-address: var(--fs-18px);
    --font-size-contact-form-field-title: var(--fs-16px);
    --font-size-contact-form-field-input: var(--fs-16px);
    --font-size-privacy-policy-h1: var(--fs-24px);
    --font-size-privacy-policy-h2: var(--fs-20px);
    --font-size-privacy-policy-h3: var(--fs-18px);
    --font-size-privacy-policy-h4: var(--fs-18px);
    --font-size-privacy-policy-text: var(--fs-16px);
    --font-size-button: var(--fs-20px);
    --font-size-footer-text: var(--fs-12px);
    --font-size-photo-credit: var(--fs-12px);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-h1: var(--fs-48px);
      --font-size-language: var(--fs-30px);
      --font-size-topnav: var(--fs-30px);
      --font-size-h2: var(--fs-36px);
      --font-size-h3: var(--fs-26px);
      --font-size-project-subtitle: var(--fs-20px);
      --font-size-project-tags: var(--fs-18px);
      --font-size-body-text: var(--fs-20px);
      --font-size-email-address: var(--fs-24px);
      --font-size-contact-form-field-title: var(--fs-20px);
      --font-size-contact-form-field-input: var(--fs-20px);
      --font-size-privacy-policy-h1: var(--fs-32px);
      --font-size-privacy-policy-h2: var(--fs-24px);
      --font-size-privacy-policy-h3: var(--fs-22px);
      --font-size-privacy-policy-h4: var(--fs-18px);
      --font-size-privacy-policy-text: var(--fs-18px);
      --font-size-button: var(--fs-30px);
      --font-size-footer-text: var(--fs-18px);
      --font-size-photo-credit: var(--fs-16px);
    }
  }

  /* Colours */
  :root {
    --c-white: #ffffff;
    --c-black: #000000;
    --c-grey-dark: #4d4d4d;
    --c-grey-midtone: #999999;
    --c-grey-light: #e6e6e6;

    --colour-main-bg: var(--c-white);
    --colour-border: var(--c-grey-light);
    --colour-button: var(--c-black);
    --colour-list: var(--c-grey-dark);
    --colour-secondary-bg: var(--c-black);
    --colour-text-dark-primary: var(--c-black);
    --colour-text-dark-secondary: var(--c-grey-dark);
    --colour-text-light: var(--c-white);
    --colour-text-tags: var(--c-grey-midtone);
    --colour-text-placeholder: var(--c-grey-midtone);
  }

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

  * {
    margin: 0;
  }

  html,
  body {
    scroll-padding-top: 130px;
    scroll-behavior: smooth;

    @media (min-width: calc(600 / 16 * 1rem)) and (max-width: calc(999 / 16 * 1rem)) {
      scroll-padding-top: 180px;
    }

    @media (min-width: calc(1000 / 16 * 1rem)) {
      scroll-padding-top: 120px;
    }
  }

  body {
    min-height: 100vh;
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: var(--font-size-body-text);
    line-height: 1.3;
    color: var(--colour-text-dark-primary);
    background-color: var(--colour-main-bg);
  }

  header {
    background-color: var(--colour-main-bg);
    padding-top: 32px;
    padding-bottom: 16px;
    box-shadow: var(--colour-border) 0px 0px 3px;

    @media (width >= calc(600 / 16 * 1rem)) {
      padding-top: 32px;
      padding-bottom: 32px;
    }
  }

  footer {
    background-color: var(--colour-secondary-bg);
    color: var(--colour-text-light);
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
    text-transform: lowercase;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--font-size-h1);
    font-weight: 770;
    font-family: var(--font-secondary);
    font-variant-caps: small-caps;
    font-kerning: normal;
    letter-spacing: -1%;
    color: var(--colour-text-dark-primary);
  }

  h2 {
    font-size: var(--font-size-h2);
    font-weight: 500;
    font-family: var(--font-display);
    font-variant-caps: small-caps;
    font-kerning: normal;
    letter-spacing: 0%;
    color: var(--colour-text-light);
  }

  h3 {
    font-size: var(--font-size-h3);
    font-weight: 550;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-variant-caps: small-caps;
    font-kerning: normal;
    letter-spacing: 0%;
    color: var(--colour-text-dark-primary);
  }

  a {
    text-decoration: none;
  }

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

  .wrapper {
    width: min(calc(100% - 48px), calc(1200 / 16 * 1rem));
    margin-inline: auto;
  }

  .wrapper-secondary {
    width: min(calc(100% - 48px), calc(1032 / 16 * 1rem));
    margin-inline: auto;
    padding-block: 2rem;
    display: grid;
    justify-content: center;

    @media (width >= calc(1260 / 16 * 1rem)) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .small-caps {
    font-variant-caps: small-caps;
  }
}