/*!
 * Eagle IT Marketplace — scoped host-style reset (v1.3.13)
 * Loaded AFTER the main bundle CSS. All rules are scoped to the
 * marketplace mount so they cannot affect any other WordPress page.
 */

/* v1.3.13 — Kill the WordPress/theme page title ("IT Marketplace") that some
   themes (Hello Elementor child, etc.) inject above the SPA even on Canvas.
   Scoped via :has() so this ONLY fires on pages that actually mount our shell. */
body:has(.eagle-marketplace-shell) .entry-title,
body:has(.eagle-marketplace-shell) .entry-header,
body:has(.eagle-marketplace-shell) .page-title,
body:has(.eagle-marketplace-shell) .page-header,
body:has(.eagle-marketplace-shell) .elementor-page-title,
body:has(.eagle-marketplace-shell) .wp-block-post-title,
body:has(.eagle-marketplace-shell) .breadcrumbs,
body:has(.eagle-marketplace-shell) .yoast-breadcrumbs,
body:has([data-eim-mount="1"]) .entry-title,
body:has([data-eim-mount="1"]) .entry-header,
body:has([data-eim-mount="1"]) .page-title,
body:has([data-eim-mount="1"]) .page-header,
body:has([data-eim-mount="1"]) .elementor-page-title,
body:has([data-eim-mount="1"]) .wp-block-post-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* v1.3.13 — Strip residual theme container padding/max-width when our shell
   is on the page, so the marketplace navbar/hero go full-bleed even when the
   theme's body_class hook didn't run in time. */
body:has(.eagle-marketplace-shell) > .site,
body:has(.eagle-marketplace-shell) > #page,
body:has(.eagle-marketplace-shell) > #content,
body:has(.eagle-marketplace-shell) > main,
body:has(.eagle-marketplace-shell) .site-main,
body:has(.eagle-marketplace-shell) .entry-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

[data-eim-mount="1"],
.eagle-marketplace-shell {
  --eim-faq-text: hsl(var(--foreground));
  --eim-faq-muted: hsl(var(--muted-foreground));
  --eim-faq-border: hsl(var(--border) / 0.4);
  --eim-faq-card: hsl(var(--card) / 0.6);
  --eim-faq-focus: hsl(var(--primary) / 0.45);
  --eim-faq-accent: hsl(var(--gold));
}

/* Neutralize theme bleed on interactive elements inside the shell */
[data-eim-mount="1"] button,
[data-eim-mount="1"] [role="button"],
[data-eim-mount="1"] summary,
[data-eim-mount="1"] a,
.eagle-marketplace-shell button,
.eagle-marketplace-shell [role="button"],
.eagle-marketplace-shell summary,
.eagle-marketplace-shell a {
  color: inherit;
  border-color: inherit;
  box-shadow: none;
  text-decoration: none;
}

/* FAQ wrapper / card */
[data-eim-mount="1"] [data-eim-faq],
.eagle-marketplace-shell [data-eim-faq] {
  border-color: var(--eim-faq-border) !important;
}

/* FAQ item borders (Radix accordion items + .border-b utility rows) */
[data-eim-mount="1"] [data-eim-faq] [data-state],
[data-eim-mount="1"] [data-eim-faq] .border-b,
.eagle-marketplace-shell [data-eim-faq] [data-state],
.eagle-marketplace-shell [data-eim-faq] .border-b {
  border-color: var(--eim-faq-border) !important;
}

/* FAQ trigger button */
[data-eim-mount="1"] [data-eim-faq] button,
[data-eim-mount="1"] [data-eim-faq] h3 button,
.eagle-marketplace-shell [data-eim-faq] button,
.eagle-marketplace-shell [data-eim-faq] h3 button {
  color: var(--eim-faq-text) !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* FAQ question text */
[data-eim-mount="1"] [data-eim-faq] button span:last-child,
.eagle-marketplace-shell [data-eim-faq] button span:last-child {
  color: var(--eim-faq-text) !important;
}

/* FAQ hover state — gold brand accent only */
[data-eim-mount="1"] [data-eim-faq] button:hover span:last-child,
.eagle-marketplace-shell [data-eim-faq] button:hover span:last-child {
  color: var(--eim-faq-accent) !important;
}

/* FAQ answer text */
[data-eim-mount="1"] [data-eim-faq] [data-state="open"] + div,
[data-eim-mount="1"] [data-eim-faq] .text-muted-foreground,
.eagle-marketplace-shell [data-eim-faq] [data-state="open"] + div,
.eagle-marketplace-shell [data-eim-faq] .text-muted-foreground {
  color: var(--eim-faq-muted) !important;
}

/* FAQ chevron / icon */
[data-eim-mount="1"] [data-eim-faq] svg,
.eagle-marketplace-shell [data-eim-faq] svg {
  color: var(--eim-faq-text) !important;
  stroke: currentColor !important;
}

[data-eim-mount="1"] [data-eim-faq] button:hover svg,
.eagle-marketplace-shell [data-eim-faq] button:hover svg {
  color: var(--eim-faq-accent) !important;
}

/* Numbered badge chip */
[data-eim-mount="1"] [data-eim-faq] .faq-index,
.eagle-marketplace-shell [data-eim-faq] .faq-index {
  color: var(--eim-faq-accent) !important;
  border-color: hsl(var(--gold) / 0.2) !important;
  background: hsl(var(--gold) / 0.1) !important;
}

/* Focus ring reset — brand-consistent, accessible */
[data-eim-mount="1"] [data-eim-faq] button:focus-visible,
.eagle-marketplace-shell [data-eim-faq] button:focus-visible {
  outline: 2px solid var(--eim-faq-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
  border-radius: 12px;
}

/* v1.3.18 — Typography neutralization. Many WP themes inject their own
   font-family + line-heights on h1-h6. Force the SPA shell to inherit
   from the bundle's own Tailwind font stack (Inter for body, Playfair
   Display for .font-display). Do NOT force a single font globally —
   the SPA intentionally pairs sans body with serif display headings. */
[data-eim-mount="1"],
.eagle-marketplace-shell {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
[data-eim-mount="1"] h1,
[data-eim-mount="1"] h2,
[data-eim-mount="1"] h3,
[data-eim-mount="1"] h4,
[data-eim-mount="1"] h5,
[data-eim-mount="1"] h6,
.eagle-marketplace-shell h1,
.eagle-marketplace-shell h2,
.eagle-marketplace-shell h3,
.eagle-marketplace-shell h4,
.eagle-marketplace-shell h5,
.eagle-marketplace-shell h6 {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  text-transform: none;
  text-shadow: none;
  background: transparent;
}
[data-eim-mount="1"] .font-display,
.eagle-marketplace-shell .font-display {
  font-family: 'Playfair Display', Georgia, serif !important;
}
[data-eim-mount="1"] .font-sans,
[data-eim-mount="1"] .font-body,
.eagle-marketplace-shell .font-sans,
.eagle-marketplace-shell .font-body {
  font-family: 'Inter', system-ui, sans-serif !important;
}
[data-eim-mount="1"] .text-center,
.eagle-marketplace-shell .text-center { text-align: center !important; }
[data-eim-mount="1"] .text-left,
.eagle-marketplace-shell .text-left { text-align: left !important; }
[data-eim-mount="1"] .mx-auto,
.eagle-marketplace-shell .mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v1.3.18 — Home hero replica guard for themes that load after scoped reset. */
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child .container {
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child .max-w-4xl,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child .max-w-3xl {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 auto 1.25rem !important;
  text-align: center !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}
/* First line ("Your IT Marketplace") MUST stay on one line above
   the second-line accent ("Reimagined") to match the Lovable hero.
   v1.3.20 — unconditional nowrap on first span (was 768px-gated, which
   broke when Playfair hadn't loaded and fallback metrics overflowed). */
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display > span {
  display: block !important;
  text-align: center !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display > span:first-child {
  white-space: nowrap !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display > span:first-child > span {
  white-space: nowrap !important;
  display: inline !important;
}
@media (max-width: 520px) {
  /* Allow wrap only on very small phones where one line would be unreadable. */
  body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display > span:first-child {
    white-space: normal !important;
  }
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display span,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child p {
  text-align: center !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child p {
  max-width: 42rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.25rem !important;
  line-height: 1.625 !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child form,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child form + div,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child .max-w-3xl {
  width: 100% !important;
  max-width: 48rem !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child form + div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child form + div a,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child form + div button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  height: 2rem !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

@media (max-width: 1024px) {
  body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display {
    font-size: clamp(3.25rem, 7vw, 4.25rem) !important;
  }
}

@media (max-width: 640px) {
  body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child h1.font-display {
    font-size: clamp(2.5rem, 12vw, 3.25rem) !important;
    line-height: 1.08 !important;
  }
  body:has(.eagle-marketplace-shell) .eagle-marketplace-shell main > section:first-child p {
    font-size: 1rem !important;
  }
}

/* v1.3.18 — Force persistent dark mode regardless of theme color-scheme.
   The SPA expects html.dark; some themes flip it back on hydration. */
html:has(.eagle-marketplace-shell),
html:has([data-eim-mount="1"]) {
  color-scheme: dark !important;
  background: #0a0a0f !important;
}
body:has(.eagle-marketplace-shell),
body:has([data-eim-mount="1"]) {
  background: #0a0a0f !important;
  color: #f5f5f5 !important;
}

/* v1.3.18 — Belt-and-suspenders: hide ANY h1 inside theme header/wrapper
   that is NOT a descendant of our shell (catches widget-generated page
   titles that bypass the .entry-title selectors above). */
body:has(.eagle-marketplace-shell) > header h1,
body:has(.eagle-marketplace-shell) .site-header h1,
body:has(.eagle-marketplace-shell) .elementor-location-header h1 {
  display: none !important;
}
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell h1,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell h2,
body:has(.eagle-marketplace-shell) .eagle-marketplace-shell h3 {
  display: revert !important;
}

/* v1.3.18 — Permanently remove the light/dark theme toggle from the plugin.
   The SPA's ThemeToggle button is a Radix dropdown trigger that wraps a
   lucide Sun icon (and an absolutely-positioned Moon icon). Hide every
   instance inside our shell, including the desktop and mobile placements. */
.eagle-marketplace-shell button:has(> svg.lucide-sun),
.eagle-marketplace-shell button:has(> svg.lucide-moon),
[data-eim-mount="1"] button:has(> svg.lucide-sun),
[data-eim-mount="1"] button:has(> svg.lucide-moon) {
  display: none !important;
}

/* Kill aggressive theme visited/link colors inside the app shell */
[data-eim-mount="1"] a:visited,
[data-eim-mount="1"] button:visited,
.eagle-marketplace-shell a:visited,
.eagle-marketplace-shell button:visited {
  color: inherit !important;
}

/* Broader bleed prevention — tabs, chips, dropdown triggers, form controls.
   Resets only color so the marketplace bundle's own Tailwind classes still
   own layout, spacing, backgrounds, and borders. */
[data-eim-mount="1"] [role="tab"],
[data-eim-mount="1"] [role="combobox"],
[data-eim-mount="1"] [role="menuitem"],
[data-eim-mount="1"] input,
[data-eim-mount="1"] select,
[data-eim-mount="1"] textarea,
.eagle-marketplace-shell [role="tab"],
.eagle-marketplace-shell [role="combobox"],
.eagle-marketplace-shell [role="menuitem"],
.eagle-marketplace-shell input,
.eagle-marketplace-shell select,
.eagle-marketplace-shell textarea {
  color: inherit;
}