/*
 * luna.css — CalThai Design System
 * Main stylesheet for the CalThai WordPress theme.
 * Covers: tokens, reset, nav, cards, buttons, forms, tools,
 *         food search, articles, FAQ, newsletter, footer,
 *         homepage sections, and utility classes.
 */

/* ═══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --bg:           #FAF8F3;
  --surface:      #F3EFE6;
  --card:         #FFFFFF;

  /* Gold scale */
  --gold:         #B8924A;
  --gold-dark:    #9A7A3A;
  --gold-pale:    #F8F0E0;
  --gold-border:  rgba(184, 146, 74, 0.22);

  /* Text scale */
  --text:         #2A1F14;
  --muted:        #7A6A58;       /* alias used in some components */
  --text-muted:   #7A6A58;
  --text-dim:     #B0A090;

  /* Borders */
  --border:        rgba(42, 31, 20, 0.08);
  --border-strong: rgba(42, 31, 20, 0.14);

  /* Layout */
  --max:       430px;

  /* Effects */
  --shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}


/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background:    var(--bg);
  color:         var(--text);
  font-family:   'Prompt', sans-serif;
  font-weight:   400;
  line-height:   1.65;
  max-width:     var(--max);
  margin:        0 auto;
  min-height:    100vh;
  overflow-x:    hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Prompt', sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: 'Prompt', sans-serif;
}

input,
select,
textarea {
  font-family: 'Prompt', sans-serif;
}


/* ═══════════════════════════════════════════════════════════
   3. NAVIGATION
   ═══════════════════════════════════════════════════════════ */

/* Primary nav element (homepage — icon buttons on right) */
nav,
.site-nav {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        16px 20px;
  position:       sticky;
  top:            0;
  background:     var(--nav-bg, rgba(250, 248, 243, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:  1px solid var(--border);
  z-index:        100;
}

/* Logo */
.logo,
.site-logo {
  font-family:     'Prompt', sans-serif;
  font-size:       1.25rem;
  font-weight:     700;
  color:           var(--text);
  letter-spacing:  0.06em;
  text-decoration: none;
}

.logo em,
.site-logo em {
  font-style:  italic;
  font-weight: 400;
  color:       var(--gold);
}

/* Icon button group (homepage nav) */
.nav-right {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.nav-btn {
  width:       36px;
  height:      36px;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--text-muted);
  border-radius: 50%;
  cursor:      pointer;
  border:      none;
  background:  transparent;
  transition:  color 0.2s, background 0.2s;
}

.nav-btn:hover {
  color:       var(--gold);
  background:  var(--gold-pale);
}

.nav-btn svg {
  width:  19px;
  height: 19px;
}

/* Back pill (tool pages) — hidden on mobile, shown on desktop */
.nav-back,
.back-btn {
  display:         none;
  align-items:     center;
  gap:             6px;
  font-size:       0.78rem;
  font-weight:     600;
  color:           var(--text-muted);
  text-decoration: none;
  padding:         6px 10px;
  border-radius:   100px;
  border:          1px solid var(--border);
  background:      transparent;
  cursor:          pointer;
  transition:      color 0.2s, border-color 0.2s, background 0.2s;
  white-space:     nowrap;
}

.nav-back:hover,
.back-btn:hover {
  color:         var(--gold);
  border-color:  var(--gold-border);
  background:    var(--gold-pale);
}

.nav-back svg,
.back-btn svg {
  width:     15px;
  height:    15px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   4. CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  padding:       16px;
}

.card-gold {
  background:    var(--gold-pale);
  border-color:  var(--gold-border);
}


/* ═══════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-gold {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  background:    var(--gold);
  color:         #fff;
  border:        none;
  border-radius: 24px;
  padding:       10px 22px;
  font-weight:   700;
  font-size:     0.88rem;
  cursor:        pointer;
  transition:    opacity 0.18s;
  white-space:   nowrap;
}

.btn-gold:hover { opacity: 0.88; }

.btn-outline {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  background:    transparent;
  border:        2px solid var(--gold);
  color:         var(--gold);
  border-radius: 24px;
  padding:       10px 22px;
  font-weight:   700;
  font-size:     0.88rem;
  cursor:        pointer;
  transition:    background 0.18s, color 0.18s;
}

.btn-outline:hover {
  background: var(--gold-pale);
}

/* Full-width calculate button */
.calc-btn {
  display:       block;
  width:         100%;
  height:        50px;
  background:    var(--gold);
  color:         #fff;
  border:        none;
  border-radius: 12px;
  font-size:     0.95rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow:    0 3px 10px rgba(184, 146, 74, 0.28);
}

.calc-btn:hover {
  background:  var(--gold-dark);
  box-shadow:  0 4px 14px rgba(184, 146, 74, 0.38);
}

.calc-btn:active { transform: translateY(1px); }


/* ═══════════════════════════════════════════════════════════
   6. PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.page-header {
  padding: 24px 20px 20px;
}

/* Eyebrow / overline label */
.eyebrow,
.page-eyebrow {
  font-size:       0.62rem;
  font-weight:     700;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  color:           var(--gold);
  margin-bottom:   8px;
}

.page-header h1 {
  font-family:   'Prompt', sans-serif;
  font-size:     1.6rem;
  font-weight:   700;
  line-height:   1.3;
  color:         var(--text);
  margin-bottom: 10px;
}

.page-header h1 em {
  font-style: italic;
  color:      var(--gold);
}

.page-subtitle,
.page-header .subtitle {
  font-size:   0.875rem;
  color:       var(--text-muted);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════
   7. CATEGORY BADGE
   ═══════════════════════════════════════════════════════════ */
.cat-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       0.72rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  padding:         4px 10px;
  border-radius:   20px;
  margin-bottom:   12px;
}


/* ═══════════════════════════════════════════════════════════
   8. SECTIONS
   ═══════════════════════════════════════════════════════════ */
.section {
  margin: 20px 16px 0;
}

/* Section heading row (title + "see all" link) */
.section-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  padding:         22px 16px 12px;
}

.section-head h2 {
  font-family:  'Prompt', sans-serif;
  font-size:    1.05rem;
  font-weight:  600;
  color:        var(--text);
}

.section-head a {
  font-size:       0.74rem;
  font-weight:     600;
  color:           var(--gold);
  text-decoration: none;
  transition:      opacity 0.2s;
}

.section-head a:hover { opacity: 0.7; }

/* Section label (small uppercase overline) */
.section-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  10px;
}

/* Inline section title (standalone, not paired with a link) */
.section-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1.05rem;
  font-weight:   600;
  margin-bottom: 14px;
}


/* ═══════════════════════════════════════════════════════════
   9. MACRO PROGRESS BARS
   ═══════════════════════════════════════════════════════════ */
.macro-bar-row { margin-bottom: 14px; }

.macro-bar-header {
  display:         flex;
  justify-content: space-between;
  margin-bottom:   5px;
}

.macro-bar-name {
  font-size:   0.82rem;
  font-weight: 600;
}

.macro-bar-val {
  font-size: 0.78rem;
  color:     var(--text-muted);
}

.macro-bar-track {
  height:        8px;
  background:    var(--surface);
  border-radius: 10px;
  overflow:      hidden;
}

.macro-bar-fill {
  height:        100%;
  border-radius: 10px;
  transition:    width 0.6s ease;
}

/* Progress bars (food search panel) */
.progress-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 6px;
}

.progress-row-label {
  font-size:   0.71rem;
  color:       var(--text-muted);
  width:       80px;
  flex-shrink: 0;
}

.progress-bar-wrap {
  flex:          1;
  height:        6px;
  background:    var(--surface);
  border-radius: 100px;
  overflow:      hidden;
}

.progress-bar-fill {
  height:        100%;
  border-radius: 100px;
  background:    linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition:    width 0.4s ease;
}

.progress-pct {
  font-size:   0.65rem;
  font-weight: 700;
  color:       var(--text-dim);
  width:       30px;
  text-align:  right;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   10. NUTRITION TABLE
   ═══════════════════════════════════════════════════════════ */
.nutri-table {
  background:    var(--card);
  border-radius: var(--radius);
  overflow:      hidden;
  border:        1px solid var(--border);
}

.nutri-row {
  display:         flex;
  justify-content: space-between;
  padding:         11px 16px;
  border-bottom:   1px solid var(--surface);
}

.nutri-row:last-child { border-bottom: none; }

.nutri-row.header { background: var(--surface); }

.nutri-name {
  font-size: 0.82rem;
}

.nutri-name.sub {
  padding-left: 16px;
  color:        var(--text-muted);
  font-size:    0.78rem;
}

.nutri-val {
  font-size:   0.82rem;
  font-weight: 600;
}

.nutri-dv {
  font-size: 0.72rem;
  color:     var(--text-muted);
}

/* Expanded nutrition panel (food search) */
.nutrition-panel {
  display:    none;
  padding:    0 15px 15px;
  background: #FDFBF8;
  border-top: 1px solid var(--border);
  animation:  slideDown 0.22s ease;
}

.nutrition-panel.open { display: block; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nutrition-header {
  font-size:      0.66rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-dim);
  padding:        12px 0 10px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  12px;
}

.nutrition-table {
  width:           100%;
  border-collapse: collapse;
}

.nutrition-table td {
  padding:       5px 0;
  font-size:     0.77rem;
  border-bottom: 1px solid var(--border);
}

.nutrition-table tr:last-child td { border-bottom: none; }

.nutrition-table td:first-child { color: var(--text-muted); }

.nutrition-table td:last-child {
  text-align:  right;
  font-weight: 600;
  color:       var(--text);
}

.nutrition-table td.pct-cell {
  width:        100px;
  padding-right: 0;
}

.tdee-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-top:     14px;
  margin-bottom:  8px;
}


/* ═══════════════════════════════════════════════════════════
   11. CALORIE HERO CARD
   ═══════════════════════════════════════════════════════════ */
.cal-card {
  margin:        18px 16px;
  background:    var(--gold-pale);
  border:        1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding:       24px 20px;
  text-align:    center;
}

.cal-number {
  font-family:  'Prompt', sans-serif;
  font-size:    3.6rem;
  font-weight:  600;
  color:        var(--gold);
  line-height:  1;
}

.cal-unit {
  font-size:  0.85rem;
  color:      var(--text-muted);
  margin-top: 4px;
}

.cal-divider {
  width:      40px;
  height:     2px;
  background: var(--gold-border);
  margin:     14px auto;
}

.cal-macros {
  display:         flex;
  justify-content: space-around;
}

.cal-macro-val {
  font-size:   1.1rem;
  font-weight: 700;
}

.cal-macro-label {
  font-size:  0.7rem;
  color:      var(--text-muted);
  margin-top: 2px;
}

/* Calorie badge (food list) */
.cal-badge {
  background:   var(--gold-pale);
  color:        var(--gold-dark);
  font-weight:  700;
  font-size:    0.78rem;
  padding:      4px 10px;
  border-radius: 100px;
  white-space:  nowrap;
  border:       1px solid var(--gold-border);
}


/* ═══════════════════════════════════════════════════════════
   12. TOOL / CALCULATOR FORM STYLES
   ═══════════════════════════════════════════════════════════ */

/* Calculator card wrapper */
.calc-card {
  margin:        0 16px 24px;
  background:    var(--card);
  border-radius: var(--radius);
  border:        1px solid var(--gold-border);
  padding:       20px;
  box-shadow:    0 2px 16px rgba(184, 146, 74, 0.08);
}

.form-group { margin-bottom: 16px; }

.form-label {
  display:        block;
  font-size:      0.78rem;
  font-weight:    700;
  color:          var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom:  8px;
}

/* Text / number inputs */
.form-input,
.input-unit-wrap input {
  width:         100%;
  height:        46px;
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:    var(--bg);
  padding:       0 36px 0 12px;
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.form-input:focus,
.input-unit-wrap input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}

.form-input::placeholder,
.input-unit-wrap input::placeholder {
  color:       var(--text-dim);
  font-weight: 400;
}

/* Remove spinner arrows */
.input-unit-wrap input::-webkit-outer-spin-button,
.input-unit-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Unit label inside number input */
.input-unit-wrap {
  position: relative;
}

.input-unit {
  position:   absolute;
  right:      9px;
  top:        50%;
  transform:  translateY(-50%);
  font-size:  0.68rem;
  font-weight: 600;
  color:      var(--text-dim);
  pointer-events: none;
}

/* Three-column inputs row */
.inputs-row {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   10px;
  margin-bottom:         16px;
}

/* Select */
.form-select,
.select-wrap select {
  width:        100%;
  height:       46px;
  border:       1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:   var(--bg);
  padding:      0 38px 0 12px;
  font-size:    0.82rem;
  font-weight:  500;
  color:        var(--text);
  outline:      none;
  appearance:   none;
  -webkit-appearance: none;
  cursor:       pointer;
  transition:   border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus,
.select-wrap select:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}

.select-wrap {
  position:      relative;
  margin-bottom: 18px;
}

.select-chevron {
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--text-muted);
}

.select-chevron svg {
  width:  16px;
  height: 16px;
}

/* Gender toggle */
.gender-toggle {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.gender-toggle input[type="radio"] {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.gender-toggle label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  height:          46px;
  border-radius:   var(--radius-sm);
  border:          1px solid var(--border-strong);
  background:      var(--bg);
  font-size:       0.875rem;
  font-weight:     600;
  color:           var(--text-muted);
  cursor:          pointer;
  transition:      all 0.2s;
  user-select:     none;
}

.gender-toggle label:hover {
  border-color: var(--gold-border);
  color:        var(--gold-dark);
}

.gender-toggle input[type="radio"]:checked + label {
  background:   var(--gold-pale);
  border-color: var(--gold);
  color:        var(--gold-dark);
}

.gender-icon { font-size: 1.1rem; }

/* Legacy pill-style gender toggle */
.gender-pill {
  display: flex;
  flex: 1;
}

.gender-pill input { display: none; }

.gender-pill label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         10px;
  border-radius:   12px;
  border:          1.5px solid var(--border);
  cursor:          pointer;
  font-size:       0.88rem;
  font-weight:     600;
  width:           100%;
  transition:      all 0.18s;
}

.gender-pill input:checked + label {
  background:   var(--gold-pale);
  border-color: var(--gold);
  color:        var(--gold);
}

/* Calc error message */
.calc-error {
  display:       none;
  margin-top:    12px;
  padding:       10px 14px;
  background:    #FFF4F4;
  border:        1px solid rgba(200, 60, 60, 0.18);
  border-radius: 8px;
  font-size:     0.8rem;
  color:         #B03030;
  font-weight:   500;
}

.calc-error.visible { display: block; }


/* ═══════════════════════════════════════════════════════════
   13. RESULT CARD
   ═══════════════════════════════════════════════════════════ */
.result-area {
  display:    none;
  margin-top: 20px;
}

.result-area.visible { display: block; }

.result-divider {
  height:     1px;
  background: var(--border);
  margin-bottom: 18px;
}

.result-main,
.result-card {
  background:    var(--gold-pale);
  border:        1px solid var(--gold-border);
  border-radius: 14px;
  padding:       20px;
  text-align:    center;
  margin-bottom: 14px;
}

.result-card {
  border-radius: var(--radius-lg);
  margin:        20px 16px 0;
  margin-bottom: 0;
}

.result-label {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-bottom:  6px;
}

.result-number {
  font-family:   'Prompt', sans-serif;
  font-size:     3rem;
  font-weight:   700;
  color:         var(--gold-dark);
  line-height:   1.1;
  margin-bottom: 4px;
}

.result-unit {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--text-muted);
}

.result-formula-note {
  margin-top:  10px;
  font-size:   0.72rem;
  color:       var(--text-muted);
  line-height: 1.5;
}

/* Goal cards (TDEE result breakdown) */
.goal-cards {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   8px;
}

.goal-card {
  background:    var(--card);
  border:        1px solid var(--border-strong);
  border-radius: 12px;
  padding:       12px 8px;
  text-align:    center;
}

.goal-icon {
  font-size:     1.3rem;
  margin-bottom: 5px;
}

.goal-name {
  font-size:   0.67rem;
  font-weight: 700;
  color:       var(--text-muted);
  line-height: 1.3;
  margin-bottom: 5px;
}

.goal-cal {
  font-family:  'Prompt', sans-serif;
  font-size:    1.05rem;
  font-weight:  700;
  color:        var(--text);
  line-height:  1.1;
}

.goal-cal-unit {
  font-size:   0.6rem;
  font-weight: 500;
  color:       var(--text-dim);
}

.goal-delta {
  font-size: 0.62rem;
  color:     var(--text-dim);
  margin-top: 2px;
}

/* Goal card colour variants */
.goal-card.goal-lose  { border-color: rgba(72, 160, 120, 0.25); }
.goal-card.goal-lose .goal-cal { color: #2E8B57; }

.goal-card.goal-maintain { border-color: var(--gold-border); }
.goal-card.goal-maintain .goal-cal { color: var(--gold-dark); }

.goal-card.goal-gain { border-color: rgba(100, 100, 220, 0.2); }
.goal-card.goal-gain .goal-cal { color: #4A5AB8; }


/* ═══════════════════════════════════════════════════════════
   14. ARTICLE STYLES
   ═══════════════════════════════════════════════════════════ */
.article-wrap {
  margin:        20px 0 0;
  padding:       0 20px;
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* ── Post content (Gutenberg / classic editor) ── */
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family:    'Prompt', sans-serif;
  font-weight:    600;
  color:          var(--gold-dark);
  line-height:    1.4;
  margin-top:     28px;
  margin-bottom:  12px;
  padding-bottom: 8px;
  border-bottom:  2px solid var(--gold-pale);
}
.post-content h2 { font-size: 1.15rem; }
.post-content h3 { font-size: 1.02rem; border-bottom: none; }
.post-content h4 { font-size: 0.92rem; border-bottom: none; }

.post-content p {
  font-size:     0.9rem;
  line-height:   1.8;
  color:         var(--text);
  margin-bottom: 14px;
}

.post-content ul,
.post-content ol {
  padding-left:  22px;
  margin-bottom: 14px;
}

.post-content li {
  font-size:     0.88rem;
  line-height:   1.75;
  color:         var(--text);
  margin-bottom: 4px;
}

.post-content strong {
  font-weight: 700;
  color:       var(--text);
}

.post-content img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--radius-sm);
  margin:        8px 0;
}

.post-content blockquote {
  margin:        16px 0;
  padding:       14px 18px;
  background:    var(--gold-pale);
  border-left:   3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size:     0.88rem;
  line-height:   1.7;
  color:         var(--text);
}

.post-content a {
  color:           var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-content a:hover {
  color: var(--gold);
}

.article-section {
  padding:       0 16px;
  margin-bottom: 32px;
}

/* Also used as a block inside tool-calories layout */
.article-block {
  padding: 0 20px 24px;
}

.article-block + .article-block {
  border-top:   1px solid var(--border);
  padding-top:  22px;
}

.article-section h2,
.article-h3 {
  font-family:   'Prompt', sans-serif;
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--gold-dark);
  line-height:   1.4;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold-pale);
  margin-bottom: 14px;
  margin-top:    32px;
}

.article-section h2:first-child,
.article-h3:first-child {
  margin-top: 0;
}

.article-h3 em { font-style: italic; color: var(--gold-dark); }

.article-section p,
.article-p {
  font-size:     0.9rem;
  line-height:   1.75;
  color:         var(--text);
  margin-bottom: 12px;
}

.article-section p:last-child,
.article-p:last-child { margin-bottom: 0; }

.article-section strong,
.article-p strong {
  font-weight: 700;
  color:       var(--text);
}

.article-section ul,
.article-section ol {
  padding-left:  18px;
  margin-bottom: 12px;
}

.article-section li {
  font-size:   0.85rem;
  line-height: 1.7;
  color:       #3D342A;
}

/* Highlight / info box */
.info-box {
  background:   var(--gold-pale);
  border:       1px solid var(--gold-border);
  border-left:  3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding:      14px 16px;
  margin:       16px 0;
  font-size:    0.875rem;
  line-height:  1.65;
  color:        var(--text);
}

.info-box strong { color: var(--gold-dark); }

/* Callout (food search variant) */
.callout {
  background:    var(--gold-pale);
  border-left:   3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding:       10px 14px;
  margin:        12px 0;
  font-size:     0.8rem;
  color:         var(--text-muted);
  line-height:   1.6;
}

.callout strong { color: var(--gold-dark); }


/* ═══════════════════════════════════════════════════════════
   15. FAQ ACCORDION
   ═══════════════════════════════════════════════════════════ */

/* --- Flat FAQ list (tool-tdee style) --- */
.faq-list {
  margin-top: 14px;
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list details:first-child {
  border-top: 1px solid var(--border);
}

.faq-list summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 4px;
  font-size:       0.875rem;
  font-weight:     600;
  color:           var(--text);
  cursor:          pointer;
  list-style:      none;
  gap:             10px;
  line-height:     1.45;
  transition:      color 0.2s;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--gold-dark); }

.faq-list details[open] summary { color: var(--gold-dark); }

.faq-chevron {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  font-size:   1rem;
  color:       var(--gold);
  transition:  transform 0.22s;
}

.faq-list details[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding:     0 4px 14px;
  font-size:   0.875rem;
  line-height: 1.75;
  color:       var(--text-muted);
}

/* --- Bordered FAQ list (food search / card style) --- */
.faq-list.faq-bordered {
  border-radius: 12px;
  overflow:      hidden;
  border:        1px solid var(--border);
  margin-top:    12px;
}

.faq-item {
  background:  var(--card);
  border:      1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow:    hidden;
}

/* When .faq-item is a child of .faq-list.faq-bordered */
.faq-list.faq-bordered .faq-item {
  border:        none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 0;
}

.faq-list.faq-bordered .faq-item:last-child { border-bottom: none; }

.faq-item summary {
  list-style:   none;
  cursor:       pointer;
  padding:      13px 15px;
  font-size:    0.84rem;
  font-weight:  600;
  color:        var(--text);
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  background:   var(--card);
  transition:   background 0.15s;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: #FDFCFA; }

.faq-item[open] summary {
  background: var(--gold-pale);
  color:      var(--gold-dark);
}

/* Circular chevron icon inside faq-item */
.faq-item .faq-chevron {
  flex-shrink:    0;
  width:          18px;
  height:         18px;
  border-radius:  50%;
  background:     var(--surface);
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin-top:     1px;
  font-size:      0.65rem;
  transition:     transform 0.2s;
  color:          var(--text-dim);
}

.faq-item[open] .faq-chevron {
  transform:  rotate(180deg);
  background: rgba(184, 146, 74, 0.15);
  color:      var(--gold-dark);
}

.faq-item p,
.faq-body {
  padding:     0 15px 13px;
  font-size:   0.82rem;
  line-height: 1.7;
  color:       var(--text-muted);
  background:  var(--card);
}

.faq-item[open] .faq-body { background: #FDF9F4; }


/* ═══════════════════════════════════════════════════════════
   16. RELATED TOOLS
   ═══════════════════════════════════════════════════════════ */
.related-section {
  padding: 0 0 8px;
}

/* Horizontal scroll variant (tool-tdee) */
.hscroll-wrap {
  padding:       0 16px 4px;
  overflow-x:    auto;
  scrollbar-width: none;
}

.hscroll-wrap::-webkit-scrollbar { display: none; }

.hscroll-row {
  display: flex;
  gap:     10px;
}

.related-card {
  flex-shrink:     0;
  width:           140px;
  background:      var(--card);
  border-radius:   14px;
  border:          1px solid var(--border);
  padding:         16px 14px;
  cursor:          pointer;
  text-decoration: none;
  transition:      border-color 0.2s, box-shadow 0.2s;
}

.related-card:hover {
  border-color: var(--gold-border);
  box-shadow:   0 2px 12px rgba(0, 0, 0, 0.07);
}

.related-icon {
  width:         40px;
  height:        40px;
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.25rem;
  margin-bottom: 10px;
}

.related-icon svg {
  width:  55%;
  height: 55%;
}

.related-name {
  font-size:     0.82rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 3px;
}

.related-desc {
  font-size:   0.7rem;
  color:       var(--text-muted);
  line-height: 1.35;
}

/* Grid variant (food search — 3 columns) */
.related-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   8px;
}

.related-grid .related-card {
  width:      auto;
  text-align: center;
  padding:    13px 12px;
}

.related-grid .related-icon {
  margin:    0 auto 7px;
  width:     38px;
  height:    38px;
  font-size: 1.15rem;
}

.related-grid .related-name {
  font-size: 0.74rem;
}

.related-grid .related-desc {
  font-size: 0.63rem;
}

/* Tool icon colour backgrounds */
.ti-orange { background: #FEF3E2; }
.ti-teal   { background: #E8F5F2; }
.ti-purple { background: #F0EEFF; }
.ti-blue   { background: #E8F0FE; }
.ti-green  { background: #EEF5EC; }

/* Related icon colours (food search variant) */
.ri-orange { background: #FEF3E2; }
.ri-teal   { background: #E8F5F2; }
.ri-purple { background: #F0EEFF; }


/* ═══════════════════════════════════════════════════════════
   17. NEWSLETTER
   ═══════════════════════════════════════════════════════════ */
.newsletter {
  margin:        18px 16px 24px;
  padding:       24px 20px;
  background:    var(--text);       /* #2A1F14 dark brown */
  border-radius: 18px;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}

.newsletter::before {
  content:        '';
  position:       absolute;
  width:          250px;
  height:         200px;
  border-radius:  50%;
  background:     radial-gradient(ellipse, rgba(184, 146, 74, 0.18) 0%, transparent 65%);
  top:            -80px;
  right:          -60px;
  pointer-events: none;
}

.nl-eyebrow {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  8px;
}

.nl-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1.1rem;
  font-weight:   600;
  color:         #FAF8F3;
  margin-bottom: 7px;
  line-height:   1.4;
  position:      relative;
}

.nl-title em {
  font-style: italic;
  color:      var(--gold);
}

.nl-sub {
  font-size:     0.8rem;
  color:         rgba(250, 248, 243, 0.6);
  line-height:   1.55;
  margin-bottom: 18px;
  position:      relative;
}

/* Horizontal form layout (homepage / tool-tdee) */
.nl-form {
  display:   flex;
  gap:       8px;
  position:  relative;
}

.nl-form input,
.nl-input {
  flex:          1;
  min-width:     0;
  height:        44px;
  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding:       0 16px;
  font-size:     0.82rem;
  color:         #FAF8F3;
  outline:       none;
  transition:    border-color 0.2s;
}

.nl-form input::placeholder,
.nl-input::placeholder {
  color: rgba(250, 248, 243, 0.35);
}

.nl-form input:focus,
.nl-input:focus {
  border-color: rgba(184, 146, 74, 0.5);
}

.nl-form button {
  flex-shrink:   0;
  height:        44px;
  padding:       0 18px;
  background:    var(--gold);
  color:         #fff;
  border:        none;
  border-radius: 100px;
  font-size:     0.82rem;
  font-weight:   700;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.2s;
}

.nl-form button:hover { background: #C8A260; }

/* Stacked form layout (food search variant) */
.nl-form.nl-stacked {
  flex-direction: column;
  gap:            9px;
}

.nl-btn {
  height:        46px;
  border-radius: var(--radius-sm);
  background:    linear-gradient(135deg, var(--gold), var(--gold-dark));
  color:         #FAF8F3;
  font-size:     0.85rem;
  font-weight:   700;
  border:        none;
  cursor:        pointer;
  transition:    opacity 0.18s, transform 0.18s;
  letter-spacing: 0.04em;
}

.nl-btn:hover {
  opacity:   0.9;
  transform: translateY(-1px);
}

.nl-privacy {
  font-size: 0.66rem;
  color:     rgba(250, 248, 243, 0.3);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  padding:         20px 16px;
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer-logo {
  font-family:     'Prompt', sans-serif;
  font-size:       1rem;
  font-weight:     700;
  color:           var(--text-muted);
  text-decoration: none;
  display:         block;
  margin-bottom:   0;
  letter-spacing:  0.06em;
}

.footer-logo em {
  font-style:  italic;
  font-weight: 400;
  color:       var(--gold);
}

.footer-tagline {
  font-size:     0.74rem;
  color:         var(--text-dim);
  margin-bottom: 16px;
}

.footer-tools {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           6px 12px;
  margin-bottom: 10px;
}

.footer-tools-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-right:   4px;
}

.footer-tools a {
  font-size:       0.72rem;
  color:           var(--text-dim);
  text-decoration: none;
  transition:      color 0.2s;
}

.footer-tools a:hover { color: var(--gold); }

.footer-links {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px 16px;
  margin-bottom: 0;
}

.footer-links a {
  font-size:       0.72rem;
  color:           var(--text-dim);
  text-decoration: none;
  transition:      color 0.2s;
}

.footer-links a:hover { color: var(--gold); }

.footer-copy {
  font-size:   0.66rem;
  color:       var(--text-dim);
  line-height: 1.6;
}

/* Extended footer layout (food search, centred column) */
footer.footer-col {
  flex-direction: column;
  align-items:    flex-start;
  padding:        22px 20px 32px;
  display:        block;
}

footer.footer-col .footer-logo {
  margin-bottom: 5px;
}

footer.footer-col .footer-links {
  margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════
   19. HOMEPAGE SECTIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Hero promo banner ── */
.hero {
  margin:         14px 16px 0;
  padding:        14px 16px;
  border-radius:  14px;
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  gap:            14px;
  transition:     box-shadow 0.2s;
}

.hero:hover { box-shadow: 0 3px 14px rgba(184, 146, 74, 0.14); }

.hero-icon {
  flex-shrink:     0;
  width:           54px;
  height:          54px;
  background:      rgba(255, 255, 255, 0.6);
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.hero-body {
  flex:      1;
  min-width: 0;
}

.hero-eyebrow {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  4px;
}

.hero-title {
  font-family:   'Prompt', sans-serif;
  font-size:     0.95rem;
  font-weight:   600;
  line-height:   1.45;
  color:         var(--text);
  margin-bottom: 6px;
}

.hero-title em {
  font-style: italic;
  color:      var(--gold-dark);
}

.hero-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.hero-meta {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   0.72rem;
  color:       var(--text-muted);
}

.hero-meta .dot,
.item-meta .dot {
  width:         2px;
  height:        2px;
  border-radius: 50%;
  background:    var(--text-dim);
}

.hero-read-btn {
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--gold-dark);
  white-space: nowrap;
}

/* ── Category scroll strip ── */
.cat-section {
  padding: 18px 16px 0;
}

.cat-scroll,
.cat-filter {
  display:         flex;
  gap:             7px;
  overflow-x:      auto;
  scrollbar-width: none;
  padding-bottom:  3px;
  margin-bottom:   18px;
}

.cat-scroll::-webkit-scrollbar,
.cat-filter::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink:   0;
  padding:       7px 14px;
  border-radius: 100px;
  font-size:     0.77rem;
  font-weight:   500;
  color:         var(--text-muted);
  background:    var(--card);
  border:        1px solid var(--border);
  cursor:        pointer;
  transition:    all 0.2s;
  white-space:   nowrap;
}

.cat-pill:hover {
  color:        var(--gold);
  border-color: var(--gold-border);
}

.cat-pill.active {
  color:        var(--gold-dark);
  background:   var(--gold-pale);
  border-color: var(--gold-border);
  font-weight:  700;
}

/* ── Tools grid ── */
.tools-section {
  padding: 20px 16px 0;
}

.tools-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   9px;
}

.tool-card {
  background:      var(--card);
  border-radius:   13px;
  border:          1px solid var(--border);
  padding:         13px 13px 12px;
  cursor:          pointer;
  transition:      border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display:         block;
}

.tool-card:hover {
  border-color: var(--gold-border);
  box-shadow:   0 2px 10px rgba(0, 0, 0, 0.06);
}

.tool-card.wide {
  grid-column:  1 / -1;
  display:      flex;
  align-items:  center;
  gap:          14px;
}

.tool-icon {
  width:         38px;
  height:        38px;
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  margin-bottom: 9px;
}

.tool-card.wide .tool-icon { margin-bottom: 0; }

.tool-body { flex: 1; }

.tool-name {
  font-size:     0.82rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 2px;
}

.tool-card.wide .tool-name { font-size: 0.86rem; }

.tool-desc {
  font-size:   0.7rem;
  color:       var(--text-muted);
  line-height: 1.35;
}

.tool-arrow {
  margin-left: auto;
  color:       var(--gold);
  font-size:   0.9rem;
  flex-shrink: 0;
}

/* ── Featured article card ── */
.featured-card {
  margin:        0 16px;
  background:    var(--card);
  border-radius: 14px;
  border:        1px solid var(--border);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow 0.2s, border-color 0.2s;
}

.featured-card:hover {
  border-color: var(--gold-border);
  box-shadow:   0 3px 16px rgba(0, 0, 0, 0.07);
}

.featured-thumb {
  height:     130px;
  background: linear-gradient(145deg, #F5EDD8, #EDE0C4);
  display:    flex;
  align-items: center;
  justify-content: center;
  position:   relative;
  overflow:   hidden;
}

.featured-thumb::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, transparent 40%, rgba(255, 255, 255, 0.8) 100%);
}

.featured-body { padding: 12px 14px 14px; }

.featured-tag {
  font-size:      0.64rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  5px;
}

.featured-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1rem;
  font-weight:   600;
  line-height:   1.5;
  color:         var(--text);
  margin-bottom: 9px;
}

.featured-meta {
  font-size:   0.74rem;
  color:       var(--text-muted);
  display:     flex;
  align-items: center;
  gap:         6px;
}

.featured-meta .sep { color: var(--gold); }

/* ── Mini cards (horizontal scroll tips) ── */
.mini-card {
  flex-shrink:   0;
  width:         150px;
  background:    var(--card);
  border-radius: 14px;
  border:        1px solid var(--border);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow 0.2s;
}

.mini-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

.mini-thumb {
  height:          80px;
  background:      linear-gradient(145deg, #F5EDD8, #EDE0C4);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.mini-body { padding: 9px 10px 11px; }

.mini-tag {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  3px;
}

.mini-title {
  font-size:     0.78rem;
  font-weight:   600;
  line-height:   1.4;
  color:         var(--text);
  margin-bottom: 6px;
}

.mini-time {
  font-size: 0.68rem;
  color:     var(--text-dim);
}

/* ── Article list items ── */
.article-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     12px 16px;
  border-bottom: 1px solid var(--border);
  cursor:      pointer;
  transition:  background 0.15s;
}

.article-item:last-child { border-bottom: none; }
.article-item:hover { background: rgba(184, 146, 74, 0.03); }

.item-thumb {
  width:         56px;
  height:        56px;
  border-radius: 11px;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

/* Thumbnail background tints */
.t-gold  { background: #F8F0E0; }
.t-amber { background: #FDF2E0; }
.t-teal  { background: #E8F5F2; }
.t-rose  { background: #FDF0F0; }
.t-sage  { background: #EEF5EC; }

.item-body {
  flex:      1;
  min-width: 0;
}

.item-tag {
  font-size:      0.63rem;
  font-weight:    700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  3px;
}

.item-title {
  font-size:     0.875rem;
  font-weight:   500;
  line-height:   1.45;
  color:         var(--text);
  margin-bottom: 4px;
}

.item-meta {
  font-size:   0.71rem;
  color:       var(--text-muted);
  display:     flex;
  align-items: center;
  gap:         5px;
}

.item-save {
  width:         30px;
  height:        30px;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--text-dim);
  border:        none;
  background:    transparent;
  border-radius: 8px;
  cursor:        pointer;
  transition:    color 0.2s, background 0.2s;
}

.item-save:hover {
  color:      var(--gold);
  background: var(--gold-pale);
}

.item-save svg {
  width:  16px;
  height: 16px;
}

/* ── Stat strip ── */
.stat-strip {
  margin:  6px 16px;
  display: flex;
  gap:     10px;
}

.stat-card {
  flex:          1;
  background:    var(--card);
  border-radius: 12px;
  border:        1px solid var(--border);
  padding:       14px 12px;
  text-align:    center;
}

.stat-num {
  font-family:   'Prompt', sans-serif;
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--gold);
  line-height:   1;
  margin-bottom: 4px;
}

.stat-label {
  font-size:   0.7rem;
  font-weight: 500;
  color:       var(--text-muted);
}

/* ── Quote banner ── */
.quote-banner {
  margin:        6px 16px;
  padding:       22px 20px 20px;
  background:    var(--gold-pale);
  border-radius: var(--radius);
  border:        1px solid var(--gold-border);
  position:      relative;
  overflow:      hidden;
}

.quote-banner::before {
  content:     '\201C';
  position:    absolute;
  top:         -10px;
  left:        12px;
  font-family: 'Prompt', sans-serif;
  font-size:   5.5rem;
  color:       var(--gold);
  opacity:     0.25;
  line-height: 1;
}

.quote-text {
  font-family:   'Prompt', sans-serif;
  font-size:     0.95rem;
  font-style:    italic;
  line-height:   1.7;
  color:         var(--text);
  margin-bottom: 12px;
  position:      relative;
}

.quote-source {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.quote-line {
  width:      18px;
  height:     1px;
  background: var(--gold);
}

.quote-author {
  font-size:      0.73rem;
  font-weight:    700;
  color:          var(--gold-dark);
  letter-spacing: 0.04em;
}

/* ── Tip banner ── */
.tip-banner {
  margin:        6px 16px;
  padding:       16px 18px;
  background:    var(--surface);
  border-radius: 14px;
  border:        1px solid var(--border-strong);
  display:       flex;
  align-items:   center;
  gap:           14px;
  cursor:        pointer;
}

.tip-icon {
  width:           44px;
  height:          44px;
  border-radius:   11px;
  background:      var(--gold-pale);
  border:          1px solid var(--gold-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.tip-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  2px;
}

.tip-title {
  font-size:   0.84rem;
  font-weight: 600;
  color:       var(--text);
  line-height: 1.4;
}

/* ── Expert profiles ── */
.expert-scroll {
  padding:         0 16px;
  overflow-x:      auto;
  scrollbar-width: none;
}

.expert-scroll::-webkit-scrollbar { display: none; }

.expert-row {
  display:        flex;
  gap:            10px;
  padding-bottom: 4px;
}

.expert-card {
  flex-shrink:   0;
  width:         130px;
  background:    var(--card);
  border-radius: 14px;
  border:        1px solid var(--border);
  padding:       14px 12px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color 0.2s;
}

.expert-card:hover { border-color: var(--gold-border); }

.expert-avatar {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      var(--gold-pale);
  border:          2px solid var(--gold-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 8px;
  font-family:     'Prompt', sans-serif;
  font-size:       1.1rem;
  font-weight:     700;
}

.expert-name {
  font-size:     0.76rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 2px;
}

.expert-role {
  font-size:   0.67rem;
  color:       var(--text-muted);
  line-height: 1.35;
}

.expert-articles {
  margin-top:  7px;
  font-size:   0.65rem;
  font-weight: 600;
  color:       var(--gold);
}


/* ═══════════════════════════════════════════════════════════
   20. TOOL-SPECIFIC: ACTIVITY TABLE & FOOD SEARCH
   ═══════════════════════════════════════════════════════════ */

/* Activity / data table (tool-tdee) */
.activity-table {
  width:           100%;
  border-collapse: collapse;
  margin:          14px 0;
  font-size:       0.8rem;
}

.activity-table thead tr { background: var(--gold-pale); }

.activity-table th {
  padding:       8px 10px;
  text-align:    left;
  font-weight:   700;
  color:         var(--gold-dark);
  border-bottom: 2px solid var(--gold-border);
}

.activity-table td {
  padding:       9px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height:   1.45;
  color:         var(--text-muted);
}

.activity-table tr:last-child td { border-bottom: none; }

.activity-table td:last-child {
  font-family:  'Prompt', sans-serif;
  font-weight:  600;
  color:        var(--gold-dark);
  white-space:  nowrap;
}

.activity-table tr:nth-child(even) td { background: rgba(250, 248, 243, 0.6); }

/* Food search section */
.search-section { padding: 0 20px 24px; }

.search-wrap {
  position:      relative;
  margin-bottom: 16px;
}

.search-icon {
  position:       absolute;
  left:           15px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text-dim);
  width:          20px;
  height:         20px;
  pointer-events: none;
  transition:     color 0.2s;
}

.search-wrap:focus-within .search-icon { color: var(--gold); }

.search-input {
  width:         100%;
  height:        52px;
  padding:       0 44px 0 46px;
  border-radius: 14px;
  border:        1.5px solid var(--border-strong);
  background:    var(--card);
  font-size:     0.9rem;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  box-shadow:    0 1px 4px rgba(42, 31, 20, 0.05);
}

.search-input::placeholder { color: var(--text-dim); }

.search-input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}

.search-clear {
  position:        absolute;
  right:           13px;
  top:             50%;
  transform:       translateY(-50%);
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--surface);
  border:          none;
  cursor:          pointer;
  display:         none;
  align-items:     center;
  justify-content: center;
  color:           var(--text-muted);
  transition:      background 0.18s;
}

.search-clear:hover { background: var(--gold-pale); color: var(--gold); }
.search-clear svg   { width: 12px; height: 12px; }
.search-clear.visible { display: flex; }

/* Popular search chips */
.popular-label {
  font-size:      0.64rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  9px;
}

.popular-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 22px;
}

.chip {
  padding:       5px 12px;
  border-radius: 100px;
  font-size:     0.74rem;
  font-weight:   500;
  color:         var(--text-muted);
  background:    transparent;
  border:        1.5px solid var(--border-strong);
  cursor:        pointer;
  transition:    all 0.18s;
}

.chip:hover {
  color:        var(--gold-dark);
  background:   var(--gold-pale);
  border-color: var(--gold-border);
}

/* Results count bar */
.results-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
}

.results-count {
  font-size:   0.72rem;
  color:       var(--text-dim);
  font-weight: 500;
}

.results-count span {
  font-weight: 700;
  color:       var(--text-muted);
}

/* Food list */
.food-list {
  background:    var(--card);
  border-radius: var(--radius);
  border:        1px solid var(--border);
  overflow:      hidden;
}

.food-item {
  border-bottom: 1px solid var(--border);
  transition:    background 0.18s;
}

.food-item:last-child { border-bottom: none; }

.food-row {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     14px 15px 12px;
  cursor:      pointer;
  transition:  background 0.15s;
}

.food-row:hover { background: #FDFCFA; }

.food-main {
  flex:      1;
  min-width: 0;
}

.food-name-th {
  font-size:   0.9rem;
  font-weight: 700;
  color:       var(--text);
  margin-bottom: 1px;
  line-height: 1.3;
}

.food-name-en {
  font-size:     0.7rem;
  color:         var(--text-dim);
  margin-bottom: 7px;
}

.food-serving {
  font-size:     0.68rem;
  color:         var(--text-dim);
  margin-bottom: 7px;
}

.food-macros {
  display:   flex;
  gap:       5px;
  flex-wrap: wrap;
}

.macro-pill {
  padding:       2px 8px;
  border-radius: 100px;
  font-size:     0.65rem;
  font-weight:   600;
}

.macro-protein { background: #EEF0FF; color: #4A56B0; }
.macro-carb    { background: #FFF8E8; color: #9A7A3A; }
.macro-fat     { background: #FFF0F0; color: #B05050; }

.food-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
  flex-shrink:    0;
}

.expand-btn {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--surface);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-dim);
  transition:      all 0.2s;
  font-size:       0.75rem;
}

.expand-btn:hover { background: var(--gold-pale); color: var(--gold); }
.expand-btn.open  { background: var(--gold-pale); color: var(--gold-dark); transform: rotate(180deg); }

/* Food icon / initial */
.food-icon-wrap {
  width:        44px;
  height:       44px;
  border-radius: var(--radius-sm);
  flex-shrink:  0;
  overflow:     hidden;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

.food-initial {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-family:     'Prompt', sans-serif;
  font-size:       0.85rem;
  font-weight:     700;
  color:           #7A6A58;
}

/* No results state */
.no-results {
  display:       none;
  text-align:    center;
  padding:       40px 20px;
  background:    var(--card);
  border-radius: var(--radius);
  border:        1px solid var(--border);
}

.no-results.visible { display: block; }

.no-results-icon {
  font-size:     2.2rem;
  margin-bottom: 10px;
}

.no-results-icon svg {
  width:  2.2rem;
  height: 2.2rem;
  color:  var(--text-dim);
}

.no-results h3 {
  font-family:   'Prompt', sans-serif;
  font-size:     0.95rem;
  color:         var(--text);
  margin-bottom: 5px;
}

.no-results p {
  font-size: 0.78rem;
  color:     var(--text-muted);
}

/* Food data table (SEO article) */
.food-table {
  width:           100%;
  border-collapse: collapse;
  margin-top:      12px;
  border-radius:   var(--radius-sm);
  overflow:        hidden;
  border:          1px solid var(--border);
}

.food-table th {
  background:     var(--surface);
  font-size:      0.67rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  padding:        8px 12px;
  text-align:     left;
}

.food-table th:last-child { text-align: right; }

.food-table td {
  padding:      9px 12px;
  font-size:    0.78rem;
  border-top:   1px solid var(--border);
  color:        var(--text-muted);
}

.food-table td:first-child { font-weight: 600; color: var(--text); }

.food-table td:last-child {
  text-align:  right;
  font-weight: 700;
  color:       var(--gold-dark);
}

.food-table tr:nth-child(even) td { background: rgba(250, 248, 243, 0.6); }

/* Meal distribution grid */
.meal-dist {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
  margin-top:            12px;
}

.meal-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       12px 12px 10px;
}

.meal-label {
  font-size:     0.7rem;
  font-weight:   700;
  color:         var(--text-muted);
  margin-bottom: 4px;
}

.meal-pct {
  font-family:   'Prompt', sans-serif;
  font-size:     1.3rem;
  font-weight:   600;
  color:         var(--gold-dark);
  line-height:   1;
  margin-bottom: 4px;
}

.meal-kcal {
  font-size: 0.68rem;
  color:     var(--text-dim);
}

.meal-bar {
  height:        4px;
  background:    var(--surface);
  border-radius: 100px;
  overflow:      hidden;
  margin-top:    8px;
}

.meal-bar-fill {
  height:        100%;
  border-radius: 100px;
  background:    linear-gradient(90deg, var(--gold), var(--gold-dark));
}

.meal-card.snack {
  grid-column: 1 / -1;
  display:     flex;
  align-items: center;
  gap:         12px;
}

.meal-card.snack .meal-bar {
  flex:      1;
  margin-top: 0;
}

/* Bullet list */
.bullet-list {
  list-style: none;
  margin-top: 10px;
}

.bullet-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
  font-size:     0.83rem;
  color:         var(--text-muted);
  padding:       7px 0;
  border-bottom: 1px solid var(--border);
  line-height:   1.5;
}

.bullet-list li:last-child { border-bottom: none; }

.bullet-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--gold);
  flex-shrink:   0;
  margin-top:    6px;
}

.bullet-list strong { color: var(--text); font-weight: 600; }

/* Detail / "View full page" link */
.detail-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  margin-top:      14px;
  padding:         10px 16px;
  background:      var(--gold-pale);
  border:          1px solid var(--gold-border);
  border-radius:   var(--radius-sm);
  color:           var(--gold);
  font-size:       0.82rem;
  font-weight:     700;
  text-decoration: none;
  transition:      background 0.18s;
  cursor:          pointer;
}

.detail-link:hover { background: #f0e4c8; }

/* Food page inline button */
.food-page-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  margin-top:      7px;
  padding:         4px 10px;
  background:      var(--gold-pale);
  border:          1px solid var(--gold-border);
  border-radius:   20px;
  color:           var(--gold);
  font-size:       0.72rem;
  font-weight:     700;
  text-decoration: none;
  transition:      background 0.15s;
  cursor:          pointer;
}

.food-page-btn:hover { background: #f0e4c8; }
.food-page-btn svg   { width: 11px; height: 11px; }

/* "More results" bar */
.more-results {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin:        4px 0 16px;
  padding:       12px 16px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 12px;
  font-size:     0.8rem;
  color:         var(--text-muted);
}

.more-results strong { color: var(--text); }

/* Generic divider line */
.divider {
  height:     1px;
  background: var(--border);
  margin:     0 20px;
}


/* ═══════════════════════════════════════════════════════════
   21. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

/* Visually hidden but accessible */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Centred container */
.container {
  max-width: var(--max);
  margin:    0 auto;
  padding:   0 16px;
}

/* Spacing helpers */
.section-spacer { height: 8px; }

/* Text colours */
.text-gold  { color: var(--gold); }
.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
/* ─── BMI Tool ─── */

/* ── Calculator body wrapper ──────────────────────────────── */
.calc-body {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* ── Input group (label + input-row + error) ──────────────── */
.input-group {
  margin-bottom: 16px;
}

.input-group label {
  display:        block;
  font-size:      0.78rem;
  font-weight:    700;
  color:          var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom:  8px;
}

/* ── Input row: relative wrapper for input + unit span ─────── */
.input-row {
  position: relative;
}

.input-row input {
  width:         100%;
  height:        46px;
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:    var(--bg);
  padding:       0 40px 0 12px;
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.input-row input::-webkit-outer-spin-button,
.input-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.input-row input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}

.input-row input::placeholder {
  color:       var(--text-dim);
  font-weight: 400;
}

/* Error state on the row */
.input-row.error input {
  border-color: #DC2626;
  box-shadow:   0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* ── Error message ────────────────────────────────────────── */
.error-msg {
  display:     none;
  margin-top:  5px;
  font-size:   0.72rem;
  font-weight: 500;
  color:       #DC2626;
  line-height: 1.4;
}

.error-msg.visible {
  display: block;
}

/* ── Result top row: BMI value left, badge right ───────────── */
.result-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   14px;
}

/* ── Result value wrapper ─────────────────────────────────── */
.result-value-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

/* ── Large BMI number ─────────────────────────────────────── */
.result-value {
  font-family:  'Prompt', sans-serif;
  font-size:    3rem;
  font-weight:  700;
  color:        var(--text);
  line-height:  1.1;
}

/* ── Small label under BMI number ────────────────────────── */
.result-label-small {
  font-size:   0.72rem;
  color:       var(--text-muted);
  margin-top:  2px;
  line-height: 1.3;
}

/* ── Category badge ───────────────────────────────────────── */
.category-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       4px 14px;
  border-radius: 100px;
  font-size:     0.78rem;
  font-weight:   700;
  white-space:   nowrap;
  flex-shrink:   0;
}

.badge-thin {
  background: #EFF6FF;
  color:      #2563EB;
}

.badge-normal {
  background: #ECFDF5;
  color:      #059669;
}

.badge-over {
  background: #FFFBEB;
  color:      #D97706;
}

.badge-obese1 {
  background: #FEF2F2;
  color:      #DC2626;
}

.badge-obese2 {
  background: #DC2626;
  color:      #fff;
}

/* ── Scale bar container ──────────────────────────────────── */
.scale-wrap {
  margin-top: 16px;
}

/* ── Gradient BMI track ───────────────────────────────────── */
.scale-bar-outer {
  position:      relative;
  height:        8px;
  border-radius: 4px;
  background:    linear-gradient(
    to right,
    #60A5FA 0%,           /* thin  < 18.5  */
    #60A5FA 22%,
    #34D399 22%,          /* normal 18.5-23 */
    #34D399 47%,
    #FBBF24 47%,          /* overweight 23-25 */
    #FBBF24 55%,
    #F87171 55%,          /* obese1 25-30 */
    #F87171 75%,
    #EF4444 75%,          /* obese2 30+ */
    #EF4444 100%
  );
}

/* ── Dot indicator on track ───────────────────────────────── */
.scale-indicator {
  position:         absolute;
  top:              -3px;
  width:            14px;
  height:           14px;
  border-radius:    50%;
  background:       #fff;
  border:           2px solid var(--gold);
  transform:        translateX(-50%);
  transition:       left 0.4s ease, border-color 0.3s ease;
  box-shadow:       0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ── Scale number labels below bar ───────────────────────── */
.scale-labels {
  display:         flex;
  justify-content: space-between;
  margin-top:      4px;
  font-size:       0.6rem;
  color:           var(--text-muted);
}

/* ── Scale legend grid ────────────────────────────────────── */
.scale-legend {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4px 10px;
  margin-top:            10px;
  font-size:             0.72rem;
  color:                 var(--text-muted);
}

/* ── Legend row item ──────────────────────────────────────── */
.legend-item {
  display:     flex;
  align-items: center;
  line-height: 1.4;
}

/* ── Coloured legend dot ──────────────────────────────────── */
.legend-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  margin-right: 5px;
  flex-shrink:  0;
}

/* ── Asian note info box ──────────────────────────────────── */
.asian-note {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  margin-top:    12px;
  padding:       10px 12px;
  background:    var(--gold-pale);
  border-radius: var(--radius-sm);
  font-size:     0.78rem;
  color:         var(--text-muted);
  line-height:   1.55;
}

/* ── Icon inside asian-note ───────────────────────────────── */
.note-icon {
  color:       var(--gold);
  flex-shrink: 0;
  margin-top:  1px;
  line-height: 0;
}

/* ── Prose wrapper (pass-through container for article text) ── */
.prose {
  /* No extra styles needed; inherits article-section paragraph rules.
     Declared so the element is styled by inherited selectors. */
}

.prose p {
  font-size:     0.9rem;
  line-height:   1.75;
  color:         var(--text);
  margin-bottom: 12px;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  font-weight: 700;
  color:       var(--text);
}

/* ── Comparison table ─────────────────────────────────────── */
.compare-table {
  width:           100%;
  border-collapse: collapse;
  border-radius:   8px;
  overflow:        hidden;
  font-size:       0.8rem;
  margin:          12px 0;
  border:          1px solid var(--border);
}

.compare-table thead tr {
  background: var(--gold-pale);
}

.compare-table th {
  padding:       8px 10px;
  text-align:    left;
  font-weight:   700;
  color:         var(--gold-dark);
  border-bottom: 2px solid var(--gold-border);
  font-size:     0.78rem;
}

.compare-table td {
  padding:       9px 10px;
  border-bottom: 1px solid var(--border);
  line-height:   1.45;
  vertical-align: middle;
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table tr:nth-child(even) td {
  background: rgba(250, 248, 243, 0.6);
}

/* Table cell modifiers */
.td-cat {
  font-weight: 700;
}

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

.td-asian-val {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color:       var(--text);
}

/* ── Numbered tip list ────────────────────────────────────── */
.tip-list {
  list-style: none;
  margin-top: 14px;
}

.tip-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  font-size:     0.875rem;
  color:         var(--text);
  line-height:   1.7;
  padding:       10px 0;
  border-bottom: 1px solid var(--border);
}

.tip-list li:last-child {
  border-bottom: none;
}

.tip-list li strong {
  font-weight: 700;
  color:       var(--text);
}

/* ── Numbered badge for tip items ────────────────────────── */
.tip-num {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--gold-pale);
  border:          1px solid var(--gold-border);
  font-size:       0.72rem;
  font-weight:     700;
  color:           var(--gold-dark);
  margin-top:      3px;
}

/* ── Section divider (thin full-width rule between page sections) */
.section-divider {
  height:     1px;
  background: var(--border);
  margin:     4px 0;
}

/* ── Newsletter icon ──────────────────────────────────────── */
.nl-icon {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    rgba(184, 146, 74, 0.12);
  color:         var(--gold);
  margin:        0 auto 12px;
  flex-shrink:   0;
}
/* ─── Water Tool ─── */

/* ── Calculator header ── */
.calc-header {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin-bottom:  20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--border);
}

.calc-header-icon {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      var(--gold-pale);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.calc-header-text {
  flex: 1;
}

.calc-header-label {
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--text-muted);
  margin-bottom:  2px;
}

.calc-header-title {
  font-family: 'Prompt', sans-serif;
  font-size:   0.9rem;
  font-weight: 700;
  color:       var(--text);
}

/* ── Calculator body ── */
.calc-body {
  /* intentionally no extra padding — inherits calc-card padding */
}

/* ── Field (form group alias) ── */
.field {
  margin-bottom: 16px;
}

.field-label {
  display:       block;
  font-size:     0.78rem;
  font-weight:   700;
  color:         var(--text-muted);
  margin-bottom: 8px;
}

/* ── Weight input with stepper ── */
.weight-input-wrap {
  display:     flex;
  align-items: center;
  gap:         0;
  position:    relative;
}

.weight-input {
  flex:          1;
  height:        52px;
  border:        1.5px solid var(--border-strong);
  border-right:  none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background:    var(--bg);
  padding:       0 56px 0 12px;
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  min-width:     0;
}

.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.weight-input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
  z-index:      1;
}

.weight-unit {
  position:       absolute;
  right:          52px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--text-muted);
  pointer-events: none;
  z-index:        2;
}

.weight-stepper {
  display:        flex;
  flex-direction: column;
  border:         1.5px solid var(--border-strong);
  border-left:    none;
  border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
  overflow:       hidden;
  flex-shrink:    0;
}

.step-btn {
  width:           44px;
  height:          26px;
  border:          none;
  background:      var(--surface);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-muted);
  transition:      background 0.15s, color 0.15s;
  padding:         0;
}

.step-btn:first-child {
  border-bottom: 1px solid var(--border);
}

.step-btn svg {
  width:  14px;
  height: 14px;
}

.step-btn:hover {
  background: var(--gold-pale);
  color:      var(--gold);
}

/* ── Pill radio group ── */
.pill-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.pill-option {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.pill-label {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        7px 14px;
  border-radius:  100px;
  border:         1.5px solid var(--border-strong);
  font-size:      0.78rem;
  font-weight:    600;
  cursor:         pointer;
  color:          var(--text-muted);
  background:     var(--bg);
  transition:     all 0.15s;
  user-select:    none;
}

.pill-label:hover {
  border-color: var(--gold-border);
  color:        var(--gold-dark);
  background:   var(--gold-pale);
}

.pill-option:checked + .pill-label {
  border-color: var(--gold);
  background:   var(--gold-pale);
  color:        var(--text);
}

.pill-icon {
  display:     flex;
  align-items: center;
  color:       var(--gold);
}

.pill-sub {
  font-size:   0.6rem;
  color:       var(--text-muted);
  margin-left: 2px;
}

/* ── Result panel ── */
.result-panel {
  display: none;
}

.result-panel.visible {
  display:    block;
  padding-top: 0;
}

/* ── Result number (water variant: large litres display) ── */
.result-panel .result-number {
  font-family:   'Prompt', sans-serif;
  font-size:     2.8rem;
  font-weight:   700;
  color:         var(--gold-dark);
  line-height:   1.1;
  margin-bottom: 4px;
}

.result-panel .result-number span {
  font-size:   1rem;
  font-weight: 500;
  color:       var(--text-muted);
}

.result-panel .result-main {
  text-align:    center;
  padding:       20px 0 12px;
}

.result-glasses {
  font-size:  0.85rem;
  color:      var(--text-muted);
  text-align: center;
}

/* ── Pop animation for result number ── */
@keyframes pop {
  0%   { transform: scale(0.85); opacity: 0.6; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1;   }
}

.result-number.pop {
  animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Glass visualisation ── */
.glasses-viz {
  margin:  12px 0 16px;
}

.glasses-label {
  font-size:     0.68rem;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         var(--text-muted);
  margin-bottom: 10px;
  text-align:    center;
}

.glasses-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             6px;
  justify-content: center;
}

/* Individual glass item */
.glass-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  width:          32px;
}

.glass-num {
  font-size:   0.55rem;
  font-weight: 700;
  color:       var(--text-dim);
  line-height: 1;
}

/* SVG cup pieces */
.glass-svg {
  width:  26px;
  height: 33px;
  overflow: visible;
}

.cup-body {
  fill:   var(--surface);
  stroke: none;
}

.cup-outline {
  fill:         none;
  stroke:       var(--border-strong);
  stroke-width: 1.5;
}

.water-fill {
  fill:       var(--gold);
  opacity:    0.25;
  transition: y 0.4s ease;
}

/* Filled glass state */
.glass-item.filled .cup-body {
  fill: var(--gold-pale);
}

.glass-item.filled .water-fill {
  fill:    var(--gold);
  opacity: 0.55;
}

.glass-item.filled .cup-outline {
  stroke: var(--gold);
}

.glass-item.filled .glass-num {
  color: var(--gold-dark);
}

/* ── Tip card ── */
.tip-card {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding:       14px;
  margin-top:    4px;
}

.tip-card-icon {
  width:           38px;
  height:          38px;
  border-radius:   10px;
  background:      var(--gold-pale);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.tip-card-text {
  flex: 1;
}

.tip-card-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  3px;
}

.tip-card-body {
  font-size:   0.82rem;
  line-height: 1.6;
  color:       var(--text-muted);
}

.tip-card-body strong {
  color:       var(--text);
  font-weight: 700;
}

/* ── Article h2 (water / tool page variant with em italic) ── */
.article-h2 {
  font-family:   'Prompt', sans-serif;
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--gold-dark);
  line-height:   1.4;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold-pale);
  margin-bottom: 14px;
  margin-top:    0;
}

.article-h2 em {
  font-style: italic;
  color:      var(--gold-dark);
}

/* ── Highlight block (callout box) ── */
.highlight-block {
  background:    var(--gold-pale);
  border:        1px solid var(--gold-border);
  border-left:   3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding:       14px 16px;
  margin:        14px 0;
  font-size:     0.875rem;
  line-height:   1.65;
  color:         var(--text);
}

.highlight-block p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
}

.highlight-block strong {
  color:       var(--gold-dark);
  font-weight: 700;
}

/* ── Section divider ── */
.section-divider {
  height:     1px;
  background: var(--border);
  margin:     0 0 0 0;
}

/* ── Dehydration list ── */
.dehy-list {
  margin: 14px 0;
}

.dehy-item {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       12px 0;
  border-bottom: 1px solid var(--border);
}

.dehy-item:last-child {
  border-bottom: none;
}

.dehy-pct {
  font-family:   'Prompt', sans-serif;
  font-size:     1.2rem;
  font-weight:   700;
  color:         var(--gold-dark);
  flex-shrink:   0;
  width:         40px;
  line-height:   1.2;
}

.dehy-pct.red {
  color: #C0392B;
}

.dehy-body {
  flex: 1;
}

.dehy-title {
  font-size:     0.84rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 3px;
  line-height:   1.4;
}

.dehy-desc {
  font-size:   0.78rem;
  color:       var(--text-muted);
  line-height: 1.55;
}

/* ── Tips numbered list ── */
.tips-list {
  list-style:  none;
  padding:     0;
  margin:      12px 0;
}

.tips-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       10px 0;
  border-bottom: 1px solid var(--border);
}

.tips-list li:last-child {
  border-bottom: none;
}

.tip-num {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--gold-pale);
  border:          1px solid var(--gold-border);
  font-size:       0.72rem;
  font-weight:     700;
  color:           var(--gold-dark);
  flex-shrink:     0;
  margin-top:      1px;
}

.tip-text {
  font-size:   0.875rem;
  line-height: 1.65;
  color:       var(--text-muted);
  flex:        1;
}

.tip-text strong {
  color:       var(--text);
  font-weight: 700;
}

/* ── Drinks comparison grid ── */
.drinks-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-top:            12px;
}

.drink-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       14px 12px 12px;
  text-align:    center;
  transition:    border-color 0.2s;
}

.drink-card.best  { border-color: var(--gold-border); }
.drink-card.ok    { border-color: rgba(42, 31, 20, 0.10); }
.drink-card.low   { border-color: var(--border); }
.drink-card.poor  { border-color: var(--border); }

.drink-emoji {
  width:           42px;
  height:          42px;
  margin:          0 auto 8px;
  border-radius:   50%;
  background:      var(--gold-pale);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.drink-card.best  .drink-emoji { background: var(--gold-pale); color: var(--gold); }
.drink-card.ok    .drink-emoji { background: #E8F5F2;          color: #3A8C7A; }
.drink-card.low   .drink-emoji { background: #FEF3E2;          color: #9A7A3A; }
.drink-card.poor  .drink-emoji { background: #F0EEFF;          color: #6A5AB0; }

.drink-name {
  font-size:     0.8rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 3px;
}

.drink-pct {
  font-size:     0.72rem;
  font-weight:   600;
  color:         var(--text-muted);
  margin-bottom: 8px;
}

.drink-bar-wrap {
  height:        5px;
  background:    var(--surface);
  border-radius: 100px;
  overflow:      hidden;
}

.drink-bar {
  height:        100%;
  border-radius: 100px;
  background:    linear-gradient(90deg, var(--gold), var(--gold-dark));
}

.drink-card.ok   .drink-bar { background: linear-gradient(90deg, #3A8C7A, #2A7A6A); }
.drink-card.low  .drink-bar { background: linear-gradient(90deg, #B8924A, #9A7A3A); opacity: 0.6; }
.drink-card.poor .drink-bar { background: linear-gradient(90deg, #8A7AB0, #6A5AB0); }

/* ── FAQ section (water page standalone) ── */
.faq-section {
  margin:  0 0 8px;
  padding: 0 16px;
}

.faq-header {
  font-family:   'Prompt', sans-serif;
  font-size:     1.05rem;
  font-weight:   600;
  color:         var(--text);
  padding:       22px 0 12px;
}

/* ── Related tools (water page variant) ── */
.related-tools {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   9px;
  padding:               0 16px 24px;
}

.rel-tool {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   13px;
  padding:         14px 10px 12px;
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color 0.2s, box-shadow 0.2s;
}

.rel-tool:hover {
  border-color: var(--gold-border);
  box-shadow:   0 2px 10px rgba(0, 0, 0, 0.06);
}

.rel-icon {
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   8px;
  flex-shrink:     0;
  color:           var(--gold);
}

.rel-name {
  font-size:     0.82rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 2px;
}

.rel-desc {
  font-size:   0.68rem;
  color:       var(--text-muted);
  line-height: 1.35;
}

/* ── Newsletter icon (water variant uses .nl-icon) ── */
.nl-icon {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(184, 146, 74, 0.15);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 12px;
  flex-shrink:     0;
}
/* ─── BMR Tool ─── */

/* Calc card header row */
.calc-header {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin-bottom:  20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--border);
}

/* Icon circle inside calc-header */
.calc-icon {
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      var(--gold-pale);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
  flex-shrink:     0;
}

/* Title text group */
.calc-header-text h2 {
  font-family:  'Prompt', sans-serif;
  font-size:    0.95rem;
  font-weight:  700;
  margin:       0 0 2px;
  color:        var(--text);
}

.calc-header-text span {
  font-size: 0.7rem;
  color:     var(--text-muted);
}

/* Field group — alias for .form-group */
.field-group { margin-bottom: 16px; }

/* Field label — alias for .form-label */
.field-label {
  display:      block;
  font-size:    0.78rem;
  font-weight:  700;
  color:        var(--text-muted);
  margin-bottom: 8px;
}

/* Gender pills row */
.gender-pills {
  display: flex;
  gap:     8px;
}

/* BMR-specific gender pill overrides (pill shape, 40 px height) */
.gender-pills .gender-pill {
  flex: 1;
}

.gender-pills .gender-pill input[type="radio"] {
  display: none;
}

.gender-pills .gender-pill label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  height:          40px;
  border-radius:   100px;
  border:          1.5px solid var(--border-strong);
  font-size:       0.82rem;
  font-weight:     600;
  cursor:          pointer;
  transition:      all 0.18s;
  color:           var(--text-muted);
  background:      var(--bg);
  width:           100%;
  padding:         0;
}

.gender-pills .gender-pill input:checked + label {
  border-color: var(--gold);
  background:   var(--gold-pale);
  color:        var(--text);
}

/* Icon inside pill */
.pill-icon {
  display:     flex;
  align-items: center;
  color:       var(--gold);
}

/* 3-column inputs grid */
.inputs-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   10px;
  margin-bottom:         16px;
}

/* Wrapper for each input in .inputs-grid */
.input-wrap {
  position: relative;
}

/* Floating label above each input */
.input-float-label {
  display:      block;
  font-size:    0.68rem;
  font-weight:  700;
  color:        var(--text-muted);
  margin-bottom: 4px;
}

/* Number inputs inside .input-wrap — mirrors .input-unit-wrap input */
.input-wrap input {
  width:         100%;
  height:        46px;
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:    var(--bg);
  padding:       0 36px 0 12px;
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.input-wrap input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}

.input-wrap input::placeholder {
  color:       var(--text-dim);
  font-weight: 400;
}

.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Unit label inside .input-wrap — mirrors .input-unit */
.input-wrap .input-unit {
  position:       absolute;
  right:          9px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      0.68rem;
  font-weight:    600;
  color:          var(--text-dim);
  pointer-events: none;
}

/* Input error state */
.input-wrap input.input-error {
  border-color: #D04040;
  box-shadow:   0 0 0 3px rgba(208, 64, 64, 0.1);
}

/* Shake animation for invalid fields */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.shake {
  animation: shake 0.35s ease;
}

/* Result note — muted description below result */
.result-note {
  font-size:     0.78rem;
  color:         var(--text-muted);
  line-height:   1.5;
  margin-bottom: 16px;
  padding:       10px 12px;
  background:    var(--surface);
  border-radius: var(--radius-sm);
}

/* Energy breakdown section */
.breakdown-section {
  margin-top:  16px;
  padding-top: 16px;
  border-top:  1px solid var(--border);
}

.breakdown-title {
  font-size:      0.72rem;
  font-weight:    700;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  10px;
}

/* Segmented horizontal bar */
.breakdown-bar {
  display:       flex;
  height:        10px;
  border-radius: 5px;
  overflow:      hidden;
}

.bar-seg {
  /* flex-basis set inline per segment */
}

.seg-brain  { flex: 0 0 60%; background: #7C5CBF; }
.seg-muscle { flex: 0 0 20%; background: #4A9E7F; }
.seg-digest { flex: 0 0 20%; background: #E8924A; }

/* Labels row below the bar */
.breakdown-labels {
  display:         flex;
  justify-content: space-between;
  margin-top:      8px;
}

.breakdown-label {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
}

.bl-pct {
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--text);
}

.bl-name {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   0.65rem;
  color:       var(--text-muted);
}

.bl-dot {
  width:        7px;
  height:       7px;
  border-radius: 50%;
  flex-shrink:  0;
}

.bl-brain  { background: #7C5CBF; }
.bl-muscle { background: #4A9E7F; }
.bl-digest { background: #E8924A; }

/* TDEE nudge box */
.tdee-nudge {
  margin-top:      16px;
  padding:         12px 14px;
  border-radius:   var(--radius-sm);
  border:          1px solid var(--gold-border);
  background:      var(--gold-pale);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.nudge-text {
  font-size:   0.8rem;
  color:       var(--text);
  line-height: 1.4;
}

.nudge-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  background:      var(--gold);
  color:           #fff;
  border-radius:   100px;
  padding:         7px 14px;
  font-size:       0.78rem;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background 0.18s;
}

.nudge-link:hover { background: var(--gold-dark); }

/* Formula box (SEO article) */
.formula-box {
  background:    var(--gold-pale);
  border:        1px solid var(--gold-border);
  border-left:   3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding:       14px 16px;
  margin:        16px 0;
  font-size:     0.9rem;
  text-align:    center;
  color:         var(--text);
}

.formula-box p { margin: 0; }

/* TDEE activity table (SEO article) */
.tdee-table {
  width:           100%;
  border-collapse: collapse;
  margin:          14px 0;
  font-size:       0.8rem;
  border-radius:   var(--radius-sm);
  overflow:        hidden;
}

.tdee-table thead tr { background: var(--gold-pale); }

.tdee-table th {
  padding:       8px 10px;
  text-align:    left;
  font-weight:   700;
  color:         var(--gold-dark);
  border-bottom: 2px solid var(--gold-border);
  font-size:     0.75rem;
}

.tdee-table td {
  padding:       9px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height:   1.45;
  color:         var(--text-muted);
}

.tdee-table tr:last-child td { border-bottom: none; }

.tdee-table td:last-child {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color:       var(--gold-dark);
  white-space: nowrap;
}

.tdee-table tr:nth-child(even) td { background: rgba(250, 248, 243, 0.6); }

/* Standalone FAQ section (not inside .faq-list) */
.faq-section {
  padding: 0 16px;
  margin-bottom: 32px;
}

.faq-section h2 {
  font-family:   'Prompt', sans-serif;
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--gold-dark);
  line-height:   1.4;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold-pale);
  margin-bottom: 14px;
}

/* Related section heading */
.related-section h2 {
  font-family:    'Prompt', sans-serif;
  font-size:      1rem;
  font-weight:    600;
  color:          var(--text);
  padding:        18px 16px 12px;
  margin:         0;
}

/* Arrow span inside related-card (list variant) */
.related-arrow {
  flex-shrink:  0;
  font-size:    1rem;
  color:        var(--gold);
  margin-left:  auto;
  align-self:   center;
}

/* Related section: force single-column list so row cards have full width */
.related-section .related-grid {
  grid-template-columns: 1fr;
}

/* Related card — list/row variant (overrides hscroll card for BMR layout) */
.related-section .related-grid .related-card {
  display:    flex;
  align-items: center;
  gap:        12px;
  text-align: left;
  padding:    13px 14px;
  width:      auto;
}

.related-section .related-grid .related-icon {
  margin: 0;
  flex-shrink: 0;
}

.related-section .related-grid .related-body,
.related-section .related-grid .related-info {
  flex:      1;
  min-width: 0;
}

.related-section .related-grid .related-name {
  font-size:     0.82rem;
  font-weight:   700;
  margin-bottom: 2px;
}

.related-section .related-grid .related-desc {
  font-size:   0.7rem;
  line-height: 1.35;
}

/* Related icon colour — blue variant */
.ri-blue { background: #E8F0FE; }

/* Page header description paragraph */
.page-header p {
  font-size:   0.875rem;
  color:       var(--text-muted);
  line-height: 1.65;
  margin-top:  0;
}


/* ─── Food Search Fixes ─── */

/* Search box inner container (icon + input + clear button) */
.search-box {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--card);
  border:        1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding:       0 14px;
  height:        50px;
  box-shadow:    var(--shadow);
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}
.search-box svg {
  color:       var(--text-dim);
  flex-shrink: 0;
}
.search-box input {
  flex:         1;
  border:       none;
  background:   transparent;
  outline:      none;
  font-family:  'Prompt', sans-serif;
  font-size:    0.9rem;
  font-weight:  500;
  color:        var(--text);
  min-width:    0;
}
.search-box input::placeholder { color: var(--text-dim); }

/* Category pills container */
.cat-pills {
  display:    flex;
  gap:        8px;
  overflow-x: auto;
  padding:    12px 16px;
  -ms-overflow-style:  none;
  scrollbar-width:     none;
}
.cat-pills::-webkit-scrollbar { display: none; }

/* Food row link variant */
.food-row-link {
  text-decoration: none;
  color:           inherit;
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         12px 16px;
  transition:      background 0.15s;
  cursor:          pointer;
}
.food-row-link:hover { background: var(--gold-pale); }

/* Loading state */
.loading-state {
  text-align:  center;
  padding:     40px 16px;
  color:       var(--text-muted);
  font-size:   0.85rem;
}

/* ═══════════════════════════════════════════════════════════
   BLOG — LISTING PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Blog header ── */
.blog-header {
  padding:    36px 20px 24px;
  text-align: center;
}

.blog-header-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  12px;
}

.blog-header-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1.75rem;
  font-weight:   700;
  line-height:   1.25;
  color:         var(--text);
  margin-bottom: 10px;
}

.blog-header-title em {
  font-style:  italic;
  color:       var(--gold-dark);
  display:     block;
}

.blog-header-sub {
  font-size:     0.87rem;
  color:         var(--text-muted);
  line-height:   1.6;
  margin-bottom: 22px;
}

/* Header stats */
.blog-header-stats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  margin-top:      18px;
  font-size:       0.75rem;
  color:           var(--text-muted);
}
.blog-header-stats strong {
  font-weight: 700;
  color:       var(--gold-dark);
}
.blog-header-dot {
  width:         3px;
  height:        3px;
  border-radius: 50%;
  background:    var(--text-dim);
}

/* ── Search ── */
.blog-search {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--card);
  border:        1px solid var(--border-strong);
  border-radius: 100px;
  padding:       10px 18px;
  max-width:     380px;
  margin:        0 auto;
  transition:    border-color 0.15s, box-shadow 0.15s;
}

.blog-search:focus-within {
  border-color: var(--gold-border);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.1);
}

.blog-search-icon {
  flex-shrink: 0;
  color:       var(--text-dim);
}

.blog-search-input {
  flex:       1;
  border:     none;
  background: transparent;
  font-size:  0.875rem;
  color:      var(--text);
  outline:    none;
}

.blog-search-input::placeholder { color: var(--text-dim); }

/* ── Trending picks ── */
.blog-trending {
  padding: 0 20px;
  margin-bottom: 8px;
}
.blog-trending-head {
  margin-bottom: 12px;
}
.blog-trending-label {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  background:     var(--gold-pale);
  padding:        5px 12px;
  border-radius:  100px;
}
.blog-trending-scroll {
  display:   flex;
  gap:       10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.blog-trending-scroll::-webkit-scrollbar { display: none; }

.trend-card {
  flex:            0 0 280px;
  scroll-snap-align: start;
  display:         flex;
  gap:             12px;
  align-items:     center;
  padding:         14px;
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
  text-decoration: none;
  color:           var(--text);
  position:        relative;
  transition:      border-color 0.15s, box-shadow 0.15s;
}
.trend-card:hover {
  border-color: var(--gold-border);
  box-shadow:   0 3px 14px rgba(0,0,0,.06);
}
.trend-num {
  position:        absolute;
  top:             8px;
  left:            8px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--gold);
  color:           #fff;
  font-size:       0.65rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         2;
  line-height:     1;
}
.trend-img {
  width:           68px;
  height:          68px;
  border-radius:   var(--radius-sm);
  background:      linear-gradient(135deg, var(--gold-pale), #EDE0C4);
  overflow:        hidden;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
}
.trend-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.trend-body {
  flex:      1;
  min-width: 0;
}
.trend-title {
  font-weight:         600;
  font-size:           0.85rem;
  line-height:         1.4;
  margin-top:          4px;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

/* ── Toolbar (cats + sort) ── */
.blog-toolbar {
  padding: 8px 20px 0;
}

/* ── Category pills ── */
.blog-cats {
  padding: 0;
}
.cat-pill-count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     18px;
  height:        18px;
  font-size:     0.6rem;
  font-weight:   700;
  background:    var(--border);
  color:         var(--text-muted);
  border-radius: 100px;
  padding:       0 5px;
  margin-left:   4px;
}
.cat-pill.active .cat-pill-count {
  background: rgba(184,146,74,0.2);
  color:      var(--gold-dark);
}

/* ── Layout ── */
.blog-layout {
  padding:    16px 20px 0;
  margin-top: 4px;
}

/* ── Sidebar tags ── */
.sidebar-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.sidebar-tag {
  display:         inline-block;
  padding:         4px 10px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   100px;
  font-size:       0.72rem;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      border-color 0.15s, color 0.15s, background 0.15s;
}
.sidebar-tag:hover {
  border-color: var(--gold-border);
  color:        var(--gold-dark);
  background:   var(--gold-pale);
}

/* ── Featured post ── */
.blog-featured {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 16px;
  overflow:      hidden;
  margin-bottom: 16px;
  transition:    box-shadow 0.2s, border-color 0.2s;
}

.blog-featured:hover {
  border-color: var(--gold-border);
  box-shadow:   0 4px 20px rgba(0, 0, 0, 0.08);
}

.blog-featured-img {
  display:         block;
  height:          200px;
  background:      linear-gradient(135deg, var(--gold-pale), #EDE0C4);
  overflow:        hidden;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
}

.blog-featured-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.blog-featured-body {
  padding: 18px 18px 20px;
}

.blog-featured-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1.2rem;
  font-weight:   600;
  line-height:   1.35;
  color:         var(--text);
  margin:        10px 0 8px;
}

.blog-featured-title a {
  color:           inherit;
  text-decoration: none;
}

.blog-featured-title a:hover { color: var(--gold-dark); }

.blog-featured-excerpt {
  font-size:     0.85rem;
  color:         var(--text-muted);
  line-height:   1.65;
  margin-bottom: 14px;
}

.blog-featured-btn {
  display:         inline-flex;
  align-items:     center;
  font-size:       0.82rem;
  font-weight:     700;
  color:           var(--gold-dark);
  text-decoration: none;
  transition:      opacity 0.15s;
}

.blog-featured-btn:hover { opacity: 0.75; }

/* ── Blog grid ── */
.blog-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
  margin-bottom:         16px;
}

/* ── Blog card ── */
.blog-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 14px;
  overflow:      hidden;
  display:       flex;
  gap:           0;
  flex-direction: column;
  transition:    box-shadow 0.2s, border-color 0.2s;
}

.blog-card:hover {
  border-color: var(--gold-border);
  box-shadow:   0 3px 14px rgba(0, 0, 0, 0.07);
}

.blog-card-img {
  display:         block;
  height:          130px;
  background:      linear-gradient(135deg, var(--gold-pale), #EDE0C4);
  overflow:        hidden;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
  flex-shrink:     0;
}

.blog-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.blog-card-body {
  padding: 14px 14px 16px;
  flex:    1;
}

.blog-card-title {
  font-family:   'Prompt', sans-serif;
  font-size:     0.97rem;
  font-weight:   600;
  line-height:   1.4;
  margin:        6px 0 6px;
}

.blog-card-title a {
  color:           var(--text);
  text-decoration: none;
}

.blog-card-title a:hover { color: var(--gold-dark); }

.blog-card-excerpt {
  font-size:     0.78rem;
  color:         var(--text-muted);
  line-height:   1.55;
  margin-bottom: 10px;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

/* ── Shared meta ── */
.blog-cat-tag {
  display:        inline-block;
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  background:     var(--gold-pale);
  padding:        3px 8px;
  border-radius:  100px;
}

.blog-post-meta {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   0.72rem;
  color:       var(--text-muted);
}

.blog-sep { color: var(--text-dim); }

/* ── Pagination ── */
.blog-pagination {
  text-align:    center;
  padding:       16px 0 8px;
}

.blog-pagination .nav-links,
.blog-pagination .navigation {
  display:         flex;
  justify-content: center;
  gap:             6px;
  flex-wrap:       wrap;
}

.blog-pagination .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 10px;
  border-radius:   var(--radius-sm);
  font-size:       0.82rem;
  font-weight:     500;
  color:           var(--text-muted);
  text-decoration: none;
  background:      var(--card);
  border:          1px solid var(--border);
  transition:      all 0.15s;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
  background:   var(--gold-pale);
  border-color: var(--gold-border);
  color:        var(--gold-dark);
}

/* ── Empty state ── */
.blog-empty {
  padding:    60px 20px;
  text-align: center;
  color:      var(--text-muted);
}

.blog-empty svg {
  margin-bottom: 12px;
  color:         var(--text-dim);
}

.blog-empty p { font-size: 0.9rem; }

/* ── Sidebar (hidden on mobile) ── */
.blog-sidebar {
  display: none;
}

/* ── Sidebar widgets ── */
.sidebar-widget {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       18px 16px;
  margin-bottom: 14px;
}

.sidebar-widget-title {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  14px;
}

/* Sidebar tool links */
.sidebar-tools {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.sidebar-tool {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 6px;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  transition:      background 0.15s;
}

.sidebar-tool:hover { background: var(--surface); }

.sidebar-tool .tool-icon {
  width:         32px;
  height:        32px;
  flex-shrink:   0;
  margin-bottom: 0;
}

.sidebar-tool-info { flex: 1; }

.sidebar-tool-name {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--text);
}

.sidebar-tool-desc {
  font-size: 0.68rem;
  color:     var(--text-muted);
}

.sidebar-tool-arrow {
  font-size: 0.78rem;
  color:     var(--gold);
  opacity:   0;
  transition: opacity 0.15s;
}

.sidebar-tool:hover .sidebar-tool-arrow { opacity: 1; }

/* Sidebar category list */
.sidebar-cat-list {
  list-style: none;
}

.sidebar-cat-list li { border-bottom: 1px solid var(--border); }
.sidebar-cat-list li:last-child { border-bottom: none; }

.sidebar-cat-list a {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 0;
  font-size:       0.85rem;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color 0.15s;
}

.sidebar-cat-list a:hover,
.sidebar-cat-list a.active { color: var(--gold-dark); }

.sidebar-cat-count {
  font-size:     0.68rem;
  color:         var(--text-dim);
  background:    var(--surface);
  padding:       2px 7px;
  border-radius: 100px;
}

/* Sidebar newsletter */
.sidebar-nl-widget { background: var(--gold-pale); border-color: var(--gold-border); }
.sidebar-nl-widget .sidebar-widget-title { color: var(--gold-dark); }

.sidebar-nl-sub {
  font-size:     0.8rem;
  color:         var(--text-muted);
  line-height:   1.5;
  margin-bottom: 14px;
}

.sidebar-nl-form {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.sidebar-nl-form input {
  width:         100%;
  padding:       9px 12px;
  border:        1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  font-size:     0.82rem;
  background:    #fff;
  outline:       none;
}

.sidebar-nl-form input:focus { border-color: var(--gold); }

.sidebar-nl-form button {
  width:         100%;
  padding:       10px;
  background:    var(--gold);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  font-size:     0.85rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    background 0.15s;
}

.sidebar-nl-form button:hover { background: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — NEW LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hp-hero {
  padding:    44px 20px 32px;
  text-align: center;
}

.hp-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  padding:        5px 12px 5px 10px;
  border-radius:  100px;
  margin-bottom:  24px;
}

.hp-title {
  font-family:    'Prompt', sans-serif;
  font-size:      2.1rem;
  font-weight:    700;
  line-height:    1.2;
  color:          var(--text);
  letter-spacing: -0.01em;
  margin-bottom:  14px;
}

.hp-title em {
  font-style: italic;
  color:      var(--gold-dark);
}

.hp-sub {
  font-size:    0.92rem;
  color:        var(--text-muted);
  line-height:  1.65;
  margin:       0 auto 28px;
  max-width:    340px;
}

/* Hero search */
.hp-search {
  position:      relative;
  display:       flex;
  align-items:   center;
  max-width:     420px;
  margin:        0 auto 24px;
  background:    var(--card);
  border:        1px solid var(--border-strong);
  border-radius: 100px;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.hp-search:focus-within {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184,146,74,0.12);
}
.hp-search-icon {
  position:       absolute;
  left:           18px;
  color:          var(--text-dim);
  pointer-events: none;
}
.hp-search input {
  flex:        1;
  border:      none;
  background:  transparent;
  padding:     13px 18px 13px 48px;
  font-size:   0.88rem;
  color:       var(--text);
  outline:     none;
  min-width:   0;
}
.hp-search input::placeholder {
  color: var(--text-dim);
}

.hp-cta-row {
  display:         flex;
  gap:             10px;
  justify-content: center;
  flex-wrap:       wrap;
  margin-bottom:   32px;
}

.hp-cta-primary {
  display:         inline-flex;
  align-items:     center;
  background:      var(--gold);
  color:           #fff;
  font-size:       0.9rem;
  font-weight:     700;
  padding:         12px 24px;
  border-radius:   100px;
  text-decoration: none;
  transition:      background 0.15s, transform 0.1s;
  box-shadow:      0 2px 14px rgba(184, 146, 74, 0.30);
}

.hp-cta-primary:hover {
  background: var(--gold-dark);
  transform:  translateY(-1px);
}

.hp-cta-secondary {
  display:         inline-flex;
  align-items:     center;
  background:      var(--card);
  color:           var(--text);
  font-size:       0.9rem;
  font-weight:     600;
  padding:         12px 24px;
  border-radius:   100px;
  text-decoration: none;
  border:          1px solid var(--border-strong);
  transition:      border-color 0.15s, color 0.15s;
}

.hp-cta-secondary:hover {
  border-color: var(--gold-border);
  color:        var(--gold-dark);
}

.hp-stats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  padding:         16px 24px;
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   14px;
  max-width:       360px;
  margin:          0 auto;
}

.hp-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
}

.hp-stat strong {
  font-family: 'Prompt', sans-serif;
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--text);
}

.hp-stat span {
  font-size: 0.63rem;
  color:     var(--text-muted);
}

.hp-stat-sep {
  width:       1px;
  height:      32px;
  background:  var(--border);
  flex-shrink: 0;
}

/* ── Tools section ── */
.hp-tools {
  padding: 28px 16px 0;
}

.hp-tools-head {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  12px;
}

.hp-tools-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.hp-tool {
  background:      var(--card);
  border-radius:   14px;
  border:          1px solid var(--border);
  padding:         16px 14px 14px;
  cursor:          pointer;
  transition:      border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  position:        relative;
}

.hp-tool:hover {
  border-color: var(--gold-border);
  box-shadow:   0 4px 16px rgba(0, 0, 0, 0.07);
  transform:    translateY(-2px);
}

.hp-tool-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   10px;
}

.hp-tool-badge {
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  padding:        3px 7px;
  border-radius:  100px;
}

.hp-tool-name {
  font-size:     0.84rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 3px;
}

.hp-tool-desc {
  font-size:   0.7rem;
  color:       var(--text-muted);
  line-height: 1.4;
  flex:        1;
}

.hp-tool-arrow {
  margin-top: 12px;
  font-size:  0.78rem;
  color:      var(--gold);
  font-weight: 600;
  opacity:    0;
  transition: opacity 0.15s;
}

.hp-tool:hover .hp-tool-arrow {
  opacity: 1;
}

/* Wide card (food search) — spans full row */
.hp-tool-wide {
  grid-column:    1 / -1;
  flex-direction: row;
  align-items:    center;
  gap:            14px;
  padding:        14px 16px;
}

.hp-tool-wide .tool-icon { margin-bottom: 0; }

.hp-tool-text {
  flex: 1;
}

.hp-tool-wide .hp-tool-name {
  font-size:     0.88rem;
  margin-bottom: 2px;
}

.hp-tool-cta {
  font-size:   0.78rem;
  font-weight: 700;
  color:       var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Articles section ── */
.hp-articles {
  margin-top: 8px;
}

.hp-posts-grid {
  display:       flex;
  flex-direction: column;
  gap:           10px;
  padding:       0 16px;
}

.hp-post {
  background:    var(--card);
  border-radius: 14px;
  border:        1px solid var(--border);
  overflow:      hidden;
  transition:    box-shadow 0.2s, border-color 0.2s;
  display:       flex;
  flex-direction: column;
}

.hp-post:hover {
  border-color: var(--gold-border);
  box-shadow:   0 3px 16px rgba(0, 0, 0, 0.07);
}

.hp-post-thumb {
  display:         block;
  height:          140px;
  background:      linear-gradient(135deg, var(--gold-pale), #EDE0C4);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
  text-decoration: none;
  flex-shrink:     0;
}

.hp-post-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.hp-post-body {
  padding: 14px 16px 16px;
}

.hp-post-tag {
  display:        inline-block;
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  background:     var(--gold-pale);
  padding:        3px 8px;
  border-radius:  100px;
  margin-bottom:  8px;
}

.hp-post-title {
  font-family:   'Prompt', sans-serif;
  font-size:     0.95rem;
  font-weight:   600;
  line-height:   1.4;
  margin-bottom: 6px;
}

.hp-post-title a {
  color:           var(--text);
  text-decoration: none;
}

.hp-post-title a:hover { color: var(--gold-dark); }

.hp-post-excerpt {
  font-size:     0.78rem;
  color:         var(--text-muted);
  line-height:   1.55;
  margin-bottom: 10px;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

.hp-post-meta {
  font-size: 0.68rem;
  color:     var(--text-dim);
}

/* ── Hamburger button ── */
.nav-hamburger {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       6px;
  color:         var(--text);
  display:       flex;
  align-items:   center;
  margin-left:   auto;
  border-radius: var(--radius-sm);
  transition:    background 0.15s;
}
.nav-hamburger:hover { background: var(--surface); }

/* ── Desktop inline nav links (hidden on mobile) ── */
.nav-links {
  display: none;
}

/* ── Nav overlay ── */
.nav-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.35);
  z-index:    199;
}
.nav-overlay.open { display: block; }

/* ── Nav drawer ── */
.nav-drawer {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  width:      min(300px, 85vw);
  background: var(--card);
  z-index:    200;
  padding:    20px 0 32px;
  overflow-y: auto;
  transform:  translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.nav-drawer.open { transform: translateX(0); }

.drawer-close {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--text-muted);
  padding:       8px 16px;
  display:       block;
  margin-left:   auto;
  margin-bottom: 8px;
}
.drawer-close:hover { color: var(--text); }

.drawer-section {
  padding:       8px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.drawer-section:last-child { border-bottom: none; }

.drawer-label {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  padding:        0 20px 8px;
}

.drawer-link {
  display:         block;
  padding:         10px 20px;
  font-size:       0.875rem;
  color:           var(--text);
  text-decoration: none;
  transition:      background 0.15s, color 0.15s;
}
.drawer-link:hover {
  background: var(--surface);
  color:      var(--gold-dark);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 1024px)
   All rules below are desktop-only overrides. Mobile styles
   above this line remain UNCHANGED.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── Layout foundation ── */
  body {
    max-width: 1280px;
    padding:   0 48px;
  }

  .page-header {
    padding: 40px 0 32px;
  }

  .page-header h1 {
    font-size: 2.2rem;
  }

  /* ── Navigation ── */
  .nav-hamburger { display: none; }
  .nav-back      { display: flex; }

  .nav-links {
    display:     flex;
    align-items: center;
    margin-left: auto;
    gap:         2px;
  }

  .nav-link {
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-muted);
    padding:         6px 12px;
    border-radius:   var(--radius-sm);
    text-decoration: none;
    transition:      color 0.15s, background 0.15s;
  }

  .nav-link:hover {
    color:      var(--text);
    background: var(--surface);
  }

  /* ── Section heads on desktop: no horizontal padding (body handles it) ── */
  .section-head {
    padding-left:  0;
    padding-right: 0;
  }

  /* ── Blog listing page ── */
  .blog-header {
    padding:    56px 0 32px;
  }

  .blog-header-title { font-size: 2.4rem; }

  .blog-header-title em { display: inline; }

  .blog-search { max-width: 480px; }

  .blog-cats { padding: 0; }

  .blog-trending { padding: 0; margin-bottom: 12px; }
  .trend-card { flex: 0 0 320px; }
  .blog-toolbar { padding: 12px 0 0; }

  .blog-layout {
    display:               grid;
    grid-template-columns: 1fr 280px;
    gap:                   0 40px;
    align-items:           start;
    padding:               24px 0 0;
  }

  .blog-sidebar {
    display:  block;
    position: sticky;
    top:      80px;
  }

  .blog-featured-img { height: 280px; }

  .blog-featured-title { font-size: 1.45rem; }

  .blog-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
  }

  .blog-card-img { height: 150px; }

  /* ── Homepage hero ── */
  .hp-hero {
    padding: 72px 0 48px;
  }

  .hp-title {
    font-size: 3rem;
  }

  .hp-sub {
    font-size: 1rem;
    max-width: 480px;
  }

  .hp-search {
    max-width: 500px;
  }

  .hp-stats {
    max-width: 440px;
    gap:       28px;
  }

  /* ── Homepage tools ── */
  .hp-tools {
    padding: 40px 0 0;
  }

  .hp-tools-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .hp-tool {
    padding: 20px 18px 18px;
  }

  .hp-tool-wide {
    padding: 18px 24px;
  }

  .hp-tool-arrow {
    opacity: 0;
  }

  /* ── Homepage articles grid ── */
  .hp-articles {
    margin-top: 16px;
  }

  .hp-posts-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    padding:               0;
  }

  .hp-post {
    flex-direction: column;
  }

  .hp-post-thumb {
    height: 160px;
  }

  /* ── Legacy tool grid (related tools on tool pages) ── */
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .tool-card.wide {
    grid-column: 1 / -1;
  }

  .tool-card {
    padding: 20px 18px;
  }

  /* ── Footer ── */
  .site-footer {
    display:               grid;
    grid-template-columns: 1fr auto;
    align-items:           start;
    gap:                   16px 48px;
    padding:               32px 0 28px;
  }

  .footer-logo {
    grid-column: 1;
    grid-row:    1;
  }

  .footer-tools {
    grid-column:   1;
    grid-row:      2;
    margin-bottom: 0;
  }

  .footer-links {
    grid-column:    2;
    grid-row:       1 / 3;
    flex-direction: column;
    align-self:     center;
    gap:            8px 0;
  }

  .footer-copy {
    grid-column: 1 / -1;
    grid-row:    3;
    padding-top: 16px;
    border-top:  1px solid var(--border);
  }

  /* ── Tool pages — true 2-column layout ── */
  /* Calc LEFT (sticky sidebar), article RIGHT (scrolls) */
  .tool-content-wrap {
    display:               grid;
    grid-template-columns: 400px 1fr;
    gap:                   0 48px;
    align-items:           start;
    margin-top:            24px;
  }

  .tool-content-wrap .calc-card {
    position:      sticky;
    top:           80px;
    border-radius: 20px;
    padding:       28px 32px;
    margin:        0;
  }

  /* Right column: article flows as single column */
  .tool-content-wrap .tool-article-grid {
    display:    block;
    margin-top: 0;
  }

  /* ── Calc card base desktop polish ── */
  .calc-card {
    border-radius: 20px;
    padding:       28px 32px;
  }

  /* ── Related tools ── */
  .related-section .related-grid,
  .tools-grid.related {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Newsletter ── */
  .newsletter {
    max-width: none;
    padding:   32px 40px;
  }

  /* ── Article sections ── */
  .article-section {
    padding: 24px 0;
  }

  .compare-table,
  .tdee-table {
    font-size: 0.9rem;
  }

  .section-divider {
    margin: 32px 0;
  }

  /* ── Food search ── */
  .food-search-wrap {
    max-width: none;
  }

  /* ── Single post: Latest / Popular / Related on desktop ── */

  /* Hide mobile tabs, show column titles */
  .sp-tabs { display: none; }
  .sp-col-title {
    display:        block;
    font-family:    'Prompt', sans-serif;
    font-size:      1.05rem;
    font-weight:    600;
    padding:        18px 20px 0;
    margin:         0;
    color:          var(--text);
    position:       relative;
    padding-left:   34px;
  }
  .sp-col-title::before {
    content:       '';
    position:      absolute;
    left:          20px;
    top:           20px;
    bottom:        4px;
    width:         3px;
    background:    var(--gold);
    border-radius: 2px;
  }

  /* Show both panels side by side in one card */
  .sp-more {
    padding:    0;
    margin-top: 40px;
  }
  .sp-columns {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    background:            var(--card);
    border:                1px solid var(--border);
    border-radius:         var(--radius);
    overflow:              hidden;
  }
  .sp-panel {
    display: block !important;
  }
  .sp-col {
    border:        none;
    border-radius: 0;
  }
  /* Divider line between left and right */
  .sp-col:first-child {
    border-right: 1px solid var(--border);
  }

  .sp-item-img {
    width:  72px;
    height: 72px;
  }

  .sp-related {
    padding:    0;
    margin-top: 40px;
  }

  .sp-related-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .blog-card-img { height: 150px; }

  /* ── 404 page desktop ── */
  .e404 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .e404-visual {
    width:  240px;
    height: 210px;
  }
  .e404-code {
    font-size: 3.5rem;
  }
  .e404-title {
    font-size: 1.7rem;
  }
  .e404-sub {
    font-size:  0.92rem;
    max-width:  420px;
  }
  .e404-search {
    max-width: 500px;
  }
  .e404-links {
    grid-template-columns: repeat(5, 1fr);
    max-width: 600px;
  }

}


/* ═══════════════════════════════════════════════════════════
   SINGLE POST — LATEST / POPULAR / RELATED
   ═══════════════════════════════════════════════════════════ */

/* ── Container ── */
.sp-more {
  padding:    0 20px;
  margin:     24px auto 0;
}

/* ── Column title (visible on desktop only) ── */
.sp-col-title {
  display:        none;  /* hidden on mobile — tabs used instead */
}

/* ── Mobile tabs ── */
.sp-tabs {
  display:       flex;
  background:    var(--card);
  border:        1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.sp-tab {
  flex:            1;
  padding:         12px 0;
  font-size:       0.82rem;
  font-weight:     600;
  text-align:      center;
  background:      transparent;
  border:          none;
  color:           var(--text-muted);
  cursor:          pointer;
  position:        relative;
  transition:      color 0.2s;
}
.sp-tab.active {
  color: var(--gold);
}
.sp-tab.active::after {
  content:       '';
  position:      absolute;
  bottom:        0;
  left:          20%;
  right:         20%;
  height:        2.5px;
  background:    var(--gold);
  border-radius: 2px;
}

/* ── Columns wrapper ── */
.sp-columns {
  /* mobile: stacked, panels toggled */
}

/* ── Panels (mobile: tab switching) ── */
.sp-panel {
  display: none;
}
.sp-panel.active {
  display: block;
}
.sp-col {
  background:    var(--card);
  border:        1px solid var(--border);
  border-top:    none;
  overflow:      hidden;
}
.sp-col:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── List items ── */
.sp-list {
  display:        flex;
  flex-direction: column;
}
.sp-item {
  display:         flex;
  gap:             14px;
  align-items:     center;
  padding:         14px 16px;
  border-bottom:   1px solid var(--border);
  text-decoration: none;
  color:           var(--text);
  transition:      background 0.15s;
}
.sp-item:last-child {
  border-bottom: none;
}
.sp-item:hover {
  background: var(--surface);
}

/* Thumbnail */
.sp-item-img {
  position:        relative;
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-sm);
  background:      linear-gradient(135deg, var(--gold-pale), #EDE0C4);
  overflow:        hidden;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold);
}
.sp-item-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Rank badge (Popular) */
.sp-rank {
  position:        absolute;
  top:             4px;
  left:            4px;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      var(--gold);
  color:           #fff;
  font-size:       0.65rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         2;
  line-height:     1;
}

/* Body */
.sp-item-body {
  flex:      1;
  min-width: 0;
}
.sp-item-title {
  font-family:         'Prompt', sans-serif;
  font-size:           0.88rem;
  font-weight:         600;
  line-height:         1.4;
  margin-top:          4px;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}
.sp-item-date {
  font-size:  0.7rem;
  color:      var(--text-muted);
  margin-top: 3px;
  display:    block;
}
.sp-empty {
  padding:    32px 16px;
  text-align: center;
  color:      var(--text-muted);
  font-size:  0.82rem;
}

/* ── Related Articles ── */
.sp-related {
  padding: 0 20px;
  margin:  24px auto 0;
}
.sp-section-title {
  font-family:   'Prompt', sans-serif;
  font-size:     1.1rem;
  font-weight:   600;
  margin-bottom: 14px;
  color:         var(--text);
  position:      relative;
  padding-left:  14px;
}
.sp-section-title::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           2px;
  bottom:        2px;
  width:         3px;
  background:    var(--gold);
  border-radius: 2px;
}
.sp-related-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}


/* ═══════════════════════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════════════════════ */
.e404 {
  text-align: center;
  padding:    24px 20px 48px;
}

/* ── Illustration ── */
.e404-visual {
  position: relative;
  margin:   0 auto 8px;
  width:    200px;
  height:   180px;
}
.e404-plate-svg {
  width:  100%;
  height: 100%;
}
.e404-code {
  position:    absolute;
  bottom:      32px;
  left:        50%;
  transform:   translateX(-50%);
  font-family: 'Prompt', sans-serif;
  font-size:   2.8rem;
  font-weight: 700;
  color:       var(--gold);
  opacity:     0.18;
  line-height: 1;
  pointer-events: none;
}

/* ── Text ── */
.e404-title {
  font-family: 'Prompt', sans-serif;
  font-size:   1.35rem;
  font-weight: 600;
  line-height: 1.35;
  color:       var(--text);
  margin:      0 0 8px;
}
.e404-sub {
  font-size:   0.85rem;
  color:       var(--text-muted);
  line-height: 1.6;
  margin:      0 auto 28px;
  max-width:   320px;
}

/* ── Search bar ── */
.e404-search {
  position:      relative;
  display:       flex;
  align-items:   center;
  max-width:     400px;
  margin:        0 auto 32px;
  background:    var(--card);
  border:        1px solid var(--border-strong);
  border-radius: 100px;
  overflow:      hidden;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.e404-search:focus-within {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(184, 146, 74, 0.12);
}
.e404-search-icon {
  position: absolute;
  left:     16px;
  color:    var(--text-muted);
  pointer-events: none;
}
.e404-search input {
  flex:        1;
  border:      none;
  background:  transparent;
  padding:     12px 12px 12px 44px;
  font-size:   0.85rem;
  color:       var(--text);
  outline:     none;
  min-width:   0;
}
.e404-search input::placeholder {
  color: var(--text-dim);
}
.e404-search button {
  background:    var(--gold);
  color:         #fff;
  border:        none;
  padding:       10px 20px;
  font-size:     0.8rem;
  font-weight:   700;
  cursor:        pointer;
  border-radius: 0 100px 100px 0;
  transition:    background 0.15s;
  flex-shrink:   0;
}
.e404-search button:hover {
  background: var(--gold-dark);
}

/* ── Quick links ── */
.e404-links-label {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  14px;
}
.e404-links {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  max-width:             400px;
  margin:                0 auto 32px;
}
.e404-link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         16px 8px;
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
  text-decoration: none;
  color:           var(--text);
  font-size:       0.72rem;
  font-weight:     600;
  transition:      border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.e404-link:hover {
  border-color: var(--gold-border);
  box-shadow:   0 3px 14px rgba(0, 0, 0, 0.06);
  transform:    translateY(-2px);
}
.e404-link-icon {
  width:           44px;
  height:          44px;
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ── Back link ── */
.e404-back {
  display:         inline-block;
  font-size:       0.85rem;
  font-weight:     600;
  color:           var(--gold);
  text-decoration: none;
  transition:      color 0.15s;
}
.e404-back:hover {
  color: var(--gold-dark);
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

/* ── Nav ── */
.dark .site-nav {
  background: rgba(26, 23, 20, 0.95);
  border-bottom-color: var(--border);
}

/* ── Tool icon tints ── */
.dark .ti-orange { background: #3D2E1A; color: #E8A84C; }
.dark .ti-teal   { background: #1A3230; color: #6EC5B8; }
.dark .ti-purple { background: #2A2640; color: #A899D6; }
.dark .ti-blue   { background: #1A2636; color: #7AAFE8; }
.dark .ti-green  { background: #1E301A; color: #7EC06A; }

/* ── Footer ── */
.dark footer,
.dark .site-footer {
  background: var(--surface);
  border-top-color: var(--border);
}

/* ── Newsletter (already dark bg — just adjust for contrast) ── */
.dark .newsletter {
  background: #12100D;
  border: 1px solid var(--border);
}
.dark .nl-form input,
.dark .nl-input {
  background: var(--surface);
  color:      var(--text);
  border-color: var(--border-strong);
}

/* ── Cards / posts ── */
.dark .hp-tool,
.dark .hp-post,
.dark .blog-card,
.dark .tool-card {
  background: var(--card);
  border-color: var(--border);
}

/* ── Search box ── */
.dark .hp-search {
  background: var(--surface);
  border-color: var(--border-strong);
}
.dark .hp-search input {
  color: var(--text);
}
.dark .hp-search input::placeholder {
  color: var(--text-dim);
}

/* ── Tabs ── */
.dark .sp-tab {
  color: var(--text-muted);
}
.dark .sp-tab.active {
  color: var(--text);
}

/* ── Drawer ── */
.dark .nav-drawer {
  background: var(--card);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.dark .nav-overlay {
  background: rgba(0,0,0,0.55);
}

/* ── 404 page ── */
.dark .e404-plate { fill: var(--surface); }
.dark .e404-wrap  { color: var(--text); }

/* ── Misc ── */
.dark .article-wrap {
  color: var(--text);
}
.dark hr {
  border-color: var(--border);
}
.dark code {
  background: var(--surface);
  color:      var(--gold);
}
.dark blockquote {
  border-left-color: var(--gold);
  background: var(--surface);
}