/* ==========================================================================
   AT Medical — Custom styles
   ใช้คู่กับ Tailwind CSS (CDN) ที่โหลดใน index.html
   ========================================================================== */

/* ---------- 0. Fonts: DB Helvethaica X ----------
   ไฟล์ .woff2 อยู่ที่ assets/fonts/DBHelvethaicaX/ (แปลงจากชุด v3.2)
   ฟอนต์ชุดนี้มีทั้งอักษรไทยและละตินในตัวเดียว จึงไม่ต้องใช้ฟอนต์ไทยแยก

   หมายเหตุ: ใช้เฉพาะไฟล์ v3.2 เท่านั้น ห้ามผสมกับไฟล์ v3.1 (ที่ไม่มี v3.2 ต่อท้าย)
   เพราะ vertical metrics ต่างกัน (winAscent 3405/1505 vs 3129/1311) จะทำให้
   ความสูงบรรทัดของแต่ละน้ำหนักไม่ตรงกัน

   น้ำหนักที่มี: 100 UlLi / 200 Thin / 300 Li / 400 Regular / 500 Med / 700 Bd / 900 Blk
   (ครบทั้ง normal + italic)

   ยังมีชุด Cond, Ext และ HelvethaicaMon ในโฟลเดอร์ต้นฉบับ ถ้าต้องการใช้
   ให้แปลงเป็น .woff2 แล้วประกาศเป็น font-family แยก เช่น 'DB Helvethaica X Cond'
   -------------------------------------------------------- */

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-UltraLight.woff2")
    format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-UltraLightItalic.woff2")
    format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-ThinItalic.woff2")
    format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-LightItalic.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-MediumItalic.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-BoldItalic.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB Helvethaica X";
  src: url("fonts/DBHelvethaicaX/DBHelvethaicaX-BlackItalic.woff2")
    format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. Base / Variables ---------- */
:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  /* header — ค่าจริงอยู่ที่นี่ที่เดียว tailwind.config.js อ้างถึงผ่าน var() */
  --header-height: 155px;
  --header-gradient: linear-gradient(to bottom, #fff7f7 0%, #ffe6e9 100%);
  --font-sans: "DB Helvethaica X", ui-sans-serif, system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  /* DB Helvethaica X มี x-height เตี้ยกว่าฟอนต์ทั่วไป (~0.36 em) จึงขยายขนาดฐานขึ้น */
  font-size: 1.125rem;
  line-height: 0.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 2. Components ---------- */

/* ยังไม่มี component class — ส่วน header ย้ายไปใช้คลาส Tailwind ใน index.html แล้ว
   (h-header / bg-header-gradient อ่านค่าจากตัวแปรด้านบนผ่าน tailwind.config.js) */

/* Swiper ของ section #slide — สีจุด pagination */
.slide-swiper {
  --swiper-pagination-bullet-horizontal-gap: 7px;
  --swiper-pagination-bottom: 0;

  /* เว้นที่ด้านล่างให้จุด pagination ไม่ทับรูป */
  padding-bottom: 53px;
}

.slide-swiper .swiper-pagination-bullet {
  width: 23px;
  height: 23px;
  background: #ffcfd4;
  opacity: 1; /* ค่า default คือ 0.2 จะทำให้สีจาง */
}

.slide-swiper .swiper-pagination-bullet-active {
  background: #950263;
}

@media screen and (max-width: 768px) {
  .slide-swiper .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
  }
}