/* Modern 2026 design layer — tier: base (global element styles, typography, a11y, primitives) */

/* ============================================================================
   Base — html/body
   ============================================================================ */

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

body.lang-vi-VN,
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.78;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-primary);
  color: #fff;
}

img {
  max-width: 100%;
}

/* Modern, calm scrollbar (desktop) */
* {
  scrollbar-color: var(--c-primary) transparent;
}

/* ============================================================================
   Typography
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h4); line-height: 1.25; }
h6 { font-size: var(--fs-sm); line-height: 1.3; letter-spacing: 0; }

/* Display helper — hero/banner headlines larger than h1 */
.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}

p {
  margin: 0 0 1.35em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 64ch;
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t);
}

a:hover,
a:focus {
  color: var(--c-primary-700);
}

/* ============================================================================
   .eyebrow — small uppercase label with a short gold tick
   ============================================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-600);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background: var(--c-gold);
  border-radius: var(--r-pill);
}

/* ============================================================================
   Section rhythm + container helpers
   NOTE: `.mx-container` is intentionally NOT `.container` — Bootstrap's
   `.container` width math (fixed breakpoints + built-in gutters) must stay
   untouched. This is a standalone helper for modern/editorial layouts.
   ============================================================================ */

.section {
  padding-block: var(--section-y);
}

.section-tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.mx-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.mx-container--narrow {
  max-width: var(--container-narrow);
}

/* ============================================================================
   Accessibility — visible keyboard focus (the legacy template had none)
   ============================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-to-content link (keyboard / screen-reader users) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100001;
  padding: 10px 18px;
  background: var(--c-primary);
  color: #fff !important;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================================
   Respect users who prefer reduced motion
   (Reveal.tsx contract untouched: .animated stays opacity:0 until a `go`
   class is added to it via the .animatedParent IntersectionObserver; the
   noscript fallback in the layout, not this rule, forces opacity:1 there.)
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================================
   RESPONSIVE + ACCESSIBILITY
   ============================================================================ */

/* iOS Safari janks on background-attachment:fixed → use scroll on small screens
   (PageBanner sets `fixed` inline; this overrides just the attachment). */
@media (max-width: 991px) {
  .page-child-banner .backgroundscroll,
  .backgroundscroll,
  .about-bg {
    background-attachment: scroll !important;
  }
}

/* Home box-home image columns overrun one 15px gutter in the col-sm band
   (tablet portrait, 768–991px), causing a small horizontal scroll. Clip the
   bleed. `overflow-x: clip` (not `hidden`) does NOT create a scroll container
   and does NOT force the vertical axis to scroll. */
@media (min-width: 768px) and (max-width: 991px) {
  #divHomeContent {
    overflow-x: clip;
  }
}

/* Roomier footer social touch targets */
.page-footer .social .social-list a,
.social-list a {
  width: 40px;
  height: 40px;
  padding-top: 8px;
}

/* Keep injected (snapshot/article) images from overflowing their column */
.post-detail .description img,
#page_body .page-content img,
#page_body .page-content iframe {
  max-width: 100%;
}

/* ============================================================================
   Keyframes — shared animation primitives (consumed by other modern/* rules)
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes dh-fade-up {
    from {
      opacity: 0;
      translate: 0 20px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes dh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes dh-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%);  }
  }

  /* Page body enter — fires on every client-side route change since #page_body
     re-mounts. Short so it doesn't fight the legacy reveal animations. */
  #page_body {
    animation: dh-fade-up 0.42s var(--ease-out) both;
  }

  /* Stagger helper: set --stagger-i on the element (0,1,2…) to offset the delay */
  .dh-stagger {
    animation-delay: calc(var(--stagger-i, 0) * 80ms);
  }
}