/* Young Corporation — homepage/global.css
   Extracted from style.css. Depends on global/global.css tokens. */

/* ==========================================================================
   Young Corporation — "Global Industrial Elegance" design system
   Shared across all pages. Maps to Elementor global styles later:
   - :root tokens  → Elementor Global Colors / Fonts
   - .section      → Elementor full-width Section
   - .btn variants → Elementor Button styles
   ========================================================================== */

/* ---- Design tokens ----
   Brand palette read directly from the real logo SVG
   (/images/design/logo/old/logo_old_horizontal.svg):
     navy  #202874   sky  #00B3F0
   --sky-ink is a darkened sky that passes WCAG AA (>=4.5:1) as text on
   the off-white/white backgrounds; raw --sky is reserved for dark
   backgrounds, borders, icons and small accents only. */
:root {
  /* brand */
  --navy: #202874;          /* deep navy from logo */
  --navy-800: #262f80;      /* darker navy for insets */
  --sky: #00B3F0;           /* bright sky blue from logo */
  --sky-ink: #0E6E9E;       /* AA-safe sky for text/links on light */

  /* semantic surfaces & text */
  --bg: #F7F5F1;            /* warm off-white page background */
  --surface: #FFFFFF;       /* white cards */
  --text: #1c2333;          /* body text on light */
  --text-muted: #5b6675;
  --text-inverse: #ffffff;  /* text on navy/dark */
  --line: #e4e2dc;
  --glass: rgba(255, 255, 255, 0.08);

  /* legacy aliases (kept so existing selectors resolve) */
  --navy-700: #2c3690;
  --offwhite: var(--bg);
  --paper: var(--surface);
  --ink: var(--text);
  --muted: var(--text-muted);

  --font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1200px;
  --gap: clamp(1rem, 3vw, 2.5rem);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 2px 10px rgba(32, 40, 116, .06);
  --shadow-md: 0 14px 40px rgba(32, 40, 116, .12);
  --shadow-lg: 0 30px 70px rgba(32, 40, 116, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--offwhite);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sky-ink); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1.1rem; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--sky-ink);
  margin: 0 0 1rem;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); }

/* ---- Layout ----
   ONE container utility. Header bar, hero text block and every section's
   inner content use this, so all left edges align down the page. */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 560px) { .container { padding-inline: 16px; } }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--navy { background: var(--navy); color: #dfe6f0; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--paper { background: var(--paper); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure.center { margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }

/* ---- Buttons ----
   Two canonical classes: .btn-primary and .btn-ghost, plus a
   .btn-ghost-dark variant (navy border/text) for light backgrounds.
   Legacy .btn / .btn--gold / .btn--ghost are aliased to these. */
.btn, .btn-primary, .btn-ghost, .btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; line-height: 1.2;
  padding: 14px 28px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}

/* Primary — solid navy, white text (12.99:1, AA) */
.btn-primary, .btn--gold {
  background: var(--navy); color: var(--text-inverse); border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn--gold:hover {
  background: #182060; border-color: #182060; color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* Ghost — for dark/photo backgrounds: legible frosted chip, white text */
.btn-ghost, .section--navy .btn--ghost, .hero .btn--ghost {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-ghost:hover, .section--navy .btn--ghost:hover, .hero .btn--ghost:hover {
  background: rgba(255,255,255,.16); color: #fff; border-color: #fff;
  transform: translateY(-2px);
}

/* Ghost-dark — for light backgrounds: navy border + navy text */
.btn-ghost-dark, .btn--ghost {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn-ghost-dark:hover, .btn--ghost:hover {
  background: var(--navy); color: #fff; border-color: var(--navy);
  transform: translateY(-2px);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .chain__line::after { width: 100% !important; }
  .wa-float { animation: none !important; }
}

/* ==========================================================================
   Floating WhatsApp button (shared across all pages)
   ========================================================================== */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  animation: wa-pulse 2.4s ease-in-out infinite;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.34); }
.wa-float svg { width: 32px; height: 32px; display: block; }
@keyframes wa-pulse {
  0% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 560px) { .wa-float { right: 16px; bottom: 16px; } }

/* shared width helper */
.shell { width: min(var(--maxw), 100% - 2 * clamp(1rem, 5vw, 2.5rem)); margin-inline: auto; }