/* Sustainable Purchase Justification Matrix - Styles */
* { box-sizing: border-box; }
body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 margin: 0;
 padding: 0;
 line-height: 1.6;
 color: #333;
 background: #fff;
}
header {
 background: #2c5f2d;
 color: white;
 padding: 1rem;
 position: sticky;
 top: 0;
 z-index: 100;
}
.logo {
 font-size: 1.25rem;
 font-weight: 700;
 color: white;
 text-decoration: none;
 margin-right: 2rem;
}
.nav-links {
 list-style: none;
 display: flex;
 gap: 1.5rem;
 margin: 0;
 padding: 0;
}
.nav-links a {
 color: #e8f5e9;
 text-decoration: none;
 font-weight: 500;
}
.nav-links a:hover, .nav-links a:focus {
 text-decoration: underline;
}
main {
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem;
}
.hero {
 text-align: center;
 margin-bottom: 3rem;
}
.hero h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 color: #2c5f2d;
}
.hero p {
 font-size: 1.125rem;
 color: #555;
 margin-bottom: 1.5rem;
}
.score-display {
 font-size: 1.5rem;
 font-weight: 600;
 color: #2c5f2d;
}
.matrix-section, .examples-section, .printable-section, .why-this-matters {
 margin-bottom: 3rem;
}
.matrix-section h2,
.examples-section h2,
.printable-section h2,
.why-this-matters h2 {
 color: #2c5f2d;
 margin-bottom: 1rem;
}
.matrix-grid {
 display: grid;
 gap: 1.5rem;
}
.criteria-row {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}
.criteria-row label {
 font-weight: 600;
}
.criteria-row input[type="range"] {
 width: 100%;
}
.help-text {
 font-size: 0.875rem;
 color: #666;
 margin: 0;
}
.score-value {
 font-weight: 600;
 color: #2c5f2d;
}
.recommendation-section {
 background: #f1f8e9;
 padding: 1.5rem;
 border-radius: 8px;
 margin-top: 1.5rem;
}
.recommendation-box {
 margin-top: 1rem;
 padding: 1rem;
 background: white;
 border-radius: 4px;
 border-left: 4px solid #2c5f2d;
}
.actions-section {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.action-buttons {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}
.action-buttons button {
 padding: 0.75rem 1.5rem;
 border: none;
 border-radius: 4px;
 background: #2c5f2d;
 color: white;
 cursor: pointer;
 font-weight: 600;
}
.action-buttons button:hover, .action-buttons button:focus {
 background: #1e4a1a;
}
.feedback {
 padding: 0.75rem;
 background: #e8f5e9;
 border-radius: 4px;
 display: none;
}
.example-cards {
 display: grid;
 gap: 1.5rem;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.example-card {
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 padding: 1rem;
}
.example-card h4 {
 margin-top: 0;
 color: #2c5f2d;
}
.example-table {
 width: 100%;
 font-size: 0.875rem;
 margin-bottom: 0.5rem;
}
.example-table th, .example-table td {
 padding: 0.5rem;
 text-align: left;
}
.example-table td:first-child {
 font-weight: 500;
}
.example-note {
 font-size: 0.875rem;
 color: #666;
 margin: 0.5rem 0 0;
}
.printable-section pre {
 background: #f5f5f5;
 padding: 1rem;
 border-radius: 4px;
 overflow-x: auto;
}
.worksheet-template {
 background: #f5f5f5;
 padding: 1rem;
 border-radius: 4px;
 overflow-x: auto;
 font-family: monospace;
 font-size: 0.875rem;
}
.why-this-matters p {
 margin-bottom: 1rem;
}
footer {
 background: #f5f5f5;
 padding: 1.5rem;
 text-align: center;
 border-top: 1px solid #e0e0e0;
}
footer a {
 color: #2c5f2d;
 text-decoration: none;
}
footer a:hover {
 text-decoration: underline;
}
@media (max-width: 768px) {
.hero h1 {
 font-size: 2rem;
}
.main {
 padding: 1rem;
}
.nav-links {
 flex-direction: column;
 gap: 1rem;
}
.action-buttons {
 flex-direction: column;
}
.example-cards {
 grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero h1 {
 font-size: 1.75rem;
}
.main {
 padding: 0.75rem;
}
}
.hidden {
 display: none;
}
/* Ad slot placeholder styles */
#ad-slot-720x120 {
 min-height: 120px;
 min-width: 720px;
 background: #f5f5f5;
 border: 1px dashed #ccc;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #999;
 font-size: 0.875rem;
}
@media (max-width: 768px) {
#ad-slot-720x120 {
 min-width: 300px;
 min-height: 250px;
}
}
@media (max-width: 480px) {
#ad-slot-720x120 {
 min-width: 320px;
 min-height: 50px;
}
}
/* Print styles */
@media print {
header, .action-buttons, .printable-section { display: none; }
main { padding: 0; }
.hero h1 { font-size: 24pt; }
.hero p { font-size: 12pt; }
}


/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}