/*
 * Site CSS for yuvalk.com.
 * Migrated from the Custom CSS & JS plugin snippets (one section per former snippet).
 */

/* ==== home-bg-black ==== */
body.page-id-31 {
  background-color: #111111 !important;
}

/* ==== archive-title ==== */
/* Standout fade-in Archive Title style */
.standout-archive-title {
  font-size: 2rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  color: white !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 5px solid white;
  padding-left: 1rem;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 2s ease-out forwards;
  animation-delay: 0.3s;
}

/* Fade-in animation */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ==== hide-ficcion-title ==== */
.tax-genre_type-ficcion.single-genre .wp-block-post-title {
  display: none;
}


/* ==== home-bio ==== */
/* Name headline + role line + short bio, next to the reel on the home page. */
.home-bio {
  max-width: 34rem;
}

.home-bio .home-bio__name {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
  text-transform: uppercase;
}

.home-bio .home-bio__role {
  margin: 1rem 0 0;
  color: #9a9a9a;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-bio .home-bio__text {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  color: #cfcfcf;
  font-size: 1rem;
  line-height: 1.6;
}

/* Film titles in the bio link to their YouTube videos: brighter than the
   text, with a thin underline that lights up on hover. */
.home-bio .home-bio__film {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.3s ease;
}

.home-bio .home-bio__film:hover,
.home-bio .home-bio__film:focus-visible {
  text-decoration-color: #fff;
}

@media (max-width: 781px) {
  .home-bio {
    max-width: none;
    margin-bottom: var(--wp--preset--spacing--40);
    text-align: center;
  }

  .home-bio .home-bio__name {
    font-size: 2rem;
  }

  .home-bio .home-bio__role {
    font-size: 0.85rem;
  }

  .home-bio .home-bio__text {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
  }
}


/* ==== home-images ==== */
/* Each home section card is a slim modern TV: a thin dark bezel with
   rounded corners, a faint glass glare, a small power light and a low
   stand. On hover the screen "switches on" (brightens) and lifts. */
.genre-term-card {
  display: block;
  position: relative;
  text-decoration: none;
  width: 100%;
  height: 45vh;
  min-height: 260px;
  box-sizing: border-box;
  padding-bottom: 22px;
}

/* Stand */
.genre-term-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 28%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(#2a2a2a, #141414);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Screen inside the bezel */
.genre-card-image {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 8px solid #0a0a0a;
  border-bottom-width: 14px;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px #2c2c2c,
    0 18px 40px -12px rgba(0, 0, 0, 0.8);
  filter: brightness(0.82) saturate(0.85);
  transition: filter 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

/* Glass: soft diagonal glare plus a dark fade at the bottom for the title */
.genre-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 40%);
  pointer-events: none;
}

/* Power light, centred in the bottom bezel */
.genre-card-image::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #3a3a3a;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.genre-card-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 18px 20px;
  color: white;
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.genre-term-card:hover .genre-card-image,
.genre-term-card:focus-visible .genre-card-image {
  filter: brightness(1.05) saturate(1);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px #3a3a3a,
    0 24px 50px -12px rgba(0, 0, 0, 0.9),
    0 0 60px -10px rgba(255, 255, 255, 0.12);
}

.genre-term-card:hover .genre-card-image::before,
.genre-term-card:focus-visible .genre-card-image::before {
  background: #e8e8e8;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .genre-card-image,
  .genre-card-image::before {
    transition: none;
  }
}

/* Keep the row of cards off the window edges, so the outer frames are
   not cut off (the grid group is full width with no side padding). */
body.page-id-31 .wp-block-group.is-layout-grid {
  padding-left: var(--wp--preset--spacing--50) !important;
  padding-right: var(--wp--preset--spacing--50) !important;
}

/* The reel on the home page gets the same TV frame as the cards, with the
   power light on (it is always "playing"). No glare, so nothing sits over
   the video. */
body.page-id-31 .wp-block-embed-youtube {
  position: relative;
  padding-bottom: 22px;
}

body.page-id-31 .wp-block-embed-youtube .wp-block-embed__wrapper {
  border: 8px solid #0a0a0a;
  border-bottom-width: 14px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px #2c2c2c,
    0 18px 40px -12px rgba(0, 0, 0, 0.8);
}

/* Power light */
body.page-id-31 .wp-block-embed-youtube::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 27px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #e8e8e8;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Stand */
body.page-id-31 .wp-block-embed-youtube::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 28%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(#2a2a2a, #141414);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Phones: stack the home section cards instead of three narrow strips
   (the group is a fixed 3-column grid, which does not wrap on its own). */
@media (max-width: 781px) {
  body.page-id-31 .wp-block-group.is-layout-grid {
    grid-template-columns: 1fr;
  }

  .genre-term-card {
    height: 32vh;
    min-height: 220px;
  }

  .genre-card-title {
    font-size: 1rem;
    padding: 14px 16px;
  }
}


/* ==== bg-for-petardas ==== */
body.postid-249 {
  position: relative;
  background-image: url('/wp-content/uploads/2025/06/white_tiles-500x500.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

body.postid-249::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6); /* Adjust the 0.6 for more/less overlay */
  pointer-events: none;
  z-index: 0;
}

body.postid-249 .wp-site-blocks {
  position: relative;
  z-index: 1;
}


/* ==== bg-for-hijas ==== */
/* Default desktop style */
body.postid-209 {
  background-image: 
    url('/wp-content/uploads/2025/06/0ed02946-e787-43aa-af63-85b23bdce54b-1-233x300.png'),
    url('/wp-content/uploads/2025/06/0ed02946-e787-43aa-af63-85b23bdce54b-1-233x300.png');
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: auto, auto;
  background-attachment: scroll;
  background-color: white;
  background-origin: border-box;
  padding-left: 200px;
  padding-right: 200px;
}

/* Mobile style: reduce padding so content is visible */
@media (max-width: 768px) {
  body.postid-209 {
    padding-left: 20px;
    padding-right: 20px;
    background-size: 80px auto, 80px auto; /* optional: shrink image size */
    background-position: left top, right top;
  }
}





/* ==== bg-water ==== */
body.postid-210 {
  background-image: url('/wp-content/uploads/2025/06/Screenshot-2025-06-24-at-15.07.23-500x233.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}


body.postid-210 .wp-site-blocks {
  background-color: rgba(173, 216, 230, 0.3);
  padding: 2rem;
}


/* ==== statements ==== */
.genre-type-statement-wrapper {
  position: relative;
  margin-bottom: 2em;
  width: 100%;
}

.genre-type-statement {
  overflow: hidden;
  max-height: 8em; /* adjust to show ~2-3 lines */
  transition: max-height 0.5s ease;
  text-align: left;
}

.read-toggle {
  display: none;
}

.read-toggle:checked ~ .genre-type-statement {
  max-height: 100em; /* allow full content to show */
}

.read-more-label {
  display: inline-block;
  cursor: pointer;
  color: #0073aa; /* blue */
  font-weight: bold;
  margin-top: 1em;
}

.read-more-label::before {
  content: "Leer más";
}

.read-toggle:checked ~ .read-more-label::before {
  content: "Leer menos";
}

/* Optional: improve spacing */
.genre-type-statement p {
  margin-bottom: 1em;
}


/* ==== remove-ficcion-ttitles ==== */
body.genre_type-ficcion .wp-block-post-title {
  display: none !important;
}


/* ==== meta-data-for-genres ==== */
.genre-details p {
  margin: 0 0 0.5em;
  font-size: 1rem;
  text-align: left;
}
.genre-details strong {
  color: #ccc; /* or your preferred highlight color */
}