/* iMedic shared site chrome — tokens + header/footer. Loaded by every page. */
@import url('/fonts.css');

:root{
  --accent:#11B5B0;
  --accent-soft:#e0f7f6;
  --accent-ink:#0A8F8B;
  --font-display: "SF Pro Text", "SF Pro TH", "SFProThai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-thai: "SF Pro TH", "SF Pro Text", "SFProThai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body-family: "SF Pro Text", "SF Pro TH", "SFProThai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html, body {
  font-family: var(--font-body-family);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea {
  font-family: inherit;
}
/* Base Custom Radio & Checkbox */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line, #dce3e8);
  background: var(--bg-elev, #fff);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"] {
  border-radius: 5px;
}
input[type="radio"]:hover,
input[type="checkbox"]:hover {
  border-color: var(--accent);
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="radio"]:checked::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--line, #e2e8f0);
}
html[data-theme="dark"]{
  --accent-soft:oklch(0.32 0.07 192);
  --accent-ink:oklch(0.80 0.10 192);
}

/* ---- header ---- */
.site-nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);background:color-mix(in srgb,var(--bg,#fbfbfd) 78%,transparent);border-bottom:1px solid var(--line-soft,rgba(10,10,15,.05))}
.site-nav-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-brand img{height:30px;width:auto;display:block}
html[data-theme="dark"] .site-brand img{filter:invert(1)}
.site-links{display:flex;align-items:center;gap:28px;flex-shrink:0}
.site-links > a,.site-drop > a{font-size:14.5px;font-weight:500;color:var(--ink-2,#1d1d24);opacity:.78;text-decoration:none;white-space:nowrap;transition:opacity .2s}
.site-links > a:hover,.site-drop > a:hover{opacity:1;color:var(--ink-2,#1d1d24)}
.site-drop{position:relative}
.site-drop > a{display:inline-flex;align-items:center;gap:5px}
.site-drop > a svg{width:12px;height:12px;opacity:.6;transition:transform .2s}
.site-drop:hover > a svg{transform:rotate(180deg)}
.site-menu{position:absolute;top:100%;left:-14px;padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;min-width:262px;z-index:90}
.site-drop:hover .site-menu{opacity:1;visibility:visible;transform:none}
.site-menu-inner{background:var(--bg-elev,#fff);border:1px solid var(--line,rgba(10,10,15,.08));border-radius:16px;box-shadow:0 24px 60px -20px rgba(15,17,23,.18);padding:8px;display:flex;flex-direction:column;gap:2px}
.site-menu-inner a{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:11px;text-decoration:none;opacity:1;transition:background .15s}
.site-menu-inner a:hover{background:var(--bg-soft,#f4f5f7)}
.site-menu-inner .ic{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.site-menu-inner .ic svg{width:15px;height:15px;stroke-width:1.9}
.site-menu-inner .tt{display:block;font-size:14px;font-weight:600;color:var(--ink,#0a0a0f);line-height:1.35}
.site-menu-inner .ss{display:block;font-size:12px;color:var(--muted,#6e6e76);margin-top:1px;line-height:1.45}
.site-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:all .2s;cursor:pointer;}
.site-btn-ghost{color:var(--ink-2,#1d1d24);background:transparent}
.site-btn-ghost:hover{background:var(--bg-soft,#f4f5f7);color:var(--ink-2,#1d1d24)}
.site-btn-primary{background:var(--ink,#0a0a0f);color:var(--bg-elev,#fff)}
.site-btn-primary:hover{opacity:.88;transform:translateY(-1px);color:var(--bg-elev,#fff)}
html[data-theme="dark"] .site-btn-primary{background:#f4f4f7;color:#0b0b0e}
.site-theme{width:38px;height:38px;border-radius:999px;background:var(--bg-soft,#f4f5f7);border:1px solid var(--line-soft,rgba(10,10,15,.05));display:grid;place-items:center;color:var(--ink-2,#1d1d24);cursor:pointer;flex-shrink:0}
.site-theme:hover{background:var(--line-soft,rgba(10,10,15,.05))}
.site-theme svg{width:17px;height:17px}
html[data-theme="dark"] .site-theme .sun{display:none}
html:not([data-theme="dark"]) .site-theme .moon{display:none}
@media(max-width:1080px){.site-links{display:none}}
@media(max-width:560px){.site-nav-inner{padding:0 20px}.site-cta .site-btn-ghost{display:none}}

/* ---- footer ---- */
footer{padding:72px 0 32px;border-top:1px solid var(--line-soft,rgba(10,10,15,.05));font-family:var(--font-body-family);font-size:16px;line-height:1.55;color:var(--ink,#0a0a0f);background:var(--bg,#fbfbfd)}
footer,footer *{box-sizing:border-box}
footer > .container{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px}
.footer-col .brand{display:flex;align-items:center}.footer-col .brand img{height:28px;width:auto;display:block}
html[data-theme="dark"] .footer-col .brand img{filter:invert(1)}
.footer-col h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2,#8a8a93);margin:0 0 16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer-col a, .footer-col li{font-size:14.5px;color:var(--ink-2,#1d1d24);opacity:.78;text-decoration:none}.footer-col a:hover{opacity:1}
.footer-tag{font-size:14.5px;color:var(--muted,#6e6e76);margin:12px 0 24px;max-width:320px;line-height:1.6}
.socials{display:flex;gap:8px}.social-btn{width:38px;height:38px;border-radius:999px;background:var(--bg-soft,#f4f5f7);display:grid;place-items:center;color:var(--ink-2,#1d1d24);transition:all .2s}
.social-btn:hover{background:var(--ink,#0a0a0f);color:#fff}.social-btn svg{width:16px;height:16px}
html[data-theme="dark"] .social-btn:hover{color:#0b0b0e}
.footer-bottom{border-top:1px solid var(--line-soft,rgba(10,10,15,.05));padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted,#6e6e76)}
.footer-bottom-links{display:flex;gap:24px}
.footer-bottom-links a{color:inherit;text-decoration:none}
@media(max-width:640px){footer > .container{padding:0 20px}}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-bottom-links{flex-wrap:wrap;gap:12px 20px}}