:root {
  --primary-blue: #2C3E50;
  --primary-blue-dark: #1A252F;
  --accent-orange: #F39C12;
  --accent-orange-dark: #E67E22;
  --light-grey: #F8F9FA;
  --medium-grey: #6C757D;
  --dark-grey: #495057;
  --white: #FFFFFF;
  --border-light: #E9ECEF;
  --success-green: #28A745;
  --error-red: #DC3545;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);

  --body-bg: #F8F9FA;
  --card-bg: #FFFFFF;
  --input-bg: #FFFFFF;
  --text-primary: #2C3E50;
  --text-secondary: #6C757D;
  --hero-bg-start: #2C3E50;
  --hero-bg-end: #1A252F;
  --footer-bg: #1A252F;
}

/* Dark mode could be added here in the future */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--body-bg);
  color: var(--text-primary);
  line-height: 1.6;
}
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px 20px 20px;
}

.header {
  background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
  color: var(--white);
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 12px;
  margin-bottom: 2rem;
}
#stateH1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
#stateH1 .accent { color: var(--accent-orange); }
#stateTagline { font-size: 1.1rem; opacity: 0.9; }

.topbar {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
.popular-states-label, .other-states-label { font-size: 1rem; color: var(--text-secondary); margin-bottom: 12px; font-weight: 600; }
.popular-states { display: flex; flex-wrap: wrap; gap: 10px; }
.popular-state {
    padding: 0.6rem 1.2rem; background: var(--primary-blue); color: var(--white); text-decoration: none;
    border-radius: 25px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease;
}
.popular-state:hover { background: var(--primary-blue-dark); transform: translateY(-1px); }
.popular-state.active { background: var(--accent-orange); }
.popular-state.active:hover { background: var(--accent-orange-dark); }
.dropdown-container { position: relative; width: 100%; max-width: 400px; margin-top: 1rem; }
.dropdown-select {
    width: 100%; padding: 0.8rem 1rem; font-size: 1rem; border: 2px solid var(--border-light);
    border-radius: 8px; background: var(--input-bg); cursor: pointer; appearance: none;
    color: var(--text-primary); font-weight: 500;
}
.dropdown-container::after { content: '▼'; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); }

.calculator-form {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 2rem;
}
.input-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 576px) { .input-row { grid-template-columns: 1fr 1fr; } }
.input-group label { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); font-size: 0.9rem; }
.input-group input, .input-group select {
    width: 100%; padding: 0.8rem 1rem; border: 2px solid var(--border-light); border-radius: 6px; font-size: 1rem;
    background: var(--input-bg); color: var(--text-primary);
}
.input-group input:focus, .input-group select:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1); }
.note { font-size: 0.8rem; color: var(--text-secondary); margin-top: 5px; }
.state-specific { display: none; }

.calculate-btn {
    width: 100%; padding: 1rem 2rem; background: var(--accent-orange); color: var(--white); border: none;
    border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 1rem;
}
.calculate-btn:hover { background: var(--accent-orange-dark); transform: translateY(-1px); }

.results {
    background: var(--light-grey); border-radius: 8px; padding: 1.5rem; margin-top: 2rem;
    border: 1px solid var(--border-light); display: none;
}
.result-item { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px solid var(--border-light); }
.result-item:last-child { border-bottom: none; }
.result-label { font-weight: 500; color: var(--text-secondary); }
.result-value { font-weight: 600; color: var(--text-primary); }
.final-result { background: var(--primary-blue); color: var(--white); border-radius: 6px; padding: 1rem; margin-top: 1rem; }
.final-result .result-label, .final-result .result-value { color: var(--white); }
.result-note { background: rgba(243, 156, 18, 0.1); border-left: 3px solid var(--accent-orange); padding: 0.8rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-primary); }
.error { background: rgba(220, 53, 69, 0.1); color: var(--error-red); padding: 1rem; border-radius: 6px; border-left: 3px solid var(--error-red); }

.disclaimer, .sources, #state-content-container, .founder-card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-top: 2rem;
}
.disclaimer h3, .sources h3, .founder-card h3 { font-size: 1.25rem; color: var(--primary-blue); margin-bottom: 1rem; }
.sources a { display: block; margin-bottom: 0.5rem; color: var(--accent-orange); text-decoration: none; font-weight: 500; }
.sources a:hover { text-decoration: underline; }

#state-content-container h2, #state-content-container h3, #state-content-container h4 { margin-top: 1.5em; margin-bottom: 0.5em; color: var(--primary-blue); }

.footer-container {
  text-align: center; padding: 2rem; background: var(--footer-bg); color: var(--light-grey);
  margin-top: 2rem; border-radius: 12px;
}
.footer-links a { color: var(--accent-orange); text-decoration: none; margin: 0 0.5rem; }
.footer-links a:hover { text-decoration: underline; }
.footer-promo { font-size: 0.9rem; color: var(--medium-grey); margin-top: 1rem; }