/**
 * site-tokens.css — Typography + spacing ร่วมทั้งเว็บ
 * โหลดหลังบล็อก <style> ของแต่ละหน้า เพื่อเก็บ rhythm ให้สม่ำเสมอ
 * อ้างอิง: RESPONSIVE-GUIDELINES.md (breakpoints 480 / 768 / 1024)
 */

:root {
    --font-ui: Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
    /* เนื้อหาทั่วไป — ลดลงบนจอเล็กตามแนวทาง */
    --text-body: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
    --text-body-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9rem);
    --leading-body: 1.62;
    --leading-tight: 1.35;
    /* ระยะขอบซ้าย-ขวา + โซนปุ่มล่าง */
    --space-page-x: clamp(0.75rem, 2.5vw, 1.25rem);
    --space-footer-y: clamp(1.5rem, 3.5vw, 2.5rem);
    --space-footer-gap: clamp(0.625rem, 1.5vw, 0.9375rem);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ---------- ปุ่มเมนูล่าง (มาตรฐานทุกหน้า) ---------- */
.image-button-container {
    padding-top: var(--space-footer-y);
    padding-bottom: var(--space-footer-y);
    padding-left: var(--space-page-x);
    padding-right: var(--space-page-x);
    gap: var(--space-footer-gap);
}

@media (max-width: 480px) {
    .image-button-container {
        margin-top: 10px;
        padding-top: clamp(1.25rem, 4vw, 1.5rem);
        padding-bottom: clamp(1.25rem, 4vw, 1.5rem);
    }
}

/* หน้าที่ตั้งใจให้ระยะแนวตั้งแคบกว่า (เช่น ใต้คอนเทนต์ยาว) */
.image-button-container.image-button-container--compact {
    padding-top: clamp(0.75rem, 2.2vw, 1.25rem);
    padding-bottom: clamp(0.75rem, 2.2vw, 1.25rem);
}

@media (max-width: 480px) {
    .image-button-container.image-button-container--compact {
        padding-top: clamp(0.625rem, 3vw, 0.875rem);
        padding-bottom: clamp(0.625rem, 3vw, 0.875rem);
    }
}

/* ---------- ปุ่มรูปเมนู — ขนาดตามกฎโปรเจกต์ ---------- */
.img-btn {
    display: block;
    width: 200px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.img-btn:hover {
    transform: translateY(-3px);
}

@media (max-width: 480px) {
    .img-btn {
        width: 120px;
        height: 44px;
        min-height: 44px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .img-btn {
        width: 150px;
        height: 45px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .img-btn {
        width: 170px;
        height: 52px;
    }
}

/* ---------- ลิงก์ "Next go to …" ---------- */
.next-step-text {
    margin-top: clamp(0.75rem, 2vw, 1rem);
    padding-left: var(--space-page-x);
    padding-right: var(--space-page-x);
    gap: clamp(0.5rem, 1.2vw, 0.625rem);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.next-step-text .label {
    line-height: var(--leading-tight);
}