/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY PATCH — เพิ่มต่อท้าย style.css
   ใช้ clamp(min, preferred, max) ให้ฟอนต์ scale อัตโนมัติ
   min = มือถือ (≤375px), max = desktop (≥1200px)
   ════════════════════════════════════════════════════════════════════ */

/* ── Base font size ─────────────────────────────────────────────────
   html font-size เป็นฐานของ rem ทั้งหน้า
   14px บนมือถือ → 16px บน desktop                                  */
html {
    font-size: clamp(14px, 1.2vw + 10px, 16px);
}

body {
    font-size: 1rem;       /* 14–16px ตาม html */
    line-height: 1.65;
}

/* ── Headings ────────────────────────────────────────────────────── */
h1, .h1-clean {
    font-size: clamp(26px, 4vw + 10px, 48px);   /* 26px → 48px */
    line-height: 1.15;
    letter-spacing: -0.5px;
}

h2, .sec-title-clean, .today-title-clean {
    font-size: clamp(20px, 2.5vw + 8px, 32px);  /* 20px → 32px */
    line-height: 1.25;
}

h3, .meal-card-title, .rtitle-clean {
    font-size: clamp(14px, 1vw + 10px, 16px);   /* 14px → 16px */
    line-height: 1.4;
}

/* ── Eyebrow / Label ─────────────────────────────────────────────── */
.eyebrow-clean {
    font-size: clamp(10px, 0.8vw + 7px, 13px);  /* 10px → 13px */
    letter-spacing: 2.5px;
}

/* ── Body / Paragraph ───────────────────────────────────────────── */
p, .sub-clean, .today-sub-clean {
    font-size: clamp(13px, 0.8vw + 10px, 15px); /* 13px → 15px */
    line-height: 1.7;
}

/* ── Small / Meta ───────────────────────────────────────────────── */
.meal-card-meta,
.rmeta-clean,
.today-note-clean,
.skipped-label,
.snack-chip {
    font-size: clamp(11px, 0.5vw + 9px, 13px);  /* 11px → 13px */
}

.meal-card-kcal,
.meal-card-badge,
.rbadge-clean,
.kcalbadge-clean,
.ingredient-found-badge {
    font-size: clamp(11px, 0.5vw + 9px, 13px);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary-clean,
.btn-ghost-clean,
.goal-cta-clean,
.btn-submit-kcal,
.btn-plan-clean {
    font-size: clamp(13px, 0.8vw + 10px, 15px);
}

.qtag-clean,
.btn-unskip,
.skipped-meal-name {
    font-size: clamp(11px, 0.5vw + 9px, 13px);
}

/* ── Goal card ───────────────────────────────────────────────────── */
.glabel-clean  { font-size: clamp(10px, 0.5vw + 8px, 12px); letter-spacing: 1.2px; }
.gname-clean   { font-size: clamp(12px, 0.6vw + 9px, 14px); }
.gdesc-clean   { font-size: clamp(10px, 0.4vw + 8px, 12px); }

/* ── Science cards ───────────────────────────────────────────────── */
.sci-card-clean h3 { font-size: clamp(13px, 0.8vw + 10px, 15px); }
.sci-card-clean p  { font-size: clamp(12px, 0.6vw + 9px, 13px); }

/* ── Navigation ─────────────────────────────────────────────────── */
.main-nav a { font-size: clamp(14px, 1vw + 10px, 17px); }
.username   { font-size: clamp(14px, 1vw + 10px, 18px); }

/* ── Ingredient search ───────────────────────────────────────────── */
.ibar-clean input,
#ingredient_search_input { font-size: clamp(13px, 0.8vw + 10px, 15px); }

/* ── kcal input ──────────────────────────────────────────────────── */
.kcal-input-clean {
    font-size: clamp(16px, 1.5vw + 11px, 22px);
    width: clamp(60px, 8vw, 90px);
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (≤ 480px)
   ใช้เฉพาะกรณีที่ clamp() ยังไม่พอ
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Hero */
    .hero-clean {
        padding: 48px 20px;
        gap: 32px;
    }
    .h1-clean { font-size: 26px; }
    .sub-clean { font-size: 13px; max-width: 100%; }

    /* Meal planner section */
    .today-title-clean { font-size: 20px; }
    .today-sub-clean   { font-size: 12px; }

    /* Goal card */
    .gname-clean { font-size: 12px; }
    .gdesc-clean { font-size: 10px; }

    /* Meal cards */
    .meal-card-title { font-size: 13px; }
    .meal-card-kcal  { font-size: 13px; }
    .meal-card-meta  { font-size: 11px; }

    /* Recipe feed */
    .sec-title-clean { font-size: 20px; }
    .rtitle-clean    { font-size: 14px; }

    /* Summary note */
    .today-note-clean { font-size: 11px; }

    /* Science section */
    .sci-card-clean h3 { font-size: 13px; }
    .sci-card-clean p  { font-size: 12px; }

    /* Buttons */
    .btn-primary-clean,
    .btn-ghost-clean { padding: 11px 20px; font-size: 13px; }

    .btn-submit-kcal { padding: 7px 14px; font-size: 12px; }
    .goal-cta-clean  { font-size: 13px; padding: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   TABLET (481px – 768px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
    .h1-clean          { font-size: clamp(28px, 5vw, 36px); }
    .today-title-clean { font-size: clamp(20px, 3vw, 26px); }
    .sec-title-clean   { font-size: clamp(20px, 3vw, 26px); }
    .meal-card-title   { font-size: 14px; }
    .sub-clean         { font-size: 14px; }
}