/*
 * LuggageLens Theme — Brand System Stylesheet
 * Navy + Amber + White + Soft Gray
 *
 * Primary:    #0F172A  (Deep Navy)
 * Accent:     #F59E0B  (Amber Orange)
 * Accent Hover: #D97706 (Dark Amber)
 * Background: #F8FAFC  (Soft Gray)
 * Surface:    #FFFFFF  (White)
 * Text:       #1E293B  (Slate Text)
 * Muted:      #64748B  (Muted Gray)
 * Border:     #E2E8F0  (Soft Border)
 *
 * Fonts: Poppins (headings) + Inter (body)
 */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  --primary: #0F172A;
  --secondary: #1E293B;
  --accent: #F59E0B;
  --accent-hover: #D97706;
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --text: #1E293B;
  --muted: #64748B;
  --border: #E2E8F0;
  --white: #FFFFFF;
}

/* ── Base Typography ────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--primary);
}

/* ── Button System ──────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background-color: var(--accent);
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background-color: transparent;
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--background);
  border-color: var(--accent);
}

/* ── Card Styles ────────────────────────────────────────── */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.10);
}

/* ── Link Styles ─────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

/* ── Section Divider ─────────────────────────────────────── */
.section-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}


/* Extend homepage hero upward behind navbar */
#home-hero {
  min-height: calc(100vh + 82px) !important;
  margin-top: -82px !important;
  padding-top: 164px !important;
  padding-bottom: 7rem !important;
}

/* Keep hero text safe on mobile */
@media (max-width: 768px) {
  #home-hero {
    min-height: calc(100vh + 82px) !important;
    margin-top: -82px !important;
    padding-top: 140px !important;
    padding-bottom: 5rem !important;
  }
}

/* Keep navbar above hero */
#main-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}


/* ── Focus / Accessibility ──────────────────────────────── */
/* ── Focus / Accessibility ──────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Enforced Brand Rules ───────────────────────────────── */
/* 1. Hide search functionality */
#search-toggle,
#search-overlay,
#search-input,
.fa-search {
  display: none !important;
}

/* 2. White headings on dark hero sections */
section.bg-primary h1,
section[class*="bg-primary"] h1,
.page-hero h1,
.hero h1 {
  color: #FFFFFF !important;
}

/* 3. Force amber icons in category cards and remove random colors */
[class*="bg-emerald-"],
[class*="bg-green-"],
[class*="bg-teal-"],
[class*="bg-purple-"],
[class*="bg-pink-"],
[class*="bg-red-"],
[class*="bg-blue-"],
[class*="bg-cyan-"],
[class*="bg-violet-"],
[class*="bg-rose-"],
[class*="bg-indigo-"] {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

[class*="text-emerald-"],
[class*="text-green-"],
[class*="text-teal-"],
[class*="text-purple-"],
[class*="text-pink-"],
[class*="text-red-"],
[class*="text-blue-"],
[class*="text-cyan-"],
[class*="text-violet-"],
[class*="text-rose-"],
[class*="text-indigo-"] {
  color: #F59E0B !important;
}

[class*="border-emerald-"],
[class*="border-green-"],
[class*="border-teal-"],
[class*="border-purple-"],
[class*="border-pink-"],
[class*="border-red-"],
[class*="border-blue-"],
[class*="border-cyan-"],
[class*="border-violet-"],
[class*="border-rose-"],
[class*="border-indigo-"] {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.category-card i,
.review-category i,
.topic-card i,
.card-hover i,
.category-card i,
.review-category i,
.topic-card i,
.card-hover i,
.fa-suitcase,
.fa-suitcase-rolling,
.fa-briefcase,
.fa-layer-group,
.fa-feather,
.fa-tag,
.fa-lock,
.fa-bag-shopping,
.fa-scale-balanced,
.fa-link,
.fa-rotate,
.fa-sync,
.fa-envelope {
  color: #F59E0B !important;
}

.category-card .icon-box,
.review-category .icon-box,
.topic-card .icon-box,
.card-hover .icon-box,
.category-card div[class*="bg-"],
.review-category div[class*="bg-"],
.topic-card div[class*="bg-"] {
  background: rgba(245, 158, 11, 0.12) !important;
}

/* 4. Newsletter Section Brand Rules */
.newsletter-section {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

.newsletter-section h2,
.newsletter-section h3,
.newsletter-section p {
  color: #FFFFFF !important;
}

.newsletter-section button,
.newsletter-section .btn-primary {
  background: #F59E0B !important;
  color: #0F172A !important;
}

.newsletter-section button:hover,
.newsletter-section .btn-primary:hover {
  background: #D97706 !important;
}

/* 5. Enforce Font Usage */
body {
  font-family: 'Inter', sans-serif !important;
  color: #1E293B;
  background: #F8FAFC;
}

h1, h2, h3, h4,
nav a,
button,
.logo-text {
  font-family: 'Poppins', sans-serif !important;
}

/* 6. Navbar Strict Overrides */
body {
  padding-top: 82px !important;
}

#main-nav {
  background: #FFFFFF !important;
  min-height: 82px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

#main-nav img {
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

#main-nav a {
  font-family: 'Poppins', sans-serif !important;
}

/* Nav Link States */
#main-nav a.bg-accent\/10,
#main-nav a.active {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #F59E0B !important;
}

#main-nav a:hover {
  background: rgba(245, 158, 11, 0.10) !important;
  color: #F59E0B !important;
}