/* Общие стили для всех страниц: токены, база, кнопки, шапка, крошки, подвал.
   Значения из Прототипы страниц/design-guideline.html */
:root{
  --bg: #FBFAF6;
  --bg-panel: #F2EFE8;
  --bg-panel-2: #E8E5E0;
  --line: rgba(31,28,23,.14);
  --text: #1F1C17;
  --text-muted: #79746E;
  --amber: #C66A51;
  --amber-hover: #B25C45;
  --amber-soft: #F6E3DC;
  --radius: 10px;
  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html[lang="th"] body, html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3{ font-family: 'Noto Sans Thai', sans-serif; }
h1,h2,h3,h4{
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em 0;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em 0; }
a{ color: inherit; }
img{ max-width: 100%; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 900px){ .container{ padding: 0 16px; } }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible, summary:focus-visible, a:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }
.btn-primary{ background: var(--amber); color: var(--bg); }
.btn-primary:hover{ background: var(--amber-hover); }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--amber); }

/* ---------- Шапка ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,250,246,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; gap: 28px;
  padding: 12px 24px; max-width: var(--maxw); margin:0 auto; min-height: 64px;
}
.logo{
  font-family:'Unbounded', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink: 0;
}
.logo-dot{ width:8px; height:8px; border-radius:50%; background: var(--amber); }
.nav-menu{ display:flex; align-items:center; gap: 4px; list-style:none; margin:0; padding:0; font-size: 14px; }
.nav-menu > li{ position: relative; }
.nav-menu > li > a, .nav-menu > li > span{
  display:block; padding: 8px 12px; border-radius: 6px; text-decoration:none; color: var(--text-muted); cursor: pointer;
}
.nav-menu > li > a:hover, .nav-menu > li:hover > span, .nav-menu a[aria-current="page"], .nav-menu .is-section > span{ color: var(--text); }
.has-sub > span::after{ content:''; display:inline-block; width:6px; height:6px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.sub{
  position:absolute; top: 100%; left: 0; min-width: 260px; list-style:none; margin:0; padding: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(31,28,23,.08);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{ opacity:1; visibility: visible; transform: none; }
.sub a, .sub .soon{ display:block; padding: 10px 12px; border-radius: 6px; text-decoration:none; }
.sub a:hover{ background: var(--bg-panel); }
.sub small{ display:block; color: var(--text-muted); font-size: 12px; }
.sub .soon{ color: var(--text-muted); cursor: default; }
.nav-right{ margin-left: auto; display:flex; align-items:center; gap: 14px; }
.lang{ display:flex; gap: 2px; font-size: 13px; }
.lang a{ text-decoration:none; color: var(--text-muted); padding: 4px 6px; border-radius: 5px; }
.lang a[aria-current="true"]{ color: var(--text); font-weight: 600; }
.lang a:hover{ color: var(--text); }
.nav-right .btn{ padding: 10px 18px; font-size: 14px; white-space: nowrap; }

/* Мобильное меню: details/summary, без JS */
.burger{ display:none; }
.burger summary{ list-style:none; cursor:pointer; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; display:flex; align-items:center; justify-content:center; }
.burger summary::-webkit-details-marker{ display:none; }
.burger summary span, .burger summary span::before, .burger summary span::after{ display:block; width: 16px; height: 1.5px; background: var(--text); position: relative; content:''; }
.burger summary span::before{ position:absolute; top:-5px; }
.burger summary span::after{ position:absolute; top:5px; }
.burger:not([open]) .burger-panel{ display: none; }
.burger-panel{
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px 16px 20px; max-height: calc(100vh - 64px); overflow:auto;
}
.burger-panel ul{ list-style:none; margin:0; padding:0; }
.burger-panel > ul > li{ border-bottom: 1px solid var(--line); }
.burger-panel a, .burger-panel .soon, .burger-panel .group{ display:block; padding: 12px 0; text-decoration:none; font-size: 15px; }
.burger-panel .group{ font-weight: 600; padding-bottom: 4px; }
.burger-panel ul ul a, .burger-panel ul ul .soon{ padding: 8px 0 8px 14px; font-size: 14px; }
.burger-panel .soon{ color: var(--text-muted); }
.burger-panel .lang{ padding-top: 14px; font-size: 14px; }

@media (max-width: 960px){
  .nav-menu, .nav-right > .lang{ display:none; }
  .burger{ display:block; }
  .nav{ padding: 10px 16px; gap: 12px; }
}
.short{ display:none; }
@media (max-width: 480px){ .full{ display:none; } .short{ display:inline; } }

/* ---------- Хлебные крошки ---------- */
.crumbs{ max-width: var(--maxw); margin: 0 auto; padding: 16px 24px 0; font-size: 13px; color: var(--text-muted); }
.crumbs ol{ list-style:none; display:flex; gap:8px; padding:0; margin:0; flex-wrap: wrap; }
.crumbs li + li::before{ content: '›'; margin-right: 8px; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color: var(--text); }
@media (max-width: 900px){ .crumbs{ padding: 12px 16px 0; } }

/* ---------- Подвал ---------- */
.site-footer{ border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; color: var(--text-muted); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4{ font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; letter-spacing: 0; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap: 8px; }
.footer-grid a{ text-decoration: none; }
.footer-grid a:hover{ color: var(--text); }
.footer-grid .soon{ opacity: .7; }
.footer-about{ max-width: 300px; margin-top: 12px; }
.footer-bottom{ margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom a{ text-decoration: none; }
.footer-bottom a:hover{ color: var(--text); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child{ grid-column: 1 / -1; } }

::selection{ background: var(--amber-soft); }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition: none !important; } }