/* ===== Shared Header + Navigation — matches Home-responsive.html ===== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0;
  font-family:"Sarabun","Tahoma","Geneva",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#222;
  background:#fff9e8;
}

img { max-width:100%; height:auto; }

/* Header */
.site-header {
  background:linear-gradient(180deg,#b51e28 0%,#7d1118 100%);
  color:#fff;
  border-bottom:4px solid #ffd21f;
  text-align:center;
  margin:0;
  padding:0;
}
.site-header .banner,
.site-header img.banner {
  width:100%;
  max-width:1019px;
  height:auto;
  margin:0 auto;
  display:block;
}

/* Main navigation — same visual system as Home-responsive.html */
.main-nav {
  background:#ffd21f;
  border-bottom:2px solid #a61922;
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
}
.nav-toggle {
  display:none;
  background:#a61922;
  color:#ffd21f;
  border:none;
  padding:12px 16px;
  font-size:1rem;
  font-weight:bold;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.nav-toggle::before { content:"☰ "; }
.nav-toggle[aria-expanded="true"]::before { content:"✕ "; }
.main-nav-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  max-width:1100px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.main-nav-list > li { position:relative; }
.main-nav-list > li > a {
  display:block;
  padding:12px 18px;
  color:#a61922;
  font-weight:bold;
  font-size:.95rem;
  white-space:nowrap;
  border-right:1px solid rgba(166,25,34,.2);
  text-decoration:none;
}
.main-nav-list > li:first-child > a { border-left:1px solid rgba(166,25,34,.2); }
.main-nav-list > li > a:hover,
.main-nav-list > li > a:focus {
  background:#a61922;
  color:#ffd21f;
  text-decoration:none;
}

/* Legacy pages sometimes contain a second old banner. Hide only that duplicate. */
#01 > table > tbody > tr:first-child { display:none; }

/* Old secondary nav, if present */
body > nav:not(.main-nav) {
  background:transparent;
  padding:10px 16px;
  text-align:center;
}
body > nav:not(.main-nav) a {
  color:#a61922;
  font-weight:bold;
  text-decoration:none;
}

/* Mobile */
@media (max-width:699px) {
  .nav-toggle { display:block; }
  .main-nav-list {
    display:none;
    flex-direction:column;
    width:100%;
  }
  .main-nav-list.is-open { display:flex; }
  .main-nav-list > li { width:100%; }
  .main-nav-list > li > a {
    border-right:none;
    border-bottom:1px solid rgba(166,25,34,.2);
    padding:12px 16px;
  }
}

@media print {
  .main-nav,.nav-toggle { display:none; }
  body { background:#fff; }
}