/*
 * =============================================================
 * main.css — ExpoAxis Design System v2
 * Design: Premium Navy + Orange | Multi-Page Architecture
 * Fonts : Poppins (headings) · Inter (body)
 * =============================================================
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --navy          : #0F172A;
  --navy-800      : #1E293B;
  --navy-700      : #334155;
  --navy-600      : #475569;
  --slate         : #64748B;
  --slate-light   : #94A3B8;
  --slate-50      : #F8FAFC;
  --slate-100     : #F1F5F9;
  --slate-200     : #E2E8F0;

  --orange        : #F97316;
  --orange-hover  : #EA6C0A;
  --orange-dark   : #C2590A;
  --orange-light  : rgba(249, 115, 22, 0.12);
  --orange-glow   : rgba(249, 115, 22, 0.22);

  --white         : #FFFFFF;

  /* Semantic Tokens */
  --bg-primary    : #FFFFFF;
  --bg-surface    : #F8FAFC;
  --bg-elevated   : #FFFFFF;
  --bg-dark       : #0F172A;
  --bg-dark-soft  : #1E293B;

  --text-primary   : #0F172A;
  --text-secondary : #475569;
  --text-tertiary  : #94A3B8;
  --text-inverse   : #FFFFFF;

  --border-light  : rgba(15, 23, 42, 0.08);
  --border-medium : rgba(15, 23, 42, 0.14);
  --border-dark   : rgba(255, 255, 255, 0.10);

  --accent        : var(--orange);
  --accent-hover  : var(--orange-hover);
  --accent-light  : var(--orange-light);
  --accent-glow   : var(--orange-glow);

  /* Typography */
  --font-heading  : 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body     : 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container     : 1240px;
  --section-y     : 100px;
  --nav-height    : 76px;

  /* Border Radius */
  --radius-xs   : 4px;
  --radius-sm   : 8px;
  --radius-md   : 12px;
  --radius-lg   : 16px;
  --radius-xl   : 24px;
  --radius-2xl  : 32px;
  --radius-full : 9999px;

  /* Shadows */
  --shadow-xs  : 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm  : 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md  : 0 6px 20px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-lg  : 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-xl  : 0 28px 64px rgba(15, 23, 42, 0.13), 0 8px 20px rgba(15, 23, 42, 0.07);
  --shadow-orange : 0 8px 32px rgba(249, 115, 22, 0.32);
  --shadow-navy   : 0 16px 48px rgba(15, 23, 42, 0.30);

  /* Transitions */
  --transition       : all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast  : all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow  : all 0.50s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.40s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   2. CSS RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

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

body {
  font-family             : var(--font-body);
  font-size               : 1rem;
  line-height             : 1.65;
  color                   : var(--text-primary);
  background              : var(--bg-primary);
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  overflow-x              : hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family   : var(--font-heading);
  font-weight   : 700;
  line-height   : 1.15;
  color         : var(--text-primary);
  letter-spacing: -0.02em;
}


/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width         : 100%;
  max-width     : var(--container);
  margin        : 0 auto;
  padding-left  : 40px;
  padding-right : 40px;
}

.container-sm {
  max-width    : 860px;
  margin       : 0 auto;
  padding-left : 40px;
  padding-right: 40px;
}

section { padding: var(--section-y) 0; }


/* ============================================================
   4. SECTION HEADER — reused across all pages
   ============================================================ */

/* Orange eyebrow label */
.section-label {
  display       : inline-flex;
  align-items   : center;
  gap           : 7px;
  font-family   : var(--font-heading);
  font-size     : 0.75rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color         : var(--orange);
  margin-bottom : 12px;
}
.section-label::before {
  content      : '';
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--orange);
  flex-shrink  : 0;
}

/* White variant (on dark backgrounds) */
.section-label.light { color: rgba(255,255,255,0.65); }
.section-label.light::before { background: rgba(255,255,255,0.65); }

/* Large section h2 */
.section-title {
  font-size     : clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight   : 800;
  color         : var(--text-primary);
  line-height   : 1.15;
  letter-spacing: -0.025em;
  margin-bottom : 16px;
}
.section-title.light { color: var(--white); }

/* Supporting paragraph */
.section-subtitle {
  font-size  : 1.05rem;
  color      : var(--text-secondary);
  line-height: 1.75;
  max-width  : 560px;
}
.section-subtitle.light { color: rgba(255,255,255,0.65); }

/* Centred header block */
.section-header-center {
  text-align   : center;
  margin-bottom: 64px;
}
.section-header-center .section-subtitle { margin: 0 auto; }

/* Split header: text left + CTA right */
.section-header-split {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-end;
  gap            : 32px;
  flex-wrap      : wrap;
  margin-bottom  : 56px;
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  font-family    : var(--font-heading);
  font-weight    : 600;
  font-size      : 0.92rem;
  border-radius  : var(--radius-full);
  border         : 2px solid transparent;
  cursor         : pointer;
  white-space    : nowrap;
  text-decoration: none;
  transition     : var(--transition);
  outline        : none;
  padding        : 13px 26px;
  line-height    : 1;
  letter-spacing : 0.01em;
}

/* Orange primary */
.btn-primary {
  background  : var(--orange);
  color       : var(--white);
  border-color: var(--orange);
  box-shadow  : var(--shadow-orange);
}
.btn-primary:hover {
  background  : var(--orange-hover);
  border-color: var(--orange-hover);
  transform   : translateY(-2px);
  box-shadow  : 0 12px 36px rgba(249, 115, 22, 0.42);
}
.btn-primary:active { transform: translateY(0); }

/* Dark navy */
.btn-navy {
  background  : var(--navy);
  color       : var(--white);
  border-color: var(--navy);
}
.btn-navy:hover {
  background  : var(--navy-800);
  border-color: var(--navy-800);
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-navy);
}

/* Outline on dark BG */
.btn-outline-white {
  background  : transparent;
  color       : var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-outline-white:hover {
  background  : rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.65);
  transform   : translateY(-2px);
}

/* Outline on light BG */
.btn-outline {
  background  : transparent;
  color       : var(--navy);
  border-color: var(--border-medium);
}
.btn-outline:hover {
  background  : var(--navy);
  color       : var(--white);
  border-color: var(--navy);
  transform   : translateY(-2px);
}

/* Ghost text link */
.btn-ghost {
  background : transparent;
  color      : var(--orange);
  border     : none;
  padding    : 0;
  font-size  : 0.9rem;
  gap        : 6px;
}
.btn-ghost:hover { gap: 10px; }
.btn-ghost i { transition: transform 0.2s ease; }
.btn-ghost:hover i { transform: translateX(3px); }

/* Sizes */
.btn-lg { padding: 16px 32px; font-size: 0.98rem; }
.btn-sm { padding: 9px 18px;  font-size: 0.82rem; }
.btn-xs { padding: 7px 14px;  font-size: 0.78rem; }

.btn-icon {
  width        : 44px;
  height       : 44px;
  padding      : 0;
  border-radius: 50%;
}


/* ============================================================
   6. UTILITY & DECORATION
   ============================================================ */

/* Gradient text */
.highlight {
  background              : linear-gradient(135deg, var(--orange) 0%, #FB923C 100%);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
}

/* Tags / pills */
.tag {
  display      : inline-block;
  padding      : 4px 12px;
  border-radius: var(--radius-full);
  font-family  : var(--font-heading);
  font-size    : 0.72rem;
  font-weight  : 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag-orange { background: var(--orange-light); color: var(--orange); }
.tag-navy   { background: rgba(15,23,42,0.07);  color: var(--navy-700); }
.tag-white  { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.80); }

/* Separator line */
.divider {
  width     : 100%;
  height    : 1px;
  background: var(--border-light);
}

/* Orange underline accent on heading */
.has-underline { position: relative; display: inline-block; }
.has-underline::after {
  content      : '';
  position     : absolute;
  bottom       : -6px;
  left         : 0;
  width        : 60px;
  height       : 4px;
  background   : var(--orange);
  border-radius: var(--radius-full);
}

/* Screen reader only */
.sr-only {
  position   : absolute;
  width      : 1px;
  height     : 1px;
  padding    : 0;
  margin     : -1px;
  overflow   : hidden;
  clip       : rect(0,0,0,0);
  white-space: nowrap;
  border     : 0;
}

/* Focus ring */
:focus-visible {
  outline       : 2px solid var(--orange);
  outline-offset: 3px;
  border-radius : var(--radius-sm);
}

/* Text selection */
::selection { background: var(--orange-light); color: var(--navy); }

/* Page transition overlay (set initial opacity to 0 on load) */
body { animation: pageFade 0.4s ease both; }
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   7. LANGUAGE SWITCHER
   ============================================================ */

.lang-switcher {
  position : relative;
  display  : flex;
  align-items: center;
}

/* Toggle button */
.lang-switcher-btn {
  display     : flex;
  align-items : center;
  gap         : 5px;
  padding     : 6px 10px;
  background  : transparent;
  border      : 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor      : pointer;
  font-family : var(--font-body);
  font-size   : 0.78rem;
  font-weight : 600;
  color       : var(--text-primary);
  transition  : border-color var(--transition), background var(--transition), color var(--transition);
  white-space : nowrap;
  line-height : 1;
}

/* On dark navbar (homepage hero nav) */
.navbar:not(.light-nav) .lang-switcher-btn {
  color        : var(--text-inverse);
  border-color : var(--border-dark);
}
.navbar:not(.light-nav) .lang-switcher-btn:hover,
.navbar:not(.light-nav) .lang-switcher-btn:focus-visible {
  background  : rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}

.lang-switcher-btn:hover,
.lang-switcher-btn:focus-visible {
  border-color: var(--orange);
  background  : var(--orange-light);
  color       : var(--orange);
}

.lang-code { letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; }

/* Chevron rotates when open */
.lang-chevron {
  font-size  : 0.62rem;
  transition : transform 0.2s ease;
  color      : inherit;
}
.lang-dropdown.open ~ .lang-switcher-btn .lang-chevron,
.lang-switcher-btn[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.lang-dropdown {
  position    : absolute;
  top         : calc(100% + 8px);
  right       : 0;
  min-width   : 110px;
  background  : var(--bg-elevated);
  border      : 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow  : 0 8px 24px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.08);
  overflow    : hidden;
  opacity     : 0;
  transform   : translateY(-6px) scale(0.97);
  pointer-events: none;
  transition  : opacity 0.18s ease, transform 0.18s ease;
  z-index     : 9999;
}

.lang-dropdown.open {
  opacity       : 1;
  transform     : translateY(0) scale(1);
  pointer-events: auto;
}

/* Individual options */
.lang-option {
  display     : flex;
  align-items : center;
  gap         : 10px;
  width       : 100%;
  padding     : 10px 14px;
  background  : transparent;
  border      : none;
  cursor      : pointer;
  font-family : var(--font-body);
  font-size   : 0.85rem;
  font-weight : 500;
  color       : var(--text-secondary);
  text-align  : left;
  transition  : background var(--transition), color var(--transition);
}

.lang-option:hover {
  background: var(--bg-surface);
  color     : var(--text-primary);
}

.lang-option.active {
  color      : var(--orange);
  font-weight: 700;
  background : var(--orange-light);
}

/* Mobile menu language switcher */
.mobile-lang-row {
  display    : flex;
  gap        : 8px;
  padding    : 16px 0 4px;
  border-top : 1px solid var(--border-dark);
  margin-top : 8px;
}

.mobile-lang-btn {
  flex       : 1;
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 6px;
  padding    : 9px 12px;
  border     : 1.5px solid var(--border-dark);
  border-radius: var(--radius-md);
  background : transparent;
  color      : rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size  : 0.82rem;
  font-weight: 600;
  cursor     : pointer;
  transition : border-color var(--transition), background var(--transition), color var(--transition);
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  border-color: var(--orange);
  background  : var(--orange-light);
  color       : var(--orange);
}