/*
Theme Name: The New Leaders 2026
Theme URI: https://thenewleaders.vn
Author: Digito Combat
Author URI: https://digitocombat.com
Description: Custom theme for The New Leaders — EQ, Leadership & Community platform
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Private
Text Domain: thenewleaders
*/

/* ============================================================
   FONT FACE — Euclid Circular A (self-hosted)
   ============================================================ */
/* Euclid Circular A — bản EuclidCircularAVN (647 glyph) hỗ trợ ĐẦY ĐỦ tiếng Việt + Latin.
   Dùng cho cả EN lẫn VI -> đồng nhất 1 font toàn site, không cần fallback Be Vietnam Pro. (2026-06-06) */
@font-face { font-family: 'Euclid Circular A'; src: url('assets/fonts/EuclidCircularAVN-Regular.woff2?v=5') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('assets/fonts/EuclidCircularAVN-Light.woff2?v=5') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('assets/fonts/EuclidCircularAVN-Medium.woff2?v=5') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('assets/fonts/EuclidCircularAVN-SemiBold.woff2?v=5') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('assets/fonts/EuclidCircularAVN-Bold.woff2?v=5') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand Colors — exact từ Figma node 260-704 (2026-06-06) */
  --color-orange:       #FF4F21;
  --color-orange-dark:  #E03A10;
  --color-orange-light: #FFEFEB;
  --color-orange-grad:  #FF7121;  /* gradient end (CTA bg) */
  --color-black:        #232323;
  --color-dark:         #1D1D1D;
  --color-white:        #FFFFFF;
  --color-off-white:    #F1F1F1;
  --color-gray-light:   #E8E8E8;
  --color-gray:         #888888;
  --color-gray-dark:    #555555;

  /* Tag Colors — từ Figma node 260-704 */
  --color-tag-green:    #AFE56B;
  --color-tag-teal:     #5AD3ED;
  --color-tag-pink:     #FF7BBB;
  --color-tag-yellow:   #FFC75A;
  --color-tag-orange:   #FF9B52;

  /* Typography */
  --font-display:  'Euclid Circular A', sans-serif;
  --font-body:     'Euclid Circular A', sans-serif;

  /* Spacing */
  --section-py:    128px;
  --container-max: 1120px;
  --container-px:  24px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-low:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-mid:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-high: 0 8px 32px rgba(0,0,0,0.18);

  /* Transition */
  --transition: 0.25s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.65;
  -webkit-font-smoothing: auto;
  /* Font EuclidCircularAVN thiếu ligature ff/fi/fl -> tắt ligature để không bị mất chữ */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "clig" 0;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--wide { max-width: 1400px; }

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
}

.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-orange-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-mid);
}

.btn--outline {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}
.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-orange);
}

.btn--outline-dark {
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
}
.btn--outline-dark:hover {
  background: var(--color-orange);
  color: var(--color-white);
}

/* ============================================================
   TAG PILLS
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tag--orange    { background: var(--color-orange);    color: #fff; }
.tag--green     { background: var(--color-tag-green); color: #fff; }
.tag--teal      { background: var(--color-tag-teal);  color: #fff; }
.tag--pink      { background: var(--color-tag-pink);  color: #fff; }
.tag--outline   { border: 2px solid currentColor; background: transparent; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease var(--reveal-delay, 0ms),
              transform 0.5s ease var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 12px;
}

.section-title {
  margin-bottom: 20px;
}

.section-desc {
  color: var(--color-gray-dark);
  max-width: 600px;
}