/**
 * Base styles for Noctua Forest
 * Standardizes typography and colors across all pages
 */

:root {
  /* Colors */
  --color-forest-deep: #fbebcc;
  --color-forest-card: #4A5450;
  --color-forest-text: #3A4440;
  --color-forest-text-muted: #7A8580;
  --color-forest-light: #E0E2DB;
  --color-forest-accent: #F58220;
  --color-forest-accent-hover: #E0751C;
  --color-forest-input: #3A4440;
  --color-forest-border: #7A8580;
  
  /* Typography */
  --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Noto Serif', 'Times New Roman', Georgia, serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Base styles */
body {
  font-family: var(--font-body);
  background-color: #fbebcc; /* match welcome */
  color: var(--color-forest-text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure main content expands and footer sticks to bottom */
main {
  flex: 1;
}

/* Responsive container to match welcome.html */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-display {
  font-family: var(--font-display);
}

/* Form elements */
input, select, textarea {
  background-color: var(--color-forest-input);
  border-color: var(--color-forest-border);
  color: var(--color-forest-light);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-forest-text-muted);
}

/* Focus states */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-forest-border);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* Brand colors */
.text-forest-accent {
  color: var(--color-forest-accent);
}

.bg-forest-accent {
  background-color: var(--color-forest-accent);
}

.hover\:text-forest-accent:hover {
  color: var(--color-forest-accent);
}

.hover\:bg-forest-accent:hover {
  background-color: var(--color-forest-accent-hover);
}

/* Dark sections */
.bg-forest-card {
  background-color: var(--color-forest-card);
  color: var(--color-forest-light);
}

.bg-forest-secondary {
  background-color: #5A6560;
}

.text-forest-text {
  color: var(--color-forest-text);
}

.text-forest-text-muted {
  color: var(--color-forest-text-muted);
}

.bg-forest-accent-hover {
  background-color: var(--color-forest-accent-hover);
}

.hover\:bg-forest-accent-hover:hover {
  background-color: var(--color-forest-accent-hover);
}

/* Text colors */
.text-forest-light {
  color: var(--color-forest-light);
}

.text-forest-muted {
  color: var(--color-forest-text-muted);
}

/* Breadcrumbs */
.breadcrumb {
  color: var(--color-forest-text-muted);
}

.breadcrumb-current {
  color: var(--color-forest-text);
  font-weight: 500;
}

/* Navigation */
.nav-link {
  color: var(--color-forest-text);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-forest-accent);
}

/* Logo text */
.logo-text {
  font-family: var(--font-display);
  color: var(--color-forest-text);
  font-weight: 700;
}

/* Mobile nav - only applies when nav is opened on mobile */
@media (max-width: 767px) {
  .mobile-nav-open {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    background-color: var(--color-forest-card) !important;
    color: var(--color-forest-light) !important;
    z-index: 1000; /* above overlay */
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem;
  }

  .mobile-nav-open a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    color: var(--color-forest-light) !important;
    width: 100%;
    margin-left: 0 !important; /* override Tailwind space-x on mobile */
  }
}