/* =====================================================================
   Mineralocity Aggregates — Landing Page Design System
   All visual styling for the landing template lives here.
   Color, type, spacing tokens are defined in :root below.
   ===================================================================== */

:root {
  /* ---- Brand colors (extracted from source InDesign file) ---- */
  --ml-navy:        #0a222f;   /* primary background          */
  --ml-navy-2:      #16313e;   /* hero / raised panels        */
  --ml-gold:        #e49a25;   /* accent / CTA                */
  --ml-gold-dark:   #cf8a1d;   /* CTA hover                   */

  /* ---- Text colors ---- */
  --ml-heading:     #c7c8c6;   /* hero headline (gray part)   */
  --ml-text:        #b9c2c7;   /* body copy on navy           */
  --ml-text-soft:   #9aa6ad;   /* secondary copy              */
  --ml-text-faint:  #aab4b8;   /* hero description            */
  --ml-label:       #8b969d;   /* eyebrow labels              */
  --ml-line:        rgba(255, 255, 255, .30); /* card borders  */

  /* ---- Typography ---- */
  --ml-font-sans:  'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-font-serif: 'Rokkitt', Georgia, serif;

  /* ---- Layout ---- */
  --ml-maxw:  1240px;  /* matches producers so both pages share the same content width / side gutters */
  --ml-pad-x: clamp(32px, 5.5vw, 104px);
}

/* ---------------------------------------------------------------------
   Base / resets (scoped to the landing wrapper)
   --------------------------------------------------------------------- */
.ml-page * { margin: 0; padding: 0; box-sizing: border-box; }
.ml-page {
  font-family: var(--ml-font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ml-navy);
  background: var(--ml-navy);
  overflow-x: hidden;
}
.ml-page img { display: block; max-width: 100%; }
.ml-page a { text-decoration: none; }
.ml-page ::selection { background: var(--ml-gold); color: var(--ml-navy); }

.ml-serif { font-family: var(--ml-font-serif); }

/* ---------------------------------------------------------------------
   Accessibility — skip link, focus ring, screen-reader-only text
   The Colza theme + plugin stylesheets load AFTER this file (via wp_head)
   and remove outlines globally (core.min.css: a/input:focus{outline:none};
   theme.min.css: button:focus{outline:0}). Re-establish a visible keyboard
   focus indicator and scope it under .ml-page (plus :focus-visible, itself a
   pseudo-class) so it out-specifies the theme's outline-killers — no
   !important needed.
   --------------------------------------------------------------------- */
/* Skip-to-content link: first focusable element, slides into view on focus. */
.ml-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  background: var(--ml-gold);
  color: var(--ml-navy);
  font-family: var(--ml-font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 12px 20px;
  border-radius: 8px;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.ml-skip-link:focus { transform: translateY(0); }

/* Visible keyboard focus ring for every interactive element. */
.ml-page a:focus-visible,
.ml-page button:focus-visible,
.ml-page input:focus-visible,
.ml-page .ml-btn-pill:focus-visible {
  outline: 3px solid var(--ml-gold);
  outline-offset: 3px;
}
/* Gold-on-gold would be invisible: the skip link gets a navy ring instead. */
.ml-page .ml-skip-link:focus,
.ml-page .ml-skip-link:focus-visible { outline: 3px solid var(--ml-navy); outline-offset: 2px; }

/* Visually-hidden, screen-reader-only text (e.g. "opens in new tab"). */
.ml-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.ml-btn-pill {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 18px 34px;
  border-radius: 30px;
  cursor: pointer;
  transition: filter .2s ease, background .2s ease;
}
.ml-btn-pill:hover { filter: brightness(1.06); }

.ml-btn-pill--gold    { background: var(--ml-gold); color: var(--ml-navy); border: none; }
.ml-btn-pill--outline { background: var(--ml-navy); color: #fff; border: 1.5px solid rgba(255,255,255,.55); padding: 16.5px 34px; }
.ml-btn-pill--ghost   { background: transparent;   color: #fff; border: 1.5px solid rgba(255,255,255,.55); padding: 14.5px 30px; }
.ml-btn-pill--auto    { font-size: 13px; letter-spacing: 1.4px; padding: 16px 30px; }
.ml-btn-pill--ghost.ml-btn-pill--auto { padding: 14.5px 30px; }

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
/* The bar background spans full width; its inner content uses the same centered
   max-width column as every section below, so the logo aligns with the hero and
   other section content (both edges) at every screen size. */
.ml-nav { background: var(--ml-navy); padding: 0 var(--ml-pad-x); }
.ml-nav__inner {
  max-width: var(--ml-maxw);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ml-nav__logo-link { display: inline-flex; line-height: 0; }
.ml-nav__logo { height: 62px; width: auto; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.ml-hero {
  position: relative;
  overflow: hidden;
  background: var(--ml-navy-2) url('../img/hero-topo-bg.jpg') center center / cover no-repeat;
  min-height: clamp(560px, 74vh, 780px);
}
.ml-hero__inner {
  position: relative;
  z-index: 4;
  width: min(var(--ml-maxw), calc(100% - 2 * var(--ml-pad-x)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 62vh, 720px);
}
.ml-hero__text { padding: 48px 0 64px; }
.ml-hero__title {
  font-size: clamp(34px, 5.6vw, 82px);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -.5px;
  max-width: 720px;
}
.ml-hero__title .gold { color: var(--ml-gold); }
.ml-hero__title .gray { color: var(--ml-heading); }
.ml-hero__desc {
  margin-top: 30px;
  color: var(--ml-text-faint);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 470px;
  font-weight: 400;
}
.ml-hero__actions {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
/* Selector intentionally `.ml-page img.ml-hero__laptop` (0,2,1) so the size cap
   beats the `.ml-page img { max-width:100% }` reset above (also 0,2,1, but earlier
   in source). With only `.ml-hero__laptop` (0,1,0) the reset wins and `width:63%`
   runs UNCAPPED — on wide monitors the laptop balloons past 900px and climbs above
   the hero/navbar. */
.ml-page img.ml-hero__laptop {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 63%;
  max-width: 1000px;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Features
   --------------------------------------------------------------------- */
.ml-features { background: var(--ml-navy); padding: clamp(48px, 6vw, 92px) var(--ml-pad-x) clamp(40px, 5vw, 60px); }
.ml-features__inner { max-width: var(--ml-maxw); margin: 0 auto; }
.ml-section-title {
  text-align: center;
  font-size: clamp(32px, 3.2vw, 40px);  /* 32px mobile floor so it isn't small on phones */
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--ml-gold);
  max-width: none;
  margin: 0 auto clamp(34px, 4vw, 52px);
  white-space: nowrap;  /* keep the heading on one line (desktop); restored to wrap <=880px */
  text-wrap: balance;   /* balances the wrapped lines on small screens */
}

.ml-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
}
.ml-feature-card {
  border: 1px solid var(--ml-line);
  border-radius: 14px;
  padding: clamp(28px, 3vw, 38px);
}
/* width:auto + a taller height scale the icons up uniformly, overriding the
   per-icon width/height attributes in the markup while keeping each aspect ratio. */
.ml-feature-card__icon { display: block; width: auto; height: 80px; margin-bottom: 24px; }
.ml-feature-card__title {
  font-size: clamp(26px, 2.8vw, 33px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 16px;
}
.ml-feature-card__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ml-text-soft);
}

/* trust rule line under cards */
.ml-trustline { max-width: none; margin: clamp(36px, 4.5vw, 56px) auto 0; }
.ml-trustline__rule { height: 2px; background: var(--ml-gold); opacity: 1; }
.ml-trustline__text {
  text-align: center;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.4;
  color: var(--ml-text);
  padding: clamp(18px, 2.4vw, 28px) 0;
}

/* ---------------------------------------------------------------------
   Trusted by
   --------------------------------------------------------------------- */
.ml-trusted { background: var(--ml-navy); padding: clamp(34px, 5vw, 64px) var(--ml-pad-x) clamp(40px, 5vw, 64px); }
.ml-trusted__label {
  text-align: center;
  color: var(--ml-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 34px;
}
.ml-trusted__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 56px;
}
.ml-trusted__logos img { width: auto; opacity: .95; }
/* Per-logo heights (moved off inline styles per the no-inline-styles rule). */
.ml-page .ml-logo-polydex { height: 44px; }
.ml-page .ml-logo-esri    { height: 60px; }
.ml-trusted__divider {
  max-width: var(--ml-maxw);
  margin: clamp(40px, 5vw, 60px) auto 0;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}
.ml-polydex {
  color: #fff;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: flex-start;
}
.ml-polydex__r { font-size: 11px; font-weight: 700; margin-top: 3px; }

/* ---------------------------------------------------------------------
   Have a Question
   --------------------------------------------------------------------- */
.ml-bottom {
  background: var(--ml-navy) url('../img/hero-topo-bg.jpg') center top / cover no-repeat;
}
.ml-question {
  background: linear-gradient(to bottom, var(--ml-navy) 0%, var(--ml-navy) 40%, rgba(10,34,47,0) 75%);
  padding: clamp(24px, 3vw, 44px) var(--ml-pad-x) clamp(30px, 4vw, 48px);
}
.ml-question__card {
  max-width: var(--ml-maxw);
  margin: 0 auto;
  background: var(--ml-navy);
  border: 1px solid var(--ml-line);
  border-radius: 14px;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  text-align: center;
}
.ml-question__title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--ml-gold);
  margin-bottom: 14px;
}
.ml-question__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ml-text);
  max-width: none;
  /* wrap naturally — it stays on one line on wide screens where it fits, and wraps
     instead of overflowing the card on mid/narrow widths (was white-space:nowrap). */
  margin: 0 auto clamp(28px, 3.5vw, 38px);
}
.ml-question__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.ml-question__btns .ml-btn-pill { width: 290px; max-width: 100%; box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.ml-footer {
  color: #fff;
  padding: clamp(64px, 7vw, 100px) var(--ml-pad-x) clamp(96px, 11vw, 150px);
}
.ml-footer__inner { max-width: var(--ml-maxw); margin: 0 auto; }
.ml-footer__logo { height: 58px; width: auto; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .ml-page img.ml-hero__laptop {  /* match the base rule's specificity so this stacked-layout cap wins */
    position: static;
    width: 100%;
    max-width: 540px;
    margin: 18px auto 0;
  }
  .ml-hero__text { padding-bottom: 36px; }
  .ml-hero, .ml-hero__inner { min-height: 0; }
  .ml-hero__inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 880px) {
  .ml-feature-grid { grid-template-columns: 1fr; }
  .ml-question__text { white-space: normal; }
  .ml-section-title { white-space: normal; }  /* let the heading wrap on tablets/phones */
}
@media (max-width: 620px) {
  .ml-trusted__logos { gap: 24px 32px; }
  .ml-question__btns { flex-direction: column; align-items: center; } /* center the 290px pills — stretch can't, they have a fixed width */
  .ml-btn-pill { width: 100%; white-space: normal; }
}

/* ---------------------------------------------------------------------
   Motion — scroll reveal + hover micro-interactions
   The reveal (initial hidden state) is gated on BOTH html.ml-anim (a class a
   tiny inline script adds only when JS runs) AND prefers-reduced-motion:
   no-preference. So visitors without JS, or who prefer reduced motion, always
   get fully-visible, unanimated content — no hidden-content trap, no flash.
   --------------------------------------------------------------------- */
@keyframes ml-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ml-anim .ml-hero__text,
  html.ml-anim .ml-hero__laptop,
  html.ml-anim .ml-section-title,
  html.ml-anim .ml-feature-card,
  html.ml-anim .ml-trustline,
  html.ml-anim .ml-trusted__label,
  html.ml-anim .ml-trusted__logos,
  html.ml-anim .ml-question__card,
  html.ml-anim .ml-footer__logo {
    opacity: 0;
  }

  html.ml-anim .ml-hero__text.is-visible,
  html.ml-anim .ml-hero__laptop.is-visible,
  html.ml-anim .ml-section-title.is-visible,
  html.ml-anim .ml-feature-card.is-visible,
  html.ml-anim .ml-trustline.is-visible,
  html.ml-anim .ml-trusted__label.is-visible,
  html.ml-anim .ml-trusted__logos.is-visible,
  html.ml-anim .ml-question__card.is-visible,
  html.ml-anim .ml-footer__logo.is-visible {
    animation: ml-rise .7s cubic-bezier(.22, .61, .36, 1) both;
  }

  /* gentle stagger across the feature-card row */
  html.ml-anim .ml-feature-grid .ml-feature-card:nth-child(2).is-visible { animation-delay: .08s; }
  html.ml-anim .ml-feature-grid .ml-feature-card:nth-child(3).is-visible { animation-delay: .16s; }
}

/* Hover micro-interactions. Reveal targets animate via transform, so their
   hover effects avoid transform (border/shadow only) to prevent clashes. */
.ml-btn-pill { transition: filter .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.ml-btn-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
/* Gold pills hover exactly like the gold "Download Sample Report" form button:
   darken to gold-dark + lift -2px + the shared shadow (inherited from
   .ml-btn-pill:hover). filter:none cancels the brightness bump so the darken reads
   cleanly. */
.ml-btn-pill--gold:hover { background: var(--ml-gold-dark); filter: none; }
/* The gold pill CTA is an <a> tag, so the parent theme's red a:hover/a:focus
   color (specificity 0,1,1) outranks the button's base color (0,1,0) and turns
   the label red on hover. Lock the text color here, scoped under .ml-page so it
   wins. */
.ml-page .ml-btn-pill--gold:hover,
.ml-page .ml-btn-pill--gold:focus { color: var(--ml-navy); }
/* Same root cause for the outline/ghost CTAs (white text on a dark button):
   the theme's a:hover/a:focus/a:active force color:inherit (a dark color) and a
   dark background, which makes the label vanish on click/focus. Lock their fill
   + text across every state, scoped under .ml-page so they outrank the theme. */
.ml-page .ml-btn-pill--outline,
.ml-page .ml-btn-pill--outline:hover,
.ml-page .ml-btn-pill--outline:focus,
.ml-page .ml-btn-pill--outline:active { background: var(--ml-navy); color: #fff; }
.ml-page .ml-btn-pill--ghost,
.ml-page .ml-btn-pill--ghost:hover,
.ml-page .ml-btn-pill--ghost:focus,
.ml-page .ml-btn-pill--ghost:active { background: transparent; color: #fff; }

.ml-feature-card { transition: border-color .25s ease, box-shadow .25s ease; }
.ml-feature-card:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 16px 38px rgba(0, 0, 0, .28); }

.ml-trusted__logos img { transition: opacity .25s ease, transform .25s ease; }
.ml-trusted__logos img:hover { opacity: 1; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ml-btn-pill:hover,
  .ml-trusted__logos img:hover { transform: none; }
  .ml-skip-link { transition: none; }
}

/* ---------------------------------------------------------------------
   Hide the global mobile-menu plugin on these self-contained landing pages.
   It injects a fixed bar + slide-out via wp_footer() on every page and pads
   <body> by the bar height to clear it. These pages render their own nav, so
   hide its markup and remove the body padding. Scoped to the landing body
   class so other pages keep their mobile menu.
   --------------------------------------------------------------------- */
.page-template-mineralocity-landing .mob-menu-header-holder,
.page-template-mineralocity-landing .mobmenur-container,
.page-template-mineralocity-landing .mobmenu-overlay,
.page-template-mineralocity-landing .mobmenu-panel,
.page-template-mineralocity-landing .mobmenu-content,
.page-template-mineralocity-landing .mob-menu-logo-holder,
.page-template-mineralocity-landing .mob-menu-right-bg-holder,
.page-template-mineralocity-landing .menu-mobile-menu-container { display: none !important; }
body.page-template-mineralocity-landing { padding-top: 0 !important; }

/* ---------------------------------------------------------------------
   Defensive: the live page injects a "Built by Burgex Mining Consultants"
   badge (.ml-builtby) client-side — it is not in this template's markup, so
   it inherits the page's navy text color and renders navy-on-navy (1:1,
   invisible). Give it a readable color here so it passes contrast wherever
   it is injected. Remove if the badge is ever removed upstream.
   --------------------------------------------------------------------- */
.ml-page .ml-builtby__pre,
.ml-page .ml-builtby__name,
.ml-page .ml-builtby { color: var(--ml-text); }
.ml-page .ml-builtby__name { color: #fff; }