/* ===== Custom styles that sit ON TOP of Bootstrap 5 ===== */

/* ---- 1. Colors + fonts (change them here) ---- */
:root {
  --burgundy: #7A1F2B;
  --burgundy-dark: #5F1721;
  --gold: #C69A3A;
  --ivory: #F8F5EF;
  --charcoal: #24211E;
  --muted: #6F6A63;

  /* tell Bootstrap to use our fonts/colors */
  --bs-body-font-family: 'Noto Sans Thai', Tahoma, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.85;
  --bs-body-color: #24211E;
  --bs-body-bg: #F8F5EF;
  --bs-link-color: #7A1F2B;
  --bs-link-hover-color: #5F1721;
}

/* 1. แก้ปัญหาความสูง Viewport ของ iOS Safari */
html {
  min-height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  /* รองรับ iOS Safari Dynamic Viewport */
  min-height: 100dvh;
}

/* 3. ป้องกันการโดนตัดเนื้อหาล่างสุด */
main {
  display: block;
  width: 100%;
}
/* ปรับแต่งความกว้างรูปภาพไม่ให้ดันกรอบ */
img {
  max-width: 100%;
  height: auto;
}
html { scroll-padding-top: 100px; }
section { padding: 80px 0; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 700; color: var(--burgundy); margin-bottom: 1.25rem; line-height: 1.35; }
h3 { font-size: 1.375rem; font-weight: 600; color: var(--burgundy); margin: 2.5rem 0 .75rem; line-height: 1.35; }
.text { max-width: 100%; }
.alt { background: #fff; }
figcaption { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }

/* ---- 2. Buttons (our two colors added to Bootstrap's buttons) ---- */
.btn { font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.btn-burgundy {
  --bs-btn-color: #fff; --bs-btn-bg: #7A1F2B; --bs-btn-border-color: #7A1F2B;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5F1721; --bs-btn-hover-border-color: #5F1721;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #5F1721; --bs-btn-active-border-color: #5F1721;
}
.btn-gold {
  --bs-btn-color: #24211E; --bs-btn-bg: #C69A3A; --bs-btn-border-color: #C69A3A;
  --bs-btn-hover-color: #24211E; --bs-btn-hover-bg: #D4A94A; --bs-btn-hover-border-color: #D4A94A;
  --bs-btn-active-color: #24211E; --bs-btn-active-bg: #D4A94A; --bs-btn-active-border-color: #D4A94A;
}

/* ---- 3. Dark navbar ---- */
.site-nav { background: var(--charcoal); border-bottom: 1px solid rgba(198, 154, 58, .35); min-height: 84px; }
.site-nav .navbar-brand { color: #fff; font-weight: 600; font-size: 1.125rem; line-height: 1.3; white-space: normal; }
.brand-logo { height: 62px; width: auto; background: #fff; border-radius: 50%; padding: 4px; }
.site-nav .nav-link { color: rgba(255, 255, 255, .88); font-weight: 500; padding: .5rem 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .3s, border-color .3s; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; border-bottom-color: var(--gold); }
.site-nav .btn:focus-visible, .site-nav a:focus-visible, .site-nav .navbar-toggler:focus-visible { outline-color: #fff; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); min-width: 48px; min-height: 48px; }
@media (max-width: 1199.98px) {                /* phone / tablet dropdown */
  .site-nav .navbar-collapse { padding: .5rem 0 1.5rem; }
  .site-nav .nav-link { display: flex; align-items: center; min-height: 56px; font-size: 1.125rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .site-nav .btn { width: 100%; }
}
@media (max-width: 575.98px) {
  section { padding: 56px 0; }
  .site-nav .navbar-brand { font-size: .95rem; }
  .brand-logo { height: 42px; }
}

/* ---- 4. Hero ---- */
.hero { min-height: 20vh; display: flex; align-items: center; padding: 80px 0; color: #fff;
 background: linear-gradient(rgba(20, 16, 14, .6), rgba(20, 16, 14, .75)), center / cover; }
/* .hero h1 { font-size: clamp(2.2rem, 1rem + 4.5vw, 3.75rem); font-weight: 700; line-height: 1.3; margin-bottom: 1rem; } */
.hero p { font-size: clamp(1.1rem, .9rem + 1vw, 1.4rem); max-width: 640px; }
.hero { 
  min-height: auto; /* หรือลบ min-height ออก */
  display: flex; 
  align-items: center; 
  padding: 20px 0; /* <-- ปรับระยะบน-ล่างตรงนี้ (ลดจาก 80px เหลือ 40px หรือตามต้องการ) */
  color: #fff;
 
}
.hero h1 { 
  font-size: clamp(1.6rem, 0.8rem + 3vw, 2.8rem); /* ลดจาก 2.2rem -> 1.6rem และ 3.75rem -> 2.8rem */
  font-weight: 700; 
  line-height: 1.3; 
  margin-bottom: 1rem; 
}

/* ---- 5. Photos ---- */
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.single { max-width: 720px; }

/* ---- 6. Activity cards ---- */
.event { border: 0; color: inherit; box-shadow: 0 2px 12px rgba(0, 0, 0, .07); overflow: hidden; transition: transform .3s; }
.event:hover { transform: translateY(-4px); color: inherit; }
.event .card-img-top { aspect-ratio: 16 / 10; object-fit: cover; }
.event .card-title { color: var(--charcoal); line-height: 1.5; }
.text-burgundy { color: var(--burgundy); }

/* ---- 7. Membership + contact ---- */
.member { background: var(--burgundy); color: #fff; }
.member h2 { color: #fff; }
.qr { margin: 0; background: #fff; color: var(--charcoal); padding: 16px; border-radius: 12px; text-align: center; font-size: .95rem; max-width: 267px; }
.qr img { margin: 0 auto; }
.contact-card { background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, .07); height: 100%; }
.contact-card a { font-weight: 600; }

/* ---- 8. Footer ---- */
footer { background: var(--charcoal); color: rgba(255, 255, 255, .85); padding: 48px 0 24px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--gold); }
footer li { margin-bottom: .25rem; }
footer .copy { margin: 2.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; font-size: .95rem; }
footer :focus-visible, .member :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* 2. รองรับระยะ Safe Area ด้านล่างของ iPhone ทุกรุ่น */
footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* ดันระยะ Padding ด้านล่างเพิ่มตาม Safe Area ของ iPhone แต่ละรุ่น */
  padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  padding-bottom: calc(32px + constant(safe-area-inset-bottom)) !important; /* สำหรับ iOS รุ่นเก่า */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }