/* =========================================================
   Marco Lombart — Shared Component Utilities (mlComponents)
   Loaded via loadStyle() from the mlComponents static resource
   across ML Lightning Web Components. Depends on the tokens in
   mlTokens (CSS custom properties).
   Classes ported from wireframe/assets/css/wireframe.css and
   renamed with an `ml-` prefix so they don't collide with the
   Salesforce Lightning Design System (SLDS).
   ========================================================= */

/* -----------------------------------------
   Layout container — .container -> .ml-container
----------------------------------------- */
.ml-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--ml-s-5);
}
@media (max-width: 767px) {
  .ml-container { padding: 0 var(--ml-s-4); max-width: 100vw; }
}

/* -----------------------------------------
   Buttons — .btn* -> .ml-btn*
----------------------------------------- */
.ml-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-s-2);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--ml-f-sans);
  font-weight: 600;
  font-size: var(--ml-fs-sm);
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.ml-btn-primary { background: var(--ml-c-ml-blue); color: var(--ml-c-white); }
.ml-btn-primary:hover { background: var(--ml-c-ml-blue-600); transform: translateY(-1px); box-shadow: var(--ml-sh-md); }
.ml-btn-ghost { background: transparent; color: var(--ml-c-ml-blue); border-color: var(--ml-c-ml-blue); }
.ml-btn-ghost:hover { border-color: var(--ml-c-ml-blue); background: var(--ml-c-ml-blue); color: var(--ml-c-white); }
.ml-btn-ghost-light { background: transparent; color: var(--ml-c-white); border-color: rgba(255,255,255,0.4); }
.ml-btn-ghost-light:hover { background: rgba(255,255,255,0.12); }

/* Arrow CTA pill — the modern workhorse button (.btn-arrow) */
.ml-btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ml-c-ml-blue);
  color: var(--ml-c-white);
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--ml-f-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  border: 1.5px solid var(--ml-c-ml-blue);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ml-btn-arrow::after {
  content: '→';
  display: inline-block;
  font-weight: 300;
  font-size: 18px;
  color: var(--ml-c-ml-green); /* sparing ML Green dot/accent on arrow */
  transition: transform 0.25s ease;
}
.ml-btn-arrow:hover {
  background: var(--ml-c-ml-blue-600);
  border-color: var(--ml-c-ml-blue-600);
  box-shadow: 0 10px 28px rgba(0,62,81,0.22);
  transform: translateY(-1px);
}
.ml-btn-arrow:hover::after { transform: translateX(4px); }
.ml-btn-arrow--light { background: var(--ml-c-white); color: var(--ml-c-ml-blue); border-color: var(--ml-c-white); }
.ml-btn-arrow--light:hover { background: var(--ml-c-stone-100); border-color: var(--ml-c-stone-100); color: var(--ml-c-ml-blue); }
.ml-btn-arrow--outline { background: transparent; color: var(--ml-c-ml-blue); border-color: var(--ml-c-ml-blue); }
.ml-btn-arrow--outline:hover { background: var(--ml-c-ml-blue); color: var(--ml-c-white); }
.ml-btn-arrow--outline-light { background: transparent; color: var(--ml-c-white); border-color: rgba(255,255,255,0.6); }
.ml-btn-arrow--outline-light:hover { background: var(--ml-c-white); color: var(--ml-c-ml-blue); border-color: var(--ml-c-white); }

/* -----------------------------------------
   Section padding presets — .section* -> .ml-section*
----------------------------------------- */
.ml-section { padding: var(--ml-s-9) 0; position: relative; }
.ml-section--tight { padding: var(--ml-s-8) 0; }
.ml-section--xl { padding: calc(var(--ml-s-9) + 16px) 0; }
.ml-section--alt { background: var(--ml-c-surface); }
.ml-section--dark { background: var(--ml-c-ml-blue); color: var(--ml-c-white); }
.ml-section--dark h2, .ml-section--dark h3 { color: var(--ml-c-white); }
.ml-section--dark p { color: rgba(255,255,255,0.75); }

/* -----------------------------------------
   Eyebrow — .section__eyebrow -> .ml-eyebrow
----------------------------------------- */
.ml-eyebrow {
  font-family: var(--ml-f-sans);
  font-size: var(--ml-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ml-c-secondary);
  font-weight: 700;
  margin-bottom: var(--ml-s-2);
}
.ml-section--dark .ml-eyebrow { color: var(--ml-c-white); opacity: 0.72; }

/* -----------------------------------------
   Title — editorial light/heavy clamp headline (.section__title)
----------------------------------------- */
.ml-title {
  font-family: var(--ml-f-sans);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ml-c-ml-blue);
  max-width: 720px;
  margin: 0 0 var(--ml-s-4);
}
.ml-title strong { font-weight: 700; }
.ml-section--dark .ml-title { color: var(--ml-c-white); }
.ml-section--dark .ml-title strong { color: var(--ml-c-white); }

/* -----------------------------------------
   Round icon buttons for header — .icon-btn -> .ml-icon-btn
----------------------------------------- */
.ml-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ml-c-ml-blue);
  border: 1px solid var(--ml-c-border);
  transition: all 0.2s;
  background: var(--ml-c-white);
  cursor: pointer;
}
.ml-icon-btn svg { width: 20px; height: 20px; display: block; }
.ml-icon-btn:hover { border-color: var(--ml-c-ml-blue); background: var(--ml-c-surface); }
/* Dark-header variant — icon buttons on the ML Blue header bar */
.ml-icon-btn--light {
  color: var(--ml-c-white);
  border-color: rgba(255,255,255,0.2);
  background: transparent;
}
.ml-icon-btn--light:hover {
  border-color: var(--ml-c-white);
  color: var(--ml-c-white);
  background: rgba(255,255,255,0.1);
}

/* Smooth in-page anchor scrolling (used with ML Anchor targets) */
html { scroll-behavior: smooth; }

/* ── Ultra-wide screens: widen section containers so the site fills large monitors ── */
@media (min-width: 1600px) {
    .ml-promo-banner__inner,
    .ml-shop__container,
    .ml-brand-grid__inner,
    .ml-product-listing__inner,
    .ml-pdp-wrap__inner,
    .ml-num-list__inner,
    .ml-topbar__inner,
    .ml-journey__container,
    .ml-bento__inner,
    .ml-header__topbar-inner,
    .ml-header__inner,
    .ml-header__search-inner,
    .ml-header__suggestions,
    .ml-finance-benefits__inner,
    .ml-blog__inner,
    .mlv2-container,
    .ml-cards__inner,
    .ml-content-block__container,
    .ml-page-hero__container,
    .ml-finance-highlights__inner,
    .ml-product-hero__inner,
    .ml-events__container,
    .ml-featured-promo__container,
    .ml-chip-bar__inner,
    .ml-promos__container,
    .ml-about-aec__container,
    .ml-product-tabs__inner,
    .ml-catalog__container,
    .ml-footer__container,
    .ml-service__container,
    .ml-stats__inner,
    .ml-rep__container,
    .ml-lead__inner,
    .ml-news-events__inner,
    .ml-plan-cards__inner {
        max-width: min(90vw, 1800px) !important;
    }
}