/* ============================================================
   Shams Music — static-site custom layer
   Fixes (contrast, word-breaking) + added animations & slides
   ============================================================ */

/* ---------- 1. Hero: readable text over the photo ----------
   The white H1 used to sit on the light part of the photo and
   became invisible. A soft warm scrim behind the text column
   keeps the typography white (as designed) and legible at any
   viewport, while the portrait on the right stays untouched. */
.elementor-7192 .elementor-element.elementor-element-20e6f5a::before {
  background: linear-gradient(
      100deg,
      rgba(14, 13, 6, 0.72) 0%,
      rgba(14, 13, 6, 0.55) 30%,
      rgba(14, 13, 6, 0.22) 55%,
      rgba(14, 13, 6, 0) 75%
  );
  opacity: 1;
}

/* Keep the hero name on one line per word — never break mid-word */
.elementor-7192 .elementor-element.elementor-element-bd7e7a2 .elementor-heading-title {
  font-size: clamp(33px, 6.9vw, 96px);
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: keep-all;
}
.elementor-7192 .elementor-element.elementor-element-439c036 .elementor-heading-title {
  font-size: clamp(20px, 2.55vw, 42px);
  line-height: 1.5;
  letter-spacing: 2.5px;
  overflow-wrap: normal;
  word-break: keep-all;
}
/* Subtitle: slightly brighter tan on the scrim for comfortable contrast */
.elementor-7192 .elementor-element.elementor-element-f9544b6 .elementor-heading-title,
.elementor-7192 .elementor-element.elementor-element-f523a16 .elementor-heading-title {
  color: #cbb89e;
  line-height: 1.6;
}

/* Mobile hero heading (shown < 768px) */
.elementor-7192 .elementor-element.elementor-element-f523a16 .elementor-heading-title {
  font-size: clamp(15px, 4.2vw, 19px);
}

/* ---------- 2. Mobile menu (no WordPress JS anymore) ---------- */
#ast-mobile-header .ast-mobile-header-content { display: none; }
#ast-mobile-header.shams-open .ast-mobile-header-content { display: block; }
.menu-toggle .ast-close-svg { display: none; }
.menu-toggle.toggled .ast-close-svg { display: inline; }
.menu-toggle.toggled .ast-menu2-svg { display: none; }

/* ---------- 3. Scroll-reveal animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .shams-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--shams-delay, 0s);
  }
  .shams-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* Hero entrance on page load: gentle staggered fade-down */
  .shams-hero-in {
    opacity: 0;
    transform: translateY(-18px);
    animation: shamsHeroIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--shams-delay, 0s);
  }
  @keyframes shamsHeroIn {
    to { opacity: 1; transform: none; }
  }

  /* Gentle hover lift on gallery/grid photos */
  .elementor-widget-image img {
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .elementor-widget-image:hover img {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 18px 40px rgba(14, 13, 6, 0.28);
  }
}

/* ---------- 4. Background cross-fade slideshows ----------
   Reimplementation of Elementor's "slideshow" background,
   enriched with additional portraits. */
.shams-slideshow {
  position: relative;
  overflow: hidden;
}
.shams-slideshow > .shams-slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.shams-slideshow > .shams-slide.is-active { opacity: 1; }
/* content of the cell (if any) stays above the slides */
.shams-slideshow > *:not(.shams-slide) { position: relative; z-index: 1; }

/* ---------- 5. WCAG contrast fixes ----------
   The brand tan #b5a087 fails contrast on white (2.5:1). All CSS now
   references var(--shams-tan): on light sections it resolves to a deeper
   bronze (3.7:1+ for large text); inside dark sections the original
   bright tan is restored, so the look there is unchanged. */
:root { --shams-tan: #9d8060; }
.site-footer,
.elementor-element.elementor-element-20e6f5a,   /* home hero (dark scrim)   */
.elementor-element.elementor-element-0bf3df5,   /* home dark "Обо мне"      */
.elementor-element.elementor-element-cea10b2,   /* home concert rows        */
.elementor-element.elementor-element-af9412d,   /* obo-mne dark hero band   */
.elementor-element.elementor-element-b63f30b {  /* obo-mne dark bottom band */
  --shams-tan: #b5a087;
  /* Astra/Elementor global palette entries are aliases of the tan and
     resolve at :root, so re-pin them per dark container as well. */
  --ast-global-color-0: #b5a087;
  --ast-global-color-1: #b5a087;
  --ast-global-color-3: #b5a087;
  --e-global-color-astglobalcolor0: #b5a087;
  --e-global-color-astglobalcolor1: #b5a087;
  --e-global-color-astglobalcolor3: #b5a087;
}

/* Menu links: 17px body text needs 4.5:1 — deep bronze on light pages */
.main-header-menu .menu-item > .menu-link { color: #6d573e !important; }
.main-header-menu .menu-item > .menu-link:hover { color: #9d8060 !important; }
/* obo-mne + home: desktop header floats over dark photo/scrim — light links */
@media (min-width: 922px) {
  body.page-id-7008 .main-header-menu .menu-item > .menu-link { color: #b5a087 !important; }
  body.home .main-header-menu .menu-item > .menu-link { color: #cbb89e !important; }
  body.page-id-7008 .main-header-menu .menu-item > .menu-link:hover,
  body.home .main-header-menu .menu-item > .menu-link:hover { color: #ffffff !important; }
}

/* Small tan texts on white (quote cards, award card title): need 4.5:1 */
.softlite-dynamic-card-box [class*="softlite-dynamic-card-box-text-"] { color: #7a6247 !important; }
.elementor-widget-image-box .elementor-image-box-title { color: #7a6247; }

/* Footer: Roskomnadzor registry note was #54595F on near-black (2.7:1) */
.site-footer #block-38 .wp-block-paragraph { color: #a9a49a; }

/* ---------- 6. Small fixes ---------- */
/* Footer contact anchor target: offset so the heading isn't cut */
#kontakty { scroll-margin-top: 90px; }

/* Divider line under hero name: soften on the scrim */
.elementor-7192 .elementor-element.elementor-element-4a33ca1 .elementor-divider-separator {
  border-color: rgba(203, 184, 158, 0.75);
}

/* Concert row: ensure the gold text keeps contrast on near-black rows */
.elementor-7192 .elementor-element .elementor-icon-box-title,
.elementor-7192 .elementor-element .elementor-icon-box-description {
  text-rendering: optimizeLegibility;
}