/* WebGenPro base.css — shared, brand-agnostic foundation linked into every site.
   IMPORTANT: the site preview is injected (innerHTML) into the host page, so this
   sheet loads GLOBALLY. It therefore contains ONLY class-scoped rules (whose
   classes exist exclusively inside generated sites) and @keyframes — never bare
   selectors like *, body, a — so nothing can leak into the surrounding chrome.
   Brand tokens (--primary, --text-primary, fonts, ...) come from each site's own
   :root; this file only references them with safe fallbacks.

   Generic resets (box-sizing, body font) stay inline in each site, where the
   renderer scopes them to #custom-site-root. */

/* Structural design-token defaults + legacy aliases, scoped to the isolation
   container so they never touch the host page. Snippet CSS in snippets.css has
   its own :root stripped (it would leak / carry the wrong brand), so these give
   every reused snippet sane brand-agnostic structural tokens; the site's own
   :root (also applied to #custom-site-root) overrides colours and anything else.
   Aliases let older snippets that used --color-* names theme from the standard
   palette. On file:// (no wrapper) these don't apply — fine for fallback shots. */
#custom-site-root {
  --nav-h: 80px; --container-w: 1200px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --radius: 16px;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s; --dur-med: 0.4s; --dur-slow: 0.8s;
  --duration-fast: 0.2s; --duration-med: 0.4s; --duration-slow: 0.8s;
  --shadow-card: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.06) 0 8px 16px;
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-elevated: 0 20px 40px rgba(0,0,0,0.15);
  /* legacy --color-* aliases → standard tokens (resolve here, where --primary exists) */
  --color-primary: var(--primary); --color-primary-dark: var(--primary-dark);
  --color-accent: var(--accent, var(--primary)); --color-bg: var(--surface);
  --color-bg-alt: var(--surface-alt); --color-text: var(--text-primary);
  --color-text-light: var(--text-secondary); --color-white: #fff;
  --font-heading: var(--font-display); --color-border: var(--border);
}

/* Canonical layout + section-header + button utilities. Reused snippets use these
   shared class names (.container, .section-title, .eyebrow, .btn-primary, …) but
   ship WITHOUT their own copy — that is the whole point of the snippet modules
   (markup is reused, the structural CSS lives here once, kept token-efficient).
   Defining them here guarantees every site provides them, so a reused section
   never lands in a site that forgot to style .container / its heading / its CTA
   and renders full-bleed & unstyled (the testimonials & button bugs).

   Selector form `:where(#custom-site-root) .x`:
     - `#custom-site-root` keeps them scoped to the generated site, so they can
       NEVER leak into the host chrome (the preview is innerHTML-injected).
     - `:where(…)` contributes ZERO specificity, so each rule is effectively just
       `.x` (0,1,0) — any site/snippet rule (same or higher specificity, loaded
       after) overrides it. These are pure fallbacks; they can't regress a site
       that already styles its own buttons/headings.
   Both the hyphen (.section-title) and BEM (.section__title) conventions are
   covered because the library uses both. */
:where(#custom-site-root) .container { width: 100%; max-width: var(--container-w, 1200px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
:where(#custom-site-root) .section-pad { padding-block: clamp(56px, 9vw, 120px); }
:where(#custom-site-root) .eyebrow,
:where(#custom-site-root) .section-label,
:where(#custom-site-root) .section-eyebrow,
:where(#custom-site-root) .section__label { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; margin-bottom: 14px; }
:where(#custom-site-root) .section-title,
:where(#custom-site-root) .section__title { font-family: var(--font-display, var(--font-heading, inherit)); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; }
:where(#custom-site-root) .section-title--light { color: var(--text-on-dark, #fff); }
:where(#custom-site-root) .section-subtitle,
:where(#custom-site-root) .section-desc,
:where(#custom-site-root) .section__desc { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 62ch; margin: 0; }

/* Buttons — brand-token colours with fallbacks so they adapt to each site. */
:where(#custom-site-root) .btn, :where(#custom-site-root) .button, :where(#custom-site-root) .cta-btn, :where(#custom-site-root) .btn-primary, :where(#custom-site-root) .btn--primary, :where(#custom-site-root) .btn-secondary, :where(#custom-site-root) .btn-outline, :where(#custom-site-root) .btn--outline, :where(#custom-site-root) .btn-white, :where(#custom-site-root) .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill, 999px); font-weight: 600; font-size: 0.95rem; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease), box-shadow var(--dur-fast, 0.2s) ease; }
:where(#custom-site-root) .btn, :where(#custom-site-root) .button, :where(#custom-site-root) .cta-btn, :where(#custom-site-root) .btn-primary, :where(#custom-site-root) .btn--primary { background: var(--primary, #1a1a1a); color: var(--text-on-dark, #fff); }
:where(#custom-site-root) .btn-secondary { background: var(--surface-alt, #f3f3f3); color: var(--text-primary, #1a1a1a); }
:where(#custom-site-root) .btn-outline, :where(#custom-site-root) .btn--outline { background: transparent; border-color: var(--border, currentColor); color: var(--text-primary, inherit); }
:where(#custom-site-root) .btn-white { background: #fff; color: var(--text-primary, #1a1a1a); }
:where(#custom-site-root) .btn-ghost { background: transparent; color: var(--text-primary, inherit); }
:where(#custom-site-root) .btn:hover, :where(#custom-site-root) .button:hover, :where(#custom-site-root) .cta-btn:hover, :where(#custom-site-root) .btn-primary:hover, :where(#custom-site-root) .btn--primary:hover, :where(#custom-site-root) .btn-outline:hover, :where(#custom-site-root) .btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover, 0 12px 32px rgba(0,0,0,0.12)); }

/* Canonical mobile hamburger menu. The platform's SiteMobileNav hydration
   toggles `.open` on `.nav__mobile`; these EXACT class names are required.
   Sites may override the visual treatment but inherit a working menu by default. */
.nav-hamburger { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; color: var(--text-primary, #1a1a1a); align-items: center; justify-content: center; }
.nav__mobile { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface, var(--color-bg, #fff)); padding: 16px 24px 24px; box-shadow: 0 12px 24px rgba(0,0,0,0.08); border-top: 1px solid rgba(0,0,0,0.06); z-index: 1000; gap: 0; }
.nav__mobile.open { display: flex; }
.nav__mobile a { padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 1rem; font-weight: 500; color: var(--text-primary, #1a1a1a); text-decoration: none; }
.nav__mobile a:last-child { border-bottom: 0; }
.nav__mobile a.nav-cta { margin-top: 12px; padding: 12px 22px; background: var(--primary-dark, var(--primary, #1a1a1a)); color: #fff; border-radius: 999px; text-align: center; border-bottom: 0; font-weight: 600; }
@media (max-width: 991px) { .nav-links { display: none; } .nav-hamburger { display: inline-flex; } }
@media (min-width: 992px) { .nav__mobile { display: none !important; } }

/* Marquee scrolling band (only rendered when the site emits .marquee markup). */
.marquee-section { background: var(--primary); color: #fff; padding: 24px 0; overflow: hidden; transform: rotate(-1deg) scale(1.02); margin: 60px -2%; }
.marquee-track { display: flex; white-space: nowrap; animation: scrollText 30s linear infinite; }
.marquee-track > span { padding: 0 32px; font-size: 2rem; }

/* Common keyframes reused across sites. Global, but harmless — they only take
   effect when a site's own CSS references them by name. */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomSlow { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }