/*
Theme Name: Astra Child — MMX Global Inc
Theme URI: https://mmxglobalinc.com
Description: Child theme for MMX Global Inc. Holds the custom 404 template, the cookie-consent banner, and the premium corporate visual layer that Elementor Free and the Astra Customizer cannot express on their own. All colours, type and spacing originate in the Elementor global kit and the Astra Customizer.
Author: MMX Global Inc
Template: astra
Version: 2.0.0
Text Domain: astra-mmx-child
*/

/* ---------------------------------------------------------------------------
   MMX GLOBAL INC — CUSTOM CSS REGISTER
   Each block exists because it cannot be set in Elementor Free or the Astra
   Customizer. Colours mirror the Elementor global kit; nothing is invented here.

   Palette: navy #0B1C33 · navy-2 #142A45 · gold #C7A052 · gold-hover #AC8942
            soft gold #E1C681 · text #162033 · muted #667085
            border #E6E8EC · light bg #F7F8FA

    1. Design tokens (custom properties)
    2. Text measures
    3. Editorial section labels + gold dividers
    4. Premium cards — hover elevation, image zoom, equal heights
    5. Image treatment — object-fit cover, ratio crops, gradient scrims
    6. Buttons — arrow affordance, refined transitions
    7. Spec / icon lists
    8. Header — sticky refinement, gold active indicator
    9. Footer refinement
   10. WPForms — premium corporate form styling
   11. Focus states (WCAG 2.2 AA)
   12. Scroll reveal
   13. Wide-table scroll
   14. prefers-reduced-motion
   --------------------------------------------------------------------------- */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --mmx-navy: #0B1C33;
  --mmx-navy-2: #142A45;
  --mmx-gold: #C7A052;
  --mmx-gold-hover: #AC8942;   /* decorative / large text only — 3.28:1 */
  --mmx-gold-text: #8F6C20;    /* AA on white (4.85:1) and on #F7F8FA (4.56:1) */
  --mmx-gold-soft: #E1C681;
  --mmx-text: #162033;
  --mmx-muted: #667085;
  --mmx-border: #E6E8EC;
  --mmx-bg-light: #F7F8FA;
  --mmx-focus: #2563EB;
  --mmx-ease: cubic-bezier(.22,.61,.36,1);
}

body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }

/* 2. Text measures --------------------------------------------------------- */
.mmx-measure-body { max-width: 66ch; }
.mmx-measure-lead { max-width: 52ch; }
.mmx-measure-body p:last-child,
.mmx-measure-lead p:last-child { margin-bottom: 0; }

/* 3. Editorial labels + gold dividers -------------------------------------- */
.mmx-eyebrow .elementor-heading-title,
.mmx-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--mmx-gold-text);
}
/* the one decorative divider: a fine gold rule */
.mmx-rule .elementor-divider-separator {
  border-top-width: 2px !important;
  border-top-color: var(--mmx-gold) !important;
  width: 56px !important;
}
.mmx-rule-wide .elementor-divider-separator {
  border-top-width: 1px !important;
  border-top-color: var(--mmx-border) !important;
}

/* Large editorial numerals (process steps, stats) */
.mmx-numeral .elementor-heading-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--mmx-gold-hover);
}

/* 4. Premium cards --------------------------------------------------------- */
.mmx-card {
  transition: transform 320ms var(--mmx-ease),
              box-shadow 320ms var(--mmx-ease),
              border-color 320ms var(--mmx-ease);
  will-change: transform;
  overflow: hidden;
  height: 100%;
}
.mmx-card:hover {
  transform: translateY(-6px);
  border-color: #D6D9E0;
  box-shadow: 0 18px 44px -18px rgba(11,28,51,.22), 0 2px 8px -4px rgba(11,28,51,.10);
}
/* equal heights across a wrapping row of cards */
.mmx-card-row > .e-con,
.mmx-card-row > .e-con-inner > .e-con { display: flex; }
.mmx-card-row .mmx-card { flex: 1 1 auto; }

/* gentle image zoom inside a card */
.mmx-card .elementor-widget-image img {
  transition: transform 620ms var(--mmx-ease);
}
.mmx-card:hover .elementor-widget-image img { transform: scale(1.045); }
.mmx-card .elementor-widget-image { overflow: hidden; }

/* 5. Image treatment ------------------------------------------------------- */
.mmx-img-cover img,
.mmx-ratio-16-9 img,
.mmx-ratio-3-2 img,
.mmx-ratio-4-3 img,
.mmx-ratio-pano img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mmx-ratio-16-9 .elementor-widget-container,
.mmx-ratio-16-9 img { aspect-ratio: 16 / 9; }
.mmx-ratio-3-2 .elementor-widget-container,
.mmx-ratio-3-2 img { aspect-ratio: 3 / 2; }
.mmx-ratio-4-3 .elementor-widget-container,
.mmx-ratio-4-3 img { aspect-ratio: 4 / 3; }
.mmx-ratio-pano .elementor-widget-container,
.mmx-ratio-pano img { aspect-ratio: 21 / 9; }
@media (max-width: 767px) {
  .mmx-ratio-pano .elementor-widget-container,
  .mmx-ratio-pano img { aspect-ratio: 3 / 2; }
}

/* soft scrim so nothing sits on bare photography */
.mmx-scrim { position: relative; }
.mmx-scrim::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,28,51,0) 38%, rgba(11,28,51,.72) 100%);
  pointer-events: none;
}
.mmx-scrim > * { position: relative; z-index: 1; }

/* 6. Buttons --------------------------------------------------------------- */
.elementor-button {
  transition: background-color 260ms var(--mmx-ease),
              color 260ms var(--mmx-ease),
              border-color 260ms var(--mmx-ease),
              box-shadow 260ms var(--mmx-ease);
}
/* arrow affordance — moves slightly on hover */
.mmx-btn-arrow .elementor-button-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 12px;
  transition: transform 260ms var(--mmx-ease);
}
.mmx-btn-arrow .elementor-button:hover .elementor-button-text::after {
  transform: translateX(5px);
}
.mmx-btn-primary .elementor-button:hover {
  box-shadow: 0 10px 26px -12px rgba(199,160,82,.62);
}

/* inline gold text link with arrow */
.mmx-link a {
  color: var(--mmx-gold-text);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mmx-link a:hover { color: var(--mmx-navy); }
.mmx-link a::after {
  content: "\2192";
  transition: transform 260ms var(--mmx-ease);
}
.mmx-link a:hover::after { transform: translateX(5px); }

/* 7. Spec / icon lists ----------------------------------------------------- */
@media (min-width: 769px) {
  .mmx-specs-cols-2 .elementor-icon-list-items { columns: 2; column-gap: 40px; }
  .mmx-specs-cols-3 .elementor-icon-list-items { columns: 3; column-gap: 40px; }
}
.elementor-icon-list-item { break-inside: avoid; }
.elementor-icon-list-item > a,
.elementor-icon-list-item > span { align-items: flex-start; }
.elementor-icon-list-icon { padding-top: .32em; }

/* 8. Header ---------------------------------------------------------------- */
#masthead { transition: box-shadow 300ms var(--mmx-ease); }
.ast-header-sticked #masthead,
#masthead.ast-sticky-active { box-shadow: 0 1px 0 var(--mmx-border), 0 8px 26px -20px rgba(11,28,51,.28); }

/* gold active/hover indicator under top-level nav items */
.ast-desktop .main-header-menu > .menu-item > .menu-link { position: relative; }
.ast-desktop .main-header-menu > .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 30px;
  height: 2px;
  background: var(--mmx-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--mmx-ease);
}
.ast-desktop .main-header-menu > .menu-item > .menu-link:hover::after,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-ancestor > .menu-link::after,
.ast-desktop .main-header-menu > .current-page-ancestor > .menu-link::after {
  transform: scaleX(1);
}
.ast-desktop .main-header-menu .sub-menu { border-color: var(--mmx-border); }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer h3,
.ast-builder-footer-grid-columns h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--mmx-gold) !important; }
.site-footer .custom-logo-link img { filter: brightness(0) invert(1); opacity: .96; }

/* 10. WPForms -------------------------------------------------------------- */
.wpforms-container .wpforms-field-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mmx-navy);
  margin-bottom: 9px;
}
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--mmx-muted);
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  color: var(--mmx-text);
  background: #FFFFFF;
  border: 1px solid var(--mmx-border);
  border-radius: 6px;
  padding: 15px 16px;
  min-height: 52px;
  box-shadow: none;
  transition: border-color 220ms var(--mmx-ease), box-shadow 220ms var(--mmx-ease);
}
.wpforms-container textarea { min-height: 150px; }
.wpforms-container input:hover,
.wpforms-container select:hover,
.wpforms-container textarea:hover { border-color: #D2D6DE; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--mmx-gold);
  box-shadow: 0 0 0 3px rgba(199,160,82,.16);
  outline: 2px solid var(--mmx-focus);
  outline-offset: 2px;
}
.wpforms-container button[type=submit] {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mmx-navy);
  background: var(--mmx-gold);
  border: 0;
  border-radius: 6px;
  padding: 19px 38px;
  min-height: 52px;
  transition: background-color 260ms var(--mmx-ease), box-shadow 260ms var(--mmx-ease);
}
.wpforms-container button[type=submit]:hover {
  background: var(--mmx-gold-hover);
  box-shadow: 0 10px 26px -12px rgba(199,160,82,.62);
}
.wpforms-container .wpforms-error {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: #B3261E;
}
.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: #B3261E; }
.wpforms-confirmation-container-full {
  background: var(--mmx-bg-light);
  border: 1px solid var(--mmx-border);
  border-left: 3px solid var(--mmx-gold);
  border-radius: 6px;
  padding: 28px 32px;
  color: var(--mmx-navy);
  font-family: 'Manrope', sans-serif;
}
.wpforms-container .wpforms-field { padding: 11px 0; }
.wpforms-container .wpforms-field-gdpr-checkbox label {
  min-height: 44px; display: flex; align-items: center; gap: 12px;
  font-family: 'Manrope', sans-serif; font-size: 15px;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--mmx-muted);
}
.wpforms-container ul { list-style: none; margin: 0; padding: 0; }

/* 11. Focus states -------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--mmx-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer a:focus-visible,
.mmx-on-navy a:focus-visible,
.mmx-on-navy button:focus-visible {
  outline: 2px solid var(--mmx-gold-soft);
  outline-offset: 2px;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 14px; left: 14px;
  z-index: 100000;
  width: auto; height: auto;
  padding: 14px 22px;
  background: var(--mmx-navy);
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  clip: auto !important;
  clip-path: none !important;
  outline: 2px solid var(--mmx-gold-soft);
  outline-offset: 2px;
}

/* 12. Scroll reveal — opt-in, JS-gated so content is never hidden without JS */
.mmx-js .mmx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--mmx-ease), transform 620ms var(--mmx-ease);
}
.mmx-js .mmx-reveal.mmx-in { opacity: 1; transform: none; }

/* 13. Wide tables --------------------------------------------------------- */
.mmx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mmx-table-scroll:focus-visible { outline: 2px solid var(--mmx-focus); outline-offset: 2px; }
.entry-content table,
.elementor-widget-html table {
  width: 100%; border-collapse: collapse;
  font-family: 'Manrope', sans-serif; font-size: 15px;
}

/* Legal / long-form pages read as editorial documents */
.mmx-legal h2 {
  font-size: 22px; font-weight: 500; margin-top: 48px; margin-bottom: 14px;
  padding-top: 26px; border-top: 1px solid var(--mmx-border);
}
.mmx-legal h3 { font-size: 17px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; }
.mmx-legal ul { margin: 0 0 18px 20px; }
.mmx-legal li { margin-bottom: 8px; }

/* No horizontal overflow, ever */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* 14. Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mmx-js .mmx-reveal { opacity: 1 !important; transform: none !important; }
  .mmx-card:hover { transform: none; }
  .mmx-card:hover .elementor-widget-image img { transform: none; }
}