/*
Theme Name:   Flatsome Child
Description:  Child theme for Flatsome – VietnamVisa project
Template:     flatsome
Version:      2.0.0
*/

/* =============================================
   TAILWIND V4 VARIABLE FALLBACKS
   @layer theme has lower priority than Flatsome’s unlayered CSS.
   Redefine critical variables here so they cascade correctly.
   ============================================= */
:root {
  /* Spacing base (Tailwind v4 uses calc(var(--spacing) * N)) */
  --spacing: 0.25rem;

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Container sizes */
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* Border radius */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
}

/* =============================================
   CSS VARIABLES – copied from original Next.js app
   ============================================= */
:root {
  --color-primary: #d97706;
  --color-primary-light: #f59e0b;
  --color-primary-subtle: rgba(217,119,6,0.08);
  --color-secondary: #0f766e;
  --color-secondary-light: #14b8a6;
  --color-secondary-subtle: rgba(15,118,110,0.08);

  --color-bg: #faf8f5;
  --color-surface-1: #ffffff;
  --color-surface-2: #f5f1eb;
  --color-surface-3: #ece6dc;
  --color-surface-base: #faf8f5;
  --color-surface-elevated: #ffffff;
  --color-surface-glass: rgba(250,248,245,0.85);

  --color-text-primary: #1c1917;
  --color-text-secondary: #44403c;
  --color-text-tertiary: #a8a29e;
  --color-text-muted: #78716c;
  --color-text-inverse: #ffffff;
  --color-text-link: #d97706;

  --color-border: #e7e5e4;
  --color-border-default: #e7e5e4;
  --color-border-strong: #d6d3d1;
  --color-border-focus: #d97706;

  /* Match original Next.js app: headings & body both use Inter.
     (Cormorant Garamond chỉ dùng khi element chỉ định trực tiếp) */
  --font-family-heading: var(--font-inter, 'Inter'), 'Inter', system-ui, sans-serif;
  --font-family-body: var(--font-inter, 'Inter'), 'Inter', system-ui, sans-serif;
  --font-family-mono: var(--font-jetbrains, 'JetBrains Mono'), 'JetBrains Mono', monospace;

  --shadow-glow-primary: 0 0 20px rgba(217,119,6,0.35);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --duration-fast: 150ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-wide: 1280px;
  --header-total-height: 112px; /* topbar 40px + header 72px */
}

html.dark {
  --color-bg: #0c0b0a;
  --color-surface-1: #1c1917;
  --color-surface-2: #1c1917;
  --color-surface-3: #292524;
  --color-surface-glass: rgba(12,11,10,0.85);
  --color-text-primary: #fafaf9;
  --color-text-secondary: #d6d3d1;
  --color-text-muted: #78716c;
  --color-border: #292524;
  --color-border-strong: #44403c;
}

/* =============================================
   WORDPRESS / FLATSOME COMPATIBILITY RESETS
   ============================================= */
/* Đảm bảo custom pages không bị Flatsome container cắt */
.vv-custom-page {
  width: 100%;
  max-width: 100%;
}

/* Ẩn Flatsome page title nếu custom template */
.page-template-templates-tpl-homepage .page-title,
.page-template-templates-tpl-homepage .entry-title,
[class*="page-template-templates-tpl"] .page-title,
[class*="page-template-templates-tpl"] .entry-title {
  display: none !important;
}

/* Remove default WP padding từ custom pages */
[class*="page-template-templates-tpl"] .page-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
body {
  font-family: var(--font-family-body) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100svh !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.section-title {
  font-family: var(--font-family-heading) !important;
}

/* Component typography from Next.js app */
.section-title {
  font-family: var(--font-family-body) !important;
  font-size: var(--text-4xl) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-weight-extrabold) !important;
  color: var(--color-text-primary) !important;
}
@media (min-width: 768px) {
  .section-title {
    font-size: var(--text-5xl) !important;
  }
}

.section-subtitle {
  font-family: var(--font-family-body) !important;
  font-size: var(--text-xl) !important;
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-primary) !important;
}
@media (min-width: 768px) {
  .section-subtitle {
    font-size: var(--text-2xl) !important;
  }
}

.section-desc {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
}

.section-label {
  font-family: var(--font-family-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--color-text-muted) !important;
}

.body-text-sm {
  font-size: var(--text-sm) !important;
  line-height: 1.65 !important;
  color: var(--color-text-secondary) !important;
}

.caption-text {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  color: var(--color-text-muted) !important;
}

/* Font family shorthand classes */
.font-body {
  font-family: var(--font-family-body) !important;
}
.font-family-heading,
[style*="font-family:var(--font-family-heading)"],
.font-\[family-name\:var\(--font-family-heading\)\] {
  /* Bản gốc: --font-family-heading = Inter (không phải Cormorant) */
  font-family: var(--font-family-heading) !important;
}

/* Heading font sizes */
.text-4xl { font-size: var(--text-4xl) !important; }
.text-5xl { font-size: var(--text-5xl) !important; }
.text-6xl { font-size: var(--text-6xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-xl  { font-size: var(--text-xl)  !important; }
.text-lg  { font-size: var(--text-lg)  !important; }
.text-base { font-size: var(--text-base) !important; }
.text-sm  { font-size: var(--text-sm)  !important; }
.text-xs  { font-size: var(--text-xs)  !important; }

/* Font weights */
.font-bold      { font-weight: 700 !important; }
.font-semibold  { font-weight: 600 !important; }
.font-medium    { font-weight: 500 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-normal    { font-weight: 400 !important; }
.font-light     { font-weight: 300 !important; }

/* Tracking */
.tracking-tight  { letter-spacing: -0.025em !important; }
.tracking-wide   { letter-spacing: 0.025em !important; }
.tracking-wider  { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Leading */
.leading-tight   { line-height: 1.25 !important; }
.leading-snug    { line-height: 1.375 !important; }
.leading-normal  { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose   { line-height: 2 !important; }

/* =============================================
   HERO SECTION
   ============================================= */
#hero {
  min-height: 100svh;
}

/* =============================================
   REVEAL ANIMATIONS
   Trong WordPress không có SSR nên bắt đầu visible, animation chỉ là bonus.
   Also override inline style="opacity:0" from Next.js SSR snapshots.
   ============================================= */
.reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

/* Override inline opacity:0 from Next.js SSR — make all content visible */
[style*="opacity:0"],
[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Nếu JS đã chạy đầy đủ: duy trì animation đẹp bằng class js-loaded trên html */
html.js-reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-reveal-ready .reveal-on-scroll.reveal-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary,
button[data-ai-element="btn-apply-header"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-family-heading);
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) ease;
}

.btn-primary:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-glow-primary);
}

/* =============================================
   NATIONALITY SELECTOR WIDGET
   ============================================= */
.vv-selector-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* =============================================
   SCROLLBAR
   ============================================= */
.select-no-scrollbar::-webkit-scrollbar { display: none; }
.select-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =============================================
   READY-TO-APPLY SECTION
   ============================================= */
.ready-apply {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

/* =============================================
   FLATSOME HEADER OVERRIDE
   Đảm bảo header Flatsome không đè lên hero
   ============================================= */
.has-transparent-header #hero,
.has-transparent-header [id="hero"] {
  padding-top: 0;
}

/* =============================================
   DARK MODE BACKGROUND
   ============================================= */
html.dark body,
html.dark .vv-custom-page {
  background-color: var(--color-bg);
}

/* =============================================
   WORDPRESS ADMIN BAR OFFSET FOR FIXED HEADER
   ============================================= */
body.admin-bar .fixed-header-wrap {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .fixed-header-wrap {
    top: 46px;
  }
}
@media (max-width: 600px) {
  body.admin-bar .fixed-header-wrap {
    top: 0;
  }
}

/* =============================================
   CUSTOM DESKTOP NAVIGATION HOVER DROPDOWN
   ============================================= */
.relative.group:hover .absolute.group-hover\:block {
  display: block !important;
}


/* =============================================
   FLATSOME WRAPPER TRANSPARENT RESET
   Allows body background radial gradients to show through
   ============================================= */
#wrapper,
#main,
.page-content,
.main-inner {
  background-color: transparent !important;
}


/* =============================================
   PREVENT HEADER MENU ITEMS FROM WRAPPING
   ============================================= */
header nav[aria-label="Main navigation"] a {
  white-space: nowrap !important;
}


/* =============================================
   FLATSOME SECTION RESET FOR UNIFIED NEXT.JS BACKGROUND
   ============================================= */
.section,
.section-bg {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
}


/* =============================================
   FLATSOME ROW WIDTH OVERRIDE FOR CUSTOM PAGES
   Allows rows to expand to 1280px to match Next.js desktop spacing
   ============================================= */
[class*="page-template-templates-tpl"] .row {
  max-width: var(--container-wide) !important;
}

/* =============================================
   FLATSOME SECTION CONTENT — FULL-WIDTH WRAPPER, CONTAINED INNER
   Flatsome's .section-content has max-width:1200px mặc định.
   Ta mở rộng section-content ra full-width (cho background),
   nhưng đảm bảo nội dung bên trong giữ container 1280px.
   ============================================= */
[class*="page-template-templates-tpl"] .section-content,
[class*="page-template-templates-tpl"] .section > .section-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Flatsome .section thêm padding mặc định — xóa cho custom templates */
[class*="page-template-templates-tpl"] .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Explicit container constraints — Tailwind v4 variables may not
   cascade through Flatsome’s stylesheet layers, so define fallbacks */
.max-w-7xl {
  max-width: 1280px !important;
}
.max-w-5xl {
  max-width: 1024px !important;
}
.max-w-3xl {
  max-width: 768px !important;
}
.max-w-2xl {
  max-width: 672px !important;
}
.max-w-xl {
  max-width: 576px !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =============================================
   HIDE NATIONALITY FLAGS SECTION (React interactive component
   renders all 150+ country flags statically without JS)
   ============================================= */
section#nationalities,
[id="nationalities"] {
  display: none !important;
}

/* =============================================
   PROCESS STEP NUMBERS AND AMBER COLOR CONFLICT OVERRIDES
   ============================================= */
.bg-amber-50 {
  background-color: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
}


/* =============================================
   RESPONSIVE LAYOUT AND BREAKPOINT HELPER RESETS
   Force override Flatsome + Next.js CSS (loaded sau wp_head)
   ============================================= */
@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
    visibility: visible !important;
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:block {
    display: block !important;
    visibility: visible !important;
  }
  .md\:inline {
    display: inline !important;
    visibility: visible !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
    visibility: visible !important;
  }
  .md\:grid {
    display: grid !important;
    visibility: visible !important;
  }
  /* Header nav đặc biệt — force show trên desktop */
  nav[aria-label="Main navigation"] {
    display: flex !important;
    visibility: visible !important;
  }
  /* Topbar (hidden md:block) */
  .fixed.top-0 > div:first-child {
    display: block !important;
    visibility: visible !important;
  }
  /* Header action buttons */
  header > div > div.hidden {
    display: flex !important;
    visibility: visible !important;
  }
}

@media (max-width: 767px) {
  .md\:hidden {
    display: flex !important;
  }
  /* Ẩn nav desktop trên mobile */
  nav[aria-label="Main navigation"] {
    display: none !important;
  }
}

/* =============================================
   TAILWIND RESPONSIVE BREAKPOINT FORCE-OVERRIDES
   Flatsome có .hidden { display:none !important } → cần !important để override
   sm: = ≥640px  |  md: = ≥768px  |  lg: = ≥1024px  |  xl: = ≥1280px
   ============================================= */
@media (min-width: 640px) {
  .sm\:block   { display: block   !important; visibility: visible !important; }
  .sm\:flex    { display: flex    !important; visibility: visible !important; }
  .sm\:inline  { display: inline  !important; visibility: visible !important; }
  .sm\:hidden  { display: none    !important; }
  .sm\:grid    { display: grid    !important; visibility: visible !important; }
  .sm\:inline-flex { display: inline-flex !important; visibility: visible !important; }
}
@media (min-width: 1024px) {
  .lg\:block   { display: block   !important; visibility: visible !important; }
  .lg\:flex    { display: flex    !important; visibility: visible !important; }
  .lg\:hidden  { display: none    !important; }
  .lg\:inline  { display: inline  !important; visibility: visible !important; }
  .lg\:grid    { display: grid    !important; visibility: visible !important; }
  .lg\:inline-flex { display: inline-flex !important; visibility: visible !important; }
}
@media (min-width: 1280px) {
  .xl\:block   { display: block   !important; visibility: visible !important; }
  .xl\:flex    { display: flex    !important; visibility: visible !important; }
  .xl\:hidden  { display: none    !important; }
  .xl\:inline  { display: inline  !important; visibility: visible !important; }
  .xl\:inline-flex { display: inline-flex !important; visibility: visible !important; }
}

/* Hero background img: force visible trên desktop */
#hero > img,
#hero > .hero-bg-img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =============================================
   NEXT.JS IMAGE COMPATIBILITY FIX
   Next.js CSS set img[data-nimg] { visibility:hidden } để quản lý
   lazy load. Vì ta đã xóa Next.js JS runtime, cần override về visible.
   ============================================= */
img[data-nimg],
img[data-nimg="1"],
img[data-nimg="fill"] {
  visibility: visible !important;
}