/* NOTE: Features tagged as Newly available or Limited availability in Baseline are indicated. Find all instances of "Baseline" in your text editor to see them. */

/* Fonts */

/* Playfair Display Regular */
@font-face {
  font-family: 'Playfair Display';

  src:  local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
        url('assets/fonts/PlayfairDisplay/subset-PlayfairDisplay-Regular.woff2') format('woff2');

  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

/* Roboto: Regular */
@font-face {
  font-family: 'Roboto';

  src:  local('Roboto Regular'), local('Roboto-Regular'),
        url('assets/fonts/Roboto/subset-Roboto-Regular.woff2') format('woff2');

  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

/* Roboto: Bold */
@font-face {
  font-family: 'Roboto';

  src:  local('Roboto Bold'), local('Roboto-Bold'),
        url('assets/fonts/Roboto/subset-Roboto-Bold.woff2') format('woff2');

  font-weight: bold;
  font-style: normal;

  font-display: swap;
}

/* Roboto: Italic */
@font-face {
  font-family: 'Roboto';

  src:  local('Roboto Italic'), local('Roboto-Italic'),
        url('assets/fonts/Roboto/subset-Roboto-Italic.woff2') format('woff2');

  font-weight: normal;
  font-style: italic;

  font-display: swap;
}

/* Roboto Bold: Italic */
@font-face {
  font-family: 'Roboto';
  src:  local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
        url('assets/fonts/Roboto/subset-Roboto-BoldItalic.woff2') format('woff2');
  
  font-weight: bold;
  font-style: italic;
  
  font-display: swap;
}

:root {
  /* (1) Fonts */

  /* (1 - A) System font stacks */

  /* Didone system font stack — see notes at https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#didone */
  --display-system-font-stack: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

  /* Neo-Grotesque system font stack — see notes at https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#neo-grotesque */
  --body-system-font-stack: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

  /* Native emoji support system font stack — refer to https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#emoji-support */
  --emoji-system-font-stack: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  /* (1 - B) Page fonts */

  --display-font: 'Playfair Display', var(--display-system-font-stack), var(--emoji-system-font-stack);
  --body-font: 'Roboto', var(--body-system-font-stack), var(--emoji-system-font-stack);

  /* (2) Colors */
  
  --brand-color-primary: #0891b2;
  --brand-color-secondary: #ffffff;

  /* The following two variables are alternatives the previous two, used to ensure a color contrast of at least 4.5 (according to WCAG Conformance Level AA) */

  --brand-color-primary-alt: #0881a0;
  --brand-color-secondary-alt: #1c1c1c;

  --text-color-display: #060b04;
  --text-color-body: #575655;
  
  /* (3) Shadows */

  --box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
  --text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);

  /* Makes the value of `1rem` equal to `10px`, without overriding the user's preferred base font size. */
  font-size: 62.5%;
}

/* (A) General styles */

/* NOTE: Some of the following style rules and rulesets are based on Josh W. Comeau's custom CSS reset — refer to https://www.joshwcomeau.com/css/custom-css-reset */

* {
  /* TODO: Use a suitable value for `line-height` for headings. */
  line-height: 1.5;

  /* `word-wrap` has wider browser support than its newer synonym `overflow-wrap` */
  word-wrap: break-word;
}

.author-photo-credit {
  line-height: 1.25;
}

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

*:focus, *:focus-visible {
  outline: none;
}

*:not(dialog) {
  margin: 0;
}

*::selection {
  background-color: var(--brand-color-primary-alt);
  color: var(--brand-color-secondary);
}

.inverted-color-scheme *::selection {
  background-color: var(--brand-color-secondary) !important;
  color: var(--brand-color-primary-alt) !important;
}

/* Since all `img` and `svg` elements are not rendered in inline layout (see below), they are not underlined along with link text. */

a {
  text-decoration: none;
}

a:not(:is(.icon, .icon-with-text)) {
  color: var(--brand-color-primary-alt);
}

a.icon, a.icon-with-text {
  text-decoration: none;  
  color: inherit;
}

a:hover, a:not(:is(.icon, .icon-with-text)):focus-visible {
  text-decoration: underline;
}

a.icon:focus-visible, a.icon-with-text:focus-visible {
  /* TODO: Test whether using `rem` is more suitable than using `px` for this ruleset. */

  outline: 0.2rem solid var(--brand-color-primary-alt);
  outline-offset: 0.2rem;
}

.inverted-color-scheme a.icon:focus-visible, .inverted-color-scheme a.icon-with-text:focus-visible {
  outline-color: var(--brand-color-secondary-alt) !important;
}

a[target="_blank"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  gap: 0.25ch;
}

a[target="_blank"] svg[aria-label="opens in a new tab"] {
  /* An SVG with a width of `1em` looks appropriately sized relative to the link text at any given viewport width. */
  width: 1em;
}

.link-button {
  appearance: none;

  border: none;
  padding: 0;

  text-decoration: underline;

  background-color: transparent;
  color: var(--brand-color-primary-alt);

  cursor: pointer;
}

.underlined:hover {
  text-decoration: none;
}

.underlined:focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.2rem;
}

abbr {
  text-decoration: none;
  font-variant: normal;
}

address {
  /* Overrides the default value of `font-style` for `address` elements, that is, `italic` */
  font-style: normal;
}

b {
  font-weight: bold;
}

b.colored {
  color: var(--brand-color-primary-alt);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-font);
  color: var(--text-color-display);
}

/* Typographic scale uses the `em` unit to ensure that the various typographic elements scale with the fluid body */

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.15em;
}

/* TODO: Define `font-size` value for `h4`, `h5` and `h6` elements. */

/* `max-inline-size` is used here to control the maximum line lengths of paragraphs */

p {
  font-family: var(--body-font);
  color: var(--text-color-body);

  /* TODO: Change the value of this property to `60ch` if this can be accomplished with the same padding as in the design file. */
  max-inline-size: 75ch;
}

article p {
  max-inline-size: 40ch;

  font-size: 0.9em;
}

#page-main > p {
  font-size: 1em;
}

/* `@supports` at-rule used to prevent Microsoft Edge DevTools extension for Visual Studio Code from giving warnings (LOL) */
@supports (text-wrap: balance) and (text-wrap: pretty) {
  /* Baseline 2024: Newly available */

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }
}

img, canvas, picture, svg, video {
  display: block;

  max-width: 100%;
}

picture {
  /*
  `display: contents` prevents the element from rendering its own box.
  This effectively makes the direct children of the said element behave as direct children of the element's parent (their "grandparent") in the CSS, without removing the element from the markup.
  
  A bug in some of the older versions of the major browsers causes the removal of the element from the accessibility tree.
  */

  display: contents;

  /* TODO: Address any accessibility issues caused by `display: contents;` */
}

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

section {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: start;

  background-color: var(--brand-color-secondary);

  padding-bottom: 16px;

  --section-title-margin-bottom: 1.6rem;
}

section > * {
  width: 100%;
}

.section-title {
  margin-bottom: var(--section-title-margin-bottom);
}

small {
  display: block;
}

.author-links {
  display: flex;
  align-items: center;

  margin-top: calc(0.4 * var(--section-row-gap));

  gap: calc(var(--author-link-width) / 1.5);
}

/* TODO: Make author links scale with the viewport or the font size of the parent. */

.author-links img {
  width: var(--author-link-width);
  height: var(--author-link-width);
}

#page-header .author-links {
  justify-content: end;

  --author-link-width: 1.6em;
}

#page-footer .author-links {
  justify-content: start;

  --author-link-width: 2.2em;
}

.no-italics {
  font-style: normal;
}

html {
  /* Renders text with anti-aliasing — refer to https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#anti-aliasing */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Enables smooth scrolling */

  scroll-behavior: smooth;
}

/* TODO: Create animations. */

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  display: grid;

  min-height: 100dvh;

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

  /* Refer to: https://web.dev/learn/design/typography#clamping_text */
  font-size: clamp(1.6rem, calc(0.85rem + 1.5vw), 2.25rem);

  background-color: var(--brand-color-secondary);
  color: var(--text-color-body);
}

.inverted-color-scheme, .inverted-color-scheme * {
  background-color: var(--brand-color-primary) !important;
  color: var(--brand-color-secondary-alt) !important;
}

.inverted-color-scheme a:not(.icon, .icon-with-text) {
  text-decoration: underline;
}

#author-name-and-photo, #page-header::before, #about-me, .project-card {
  box-shadow: var(--box-shadow);
}

#author-name {
  text-shadow: var(--text-shadow);
}

/* Horizontal padding, border, and margin values are defined in percentages, ensuring that widths do not exceed the viewport width. */

body > * {
  --padding-left-right: 6.25%;

  /* In the design file the right padding is smaller than the left (except in the mobile layout), but this is ignored here. */
  padding: 64px var(--padding-left-right);

  max-width: 100%;
}

/* (B) Header styles */

#page-header {
  display: flex;
  justify-content: center;
  align-items: center;

  --author-name-and-photo-width: clamp(25rem, 35vw, 53rem);

  position: relative;
  isolation: isolate;
}

#page-header::before {
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  z-index: -1;

  width: 100%;
  height: 100%;

  background-color: var(--brand-color-primary);

  transform-origin: bottom left;
  transform: skewY(-15deg);
}

#author-name-and-photo {
  container: author-name-and-photo / inline-size;

  position: relative;
  isolation: isolate;

  width: var(--author-name-and-photo-width);
}

#author-name {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;

  color: var(--brand-color-secondary);

  text-align: center;

  /* TODO: Reduce the left and right padding of the author name in the mobile layout. */
  padding: 0 0.5ch;

  /* Baseline: Limited availability */
  -webkit-user-select: all;
  user-select: all;
}

#author-photo {
  aspect-ratio: 10 / 11;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* TODO: Prevent the "about me" section from having a greater height than the header image. */

#about-me {
  --about-me-padding-top: 56px;

  /* Multiplying a unitless value by a percentage resolves to a percentage value, which is then computed to the corresponding pixel value. */
  --about-me-padding-left: 2%;
  --about-me-padding-right: calc(1.25 * var(--about-me-padding-left));

  padding-top: var(--about-me-padding-top);
  padding-bottom: calc(0.5 * var(--about-me-padding-top));

  padding-left: var(--about-me-padding-left);
  padding-right: var(--about-me-padding-right);

  width: calc(100% - var(--author-name-and-photo-width));
}

/* Setting `display` for `#about-me > .section-body` to `flex` or `grid` prevents text wrapping around the author image in the tablet layout. */
#about-me p:not(p:last-child) {
  margin-bottom: 0.5em;
}

#about-me .author-photo-credit {
  margin-top: 1.5em;
}

#about-me .section-footer {
  margin-top: 54px;
}

/* (C) Main styles */

#page-main {
  margin-bottom: 64px;
}

#my-work > .section-body {
  display: grid;

  /* Prevent using the desired minimum width (`39.5rem`) if it exceeds the width of the container. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 39.5rem), 1fr));

  gap: 5.6rem 4.8rem;
}

#project-sort-note {
  --project-sort-note-padding: 1em;

  padding-top: calc(var(--project-sort-note-padding) - var(--section-title-margin-bottom));
  padding-bottom: var(--project-sort-note-padding);
}

.project-card {
  --highlight-text-opacity: 0;
  --highlight-border-opacity: 0;

  --highlight-transition-timing-function: ease-out;

  display: grid;
  grid-template-rows: auto 1fr;
}

.highlighted {
  position: relative;
}

.highlighted .top-left-tag, .highlighted::after {
  transition-duration: 0.55s;
  transition-timing-function: var(--highlight-transition-timing-function);
  transition-property: opacity;
}

.highlighted .top-left-tag {
  content: '';
  text-transform: uppercase;

  position: absolute;
  top: 0;
  left: 0;

  padding: 1.75% 2.5%;

  font-weight: bold;

  -webkit-user-select: none;
  user-select: none;

  background-color: var(--brand-color-primary-alt);
  color: var(--brand-color-secondary);
}

.highlighted#latest-project .top-left-tag {
  content: 'latest';

  opacity: var(--highlight-text-opacity);
}

.highlighted.in-progress-project .top-left-tag {
  content: 'in progress';
}

.highlighted#latest-project::after {
  content: '';

  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  right: 0;

  border: 0.4rem solid var(--brand-color-primary-alt);

  opacity: var(--highlight-border-opacity);

  /* Instructs the browser to apply all pointer events to element underneath the pseudo-element (the project card itself), allowing link activation and text-selection. */
  pointer-events: none;
}

.project-image {
  /* At some viewport widths the width of the project details container is greater than the width of the image, leaving a white space on the right side of the image. */
  width: 100%;
  height: 100%;

  order: -1;
}

div.project-image {
  /* Fallback background color in case loading of the script for assigning random colors fails or is delayed. */
  background-color: var(--brand-color-primary);
  color: var(--brand-color-secondary);

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

  /* Setting `display` to `flex` or `grid` caus */
  text-align: center;
  align-content: center;

  padding: 20%;
}

.project-image-text .fit-text-wrapper {
  display: flex;
  flex-direction: column;

  /* Baseline: Limited Availability */
  -webkit-user-select: none;
  user-select: none;
}

.project-details {
  padding: 20px 5% 84px 6%;
}

.project-title-and-links {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 16px;
}

.project-links {
  display: grid;
  grid-auto-flow: column;

  place-items: center;

  column-gap: 1.5rem;

  color: var(--text-color-display);
}

.project-links > * > * {
  aspect-ratio: 1 / 1;
  width: 1.25em;
  height: auto;
}

.project-description {
  display: grid;
  row-gap: 0.5em;
}

/* (C) Footer styles */

#contact-me {
  flex-flow: row wrap;

  /* Required to prevent section text and image from being too close at narrower viewport widths. */
  gap: 6.4rem;
}

#contact-me .section-text {
  flex: 0.4 1 0;
}

#contact-me .section-image {
  flex: 0.6 0 0;

  align-self: stretch;
}

#author-footer-photo {
  min-height: 100%;

  object-fit: cover;
}

#contact-me .section-body-text {
  display: flex;
  flex-direction: column;

  row-gap: 50px;
}

#contact-me .author-contact-info {
  /* CSS Subgrid is a Baseline: Newly Available feature, so `display: contents;` is preferred. */
  display: contents;
}

.author-communication > * {
  display: flex;
  align-items: center;

  column-gap: 1.6rem;
}

.author-communication > * > svg {
  --author-communication-icon-width: min(54px, 4.4rem);

  flex-basis: var(--author-communication-icon-width);

  /* Prevents shrinking of the email icon to zero width. */
  min-width: var(--author-communication-icon-width);
  
  height: var(--author-communication-icon-width);
}

/* Tablet styles */
@media (600px <= width < 1200px) {
  body > * {
    --padding-left-right: 11%;

    padding: 40px 0;
    padding-left: calc((var(--padding-left-right) - var(--about-me-margin-left)) * var(--author-name-photo-scale));
    padding-right: calc(var(--padding-left-right) * var(--author-name-photo-scale));

    /* The left and right paddings have not been increased, so as to maintain enough width for the "about me" section, preventing its title from breaking into a new line. */
    /* The left and right paddings are made equal to each other, unlike in the design file where the right margin is wider than the left. */

    /* The following variables have been defined here, as they are needed for styles outside the "about me" section. */
    --about-me-margin-top: 3em;
    --about-me-margin-left: calc(var(--about-me-margin-top) / 2.1);

    --author-name-photo-scale: 1.05;
  }

  #page-header, #page-header > * {
    /* When the header and/or the "about me" section has/have a flexbox or grid layout, `float: left` and margins on `div#author-name-and-photo` do not produce the desired results. */
    display: block;
  }

  #author-name-and-photo {
    /* TODO: Find out the reason why text in the "about me" section is inside the margin by about `0.75ch`. */
    /* TODO: Find out the reason why floated elements have extra space between them and the text below. */

    float: left;
    margin-right: calc(1.6rem * var(--author-name-photo-scale) + 0.75ch);
    margin-bottom: 0.5em;

    transform: scale(var(--author-name-photo-scale));
  }

  #author-name {
    /* TODO: Prevent the author name from overflowing the viewport on larger user-preferred font sizes. */

    position: absolute;
    top: -5px;
    left: calc(100% - 1ch);

    /* Without the following two rules, the element box becomes shorter than its text content and as wide as `div#author-name-and-photo`, which makes it harder to select other elements in developer tools. */
    width: max-content;
    height: min-content;

    padding: 0;
  }

  #author-name > fit-text {
    /* Override the inline font size rule added by FitText, as it is not needed in the tablet layout. */
    font-size: inherit !important;
  }

  #about-me {
    width: 100%;

    --padding-multiplier: 3;

    padding-left: calc(var(--padding-multiplier) * var(--about-me-padding-left));
    padding-right: calc(var(--padding-multiplier) * var(--about-me-padding-right));

    margin-top: var(--about-me-margin-top);
    margin-left: var(--about-me-margin-left);
  }

  #about-me .section-title {
    text-align: center;
  }

  #about-me .section-footer {
    /* In the design file for the tablet layout, the header author links are hidden but their space in the layout still exists. */
    visibility: hidden;
  }
}

@media (600px <= width <= 654px) {
  /* Use a smaller font size to avoid overflowing the viewport. */
  #author-name {
    font-size: 2.1em;
  }
}

@media (width < 600px) {
  .section-title {
    --section-title-margin-bottom: 4px;

    text-align: center;

    margin-bottom: calc(var(--section-title-margin-bottom / 2));
  }

  #page-header .author-links, #page-footer .author-links {
    justify-content: center;
  }

  body {
    row-gap: 64px;
  }

  #page-footer {
    padding: 0;
    padding-top: 12px;
  }

  #contact-me {
    padding-bottom: 0;
  }

  #page-header, #page-main, #page-footer > #contact-me > #section-text {
    padding: 12px 5%;
  }

  #page-header {
    display: flex;
    flex-direction: column;

    row-gap: 16px;

    --author-photo-aspect-ratio-w: 5;
    --author-photo-aspect-ratio-h: 8;

    --author-photo-aspect-ratio: var(--author-photo-aspect-ratio-w) / var(--author-photo-aspect-ratio-h);
    --author-photo-ratio: calc(var(--author-photo-aspect-ratio));

    /* Makes the page header span the entire visual viewport height if its content height is less than or equal to the visual viewport height, and overflow the viewport otherwise. */
    min-height: 100dvh;
  }

  #page-header::before {
    height: calc( var(--author-name-and-photo-width) / var(--author-photo-ratio) );
  }

  #author-name-and-photo {
    float: initial;

    aspect-ratio: var(--author-photo-aspect-ratio);
  }

  #author-name {
    text-align: start;

    width: 100%;
  }

  #author-name .fit-text-wrapper {
    display: flex;
    flex-direction: column;
  }

  #about-me {
    padding: 0;

    width: 100%;

    box-shadow: none;
  }

  #about-me .author-photo-credit {
    margin-top: 0.25em;
  }

  #about-me .section-footer {
    margin-top: 12px;
  }

  #contact-me .section-image {
    min-width: 100%;
  }

  .author-communication > * > svg {
    --author-communication-icon-width: 32px;
  }
}