/* style.css — Chinese ink painting aesthetic */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600&display=swap');

body {
    background: #EDE5D8;  /* Warm rice paper */
    color: #2A2418;
    font-family: 'Noto Serif SC', 'Georgia', serif;
    line-height: 1.8;
    margin: 0;
    padding: 20px;
}

h1, h2, h3 {
    color: #2A2418;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.15em;
}

h1 {
    border-bottom: 1px solid #C64531;  /* Cinnabar red underline */
    padding-bottom: 12px;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation */
nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    padding: 10px 0;
}

nav a {
    color: #5C4B37;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover {
    color: #C64531;  /* Turns red like a seal stamp */
}

/* Buttons */
button.login-button, button.signup-button {
    background: none;
    border: 1px solid #8B7A64;
    color: #5C4B37;
    padding: 6px 18px;
    font-family: 'Noto Serif SC', serif;
    cursor: pointer;
    transition: all 0.3s;
}

button.login-button:hover, button.signup-button:hover {
    border-color: #C64531;
    color: #C64531;
}

button.login-button, button.signup-button, span.user-info {
    margin-left: auto;
}



/* Modal overlay */
.form-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(42, 36, 24, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal content */
.form-popup-content {
    background-color: #EDE5D8;
    padding: 35px;
    border: 1px solid #C64531;
    width: 320px;
    max-width: 90%;
}

.form-popup-content h1 {
    border-bottom: none;
    margin-top: 0;
}

/* Form */
.form-container {
    display: flex;
    flex-direction: column;
}

.form-container label {
    color: #5C4B37;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.form-container input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #B8AA97;
    padding: 8px;
    margin-bottom: 20px;
    font-family: inherit;
    color: #2A2418;
}

.form-container input:focus {
    outline: none;
    border-bottom-color: #C64531;
}

/* Modal buttons */
.form-container .btn {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    font-family: 'Noto Serif SC', serif;
}

.form-container .btn[type="submit"] {
    background-color: #C64531;
    color: #EDE5D8;
}

.form-container .btn[type="submit"]:hover {
    background-color: #A83524;
}

.form-container .cancel {
    background: transparent;
    border: 1px solid #B8AA97;
    color: #5C4B37;
}

.form-container .cancel:hover {
    border-color: #C64531;
    color: #C64531;
}


.select-dropdown {
  padding: 0rem 0.5rem;
  border: 1.5px solid #C64531;
  border-radius: 2px;
  background-color: #ffffff;
  font-family: inherit;
}
.field-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}


/* Climate explorer — matches the site's Chinese ink-painting theme */
.climate-page {
  --green: #72866B;
  --green-light: rgba(114, 134, 107, 0.12);
  --blue: #668C98;
  --blue-light: rgba(102, 140, 152, 0.12);
  --orange: #C64531;
  --orange-light: rgba(198, 69, 49, 0.08);
  --ink: #2A2418;
  --muted: #756A59;
  --line: #C9BCA9;
  --paper: #EDE5D8;
  max-width: 1450px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  color: var(--ink);
}
.climate-page * { box-sizing: border-box; }
.climate-page h1, .climate-page h2, .climate-page h3 {
  color: var(--ink);
  text-align: left;
  letter-spacing: .04em;
}
.climate-heading {
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap; margin-bottom:24px;
}
.climate-heading h1 { margin:0 0 7px; font-size:clamp(25px,3vw,36px); }
.climate-heading p, .climate-muted { margin:0; color:var(--muted); line-height:1.7; }
.climate-page select, .climate-page button { font:inherit; }
.climate-select {
  border:1px solid #B8AA97; border-radius:2px; padding:9px 12px;
  background:rgba(255,255,255,.35); color:var(--ink);
}
.climate-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.summary-card { border:1px solid var(--line); border-top:2px solid #8B7A64; padding:22px; min-width:0; background:rgba(255,255,255,.2); }
.summary-water { border-top-color:var(--blue); }
.summary-carbon { border-top-color:var(--orange); }
.summary-change { border-top-color:var(--green); }
.summary-label { color:var(--muted); font-size:13px; margin-bottom:10px; }
.summary-number { font-size:clamp(25px,3vw,35px); line-height:1.25; font-weight:400; overflow-wrap:anywhere; }
.summary-unit { margin-top:5px; font-size:13px; color:var(--muted); }
.summary-water .summary-number { color:#496F7A; }
.summary-carbon .summary-number { color:var(--orange); }
.summary-change .summary-number { color:#596D50; }
.climate-panel { border:1px solid var(--line); background:rgba(255,255,255,.2); padding:20px; }
.climate-slider-panel { margin-bottom:20px; }
.slider-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.slider-heading h2, .food-list-heading h2, .detail-panel h2 { margin:0; font-size:17px; }
#veganDaysLabel { color:#596D50; font-weight:600; }
#veganDays { width:100%; accent-color:var(--orange); cursor:pointer; }
.slider-ticks { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:9px; }
.slider-note { margin:15px 0 0; font-size:12px; line-height:1.7; color:var(--muted); }
.climate-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr); gap:20px; align-items:start; }
.food-list-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.climate-controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.mode-button { border:1px solid #B8AA97; background:transparent; color:#5C4B37; padding:8px 15px; cursor:pointer; transition:background .2s,color .2s; }
.mode-button:hover, .mode-button.active { border-color:var(--orange); color:var(--orange); }
.mode-button.active { background:rgba(198,69,49,.07); }
.sort-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.food-header, .food-row { display:grid; grid-template-columns:minmax(100px,1.15fr) minmax(65px,.65fr) minmax(90px,1fr) minmax(85px,.85fr); gap:12px; align-items:center; }
.food-header { padding:0 10px 12px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--line); }
.food-header span { line-height:1.5; }
.food-row { padding:12px 10px; border-bottom:1px solid #D9D0C2; cursor:pointer; transition:background .2s; }
.food-row:hover, .food-row.selected { background:rgba(198,69,49,.06); }
.food-row:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.food-name { font-size:13px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
.food-amount, .bar-value { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.impact-bar { height:9px; background:#D8D0C4; overflow:hidden; display:flex; min-width:0; }
.impact-bar.water-bar { background:#D8D0C4; }
.impact-bar.carbon-bar { background:rgba(198,69,49,.1); }
.impact-segment { height:100%; transition:width .3s ease; }
.green-segment { background:#72866B; } .blue-segment { background:#668C98; }
.grey-segment { background:#AAA49B; } .carbon-segment { background:var(--orange); }
.water-cell, .carbon-cell { display:flex; align-items:center; gap:8px; min-width:0; }
.water-cell .impact-bar, .carbon-cell .impact-bar { flex:1; }
.bar-value { min-width:34px; text-align:right; }
.mode-water .carbon-column, .mode-water .carbon-header { display:none; }
.mode-water .food-header, .mode-water .food-row { grid-template-columns:minmax(110px,1.4fr) minmax(65px,.7fr) minmax(100px,1fr); }
.mode-carbon .water-column, .mode-carbon .water-header { display:none; }
.mode-carbon .food-header, .mode-carbon .food-row { grid-template-columns:minmax(110px,1.4fr) minmax(65px,.7fr) minmax(100px,1fr); }
.detail-panel { position:sticky; top:20px; }
.detail-top { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:18px; }
.detail-subtitle { font-size:13px; color:var(--muted); margin-top:6px; }
.detail-close { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:22px; line-height:1; padding:2px 5px; }
.detail-section { padding:17px 0; border-top:1px solid var(--line); }
.detail-section h3, .change-box h3 { font-size:13px; margin:0 0 13px; }
.detail-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.detail-metric { padding:12px; border:1px solid #D9D0C2; background:rgba(255,255,255,.18); min-width:0; }
.detail-metric span { display:block; font-size:11px; color:var(--muted); margin-bottom:7px; }
.detail-metric strong { font-size:19px; font-weight:400; overflow-wrap:anywhere; }
.detail-metric small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.water-breakdown { height:13px; display:flex; overflow:hidden; background:#D8D0C4; margin:12px 0; }
.water-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:11px; }
.legend-label { color:var(--muted); margin-bottom:5px; } .legend-value { font-weight:600; }
.detail-impact { font-size:22px; font-weight:600; margin:8px 0; }
.change-box { background:var(--green-light); border:1px solid #C9BCA9; padding:15px; }
.change-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.change-values strong { display:block; font-size:17px; color:#596D50; font-weight:600; }
.change-values span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.empty-state { padding:35px 10px; text-align:center; color:var(--muted); }
.climate-error { background:rgba(198,69,49,.1); color:#8b3026; padding:16px; border:1px solid #C64531; }
.national-figure { border:1px solid #B8AA97; padding:clamp(18px,3vw,32px); margin-top:36px; background:rgba(255,255,255,.2); }
.national-figure-header { max-width:760px; margin-bottom:26px; }
.national-figure-header h2 { font-size:clamp(1.3rem,3vw,2rem); margin-top:0; }
.national-figure-header p { color:var(--muted); line-height:1.8; }
.national-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.national-metric { padding:18px; border:1px solid #D0C4B3; }
.national-metric h3 { font-size:1rem; margin:0 0 8px; }
.national-big-number { font-size:clamp(1.5rem,3vw,2.2rem); margin:12px 0 4px; overflow-wrap:anywhere; }
.national-bar { height:12px; background:#D8D0C4; margin:16px 0 10px; overflow:hidden; }
.national-bar-fill { height:100%; background:var(--blue); transition:width .25s ease; }
.national-metric.carbon .national-bar-fill { background:var(--orange); }
.national-bar-fill.increase { background:#8B7A64 !important; }
.national-footnote { font-size:.8rem; line-height:1.8; color:var(--muted); margin-top:20px; }
@media (max-width:900px) { .climate-layout { grid-template-columns:1fr; } .detail-panel { position:static; } }
@media (max-width:650px) {
  .climate-page { padding:18px 10px 35px; }
  .climate-summary { grid-template-columns:1fr; gap:10px; }
  .summary-card { padding:17px; }
  .food-header { display:none; }
  .food-row { grid-template-columns:minmax(0,1fr) 70px !important; gap:10px; padding:14px 7px; }
  .food-name { grid-column:1; } .food-amount { grid-column:2; text-align:right; }
  .water-column, .carbon-column { grid-column:1 / -1; }
  .water-column::before, .carbon-column::before { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
  .water-column::before { content:"WATER FOOTPRINT"; }
  .carbon-column::before { content:"CARBON FOOTPRINT"; }
  .mode-water .food-row, .mode-carbon .food-row { grid-template-columns:minmax(0,1fr) 70px !important; }
  .sort-control { width:100%; } .sort-control select { flex:1; min-width:0; }
  .national-metrics { grid-template-columns:1fr; }
}