/*
 * wp-overrides.css — Molvizadah Sons
 * WordPress-specific style fixes on top of the original design system.
 */

/* Prevent WordPress admin bar from covering fixed header */
html.wp-toolbar .luxury-header { top: 32px; }
@media screen and (max-width: 782px) {
  html.wp-toolbar .luxury-header { top: 46px; }
}

/* Remove WordPress default body margin */
body { margin: 0 !important; }

/* Make sure Elementor containers don't add double padding */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1400px;
}

/* Fix WP captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Remove WP block library styles that may conflict */
.wp-block-image { margin: 0; }

/* Ensure the home main has no top padding (hero handles it) */
.ms-home-main { margin: 0; padding: 0; }

/* Fix admin bar colour to match theme */
#wpadminbar { background: var(--color-forest) !important; }
#wpadminbar a { color: var(--color-gold) !important; }

/* Ensure product showcase slides that use placeholder images look right */
.showcase-slide-img[src*="placehold.co"] {
  opacity: 0.85;
  filter: sepia(10%);
}

/* Ensure the origins visual container has a minimum height */
.origins-visual { min-height: 400px; }

/* Prevent Elementor padding on full-width sections */
.elementor-section.elementor-section-stretched { padding: 0; }

/* Contact form in CTA section */
.cta-sec .contact-form {
  background: rgba(253, 252, 247, 0.8);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 4px;
  backdrop-filter: blur(10px);
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Elementor Transparent Wrapper Fix for Custom Theme Sections */
.ms-home-main .elementor-section,
.ms-home-main .elementor-column,
.ms-home-main .elementor-widget-wrap,
.ms-home-main .elementor-widget,
.ms-home-main .elementor-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Stacking Context Fixes to Prevent Overlapping */
.elementor-widget-ms_unified_hero { z-index: 10; position: relative; }
.elementor-widget-ms_ecosystem { z-index: 11; position: relative; background: var(--color-bg); }
.elementor-widget-ms_showcase { z-index: 12; position: relative; background: var(--color-bg); }
.elementor-widget-ms_origins_map { z-index: 13; position: relative; background: var(--color-bg); }
.elementor-widget-ms_journey { z-index: 14; position: relative; background: var(--color-bg); }
.elementor-widget-ms_presence { z-index: 15; position: relative; background: var(--color-bg); }
.elementor-widget-ms_trust { z-index: 16; position: relative; background: var(--color-bg); }
.elementor-widget-ms_numbers { z-index: 17; position: relative; background: var(--color-bg); }
.elementor-widget-ms_contact { z-index: 18; position: relative; background: var(--color-bg); }

/* Ensure sticky pins don't overlap */
.pin-spacer { z-index: auto !important; }

/* Fix Unified Hero text layer centering */
.hsf-text-layer.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* =========================================================
   MS — EDITORIAL ARCHIVE (Tailwind CDN Port in use)
========================================================= */

/* --- HEADER OVERRIDES MIGRATED FROM THEME.CSS --- */

/* ── Luxury Header & Nav ────────────────────────────────────── */
.luxury-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  padding-top: 1rem;
  /* We use CSS variable for sticky bg */
  --sticky-bg: rgba(0, 0, 0, 0.95);
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On inner pages, start with a solid full-width background to prevent text overlap */
body:not(.home) .luxury-header {
  background-color: var(--sticky-bg);
}
/* When scrolling on inner pages, fade out the full-width background so the pill can take over */
body:not(.home) .luxury-header.scrolled {
  background-color: transparent;
}
.header-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /* Pure transform transition, extremely smooth */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

/* Background Pill built using a pseudo-element */
.header-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50px;
  background-color: var(--sticky-bg);
  opacity: 0;
  transform: scale(1.05); /* slightly expanded initially */
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.logo-link {
  text-decoration: none;
  color: var(--color-beige);
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  /* Logo smoothly scales to fit perfectly in the pill */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}
.default-logo {
  display: flex;
  flex-direction: column;
}

/* ── Pure Transform Scrolled State ── */
.luxury-header.scrolled {
  padding-top: 1rem;
}

/* Scale the entire container down by 15%, which mathematically pulls the edges inward perfectly! */
.luxury-header.scrolled .header-container {
  transform: scale(0.85);
}

/* Fade in the background pseudo-element and shrink it to fit the items exactly */
.luxury-header.scrolled .header-container::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.logo-text-large {
  font-family: var(--font-display);