/* 頁首、品牌、導覽、收藏入口與共用按鈕 */
.header {
  background:#fffefb;
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid #eee9e1;
  transition:box-shadow .25s;
}

.header.stuck {
  box-shadow:0 12px 26px -22px rgba(24,61,73,.55);
}

.header-inner {
  max-width:1376px;
  margin:auto;
  padding:0 32px;
  min-height:80px;
  display:flex;
  align-items:center;
  gap:25px;
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
  font:700 24px/1.3 var(--serif);
  letter-spacing:.08em;
}

.brand small {
  display:block;
  font:9px/2.2 var(--sans);
  letter-spacing:.29em;
}

.brand-mark {
  font-size:42px;
  line-height:1;
  border-bottom:2px solid;
  transform:skew(-10deg);
  width:55px;
  text-align:center;
}

.header nav {
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto;
  align-self:stretch;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}

.header nav>a {
  display:flex;
  align-items:center;
  position:relative;
}

.header nav>a:hover:after,.header nav>a.active:after,.nav-towns-button:hover:after,.nav-towns.open .nav-towns-button:after,.nav-towns[open] .nav-towns-button:after {
  content:"";
  height:2px;
  background:var(--orange);
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

.favorite-button {
  display:flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
  font-size:14px;
}

.favorite-button:first-letter {
  color:var(--orange);
}

#save-count {
  font-size:11px;
  min-width:19px;
  border-radius:50%;
  background:#f1e8dd;
  line-height:19px;
  text-align:center;
}

.button {
  background:var(--orange-deep);
  color:white;
  border:1px solid #b04426;
  border-radius:28px;
  padding:12px 25px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  white-space:nowrap;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:#b04426;
  transform:translateY(-2px);
}

.header-cta {
  font-size:14px;
  padding:10px 20px;
}

.menu-button {
  display:none;
}

.menu-button svg {
  width:20px;
  height:20px;
  flex:none;
}

/* 鄉鎮民宿選單：依分區列出各鄉鎮民宿網；開合由 app.js 控制 */
.nav-towns {
  display:flex;
  align-items:center;
  align-self:stretch;
}

.nav-towns-button {
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;
  font-weight:600;
  position:relative;
}

.nav-caret {
  width:12px;
  height:12px;
  flex:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}

.nav-towns.open .nav-caret,.nav-towns[open] .nav-caret {
  transform:rotate(180deg);
}

.towns-menu {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fffefb;
  border-top:1px solid #eee9e1;
  border-bottom:1px solid #e2ddd2;
  box-shadow:0 28px 44px -32px rgba(24,61,73,.5);
  font-weight:400;
  white-space:normal;
  visibility:hidden;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),visibility 0s .2s;
}

.nav-towns.open .towns-menu,.nav-towns[open] .towns-menu {
  visibility:visible;
  opacity:1;
  transform:none;
  transition-delay:0s;
}

.towns-menu-inner {
  width:min(1240px,calc(100% - 64px));
  margin:auto;
  padding:30px 0 22px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:26px 30px;
}

.towns-menu-zone>p {
  padding-bottom:10px;
  margin-bottom:6px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
}

.towns-menu-zone>p a {
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.towns-menu-zone>p a:before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--region);
}

.towns-menu-zone>p a:hover {
  color:var(--ink);
}

.towns-menu-zone ul {
  list-style:none;
  margin:0;
  padding:0;
}

.towns-menu-zone li a {
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 0;
}

.towns-menu-zone li b {
  font:700 16.5px/1.5 var(--serif);
  letter-spacing:.04em;
  text-decoration-line:underline;
  text-decoration-thickness:2px;
  text-decoration-color:transparent;
  text-underline-offset:.28em;
  transition:text-decoration-color .2s;
}

.towns-menu-zone li b svg {
  display:inline-block;
  width:11px;
  height:11px;
  margin-left:5px;
}

.towns-menu-zone li small {
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

.towns-menu-zone li a:hover b {
  text-decoration-color:var(--region);
}

.towns-menu-foot {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
}

.towns-menu-foot a {
  color:#2d6975;
  border-bottom:1px solid #8aafb6;
}

.towns-menu-foot a:hover {
  color:var(--ink);
  border-bottom-color:var(--ink);
}