/* Add this at the top of web/theme.css to enforce Poppins globally */
html, body, button, input, select, textarea, a, span, p, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
}

/* --- 1. SHADCN TOKENS (LIGHT MODE DEFAULT) --- */
/* Mapped exactly to CaseColors Light Mode Tokens */
:root {
  --background: #ffffff; /* lightBackground */
  --foreground: #09090b; /* lightTextMain */

  --primary: #ebbc80; /* CaseColors.primary */
  --primary-foreground: #fafafa; /* primaryForegroundLight */
  --primary-hover: #99733d; /* primaryDark */

  --secondary: #f4f4f5; /* lightSurface */
  --secondary-foreground: #09090b; /* lightTextMain */

  --muted: #f4f4f5;
  --muted-foreground: #71717a; /* lightTextMuted */

  --border: #e1c59a; /* lightBorder */
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;

  --card: #ffffff;
  --card-foreground: #09090b;

  --radius: 1.0rem;
  --pill-radius: 9999px;

  color: var(--foreground);
  background-color: var(--background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- 2. DARK MODE OVERRIDES (AUTOMATIC) --- */
/* Mapped exactly to CaseColors Dark Mode Tokens */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #09090b; /* darkBackground */
    --foreground: #fafafa; /* darkTextMain */

    --primary: #ebbc80; /* CaseColors.primary */
    --primary-foreground: #09090b; /* primaryForegroundDark */
    --primary-hover: #99733d; /* primaryDark */

    --secondary: #27272a; /* Lighter slate gray to contrast against dark card */
    --secondary-foreground: #fafafa; /* darkTextMain */

    --muted: #27272a; /* Lighter slate gray to contrast against dark card */
    --muted-foreground: #a1a1aa; /* darkTextMuted */

    --border: #5c4727; /* darkBorder */
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;

    --card: #18181b; /* Keeps the actual card background dark */
    --card-foreground: #fafafa;
  }
}

/* --- 3. COMPONENT STYLES: CASE BUTTON --- */
.case-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--pill-radius); /* Matches CaseRadius.pillRadius */
  font-weight: 700; /* bold */
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.case-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Heights map to _buttonHeight and _smallButtonHeight */
.case-btn-default { height: 42px; padding: 0 16px; font-size: 0.875rem; }
.case-btn-small { height: 32px; padding: 0 12px; font-size: 0.75rem; }

/* Primary: baseColor = primary, itemColor = primaryForeground */
.case-btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.case-btn-primary:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

/* Secondary: baseColor = secondary, itemColor = foreground */
.case-btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
.case-btn-secondary:hover:not(:disabled) {
  opacity: 0.8;
}

/* Outline: baseColor = transparent, itemColor = foreground, border = border */
.case-btn-outline {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}
.case-btn-outline:hover:not(:disabled) {
  background-color: var(--secondary);
}

/* Destructive: baseColor = destructive, itemColor = destructiveForeground */
.case-btn-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}
.case-btn-destructive:hover:not(:disabled) {
  opacity: 0.9;
}

/* --- 4. TYPOGRAPHY EXTENSIONS --- */
.text-bold { font-weight: 700; }
.text-muted { color: var(--muted-foreground); }
.text-large { font-size: 1.5rem; font-weight: 800; }
.text-small { font-size: 0.875rem; }
.text-smallest { font-size: 0.65rem; }
.tighter { letter-spacing: -0.05em; }
.loose { letter-spacing: 0.1em; }

/* Mobile Navbar Responsive Rules */
@media (max-width: 768px) {
  .desktop-nav, .desktop-actions { display: none !important; }
  .mobile-toggle { display: flex !important; }
}

@media (min-width: 769px) {
  .mobile-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}

/* --- HERO SECTION RESPONSIVE RULES --- */
.hero-title {
  /* Fluid typography: 2.5rem on mobile, up to 4.5rem on desktop */
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1.1;
  margin: 0;
}

.hero-buttons {
  display: flex;
  width: 100%;
  gap: 16px;
  margin-top: 16px;
}

/* Mobile View: Stack buttons, center text, and horizontal padding */
@media (max-width: 768px) {
  .hero-left-column {
    align-items: center !important;
    text-align: center !important;
  }
  .hero-title {
    text-align: center !important; /* Forces the main h1 text to center */
  }
  .hero-bullet {
    text-align: left !important; /* Keeps the bullets readable on the left */
  }
  .hero-buttons {
    flex-direction: column !important; /* Stacks them vertically */
  }
  .hero-buttons > * {
    width: 90% !important; /* Reduces width to create horizontal padding */
    margin: 0 auto; /* Centers the 90% width button perfectly */
    justify-content: center !important; /* Centers the text inside the button */
  }
}

/* Desktop View: Side-by-side, expanded equally, align left */
@media (min-width: 769px) {
  .hero-left-column {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero-title {
    text-align: left !important; /* Keeps it left-aligned cleanly on desktop */
  }
  .hero-buttons {
    flex-direction: row !important; /* Keeps them on the same line */
  }
  .hero-buttons > * {
    flex: 1 !important; /* Forces the buttons to expand and share the row space equally */
    margin: 0; /* Resets the margin from mobile */
    justify-content: center !important; /* Keeps the text/icon perfectly centered when expanded */
  }
}

/* --- ABOUT SECTION RESPONSIVE RULES --- */
.about-title {
  /* Fluid typography: 2.5rem on mobile, up to 3.5rem on desktop */
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
}

/* Centers the About copy text on Mobile */
@media (max-width: 768px) {
  .about-left-column {
    align-items: center !important;
    text-align: center !important;
  }
  .mission-card {
    text-align: left !important; /* Forces the cards inside to remain left-aligned for readability */
  }
}

/* Keeps About copy aligned to the left on Desktop */
@media (min-width: 769px) {
  .about-left-column {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

.about-image-wrapper {
  position: relative;
  width: 100%;
}

.about-overlap-card {
  position: relative;
  width: 90%;
  margin: -40px auto 0 auto; /* Pulls the card up slightly over the image on mobile */
  z-index: 10;
}

@media (min-width: 768px) {
  .about-image-wrapper {
    padding-bottom: 40px;
    padding-left: 40px;
  }
  .about-overlap-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 320px;
    margin: 0;
  }
}

/* Gives the story cards a subtle lift when hovered */
.story-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* FAQ Accordion Styles */
.faq-item summary::-webkit-details-marker {
  display: none; /* Hides default triangle in Safari/Chrome */
}
.faq-item summary {
  list-style: none; /* Hides default triangle in Firefox */
}
.faq-icon {
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg); /* Flips the chevron pointing up when open */
}

/* Footer Responsive & Hover Rules */
.footer-links-grid {
  display: grid;
  /* Protects against horizontal overflow on tiny screens */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 40px;
  flex: 2 1 400px;
}

.footer-bottom {
  display: flex;
  flex-direction: column; /* Stacks on mobile */
  align-items: center;
  text-align: center;
  gap: 16px;
}

.social-icon-btn {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.social-icon-btn:hover {
  background-color: var(--primary);
  transform: translateY(-4px); /* Slight lift on hover */
}
.social-icon-btn:hover i {
  color: #09090B !important; /* Dark icon for high contrast against the gold background */
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row; /* Side-by-side on desktop */
    justify-content: space-between;
    text-align: left;
  }
}