/*
  KIN Rehab – Style Override
  Clean • Soft • Warm (still KIN tone)
  Loaded after style.css
*/

/* =============================
   Color Tokens (Override only)
============================= */
:root {
  --color-primary: #B9853B;      /* soft warm gold */
  --color-secondary: #CDA56A;    /* lighter gold */
  --color-default: #2B2B2B;      /* readable dark text */

  --bg-main: #FAF7F2;            /* off‑white */
  --bg-panel: #F3E9DC;           /* beige panel */
  --divider: #E7D8C6;
}

body {
  background-color: var(--bg-main);
}

/* =============================
   Top Bar
============================= */
.topbar {
  background: #c1a483 !important;
  color: #ffffff;
}

.topbar a,
.topbar i {
  /* color: #ffffff !important; */
}

.topbar a:hover {
  color: #F3E9DC !important;
}

/* =============================
   Header / Navigation
============================= */
.header {
  background: var(--bg-panel) !important;
}

.header .logo h1,
.header .logo span {
  color: #8A5A23 !important;
}

.navbar a,
.navbar a:focus {
  color: var(--color-default) !important;
  font-weight: 500;
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a {
  color: var(--color-primary) !important;
}

.navbar > ul > li > a:before {
  background-color: var(--color-primary) !important;
}

/* Dropdown */
.navbar .dropdown ul {
  background: #ffffff !important;
  border: 1px solid var(--divider) !important;
}

.navbar .dropdown ul li:hover {
  background-color: var(--bg-main) !important;
}

.navbar .dropdown ul a {
  color: var(--color-default) !important;
}

.navbar .dropdown ul a:hover {
  color: var(--color-primary) !important;
}

/* =============================
   Mobile Navigation
============================= */
@media (max-width: 1279px) {
  .navbar ul {
    background: rgba(243, 233, 220, 0.96) !important;
  }
}

/* =============================
   Links & Accent
============================= */
a {
  color: var(--color-primary);
}

a:hover {
  color: #8A5A23;
}

/* =============================
   Sections / Panels
============================= */
.sections-bg {
  background-color: var(--bg-main) !important;
}

.section-header h2:after {
  background: var(--color-primary);
}

/* =============================
   Footer
============================= */
.footer {
  background: linear-gradient(to left, #F3E9DC, #EEDCC7, #E7CFA8) !important;
  color: var(--color-default) !important;
}

.footer h4,
.footer .footer-info .logo span {
  color: #8A5A23 !important;
}

.footer p,
.footer .footer-contact p {
  color: var(--color-default) !important;
}

.footer .footer-links ul a {
  color: var(--color-default) !important;
}

.footer .footer-links ul a:hover {
  color: var(--color-primary) !important;
}

.footer .social-links a {
  border-color: rgba(0,0,0,0.15) !important;
  color: rgba(0,0,0,0.6) !important;
}

.footer .social-links a:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.footer .copyright,
.footer .credits {
  color: rgba(0,0,0,0.6) !important;
}

/* =============================
   Search Modal (Remove strong orange gradient)
============================= */
#search-modal {
  background: linear-gradient(to left, #F3E9DC, #EEDCC7, #E7CFA8) !important;
}

.search-btn {
  background: #B9853B !important;
}

.search-highlight {
  background: #B9853B !important;
}

.search-input:focus ~ .search-label {
  color: #B9853B !important;
}

.search-input:not(:placeholder-shown) + .search-label {
  color: #8A5A23 !important;
}

/* Close button (X) */
#search-modal .close,
#search-modal .btn-close,
#search-modal .modal-close {
  color: #8A5A23 !important;
}


/* =============================
Footer : ทำให้ลิงก์ใน nav-item จัดกลางแบบ (flex column)
============================= */
.contact-link{
  display: flex !important;            /* override navbar a (flex) ให้เราคุมเอง */
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px;
  padding: 8px 12px;                   /* ปรับตามชอบ */
  text-decoration: none;
}

/* กัน svg โดน baseline alignment แปลก ๆ */
.contact-icon{
  display: block;
}

/* text ใต้ icon */
.contact-text{
  font-size: 12px;
  line-height: 1.1;
}

/* สีตามประเภท (แทน inline style) */
.contact-icon.is-line,
.contact-text { /* default ถ้าอยากให้ทั้งหมดสีเดียว อย่ายึดอันนี้ */ }

.contact-icon.is-line { fill: #00B900; }
.contact-link:has(.is-line) .contact-text { color: #00B900; }

.contact-icon.is-tel { fill: #E81E25; }
.contact-link:has(.is-tel) .contact-text { color: #E81E25; }

.contact-icon.is-mail { fill: #1D6A96; }
.contact-link:has(.is-mail) .contact-text { color: #1D6A96; }