/*
 * แถวลิงก์หน้าตามกฎหมายท้ายเว็บ — ไฟล์ทับ (มติ 187 · 22 ก.ย. 2569)
 *
 * ⚠⚠⚠ **ห้ามแก้ `home.css` ซึ่งเป็นของชุดออกแบบ** (มติ 88 · 94)
 *    ไฟล์นี้ต้องโหลด **หลัง** `home.css` เสมอ ไม่งั้นกฎข้างล่างไม่มีผล
 *    ⚠ โหลดสองที่: `components/ui/layout.blade.php` และ `shop/home.blade.php`
 *      หน้าแรกมี `<head>` ของตัวเอง **ลืมที่ใดที่หนึ่ง = ท้ายเว็บพังเฉพาะบางหน้า**
 *
 * ⚠⚠ `.site-footer` ของชุดออกแบบเป็นกริด 5 ช่อง (`140px 1fr 1fr 1fr 190px`)
 *    แถวนี้เป็นของที่เพิ่มเข้ามาเป็นชิ้นที่หก ถ้าไม่สั่ง `grid-column:1/-1`
 *    มันจะไปแทรกเป็นคอลัมน์ที่หกแล้วดันทุกอย่างเบี้ยว
 *    (`.footer-note` ของชุดออกแบบทำแบบเดียวกันอยู่แล้ว — ลอกวิธีมา ไม่ได้คิดใหม่)
 */
.site-footer > .footer-legal {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    font-size: 12px;
}

.site-footer > .footer-legal strong { font-size: 12px; color: var(--muted); }

/* ⚠ 44px คือขนาดเป้าที่นิ้วกดติดจริง — เท่ากับที่ `header-links.css` ใช้
     ลิงก์ท้ายเว็บที่เตี้ยกว่านี้ บนมือถือจะกดโดนลิงก์ข้างๆ */
.site-footer > .footer-legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer > .footer-legal a:hover { filter: brightness(.96); }

/* ⚠ `.footer-note` ของชุดออกแบบดึงตัวเองขึ้น -12px เพื่อชิดกล่องด้านบน
     ตอนนี้มีแถวนี้คั่นอยู่ก่อน การดึงขึ้นจะทำให้ตัวหนังสือซ้อนลิงก์ */
.site-footer > .footer-note { margin-top: 4px; }

@media (max-width: 600px) {
    .site-footer > .footer-legal { gap: 2px 14px; }
}

/* มติ 446 — แถว «ร่วมงานกับเรา» ต่อใต้แถวนโยบาย: ไม่มีเส้นคั่นซ้ำ */
/* ⚠ คลาสของตัวเอง ไม่ใช่ `footer-legal` (ข้อสอบนับลิงก์แถวนั้นว่าหกหน้าพอดี) — ลอกหน้าตาแถวนโยบายมาทั้งชุด
   ⚠ ช่องว่างแถวของกริดท้ายเว็บ 16–24px ตามความกว้างจอ · ลิงก์สูง 44px มีที่ว่างในตัวอยู่แล้ว จึงดึงขึ้นชิดแถวบน */
.site-footer > .footer-join { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: -14px; font-size: 12px; }
.site-footer > .footer-join strong { font-size: 12px; color: var(--muted); }
.site-footer > .footer-join a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.site-footer > .footer-join a:hover { filter: brightness(.96); }