/*==============================================================
  THE KINDERTON · CHRISTMAS THEME
  Loaded after style.css and layered on top of it. Remove the
  xmas.css <link> in parts/header/header-common.php (and the
  xmas.js <script> in parts/footer/footer-js.php) to switch it off.

  Palette taken from the brand and the Christmas poster: the
  Kinderton sage and deep teal stay in charge, with cranberry
  red, champagne gold and snowy cream as festive accents.
==============================================================*/

:root {
    --xk-sage:        #86A394;   /* brand */
    --xk-sage-deep:   #4F7565;
    --xk-pine:        #1E4A3D;
    --xk-teal:        #004252;   /* brand */
    --xk-teal-deep:   #012A35;
    --xk-red:         #A3283A;   /* cranberry */
    --xk-red-deep:    #761625;
    --xk-gold:        #C9A46A;   /* champagne gold */
    --xk-gold-light:  #EAD5A8;
    --xk-gold-dark:   #9A7740;
    --xk-cream:       #F8F4EE;
    --xk-ice:         #E6F0F2;
    --xk-line:        rgba(201, 164, 106, .35);

    --xk-script:      "Great Vibes", "Playfair Display", cursive;
    --xk-ease:        cubic-bezier(.2, .8, .2, 1);

    /* Dusty rose becomes cranberry for the season */
    --theme-color2:   var(--xk-red);
    --theme-color5:   var(--xk-red);

    /* Decorative SVGs */
    --xk-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M58 21C50 11 38 7 22 9c4 3 2 6-2 7 5 2 5 5 2 8 8 0 12 3 14 7 4-4 10-5 22-10z' fill='%234F7565'/%3E%3Cpath d='M58 21C46 17 34 15 24 13' stroke='%2386A394' stroke-width='1' fill='none'/%3E%3Cpath d='M62 21c8-10 20-14 36-12-4 3-2 6 2 7-5 2-5 5-2 8-8 0-12 3-14 7-4-4-10-5-22-10z' fill='%234F7565'/%3E%3Cpath d='M62 21c12-4 24-6 34-8' stroke='%2386A394' stroke-width='1' fill='none'/%3E%3Ccircle cx='55' cy='22' r='4.6' fill='%23A3283A'/%3E%3Ccircle cx='62.5' cy='18' r='4.6' fill='%23B8344A'/%3E%3Ccircle cx='63' cy='26' r='4.2' fill='%238E1F31'/%3E%3Ccircle cx='53.6' cy='20.6' r='1.3' fill='%23fff' fill-opacity='.6'/%3E%3Ccircle cx='61.1' cy='16.6' r='1.3' fill='%23fff' fill-opacity='.6'/%3E%3Ccircle cx='61.7' cy='24.7' r='1.2' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E");
    --xk-flakes-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg stroke='%2386A394' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 50h20M35 41.3l10 17.4M35 58.7l10-17.4'/%3E%3Cpath d='M160 30h14M163.5 23.9l7 12.2M163.5 36.1l7-12.2'/%3E%3Cpath d='M110 140h26M116.5 128.7l13 22.6M116.5 151.3l13-22.6'/%3E%3Cpath d='M200 180h16M204 173.1l8 13.8M204 186.9l8-13.8'/%3E%3Cpath d='M40 200h14M43.5 193.9l7 12.2M43.5 206.1l7-12.2'/%3E%3C/g%3E%3C/svg%3E");
    --xk-flakes-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 50h20M35 41.3l10 17.4M35 58.7l10-17.4'/%3E%3Cpath d='M160 30h14M163.5 23.9l7 12.2M163.5 36.1l7-12.2'/%3E%3Cpath d='M110 140h26M116.5 128.7l13 22.6M116.5 151.3l13-22.6'/%3E%3Cpath d='M200 180h16M204 173.1l8 13.8M204 186.9l8-13.8'/%3E%3Cpath d='M40 200h14M43.5 193.9l7 12.2M43.5 206.1l7-12.2'/%3E%3C/g%3E%3C/svg%3E");
    /* Snowy hills: white snow over a pale ice ridge, for the bottom of photo banners */
    --xk-hills-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 66C180 28 360 92 560 58S900 18 1100 54s240 26 340-10v76H0z' fill='%23E6F0F2' fill-opacity='.45'/%3E%3Cpath d='M0 88C200 58 420 110 640 80s360-22 580 6 220 10 220-6v40H0z' fill='%23F4F8F9' fill-opacity='.8'/%3E%3Cpath d='M0 104c240-18 480 14 760-4s420-14 680 2v18H0z' fill='%23ffffff'/%3E%3C/svg%3E");
    /* Teal hills with a snowy ridge, for the top of the footer */
    --xk-hills-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 66C180 28 360 92 560 58S900 18 1100 54s240 26 340-10v76H0z' fill='%2386A394' fill-opacity='.28'/%3E%3Cpath d='M0 88C200 58 420 110 640 80s360-22 580 6 220 10 220-6v40H0z' fill='%23004252' fill-opacity='.55'/%3E%3Cpath d='M0 104c240-18 480 14 760-4s420-14 680 2v18H0z' fill='%23012A35'/%3E%3Cpath d='M0 104c240-18 480 14 760-4s420-14 680 2' fill='none' stroke='%23E6F0F2' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Script accents (matches the script on the Christmas poster)
--------------------------------------------------------------*/
.xk-script {
    font-family: var(--xk-script);
    font-weight: 400;
    color:       var(--xk-red);
    line-height: 1;
}

/* Small uppercase label with gold rules and stars */
.xk-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    margin:         0 0 14px;
    font-family:    var(--text-font), sans-serif;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color:          var(--xk-gold-light);
}

.xk-eyebrow::before,
.xk-eyebrow::after {
    content:    "";
    width:      34px;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--xk-gold));
}

.xk-eyebrow::after {
    background: linear-gradient(90deg, var(--xk-gold), transparent);
}

.xk-eyebrow i {
    font-size: 11px;
    color:     var(--xk-gold);
    animation: xk-star-twinkle 3.2s ease-in-out infinite;
}

/*--------------------------------------------------------------
# Section titles: a holly sprig above centred section headings
# (the sub-title's own ::before/::after draw its side rules)
--------------------------------------------------------------*/
.sec-title.text-center::before {
    content:    "";
    display:    block;
    width:      84px;
    height:     28px;
    margin:     0 auto 8px;
    background: var(--xk-sprig) center / contain no-repeat;
}

.sec-title .sub-title {
    color: var(--xk-sage-deep);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.theme-btn {
    position: relative;
}

/* Light sweeping across buttons on hover */
.theme-btn::after {
    content:        "";
    position:       absolute;
    top:            0;
    left:           -60%;
    width:          40%;
    height:         100%;
    background:     linear-gradient(100deg, transparent, rgba(255, 245, 225, .5), transparent);
    transform:      skewX(-20deg);
    transition:     left .7s var(--xk-ease);
    pointer-events: none;
    z-index:        10;
}

.theme-btn:hover::after {
    left: 120%;
}

.xk-btn-red {
    color:            #FFFFFF !important;
    background-color: var(--xk-red) !important;
    border-color:     var(--xk-gold-light) !important;
}

.xk-btn-red:hover {
    background-color: var(--xk-red-deep) !important;
}

/*--------------------------------------------------------------
# Header: fairy lights + Santa hat on the logo
--------------------------------------------------------------*/
.header-lower,
.sticky-header {
    position: relative;
}

.sticky-header {
    position: fixed;
}

.xk-lights,
.xk-lights::before,
.xk-lights::after {
    position:       absolute;
    left:           0;
    right:          0;
    height:         16px;
    pointer-events: none;
}

.xk-lights {
    bottom:     -9px;
    z-index:    5;
    background:
        radial-gradient(circle at 50% 62%, #FFF1C9 0 2.4px, rgba(255, 214, 130, .55) 3.4px, transparent 7px) 0 0 / 48px 16px repeat-x,
        linear-gradient(rgba(30, 74, 61, .9), rgba(30, 74, 61, .9)) 0 7px / 100% 1px no-repeat;
    animation:  xk-twinkle 2.6s ease-in-out infinite;
}

.xk-lights::before,
.xk-lights::after {
    content: "";
    top:     0;
}

.xk-lights::before {
    background: radial-gradient(circle at 50% 62%, #FF8A8A 0 2.4px, rgba(200, 40, 60, .55) 3.4px, transparent 7px) 16px 0 / 48px 16px repeat-x;
    animation:  xk-twinkle 3.3s ease-in-out .8s infinite;
}

.xk-lights::after {
    background: radial-gradient(circle at 50% 62%, #F2FBFF 0 2.4px, rgba(170, 215, 240, .55) 3.4px, transparent 7px) 32px 0 / 48px 16px repeat-x;
    animation:  xk-twinkle 2.9s ease-in-out 1.6s infinite;
}

.main-header .logo a {
    position:    relative;
    display:     inline-block;
    line-height: 0;
}

.main-header .logo a img {
    display: block;
}

/* Hat sits on the "O" of KINDERTON (positions measured from the logo images) */
.xk-hat {
    position:         absolute;
    height:           auto;
    pointer-events:   none;
    transform:        rotate(14deg);
    transform-origin: 42% 92%;
    filter:           drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    animation:        xk-hat-wiggle 7s ease-in-out infinite;
}

.xk-hat--main {
    width: 14%;
    left:  74.6%;
    top:   11.5%;
}

.xk-hat--sticky {
    width: 12%;
    left:  72.2%;
    top:   11%;
}

.main-header .logo a:hover .xk-hat {
    animation: xk-hat-tip .6s var(--xk-ease);
}

/*--------------------------------------------------------------
# Home hero: festive welcome over the photo
--------------------------------------------------------------*/
.banner-section-five .bg::after {
    content:    "";
    position:   absolute;
    inset:      0;
    background:
        radial-gradient(ellipse 60% 70% at 25% 55%, rgba(1, 42, 53, .55), transparent 75%),
        linear-gradient(180deg, rgba(1, 42, 53, .45) 0%, rgba(1, 42, 53, .1) 35%, rgba(1, 42, 53, .55) 100%);
    pointer-events: none;
}

.xk-hero {
    position:  relative;
    z-index:   3;
    max-width: 640px;
    margin-top: -70px;
    color:     #FFFFFF;
    animation: xk-rise 1.1s var(--xk-ease) .3s both;
}

.xk-hero .xk-script {
    display:     block;
    font-size:   64px;
    color:       var(--xk-gold-light);
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
    margin:      0 0 4px;
}

.xk-hero h1 {
    color:       #FFFFFF;
    font-size:   60px;
    line-height: 1.1;
    margin:      0 0 18px;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

.xk-hero p {
    color:       rgba(255, 255, 255, .9);
    font-size:   17px;
    line-height: 1.75;
    max-width:   520px;
    margin:      0 0 28px;
}

.xk-hero .btn-box {
    display:   flex;
    flex-wrap: wrap;
    gap:       14px;
}

@media (max-width: 767.98px) {
    .xk-hero {
        margin-top: 0;
        text-align: center;
    }

    .xk-hero .xk-script {
        font-size: 46px;
    }

    .xk-hero h1 {
        font-size: 38px;
    }

    .xk-hero p {
        font-size: 15px;
        margin-inline: auto;
    }

    .xk-hero .btn-box {
        justify-content: center;
    }

    .xk-eyebrow {
        font-size:      11px;
        letter-spacing: 3px;
    }
}

/* Hanging baubles in the hero (sage, teal, cranberry, gold: the poster's colours) */
.xk-ornaments {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        2;
}

.xk-bauble {
    position:         absolute;
    top:              0;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    transform-origin: 50% 0;
    animation:        xk-sway var(--dur, 7s) ease-in-out var(--d, 0s) infinite;
    filter:           drop-shadow(0 12px 16px rgba(0, 0, 0, .35));
}

.xk-bauble::before {
    content:    "";
    width:      1px;
    height:     var(--len, 160px);
    background: linear-gradient(180deg, rgba(201, 164, 106, 0), rgba(201, 164, 106, .9) 35%, var(--xk-gold));
}

.xk-bauble svg {
    width:      var(--size, 60px);
    height:     auto;
    margin-top: -2px;
}

@media (max-width: 991.98px) {
    .xk-bauble--desk {
        display: none;
    }
}

/* Phones: no room between the header and the welcome text, so no baubles
   (snow, fairy lights and the Santa hat keep it festive) */
@media (max-width: 767.98px) {
    .xk-ornaments {
        display: none;
    }
}

/*--------------------------------------------------------------
# Booking bar + newsletter (deep teal): frost and a gold edge
--------------------------------------------------------------*/
.checkout-form-section {
    background-image: var(--xk-flakes-dark);
    background-size:  240px 240px;
    border-top:       2px solid var(--xk-gold);
}

/*--------------------------------------------------------------
# Light sections: faint snowflake texture
--------------------------------------------------------------*/
.service-section-three,
.room-service-section,
.client-section-two {
    background-image: var(--xk-flakes-light);
    background-size:  240px 240px;
}

/*--------------------------------------------------------------
# Festive feature on the home page (parts/home8/xmas-feature.php)
--------------------------------------------------------------*/
.xk-feature {
    position:   relative;
    padding:    110px 0 100px;
    background:
        var(--xk-flakes-light),
        radial-gradient(800px 420px at 85% 20%, rgba(163, 40, 58, .07), transparent 70%),
        linear-gradient(180deg, var(--xk-cream) 0%, #FFFFFF 100%);
    background-size: 240px 240px, auto, auto;
    overflow:   hidden;
}

.xk-feature .xk-script {
    display:   block;
    font-size: 58px;
    margin:    0 0 6px;
}

.xk-feature h2 {
    font-size:   46px;
    line-height: 1.15;
    margin:      0 0 22px;
}

.xk-feature p {
    font-size:   16px;
    line-height: 1.85;
    max-width:   520px;
}

.xk-feature .btn-box {
    display:    flex;
    flex-wrap:  wrap;
    gap:        14px;
    margin-top: 30px;
}

/* The menu card: framed like a gift tag, tilts gently on hover */
.xk-menu-card {
    position:   relative;
    display:    block;
    max-width:  420px;
    margin:     0 auto;
    padding:    12px;
    background: #FFFFFF;
    border:     1px solid var(--xk-line);
    box-shadow: 0 30px 60px rgba(1, 42, 53, .18);
    transform:  rotate(2deg);
    transition: transform .6s var(--xk-ease), box-shadow .6s var(--xk-ease);
}

.xk-menu-card:hover {
    transform:  rotate(0) translateY(-6px);
    box-shadow: 0 40px 80px rgba(1, 42, 53, .25);
}

.xk-menu-card img {
    display: block;
    width:   100%;
    height:  auto;
}

/* Satin ribbon and bow across the card's corner */
.xk-menu-card::before {
    content:    "";
    position:   absolute;
    top:        -14px;
    right:      -14px;
    width:      78px;
    height:     78px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23761625'/%3E%3Cstop offset='.5' stop-color='%23C23A4F'/%3E%3Cstop offset='1' stop-color='%23761625'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 40C26 22 10 22 12 34s18 10 28 6zM40 40c14-18 30-18 28-6s-18 10-28 6z' fill='url(%23r)'/%3E%3Cpath d='M38 42l-12 30 9-4 5 9 4-34zM42 42l12 30-9-4-5 9-4-34z' fill='%23A3283A'/%3E%3Ccircle cx='40' cy='40' r='6' fill='%23C23A4F' stroke='%23761625'/%3E%3C/svg%3E") center / contain no-repeat;
    filter:     drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
    z-index:    2;
}

.xk-menu-card figcaption {
    padding:        14px 6px 4px;
    text-align:     center;
    font-family:    var(--title-font);
    font-size:      20px;
    color:          var(--xk-teal);
}

@media (max-width: 991.98px) {
    .xk-feature {
        padding: 80px 0 70px;
        text-align: center;
    }

    .xk-feature p {
        margin-inline: auto;
    }

    .xk-feature .btn-box {
        justify-content: center;
        margin-bottom:   50px;
    }

    .xk-feature h2 {
        font-size: 34px;
    }
}

/*--------------------------------------------------------------
# Christmas events showcase (parts/home8/xmas-events.php)
--------------------------------------------------------------*/
.xk-events {
    padding:    100px 0 90px;
    background:
        var(--xk-flakes-light),
        linear-gradient(180deg, #FFFFFF 0%, var(--xk-cream) 100%);
    background-size: 240px 240px, auto;
}

.xk-event-card {
    display:         block;
    height:          100%;
    padding:         10px 10px 0;
    background:      #FFFFFF;
    border:          1px solid var(--xk-line);
    box-shadow:      0 20px 44px rgba(1, 42, 53, .12);
    text-decoration: none;
    transition:      transform .5s var(--xk-ease), box-shadow .5s var(--xk-ease);
}

.xk-event-card:hover {
    transform:  translateY(-8px);
    box-shadow: 0 32px 64px rgba(1, 42, 53, .22);
}

.xk-event-card .image {
    margin:   0;
    overflow: hidden;
}

.xk-event-card .image img {
    display:    block;
    width:      100%;
    height:     auto;
    transition: transform .8s var(--xk-ease);
}

.xk-event-card:hover .image img {
    transform: scale(1.04);
}

.xk-event-card .info {
    padding:    18px 8px 20px;
    text-align: center;
}

.xk-event-card h4 {
    margin:      0 0 6px;
    font-size:   24px;
    color:       var(--xk-teal);
}

.xk-event-card p {
    margin:    0 0 12px;
    font-size: 14px;
    color:     #5a6b70;
}

.xk-event-card .more {
    display:        inline-block;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--xk-red);
    border-bottom:  1px solid var(--xk-gold);
    padding-bottom: 3px;
}

/* Events & Offers cards on the home page: a gold edge in the festive spirit */
.service-block-three .inner-box {
    outline:        1px solid transparent;
    outline-offset: -8px;
    transition:     outline-color .4s;
}

.service-block-three:hover .inner-box {
    outline-color: rgba(234, 213, 168, .8);
}

/*--------------------------------------------------------------
# Book a Table page: the Christmas Day menu fills the image column
--------------------------------------------------------------*/
.about-section-eight .image-column .inner-column.xk-single {
    justify-content: center;
}

.xk-menu-figure {
    width:     100%;
    max-width: 540px;   /* same size the Bottomless Brunch poster was */
}

.xk-menu-figure img {
    display: block;
    width:   100%;
    height:  auto;
}

/*--------------------------------------------------------------
# Events page (KindertonEvents.php): dark teal poster carousel
--------------------------------------------------------------*/
.poster-carousel-section {
    background:
        radial-gradient(800px 420px at 85% 0%, rgba(163, 40, 58, .25), transparent 70%),
        linear-gradient(180deg, var(--xk-teal-deep) 0%, #01171E 100%) !important;
}

.poster-carousel-main-heading {
    font-family: var(--title-font);
}

.poster-carousel-slide {
    background:   rgba(255, 255, 255, .04) !important;
    border-color: var(--xk-line) !important;
}

.poster-carousel-tag {
    color: var(--xk-gold-light) !important;
}

.poster-carousel-text-box h2 {
    font-family: var(--title-font);
    color:       #FFFFFF !important;
}

.poster-carousel-text-box p {
    color: rgba(255, 255, 255, .82) !important;
}

.poster-carousel-btn {
    color:            #FFFFFF !important;
    background:       linear-gradient(135deg, #B8344A, var(--xk-red-deep));
    border-color:     var(--xk-gold-light) !important;
}

.poster-carousel-btn:hover {
    background: var(--xk-gold) !important;
    color:      #3B0A12 !important;
}

.poster-carousel-image {
    border: 1px solid var(--xk-line);
}

.poster-carousel-dot.poster-carousel-active-dot {
    background: var(--xk-gold) !important;
}

/*--------------------------------------------------------------
# Inner page banners: teal wash and snowy hills
--------------------------------------------------------------*/
.page-title {
    position: relative;
}

.page-title::after {
    content:        "";
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         -1px;
    height:         70px;
    background:     var(--xk-hills-white) bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index:        2;
}

.page-title .title-outer {
    position: relative;
    z-index:  3;
}

.page-title .title-outer::before {
    content:    "";
    display:    block;
    width:      92px;
    height:     30px;
    margin:     0 auto 10px;
    background: var(--xk-sprig) center / contain no-repeat;
}

/*--------------------------------------------------------------
# Mobile menu: teal panel, links rise in one by one
--------------------------------------------------------------*/
.mobile-menu .menu-box {
    background:
        var(--xk-flakes-dark),
        linear-gradient(165deg, var(--xk-teal) 0%, var(--xk-teal-deep) 100%);
    background-size: 240px 240px, auto;
}

.mobile-menu .menu-box .navigation::before {
    content:    "";
    display:    block;
    height:     30px;
    margin:     2px 0 10px;
    background: var(--xk-sprig) center / auto 26px no-repeat;
}

.mobile-menu .navigation li {
    border-bottom-color: rgba(201, 164, 106, .18);
}

.mobile-menu-visible .mobile-menu .navigation > li {
    animation: xk-rise .5s var(--xk-ease) both;
}

.mobile-menu-visible .mobile-menu .navigation > li:nth-child(1) { animation-delay: .12s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(2) { animation-delay: .17s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(3) { animation-delay: .22s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(4) { animation-delay: .27s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(5) { animation-delay: .32s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(6) { animation-delay: .37s; }
.mobile-menu-visible .mobile-menu .navigation > li:nth-child(7) { animation-delay: .42s; }

.mobile-menu-visible .mobile-menu .contact-list-one,
.mobile-menu-visible .mobile-menu .social-links {
    animation: xk-rise .6s var(--xk-ease) .45s both;
}

.mobile-nav-toggler .icon {
    display:    inline-block;
    transition: transform .5s var(--xk-ease);
}

.mobile-nav-toggler:hover .icon {
    transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Footer: snowy teal hills and a Christmas greeting
--------------------------------------------------------------*/
.main-footer {
    background:
        var(--xk-flakes-dark),
        linear-gradient(180deg, var(--xk-teal-deep) 0%, #011D25 100%);
    background-size: 240px 240px, auto;
}

.xk-snowline {
    position:       relative;
    z-index:        2;
    height:         70px;
    margin-top:     -69px;
    background:     var(--xk-hills-teal) bottom / 100% 100% no-repeat;
    pointer-events: none;
}

.xk-greeting {
    margin:      0 0 10px;
    padding-top: 50px;
    text-align:  center;
    font-family: var(--xk-script);
    font-size:   56px;
    line-height: 1.1;
    color:       var(--xk-gold-light);
}

@media (max-width: 576px) {
    .xk-greeting {
        font-size: 40px;
    }
}

.main-footer .widget-title {
    color: var(--xk-gold-light);
}

.main-footer .user-links li a:hover,
.main-footer .social-icon a:hover {
    color: var(--xk-gold-light) !important;
}

/*--------------------------------------------------------------
# Back to top: a cranberry bauble
--------------------------------------------------------------*/
.scroll-to-top {
    width:       44px;
    height:      44px;
    line-height: 44px;
    color:       #FFFFFF;
    background:  radial-gradient(circle at 34% 30%, #E06A78 0%, var(--xk-red) 40%, var(--xk-red-deep) 100%);
    box-shadow:  0 10px 24px rgba(0, 0, 0, .3), inset -4px -6px 12px rgba(0, 0, 0, .2);
    transition:  transform .4s var(--xk-ease);
}

.scroll-to-top::before {
    content:       "";
    position:      absolute;
    top:           -7px;
    left:          50%;
    width:         14px;
    height:        8px;
    transform:     translateX(-50%);
    border-radius: 2px;
    background:    linear-gradient(90deg, var(--xk-gold-dark), var(--xk-gold-light), var(--xk-gold-dark));
}

.scroll-to-top:hover {
    transform: translateY(-3px) rotate(-8deg);
}

/*--------------------------------------------------------------
# Christmas popup (content unchanged): softer entrance + gold frame
--------------------------------------------------------------*/
.kindertonPopup-overlay-91 {
    backdrop-filter: blur(4px);
}

.kindertonPopup-box-91 {
    animation: xk-pop .7s var(--xk-ease) both;
}

.kindertonPopup-poster-91 {
    border:     1px solid var(--xk-gold);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .85);
}

.kindertonPopup-close-91 {
    background: radial-gradient(circle at 34% 30%, #E06A78 0%, var(--xk-red) 40%, var(--xk-red-deep) 100%) !important;
    color:      #FFFFFF !important;
    border:     2px solid var(--xk-gold-light) !important;
    transition: transform .4s var(--xk-ease);
}

.kindertonPopup-close-91:hover {
    transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Snow canvas, snow toggle, Santa's sleigh (driven by js/xmas.js)
--------------------------------------------------------------*/
.xk-snow {
    position:       fixed;
    inset:          0;
    width:          100%;
    height:         100%;
    pointer-events: none;
    z-index:        9999;     /* above content, below the headers (99999) */
}

.xk-snow-toggle {
    position:        fixed;
    left:            20px;
    bottom:          20px;
    z-index:         10000;
    width:           46px;
    height:          46px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    border:          1px solid var(--xk-line);
    background:      rgba(1, 42, 53, .85);
    backdrop-filter: blur(6px);
    color:           var(--xk-ice);
    font-size:       18px;
    box-shadow:      0 10px 24px rgba(0, 0, 0, .25);
    transition:      transform .5s var(--xk-ease), opacity .3s, border-color .3s;
}

.xk-snow-toggle:hover {
    transform:    rotate(60deg);
    border-color: var(--xk-gold);
}

.xk-snow-toggle[aria-pressed="false"] {
    opacity: .55;
}

.xk-snow-toggle[aria-pressed="false"]::after {
    content:    "";
    position:   absolute;
    width:      24px;
    height:     1.5px;
    background: rgba(230, 240, 242, .8);
    transform:  rotate(-45deg);
}

.xk-sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    overflow: hidden;
    clip:     rect(0 0 0 0);
    white-space: nowrap;
}

.xk-sleigh {
    position:       fixed;
    top:            17vh;
    left:           0;
    width:          clamp(180px, 24vw, 320px);
    z-index:        1000001;  /* above the popup too; never blocks clicks */
    pointer-events: none;
    filter:         drop-shadow(0 0 6px rgba(255, 214, 140, .7)) drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
    animation:      xk-fly 2.4s cubic-bezier(.42, .05, .5, .95) forwards;
}

.xk-sleigh svg {
    display:   block;
    width:     100%;
    height:    auto;
    animation: xk-bob .42s ease-in-out infinite alternate;
}

.xk-dust {
    position:       fixed;
    z-index:        1000000;
    width:          7px;
    height:         7px;
    border-radius:  50%;
    pointer-events: none;
    background:     radial-gradient(circle, #FFF6DA 0 30%, rgba(234, 213, 168, .7) 55%, transparent 70%);
    animation:      xk-dust .9s ease-out forwards;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes xk-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@keyframes xk-star-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.8); }
}

@keyframes xk-sway {
    0%, 100% { transform: rotate(2.2deg); }
    50%      { transform: rotate(-2.2deg); }
}

@keyframes xk-hat-wiggle {
    0%, 86%, 100% { transform: rotate(14deg); }
    90%           { transform: rotate(20deg); }
    94%           { transform: rotate(10deg); }
}

@keyframes xk-hat-tip {
    0%, 100% { transform: rotate(14deg) translateY(0); }
    40%      { transform: rotate(24deg) translateY(-4px); }
}

@keyframes xk-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes xk-pop {
    from { opacity: 0; transform: translateY(24px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes xk-fly {
    0%   { transform: translate(-110%, 70px) rotate(-3deg); }
    50%  { transform: translate(calc(50vw - 50%), 0) rotate(-6deg); }
    100% { transform: translate(100vw, -80px) rotate(-10deg); }
}

@keyframes xk-bob {
    from { transform: translateY(-3px); }
    to   { transform: translateY(3px); }
}

@keyframes xk-dust {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(var(--dx, -10px), var(--dy, 24px)) scale(.3); }
}

/* Respect visitors who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .xk-lights,
    .xk-lights::before,
    .xk-lights::after,
    .xk-bauble,
    .xk-hat,
    .xk-eyebrow i,
    .xk-hero,
    .mobile-menu-visible .mobile-menu .navigation > li,
    .kindertonPopup-box-91 {
        animation: none !important;
    }
}