/*
Theme Name:   Elena Guillén
Theme URI:    http://elenaguillen.es
Description:  Elena Guillen portfolio, custom theme
Author:       Alejandro Núñez
Author URI:   http://www.alejandronunez.com
Template:     blankslate
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, portfolio, photography
Text Domain:  Elena Guillén - Fotografía
*/
/**--------------------------------------------
 **               VARIABLES
 **---------------------------------------------**/
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;700&display=swap");

:root {
  /** ------- measures -------*/
  --desktop-header-height: 80px;
  --logo-width: 140px;
  --home-logo-width: 56px;

  --post-list-header-height: 40px;
  --post-list-desplacement: 120px;
  --post-list-article-max-height: 480px;

  --gallery-nav-bt-width: 48px;

  /** time vars */
  --slide-animation-time: 350ms;

  /** ------- colors -------*/
  --main-text-color: #000000df; /* ?tbd */

  --home-page-text-color: #ffffffdf;

  /** ------- effects -------*/
  --home-header-gradient: linear-gradient(
    to bottom,
    #04040435 0%,
    #04040400 100%
  );

  --home-footer-gradient: linear-gradient(0deg, #04040435 0%, #04040400 80px);
}

/**--------------------------------------------
 **               Basic settings
 **---------------------------------------------**/

body {
  font-family: "Lexend", monospace;
  font-weight: 200;
  font-size: 16px;
  color: var(--main-text-color);
}

img {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: var(--main-text-color);
}

a,
p {
  font-size: 0.825rem;
  line-height: 1rem;
}

h1 {
  font-size: 1.6em;
  font-weight: 300;
}

h2 {
  font-size: 1.2em;
  font-weight: 300;
}

/**----------------------
 **    Specific Styles
 **------------------------**/

.entry-title h2 {
  font-weight: 400;
  font-size: 1.26em;
}

.home #menu .menu-item {
  font-weight: 300;
}

.single .entry-title {
  font-size: 0.825em;
  font-weight: 200;
  padding: 8px 12px;
  background-color: #ffffff6f;
}

.home svg.icon {
  stroke: #ffffff;
  /* TODO: esto es una prueba */
}

.home #content article header h2 {
  color: var(--home-page-text-color);
}

/**--------------------------------------------
**                LAYOUT
**---------------------------------------------**/

/**------------------ relative position -----------------*/
html,
body,
#wrapper,
#header,
#content,
#content article,
.entry-content {
  position: relative;
}

html,
body {
  width: 100%;
  height: 100%;
}

#wrapper {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/**------------------ HEADER -----------------*/

#header {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  min-height: var(--desktop-header-height);
  padding: 0 24px;
}

/**------- logo -------*/

#site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: var(--logo-width);
}

.home #site-logo {
  width: var(--logo-width);
  align-items: center;
}

#site-logo a {
  display: flex;
  align-items: center;
}

/**------- nav -------*/

#header nav {
  align-self: center;
}

#header ul.menu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .menu-item {
  align-self: center;
  overflow: hidden;
  position: relative;
}

#header .menu-item a {
  padding: 8px 12px;
  display: block;
}

/**------------------ content -----------------*/

#content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
  justify-content: space-around;
  gap: 24px;
  margin: 0 24px;
  padding-bottom: var(--post-list-desplacement);
}

#content header {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / span 2;
  height: var(--post-list-header-height);
}

#content article {
  max-width: 100%;
  max-height: var(--post-list-article-max-height);
  overflow: hidden;
  position: relative;
}

#content article:nth-child(odd) {
  top: var(--post-list-desplacement);
}

.entry-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/**------- post-title overlay -------*/

#content article header {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 45;
}

.entry-title {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**------------------ footer -----------------*/

footer {
  min-height: 20px;
  padding: 24px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home footer,
.single footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 99;
  padding: 0 12px;
}

footer .social-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

footer .social-box .social-box-item {
  width: 24px;
  position: relative;
  bottom: 0;
  transition: bottom ease 200ms;
}

footer .social-box .social-box-item:hover {
  bottom: 4px;
}

footer .social-box .social-box-item svg {
  width: 100%;
  object-fit: contain;
  position: relative;
}

/**--------------------------------------------
**                SESSION
**---------------------------------------------**/

.single #wrapper {
  width: 100%;
  height: 100%;
}

.single #content {
  all: unset;
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 0;
}

.single #content article {
  top: 0;
}

.single #content article header {
  position: absolute;
  z-index: 55;
  width: auto;
  height: auto;
  bottom: 0;
  left: 0;
}

.single #content .post {
  max-height: 100%;
  width: 100%;
  height: 100%;
  padding: 24px;
  position: relative;
}

/**----------------------
 **    GALLERY
 **------------------------**/

.single .wp-block-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.single .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  align-self: center;
  position: relative;
}

.active-slide {
  z-index: 85;
  left: 0;
}

.next-slide {
  z-index: 89;
}

.hidden-slide {
  z-index: 50;
}

/**------- gallery-nav buttons (session view) -------*/

.gallery-nav-bt {
  position: absolute;
  z-index: 98;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 4px;
}

.gallery-nav-bt svg {
  max-width: 48px;
  opacity: 0;
  transition: opacity ease-in-out 0.25s, right ease-in-out 0.25s,
    left ease-in-out 0.25s;
  position: absolute;
}

.gallery-nav-bt:hover svg {
  opacity: 1;
}

/* nav-bt-prev */

.gallery-nav-bt-prev {
  width: 35%;
  left: 0;
  justify-content: flex-start;
}
.gallery-nav-bt-prev svg {
  left: 0;
}
.gallery-nav-bt-prev:hover svg {
  left: 12px;
}

/* nav-bt-next */

.gallery-nav-bt-next {
  width: 35%;
  right: 0;
  justify-content: flex-end;
}

.gallery-nav-bt-next svg {
  right: 0;
}
.gallery-nav-bt-next:hover svg {
  right: 12px;
}

/**----------------------
 **    HOME gallery
 **------------------------**/

.home #wrapper {
  width: 100%;
  height: 100%;
}

.home #header {
  position: absolute;
  z-index: 150;
  background: none;
  background-image: var(--home-header-gradient);
  width: 100%;
}

.home #content {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.home #content article header {
  width: auto;
  height: auto;
  bottom: 0;
  left: 0;
  padding: 8px 12px;
}

.home-page-slider {
  width: 100%;
  height: 100%;
}

.home #content .home-page-entry {
  position: absolute;
  max-height: 100%;
  width: 100%;
  height: 100%;
  top: 0;
}

.home-page-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--home-footer-gradient);
}

.home-page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.home .gallery-nav-bt {
  height: 70%;
  top: 15%;
}

.home #content article header {
  left: -30%;
}

.home #content article header a {
  padding: 4px 8px;
}

/**----------------------
 **    menu hover effect
 **------------------------**/

#header .menu-item a,
.home #content article header a {
  background-image: url("./src/blackpixel.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -120%;
  transition: background-position-y ease-in-out 180ms, color ease-out 100ms;
}

.home .menu-item a {
  color: var(--home-page-text-color);
}

#header .menu-item a:hover,
.home #content article header a:hover {
  color: #ffffff;
  background-position-y: 0;
}

/**----------------------
 **    post-list-view hover effect
 **------------------------**/

#content article a.post-listed-link img {
  transition: scale ease-in-out 0.1s;
}

#content article a.post-listed-link:hover img {
  transition: scale ease-in-out 0.1s;
  scale: 0.98;
  filter: blur(4px);
}

#content article a header h2 {
  background-color: #ffffff82;
  opacity: 0;
  position: relative;
  top: 60%;
  transition: top ease-in-out 180ms, opacity linear 180ms;
}

#content article a:hover header h2 {
  opacity: 1;
  top: 0;
}

/**----------------------
 **    color
 **------------------------**/