/*---------- [ =Vendor =Application]----------*/

/* ── In-page navigation ───────────────────────────────────────────
   Targets the <ul id="inpage-nav" class="wp-block-list"> block.
──────────────────────────────────────────────────────────────────── */
#inpage-nav { /* Reset WordPress list defaults */ list-style: none; margin-left: 0; padding: 4px; /* inset padding creates the pill effect around the active-item pill */ /* Flex row of items */ display: flex; align-items: center; column-gap: .25em; /* Pill shape + sizing */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -webkit-overflow-scrolling: touch; }
#inpage-nav::-webkit-scrollbar { display: none; /* Hide scrollbar — WebKit */}
#inpage-nav li { flex: 0 0 auto; position: relative; list-style: none; }
#inpage-nav li a { display: block; padding: 0.55em 1.1em; font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--c-gray-400); text-decoration: none; white-space: nowrap; border-radius: 9999px; line-height: 1.4; transition: color 0.2s ease, background-color 0.2s ease; }
/* Hover state */
#inpage-nav li a:hover { color: var(--c-primary); background-color: #f6f5f0; }
/* Active state — set by s3_inpage-nav.js via .is-active on the <li> */
#inpage-nav li.is-active a { color: var(--c-primary); background-color: #e7664e; }
/* Focus-visible: accessible keyboard ring that respects the pill shape */
#inpage-nav li a:focus-visible { outline: 2px solid var(--c-blue-400); outline-offset: 2px; }
/* ── 3. Target section scroll-margin ─────────────────────────────────
   Provides correct scroll-position for:
     - Native hash link navigation (browser default, screen readers)
     - Keyboard focus on in-page anchors
     - CSS :target state
   The JS click handler uses its own offset calculation for smooth scroll,
   so this rule is only a fallback — but it's important for accessibility.
   60px is a conservative estimate of the sticky nav bar's rendered height.
──────────────────────────────────────────────────────────────────── */
:is(#general, #spaces, #parking, #promotion) { scroll-margin-top: calc(var(--computed-nav-top, 56px) + 60px); }


.inpage-nav-wrapper { background: var(--c-lightest); padding: 0 !important; border-radius: 9999px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06); width: fit-content; max-width: min(840px, calc(100% - 2 * var(--s-md))); margin-inline: auto;  position: sticky; top: var(--computed-nav-top, 56px); z-index: 100; /* Clips nav-item content at the rounded ends without creating a scroll container (overflow: hidden would interfere with sticky) */ overflow: clip; }
.admin-bar .inpage-nav-wrapper { top: calc(var(--computed-nav-top, 56px) + 32px); }
.inpage-nav-wrapper::before,
.inpage-nav-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; pointer-events: none; z-index: 1; /* above #inpage-nav (z-index: auto) within wrapper */ opacity: 0; transition: opacity 0.2s ease; }
.inpage-nav-wrapper::before { left: 0; background: linear-gradient( to right, #fff 25%, rgba(255, 255, 255, 0) ); }
.inpage-nav-wrapper::after { right: 0; background: linear-gradient( to left, #fff 25%, rgba(255, 255, 255, 0) ); }
/* Activated by JS data-attributes */
.inpage-nav-wrapper[data-fade-left]::before { opacity: 1; }
.inpage-nav-wrapper[data-fade-right]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .inpage-nav-wrapper::before,
    .inpage-nav-wrapper::after { transition: none; }
}

.entry-content section h1 { font-size: calc(var(--fs-4xl) * 1.4); }
.entry-content section h2 { font-size: var(--fs-3xl); }

.hero-banner p { color: var(--global-palette3) !important; }
.hero-banner { margin-bottom: -5rem !important; }
@media (min-width: 1200px) {
.hero-banner { margin-bottom: -7.5rem !important; }
}
.entry-content section#general { padding-top: var(--s-xl) !important; }

.card__space { background: #fff; border: 4px solid #e5e2d8; padding: 1.5rem 2rem 2rem !important; border-radius: var(--radius-md); box-shadow: var(--shadow-2xl); }
.card__space h3 { font-size: var(--fs-2xl); line-height: 1.2; }
.card__space p { margin-bottom: 1ch !important; }
.card__space figure { margin-bottom: 2rem !important; } 
.card__space figure img { border-radius: var(--radius-md-inset) !important;} 
.card__space li { line-height: 1.4; margin-bottom: 1.5ch; } 

:is(#parking,#spaces) img { border-radius: var(--radius-md); }

/* Comparison Slider */
#shipwrecked-compare { --slider-line-color: #f4ead8; /* off-white, matches palette */ --arrow-color: #2b3b2f; /* deep canopy green */ --slider-line-width: 3px; --slider-button-size: 34px; --arrow-size: 8px; --arrow-border-width: 2px; position: relative; overflow: hidden; width: 100%; max-width: 100%; aspect-ratio: 9 / 6; /* match your actual image ratio; JS no longer required for layout */ }
#shipwrecked-compare .image-before,
#shipwrecked-compare .image-after { position: absolute; inset: 0; width: 100%; height: 100%; }
#shipwrecked-compare .image-before img,
#shipwrecked-compare .image-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
#shipwrecked-compare .image-after { clip-path: inset(0 50% 0 0); }
#shipwrecked-compare .slider { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; cursor: ew-resize; appearance: none; margin: 0; z-index: 3; }
#shipwrecked-compare .slider::-webkit-slider-thumb,
#shipwrecked-compare .slider::-moz-range-thumb { width: 0; height: 0; background: transparent; cursor: ew-resize; }
/* Visible focus ring for keyboard users — don't skip this */
#shipwrecked-compare .slider:focus-visible ~ .slider-line { outline: 2px solid var(--slider-line-color); outline-offset: 2px; }
#shipwrecked-compare .slider-line { position: absolute; top: 0; left: 50%; width: var(--slider-line-width); height: 100%; background: var(--slider-line-color); transform: translateX(-50%); pointer-events: none; z-index: 1; }
#shipwrecked-compare .slider-button { position: absolute; width: var(--slider-button-size); height: var(--slider-button-size); border-radius: 50%; background: var(--slider-line-color); left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); padding: 0 6px; pointer-events: none; z-index: 2; }
#shipwrecked-compare .slider-button::before,
#shipwrecked-compare .slider-button::after { content: ''; width: var(--arrow-size); height: var(--arrow-size); border: solid var(--arrow-color); border-width: 0 var(--arrow-border-width) var(--arrow-border-width) 0; }
#shipwrecked-compare .slider-button::after { transform: rotate(-45deg); }
#shipwrecked-compare .slider-button::before { transform: rotate(135deg); }

.entry-content .wp-block-group.group-box { border: 1px solid #dbd8cd; border-radius: var(--radius-sm); padding: var(--s-base); text-align: center; font-size: var(--fs-lg); }
.entry-content .wp-block-group.group-box p { margin-bottom: 1em; }