/* Thai Kitchen - calm, mobile-first, consistent with Thai Ready */
:root {
 --teal: #0d5c4d;
 --teal-dark: #093f35;
 --gold: #b98f1f;
 --gold-soft: #f5edd8;
 --bg: #faf8f4;
 --card: #ffffff;
 --text: #2b2b2b;
 --muted: #6b6b6b;
 --line: #e4ddd0;
 --warn: #8a4b00;
 --warn-bg: #fdf3e3;
 --ok: #0d5c4d;
 --ok-bg: #e7f2ee;
 --radius: 10px;
}

* { box-sizing: border-box; }

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background: var(--bg);
 color: var(--text);
 line-height: 1.6;
 font-size: 17px;
}

/* Header */
.site-header {
 background: var(--teal);
 color: #fff;
 padding: 0.9rem 1rem;
 position: sticky;
 top: 0;
 z-index: 10;
}
.site-header .brand {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 0.5rem;
}
.site-header h1 {
 font-size: 1.25rem;
 margin: 0;
 letter-spacing: 0.02em;
}
.site-header h1 a { color: #fff; text-decoration: none; }
.site-header .tagline {
 font-size: 0.8rem;
 opacity: 0.85;
 margin: 0;
}

nav.main-nav {
 display: flex;
 gap: 0.25rem;
 margin-top: 0.7rem;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}
nav.main-nav a {
 color: #fff;
 text-decoration: none;
 font-size: 0.9rem;
 padding: 0.35rem 0.7rem;
 border-radius: 999px;
 white-space: nowrap;
 border: 1px solid rgba(255,255,255,0.25);
}
nav.main-nav a.active, nav.main-nav a:hover {
 background: #fff;
 color: var(--teal);
}

/* Layout */
main {
 max-width: 760px;
 margin: 0 auto;
 padding: 1.25rem 1rem 3rem;
}

h2 { color: var(--teal-dark); font-size: 1.5rem; margin: 1.6rem 0 0.6rem; }
h3 { color: var(--teal-dark); font-size: 1.15rem; margin: 1.3rem 0 0.4rem; }
p { margin: 0.6rem 0; }
.lead { font-size: 1.1rem; color: #3d3d3d; }

a { color: var(--teal); }

/* Cards */
.card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1rem 1.1rem;
 margin: 0.9rem 0;
}
.card h3 { margin-top: 0; }

.route-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.8rem;
 margin: 1rem 0;
}
@media (min-width: 640px) {
 .route-grid { grid-template-columns: 1fr 1fr; }
}
.route-card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1rem 1.1rem;
 text-decoration: none;
 color: var(--text);
 display: block;
}
.route-card:hover { border-color: var(--teal); }
.route-card h3 { margin: 0 0 0.3rem; color: var(--teal); }
.route-card p { margin: 0.2rem 0; font-size: 0.95rem; color: var(--muted); }
.route-card .flag {
 display: inline-block;
 font-size: 0.75rem;
 font-weight: 700;
 color: var(--teal-dark);
 background: var(--gold-soft);
 border-radius: 999px;
 padding: 0.15rem 0.6rem;
 margin-bottom: 0.4rem;
}

/* Disclaimer / notices */
.disclaimer {
 background: var(--warn-bg);
 border-left: 4px solid var(--gold);
 border-radius: 0 8px 8px 0;
 padding: 0.9rem 1rem;
 margin: 1rem 0;
 font-size: 0.95rem;
}
.verify-note {
 background: var(--warn-bg);
 border: 1px dashed var(--gold);
 border-radius: var(--radius);
 padding: 0.7rem 0.9rem;
 margin: 0.8rem 0;
 font-size: 0.92rem;
 color: var(--warn);
}
.source-note {
 font-size: 0.85rem;
 color: var(--muted);
 border-top: 1px solid var(--line);
 margin-top: 1.5rem;
 padding-top: 0.7rem;
}
.source-note a { color: var(--teal); }

/* Checklists */
.checklist { list-style: none; padding: 0; margin: 0.6rem 0; }
.checklist li {
 display: flex;
 gap: 0.7rem;
 align-items: flex-start;
 padding: 0.55rem 0.4rem;
 border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: none; }
.checklist input[type="checkbox"] {
 width: 1.35rem;
 height: 1.35rem;
 margin-top: 0.2rem;
 flex-shrink: 0;
 accent-color: var(--teal);
}
.checklist li.done span { text-decoration: line-through; color: var(--muted); }
.checklist .sub { display: block; font-size: 0.88rem; color: var(--muted); }

ol.steps { padding-left: 1.4rem; }
ol.steps li { margin: 0.55rem 0; }

/* Tables */
table.fees {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.95rem;
 margin: 0.8rem 0;
}
table.fees th, table.fees td {
 text-align: left;
 padding: 0.6rem 0.5rem;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
table.fees th { color: var(--teal-dark); font-size: 0.9rem; }
table.fees td .checked { display: block; font-size: 0.8rem; color: var(--muted); }

/* Dashboard */
.dash-form label {
 display: block;
 font-weight: 600;
 margin: 0.9rem 0 0.25rem;
 color: var(--teal-dark);
}
.dash-form input[type="date"] {
 width: 100%;
 max-width: 320px;
 font-size: 1rem;
 padding: 0.55rem 0.6rem;
 border: 1px solid var(--line);
 border-radius: 8px;
 background: #fff;
}
.dash-item {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 padding: 0.9rem 1rem;
 margin: 0.7rem 0;
}
.dash-item .count {
 font-size: 1.6rem;
 font-weight: 700;
 color: var(--teal);
}
.dash-item .count.urgent { color: #a33b00; }
.dash-item .action { font-size: 0.95rem; margin-top: 0.3rem; }
.btn {
 display: inline-block;
 background: var(--teal);
 color: #fff;
 border: none;
 border-radius: 8px;
 padding: 0.65rem 1.2rem;
 font-size: 1rem;
 cursor: pointer;
 margin-top: 0.8rem;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary {
 background: #fff;
 color: var(--teal);
 border: 1px solid var(--teal);
}

/* Subscribe box */
.subscribe-box {
 background: var(--gold-soft);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1rem 1.1rem;
 margin: 1.2rem 0;
 font-size: 0.95rem;
}

/* Updates feed */
.update-entry {
 border-left: 4px solid var(--teal);
 background: var(--card);
 border-radius: 0 8px 8px 0;
 padding: 0.8rem 1rem;
 margin: 0.8rem 0;
}
.update-entry .date { font-size: 0.85rem; color: var(--muted); }
.update-entry h3 { margin: 0.2rem 0 0.3rem; }

/* Subscriber gates */
.gate-lock {
 background: var(--gold-soft);
 border: 2px solid var(--gold);
 border-radius: var(--radius);
 padding: 1.1rem 1.2rem;
 margin: 1.2rem 0;
}
.gate-lock h3 { margin-top: 0; }

/* Subscribe banner on free pages */
.subscribe-banner {
 border: 1px solid var(--line);
 border-left: 4px solid var(--teal);
 border-radius: 0 8px 8px 0;
 background: var(--card);
 padding: 0.9rem 1.1rem;
 margin: 1.6rem 0 0.5rem;
 display: flex;
 flex-wrap: wrap;
 gap: 0.6rem 1rem;
 align-items: center;
 justify-content: space-between;
}
.subscribe-banner .btn { margin-top: 0; }

/* Footer */
.site-footer {
 border-top: 1px solid var(--line);
 padding: 1.2rem 1rem 2rem;
 max-width: 760px;
 margin: 0 auto;
 font-size: 0.85rem;
 color: var(--muted);
}
.site-footer a { color: var(--teal); }

/* Breadcrumb */
.crumb { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.4rem; }
.crumb a { color: var(--teal); text-decoration: none; }

@media print {
 .site-header, .site-footer, nav.main-nav, .subscribe-box, .gate-lock, .subscribe-banner, .btn { display: none; }
 main { max-width: 100%; }
 .card, .dash-item { break-inside: avoid; }
}

/* Thai Kitchen additions */
.hero { text-align: center; }
.hero-img {
 max-width: 100%;
 height: auto;
 border-radius: var(--radius);
 border: 1px solid var(--line);
 margin-bottom: 0.8rem;
}
.big-search {
 display: flex;
 gap: 0.5rem;
 margin: 1.2rem 0;
}
.big-search input[type="search"] {
 flex: 1;
 font-size: 1.05rem;
 padding: 0.7rem 0.8rem;
 border: 1px solid var(--line);
 border-radius: 8px;
}
.big-search .btn { margin-top: 0; white-space: nowrap; }

.filter-bar {
 display: flex;
 gap: 0.5rem;
 margin: 1rem 0;
 flex-wrap: wrap;
}
.filter-bar input[type="search"] {
 flex: 1;
 min-width: 180px;
 font-size: 1rem;
 padding: 0.6rem 0.7rem;
 border: 1px solid var(--line);
 border-radius: 8px;
}
.filter-bar select {
 font-size: 1rem;
 padding: 0.6rem;
 border: 1px solid var(--line);
 border-radius: 8px;
 background: #fff;
}
.filter-btn { margin-top: 0; }
.filter-btn.active { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }

.ing-card { margin: 0.8rem 0; }
.ing-head {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 0.6rem;
}
.ing-head h3 { margin: 0; }
.ing-cat {
 font-size: 0.75rem;
 font-weight: 700;
 color: var(--teal-dark);
 background: var(--gold-soft);
 border-radius: 999px;
 padding: 0.15rem 0.6rem;
 white-space: nowrap;
}
.ing-thai {
 font-size: 1.7rem;
 color: var(--teal-dark);
 margin: 0.4rem 0 0.1rem;
}
.ing-phon { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.4rem; }
.ing-sub {
 background: var(--ok-bg);
 border-radius: 8px;
 padding: 0.6rem 0.8rem;
 font-size: 0.95rem;
}
.dish-card h4 { margin: 0.9rem 0 0.3rem; color: var(--teal-dark); }
.dish-ing { list-style: none; padding: 0; margin: 0.3rem 0; }
.dish-ing li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.dish-ing li:last-child { border-bottom: none; }
.dish-thai { color: var(--muted); font-size: 0.9rem; }
.unlock-status { margin-top: 0.6rem; font-weight: 600; color: var(--teal-dark); }
#unlock-box input[type="text"] {
 width: 100%;
 max-width: 340px;
 font-size: 1rem;
 padding: 0.6rem 0.7rem;
 border: 1px solid var(--line);
 border-radius: 8px;
 margin: 0.4rem 0;
}
.gated-content[style*="none"] { display: none !important; }