/*
Theme Name: FIN For Kids Plus (Astra Child)
Theme URI: https://finforkids.com/
Description: Astra child theme สำหรับ FIN FOR KIDS PLUS — ฝัง Corporate Identity (สี MSIG Navy × FIN Red, ฟอนต์ Kanit/Anuphan) ใช้ร่วมกับ Elementor. แก้ CSS/ฟังก์ชันได้ปลอดภัยโดยไม่หายตอน Astra อัปเดต.
Author: FIN For Kids
Author URI: https://finforkids.com/
Template: astra
Version: 1.7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: finforkids-child
Tags: astra, elementor, child-theme
*/

/* ============================================================
   FIN FOR KIDS PLUS — Corporate Identity tokens
   อ้างอิง: finforkids-plus-ci.html · เริ่มใช้ 01.07.2026
   ============================================================ */
:root{
  /* ── Brand core ── */
  --fin-red:      #E2222D;   /* ปุ่มหลัก · ราคา · ตัวเลขเน้น · ไอคอนติ๊ก */
  --fin-red-dk:   #B81820;   /* hover / pressed / เงาปุ่มแดง */
  --msig-navy:    #1B1464;   /* หัวข้อ · หัวตาราง · โครงสร้าง */
  --navy-2:       #262B6B;   /* การ์ดรอง · แถบทับซ้อน */
  --ink:          #1C2033;   /* เนื้อความหลัก */
  --ink-soft:     #5A5F73;   /* คำอธิบาย · meta */
  --line-green:   #06C755;   /* ใช้เฉพาะปุ่ม/แถบ LINE OA เท่านั้น */

  /* ── Surface ── */
  --cream:        #FBF9F5;   /* พื้นหลังหน้า */
  --paper:        #FFFFFF;
  --mist:         #F1F2F6;   /* แถบ section · zebra ตาราง */
  --hair:         #E4E5EC;   /* เส้นคั่น */

  /* ── Type ── */
  --fin-display:  'Kanit', sans-serif;   /* หัวข้อ · ราคา · ตัวเลข */
  --fin-body:     'Anuphan', sans-serif; /* เนื้อความ */

  /* ── Shape ── */
  --fin-r-lg: 22px;
  --fin-r-md: 14px;
  --fin-r-sm: 9px;
  --fin-shadow:    0 18px 40px -22px rgba(27,20,100,.45);
  --fin-shadow-sm: 0 6px 18px -12px rgba(27,20,100,.4);
}

/* ============================================================
   Typography — ผูกฟอนต์แบรนด์เข้ากับ Astra
   (Elementor widgets ที่ตั้งฟอนต์เองจะไม่ถูกทับ)
   ============================================================ */
body,
.ast-container,
button, input, select, textarea{
  font-family: var(--fin-body);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title{
  font-family: var(--fin-display);
  font-weight: 700;
  color: var(--msig-navy);
  letter-spacing: -0.01em;
}

/* ============================================================
   Links & accents — แดง FIN ใช้เน้นสายตาอย่างมีวินัย
   ============================================================ */
a{ color: var(--fin-red); }
a:hover,
a:focus{ color: var(--fin-red-dk); }

/* ============================================================
   Buttons — ปุ่มหลักของ Astra ให้เป็นแดง FIN
   ============================================================ */
.ast-button,
.button,
button.menu-toggle,
.wp-block-button__link,
input[type="submit"],
.ast-custom-button{
  background-color: var(--fin-red);
  border-color: var(--fin-red);
  color: #fff;
  font-family: var(--fin-display);
  font-weight: 600;
  border-radius: 100px;
}
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.ast-custom-button:hover{
  background-color: var(--fin-red-dk);
  border-color: var(--fin-red-dk);
  color: #fff;
}

/* ปุ่มรอง — น้ำเงิน MSIG */
.fin-btn-navy{
  background-color: var(--msig-navy) !important;
  border-color: var(--msig-navy) !important;
  color: #fff !important;
}
.fin-btn-navy:hover{ background-color: #120c4d !important; }

/* ปุ่ม LINE OA — เขียว LINE เท่านั้น */
.fin-btn-line{
  background-color: var(--line-green) !important;
  border-color: var(--line-green) !important;
  color: #fff !important;
}

/* ============================================================
   Helper classes — ใช้ผูกกับ Elementor (ช่อง CSS Classes)
   ============================================================ */
.fin-navy      { color: var(--msig-navy) !important; }
.fin-red       { color: var(--fin-red)   !important; }
.fin-bg-navy   { background-color: var(--msig-navy) !important; color:#fff !important; }
.fin-bg-red    { background-color: var(--fin-red)   !important; color:#fff !important; }
.fin-bg-cream  { background-color: var(--cream) !important; }
.fin-bg-mist   { background-color: var(--mist)  !important; }

/* พื้นหลังหน้าโทนครีมอบอุ่นตาม CI (ถ้าไม่ต้องการ ให้คอมเมนต์บรรทัดนี้) */
body{ background-color: var(--cream); }