/* Shared responsive header. Compact layout is also the fallback for older browsers. */
:root { --yoruya-header-height: 64px; --yoruya-admin-offset: 0px; }
html:has(#wpadminbar) { --yoruya-admin-offset: 32px; }
.wrapper { padding-top: var(--yoruya-header-height); }
.wrapper #main_content { display: block; }
.wrapper .content_area { width: calc(858 / 1440 * var(--vw)); margin-left: auto; margin-right: auto; padding-top: 48px; }
.wrapper .content_area.__top { width: min(1240px, calc(100% - 96px)); padding-top: 40px; }
.content_area > .c-about_bottom_image { max-width: 100%; }
footer#footer > .inner { width: min(1120px, calc(100% - 96px)); margin-left: auto; margin-right: auto; }
footer#footer > .inner > .logo { margin-left: 0; }
#main_content, #yoruya-main-content, #access, #stay-plans { scroll-margin-top: calc(var(--yoruya-header-height) + var(--yoruya-admin-offset) + 24px); }
.yoruya-site-header { position: fixed; z-index: 200; top: var(--yoruya-admin-offset); left: 0; right: 0; container: yoruya-header / inline-size; color: #302b27; background: #faf2ee; }
.yoruya-header-bar { --yoruya-bar-height: 60px; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: var(--yoruya-bar-height); padding-left: max(8px, env(safe-area-inset-left)); border-bottom: 1px solid #c8bcae; }
.yoruya-site-header a { color: inherit; text-decoration: none; }
.yoruya-site-header a:focus-visible, .yoruya-menu summary:focus-visible { outline: 3px solid #725037; outline-offset: 3px; }
.yoruya-header-brand { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 44px; margin-right: auto; padding: 4px 0; }
.yoruya-header-brand img { display: block; width: 80px; height: auto; }
.yoruya-header-brand span { font-size: 8px; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.yoruya-nav-list { margin: 0; padding: 0; list-style: none; }
.yoruya-header-primary { display: none; }
.yoruya-header-primary .yoruya-nav-list { display: flex; align-items: center; gap: clamp(22px, 2.4cqi, 40px); }
.yoruya-header-primary a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.5; letter-spacing: .06em; white-space: nowrap; }
.yoruya-header-primary a:hover, .yoruya-header-primary a[aria-current], .yoruya-header-primary .current-menu-item > a, .yoruya-header-primary .current-menu-ancestor > a { text-decoration: underline; text-underline-offset: 7px; }
.yoruya-header-languages { display: flex; align-items: center; gap: 0; flex: 0 0 auto; font-size: 13px; line-height: 1.5; }
.yoruya-header-languages a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.yoruya-header-languages a[aria-current], .yoruya-header-languages > span { display: none; }
.yoruya-site-header .yoruya-header-booking { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; min-width: 110px; padding: 10px max(12px, env(safe-area-inset-right)) 10px 12px; background: #302b27; color: #faf2ee; text-align: center; font-size: 13px; line-height: 1.5; letter-spacing: .015em; white-space: nowrap; }
.yoruya-site-header .yoruya-header-booking:hover { background: #51463c; }
.yoruya-site-header .yoruya-header-booking:focus-visible { outline-offset: -6px; outline-color: #faf2ee; }
.yoruya-booking-label-full { display: none; }
.yoruya-menu { flex: 0 0 44px; }
.yoruya-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 48px; list-style: none; cursor: pointer; touch-action: manipulation; }
.yoruya-menu summary::-webkit-details-marker { display: none; }
.yoruya-menu-lines, .yoruya-menu-lines::before, .yoruya-menu-lines::after { display: block; width: 26px; height: 1px; background: currentColor; }
.yoruya-menu-lines { position: relative; }
.yoruya-menu-lines::before, .yoruya-menu-lines::after { content: ''; position: absolute; left: 0; }
.yoruya-menu-lines::before { top: -7px; }
.yoruya-menu-lines::after { top: 7px; }
.yoruya-menu[open] .yoruya-menu-lines { background: transparent; }
.yoruya-menu[open] .yoruya-menu-lines::before { top: 0; transform: rotate(45deg); }
.yoruya-menu[open] .yoruya-menu-lines::after { top: 0; transform: rotate(-45deg); }
.yoruya-menu-panel { position: absolute; top: 100%; left: 0; right: 0; box-sizing: border-box; max-height: calc(100vh - var(--yoruya-bar-height) - var(--yoruya-admin-offset)); max-height: calc(100dvh - var(--yoruya-bar-height) - var(--yoruya-admin-offset)); overflow-y: auto; overscroll-behavior: contain; padding: 20px max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border-bottom: 1px solid #c8bcae; background: #faf2ee; box-shadow: 0 12px 20px #302b2710; }
.yoruya-menu-heading { margin: 0 0 14px; font-size: 11px; letter-spacing: .12em; line-height: 1.8; }
.yoruya-menu-columns { display: grid; grid-template-columns: 1fr; gap: 16px; }
.yoruya-menu-panel a { display: flex; align-items: center; min-height: 48px; font-size: 22px; line-height: 1.5; overflow-wrap: anywhere; }
.yoruya-menu-panel a:hover, .yoruya-menu-panel a[aria-current] { text-decoration: underline; text-underline-offset: 7px; }
.yoruya-menu-secondary { padding-top: 12px; border-top: 1px solid #c8bcae; }
.yoruya-menu-secondary .yoruya-nav-list { display: flex; flex-wrap: wrap; gap: 0 22px; }
.yoruya-menu-secondary a { min-height: 44px; font-size: 15px; }
.yoruya-site-header .yoruya-skip-link { position: absolute; z-index: 2; top: -200px; left: 12px; padding: 12px 18px; background: #faf2ee; color: #302b27; font-size: 14px; }
.yoruya-site-header .yoruya-skip-link:focus { top: 8px; }
.yoruya-content-start { display: block; height: 0; }
.yoruya-content-start:focus { outline: none; }
@container yoruya-header (min-width: 601px) {
  .yoruya-header-bar { gap: 20px; padding-left: 24px; }
  .yoruya-header-brand img { width: 104px; }
  .yoruya-header-brand span { font-size: 9px; letter-spacing: .1em; }
  .yoruya-header-languages a[aria-current] { display: inline-flex; text-decoration: underline; text-underline-offset: 5px; }
  .yoruya-header-languages > span { display: inline; }
  .yoruya-site-header .yoruya-header-booking { min-width: 184px; font-size: 14px; }
  .yoruya-booking-label-full { display: inline; }
  .yoruya-booking-label-short { display: none; }
  .yoruya-menu-panel { padding: 36px max(48px, calc((100cqi - 1120px) / 2)) 48px; }
  .yoruya-menu-columns { grid-template-columns: 1fr 1fr; gap: 32px; }
  .yoruya-menu-panel a { min-height: 50px; font-size: 24px; }
  .yoruya-menu-secondary { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid #c8bcae; }
  .yoruya-menu-secondary .yoruya-nav-list { display: block; }
  .yoruya-menu-secondary a { font-size: 17px; }
}
@container yoruya-header (min-width: 813px) {
  .yoruya-header-bar { --yoruya-bar-height: 64px; }
}
@container yoruya-header (min-width: 1241px) {
  .yoruya-header-primary { display: block; }
  .yoruya-header-bar { gap: clamp(16px, 2cqi, 32px); }
}
@media (max-width: 812px) {
  :root { --yoruya-header-height: 60px; }
  .wrapper .content_area { width: 100%; padding-top: 36px; }
  .wrapper .content_area.__top { width: calc(100% - 40px); padding-top: 16px; }
  footer#footer > .inner { width: 100%; }
  footer#footer > .inner > .logo { margin-left: auto; }
}
@media (max-width: 782px) {
  html:has(#wpadminbar) { --yoruya-admin-offset: 46px; }
  #wpadminbar { position: fixed; }
}