/* ==========================================================================
   MODERN CSS RESET
   ========================================================================== */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 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 body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

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

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ==========================================================================
   GLOBAL VARIABLES & THEMES
   ========================================================================== */
:root {
  --background-color: hsl(35, 5%, 95%);
  --background-color-alt: hsl(35, 5%, 90%);
  --background-color-input: hsl(35, 10%, 100%);
  --accent-color: #F97316;
  --text-color: hsl(35, 5%, 10%);
  --text-color-alt: hsl(35, 5%, 20%);
  --text-color-muted: hsl(35, 5%, 40%);

  --error-color: #D93025;
  --success-color: #188038;
  --warning-color: #E37400;

  --font-serif: "Merriweather", Georgia, serif;
  --font-sans: "NotoSans", Arial, sans-serif;


  --layout-max-width: clamp(50rem, 90vw, 90rem);
  --layout-padding: clamp(0.5rem, 4vw, 3rem);
  --layout-gap: clamp(0.5rem, 2vw, 2.5rem);
  --layout-breakpoint-sm: 40rem;
  --layout-breakpoint-md: 40rem;
  --layout-breakpoint-lg: 64rem;

  --button-radius: clamp(0.5rem, 1vw, 1rem);
}

/* Dark Mode */
html.dark {
  --background-color: hsl(35, 5%, 10%);
  --background-color-alt: hsl(35, 5%, 15%);
  --background-color-input: hsl(35, 10%, 5%);
  --text-color: hsl(35, 5%, 95%);
  --text-color-alt: hsl(35, 5%, 85%);
  --text-color-muted: hsl(35, 5%, 60%);
}

/* ==========================================================================
   FONT-FACES & BASE TYPOGRAPHY
   ========================================================================== */
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSans';
  src: url('/assets/fonts/NotoSans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSans';
  src: url('/assets/fonts/NotoSans-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-display: swap;
}

h1,
h2,
h3,
h4,
p,
a
 {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

body {
  line-height: 1.5;
  font-family: var(--font-sans);
  color: var(--text-color);
  background-color: var(--background-color);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  line-height: 1.1;
  font-weight: 900;
  margin-block-start: calc(var(--layout-padding) * 2);
}

h4 {
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.1;
  font-weight: 700;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
}

strong {
  font-weight: 600;
}

del {
text-decoration: line-through;
}


h1 {
  --fluid-type-min: 2.5rem;
  --fluid-type-max: 5rem;
  --fluid-type-target: 5vw;
  max-width: 15ch;
}

h2 {
  --fluid-type-min: 1.8rem;
  --fluid-type-max: 3rem;
}

h3 {
  --fluid-type-min: 1.5rem;
  --fluid-type-max: 2.5rem;
}

h2,
h3 {
  max-width: 30ch;
}

p {
  max-width: 60ch;
  text-align: justify;
}

a {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  color: var(--text-color);
  transition: color 0.2s ease;
}


a:hover,
a:focus,
a:active {
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}



a[href^="http"]:not([href*="tomasik.xyz"])::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('/img/external-link.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

a[href^="http"]:not([href*="tomasik.xyz"]) {
  padding-inline-end: 1em;
  text-decoration: underline;
}



/* ==========================================================================
   COMPOSITION (High-level Page Layout)
   ========================================================================== */
main {
  flex: 1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-width);
  min-height: 100vh;
  padding-inline: var(--layout-padding);
  padding-block-start: var(--layout-padding);
  margin: 0 auto;
}

.site-header {
  display: grid;
  grid-template-areas: "site-header-logo site-header-logo"
                        "site-header-tag site-header-tag"
                        "site-header-byline site-nav-controls"
                        "site-nav-list site-nav-list"
                        "site-nav-list site-nav-list";
  grid-template-columns: 1fr;
  gap: var(--layout-padding);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color-alt);
  padding: var(--layout-padding);
  margin-block-start: calc(var(--layout-padding)*2);
}

.site-footer p {
  max-width: fit-content;
  flex-wrap: wrap;
  text-align: center;
}

.album-description {
  margin-block: var(--layout-padding);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.icon {
  fill: var(--text-color);
  width: 1em;
  height: 1em;
  display: inline-block;
}

.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-mode-toggle {
  display: none;
}

.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 4rem;
  height: 2rem;
  background-color: var(--background-color-alt);
  border-radius: 2rem;
  transition: background-color 0.3s ease-in-out;
  overflow: hidden;
}

.toggle-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-color);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.moon {
  left: 0.25rem;
  transform: translateX(0);
  opacity: 1;
}

.sun {
  right: 0.25rem;
  transform: translateX(-2rem);
  opacity: 0;
}

.dark-mode-toggle:checked + .toggle-label {
  background-color: var(--text-color-muted);
}

.dark-mode-toggle:checked + .toggle-label::before {
  transform: translateX(-2rem);
  background-color: var(--text-color);
}

.dark-mode-toggle:checked + .toggle-label .moon {
  transform: translateX(2rem);
  opacity: 0;
}

.dark-mode-toggle:checked + .toggle-label .sun {
  transform: translateX(0);
  opacity: 1;
}

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: hsl(from var(--background-color-alt) h s l / 0.75);
  color: var(--text-color);
  border: 2px solid var(--text-color-muted);
  border-radius: 50%; 
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--accent-color);
  color: var(--background-color);
  border-color: var(--text-color);
}

/* ==========================================================================
   BLOCKS (Components)
   ========================================================================== */
.site-header-logo {
  grid-area: site-header-logo;
  display: flex;
  align-items: center;
  width: minmax(100px, 20vw);
}

.ju-initial {
  display: flex;
  width: clamp(4rem, 15vw, 8rem);
  height: clamp(4rem, 15vw, 8rem);
  border-radius: 50%;
  background-color: var(--accent-color);
  color: var(--background-color);
  align-self: center;
  justify-content: center;
  margin: 0 auto;
 }

 .ju-initial-svg path {
  fill: var(--text-color);
  transition: fill 0.3s ease-in-out;
}

.site-header-tag {
  grid-area: site-header-tag;
  font-family: var(--font-sans-italic);
  color: var(--text-color-alt);
  display: flex;
  align-items: center;
}
.site-header-byline {
  grid-area: site-header-byline;
  font-family: var(--font-sans-italic);
  color: var(--text-color-alt);
  display: flex;
  align-items: center;
  justify-self: start;
}

.site-nav-list {
  grid-area: site-nav-list;
  display: flex;
  align-items: center;
}

.site-nav-list ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 200px;
  list-style-type: none;
  justify-content: space-between;
  padding: 0;
  gap: calc(var(--layout-gap, 1rem) * 2.5);
}

.site-nav-list ul li {
  font-weight: 500;
}


.site-nav-list a.active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 0.175rem;
  text-decoration-color: var(--accent-color);
}

.site-nav-controls {
  grid-area: site-nav-controls;
  display: flex;
  align-items: center;
  justify-self: end;
  justify-content: end;
  width: 100%;
}

.site-nav-controls ul {
  color: var(--text-color-alt);
  display: flex;
  gap: var(--layout-gap);
  justify-content: flex-end;
  list-style-type: none;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem;
  margin-block: var(--layout-gap);
}

.masonry-grid {
  column-width: 320px;
  column-gap: var(--layout-gap);
  margin-block-start: calc(var(--layout-gap) * 2); 
}

.masonry-grid .masonry-item {
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  display: block;
}

.masonry-grid .masonry-item img {
  width: 100%;
  height: auto; 
  display: block;
}

.masonry-grid a.masonry-item {
  text-decoration: none;
  text-underline-offset: 0;
  display: block;
  line-height: 0;
  position: static; 
}

.polaroid-album {
  text-decoration: none;
  color: var(--text-color);
  display: block;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
  border-radius: 0.75rem;
}

.polaroid-album:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.polaroid-album figure {
  margin: 0;
  background-color: var(--background-color-input);
  padding: 1rem;
  padding-bottom: 3.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  border-radius: 0.75rem;
}

.polaroid-album figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 800;
}

.lqip-container {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color: var(--dominant-color);
}

.lqip-anchor {
  display: block;
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  text-decoration: none;
  line-height: 0;
  transition: transform 0.2s ease-in-out;
}

.lqip-anchor:hover {
  transform: scale(1.03);
}

.lqip-anchor::before {
  content: none;
}

.polaroid-album .lqip-container {
  aspect-ratio: 1 / 1;
}
.masonry-grid .lqip-container {
  aspect-ratio: var(--aspect-ratio);
}

.polaroid-album .lqip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lqip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

.lqip-image.loaded {
  opacity: 1;
}

.masonry-grid .lqip-anchor {
  display: block;
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  text-decoration: none;
  line-height: 0;
}

.masonry-grid .lqip-anchor:hover {
  transform: scale(1.03);
}

.masonry-grid .lqip-anchor::before {
  content: none;
}

.album-nav {
  margin-block: calc(var(--layout-gap)*2);
}

.album-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 200px;
  list-style-type: none;
  justify-content: space-between;
  padding: 0;
  gap: calc(var(--layout-gap, 1rem) * 2.5);
}

.album-nav ul li {
  font-weight: 500;
}

/* ==========================================================================
    EXCEPTIONS
    ========================================================================== */

.masonry-grid a.lqip-anchor::before {
  content: none;
}

.masonry-grid a.lqip-anchor:hover,
.masonry-grid a.lqip-anchor:focus {
  transform: scale(1.03);
  transition: transform 0.2s ease-in-out;
}

.masonry-grid a.lqip-anchor:hover::before,
.masonry-grid a.lqip-anchor:focus::before {
    transform: scaleX(0); 
    background-color: transparent; 
}

.album-grid a.polaroid-album::before {
  content: none;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Desktop */
@media (min-width: 64rem) {
  .site-header {
    grid-template-areas: "site-header-logo site-header-tag site-header-byline"
                          "site-nav-list site-nav-list site-nav-controls";
    grid-template-columns: 1fr 1fr 1fr;
  }

.site-nav-list ul li {
display: block;
padding: 0;
}

  .site-header-byline {
    justify-self: end;
  }

  .site-nav-controls {
    justify-content: end;
  }
  
}

/* Tablet */
@media (min-width: 40rem) and (max-width: 64rem) {
  .site-header {
    grid-template-areas: "site-header-logo site-header-logo"
                          "site-header-tag site-header-tag"
                          "site-header-byline site-nav-controls"
                          "site-nav-list site-nav-list";
    grid-template-columns: 1fr 1fr;
  }

  .site-header-byline {
    justify-self: start;
  }

  .site-nav-controls {
    justify-self: end;
  }
}