/* Header 2026. Scoped to avoid the legacy header/nav rules in ui.min.css.
 * Cream surface matches main-menu-ref1–3; typography/actions use Xinalani UI tokens. */
/* The legacy body height:100% would constrain sticky navigation to one viewport. */
body.xinalani-header-2026 { height: auto; min-height: 100%; }
body #xh-header {
    --xh-bg: #FAF7F2;
    position: sticky; inset: 0 0 auto; z-index: 1000;
    display: block; width: 100%; max-width: none; height: auto; margin: 0; padding: 0;
    -webkit-transform: none; transform: none;
    background: var(--xh-bg); color: var(--x-ink); border: 0;
    box-shadow: 0 1px 0 rgba(43,38,34,.08);
    font: 400 16px/1.45 var(--x-font-ui); text-align: left;
}
#xh-header *, #xh-header *::before, #xh-header *::after { box-sizing: border-box; }
#xh-header a { text-decoration: none; color: inherit; }
#xh-header button, #xh-header summary { font-family: inherit; cursor: pointer; }
#xh-header :is(a, button, summary):focus-visible { outline: 2px solid var(--x-terracotta); outline-offset: 5px; }
#xh-header .xh-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; max-width: 1680px; min-height: 80px; margin: auto; padding: 12px 40px; }
#xh-header .xh-logo { position: static; display: block; width: 155px; height: auto; margin: 0; padding: 0; }
#xh-header .xh-logo img { display: block; width: 100%; height: auto; max-width: 100%; }
#xh-header .xh-navigation { position: static; float: none; width: auto; height: auto; margin: 0; padding: 0; background: none; }
#xh-header .xh-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
#xh-header .xh-item { position: static; display: block; float: none; margin: 0; padding: 0; background: none; }
#xh-header .xh-dropdown { margin: 0; padding: 0; border: 0; }
#xh-header .xh-trigger { display: block; padding: 14px 0; list-style: none; color: var(--x-ink); font-size: 13px; font-weight: 700; line-height: 1.2; text-transform: uppercase; white-space: nowrap; transition: color var(--x-dur-fast); }
#xh-header a.xh-direct { height: auto; margin: 0; border: 0; letter-spacing: normal; }
#xh-header .xh-trigger::-webkit-details-marker { display: none; }
#xh-header .xh-trigger::after { content: none; }
#xh-header .xh-dropdown[open] > .xh-trigger, #xh-header .xh-trigger:hover { color: var(--x-terracotta); }
#xh-header .xh-panel { position: absolute; inset: 100% 0 auto; width: 100%; max-height: calc(100dvh - 145px); overflow: auto; padding: 12px 40px 30px; background: var(--xh-bg); box-shadow: 0 10px 14px -14px rgba(43,38,34,.35); }
#xh-header .xh-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; max-width: 820px; margin: 0 auto; }
#xh-header .xh-cards--three { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1120px; }
#xh-header .xh-card { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: stretch; justify-content: normal; gap: 24px; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; letter-spacing: normal; text-align: left; text-transform: none; }
#xh-header .xh-image { display: block; width: 100%; height: 100%; min-height: 210px; max-height: 250px; aspect-ratio: 200 / 288; object-fit: cover; border-radius: 0; }
#xh-header .xh-card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0; min-width: 0; }
#xh-header .xh-card-title { margin: 0 0 16px; padding: 0; color: var(--x-terracotta); font: 600 16px/1.15 var(--x-font-ui); letter-spacing: .14em; text-transform: uppercase; }
#xh-header .xh-card-text { margin: 0 0 24px; padding: 0; color: var(--x-ink); font: 400 16px/1.5 var(--x-font-ui); }
#xh-header .xh-explore { display: inline-block; margin-top: auto; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--x-terracotta); font: 600 12px/1.3 var(--x-font-ui); text-transform: uppercase; }
#xh-header .xh-card:hover .xh-explore { color: var(--x-terracotta-dark); border-bottom-width: 2px; }
#xh-header .xh-mobile-booking { display: none; }
#xh-header .xh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
#xh-header .xh-language { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 7px; border: 1px solid var(--x-ink); font-size: 12px; font-weight: 700; }
#xh-header .xh-book { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: var(--x-radius-pill); background: var(--x-terracotta); color: var(--x-white); font: 700 12px/1.25 var(--x-font-ui); text-align: center; text-transform: uppercase; transition: background var(--x-dur-fast); }
#xh-header .xh-book:hover { background: var(--x-terracotta-dark); }
#xh-header .xh-toggle { display: none; border: 0; border-radius: 0; background: transparent; color: var(--x-ink); width: 44px; height: 44px; padding: 10px; cursor: pointer; }
#xh-header .xh-burger { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; }
#xh-header .xh-burger > span { display: block; width: 100%; height: 2px; margin: 0; background: currentColor; transition: transform var(--x-dur-fast), opacity var(--x-dur-fast); }
#xh-header .xh-toggle[aria-expanded="true"] .xh-burger > span:first-child { transform: translateY(8px) rotate(45deg); }
#xh-header .xh-toggle[aria-expanded="true"] .xh-burger > span:nth-child(2) { opacity: 0; }
#xh-header .xh-toggle[aria-expanded="true"] .xh-burger > span:last-child { transform: translateY(-8px) rotate(-45deg); }
#xh-header .xh-skip { position: absolute; top: 0; left: 20px; z-index: 2; padding: 12px 20px; background: var(--x-white); transform: translateY(-150%); }
#xh-header .xh-skip:focus { transform: translateY(0); }
#xh-content { scroll-margin-top: 130px; }
body.admin-bar #xh-header { top: 32px; }
@media (min-width: 1101px) and (max-width: 1300px) {
    #xh-header .xh-bar { padding: 12px 28px; gap: 20px; min-height: 80px; }
    #xh-header .xh-logo { width: 155px; }
    #xh-header .xh-links { gap: 22px; }
    #xh-header .xh-actions { gap: 14px; }
    #xh-header .xh-book { padding-inline: 18px; }
}
@media (max-width: 1100px) {
    #xh-header .xh-bar { grid-template-columns: 1fr auto; min-height: 76px; gap: 12px; padding: 10px 24px; }
    #xh-header .xh-logo { width: 155px; }
    #xh-header .xh-actions { gap: 12px; }
    #xh-header .xh-mobile-booking { display: block; padding: 20px 0 4px; border-top: 1px solid var(--x-line); }
    #xh-header .xh-mobile-booking .xh-book { width: fit-content; min-height: 44px; }
    #xh-header .xh-navigation { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    #xh-header .xh-links { display: block; }
    #xh-header .xh-item { border-top: 1px solid var(--x-line); }
    #xh-header .xh-trigger { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; font-size: 14px; }
    #xh-header .xh-dropdown > .xh-trigger::after { content: '+'; font-size: 20px; font-weight: 400; }
    #xh-header .xh-dropdown[open] > .xh-trigger::after { content: '−'; }
    #xh-header .xh-panel { position: static; padding: 4px 4px 24px; width: 100%; max-height: none; overflow: visible; box-shadow: none; }
    #xh-header .xh-cards, #xh-header .xh-cards--three { max-width: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    #xh-header .xh-image { min-height: 180px; max-height: 250px; }
    #xh-header .xh-card-body { padding: 6px 0; }
    #xh-header .xh-card-title { font-size: 14px; }
    #xh-header .xh-card-text { font-size: 15px; }
    #xh-header.xh-enhanced .xh-toggle { display: block; }
    #xh-header.xh-enhanced .xh-navigation { display: none; position: absolute; inset: 100% 0 auto; padding: 0 24px 20px; background: var(--xh-bg); max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 10px 14px -14px rgba(43,38,34,.35); }
    #xh-header.xh-mobile-open .xh-navigation { display: block; }
}
@media (max-width: 600px) {
    #xh-header .xh-bar { min-height: 64px; gap: 8px; padding: 8px 16px; }
    #xh-header .xh-logo { width: 125px; }
    #xh-header .xh-actions { display: contents; }
    #xh-header .xh-language { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 56px; }
    #xh-header .xh-toggle { grid-column: 2; grid-row: 1; justify-self: end; max-width: 64px; }
    #xh-header .xh-actions > .xh-book { grid-column: 1 / -1; grid-row: 2; min-height: 42px; width: fit-content; padding: 10px 16px; }
    #xh-header .xh-navigation { grid-row: 3; }
    #xh-header.xh-enhanced .xh-navigation { grid-row: 2; }
    #xh-header.xh-enhanced .xh-navigation { padding-inline: 16px; max-height: calc(100dvh - 110px); }
    #xh-header .xh-cards, #xh-header .xh-cards--three { grid-template-columns: minmax(0,1fr); gap: 24px; }
    #xh-header .xh-card { grid-template-columns: 120px minmax(0,1fr); gap: 20px; }
    #xh-header .xh-image { min-height: 174px; max-height: 230px; }
    #xh-header .xh-card-text { margin-bottom: 16px; }
    #xh-content { scroll-margin-top: 80px; }
}
@media (max-width: 782px) { body.admin-bar #xh-header { top: 46px; } }
/* WordPress's mobile admin bar scrolls away; reserve no permanent gap. */
@media (max-width: 600px) { body.admin-bar #xh-header { top: 0; } }
@media (prefers-reduced-motion: reduce) { #xh-header * { transition: none; } }

/* Availability stays in the native dialog top layer, above sticky content. */
body.xh-booking-open { overflow: hidden; }
#xh-booking {
    position: fixed; inset: 0 0 0 auto;
    width: min(480px, 100%); max-width: none; height: 100dvh;
    max-height: 100dvh; margin: 0; padding: 0;
    border: 0; border-left: 1px solid var(--x-line); border-radius: 0;
    background: var(--x-sand); color: var(--x-ink);
    box-shadow: 0 24px 90px rgba(43,38,34,.22);
    font: 400 16px/1.5 var(--x-font-ui); text-align: left;
    overflow-y: auto; overscroll-behavior: contain;
}
#xh-booking[open] { animation: xh-drawer-in var(--x-dur-line) var(--x-ease-organic); }
#xh-booking::backdrop { background: rgba(43,38,34,.5); animation: xh-backdrop-in var(--x-dur-base) ease-out; }
@keyframes xh-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes xh-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
#xh-booking *, #xh-booking *::before, #xh-booking *::after { box-sizing: border-box; }
#xh-booking .xh-booking-content { position: relative; min-height: 100%; padding: 80px 36px 36px; padding-bottom: max(36px, env(safe-area-inset-bottom)); background: #fff; }
#xh-booking .xh-booking-close {
    position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--x-ink); font: 400 28px/1 var(--x-font-ui); cursor: pointer;
}
#xh-booking .xh-booking-close:hover { background: var(--x-sand-deep); }
#xh-booking .xh-booking-close span { color: inherit; font: inherit; }
#xh-booking .xh-booking-eyebrow { margin: 0 0 12px; color: var(--x-terracotta); font: 600 12px/1.3 var(--x-font-ui); letter-spacing: .14em; text-transform: uppercase; }
#xh-booking #xh-booking-title { margin: 0 0 14px; color: var(--x-ink); font: 400 30px/1.25 var(--x-font-head); text-transform: none; letter-spacing: 0; }
#xh-booking #xh-booking-intro { margin: 0 0 28px; color: var(--x-ink-soft); font: 400 16px/1.5 var(--x-font-ui); }
#xh-booking .xh-booking-form { margin: 0; }
#xh-booking .xh-booking-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#xh-booking .xh-booking-field { min-width: 0; }
#xh-booking label { display: block; margin-bottom: 8px; color: var(--x-ink); font: 600 14px/1.3 var(--x-font-ui); }
#xh-booking input[type="date"] { display: block; width: 100%; min-width: 0; height: 54px; padding: 10px 12px; border: 1px solid var(--x-line); border-radius: 4px; background: var(--x-white); color: var(--x-ink); font: 400 16px/1.3 var(--x-font-ui); color-scheme: light; }
#xh-booking :is(button,input):focus-visible { outline: 2px solid var(--x-terracotta); outline-offset: 3px; }
#xh-booking .xh-booking-hint { margin: 12px 0; color: var(--x-ink-soft); font: 400 13px/1.5 var(--x-font-ui); }
#xh-booking .xh-booking-summary { min-height: 24px; margin: 18px 0; color: var(--x-olive-text); font: 600 16px/1.5 var(--x-font-ui); }
#xh-booking .xh-booking-summary.is-invalid { color: var(--x-terracotta-dark); }
#xh-booking .xh-booking-submit { display: block; width: 100%; min-height: 52px; padding: 14px 20px; border: 0; border-radius: var(--x-radius-pill); background: var(--x-terracotta); color: var(--x-white); font: 700 14px/1.3 var(--x-font-ui); cursor: pointer; }
#xh-booking .xh-booking-submit:hover { background: var(--x-terracotta-dark); }
#xh-booking .xh-booking-note { margin: 14px 0 0; color: var(--x-ink-soft); font: 400 12px/1.5 var(--x-font-ui); text-align: center; }
@media (max-width: 600px) {
    #xh-booking { width: 100%; border-left: 0; }
    #xh-booking .xh-booking-content { padding: 76px 24px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    #xh-booking #xh-booking-title { font-size: 27px; }
    #xh-booking .xh-booking-dates { grid-template-columns: minmax(0,1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) { #xh-booking, #xh-booking::backdrop { animation: none; } }