:root {
    --kna-font-heading: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --kna-font-body: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --kna-font-display: 'Fredoka One', cursive;

    --kna-sky: #AFE1F5;
    --kna-yellow: #FFDE17;
    --kna-red: #E8262E;
    --kna-red-dark: #C41E24;
    --kna-orange: #F5760F;
    --kna-orange-dark: #C25A06;
    /* Hover lifts rather than darkens: #C25A06 reads brown, not orange. */
    --kna-orange-light: #FF8C2E;
    --kna-navy: #3B3F8F;
    --kna-purple: #5B2C8F;
    --kna-green: #2AA876;
    --kna-pink: #F2559B;

    /* Fallback page accent. Each public page overrides this — see the page
       themes at the end of this file. */
    --kna-page-accent: var(--kna-navy);
    --kna-page-ink: var(--kna-navy);
    --kna-page-heading: var(--kna-font-heading);

    /* Hero clearance, single source of truth. Parties was the page that looked
       right, so its value is the one every hero uses. */
    --kna-hero-top: calc(var(--kna-header-height, 176px) + 16px);
    /* Where the banner's text box starts - clear of the header, not against it. */
    --kna-hero-content-top: calc(var(--kna-header-height, 176px) + 56px);
    --kna-hero-top-mobile: calc(var(--kna-header-height, 140px) + 24px);
}

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: var(--kna-font-body);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

/* Bootstrap's default primary is #1b6ec2, a blue that appears nowhere in the
   brand palette, and it was the most-used button on the public site. This is
   the primary action button, so it takes the action colour. */
.btn-primary {
    color: #fff;
    background-color: var(--kna-orange);
    border-color: var(--kna-orange);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--kna-orange-dark);
    border-color: var(--kna-orange-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


/* ===== KNA design system: sticker cards, badges, dividers, buttons ===== */

.kna-card {
    --kna-card-shadow-color: var(--kna-yellow);
    background: #fff;
    border: 3px solid var(--kna-navy);
    border-radius: 16px;
    box-shadow: 8px 8px 0 0 var(--kna-card-shadow-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kna-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0 0 var(--kna-card-shadow-color);
}

.kna-card--red { --kna-card-shadow-color: var(--kna-red); }
.kna-card--orange { --kna-card-shadow-color: var(--kna-orange); }
.kna-card--sky { --kna-card-shadow-color: var(--kna-sky); }

.kna-stripe-divider {
    height: 40px;
    width: 100%;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #111 25%, transparent 25%),
        linear-gradient(-45deg, #111 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111 75%),
        linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    border: 0;
}

/* Hero panel. The hero used to put text straight onto the photo, which fought
   the image for contrast and forced a scrim. The text now sits in its own
   outlined panel beside the picture, using the same sticker language as
   .kna-card so the hero belongs to the rest of the page.

   Colours stay on .hero-title / .hero-subtitle so the per-page heading and body
   colours the admin panel injects still land. */
.kna-hero-panel {
    background: #EAF7FE;
    border: 4px solid var(--kna-navy);
    border-radius: 22px;
    padding: 38px 36px;
    box-shadow: 10px 10px 0 0 var(--kna-navy);
}

/* ---- Split hero -------------------------------------------------------
   The approved design puts hero copy in a panel BESIDE the photo rather than
   on top of it. Text on a photo needed a scrim, fought the image for contrast,
   and made every hero look different depending on the picture behind it.

   .kna-hero-split is the band; .hero-container (already a two-column grid) is
   the layout; .kna-hero-panel is the box. Class names on the heading and body
   are unchanged so the admin panel's per-page colours still land. */
/* The header is fixed, so page content starts underneath it. A checkerboard
   placed first in the document hides behind the nav instead of sitting below
   it, so it carries the header's height itself. */
.kna-stripe-divider--under-nav {
    margin-top: var(--kna-header-height, 176px);
}

section.kna-hero-split,
.kna-hero-split {
    position: relative;
    overflow: hidden;
    background: var(--kna-hero-tint, var(--kna-sky));
    /* Clears the fixed header. --kna-hero-content-top is the existing single
       source of truth for that distance - do not hardcode a number here. */
    padding: var(--kna-hero-content-top) 0 64px;
}

/* When a checkerboard precedes the hero it has already paid for the header,
   so the hero drops back to ordinary padding and the two sit flush. Home's
   hero is .hero rather than .kna-hero-split - same rule applies. */
.kna-stripe-divider--under-nav + .kna-hero-split,
.kna-stripe-divider--under-nav + .hero {
    padding-top: 44px;
}

@media (max-width: 768px) {
    .kna-stripe-divider--under-nav {
        margin-top: var(--kna-header-height, 140px);
    }
    .kna-hero-split {
        padding-top: var(--kna-hero-top-mobile);
        padding-bottom: 44px;
    }
    .kna-stripe-divider--under-nav + .kna-hero-split,
    .kna-stripe-divider--under-nav + .hero {
        padding-top: 28px;
    }
}

.kna-hero-split .hero-container {
    align-items: center;
    gap: 44px;
}

.kna-hero-split .hero-content {
    position: relative;
    z-index: 2;
}

.kna-hero-split .hero-image {
    position: relative;
    z-index: 2;
}

.kna-hero-split .hero-image img,
.kna-hero-split .hero-image video {
    display: block;
    width: 100%;
    max-width: 520px;
    height: 390px;
    object-fit: cover;
    margin-left: auto;
}

/* Every page named its hero heading something different - .hero-headline,
   .tour-hero-title, .membership-title, .cal-title - and each carried its own
   size, alignment and font. Inside the panel they are all the same thing, so
   normalise by position rather than chasing the class names.

   font-family needs !important to beat the page-level blocks. colour does NOT:
   leaving it a plain declaration is what lets the admin panel's per-page
   heading and body colours keep winning. */
.kna-hero-split .kna-hero-panel {
    text-align: left;
}

.kna-hero-split .kna-hero-panel h1 {
    margin: 0 0 18px;
    font-family: var(--kna-font-display) !important;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -1.2px;
    text-align: left;
    color: var(--kna-navy);
}

.kna-hero-split .kna-hero-panel p {
    margin: 0 0 28px;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 600;
    text-align: left;
    color: #2e3170;
}

@media (max-width: 900px) {
    .kna-hero-split .kna-hero-panel h1 { font-size: 2.1rem; }
}

/* Decorative shapes sit behind the panel, never over the copy. */
.kna-hero-split .bg-icon {
    z-index: 1;
}

@media (max-width: 900px) {
    .kna-hero-split .hero-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .kna-hero-split .hero-image img,
    .kna-hero-split .hero-image video {
        max-width: 100%;
        height: 260px;
        margin-left: 0;
    }
    .kna-hero-split .hero-headline { font-size: 2.1rem; }
}

/* Calendar padded its own container to clear the fixed header. Now that a
   hero band sits above it, that clearance is already paid for. */
.cal-container--has-hero {
    padding-top: 0 !important;
}

/* Each page tints its hero band. Values come from the approved renderings. */
.theme-home { --kna-hero-tint: #AFE1F5; }
.theme-parties { --kna-hero-tint: #FBD5E6; }
.theme-about { --kna-hero-tint: #C9E9F8; }
.theme-membership,
.theme-contact { --kna-hero-tint: #E2D5F2; }
.theme-group-events { --kna-hero-tint: #CDEFE0; }
.theme-tour,
.theme-calendar,
.theme-book,
.theme-account,
.theme-default { --kna-hero-tint: #D5DAF0; }

/* The hero's buttons sit left under the copy, not centred: the panel is a
   column of left-aligned text and a centred row breaks that edge. The global
   .hero-buttons rule centres them for the old full-width hero. */
/* Several pages set .hero-buttons to a centred column for the old full-width
   hero. Inside the panel the buttons are a left-aligned row, so state the whole
   layout here rather than inheriting half of it. The extra class in the
   selector is deliberate - it outranks the page-level blocks without !important. */
.kna-hero-split .kna-hero-panel .hero-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    gap: 12px;
}

.kna-hero-split .kna-hero-panel .hero-buttons > * {
    margin: 0;
}

/* A two-button row has to survive the longest label pair on the site
   ("Ask For A Group Rate" + "Take A Virtual Tour"). At the default padding
   that pair lands a couple of pixels over the panel width and wraps, which
   looks like a mistake rather than a choice. */
.kna-hero-split .kna-hero-panel .hero-buttons .kna-btn-primary,
.kna-hero-split .kna-hero-panel .hero-buttons .kna-btn-ghost,
.hero .kna-hero-panel .hero-buttons .kna-btn-primary,
.hero .kna-hero-panel .hero-buttons .kna-btn-ghost {
    padding: 14px 24px;
    white-space: nowrap;
}

.hero .kna-hero-panel .hero-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    gap: 12px;
}

/* The hero's primary button takes the page's accent - the same colour the nav
   uses for that page's tab. --kna-page-on-accent is why this is safe on the
   pale accents: Activities is sky, and its theme already declares navy as the
   readable ink for it. */
.kna-hero-split .kna-hero-panel .kna-btn-primary,
.hero .kna-hero-panel .kna-btn-primary {
    background: var(--kna-page-accent, var(--kna-orange)) !important;
    background-color: var(--kna-page-accent, var(--kna-orange)) !important;
    color: var(--kna-page-on-accent, #fff) !important;
    border-color: var(--kna-navy) !important;
}

.kna-hero-split .kna-hero-panel .kna-btn-primary:hover,
.hero .kna-hero-panel .kna-btn-primary:hover {
    filter: brightness(1.08);
}

/* Eyebrow above the hero headline. Small, loud, and the first thing read -
   it carries the one claim no competitor can copy. */
.kna-hero-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    margin-bottom: 18px;
    background: var(--kna-red);
    color: #fff;
    border: 2px solid var(--kna-navy);
    border-radius: 999px;
    font-family: var(--kna-font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
}

/* The quiet half of a button pair. Same shape and border as .kna-btn-primary
   so they read as siblings, but it gives the colour up to the primary. */
.kna-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--kna-navy) !important;
    border: 3px solid var(--kna-navy);
    border-radius: 999px;
    font-family: var(--kna-font-heading);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    padding: 14px 28px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.kna-btn-ghost:hover {
    background: var(--kna-sky);
    color: var(--kna-navy) !important;
    transform: translate(-1px, -1px);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Hero photo or video. White mount, navy block behind, and a couple of degrees
   of tilt so it reads as a snapshot dropped on the page rather than a banner. */
/* Double border: a white mount, then a ring in the page's accent, then the
   navy block behind. One box-shadow does all three - the spread ring first,
   the offset block second. */
.kna-hero-media {
    border: 5px solid #fff !important;
    border-radius: 22px !important;
    box-shadow: 10px 10px 0 0 var(--kna-navy) !important;
    transform: rotate(2deg);
    background: #fff !important;
}

/* The double border - white mount, accent ring, navy block - is Home's hero
   video. The other pages' designs show the plain white mount. */
.hero .kna-hero-media {
    box-shadow:
        0 0 0 5px var(--kna-page-accent, var(--kna-orange)),
        13px 13px 0 0 var(--kna-navy) !important;
}

@media (max-width: 768px) {
    .kna-hero-media {
        transform: none;
        box-shadow: 6px 6px 0 0 var(--kna-navy) !important;
    }
    .kna-hero-eyebrow { font-size: 0.64rem; margin-bottom: 14px; }
}

@media (max-width: 768px) {
    .kna-hero-panel {
        padding: 26px 22px;
        border-width: 3px;
        box-shadow: 6px 6px 0 0 var(--kna-navy);
    }
}

/* Deeper checkerboards. The squares are 20px, so the base divider's 40px is
   already two rows; these add rows without touching the square size. Taller
   variants are for section breaks that need to carry weight. */
.kna-stripe-divider--3 { height: 60px; }
.kna-stripe-divider--4 { height: 80px; }

@media (max-width: 768px) {
    .kna-stripe-divider--3,
    .kna-stripe-divider--4 { height: 40px; }
}

.kna-badge-starburst {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--kna-red);
    color: #fff;
    font-family: var(--kna-font-display);
    font-weight: 400;
    line-height: 1.1;
    transform: rotate(-8deg);
    clip-path: polygon(50% 0%, 61% 15%, 79% 9%, 82% 28%, 100% 35%, 91% 52%, 100% 69%, 82% 74%, 79% 93%, 61% 87%, 50% 100%, 39% 87%, 21% 93%, 18% 74%, 0% 69%, 9% 52%, 0% 35%, 18% 28%, 21% 9%, 39% 15%);
}

.kna-badge-starburst--yellow {
    background: var(--kna-yellow);
    color: var(--kna-navy);
}

.kna-badge-circle-photo {
    display: block;
    border-radius: 50%;
    border: 5px solid var(--kna-orange);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}

.kna-badge-circle-photo--navy { border-color: var(--kna-navy); }
.kna-badge-circle-photo--red { border-color: var(--kna-red); }
.kna-badge-circle-photo--yellow { border-color: var(--kna-yellow); }

.kna-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kna-font-heading);
    font-weight: 800;
    color: #fff !important;
    /* Orange, not red: red now reads as Soft Play on the attractions, and the
       action colour has to mean one thing only. */
    background: var(--kna-orange);
    border: 3px solid var(--kna-navy);
    border-radius: 999px;
    box-shadow: 4px 4px 0 0 var(--kna-navy);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

.kna-btn-primary:hover {
    background: var(--kna-orange-dark);
    color: #fff !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--kna-navy);
}

.kna-btn-yellow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kna-font-heading);
    font-weight: 800;
    color: var(--kna-navy) !important;
    background: var(--kna-yellow);
    border: 3px solid var(--kna-navy);
    border-radius: 999px;
    box-shadow: 4px 4px 0 0 var(--kna-navy);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

.kna-btn-yellow:hover {
    background: #ffe75c;
    color: var(--kna-navy) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--kna-navy);
}

/* Section-coded CTA variants: each links to a different area of the site,
   so each gets its own fill color against the shared navy border/shadow. */
.kna-btn-purple, .kna-btn-orange, .kna-btn-green, .kna-btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kna-font-heading);
    font-weight: 800;
    color: #fff !important;
    border: 3px solid var(--kna-navy);
    border-radius: 999px;
    box-shadow: 4px 4px 0 0 var(--kna-navy);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}
.kna-btn-purple:hover, .kna-btn-orange:hover, .kna-btn-green:hover, .kna-btn-navy:hover {
    color: #fff !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--kna-navy);
}
.kna-btn-purple { background: var(--kna-purple); }
.kna-btn-purple:hover { background: #4a2373; }
.kna-btn-orange { background: var(--kna-orange); }
.kna-btn-orange:hover { background: #d9660a; }
.kna-btn-green { background: var(--kna-green); }
.kna-btn-green:hover { background: #228a60; }
.kna-btn-navy { background: var(--kna-navy); border-color: #fff; }
.kna-btn-navy:hover { background: #2e3170; border-color: #fff; }

/* ---- Button sizing -----------------------------------------------------
   The .kna-btn-* classes above set colour and shape but never set padding or
   font size, so every usage supplied its own inline padding. That is how the
   site ended up with a dozen different button sizes. These give them a real
   default plus two modifiers, and nothing sets a min-width: a button is as
   wide as the words inside it. */
.kna-btn-primary,
.kna-btn-yellow,
.kna-btn-purple,
.kna-btn-orange,
.kna-btn-green,
.kna-btn-navy,
.kna-btn-cta {
    padding: 14px 28px;
    font-size: 1rem;
    line-height: 1;
    min-width: 0;
    white-space: nowrap;
}

.kna-btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.kna-btn--lg { padding: 18px 40px; font-size: 1.12rem; }
.kna-btn--block { width: 100%; }

/* ---- The call to action ------------------------------------------------
   Orange is reserved for actions: book, pay, send. It is deliberately not
   used as a page accent anywhere, so that customers only ever have to learn
   it once. */
.kna-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kna-font-heading);
    font-weight: 800;
    color: #fff !important;
    background: var(--kna-orange);
    border: 3px solid var(--kna-navy);
    border-radius: 999px;
    box-shadow: 4px 4px 0 0 var(--kna-navy);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

.kna-btn-cta:hover {
    background: #d9660a;
    color: #fff !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--kna-navy);
}

/* ---- Outlined boxes ----------------------------------------------------
   .kna-card already draws a navy outline with a hard offset block behind it.
   The number of blocks signals importance: one for anything selectable, two
   for the single most important thing on a page. Use the triple sparingly —
   if everything is emphasised, nothing is. */
.kna-card--double {
    box-shadow: 8px 8px 0 0 var(--kna-card-shadow-color);
}

.kna-card--triple {
    box-shadow:
        8px 8px 0 0 var(--kna-card-shadow-color),
        16px 16px 0 0 var(--kna-navy);
}

.kna-card--double:hover {
    box-shadow: 10px 10px 0 0 var(--kna-card-shadow-color);
}

.kna-card--triple:hover {
    box-shadow:
        10px 10px 0 0 var(--kna-card-shadow-color),
        19px 19px 0 0 var(--kna-navy);
}

/* Cards pick up the page accent unless a modifier overrides it. */
.kna-card { --kna-card-shadow-color: var(--kna-page-accent, var(--kna-yellow)); }

.kna-card--pink { --kna-card-shadow-color: var(--kna-pink); }
.kna-card--yellow { --kna-card-shadow-color: var(--kna-yellow); }
.kna-card--green { --kna-card-shadow-color: var(--kna-green); }
.kna-card--purple { --kna-card-shadow-color: var(--kna-purple); }
.kna-card--navy { --kna-card-shadow-color: var(--kna-navy); }

/* ---- Page themes -------------------------------------------------------
   MainLayout puts one of these on .public-layout, which wraps the header as
   well as the page, so the navigation can colour its active tab to match.

   Two variables, not one: accent is the decorative colour (tab underline, card
   outlines), ink is a readable text colour. Yellow and sky are unreadable as
   text on white, so those pages keep navy ink and show their accent only where
   it is decoration. Orange is absent on purpose — it belongs to the buttons. */
.theme-home {
    /* Orange here also being the action colour is a deliberate call, not an
       oversight - the buttons still carry the navy border that sets them apart. */
    --kna-page-accent: var(--kna-orange);
    --kna-page-ink: var(--kna-orange-dark);
    --kna-page-on-accent: #fff;
}

.theme-parties {
    --kna-page-accent: var(--kna-pink);
    --kna-page-ink: var(--kna-pink);
    --kna-page-on-accent: #fff;
}

.theme-about {
    --kna-page-accent: var(--kna-sky);
    --kna-page-ink: var(--kna-navy);
    --kna-page-on-accent: var(--kna-navy);
}

.theme-contact {
    --kna-page-accent: var(--kna-purple);
    --kna-page-ink: var(--kna-purple);
    --kna-page-on-accent: #fff;
}

.theme-group-events {
    --kna-page-accent: var(--kna-green);
    --kna-page-ink: var(--kna-green);
    --kna-page-on-accent: #fff;
}

.theme-tour {
    --kna-page-accent: var(--kna-navy);
    --kna-page-ink: var(--kna-navy);
    --kna-page-on-accent: #fff;
}

.theme-membership {
    /* Purple reads as the premium tier, which is what membership is. */
    --kna-page-accent: var(--kna-purple);
    --kna-page-ink: var(--kna-purple);
    --kna-page-on-accent: #fff;
}

.theme-account,
.theme-book,
.theme-calendar,
.theme-default {
    --kna-page-accent: var(--kna-navy);
    --kna-page-ink: var(--kna-navy);
    --kna-page-on-accent: #fff;
}

/* ---- Admission packages ------------------------------------------------
   These carry the wristband colours from the front desk: a green band is the
   Action Package, a red band is Soft Play. Matching the cards to the bands
   means the site is teaching the same thing the counter does. */
.pricing-card--action {
    /* Index sets `border: none` on these cards with two-class specificity, so
       the width has to be restated here or the colour paints nothing. */
    border: 3px solid var(--kna-green) !important;
    box-shadow: 8px 8px 0 0 var(--kna-green) !important;
}

.pricing-card--softplay {
    border: 3px solid var(--kna-red) !important;
    box-shadow: 8px 8px 0 0 var(--kna-red) !important;
}


/* ---- Buttons follow the page ------------------------------------------
   Every button on a public page takes that page's accent, with the label in
   the matching readable colour. Home is orange, Parties pink, Activities sky,
   Contact purple, Trips green, and the Tour, Booking and Calendar navy.

   The header call to action is the deliberate exception: it stays orange on
   every page except Parties, so the one control that appears on all of them
   remains recognisable. */
.public-layout .btn-primary,
.public-layout .kna-btn-cta,
.public-layout .kna-btn-primary,
.public-layout .room-link,
.public-layout .btn-large,
.public-layout .discover-btn {
    background: var(--kna-page-accent) !important;
    background-color: var(--kna-page-accent) !important;
    background-image: none !important;
    border-color: var(--kna-navy) !important;
    color: var(--kna-page-on-accent, #fff) !important;
}

.public-layout .btn-primary:hover,
.public-layout .btn-primary:focus,
.public-layout .kna-btn-cta:hover,
.public-layout .kna-btn-primary:hover,
.public-layout .room-link:hover,
.public-layout .btn-large:hover,
.public-layout .discover-btn:hover {
    /* Lift rather than darken, so no page's hover turns muddy. */
    filter: brightness(1.08);
    color: var(--kna-page-on-accent, #fff) !important;
}

/* Outline buttons take the accent as their edge and label. */
.public-layout .btn-secondary {
    background: transparent !important;
    border-color: var(--kna-page-accent) !important;
    color: var(--kna-page-ink, var(--kna-navy)) !important;
}

/* The floating book button is a call to action, so it follows the same rule. */
.public-layout .floating-book-button {
    background: var(--kna-page-accent) !important;
    background-image: none !important;
    color: var(--kna-page-on-accent, #fff) !important;
}



/* ===== end KNA design system ===== */

.mud-overlay {
    z-index: 10100 !important;
}

.mud-overlay-scrim {
    z-index: 10100 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
}

.mud-dialog-container {
    z-index: 10101 !important;
}

.mud-dialog {
    z-index: 10102 !important;
}


.mud-overlay ~ .mud-snackbar-provider,
.mud-overlay ~ * .mud-snackbar-provider {
    z-index: 100000 !important;
}


.mud-popover-paper,
.mud-picker-popover-paper,
.mud-menu-paper,
.mud-select-popover-paper,
.mud-popover,
.mud-picker-popover,
.mud-menu,
.mud-select-popover {
    z-index: 10050 !important;
}


.mud-overlay ~ .mud-popover-paper,
.mud-overlay ~ .mud-picker-popover-paper,
.mud-overlay ~ .mud-picker-popover,
.mud-overlay ~ .mud-menu-paper,
.mud-overlay ~ .mud-select-popover-paper,
.mud-overlay ~ .mud-popover,
.mud-overlay ~ .mud-menu,
.mud-overlay ~ .mud-select-popover,
.mud-dialog-container .mud-popover-paper,
.mud-dialog-container .mud-picker-popover-paper,
.mud-dialog-container .mud-picker-popover,
.mud-dialog-container .mud-menu-paper,
.mud-dialog-container .mud-select-popover-paper,
.mud-dialog-container .mud-popover,
.mud-dialog-container .mud-menu,
.mud-dialog-container .mud-select-popover {
    z-index: 10200 !important;
}


.mud-picker-popover-paper,
.mud-picker-popover {
    z-index: 10200 !important;
}



body > .mud-snackbar-provider,
.mud-snackbar-provider {
    z-index: 100000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    isolation: isolate !important;
}

.mud-snackbar-provider > * {
    pointer-events: auto !important;
}

.mud-snackbar-container,
.mud-snackbar-root {
    z-index: 100000 !important;
    position: fixed !important;
    isolation: isolate !important;
}

.mud-snackbar,
.mud-snackbar-content,
.mud-snackbar-location-topcenter,
.mud-snackbar-location-topright,
.mud-snackbar-location-topleft,
.mud-snackbar-location-bottomcenter,
.mud-snackbar-location-bottomright,
.mud-snackbar-location-bottomleft {
    z-index: 100000 !important;
    position: relative !important;
}


.mud-snackbar-provider,
.mud-snackbar-provider * {
    z-index: 100000 !important;
}


.mud-overlay {
    isolation: auto !important;
}


.mud-dialog-container {
    isolation: auto !important;
}


/* ---- Closing band ------------------------------------------------------
   The last thing on a page, in that page's accent with the ink its theme
   says is readable on it. Replaces the per-page pastel treatments, which
   left each page ending on a different unrelated colour. */
.kna-cta-band {
    background: var(--kna-page-accent, var(--kna-orange));
    border-top: 3px solid var(--kna-navy);
}

.kna-cta-band .cta-title,
.kna-cta-band h2 {
    color: var(--kna-page-on-accent, #fff) !important;
}

.kna-cta-band .cta-subtitle,
.kna-cta-band p {
    color: var(--kna-page-on-accent, #fff) !important;
    opacity: 0.92;
}


/* ---- Section decorations ----------------------------------------------
   A star and a balloon, placed by the section rather than pasted into the
   markup of each one. Same two shapes the heroes use, so the whole site is
   decorated from one place and a section opts in with a class.

   Pointer-events off and aria-hidden by nature (pseudo-elements are not in
   the accessibility tree), so they never get in the way of the content. */
.kna-deco {
    position: relative;
    overflow: hidden;
}

.kna-deco > * {
    position: relative;
    z-index: 2;
}

.kna-deco::before,
.kna-deco::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
}

/* star, top left */
.kna-deco::before {
    top: 7%;
    left: 2.5%;
    width: 76px;
    height: 76px;
    transform: rotate(-14deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 60,40 92,40 66,60 76,90 50,72 24,90 34,60 8,40 40,40' fill='%23FFDE17' stroke='%233B3F8F' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* balloon, bottom right */
.kna-deco::after {
    bottom: 6%;
    right: 3%;
    width: 62px;
    height: 88px;
    transform: rotate(12deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cellipse cx='50' cy='60' rx='32' ry='48' fill='%23F2559B' stroke='%233B3F8F' stroke-width='5'/%3E%3Cpath d='M50 108 Q60 130 40 138' fill='none' stroke='%233B3F8F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Mirrored placement, so consecutive decorated sections do not line up. */
.kna-deco--flip::before {
    left: auto;
    right: 3%;
    transform: rotate(14deg);
}

.kna-deco--flip::after {
    right: auto;
    left: 2.5%;
    transform: rotate(-12deg);
}

/* A balloon is tall; on a short section it would poke out of both edges. */
@media (max-width: 900px) {
    .kna-deco::before { width: 52px; height: 52px; }
    .kna-deco::after { width: 42px; height: 60px; }
}


/* Footer signup. The form was being laid out as a 250px column, so the field
   sat above the button and both ran the full width of it. Stated here rather
   than in the layout's block because the extra class outranks whatever set
   the column without needing !important on the layout properties. */
.footer .newsletter-form-small {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    max-width: 340px;
    width: 100%;
}

.footer .newsletter-form-small .form-input-small {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}

.footer .newsletter-form-small .btn-secondary-small {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

/* The balloon sat half off the right edge on narrower sections. */
.kna-deco::after { right: 4.5%; }
.kna-deco--flip::after { left: 4%; }