/*
Theme Name: Samymrena
Theme URI: https://samymrena.ddev.site
Author: Donbranco
Description: Editorial block theme for samy­mrena.fi — eye surgeon Samy Mrena.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samymrena
Tags: full-site-editing, block-patterns, block-styles
*/

/* Editorial section divider — top hairline + extra breathing room. */
.is-style-section-bordered {
  border-top: 1px solid var(--wp--preset--color--subtle);
}

/* Hover states for nav and footer links — quiet but legible. */
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}

/* Outline button text color follows the user-set color in editor. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
}

/* Tighten heading tracking on the hero on smaller screens. */
@media (max-width: 640px) {
  h1 { letter-spacing: -0.02em; }
}

/* Cover blocks used as section cards — drop their default minimum height
   so the rounded corners look intentional rather than filling viewport. */
.wp-block-cover.has-custom-content-position-center .wp-block-cover__inner-container {
  width: 100%;
}

/* Contact page — booking + locations. */
.samy-booking-card__phone a {
  color: inherit;
  text-decoration: none;
}
.samy-booking-card__phone a:hover {
  color: #cdddff;
}
.samy-contact-locations .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.samy-contact-locations .wp-block-post-template > li {
  margin: 0;
  padding: 0;
}
.samy-contact-loc .wp-block-post-title {
  margin: 0 0 0.25rem;
}
.samy-contact-loc .wp-block-post-title a {
  text-decoration: none;
}
.samy-contact-loc__body p {
  margin: 0.35rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
}
.samy-contact-loc__body .wp-block-buttons {
  margin-top: 0.85rem;
}

/* CV page — refined list styles. */
.samy-cv-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.samy-cv-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--subtle);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wp--preset--color--foreground);
}
.samy-cv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 8px;
  height: 1px;
  background: var(--wp--preset--color--primary);
}
.samy-cv-list li:last-child {
  border-bottom: 0;
}
.samy-cv-publications {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pub;
}
.samy-cv-publications li {
  counter-increment: pub;
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-bottom: 1px solid var(--wp--preset--color--subtle);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-soft);
}
.samy-cv-publications li::before {
  content: counter(pub, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--primary);
}
.samy-cv-publications li:last-child {
  border-bottom: 0;
}
.samy-cv-publications em {
  color: var(--wp--preset--color--foreground);
  font-style: italic;
}
/* Selected testimonial — compact, blends with archive list below. */
.samy-archive-featured .samy-archive-featured__photo .wp-block-post-featured-image {
  width: 160px;
  margin: 0;
}
.samy-archive-featured .samy-archive-featured__photo img {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: auto;
}
.samy-archive-featured__quote .wp-block-quote {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--wp--preset--color--foreground);
  border: 0;
  padding: 0;
  margin: 0;
}
.samy-archive-featured__quote .wp-block-quote p {
  margin: 0;
}
.samy-archive-featured__quote .wp-block-quote p::before {
  content: "\201C";
  color: var(--wp--preset--color--primary);
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 0.08em;
}
.samy-archive-featured__attribution {
  align-items: baseline;
}
.samy-archive-featured__attribution .wp-block-post-title {
  margin: 0;
}
.samy-archive-featured__attribution .wp-block-post-title a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}
.samy-archive-featured__attribution .wp-block-post-excerpt p {
  margin: 0;
}
@media (max-width: 640px) {
  .samy-archive-featured .samy-archive-featured__photo {
    flex-basis: 96px !important;
  }
  .samy-archive-featured .samy-archive-featured__photo .wp-block-post-featured-image {
    width: 96px;
  }
}

/* Testimonial archive — chip filter + clean rows. */
.samy-archive {
  margin: 0;
}
.samy-archive__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--subtle);
}
.samy-archive__chip {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--muted);
  font: 600 0.72rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-mute);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.samy-archive__chip:hover {
  background: #eef2f8;
  color: var(--wp--preset--color--foreground);
}
.samy-archive__chip.is-active {
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
}
.samy-archive__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.samy-archive__row {
  margin: 0;
  padding: 0;
}
.samy-archive__link {
  display: grid;
  grid-template-columns: 90px 1fr 24px;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--wp--preset--color--subtle);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}
.samy-archive__link:hover {
  background: #f9fbfd;
}
.samy-archive__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #1f2c44 0%, #0e1a2b 100%);
}
.samy-archive__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.samy-archive__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
}
.samy-archive__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.samy-archive__top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
}
.samy-archive__name {
  font: 600 0.82rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--foreground);
}
.samy-archive__proc {
  font: 600 0.68rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.samy-archive__quote {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink-soft);
}
.samy-archive__arrow {
  color: var(--wp--preset--color--primary);
  font: 600 1rem/1 var(--wp--preset--font-family--sans);
  text-align: right;
}
.samy-archive__empty {
  color: var(--wp--preset--color--ink-mute);
  padding: 2rem 0;
}
@media (max-width: 640px) {
  .samy-archive__link {
    grid-template-columns: 64px 1fr 16px;
    gap: 14px;
    padding: 16px 4px;
  }
}

/* Video testimonial pattern — sits inside the standard 1200px content area.
   Video fills its column (~60%); 16:9 is enforced on the wrapper so the empty
   placeholder holds its shape until a real embed loads. */
.samy-video-frame .wp-block-embed,
.samy-video-frame .wp-block-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0d12;
  margin: 0;
  aspect-ratio: 16 / 9;
}
.samy-video-frame .wp-block-embed > * ,
.samy-video-frame .wp-block-video video {
  width: 100%;
  height: 100%;
}
.samy-video-frame .wp-block-embed iframe,
.samy-video-frame .wp-block-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.samy-video-quote {
  max-width: 32em;
}
.samy-video-frame .wp-block-embed,
.samy-video-frame .wp-block-video {
  border-radius: 14px;
  overflow: hidden;
  background: #0a0d12;
  margin: 0;
}
.samy-video-frame .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
}
/* Quote text inside the video pattern: white, slightly smaller than global. */
.samy-video-quote .wp-block-quote,
.samy-video-quote .wp-block-quote p {
  color: #ffffff;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.55rem);
  line-height: 1.4;
  margin: 0;
}
.samy-video-quote .wp-block-quote {
  border: 0;
  padding: 0;
}
.samy-video-quote .wp-block-quote p::before {
  content: "\201C";
  color: #7aa6ff;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 0.1em;
}

/* Testimonial carousel — horizontal scroll-snap of slides.
   The Query block renders <ul.wp-block-post-template> which natively does flow
   layout (one item per row); we override it with a horizontal grid. */
.samy-testimonial-carousel {
  position: relative;
}
.samy-testimonial-carousel .wp-block-post-template {
  display: grid !important;
  grid-auto-flow: column;
  /* Each slide ~85% so a peek of the next slide is visible at the right edge. */
  grid-auto-columns: 85%;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0 4px 0;
  margin: 0;
  list-style: none;
}
.samy-testimonial-carousel .wp-block-post-template::-webkit-scrollbar {
  display: none;
}
.samy-testimonial-carousel .wp-block-post-template > li {
  scroll-snap-align: start;
  margin: 0;
  list-style: none;
  width: 100%;
}
.samy-testimonial-carousel .wp-block-post-template > li::before {
  content: none;
}

/* Slide: image fills the cover; the dark band sits pinned to the bottom.
   Pinning via absolute positioning beats WP's layout cascade, which competes
   with is-position-bottom-center and re-centers the inner-container. */
.samy-testimonial-slide {
  background: linear-gradient(135deg, #1f2c44 0%, #0e1a2b 100%);
  position: relative;
  overflow: hidden;
}
.samy-testimonial-slide > .wp-block-cover__inner-container {
  position: absolute;
  inset: auto 0 0 0;       /* pin to bottom edge, full width */
  width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
}
.samy-testimonial-slide__band {
  background: rgba(14, 26, 43, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  width: 100%;
  margin: 0;
}
.samy-testimonial-slide__band .wp-block-post-title a {
  text-decoration: none;
}

/* Prev/next arrow buttons (added by JS). */
.samy-carousel-btn {
  position: absolute;
  top: calc(50% + 20px); /* offset down so they don't sit on the heading */
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(14, 26, 43, 0.7);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
  z-index: 2;
}
.samy-carousel-btn:hover {
  background: rgba(14, 26, 43, 0.95);
  border-color: rgba(255, 255, 255, 0.6);
}
.samy-carousel-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.samy-carousel-prev { left: -16px; }
.samy-carousel-next { right: -16px; }
@media (max-width: 768px) {
  .samy-carousel-prev { left: 6px; }
  .samy-carousel-next { right: 6px; }
}

/* Focal point on core/image blocks — JS sets --samy-fp on the figure,
   CSS applies it to the inner <img> as object-position. Only meaningful
   when the image has an aspect ratio set (object-fit: cover takes effect). */
.wp-block-image[style*="--samy-fp"] img {
  object-position: var(--samy-fp);
}

/* === Mobile header tweaks ===================================================
   Below 782px: hide the inline lang switcher (use .samy-mobile-lang inside
   the open overlay instead), keep Varaa aika visible but reorder so it's on
   the left and the burger is on the right. */
@media (max-width: 781.98px) {
  /* Hide the inline lang switcher; the .samy-mobile-lang variant takes over
     when the overlay opens. */
  header.wp-block-template-part .wp-block-polylang-language-switcher:not(.samy-mobile-lang) {
    display: none;
  }
  /* Reorder the row so Varaa aika is on the left, burger on the right. */
  header.wp-block-template-part > .wp-block-group > .wp-block-group {
    justify-content: space-between !important;
  }
  header.wp-block-template-part > .wp-block-group > .wp-block-group .wp-block-buttons {
    order: 1;
  }
  header.wp-block-template-part > .wp-block-group > .wp-block-group .wp-block-navigation {
    order: 2;
  }
  /* Bigger / more tappable burger icon. */
  .wp-block-navigation__responsive-container-open {
    padding: 8px;
  }
  .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }

}

/* Mobile-only lang switcher — moved into the navigation overlay by
   mobile-menu-lang.js, then styled as a centered pill row at the bottom of
   the open menu. Hidden everywhere else (desktop, closed mobile). */
.samy-mobile-lang {
  display: none !important;
}
@media (max-width: 781.98px) {
  .wp-block-navigation__responsive-container.is-menu-open .samy-mobile-lang {
    display: block !important;
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .samy-mobile-lang ul.is-style-pill-toggle {
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.08);
  }
  .wp-block-navigation__responsive-container.is-menu-open .samy-mobile-lang ul.is-style-pill-toggle li a {
    color: rgba(255, 255, 255, 0.7);
  }
  .wp-block-navigation__responsive-container.is-menu-open .samy-mobile-lang ul.is-style-pill-toggle li.current-lang a {
    background: #ffffff;
    color: #0e1a2b;
  }
}

/* Open mobile menu — bigger items, calmer spacing, close button top-right. */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(20px, 4vw, 32px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: clamp(20px, 4vw, 32px);
  right: clamp(20px, 4vw, 32px);
  padding: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 64px;
  padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a {
  display: block;
  padding: 18px 4px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  line-height: 1.2;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:focus {
  color: #7aa6ff;
}

/* Polylang language switcher — pill toggle style. */
.wp-block-polylang-language-switcher {
  display: inline-block;
}
.wp-block-polylang-language-switcher ul.is-style-pill-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0;
  list-style: none;
  border-radius: 999px;
  background: var(--wp--preset--color--muted);
  font: 700 0.7rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wp-block-polylang-language-switcher ul.is-style-pill-toggle li {
  margin: 0;
}
.wp-block-polylang-language-switcher ul.is-style-pill-toggle li a {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--wp--preset--color--ink-mute);
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}
.wp-block-polylang-language-switcher ul.is-style-pill-toggle li a:hover {
  color: var(--wp--preset--color--foreground);
}
.wp-block-polylang-language-switcher ul.is-style-pill-toggle li.current-lang a {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  box-shadow: 0 1px 0 rgba(14, 26, 43, 0.06), 0 1px 2px rgba(14, 26, 43, 0.04);
}

/* ---------- Reveal-on-scroll animations ---------- */
/* Tokens — tune here, applied everywhere. */
:root {
  --motion-distance: 16px;
  --motion-duration: 500ms;
  --motion-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hidden initial state is gated on html.has-reveal so editor,
   no-JS, and reduced-motion contexts render elements normally. */
html.has-reveal .reveal-on-scroll {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
  will-change: opacity, transform;
}

html.has-reveal .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero text stagger — children rise in sequence on page load. */
html.has-reveal .hero-text-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: heroTextRise 600ms var(--motion-easing) forwards;
}
html.has-reveal .hero-text-stagger > *:nth-child(1) { animation-delay: 200ms; }
html.has-reveal .hero-text-stagger > *:nth-child(2) { animation-delay: 320ms; }
html.has-reveal .hero-text-stagger > *:nth-child(3) { animation-delay: 440ms; }
html.has-reveal .hero-text-stagger > *:nth-child(4) { animation-delay: 560ms; }

@keyframes heroTextRise {
  to { opacity: 1; transform: none; }
}