/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------------- Clearfix ---------------------- */
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
/*  Border box - reseting the box sizing to be based on the border  */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



/* --------------- Global settings ----------------------- */
:root {
  /* Color scheme selected with Realtime colors*/
  --clr-text: #fafbf9;
  --clr-background: #272727;
  --clr-primary: #1cdec4;
  /* --clr-primary: #ed700a; */
  --clr-secondary: #1b1e21;
  --clr-accent: #bdbdbd;  

  /* Font families paired with Fontpair.co */

  --ff-logo: 'Lato', sans-serif;
  --ff-base: 'Montserrat', sans-serif;
  --ff-logo2: 'Poiret One', cursive;

  /* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1240,16,1.25,3,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /*Variable font sizes that expand with certain rate when the viewport is changed */
  --fs-100: clamp(0.52rem, calc(0.48rem + 0.21vw), 0.64rem);
  --fs-200: clamp(0.63rem, calc(0.56rem + 0.30vw), 0.80rem);
  --fs-300: clamp(0.75rem, calc(0.66rem + 0.43vw), 1.00rem);
  --fs-400: clamp(0.90rem, calc(0.78rem + 0.61vw), 1.25rem);
  --fs-500: clamp(1.08rem, calc(0.91rem + 0.84vw), 1.56rem);
  --fs-600: clamp(1.30rem, calc(1.07rem + 1.14vw), 1.95rem);

  /* Spacing for the word "Photography" */
  --logo-spacing: clamp(0.62rem,calc(0.58rem + 0.20vw),0.7rem);

  --z-index-above-img: 5;
  --z-index-above-all: 10;
  --z-index-above-all-elems: 11;

  --max-width: 1200px;

  --gap: clamp(1rem, 0.545rem + 1.939vi, 2rem);
}
/* --------------- End Global settings ----------------------- */

/* ----------------- Utility classes -------------------------- */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
}
.grid {
  display: grid;
  grid-gap: var(--gap);
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.fs-med-small {
  font-size: var(--fs-200);
}
.fs-regular {
  font-size: var(--fs-300);
}
.fs-med-large {
  font-size: var(--fs-400);
}
.fs-large {
  font-size: var(--fs-500);
}
.ff-headers {
  font-family: var(--ff-logo);
}
.ff-base {
  font-family: var(--ff-base);
}
.fw-thin {
  font-weight: 300;
}
.fw-regular {
  font-weight: 400;
}
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
.container {
  position: relative;
  width: min(100% - 2rem, var(--max-width));
  margin: 0 auto;
  padding: 1rem 0;
}
.stacked {
  display: grid;
}
.stacked > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.page-title {
  margin: 3rem;
}
@media (max-width: 35em) {
  .page-title {
    margin: 1rem;
  }
}
/* ----------------- End of Utility classes ------------------ */


/* ------------------ General settings ---------------------- */
img {
  max-width: 100%; /* Not larger than the window width */
}
body {
  margin-inline: auto; /*Keep the margin on left and right for the mobile version*/
  background-color: var(--clr-background); /*Main background color for the whole page*/
  color: var(--clr-text); /*Main test color for the whole page*/
  /* Font selection: thickness; font size, line size, font priority order */
  line-height: 1.5; /* Default line height */
}
a {
  text-decoration: none; /* No default underline for the links */
  color: var(--clr-text); /* Normal text color for the links */
  transition: 500ms; /* Smooth transition to the hover state */
}
a:hover {
  color: var(--clr-primary); /* Hover color for the links */
}
p {
  font-family: var(--ff-base);
  font-size: var(--fs-300);
}
header {
  white-space: nowrap; /*Don't wrap any text in the header*/
}
footer {
  color: #888;
}
button {
  border: 0; /*Eliminate the default border*/
  cursor: pointer; /*For clickable elements*/
}
h1 {
  text-transform: uppercase;
  font-family: var(--ff-base);
  font-size: var(--fs-500);
  font-weight: 300;
  text-align: center;
}
h1::first-letter {
  font-size: 150%;
  font-weight: 500;
  color: var(--clr-primary);
}
h2 {
  text-transform: uppercase;
  font-family: var(--ff-base);
  font-size: var(--fs-400);
  font-weight: 400;
  letter-spacing: 0.2rem;
}
h3 {
  font-family: var(--ff-base);
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--clr-text);
  text-align: center;
  font-style: italic;
}
h4 {
  font-family: var(--ff-base);
  font-size: var(--fs-300);
  font-weight: 400;
  text-align: center;
}
h5 {
  font-family: var(--ff-base);
  font-size: var(--fs-200);
  font-weight: 400;
}
/* ------------ End of general settings -------------------- */

/* ---------------- Component classes ----------------------- */

/* --------------------- Header ----------------------------- */
.header {
  border-bottom: 1px solid var(--clr-text); /* Bottom border common for mobile and desktop. The top border only in desktop nav*/
}

/* Header background image */
.header__bg {
  background-color: var(--clr-background);
  background-image: url("../images/home/HomeBackgroundWeb.jpg"); /* Overrides the background color */
  background-repeat: no-repeat; /* No repetition of the background image */
  background-size: cover; /* Adjust the width to the viewport */
  background-position: center; /* Centered image */
  padding-top: 0.01rem; /* Trick to fix unwanted padding. Better fix? */
  z-index: -1; /* Should appear behind all other elements */
}


.logo {
  position: relative;
  margin: 2rem auto 6rem 2rem; /*Size of the header is determined by the margins of the logo*/
  width: fit-content;
  color: var(--clr-text);
  word-spacing: 0.4rem;
  letter-spacing: 0.2rem;
  z-index: 1;
  padding: 0.25rem 0 0.5rem 0.5rem;
  backdrop-filter: blur(0.5rem);
  border-top: 1px solid var(--clr-text);
  border-bottom: 1px solid var(--clr-text);
  transition: 250ms all ease-in;
}

/* Last span of the logo which is basically the word "photography" */
.logo span:last-of-type {
  letter-spacing: var(--logo-spacing);
}

/* Alternative background for the nav if blur is not supported */
.nav__list {
  background: color-mix(in srgb, var(--clr-background) 90%, transparent);
  letter-spacing: .5px;
}

/* Nav background blurry and transparent is supported by the browser */
@supports (backdrop-filter: blur(1rem)) {
  .nav__list {
    background: color-mix(in srgb, var(--clr-background) 70%, transparent);
    backdrop-filter: blur(1rem);
  }
}

/* Nav options spacing */
.nav__item {
  margin: 1rem;
}

/* Menu button invisible in desktop view. Switched on by nav.js */
.mobile-nav-toggle {
  display: none;
}

/* --------------------------- Main --------------------------- */

/* Class for the div that encompasses whole main section. This creates a background filter in front bg image */
.main {
  position: relative;
  overflow: hidden; /* Hide overflowing elements. Without it there are some spurious lines */
}

.main__bg {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(
  color-mix(in srgb, var(--clr-background) 50%, transparent), 
  transparent, 
  color-mix(in srgb, var(--clr-background) 50%, transparent)), 
  url("../images/home/HomeBackgroundWeb4.jpg");
  z-index: -1;
  opacity: 0.25;
  background-size: cover;
  filter: blur(0.1rem);
}

.carousel__container {
  height: min(85vw, calc(0.85 * var(--max-width))); /*Dynamic size, limited from top*/
}

.carousel__slide {
  position: absolute; /*They should stack on top of each other*/
  top: 50%;
  transform: translateY(-50%); /*So that the button actually sits in the middle*/
  opacity: 0; /*The images are by default hidden, only one of them has full opacity with data-active*/
  transition: 250ms opacity ease-in-out;
  height: min(85vw, calc(0.85 * var(--max-width)));
  width: min(100%, var(--max-width));
}

/* The active image is shown */
.carousel__slide[data-active] {
  opacity: 1;
}

.carousel__image {
  height: 100%;
  width: 100%;
  object-fit: contain; /*Needs width and height*/
}

.carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /*So that the button actually sits in the middle*/
  background: transparent; /*Transparent background for the button*/
  opacity: 60%;
}

.carousel__button:hover,
.carousel__button:focus {
  opacity: 80%;
}

.carousel__button--left {
  left: 0.5rem;
}

.carousel__button--right {
  right: 0.5rem;
}

.carousel__button img {
  width: 1.5rem;
}

/* Style for mobile version */
@media (max-width: 35em) {

  .main__bg {
    position: absolute;
    background-image: linear-gradient(
      color-mix(in srgb, var(--clr-background) 50%, transparent), 
      transparent, 
      color-mix(in srgb, var(--clr-background) 100%, transparent)), 
      url("../images/home/HomeBackgroundWeb4Mobile.jpg");
  }

  /* Style for the nav list. By default moved outside of window view */
  .nav__list {
    position: fixed; /* Does not move with scrolling */
    inset: 0 0 0 60%; /* Nav does not cover 60% of the space from the left endge */
    padding: 11rem 0 0 0; /* Padding of the nav items from the top */
    flex-direction: column; /* Nav items vertically distributed */
    z-index: var(--z-index-above-all); /* Nav in front of all other items */
    transform: translateX(100%); /* The mobile nav by default outside of the view window */
    transition: transform 250ms ease-out; /* Menu toggle movement style */
    font-size: var(--fs-400);
  }

  .nav__list[data-visible="true"] {
    transform: translateX(0%); /* When the menu button is clicked, the nav is moved inside the view window */
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute; /* Absolute position to be controlled by top and right */
    top: 8.5rem; /* Distance from top of the parent */
    right: 1.5rem; /* Distance from right of the parent */
    background-color: transparent; /* No background color */
    background-image: url("../icons/burger-menu.svg");
    background-repeat: no-repeat; /* Repetition of the bg image to fill its space */
    background-size: contain; /* Other option: cover. Sets the bg image size to fit within its borders. */
    opacity: 0.9; /* Obvious */
    width: 1.5rem; /* Actual size */
    aspect-ratio: 1; /* Sets the other dimension */
    z-index: var(--z-index-above-all-elems); /*Sets the z index to appear in front of all other elements*/
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url("../icons/times.svg"); /* When the nav list is expanded, change the icon to times */
    position: fixed;
  }
}

/* Desktop only settings */
@media (min-width: 35em) {

  .logo {
    margin: 2rem auto max(6rem,10vw) 2rem; /* Positioning of the logo */
  }

  .nav__list {
    justify-content: center; /* Centered nav items */
    border-top: 1px solid var(--clr-text); /* White border on the top only in desktop */
    background: color-mix(in srgb, var(--clr-background) 70%, transparent); /* Alternative bg */
  }

  /* Nav background blurry and transparent is supported by the browser */
  @supports (backdrop-filter: blur(0.5rem)) {
    .nav__list {
      background: color-mix(in srgb, var(--clr-accent) 10%, transparent);
      backdrop-filter: blur(0.5rem);
    }
  }

  .carousel__slide {
    width: min(100% - 8rem, var(--max-width) - 8rem);
    left: 4rem;
  }

  .carousel__button img {
    width: 2rem;
  }
}

.footer {
  flex-direction: column;
  align-items: center;
}

.social-link {
  color: inherit;
  padding: 0 0.25rem;
}

/* ------------------------------- Gallery.php ----------------------------- */

.categories__list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: calc(var(--gap) * 2);
  margin-inline: 2rem;
  min-height: 100vh;
  align-content: flex-start;
}

.categories__item {
  aspect-ratio: 1;
  text-align: center;
  overflow: hidden;
}

.categories__name {
  align-self: center;
  width: 100%;
  height: fit-content;
  padding: 1rem 0;
  backdrop-filter: blur(1rem);
  background: color-mix(in srgb, var(--clr-background) 20%, transparent);
  z-index: var(--z-index-above-img);
  transition: 250ms all ease-in;
}

.categories__img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: 250ms transform ease-out;
}

.categories__item:hover img,
.categories__item:focus img {
  transform: scale(1.05);
}

@media (max-width: 35em) {
  .categories__list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    margin-inline: 0rem;
  }

  .categories__item {
    padding: 0rem;
  }

  .categories__name {
    font-size: var(--fs-300);
  }
}

/* -------------------------- Image galleries -------------------------- */

.gallery-return {
  display: block; /*Link is an inline element. Need to change it to a block for padding and margin to work*/
  margin: 0.5rem 2rem;
}

.gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(30%, 350px), 1fr));
  gap: calc(var(--gap) * 0.5);
  margin-inline: 2rem;
  /* min-height: 100vh; */
  align-content: flex-start;
}

.gallery__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery__item__img {
  transition: 250ms transform ease-out;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.gallery__item__label-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-self: end;
  backdrop-filter: blur(0.5rem);
  background: color-mix(in srgb, var(--clr-background) 30%, transparent);
  transition: 250ms all ease-in;
  opacity: 0;
}

.gallery__item__img:hover,
.gallery__item__img:focus {
  transform: scale(1.05);
}

/* .gallery__item:focus *, */

.gallery__item__span {
  align-self: center;
  width: 100%;
  height: fit-content;
  padding: 0.5rem 0.5rem;
  z-index: var(--z-index-above-img);
  text-align: left;
  transition: color 250ms ease-in, opacity 250ms ease-in;
  opacity: 0;
}

.gallery__item__span:last-child {
  text-align: right;
}

@media (min-width: 35em) {
  .gallery__item:hover * {
    opacity: 1;
    color: white;
  }
}

@media (max-width: 35em) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(40%, 100px), 1fr));
    margin-inline: 0.5rem;
  }

  .gallery-return {
    display: block; /*Link is an inline element. Need to change it to a block for padding and margin to work*/
    margin: 1rem 0.5rem;
    font-size: var(--fs-400);
  }
}

/* ---------------------------------- Fancybox --------------------------------- */

.fancybox__caption {
  text-align: center;
  padding: 0;
  margin: 0;
}

/* ---------------------------- Bio / Contact ------------------------------------ */

.bio-box, .contact-box {
  margin: auto;
  margin-top: 1rem;
  padding: 2rem;
  background: color-mix(in srgb, var(--clr-accent) 20%, transparent); /* Alternative bg */
  text-align: justify;
  border-radius: 1.5rem;
}

/* Nav background blurry and transparent is supported by the browser */
@supports (backdrop-filter: blur(0.2rem)) {
  .bio-box, .contact-box {
    background: color-mix(in srgb, var(--clr-accent) 10%, transparent);
    backdrop-filter: blur(0.2rem);
  }
}

.bio-box {
  width: min(800px, 100% - 2rem);
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-areas:
  "image bio"
  "awards bio";
}

.bio-box > *,
.contact-box > * {
  height: fit-content; /*Automatic height of all children*/
}

.bio-grid__item-1 {
  grid-area: image;
  align-self: center;
}

.bio-grid__item-2 {
  grid-area: bio;
}

.bio-grid__item-3 {
  grid-area: awards;
  align-self: flex-end;
}

.p-awards {
  text-align: left;
}

.bio-name {
  text-align: center;
  margin-top: 2rem;
}

.bio__img {
  display: block;
  margin: auto;
  border-radius: 50%;
  /* width: 60%; */
  aspect-ratio: 1/1;
}

.bio-box p {
  margin-bottom: 0.5rem;
}

.bio-box a {
  color: var(--clr-primary);
}

.contact-box {
  width: min(900px, 100% - 2rem);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "intro intro"
  "form image";
}

.contact-grid__item-1 {
  grid-area: intro;
}

.contact-grid__item-2 {
  grid-area: form;
  direction: column; /*The items flow vertically*/
  gap: 1rem;
}

.contact-grid__item-2 textarea{
  height: 150px;
}

.contact-grid__item-3 {
  grid-area: image;
}

.contact-title {
  margin: 2rem auto;
  width: fit-content;
}

.contact__input {
  height: 2rem;
  width: 100%; /*Without it they have a minimum size and does not work in mobile*/
  border: 1px solid var(--clr-text);
  border-radius: 0.5rem;
  padding: 0.5rem;
  outline: none;
  background: none;
  font-family: var(--ff-base);
  font-size: var(--fs-300);
  color: var(--clr-text);
}

.contact__input:focus {
  border: 1.5px solid white;
}

.contact__input::placeholder {
  color: var(--clr-accent)
}

.contact__button {
  display: flex; /*Align centrally*/
  justify-content: center; /*Align centrally*/
  align-items: center; /*Align vertically*/
  height: 2rem;
  width: 5rem;
  background: linear-gradient(0.25turn,
    var(--clr-accent) 40%,
    var(--clr-text)
  );
  border: 1px solid var(--clr-text);
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--clr-secondary);
  transition: 250ms all ease-out;
}

.contact__button:hover,
.contact__button:focus {
  opacity: 0.75;
  border: 1px solid var(--clr-secondary);
}

.contact-grid__item-3 {
  justify-content: center; /*Align vertically*/
  align-items: flex-end; /*Does not squeeze the image and aligns to the bottom*/
}

.contact__img {
  border-radius: 1rem;
  filter: grayscale(50%); /*Less saturation*/
}

@media (max-width: 35em) {
  .bio-box,
  .contact-box {
    width: 100% - 1rem;
    padding: 1rem;
  }

  .bio-box {
    grid-template-columns: 100%;
    grid-template-areas: 
    "image" 
    "bio" 
    "awards";
  }

  .contact-box {
    margin-top: 0.5rem;
    grid-template-columns: 100% 0%;
    grid-template-areas:
    "intro"
    "form";
  }

  .bio__img {
    width: 60%;
  }

  .contact__img {
    display: none;
  }
}