/* ==========================================================================
   Niushou Mountain Cultural Tourism Zone — main stylesheet
   Palette: deep navy + arctic cyan + coral CTA
   ========================================================================== */

:root {
        --navy-950: #0A1F15;
        --navy-900: #0F2A1D;
        --navy-800: #173A28;
        --navy-700: #1F4A34;
        --blue-600: #2E6B4C;
        --blue-500: #3C8762;
        --cyan-600: #43906B;
        --cyan-500: #57A97F;
        --cyan-300: #A5D9BE;
        --cyan-100: #E4F4EB;
        --ice-50: #F4FBF6;
        --ice-100: #EAF6EF;
        --coral-500: #D99A2B;
        --coral-600: #C4851D;
        --gold-400: #F2C94C;
        --ink-900: #15251B;
        --ink-700: #35493C;
        --ink-500: #5E7466;
        --ink-400: #84978B;
        --line: #DAEADF;
        --white: #FFFFFF;
        --ff-head: 'Poppins', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --ff-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --container: 1200px;
        --radius: 16px;
        --radius-lg: 24px;
        --shadow-sm: 0 2px 8px rgba(15, 42, 29, 0.08);
        --shadow-md: 0 10px 30px rgba(15, 42, 29, 0.12);
        --shadow-lg: 0 24px 60px rgba(15, 42, 29, 0.18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
        box-sizing: border-box;
}

html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
}

body {
        margin: 0;
        font-family: var(--ff-body);
        font-size: 16.5px;
        line-height: 1.7;
        color: var(--ink-700);
        background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
        font-family: var(--ff-head);
        color: var(--navy-800);
        line-height: 1.25;
        margin: 0 0 0.6em;
}

p {
        margin: 0 0 1.1em;
}

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

a {
        color: var(--cyan-600);
}

section[id],
footer[id] {
        scroll-margin-top: 120px;
}

.container {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: 24px;
}

/* Screen reader + skip link */
.screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        word-wrap: normal !important;
}

.skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 100000;
}

.skip-link:focus {
        left: 12px;
        top: 12px;
        background: var(--white);
        color: var(--navy-800);
        padding: 10px 18px;
        border-radius: 10px;
        box-shadow: var(--shadow-md);
        font-weight: 600;
        text-decoration: none;
}

/* Icons */
.ico {
        width: 22px;
        height: 22px;
        flex: none;
}

/* Buttons */
.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-family: var(--ff-head);
        font-weight: 600;
        font-size: 15.5px;
        line-height: 1.2;
        padding: 15px 26px;
        border-radius: 999px;
        border: 2px solid transparent;
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
        white-space: nowrap;
}

.btn--accent {
        background: linear-gradient(135deg, #E8B45A, var(--coral-500) 55%, var(--coral-600));
        color: var(--white);
        box-shadow: 0 10px 24px rgba(217, 154, 43, 0.35);
}

.btn--accent:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(217, 154, 43, 0.45);
        color: var(--white);
}

.btn--navy {
        background: var(--navy-800);
        color: var(--white);
}

.btn--navy:hover {
        background: var(--navy-700);
        color: var(--white);
        transform: translateY(-2px);
}

.btn--ghost {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.55);
        color: var(--white);
}

.btn--ghost:hover {
        background: rgba(255, 255, 255, 0.18);
        color: var(--white);
}

.btn--outline {
        border-color: var(--navy-800);
        color: var(--navy-800);
}

.btn--outline:hover {
        background: var(--navy-800);
        color: var(--white);
}

.btn--lg {
        padding: 18px 34px;
        font-size: 16.5px;
}

.btn .ico {
        width: 18px;
        height: 18px;
}

/* Stars */
.stars {
        display: inline-flex;
        gap: 3px;
}

.stars .star {
        display: inline-flex;
}

.stars .star .ico {
        width: 17px;
        height: 17px;
        color: #D6E7DB;
}

.stars .star--on .ico {
        color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   Sections & headings
   -------------------------------------------------------------------------- */

.section {
        padding: 96px 0;
}

.section--tint {
        background: linear-gradient(180deg, var(--ice-50) 0%, #FBFEFC 60%, var(--white) 100%);
}

.section--dark {
        background:
                radial-gradient(1200px 600px at 85% -10%, rgba(87, 169, 127, 0.20), transparent 60%),
                radial-gradient(800px 500px at 0% 110%, rgba(60, 135, 98, 0.25), transparent 55%),
                linear-gradient(160deg, #0F2A1D 0%, #173A28 55%, #1F4A34 100%);
        color: #DCEFE2;
}

.section--dark h2,
.section--dark h3 {
        color: var(--white);
}

.section-head {
        max-width: 760px;
        margin: 0 auto 56px;
        text-align: center;
}

.section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-weight: 600;
        font-size: 13px;
        color: var(--cyan-600);
        margin: 0 0 6px;
}

.section--dark .section-kicker {
        color: var(--cyan-300);
}

.section-title {
        font-size: clamp(28px, 4vw, 40px);
        line-height: 1.2;
        margin: 0 0 14px;
        color: var(--navy-800);
}

.section-lead {
        color: var(--ink-500);
        font-size: 17px;
        margin: 0;
}

.section--dark .section-lead {
        color: #B7D2C2;
}

/* --------------------------------------------------------------------------
   Top bar + header
   -------------------------------------------------------------------------- */

.site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
        transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
        box-shadow: var(--shadow-md);
}

.topbar {
        background: linear-gradient(90deg, var(--navy-900), var(--navy-700));
        color: #CDE4D5;
        font-size: 13.5px;
}

.topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        min-height: 38px;
}

.topbar-group {
        display: flex;
        align-items: center;
        gap: 22px;
        min-width: 0;
}

.topbar-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
}

.topbar-item .ico {
        width: 15px;
        height: 15px;
        color: var(--cyan-300);
}

.topbar a {
        color: var(--white);
        text-decoration: none;
}

.topbar a:hover {
        color: var(--cyan-300);
}

.header-main {
        position: relative;
}

.header-main-inner {
        display: flex;
        align-items: center;
        gap: 20px;
        min-height: 74px;
}

.site-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: var(--navy-800);
        flex: none;
        min-width: 0;
}

.site-brand-icon svg {
        width: 46px;
        height: 46px;
        display: block;
}

.site-brand-text {
        min-width: 0;
}

.site-brand-name {
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: 18px;
        line-height: 1.15;
        display: block;
        white-space: nowrap;
}

.site-brand-sub {
        display: block;
        font-size: 12px;
        color: var(--ink-400);
        letter-spacing: 0.02em;
        white-space: nowrap;
}

.primary-nav {
        margin-left: auto;
}

.nav-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 2px;
}

.nav-menu a {
        display: block;
        padding: 10px 11px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.01em;
        color: var(--ink-700);
        text-decoration: none;
        white-space: nowrap;
}

.nav-menu a:hover {
        background: var(--ice-100);
        color: var(--navy-800);
}

.current-menu-item > a,
.current_page_item > a {
        color: var(--cyan-600);
        font-weight: 600;
}

.header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
}

.btn-header {
        padding: 12px 22px;
        font-size: 14.5px;
}

.nav-book {
        display: none;
        margin-top: 12px;
}

.nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        border: 1px solid var(--line);
        background: var(--white);
        border-radius: 12px;
        cursor: pointer;
        padding: 0 11px;
        flex: none;
}

.nav-toggle span {
        display: block;
        height: 2.4px;
        border-radius: 2px;
        background: var(--navy-800);
        transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-active span:nth-child(1) {
        transform: translateY(7.4px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
        opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
        transform: translateY(-7.4px) rotate(-45deg);
}

/* TranslatePress shortcode language switcher.
   Recipe copied 1:1 from the PROVEN live implementation of qingdaounderwaterworld.com.

   How the plugin works (trp-frontend-language-switcher.js):
   - In hover mode the plugin binds mouseenter/mouseleave on the OVERLAY with
     ZERO close delay. mouseleave = instant close.
   - The dropdown list must therefore stay IN FLOW inside the overlay: the
     overlay (position:absolute over the anchor) grows to contain pill + gap +
     list, so the whole pointer path stays inside the overlay's hit area.
   - NEVER position the list (no position:absolute / top / left). The earlier
     `position:absolute;top:100%` + `margin-top:8px` combo left an 8px dead gap
     OUTSIDE the overlay hit area — one mousemove across it fired mouseleave
     and the dropdown snapped shut mid-move (open/close flicker, impossible to
     pick a language). This exact bug shipped in v1.2.1. */

.nsm-ls {
        position: relative;
        z-index: 60;
        flex-shrink: 0;
        line-height: 1;
}

/* Switcher design tokens (consumed by the plugin's own stylesheet) */
.nsm-ls .trp-shortcode-switcher__wrapper {
        --bg: var(--ice-100) !important;
        --bg-hover: #DCEFE2 !important;
        --text: var(--navy-800) !important;
        --text-hover: var(--navy-700) !important;
        --border: 1px solid #D5EADD !important;
        --border-width: 1px !important;
        --border-color: #D5EADD !important;
        --border-radius: 999px !important;
        --flag-size: 15px !important;
        --font-size: 13px !important;
        --line-height: 1.2 !important;
        --arrow-size: 15px !important;
        --box-shadow: none !important;
        --width: auto !important;
}

/* Overlay = positioning layer only. Plugin default gives it
   position:absolute; left:0; top:0 — keep that, and strip every visual so the
   visible pill below covers the hidden anchor pixel-perfect:
   - padding MUST be 0 (plugin default 10px 0 would sink the pill and leave a
     dead hover strip above it),
   - width MUST be 100% so the overlay exactly matches the anchor width and
     the pill never slides when the list opens,
   - overflow MUST be visible so the in-flow list can extend beyond it. */
.nsm-ls .trp-shortcode-overlay {
        width: 100%;
        z-index: 120;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
}

/* Anchor = inert placeholder that reserves the pill's space in the header.
   Flatten it; give its inner wrapper the SAME box as the visible pill. */
.nsm-ls .trp-shortcode-anchor {
        padding: 0 !important;
        border: none !important;
}

.nsm-ls .trp-shortcode-anchor .trp-current-language-item__wrapper {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 10px 10px 10px 0;
}

/* Visible current-language pill (sits on the overlay, over the anchor) */
.nsm-ls .trp-current-language-item__wrapper {
        background: var(--ice-100);
        border: 1px solid #D5EADD;
        border-radius: 999px;
        padding: 10px 10px 10px 0;
        white-space: nowrap;
}

/* Dropdown (open state): solid white card. The list itself stays IN FLOW —
   the overlay grows downward to contain pill + margin + list, so hovering
   from the pill into the list never leaves the overlay's hit area. */
.nsm-ls .trp-shortcode-switcher.is-open .trp-switcher-dropdown-list,
.nsm-ls .trp-shortcode-switcher[aria-expanded="true"] .trp-switcher-dropdown-list {
        background: var(--white) !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-lg) !important;
        padding: 6px !important;
        margin-top: 8px;
        min-width: 200px;
}

.nsm-ls .trp-switcher-dropdown-list .trp-language-item {
        padding: 7px 16px 7px 10px !important;
        border-radius: 8px;
}

.nsm-ls .trp-language-item {
        gap: 6px;
        white-space: nowrap;
        min-height: 0;
}

.nsm-ls .trp-switcher-dropdown-list .trp-language-item:hover {
        background: var(--ice-100);
}

.nsm-ls img.trp-flag-image {
        width: 15px !important;
}

.nsm-ls a,
.nsm-ls a:visited {
        color: var(--navy-700);
        text-decoration: none;
        font-weight: 500;
}

.nsm-ls a:hover {
        color: var(--cyan-600);
}

/* Legacy fallback (older plugin markups): color/spacing only — never pill
   backgrounds or padding on .trp-language-switcher itself, which would leak
   onto both anchor and overlay of the new markup. */
.nsm-ls ul,
.nsm-ls ol {
        list-style: none;
        margin: 0;
        padding: 0;
}

.nsm-ls li {
        margin: 0;
        padding: 2px 4px;
}

.nsm-ls img,
.nsm-ls img.trp-flag-image {
        display: inline-block;
        max-width: 18px;
        height: auto;
        border-radius: 2px;
        vertical-align: middle;
}

.nsm-ls .trp-ls-shortcode-current-language,
.nsm-ls .trp-ls-shortcode-language {
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

/* --------------------------------------------------------------------------
   Hero (front page)
   -------------------------------------------------------------------------- */

.hero {
        position: relative;
        min-height: min(92vh, 860px);
        display: flex;
        align-items: center;
        overflow: hidden;
        background: var(--navy-900);
}

.hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(10, 31, 21, 0.93) 0%, rgba(15, 42, 29, 0.80) 42%, rgba(15, 42, 29, 0.38) 100%);
}

.hero-inner {
        position: relative;
        z-index: 2;
        padding: 130px 24px 170px;
        max-width: 900px;
}

.hero-kicker {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 13px;
        font-weight: 600;
        color: var(--cyan-300);
        margin: 0 0 14px;
}

.hero-title {
        font-size: clamp(40px, 6vw, 68px);
        color: var(--white);
        margin: 0 0 18px;
        line-height: 1.06;
}

.hero-sub {
        font-size: clamp(16.5px, 2vw, 19.5px);
        color: #D7EBDD;
        max-width: 640px;
        margin: 0 0 26px;
}

.hero-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 30px;
}

.badge-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #EDF7F0;
        border-radius: 999px;
        padding: 8px 15px;
        font-size: 13.5px;
        font-weight: 500;
        backdrop-filter: blur(6px);
}

.badge-pill .ico {
        width: 15px;
        height: 15px;
        color: var(--gold-400);
}

.badge-pill strong {
        color: var(--white);
        font-weight: 700;
}

.hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 34px;
}

.hero-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 26px;
        list-style: none;
        margin: 0;
        padding: 0;
        color: #CDE4D5;
        font-size: 14.5px;
}

.hero-facts li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.hero-facts .ico {
        width: 16px;
        height: 16px;
        color: var(--cyan-300);
}

/* --------------------------------------------------------------------------
   Quick info band
   -------------------------------------------------------------------------- */

.quickinfo-wrap {
        position: relative;
        z-index: 6;
        margin-top: -74px;
        padding-bottom: 8px;
}

.quickinfo {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
}

.qi-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: 24px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        border: 1px solid var(--line);
        text-decoration: none;
        color: inherit;
}

.qi-ico {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: var(--ice-100);
        color: var(--cyan-600);
        display: grid;
        place-items: center;
        flex: none;
}

.qi-ico .ico {
        width: 22px;
        height: 22px;
}

.qi-title {
        font-family: var(--ff-head);
        font-weight: 600;
        color: var(--navy-800);
        font-size: 15.5px;
        display: block;
        line-height: 1.3;
}

.qi-sub {
        font-size: 13.5px;
        color: var(--ink-500);
        display: block;
        margin-top: 4px;
}

.qi-card--link {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qi-card--link:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Welcome (two-column)
   -------------------------------------------------------------------------- */

.welcome-grid {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 64px;
        align-items: center;
}

.welcome-copy .section-kicker {
        margin-bottom: 6px;
}

.welcome-media {
        position: relative;
        padding-bottom: 70px;
}

.welcome-img-main {
        width: 88%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        display: block;
}

.welcome-img-sub {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 52%;
        border-radius: var(--radius-lg);
        border: 6px solid var(--white);
        box-shadow: var(--shadow-md);
        display: block;
}

.welcome-stat {
        position: absolute;
        left: -6px;
        top: -24px;
        background: linear-gradient(135deg, var(--cyan-500), var(--blue-500));
        color: var(--white);
        border-radius: 18px;
        padding: 16px 20px;
        box-shadow: var(--shadow-md);
}

.welcome-stat strong {
        display: block;
        font-size: 26px;
        font-family: var(--ff-head);
        line-height: 1.2;
}

.welcome-stat span {
        font-size: 13px;
        opacity: 0.92;
}

.checklist {
        list-style: none;
        margin: 26px 0 30px;
        padding: 0;
        display: grid;
        gap: 13px;
}

.checklist li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        color: var(--ink-700);
}

.checklist .ico {
        width: 21px;
        height: 21px;
        color: var(--cyan-500);
        margin-top: 3px;
        flex: none;
}

.welcome-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
}

.blog-empty-actions {
        justify-content: center;
        margin-top: 22px;
}

/* --------------------------------------------------------------------------
   Pavilion cards
   -------------------------------------------------------------------------- */

.pavilion-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
}

.pavilion-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
}

.pavilion-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
}

.card-media {
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
}

.card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
}

.pavilion-card:hover .card-media img {
        transform: scale(1.06);
}

.card-num {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(10, 31, 21, 0.72);
        color: var(--white);
        font-family: var(--ff-head);
        font-weight: 600;
        font-size: 13px;
        border-radius: 999px;
        padding: 6px 12px;
        backdrop-filter: blur(4px);
        letter-spacing: 0.06em;
}

.card-body {
        padding: 24px 26px 28px;
}

.card-body h3 {
        margin: 0 0 10px;
        font-size: 20px;
        color: var(--navy-800);
}

.card-body p {
        margin: 0;
        color: var(--ink-500);
        font-size: 15.2px;
}

/* --------------------------------------------------------------------------
   Animal cards (dark section)
   -------------------------------------------------------------------------- */

.animals-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
}

.animal-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-lg);
        padding: 26px 22px;
        text-align: center;
        transition: transform 0.3s ease, background 0.3s ease;
}

.animal-card:hover {
        background: rgba(255, 255, 255, 0.10);
        transform: translateY(-4px);
}

.animal-card h3 {
        margin: 0 0 8px;
        font-size: 17.5px;
}

.animal-card p {
        color: #B7D2C2;
        font-size: 14px;
        margin: 0;
        line-height: 1.65;
}

.animal-ico {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(87, 169, 127, 0.28), rgba(60, 135, 98, 0.28));
        color: var(--cyan-300);
        display: grid;
        place-items: center;
}

.animal-ico .ico {
        width: 27px;
        height: 27px;
}

.animals-note {
        text-align: center;
        color: #A6C4B1;
        margin: 34px 0 0;
        font-size: 15px;
}

/* --------------------------------------------------------------------------
   Show cards
   -------------------------------------------------------------------------- */

.shows-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
}

.show-card {
        position: relative;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 28px;
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
}

.show-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
}

.show-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--cyan-500), var(--blue-500));
}

.show-tag {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--cyan-600);
        background: var(--ice-100);
        border-radius: 999px;
        padding: 5px 12px;
        margin-bottom: 14px;
}

.show-card h3 {
        margin: 0 0 10px;
        font-size: 19px;
        color: var(--navy-800);
}

.show-card p {
        margin: 0;
        font-size: 14.8px;
        color: var(--ink-500);
}

.shows-tip {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        background: var(--ice-100);
        border: 1px solid #D5EADD;
        border-radius: var(--radius);
        padding: 20px 24px;
        margin-top: 34px;
        color: var(--ink-700);
        font-size: 15px;
}

.shows-tip .ico {
        color: var(--cyan-600);
        flex: none;
        margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Check-in spot cards
   -------------------------------------------------------------------------- */

.checkin-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
}

.checkin-card {
        position: relative;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 26px 24px 24px 78px;
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.checkin-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
}

.checkin-num {
        position: absolute;
        left: 20px;
        top: 26px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
        color: var(--white);
        display: grid;
        place-items: center;
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: 15px;
}

.checkin-card h3 {
        margin: 0 0 8px;
        font-size: 17px;
        color: var(--navy-800);
}

.checkin-card p {
        margin: 0;
        font-size: 14.2px;
        color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
}

.gallery-item {
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 4 / 3;
        margin: 0;
}

.gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
}

.gallery-item:hover img {
        transform: scale(1.07);
}

.gallery-item--wide {
        grid-column: span 2;
        aspect-ratio: 2.15 / 1;
}

/* --------------------------------------------------------------------------
   Review cards
   -------------------------------------------------------------------------- */

.reviews-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
}

.review-card {
        position: relative;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 30px 28px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
}

.review-card::before {
        content: "\201C";
        position: absolute;
        top: 2px;
        right: 22px;
        font-family: Georgia, serif;
        font-size: 76px;
        line-height: 1;
        color: var(--cyan-100);
        pointer-events: none;
}

.review-text {
        margin: 0;
        color: var(--ink-700);
        font-size: 15px;
        line-height: 1.75;
        flex: 1;
}

.review-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border-top: 1px dashed var(--line);
        padding-top: 14px;
}

.review-name {
        font-weight: 600;
        color: var(--navy-800);
        font-size: 14.5px;
}

.review-note {
        display: block;
        font-size: 12px;
        color: var(--ink-400);
        font-weight: 400;
        font-style: normal;
        margin-top: 2px;
}

.review-src {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: var(--cyan-600);
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
}

.review-src .ico {
        width: 14px;
        height: 14px;
}

.review-src:hover {
        text-decoration: underline;
}

.reviews-note {
        text-align: center;
        color: var(--ink-400);
        font-size: 13.5px;
        margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Post cards + blog grid
   -------------------------------------------------------------------------- */

.blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
}

.post-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
}

.post-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
}

.post-card-media {
        display: block;
        aspect-ratio: 32 / 19;
        overflow: hidden;
}

.post-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
}

.post-card:hover .post-card-media img {
        transform: scale(1.06);
}

.post-card-body {
        padding: 22px 24px 26px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
}

.post-card-meta {
        font-size: 12.5px;
        color: var(--ink-400);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
}

.post-card-title {
        margin: 0;
        font-size: 19px;
        line-height: 1.35;
}

.post-card-title a {
        color: var(--navy-800);
        text-decoration: none;
}

.post-card-title a:hover {
        color: var(--cyan-600);
}

.post-card-excerpt {
        margin: 0;
        color: var(--ink-500);
        font-size: 14.6px;
        flex: 1;
}

.post-card-more {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--cyan-600);
        font-weight: 600;
        font-size: 14px;
        margin-top: 4px;
        text-decoration: none;
}

.post-card-more .ico {
        width: 15px;
        height: 15px;
        transition: transform 0.25s ease;
}

.post-card:hover .post-card-more .ico {
        transform: translateX(4px);
}

.blog-more {
        text-align: center;
        margin-top: 40px;
}

.blog-empty {
        max-width: 660px;
        margin: 0 auto;
        text-align: center;
        background: var(--white);
        border: 1px dashed var(--line);
        border-radius: var(--radius-lg);
        padding: 48px 36px;
}

.blog-empty h3 {
        font-size: 22px;
        margin-bottom: 10px;
}

.blog-empty p {
        color: var(--ink-500);
        margin-bottom: 0;
}

.blog-empty .search-form {
        margin-top: 24px;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
        background:
                radial-gradient(900px 400px at 15% 0%, rgba(87, 169, 127, 0.30), transparent 55%),
                linear-gradient(120deg, #0F2A1D 0%, #1F4A34 70%, #173A28 100%);
        color: var(--white);
        padding: 88px 0;
}

.cta-inner {
        max-width: 780px;
        margin: 0 auto;
        text-align: center;
}

.cta-title {
        font-size: clamp(28px, 4vw, 42px);
        margin: 0 0 14px;
        color: var(--white);
}

.cta-text {
        color: #D7EBDD;
        font-size: 17px;
        margin: 0 0 30px;
}

.cta-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Page hero + breadcrumbs
   -------------------------------------------------------------------------- */

.page-hero {
        position: relative;
        background: linear-gradient(120deg, #0F2A1D, #1F4A34);
        color: var(--white);
        overflow: hidden;
}

.page-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.38;
}

.page-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 31, 21, 0.55), rgba(15, 42, 29, 0.85));
}

.page-hero-inner {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 92px 24px 84px;
        max-width: 860px;
}

.page-hero-kicker {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 13px;
        color: var(--cyan-300);
        margin: 0 0 12px;
        font-weight: 600;
}

.page-hero-title {
        font-size: clamp(32px, 5vw, 52px);
        margin: 0 0 14px;
        color: var(--white);
}

.page-hero-sub {
        color: #D7EBDD;
        font-size: 17.5px;
        margin: 0;
}

.page-hero-sub p {
        margin: 0;
}

.entry-meta--hero {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 22px;
        color: #D7EBDD;
        font-size: 14px;
        margin-top: 10px;
}

.entry-meta--hero span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
}

.entry-meta--hero .ico {
        width: 15px;
        height: 15px;
        color: var(--cyan-300);
}

.breadcrumbs {
        background: var(--white);
        border-bottom: 1px solid var(--line);
}

.breadcrumbs ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
        padding: 14px 0;
        font-size: 13.5px;
        color: var(--ink-400);
}

.breadcrumbs li {
        display: inline-flex;
        align-items: center;
}

.breadcrumbs li + li::before {
        content: "/";
        margin: 0 8px;
        color: #C3D6C8;
}

.breadcrumbs a {
        color: var(--ink-500);
        text-decoration: none;
}

.breadcrumbs a:hover {
        color: var(--cyan-600);
}

.breadcrumbs [aria-current] {
        color: var(--navy-800);
        font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pillars / location / stats / chips (About page)
   -------------------------------------------------------------------------- */

.pillars-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
}

.pillar-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 30px 26px;
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
}

.pillar-ico {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--cyan-500), var(--blue-500));
        color: var(--white);
        display: grid;
        place-items: center;
        margin-bottom: 18px;
}

.pillar-ico .ico {
        width: 24px;
        height: 24px;
}

.pillar-card h3 {
        margin: 0 0 10px;
        font-size: 18px;
        color: var(--navy-800);
}

.pillar-card p {
        margin: 0;
        font-size: 14.5px;
        color: var(--ink-500);
}

.loc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
}

.loc-media img {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        display: block;
}

.loc-list {
        list-style: none;
        margin: 26px 0 0;
        padding: 0;
        display: grid;
        gap: 14px;
}

.loc-list li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        color: var(--ink-700);
}

.loc-list .ico {
        width: 20px;
        height: 20px;
        color: var(--cyan-500);
        flex: none;
        margin-top: 3px;
}

.stats-band {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
        text-align: center;
}

.stat {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: var(--radius);
        padding: 26px 12px;
}

.stat-num {
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: clamp(22px, 2.6vw, 30px);
        color: var(--white);
        display: block;
}

.stat-label {
        font-size: 12.5px;
        color: #B7D2C2;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 6px;
        display: block;
        line-height: 1.5;
}

.chips-wrap {
        text-align: center;
}

.chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
}

.chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--ice-100);
        color: var(--navy-700);
        border: 1px solid #D5EADD;
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13.5px;
        font-weight: 600;
}

.chip .ico {
        width: 14px;
        height: 14px;
        color: var(--cyan-600);
}

.species-note {
        color: var(--ink-400);
        font-size: 14px;
        margin: 22px 0 0;
}

.promise {
        max-width: 820px;
}

.promise-actions {
        margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
}

.contact-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 28px 24px;
        box-shadow: var(--shadow-sm);
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
}

.contact-ico {
        width: 54px;
        height: 54px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: var(--ice-100);
        color: var(--cyan-600);
        display: grid;
        place-items: center;
}

.contact-ico .ico {
        width: 24px;
        height: 24px;
}

.contact-card h3 {
        margin: 0 0 10px;
        font-size: 17px;
        color: var(--navy-800);
}

.contact-lines {
        margin: 0;
        font-size: 14.5px;
        color: var(--ink-500);
        line-height: 1.8;
}

.contact-lines a {
        color: var(--cyan-600);
        text-decoration: none;
        font-weight: 600;
}

.contact-lines a:hover {
        text-decoration: underline;
}

.contact-muted {
        font-size: 13px;
        color: var(--ink-400);
}

.map-section {
        padding-top: 0;
}

.map-wrap {
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--line);
        line-height: 0;
}

.map-wrap iframe {
        width: 100%;
        height: 440px;
        border: 0;
        display: block;
}

.map-note {
        text-align: center;
        color: var(--ink-400);
        font-size: 14px;
        margin: 20px 0 0;
}

.map-note a {
        color: var(--cyan-600);
        font-weight: 600;
}

/* --------------------------------------------------------------------------
   Tickets page
   -------------------------------------------------------------------------- */

.price-wrap {
        max-width: 620px;
        margin: 0 auto;
}

.price-card {
        background: linear-gradient(160deg, var(--white), var(--ice-50));
        border: 2px solid var(--cyan-100);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 44px 40px;
        text-align: center;
}

.price-label {
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 13px;
        color: var(--cyan-600);
        font-weight: 700;
        margin: 0 0 8px;
}

.price-amount {
        font-family: var(--ff-head);
        font-weight: 800;
        font-size: clamp(40px, 6vw, 58px);
        color: var(--navy-800);
        margin: 0;
        line-height: 1.1;
}

.price-unit {
        color: var(--ink-400);
        font-size: 15px;
        margin: 10px 0 24px;
}

.price-card .btn {
        width: 100%;
}

.price-note {
        font-size: 13.5px;
        color: var(--ink-400);
        margin: 16px 0 0;
}

.includes-list {
        list-style: none;
        margin: 26px 0 0;
        padding: 24px 0 0;
        border-top: 1px dashed var(--line);
        display: grid;
        gap: 12px;
        text-align: left;
}

.includes-list li {
        display: flex;
        gap: 10px;
        font-size: 14.8px;
        color: var(--ink-700);
        line-height: 1.6;
}

.includes-list .ico {
        width: 18px;
        height: 18px;
        color: var(--cyan-500);
        flex: none;
        margin-top: 3px;
}

.steps-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
}

.step {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 28px 24px;
        text-align: center;
        box-shadow: var(--shadow-sm);
}

.step-num {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cyan-500), var(--blue-500));
        color: var(--white);
        font-family: var(--ff-head);
        font-weight: 700;
        display: grid;
        place-items: center;
        margin: 0 auto 14px;
}

.step h3 {
        margin: 0 0 8px;
        font-size: 16.5px;
        color: var(--navy-800);
}

.step p {
        margin: 0;
        font-size: 14px;
        color: var(--ink-500);
}

.know-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
}

.know-item {
        display: flex;
        gap: 12px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px 20px;
        align-items: flex-start;
}

.know-item .ico {
        color: var(--cyan-600);
        flex: none;
        margin-top: 2px;
        width: 21px;
        height: 21px;
}

.know-item strong {
        display: block;
        color: var(--navy-800);
        font-size: 14.5px;
        margin-bottom: 2px;
}

.know-item span {
        font-size: 13.5px;
        color: var(--ink-500);
        display: block;
        line-height: 1.6;
}

.faq-list {
        max-width: 820px;
        margin: 0 auto;
        display: grid;
        gap: 14px;
}

.faq-item {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
}

.faq-item summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 20px 24px;
        font-family: var(--ff-head);
        font-weight: 600;
        color: var(--navy-800);
        font-size: 16px;
}

.faq-item summary::-webkit-details-marker {
        display: none;
}

.faq-item summary::after {
        content: "+";
        font-size: 22px;
        color: var(--cyan-500);
        transition: transform 0.25s ease;
        line-height: 1;
}

.faq-item[open] summary::after {
        transform: rotate(45deg);
}

.faq-a {
        padding: 0 24px 22px;
        color: var(--ink-500);
        font-size: 15px;
        margin: 0;
        line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Single post + entry content
   -------------------------------------------------------------------------- */

.entry-wrap {
        max-width: 840px;
        margin: 0 auto;
        padding: 64px 24px 96px;
}

.entry-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        color: var(--ink-400);
        font-size: 13.5px;
        margin-bottom: 8px;
}

.entry-meta span {
        display: inline-flex;
        gap: 7px;
        align-items: center;
}

.entry-meta .ico {
        width: 15px;
        height: 15px;
}

.entry-content {
        font-size: 16.5px;
        color: var(--ink-700);
        line-height: 1.85;
}

.entry-content > *:first-child {
        margin-top: 0;
}

.entry-content h2 {
        font-size: 27px;
        color: var(--navy-800);
        margin: 1.6em 0 0.7em;
        line-height: 1.25;
}

.entry-content h3 {
        font-size: 21px;
        color: var(--navy-800);
        margin: 1.5em 0 0.6em;
}

.entry-content p {
        margin: 0 0 1.25em;
}

.entry-content a {
        color: var(--cyan-600);
}

.entry-content ul,
.entry-content ol {
        margin: 0 0 1.3em;
        padding-left: 1.4em;
}

.entry-content li {
        margin-bottom: 0.5em;
}

.entry-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius);
}

.entry-content blockquote {
        margin: 1.6em 0;
        padding: 18px 26px;
        border-left: 4px solid var(--cyan-500);
        background: var(--ice-50);
        border-radius: 0 var(--radius) var(--radius) 0;
        color: var(--ink-700);
        font-style: italic;
}

.entry-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 1.5em;
}

.entry-content th,
.entry-content td {
        border: 1px solid var(--line);
        padding: 10px 14px;
        text-align: left;
        font-size: 14.5px;
}

.entry-content th {
        background: var(--ice-50);
        color: var(--navy-800);
}

.entry-thumb {
        border-radius: var(--radius-lg);
        margin-bottom: 28px;
        width: 100%;
}

.page-links {
        margin: 1.5em 0;
        font-weight: 600;
        color: var(--navy-800);
}

.post-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 34px 0 0;
}

.post-tags a {
        display: inline-block;
        background: var(--ice-100);
        color: var(--navy-700);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
}

.post-tags a:hover {
        background: var(--cyan-100);
}

.cta-box {
        margin-top: 44px;
        background: linear-gradient(120deg, #0F2A1D, #1F4A34);
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 34px 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
}

.cta-box h3 {
        margin: 0 0 6px;
        color: var(--white);
        font-size: 21px;
}

.cta-box p {
        margin: 0;
        color: #D7EBDD;
        font-size: 14.5px;
}

.post-nav {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        margin: 44px 0 0;
        padding-top: 26px;
        border-top: 1px solid var(--line);
}

.post-nav a {
        color: var(--navy-800);
        text-decoration: none;
        font-weight: 600;
        font-size: 14.5px;
        max-width: 48%;
        display: grid;
        gap: 4px;
}

.post-nav a:hover {
        color: var(--cyan-600);
}

.post-nav .post-nav-label {
        font-size: 12.5px;
        color: var(--ink-400);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
        margin-top: 52px;
        text-align: center;
}

.nav-links {
        display: inline-flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
}

.page-numbers {
        display: inline-flex;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid var(--line);
        color: var(--ink-700);
        text-decoration: none;
        font-weight: 600;
        font-size: 14.5px;
        padding: 0 12px;
        background: var(--white);
}

.page-numbers:hover {
        border-color: var(--cyan-500);
        color: var(--cyan-600);
}

.page-numbers.current {
        background: var(--navy-800);
        border-color: var(--navy-800);
        color: var(--white);
}

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */

.comments-area {
        max-width: 840px;
        margin: 0 auto;
        padding: 0 24px 80px;
}

.comments-title {
        font-size: 22px;
        color: var(--navy-800);
}

.comment-list {
        list-style: none;
        margin: 0 0 40px;
        padding: 0;
        display: grid;
        gap: 20px;
}

.comment-list ol.children {
        list-style: none;
        margin: 20px 0 0;
        padding-left: 24px;
        display: grid;
        gap: 20px;
}

.comment-body {
        background: var(--ice-50);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 20px 22px;
}

.comment-meta {
        font-size: 13px;
        color: var(--ink-400);
        margin-bottom: 6px;
}

.comment-author img {
        border-radius: 50%;
        margin-right: 8px;
        vertical-align: middle;
}

.comment-author .fn {
        color: var(--navy-800);
        font-weight: 600;
        font-style: normal;
}

.reply a {
        font-size: 13px;
        font-weight: 600;
        color: var(--cyan-600);
        text-decoration: none;
}

.reply a:hover {
        text-decoration: underline;
}

.no-comments {
        color: var(--ink-400);
}

.comment-form p {
        margin: 0 0 18px;
}

.comment-form label {
        display: block;
        font-weight: 600;
        font-size: 14px;
        color: var(--navy-800);
        margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        font: inherit;
        color: var(--ink-700);
        background: var(--white);
}

.comment-form input:focus,
.comment-form textarea:focus {
        outline: 2px solid var(--cyan-500);
        border-color: transparent;
}

.comment-form .submit {
        background: linear-gradient(135deg, #E8B45A, var(--coral-500));
        color: var(--white);
        border: 0;
        border-radius: 999px;
        padding: 14px 30px;
        font-family: var(--ff-head);
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.comment-form .submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(217, 154, 43, 0.35);
}

/* --------------------------------------------------------------------------
   Search form + 404
   -------------------------------------------------------------------------- */

.search-form {
        display: flex;
        gap: 10px;
        max-width: 520px;
        margin: 0 auto;
}

.search-field {
        flex: 1;
        padding: 14px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        font: inherit;
        color: var(--ink-700);
        background: var(--white);
        min-width: 0;
}

.search-field:focus {
        outline: 2px solid var(--cyan-500);
        border-color: transparent;
}

.search-submit {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 0;
        background: var(--navy-800);
        color: var(--white);
        display: grid;
        place-items: center;
        cursor: pointer;
        flex: none;
        transition: background 0.25s ease;
}

.search-submit:hover {
        background: var(--blue-500);
}

.error-404 {
        text-align: center;
        padding: 110px 0 130px;
}

.error-code {
        font-family: var(--ff-head);
        font-weight: 800;
        font-size: clamp(80px, 14vw, 150px);
        line-height: 1;
        margin: 0;
        background: linear-gradient(135deg, var(--cyan-500), var(--blue-500));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

.error-title {
        font-size: clamp(26px, 4vw, 38px);
        margin: 14px 0 12px;
}

.error-text {
        color: var(--ink-500);
        max-width: 520px;
        margin: 0 auto 30px;
}

.error-search {
        margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
        background: linear-gradient(180deg, #0F2A1D, #0A1F15);
        color: #B7D2C2;
}

.footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 44px;
        padding: 72px 0 56px;
}

.footer-col {
        min-width: 0;
}

.footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--white);
        text-decoration: none;
        margin-bottom: 18px;
}

.footer-brand svg {
        width: 42px;
        height: 42px;
        display: block;
}

.footer-brand strong {
        font-family: var(--ff-head);
        font-size: 18px;
        line-height: 1.3;
}

.footer-about {
        font-size: 14.5px;
        line-height: 1.8;
        margin: 0 0 20px;
}

.footer-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.badge-pill--dark {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.16);
        color: #D0E8DA;
        font-size: 12.5px;
        padding: 7px 13px;
}

.badge-pill--dark .ico {
        color: var(--gold-400);
}

.footer-title {
        font-family: var(--ff-head);
        color: var(--white);
        font-size: 16px;
        margin: 0 0 18px;
}

.footer-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 10px;
}

.footer-links a {
        color: #B7D2C2;
        text-decoration: none;
        font-size: 14.5px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.footer-links a:hover {
        color: var(--cyan-300);
}

.footer-contact {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px;
        font-size: 14.5px;
}

.footer-contact li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        line-height: 1.6;
}

.footer-contact .ico {
        width: 16px;
        height: 16px;
        color: var(--cyan-300);
        flex: none;
        margin-top: 3px;
}

.footer-contact a {
        color: var(--white);
        text-decoration: none;
}

.footer-contact a:hover {
        color: var(--cyan-300);
}

.footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        padding: 22px 0 26px;
}

.footer-bottom-inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 13px;
        color: #86AC97;
}

.footer-copy {
        margin: 0;
}

.footer-disclosure {
        margin: 6px 0 0;
        font-size: 12px;
        color: #86AC97;
}

.footer-top-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #B7D2C2;
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
}

.footer-top-link:hover {
        color: var(--cyan-300);
}

.footer-top-link .ico {
        width: 15px;
        height: 15px;
}

/* Back to top */
.back-to-top {
        position: fixed;
        right: 26px;
        bottom: 26px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--navy-800);
        color: var(--white);
        display: grid;
        place-items: center;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
        z-index: 900;
        text-decoration: none;
}

.back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
}

.back-to-top:hover {
        background: var(--cyan-500);
}

/* --------------------------------------------------------------------------
   Reveal animation (JS adds body.js-reveal; without JS everything is visible)
   -------------------------------------------------------------------------- */

body.js-reveal .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-reveal .reveal.is-visible {
        opacity: 1;
        transform: none;
}

/* --------------------------------------------------------------------------
   Admin bar offset (WordPress)
   -------------------------------------------------------------------------- */

body.admin-bar .site-header {
        top: 32px;
}

@media screen and (max-width: 782px) {
        body.admin-bar .site-header {
                top: 46px;
        }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
        .nav-menu a {
                padding: 10px;
                font-size: 14.5px;
        }
        .animals-grid {
                grid-template-columns: repeat(3, 1fr);
        }

        .pillars-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .stats-band {
                grid-template-columns: repeat(3, 1fr);
        }

        .know-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .steps-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 1270px) and (min-width: 1141px) {
        .site-brand-sub {
                display: none;
        }

        .site-brand-name {
                font-size: 17px;
        }

        .header-main-inner {
                gap: 14px;
        }

        .nav-menu a {
                padding: 10px 8px;
                font-size: 13.5px;
        }

        .btn-header {
                padding: 11px 15px;
                font-size: 13.5px;
        }
}

@media (max-width: 1140px) {
        .nav-toggle {
                display: flex;
        }

        .primary-nav {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--white);
                border-bottom: 1px solid var(--line);
                box-shadow: var(--shadow-lg);
                display: none;
                padding: 10px 24px 18px;
                margin: 0;
        }

        .primary-nav.is-open {
                display: block;
        }

        .nav-menu {
                flex-direction: column;
                gap: 2px;
        }

        .nav-menu a {
                padding: 13px 12px;
                border-radius: 10px;
                font-size: 16px;
        }

        .welcome-grid,
        .loc-grid {
                grid-template-columns: 1fr;
                gap: 44px;
        }

        .pavilion-grid,
        .shows-grid,
        .reviews-grid,
        .blog-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .quickinfo {
                grid-template-columns: repeat(2, 1fr);
        }

        .contact-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
        }

        .checkin-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .topbar-item--hide {
                display: none;
        }
}

@media (max-width: 768px) {
        .topbar {
                display: none;
        }

        .hero-inner {
                padding: 110px 24px 150px;
        }

        .section {
                padding: 72px 0;
        }

        .pavilion-grid,
        .shows-grid,
        .reviews-grid,
        .blog-grid {
                grid-template-columns: 1fr;
        }

        .animals-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .quickinfo {
                grid-template-columns: 1fr 1fr;
                gap: 14px;
        }

        .stats-band {
                grid-template-columns: repeat(2, 1fr);
        }

        .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .steps-grid,
        .contact-grid,
        .know-grid {
                grid-template-columns: 1fr;
        }

        .checkin-grid {
                grid-template-columns: 1fr;
        }

        .btn-header {
                display: none;
        }

        .nav-book {
                display: inline-flex;
        }

        .footer-grid {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 56px 0 44px;
        }

        .entry-wrap {
                padding: 44px 22px 72px;
        }

        .price-card {
                padding: 34px 24px;
        }

        .cta-actions .btn {
                width: 100%;
                max-width: 360px;
        }
}

@media (max-width: 520px) {
        .quickinfo {
                grid-template-columns: 1fr;
        }

        .animals-grid {
                grid-template-columns: 1fr;
        }

        .gallery-grid {
                grid-template-columns: 1fr 1fr;
        }

        .hero-title {
                font-size: 38px;
        }

        .badge-pill {
                font-size: 12px;
                padding: 7px 12px;
        }

        .gallery-item--wide {
                grid-column: span 2;
        }

        .checkin-card {
                padding-left: 24px;
                padding-top: 74px;
        }

        .checkin-num {
                left: 24px;
                top: 20px;
        }

        .qi-card {
                flex-direction: row;
        }
}

@media (max-width: 520px) {
        .site-brand-sub {
                display: none;
        }

        .site-brand-name {
                font-size: 16.5px;
                overflow: hidden;
                text-overflow: ellipsis;
        }

        .site-brand-icon svg {
                width: 38px;
                height: 38px;
        }

        .header-actions {
                gap: 8px;
        }

        /* Language switcher on phones: flag + arrow only */
        .nsm-ls {
                max-width: 74px;
        }

        .nsm-ls .trp-shortcode-switcher__wrapper {
                max-width: 74px !important;
        }

        .nsm-ls .trp-language-item-name {
                display: none;
        }

        /* Flag-only dropdown: a narrow flag column instead of the 190px
           desktop card. min-width 52px is the smallest width that still lets
           each 15px flag render at full size inside its padding — below that
           flex-shrink silently squeezes the flag images to 0px. The column
           starts at the pill's left edge, so it can never reach the right
           edge of even a 320px viewport. */
        .nsm-ls .trp-shortcode-switcher.is-open .trp-switcher-dropdown-list,
        .nsm-ls .trp-shortcode-switcher[aria-expanded="true"] .trp-switcher-dropdown-list {
                min-width: 52px !important;
                padding: 5px !important;
        }

        .nsm-ls .trp-switcher-dropdown-list .trp-language-item {
                padding: 8px 9px !important;
        }

        .nsm-ls .trp-switcher-dropdown-list img.trp-flag-image {
                flex-shrink: 0;
        }
}

/* --------------------------------------------------------------------------
   Post content components (used by the bundled demo blog posts)
   -------------------------------------------------------------------------- */

.entry-content .nsm-post-img {
        margin: 30px 0;
}

.entry-content .nsm-post-img img {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
}

.entry-content .nsm-post-img figcaption {
        margin-top: 10px;
        font-size: 13.5px;
        color: var(--ink-400);
        text-align: center;
}

.nsm-keybox {
        background: var(--ice-50);
        border: 1px solid var(--line);
        border-left: 4px solid var(--cyan-500);
        border-radius: 0 var(--radius) var(--radius) 0;
        padding: 22px 26px;
        margin: 26px 0;
}

.nsm-keybox__t {
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: 16px;
        color: var(--navy-800);
        margin: 0 0 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
}

.nsm-keybox ul {
        margin: 0;
        padding-left: 1.2em;
}

.nsm-keybox li {
        margin-bottom: 0.55em;
}

.nsm-callout {
        border-radius: var(--radius);
        padding: 18px 22px;
        margin: 24px 0;
        border: 1px solid var(--line);
        background: var(--ice-50);
}

.nsm-callout p {
        margin: 0;
}

.nsm-callout--info {
        background: var(--cyan-100);
        border-color: transparent;
}

.nsm-callout--tip {
        border-left: 4px solid var(--gold-400);
}

.nsm-callout--warn {
        border-left: 4px solid var(--coral-500);
        background: #FBF4E4;
}

.nsm-callout--xp {
        border-left: 4px solid var(--cyan-600);
}

.nsm-facts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin: 26px 0;
}

.nsm-fact {
        background: var(--ice-50);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 16px 14px;
        text-align: center;
}

.nsm-fact strong {
        display: block;
        font-family: var(--ff-head);
        font-size: 21px;
        color: var(--navy-800);
        margin-bottom: 4px;
}

.nsm-fact span {
        font-size: 12.5px;
        color: var(--ink-500);
        line-height: 1.45;
        display: block;
}

.nsm-toc {
        background: var(--ice-50);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 20px 24px;
        margin: 26px 0;
}

.nsm-toc__t {
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: 16px;
        color: var(--navy-800);
        margin: 0 0 8px;
}

.nsm-toc ol {
        margin: 0;
        padding-left: 1.3em;
}

.nsm-toc li {
        margin-bottom: 0.35em;
}

.entry-content h2 .nsm-ico {
        display: inline-block;
        vertical-align: -3px;
        margin-right: 8px;
        color: var(--cyan-600);
}

.entry-content h2 .nsm-ico::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: var(--cyan-500);
        opacity: 0.85;
        -webkit-mask: radial-gradient(circle at 10px 10px, transparent 6px, #000 6.5px);
        mask: radial-gradient(circle at 10px 10px, transparent 6px, #000 6.5px);
        border-radius: 50%;
}

.nsm-scroll {
        overflow-x: auto;
}

.nsm-list--check {
        list-style: none;
        padding-left: 0 !important;
}

.nsm-list--check li {
        position: relative;
        padding-left: 34px;
}

.nsm-list--check li::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 7px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--cyan-500);
        opacity: 0.9;
        -webkit-mask: radial-gradient(circle at 8px 8px, transparent 6px, #000 6.5px);
        mask: radial-gradient(circle at 8px 8px, transparent 6px, #000 6.5px);
}

.nsm-timeline {
        list-style: none;
        padding-left: 0 !important;
        border-left: 2px solid var(--line);
        margin-left: 8px;
}

.nsm-timeline li {
        position: relative;
        padding: 0 0 18px 26px;
}

.nsm-timeline li::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 6px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--cyan-500);
        box-shadow: 0 0 0 3px var(--ice-100);
}

.nsm-timeline__t {
        color: var(--navy-800);
}

.nsm-faq {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 14px 20px;
        margin: 0 0 12px;
        background: var(--white);
}

.nsm-faq summary {
        font-weight: 600;
        color: var(--navy-800);
        cursor: pointer;
}

.nsm-faq[open] summary {
        color: var(--cyan-600);
}

.nsm-faq__a p {
        margin: 10px 0 2px;
}

.nsm-sources {
        background: var(--ice-50);
        border: 1px dashed var(--line);
        border-radius: var(--radius);
        padding: 18px 24px;
        margin: 30px 0 0;
        font-size: 14px;
        color: var(--ink-500);
}

.nsm-sources__t {
        font-weight: 700;
        color: var(--navy-800);
        margin: 0 0 8px;
}

.nsm-sources ul {
        margin: 0;
        padding-left: 1.2em;
}

.nsm-sources li {
        margin-bottom: 0.4em;
}

.nsm-cta-inline {
        background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 30px 32px;
        margin: 32px 0;
}

.nsm-cta-inline__t {
        font-family: var(--ff-head);
        font-size: 21px;
        font-weight: 700;
        color: var(--white);
        margin: 0 0 6px;
}

.nsm-cta-inline p:not(.nsm-cta-inline__t) {
        color: #D7EBDD;
        font-size: 14.5px;
        margin: 0 0 16px;
}

.nsm-cta-inline__btns {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
}

.nsm-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        padding: 12px 26px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.nsm-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
}

.nsm-btn--accent {
        background: var(--coral-500);
        color: var(--white);
}

.nsm-btn--accent:hover {
        background: var(--coral-600);
        color: var(--white);
}

.nsm-btn--ghost {
        background: transparent;
        color: var(--white);
        border: 2px solid rgba(255, 255, 255, 0.45);
}

.nsm-btn--ghost:hover {
        border-color: var(--white);
        color: var(--white);
}

@media (max-width: 760px) {
        .nsm-facts {
                grid-template-columns: repeat(2, 1fr);
        }

        .nsm-cta-inline {
                padding: 24px 20px;
        }
}

/* --------------------------------------------------------------------------
   Author box (E-E-A-T) — single posts
   -------------------------------------------------------------------------- */

.nsm-author-box {
        display: flex;
        gap: 18px;
        background: var(--ice-50);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 22px 24px;
        margin: 40px 0 26px;
}

.nsm-author-box__avatar img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: block;
}

.nsm-author-box__name {
        margin: 0 0 10px;
        font-family: var(--ff-head);
        font-weight: 700;
        font-size: 16.5px;
        color: var(--navy-800);
}

.nsm-author-box__name span {
        color: var(--cyan-600);
}

.nsm-author-box__badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
}

.nsm-badge-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 4px 12px;
        border-radius: 999px;
}

.nsm-badge-chip--fact {
        background: var(--cyan-100);
        color: var(--blue-600);
}

.nsm-badge-chip--onloc {
        background: #FBF4E4;
        color: var(--coral-600);
}

.nsm-author-box__bio {
        margin: 0 0 10px;
        color: var(--ink-700);
        line-height: 1.7;
}

.nsm-author-box__links {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        margin: 0 0 12px;
}

.nsm-author-box__links a {
        color: var(--cyan-600);
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
}

.nsm-disclosure {
        margin: 0;
        font-size: 12.5px;
        color: var(--ink-400);
        line-height: 1.6;
}

@media (max-width: 640px) {
        .nsm-author-box {
                flex-direction: column;
        }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }
}