/* ==========================================================================
   Mixo Ads — Design System (tokens + components)
   Loaded last on every page; overrides theme/Elementor defaults.
   Fonts: Manrope (UI), Ubuntu Mono (labels), Fraunces (serif accent only).
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --mx-blue: #004aad;            /* primary brand blue (single source of truth) */
  --mx-blue-dark: #003a8c;       /* hover / pressed */
  --mx-blue-soft: #eaf1fb;       /* tinted surfaces */
  --mx-ink: #212934;             /* headings */
  --mx-body: #4b5563;            /* body text (readable, WCAG-friendly) */
  --mx-muted: #6b7280;           /* secondary text */
  --mx-bg: #ffffff;
  --mx-surface: #f8f9fa;
  --mx-line: #e9ecef;

  /* ---- Shape & elevation ---- */
  --mx-radius: 10px;
  --mx-radius-lg: 16px;
  --mx-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
  --mx-shadow: 0 8px 24px rgba(16, 24, 40, .10);

  /* ---- Type ---- */
  --mx-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mx-mono: 'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Map onto theme tokens ---- */
  --pix-secondary: var(--mx-blue);
  --text-secondary: var(--mx-blue);
  --pix-heading-default: var(--mx-ink);
  --pix-body-default: var(--mx-body);
  --pix-heading-font: var(--mx-font);
  --pix-body-font: var(--mx-font);
  --pix-btn-color: #fff;
}

/* Unify Elementor kit tokens with the brand palette */
.elementor-kit-6 {
  --e-global-color-primary: var(--mx-blue);
  --e-global-color-accent: var(--mx-blue);
  --e-global-color-secondary: var(--mx-blue-soft);
  --e-global-color-text: var(--mx-ink);
  --e-global-color-b1c8dcc: var(--mx-muted);
  --e-global-typography-text-font-family: 'Manrope';
  --e-global-typography-accent-font-family: 'Manrope';
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  font-family: var(--mx-font);
  color: var(--mx-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.pix-sliding-headline, .pix-sliding-headline span {
  font-family: var(--mx-font);
  color: var(--mx-ink);
  text-wrap: balance;
}

h1.elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
h1.pix-sliding-headline-2,
h1.pix-sliding-headline {
  font-size: clamp(2.25rem, 2rem + 2.2vw, 3.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em;
}

h2.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}

h3.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem) !important;
  line-height: 1.3 !important;
}

h4.elementor-heading-title { font-size: 1.25rem !important; line-height: 1.35 !important; }
h5.elementor-heading-title, h6.elementor-heading-title { font-size: 1.0625rem !important; line-height: 1.4 !important; }

/* Keep display-sized counters and hero numbers untouched by the h-scale */
.display-1, .pix_numbers h2, .pix_numbers h3 { font-size: unset !important; }
.pix_numbers .display-1 { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem) !important; line-height: 1 !important; font-weight: 700 !important; }

/* Body copy */
.elementor-widget-container p, .pix-el-text p, .entry-content p {
  font-family: var(--mx-font);
  color: var(--mx-body);
  line-height: 1.65;
}

/* Icon boxes / feature boxes follow the system font */
.elementor-icon-box-title, .elementor-icon-box-title a,
.elementor-icon-box-description {
  font-family: var(--mx-font);
}

/* Mono eyebrow labels (taglines, small caps labels) */
.site-footer2 .pix-el-text p[style*="Ubuntu"],
.site-footer2 .pix-el-text span[style*="Ubuntu"],
.footer .widget h5 { letter-spacing: .02em; }

/* ==========================================================================
   Buttons — one consistent system, fixes blue-on-blue
   ========================================================================== */

.elementor-kit-6 a.btn,
.elementor-kit-6 button.btn,
a.btn, button.btn {
  color: var(--pix-btn-color, #fff);
}

.btn, .elementor-button {
  border-radius: var(--mx-radius);
  font-family: var(--mx-font);
  font-weight: 700;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn-secondary, a.btn-secondary, .btn-primary, a.btn-primary, .btn-blue, a.btn-blue {
  background-color: var(--mx-blue);
  color: #fff !important;
}
.btn-secondary:hover, .btn-primary:hover, .btn-blue:hover {
  background-color: var(--mx-blue-dark);
  color: #fff;
}

.btn-white, a.btn-white { color: #111827; }

/* FAQ / accordion toggles keep white-on-blue */
.btn-link { color: #fff !important; }

/* Links inherit brand blue, never raw kit blue */
.elementor-kit-6 a { color: var(--mx-blue); }
.elementor-kit-6 a:hover { color: var(--mx-blue-dark); }

/* ==========================================================================
   Header — sticky on every viewport
   ========================================================================== */

/* The whole header assembly (desktop + mobile variants live inside it) */
.pix-header-boxed {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Mobile header variant: pinned by site.js once scrolled */
#mobile_head.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

#masthead .pix-header-container-area,
#masthead .pixfort-header-area {
  margin-top: 0 !important;
  padding-top: 12px;
}

#masthead.is-stuck .pixfort-header-area,
#masthead.is-stuck .pix-header-box-1 {
  box-shadow: var(--mx-shadow);
}

#mobile_head.is-stuck {
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  background: #fff;
}

/* Hamburger toggle: brand-blue icon on transparent background
   (Elementor kit paints all <button>s with the primary color) */
button.small-menu-toggle,
button.small-menu-toggle.navbar-toggler {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
}

.small-menu-toggle .hamburger-inner,
.small-menu-toggle .hamburger-inner-before,
.small-menu-toggle .hamburger-inner-after {
  background-color: var(--mx-blue) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer2 { padding-top: 24px; }

/* Legal links: structured row, consistent type */
.mx-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  margin: 12px 0 0;
}

.mx-footer-legal a {
  font-family: var(--mx-mono);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mx-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.mx-footer-legal a:hover { color: var(--mx-blue); }

/* Footer email + tagline */
.site-footer2 a[href*="email-protection"] { color: var(--mx-muted); }
.site-footer2 a[href*="email-protection"]:hover { color: var(--mx-blue); }

/* ==========================================================================
   Media & images — never overflow their container
   ========================================================================== */

/* Horizontal overflow lock that keeps position:sticky working
   (theme sets overflow-x:hidden which breaks sticky) */
html, body {
  overflow-x: clip !important;
}

img, video, iframe { max-width: 100%; }

.elementor-widget-image img,
.pix-img-elem,
.entry-content img,
figure img {
  max-width: 100% !important;
  height: auto !important;
}

/* Stuck scroll-in animations: the lazy JS chunks that complete these were
   never exported with the static site, leaving elements stuck at scale(1.6).
   Render everything at final position instead. */
.pix-scale-in, .pix-scale-in-xs, .pix-scale-in-sm, .pix-scale-in-lg {
  transform: none !important;
}

/* Cards & panels share one radius */
.card, .rounded-10, .rounded-xl { border-radius: var(--mx-radius); }

/* ==========================================================================
   Sidebar (blog archives)
   ========================================================================== */

.widget h2, .widget h5 {
  font-family: var(--mx-font);
  font-size: 1.0625rem;
  color: var(--mx-ink);
}

.widget ul { list-style: none; padding-left: 0; }

.widget a { color: var(--mx-body); text-decoration: none; }
.widget a:hover { color: var(--mx-blue); }

.widget .wp-block-categories a,
.widget .wp-block-archives a,
.widget_pix_categories a {
  color: var(--mx-blue);
  font-weight: 600;
}

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

@media (max-width: 767px) {
  body { font-size: 1rem; }

  /* Comfortable tap targets for nav + buttons */
  .btn, .elementor-button, .pix-nav-link { min-height: 44px; }

  /* Hero sections: tighten vertical rhythm */
  .elementor-section-boxed { padding-left: 16px; padding-right: 16px; }

  /* Long strings never force horizontal scroll */
  h1, h2, h3, p, a, span { overflow-wrap: break-word; }
}

/* ==========================================================================
   Motion & focus
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--mx-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--mx-blue-soft); color: var(--mx-blue-dark); }