/* ============================================
   PRO THEME STYLES — Premium layer for the paid tier.

   IMPORTANT: every selector below MUST target a class the block
   renderers (app/rendering/renderers.py) actually emit — cross-check
   against that file before adding a new one. A previous version of
   this file styled a parallel set of invented classes (.site-nav,
   .cta-button, .hero-content, .service-item, .stagger-children, …)
   that no renderer ever outputs, so ~40% of it silently did nothing.
   The real class names are: .page-nav, .btn-primary/.btn-secondary,
   .block-hero(-split|-fullbleed)/.hero-text/.hero-image, .card(-grid),
   .pricing-card, .menu-category/.menu-item, .testimonial-card,
   .faq-item, .about-panel, .photo-grid, .contact-form-card,
   .booking-widget-card, .cta-band-card, .block-footer.
   ============================================ */

.pro-theme {
  --pro-primary: var(--pro-accent);
  --pro-primary-hover: var(--pro-accent2);
}

.pro-theme html {
  scroll-behavior: smooth;
}

.pro-theme ::selection {
  background: var(--pro-accent);
  color: var(--on-accent, var(--pro-paper));
}

/* ============================================
   Scroll reveal — .animate-on-scroll is real (site_builder.py wraps
   every block's rendered HTML in it for a PRO theme); pro-scroll.js
   adds .visible via IntersectionObserver.
   ============================================ */
/* Gated on .pro-js, which pro-scroll.js puts on <html> before anything
   paints. Without the gate a Pro site is a hero and a blank page
   whenever the script does not run — blocked, failed, disabled, a
   crawler, a print, a PDF — because every block on it is wrapped in
   this class and nothing else would ever clear the opacity. The effect
   is unchanged for everyone whose browser runs it. */
.pro-js .pro-theme .animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--pro-animation-duration, 0.6s) var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--pro-animation-duration, 0.6s) var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme .animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered grid reveal — wired to the REAL grid classes (card-grid,
   menu-grid, testimonial-grid, photo-grid, faq-list), not the
   fictional .stagger-children that no renderer ever emits. Each grid
   sits inside its block's own .animate-on-scroll wrapper, so toggling
   .visible on that wrapper is enough to cascade into its children. */
.pro-js .pro-theme .animate-on-scroll .card-grid > *,
.pro-js .pro-theme .animate-on-scroll .menu-grid > *,
.pro-js .pro-theme .animate-on-scroll .testimonial-grid > *,
.pro-js .pro-theme .animate-on-scroll .photo-grid > *,
.pro-js .pro-theme .animate-on-scroll .faq-list > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.6s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--_stagger-delay, 0s);
}

.pro-theme .animate-on-scroll.visible .card-grid > *,
.pro-theme .animate-on-scroll.visible .menu-grid > *,
.pro-theme .animate-on-scroll.visible .testimonial-grid > *,
.pro-theme .animate-on-scroll.visible .photo-grid > *,
.pro-theme .animate-on-scroll.visible .faq-list > * {
  opacity: 1;
  transform: translateY(0);
}

.pro-theme .card-grid > *:nth-child(1),  .pro-theme .menu-grid > *:nth-child(1),
.pro-theme .testimonial-grid > *:nth-child(1), .pro-theme .photo-grid > *:nth-child(1),
.pro-theme .faq-list > *:nth-child(1) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 1); }
.pro-theme .card-grid > *:nth-child(2),  .pro-theme .menu-grid > *:nth-child(2),
.pro-theme .testimonial-grid > *:nth-child(2), .pro-theme .photo-grid > *:nth-child(2),
.pro-theme .faq-list > *:nth-child(2) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 2); }
.pro-theme .card-grid > *:nth-child(3),  .pro-theme .menu-grid > *:nth-child(3),
.pro-theme .testimonial-grid > *:nth-child(3), .pro-theme .photo-grid > *:nth-child(3),
.pro-theme .faq-list > *:nth-child(3) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 3); }
.pro-theme .card-grid > *:nth-child(4),  .pro-theme .menu-grid > *:nth-child(4),
.pro-theme .testimonial-grid > *:nth-child(4), .pro-theme .photo-grid > *:nth-child(4),
.pro-theme .faq-list > *:nth-child(4) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 4); }
.pro-theme .card-grid > *:nth-child(5),  .pro-theme .menu-grid > *:nth-child(5),
.pro-theme .testimonial-grid > *:nth-child(5), .pro-theme .photo-grid > *:nth-child(5),
.pro-theme .faq-list > *:nth-child(5) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 5); }
.pro-theme .card-grid > *:nth-child(n+6), .pro-theme .menu-grid > *:nth-child(n+6),
.pro-theme .testimonial-grid > *:nth-child(n+6), .pro-theme .photo-grid > *:nth-child(n+6),
.pro-theme .faq-list > *:nth-child(n+6) { --_stagger-delay: calc(var(--pro-stagger-delay, 0.1s) * 6); }

/* ============================================
   Nav — the real class is .page-nav (sticky, blurred, already themed
   via --paper/--ink by site-render.css). PRO just refines the type.
   ============================================ */
.pro-theme .page-nav {
  padding-block: 1.35rem;
  border-bottom-color: color-mix(in srgb, var(--pro-line) 70%, transparent);
}

.pro-theme .page-nav .brand {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  letter-spacing: -0.01em;
}

.pro-theme .page-nav a {
  font-family: var(--pro-font-body, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

.pro-theme .page-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--pro-accent, #c9a227);
  transition: right 0.3s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme .page-nav a:hover::after {
  right: 0;
}

/* ============================================
   Hero — block-hero(-split|-fullbleed). The fullbleed variant already
   has a correct scrim + z-index:2 text wrapper in site-render.css, so
   it's left alone here. The plain/split variants have no such scrim —
   giving them one via .block-hero::before with NO explicit z-index
   (previously z-index:1, which sat ABOVE the plain/split text since
   THAT text never got a z-index of its own — this is the bug that made
   hero copy read as invisible/"black" on any non-fullbleed hero).
   Pairing a z-index:0 decorative layer with z-index:1 on the real
   content is the fix, scoped away from -fullbleed which doesn't need it.
   ============================================ */
.pro-theme .block-hero:not(.block-hero-fullbleed) {
  position: relative;
  overflow: hidden;
}

.pro-theme .block-hero:not(.block-hero-fullbleed)::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -25%;
  right: -15%;
  width: 70%;
  height: 150%;
  background: radial-gradient(ellipse at center, var(--pro-accent-glow, rgba(201, 162, 39, 0.3)) 0%, transparent 70%);
  opacity: 0.6;
}

.pro-theme .block-hero:not(.block-hero-fullbleed) > * {
  position: relative;
  z-index: 1;
}

.pro-theme .block-hero-split .hero-text {
  z-index: 1;
}

.pro-theme .block-hero h1 {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  animation: pro-hero-title-in 0.9s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes pro-hero-title-in {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

.pro-theme .subheadline {
  font-family: var(--pro-font-body, 'Inter', sans-serif);
  font-weight: 300;
  animation: pro-hero-sub-in 0.9s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s forwards;
  opacity: 0;
}

@keyframes pro-hero-sub-in {
  to { opacity: 1; transform: translateY(0); }
}

.pro-theme .rating-note {
  font-family: var(--pro-font-body, 'Inter', sans-serif);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* ============================================
   CTA buttons — the real classes are .btn-primary/.btn-secondary
   (see app/rendering/base.py's _cta_button). Used by the hero,
   highlights, menu, and everywhere else a CTA appears.
   ============================================ */
.pro-theme .btn-primary,
.pro-theme .btn-secondary {
  font-family: var(--pro-font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 2rem;
  border-radius: var(--pro-radius, 0px);
  transition: var(--pro-transition, all 0.4s cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
}

.pro-theme .btn-primary {
  box-shadow: 0 4px 20px var(--pro-accent-glow, rgba(201, 162, 39, 0.3));
}

.pro-theme .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--pro-accent-glow, rgba(201, 162, 39, 0.3));
}

.pro-theme .btn-secondary {
  border-width: 1.5px;
}

.pro-theme .btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--pro-accent, #c9a227);
}

/* ============================================
   Cards — .card (services + highlights blocks share it), plus
   .pricing-card, .menu-category, .testimonial-card, .faq-item,
   .contact-form-card and .booking-widget-card all follow the same
   "elevated surface" treatment. All of these already correctly
   inherit body's color:var(--ink) for their text — the fix that makes
   that readable again on a dark PRO theme lives in pro_themes.py
   (paper/ink swapped so --ink is light text, --paper is the dark page
   background), not here.
   ============================================ */
.pro-theme .card,
.pro-theme .pricing-card,
.pro-theme .menu-category,
.pro-theme .testimonial-card,
.pro-theme .faq-item,
.pro-theme .contact-form-card,
.pro-theme .booking-widget-card,
.pro-theme .before-after-card {
  background: var(--pro-surface-elevated, #1a1a24);
  border-color: var(--pro-line, #2a2a35);
  border-radius: var(--pro-radius-lg, 0px);
  transition: var(--pro-transition, all 0.4s cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme .card {
  position: relative;
  overflow: hidden;
}

/* .pricing-card deliberately does NOT get overflow:hidden — its real
   ".badge" ("Most Popular") is positioned to poke above the card's top
   edge (see site-render.css's .pricing-card .badge), which overflow:
   hidden would clip. The gradient top-bar below gets its own matching
   border-radius instead of relying on clipping to look clean. */
.pro-theme .pricing-card {
  position: relative;
}

.pro-theme .card::before,
.pro-theme .pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--pro-radius-lg, 0px) var(--pro-radius-lg, 0px) 0 0;
  background: linear-gradient(90deg, var(--pro-accent, #c9a227), var(--pro-accent2, #8b6914));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme .card:hover::before,
.pro-theme .pricing-card:hover::before {
  transform: scaleX(1);
}

.pro-theme .card:hover,
.pro-theme .pricing-card:hover,
.pro-theme .menu-category:hover,
.pro-theme .testimonial-card:hover {
  transform: var(--pro-card-hover, translateY(-8px));
  border-color: var(--pro-accent, #c9a227);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 30px var(--pro-accent-glow, rgba(201, 162, 39, 0.25));
}

.pro-theme .card h3 {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
}

.pro-theme .card-icon {
  color: var(--pro-accent-text, var(--pro-accent, #c9a227));
}

.pro-theme .pricing-card.featured {
  box-shadow: 0 0 40px var(--pro-accent-glow, rgba(201, 162, 39, 0.25));
}

.pro-theme .pricing-card .badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px var(--pro-accent-glow, rgba(201, 162, 39, 0.3));
}

.pro-theme .pricing-card .price {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
}

/* ============================================
   Menu — .menu-category/.menu-item.
   ============================================ */
.pro-theme .menu-category {
  padding: var(--space-6, 2rem);
}

.pro-theme .menu-category h3 {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  border-bottom-color: var(--pro-accent, #c9a227);
}

.pro-theme .menu-item {
  border-bottom-color: var(--pro-line, #2a2a35);
}

.pro-theme .menu-item-price {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  color: var(--pro-accent-text, var(--pro-accent, #c9a227));
}

/* ============================================
   Section headers — real fields are .eyebrow (about + highlights
   blocks) and a plain <h2>/.section-intro everywhere else.
   ============================================ */
.pro-theme .eyebrow {
  font-family: var(--pro-font-accent, 'Cormorant Garamond', serif);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pro-accent-text, var(--pro-accent, #c9a227));
}

.pro-theme .block h2 {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ============================================
   Testimonials — .testimonial-card/.quote-mark/.testimonial-rating.
   ============================================ */
.pro-theme .testimonial-card {
  border-left: 3px solid var(--pro-accent, #c9a227);
  border-left-width: 3px;
}

.pro-theme .testimonial-card .quote-mark {
  font-family: var(--pro-font-accent, 'Cormorant Garamond', serif);
  color: var(--pro-accent-text, var(--pro-accent, #c9a227));
  opacity: 0.6;
  font-size: 3rem;
}

.pro-theme .testimonial-card p:not(.testimonial-author) {
  font-family: var(--pro-font-accent, 'Cormorant Garamond', serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.7;
}

/* ============================================
   FAQ — .faq-item.
   ============================================ */
.pro-theme .faq-item summary {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
}

.pro-theme .faq-item summary::after {
  color: var(--pro-accent-text, var(--pro-accent, #c9a227));
}

/* ============================================
   About — .about-panel/.about-panel-image.
   ============================================ */
.pro-theme .about-panel {
  border-radius: var(--pro-radius-lg, 0px);
  overflow: hidden;
}

.pro-theme .about-panel-image {
  transition: transform 0.8s var(--pro-animation-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme .about-panel:hover .about-panel-image {
  transform: scale(1.06);
}

/* ============================================
   Gallery — .photo-grid.
   ============================================ */
.pro-theme .photo-grid img {
  border-radius: var(--pro-radius, 0px);
}

/* ============================================
   Forms — .contact-form-card/.booking-widget-card inputs, and the
   generic input/textarea/select every form on the page uses.
   ============================================ */
.pro-theme input,
.pro-theme textarea,
.pro-theme select {
  background: var(--pro-surface, #12121a);
  border-color: var(--pro-line, #2a2a35);
  border-radius: var(--pro-radius, 0px);
  transition: var(--pro-transition, all 0.4s cubic-bezier(0.16, 1, 0.3, 1));
}

.pro-theme input:focus,
.pro-theme textarea:focus,
.pro-theme select:focus {
  outline: none;
  border-color: var(--pro-accent, #c9a227);
  box-shadow: 0 0 0 3px var(--pro-accent-glow, rgba(201, 162, 39, 0.2));
}

.pro-theme .booking-slot-btn.is-selected {
  box-shadow: 0 0 0 1px var(--pro-accent, #c9a227);
}

/* ============================================
   CTA band — .cta-band-card. Deliberately NOT left to whatever
   background:var(--ink)/color:var(--paper) resolves to on its own (for
   a dark theme that's an incidental light card — fine, but not a
   choice) — a bold accent gradient reads as a deliberate premium
   "closing moment" instead.
   ============================================ */
.pro-theme .cta-band-card {
  background: linear-gradient(135deg, var(--pro-accent, #c9a227), var(--pro-accent2, #8b6914));
  border-radius: var(--pro-radius-lg, 0px);
  box-shadow: 0 20px 60px var(--pro-accent-glow, rgba(201, 162, 39, 0.35));
}

.pro-theme .cta-band-card h2,
.pro-theme .cta-band-card p {
  color: var(--on-accent, var(--pro-paper, #faf9f7));
}

.pro-theme .cta-band-card h2 {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
}

.pro-theme .cta-band-card .btn-primary {
  background: var(--pro-paper, #faf9f7);
  color: var(--pro-ink, #0a0a0f);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Footer — .block-footer. Its own bg/text (background:var(--ink),
   text via var(--paper)) is written assuming the STANDARD light-theme
   pairing (ink=dark, paper=light) to get a dark footer band with light
   text. A PRO dark theme flips that pairing at :root (ink=light text,
   paper=dark page bg) so the site body reads correctly — which would
   flip the footer the OTHER way (light band, dark text) if left alone.
   Re-pairing --ink/--paper locally, scoped to just this footer, keeps
   it dark on every theme without duplicating every footer selector.
   ============================================ */
.pro-theme .block-footer {
  --ink: var(--pro-paper);
  --paper: var(--pro-ink);
  border-top-color: var(--pro-line, #2a2a35);
}

.pro-theme .footer-business {
  font-family: var(--pro-font-display, 'Playfair Display', serif);
  font-size: 1.3rem;
}

/* ============================================
   Responsive.
   ============================================ */
@media (max-width: 768px) {
  .pro-theme .card:hover,
  .pro-theme .pricing-card:hover,
  .pro-theme .menu-category:hover,
  .pro-theme .testimonial-card:hover {
    transform: none;
  }
}

/* ============================================
   Reduced motion.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .pro-theme *,
  .pro-theme *::before,
  .pro-theme *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================
   Reveal is decoration, and it is never allowed to be the reason a
   page cannot be read: someone who asked for less motion, and any
   printed copy, get the composed page immediately.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .pro-js .pro-theme .animate-on-scroll,
  .pro-js .pro-theme .animate-on-scroll .card-grid > *,
  .pro-js .pro-theme .animate-on-scroll .menu-grid > *,
  .pro-js .pro-theme .animate-on-scroll .testimonial-grid > *,
  .pro-js .pro-theme .animate-on-scroll .photo-grid > *,
  .pro-js .pro-theme .animate-on-scroll .faq-list > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .pro-js .pro-theme .animate-on-scroll,
  .pro-js .pro-theme .animate-on-scroll .card-grid > *,
  .pro-js .pro-theme .animate-on-scroll .menu-grid > *,
  .pro-js .pro-theme .animate-on-scroll .testimonial-grid > *,
  .pro-js .pro-theme .animate-on-scroll .photo-grid > *,
  .pro-js .pro-theme .animate-on-scroll .faq-list > * {
    opacity: 1;
    transform: none;
  }
}