/*
Theme Name: Casa Cruz Apartments
Theme URI: https://casacruzapartments.com/
Author: E-Imagen Studio Web
Author URI: https://e-imagen.com
Description: Tema personalizado de una sola pagina para Casa Cruz Apartments (Houston, TX). Tailwind CSS via Play CDN, bilingue EN/ES, y componentes React (galeria en carrusel y "Apartment Tour" scrollytelling).
Version: 1.2
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: casa-cruz
*/

/* ---------- FIX: el tema/navegador pinta de negro los titulos que deberian heredar color ----------
   El <h1> del Hero (y otros titulos) no llevan una clase de color propia: heredan el color
   de su seccion. Sin este bloque, el color base de los h1..h6 gana y salen en negro.
   Estas reglas fuerzan la herencia correcta y blindan las utilidades de color de texto. */
.cc-site h1, .cc-site h2, .cc-site h3,
.cc-site h4, .cc-site h5, .cc-site h6 { color: inherit; }

.cc-site .text-cream    { color: #F5EFE2 !important; }
.cc-site .text-deep     { color: #12312B !important; }
.cc-site .text-accent   { color: #C6864F !important; }
.cc-site .text-accentlt { color: #E3AC7C !important; }
.cc-site .text-white    { color: #FFFFFF !important; }

/* ---------- WordPress / Elementor full-width compatibility ---------- */
  .cc-site, .cc-site * { box-sizing: border-box; }
  .cc-site img { max-width: 100%; }
  .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  /* If embedded inside an Elementor section that already spans full width,
     drop .full-bleed on the outer wrapper and this rule keeps it inert. */
  .elementor .full-bleed { width: 100%; left: 0; right: 0; margin-left: 0; margin-right: 0; }

  html { scroll-behavior: smooth; }
  body { background: #12312B; }
  section[id] { scroll-margin-top: 104px; }

  /* ---------- fine paper-grain texture used across dark panels ---------- */
  .cc-grain {
    position: relative;
  }
  .cc-grain::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  /* ---------- language switching ---------- */
  [data-en], [data-es] { }
  html[lang="es"] [data-en] { display: none !important; }
  html[lang="en"] [data-es] { display: none !important; }
  html[lang="es"] [data-lang-badge="es"], html[lang="en"] [data-lang-badge="en"] {
    background: #C6864F; color: #12312B;
  }

  /* ---------- mobile nav ---------- */
  #mobileMenu { transition: max-height .35s ease, opacity .3s ease; overflow: hidden; }
  #mobileMenu.closed { max-height: 0; opacity: 0; }
  #mobileMenu.open { max-height: 480px; opacity: 1; }

  /* ---------- header shadow on scroll ---------- */
  #siteHeader { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
  #siteHeader.scrolled { background-color: rgba(255,255,255,.98); box-shadow: 0 12px 30px -10px rgba(0,0,0,.22); }

  /* ---------- hero entrance (single orchestrated reveal) ---------- */
  @keyframes ccRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  .cc-rise { animation: ccRise .9s cubic-bezier(.16,.8,.3,1) both; }
  .cc-rise-1 { animation-delay: .05s; }
  .cc-rise-2 { animation-delay: .18s; }
  .cc-rise-3 { animation-delay: .32s; }
  .cc-rise-4 { animation-delay: .46s; }

  /* ---------- scroll reveal (per-section, one motion language site-wide) ---------- */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .reveal-d1.is-visible { transition-delay: .06s; }
  .reveal-d2.is-visible { transition-delay: .14s; }
  .reveal-d3.is-visible { transition-delay: .22s; }
  .reveal-d4.is-visible { transition-delay: .30s; }

  /* ---------- hero background: slow zoom-out ---------- */
  @keyframes heroZoomOut { from { transform: scale(1.18); } to { transform: scale(1); } }
  .hero-zoom { transform-origin: center center; animation: heroZoomOut 16s ease-out both; }

  @media (prefers-reduced-motion: reduce) {
    .cc-rise { animation: none !important; opacity: 1 !important; transform: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-zoom { animation: none !important; transform: none !important; }
    html { scroll-behavior: auto; }
    #whatsappFloat .cc-pulse-ring { display:none; }
  }

  /* ---------- whatsapp float pulse ---------- */
  .cc-pulse-ring { animation: ccPulse 2.4s ease-out infinite; }
  @keyframes ccPulse {
    0%   { transform: scale(1);   opacity: .55; }
    80%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  /* ---------- focus visibility ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #E3AC7C; outline-offset: 3px; border-radius: 4px;
  }

  /* ---------- skyline silhouette (hero backdrop) ---------- */
  .cc-skyline { opacity: .16; }

  /* ---------- room-card patterns (Rooms Gallery) ---------- */
  .pattern-weave {
    background-image: repeating-linear-gradient(135deg, rgba(245,239,226,.06) 0 2px, transparent 2px 14px);
  }
  .pattern-grid {
    background-image:
      linear-gradient(rgba(245,239,226,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,239,226,.07) 1px, transparent 1px);
    background-size: 22px 22px;
  }
  .pattern-dots {
    background-image: radial-gradient(rgba(245,239,226,.14) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
  }
  .pattern-diag {
    background-image: repeating-linear-gradient(45deg, rgba(198,134,79,.10) 0 2px, transparent 2px 16px);
  }

  /* ---------- "Take a look inside" coverflow carousel ---------- */
  .carousel-slide {
    transition: transform 700ms ease-in-out, opacity 700ms ease-in-out;
    will-change: transform, opacity;
  }
  .carousel-dot[data-active="true"] { background-color: #C6864F; width: 22px; }
  .carousel-dot[data-active="false"] { width: 8px; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-slide { transition: none !important; }
  }

  ::selection { background: #C6864F; color: #0A1D17; }

  /* ---------- handwritten marker-highlight effect ---------- */
  .marker-highlight {
    font-family: "Caveat", cursive;
    font-weight: 700;
    color: #111111;
    display: inline;
    line-height: 1.3;
    background-image: linear-gradient(180deg, transparent 62%, #F3EE3B 62%, #F3EE3B 90%, transparent 90%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 .1em;
  }