/* ==========================================================================
   EliteBlocc — Base Reset + Palette Depth
   File: assets/css/global/eb-base.css
   Version: 2.1 — responsive hardening: height:auto on media reset (flexible
            images, no aspect distortion); mobile-only 16px floor on text
            inputs (prevents iOS Safari focus-zoom). Desktop unchanged.

   Merges v1: reset.css + eb-palette-depth.css
   Loads after eb-tokens.css, before eb-typography.css.

   SECTIONS
   01. Box model reset
   02. Body + page surface (emerald-tinted obsidian)
   03. Text contrast overrides
   04. Glass surface tokens
   05. Section boundary accents
   06. Reduced motion safety
   ========================================================================== */

/* ── 01. Box model reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:             100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior:       smooth;
}

img,
picture,
video,
canvas,
svg {
  display:   block;
  max-width: 100%;
  height:    auto;   /* scale proportionally when max-width:100% shrinks the element */
}

input,
button,
textarea,
select {
  font: inherit;
}

/* iOS Safari zooms the viewport when a focused text control is below 16px.
   Body copy floors at 15px on small screens (--eb-text-base), which would
   trip the zoom, so enforce a 16px floor on text-entry controls on mobile
   only. Desktop forms are untouched (they keep the inherited body size). */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  background:  transparent;
  border:      0;
  cursor:      pointer;
  line-height: inherit;
}

/* ── 02. Body + page surface ─────────────────────────────────────────────── */

/*
 * Deep emerald-tinted obsidian. Not flat black.
 * Multi-layer radial gradient creates subtle depth.
 * background-attachment: fixed gives a parallax depth effect
 * that is disabled for reduced-motion users (see section 06).
 */
html,
/* v2.1 — Emerald system: richer body gradient, three-point emerald lighting */
body {
  background-color: #011a0d;
  background-image:
    radial-gradient(ellipse 120% 60% at 50%  0%,  rgba(6, 78, 59, 0.60) 0%, transparent 52%),
    radial-gradient(ellipse  60% 40% at 0%   50%, rgba(6, 78, 59, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse  50% 35% at 100% 60%, rgba(6, 78, 59, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(1, 26, 13, 1) 0%, rgba(1, 14, 8, 1) 100%);
  background-attachment: fixed;
  color:            var(--eb-text-primary, #fff);
  font-family:      var(--eb-font-body);
  font-size:        var(--eb-text-base);
  line-height:      var(--eb-leading-normal);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height:       100vh;
}

/* Section containers — ensure relative positioning for pseudo-element use */
section[class*='eb-'],
main,
.eb-section {
  position: relative;
}

/* ── 03. Text contrast overrides ─────────────────────────────────────────── */

/*
 * v1 used .60 alpha for muted text against near-black — too low for
 * many monitors. Override both tokens here at the base layer.
 */
:root {
  --eb-text-secondary: rgba(235, 245, 240, 0.86);
  --eb-text-muted:     rgba(220, 235, 225, 0.72);
}

/* Apply secondary text to common prose elements unless overridden */
p,
li,
dd {
  color: var(--eb-text-secondary);
}

/* ── 04. Glass surface tokens ────────────────────────────────────────────── */

/*
 * Cards and panels should read as glass against the deep emerald ground —
 * subtle white tint + stronger border, not flat dark.
 */
:root {
  --eb-surface-glass:        rgba(255, 255, 255, 0.06);
  --eb-surface-glass-raised: rgba(255, 255, 255, 0.10);
  --eb-surface-glass-border: rgba(255, 255, 255, 0.18);
  --eb-surface-glass-strong: rgba(16, 185, 129, 0.12);
}

/* ── 05. Known dark container overrides ──────────────────────────────────── */

/*
 * Certain hub/frame containers were hardcoded near-black in v1 page CSS.
 * Make them transparent so the body palette shows through correctly.
 */
.eb-hub__frame,
.eb-th__frame,
.eb-dc__frame,
.eb-sus__frame,
.eb-ct__frame,
.eb-hero,
.eb-section--dark {
  background-color: transparent;
}

/* ── 06. Section boundary accent ─────────────────────────────────────────── */

/* Subtle edge-lit emerald on adjacent full-width sections */
main > section + section {
  border-top: 1px solid rgba(16, 185, 129, 0.06);
}

/* ── 07. Accessibility — focus visible ───────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--eb-color-emerald-light, #10b981);
  outline-offset: 3px;
}

/* ── 08. Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    background-attachment: scroll;
    scroll-behavior:       auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}


/* ==========================================================================
   PATCH 3.2 — Global cross-browser compatibility
   ========================================================================== */

/* ── color-scheme — prevent browser auto dark-mode inversion ─────────────── */
/*    Without this, some browsers (Chrome Android) may auto-invert the page.
      We manage our own dark/light surfaces explicitly.               */
:root {
  color-scheme: dark;
}


/* ── Focus visibility — WCAG 2.1 AA, cross-browser ──────────────────────── */
/*    :focus-visible is supported in all modern browsers.
      We add a visible ring on keyboard focus only (not mouse click).  */

:focus-visible {
  outline:        2px solid rgba(16,185,129,.7);
  outline-offset: 3px;
  border-radius:  3px;
}

/* Remove the focus ring for mouse users (click) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Extra specificity for Elementor's aggressive focus overrides */
.elementor-widget-container :focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* ── Overscroll behaviour ──────────────────────────────────────────────────── */
/*    Prevents rubber-band/bounce propagating from scroll containers.   */
html {
  overscroll-behavior-y: none;
}

/* Allow overscroll inside scroll containers (marquee etc) */
.eb-trust-marquee {
  overscroll-behavior-x: contain;
}


/* ── Prevent horizontal scroll on all viewports ──────────────────────────── */
body {
  overflow-x: hidden;
}


/* ── Interactive element resets — cross-browser ──────────────────────────── */

button,
[role="button"],
[role="tab"] {
  -webkit-appearance: none;
  -moz-appearance:    none;
       appearance:    none;
  cursor:             pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action:       manipulation;
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari — prevent callout on long-press for decorative elements */
img,
svg {
  -webkit-user-drag:   none;
  -webkit-touch-callout: none;
}


/* ── Smooth scroll — respects reduced motion (already set, confirm) ───────── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}


/* ── Firefox scrollbar — prevent layout shift ────────────────────────────── */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}

/* Firefox custom scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(16,185,129,.3) transparent;
}

/* Webkit custom scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background:    rgba(16,185,129,.25);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16,185,129,.45);
}


/* ── Selection colour ────────────────────────────────────────────────────── */
::selection {
  background: rgba(6,78,59,.55);
  color:      #fff;
}
::-moz-selection {
  background: rgba(6,78,59,.55);
  color:      #fff;
}


/* ── Lazy image fade-in ──────────────────────────────────────────────────── */
img[loading="lazy"] {
  opacity:    0;
  transition: opacity .4s ease;
}
img[loading="lazy"].is-loaded {
  opacity: 1;
}


/* ── High contrast mode support ──────────────────────────────────────────── */
@media (forced-colors: active) {
  .eb-home-hero__btn-primary,
  .eb-home-hero__btn-secondary {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* END PATCH 3.2 */


/* ==========================================================================
   PATCH 3.3 — Global anti-overflow and min-width hardening
   ─────────────────────────────────────────────────────────────────────────
   Prevents horizontal scroll on all viewports without masking layout bugs.
   overflow-x: clip is more robust than hidden (preserves position:sticky,
   does not create a scroll container).
   min-width: 0 on flex/grid children prevents implicit min-content blowout.
   ========================================================================== */

/* ── Replace existing overflow-x:hidden with clip ───────────────────────── */
/*    overflow-x:hidden was already set on body in Patch 3.2.
      clip achieves the same visual result but does NOT create a scroll
      container, so position:sticky inside the body still works correctly.  */
html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  overflow-x: clip;   /* overrides the 'hidden' from Patch 3.2 */
  max-width: 100%;
}

/* ── Media elements already have max-width:100% from box-model reset ─────── */
/*    Confirm canvas and iframe are also covered (not in the original reset).  */
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

/* ── min-width: 0 on common grid / flex children ────────────────────────── */
/*    CSS grid cells default to min-width: auto (= min-content), which allows
      content to overflow the grid. Setting min-width:0 gives the grid full
      control over cell sizing.
      Flex children have a similar implicit minimum.
      These selectors cover Elementor containers and all EB namespaced wrappers.  */

.elementor-column,
.elementor-widget-wrap,
.elementor-section > .elementor-container,
[class*="eb-ph-"],
[class*="eb-th-"],
[class*="eb-dc-"],
[class*="eb-ct-"],
[class*="eb-sa-"],
[class*="eb-about"],
.eb-forge__inner > *,
.eb-home-hero__inner,
.eb-home-metrics__grid > *,
.eb-home-benefits__grid > *,
.eb-home-products__grid > *,
.eb-home-sectors__grid > *,
.eb-home-sus__grid > *,
.eb-home-technical__inner > * {
  min-width: 0;
}

/* END PATCH 3.3 */