/*==============================================================
  CUBAR · CHRISTMAS THEME
  Loaded after style.css and layered on top of it. Remove the
  xmas.css <link> in src/layouts/Layout.astro to switch it off.

  Palette: the brand's champagne gold kept as the hero colour,
  set on deep evergreen night with cranberry red as the accent,
  warm cream text and a touch of icy blue for snow and frost.
==============================================================*/

:root {
    /* Christmas palette */
    --xm-night:       #07110D;   /* page background: evergreen black */
    --xm-night-2:     #0B1A14;
    --xm-pine:        #10291F;   /* evergreen */
    --xm-pine-2:      #173A2C;
    --xm-red:         #B3192E;   /* cranberry red */
    --xm-red-deep:    #6F0E1B;
    --xm-gold:        #D9B07E;   /* brand champagne gold */
    --xm-gold-light:  #F1DBB0;
    --xm-gold-dark:   #A97C47;
    --xm-cream:       #F7F0E3;
    --xm-cream-soft:  rgba(247, 240, 227, .78);
    --xm-ice:         #CFE3EE;
    --xm-line:        rgba(217, 176, 126, .28);

    --xm-serif:       "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --xm-ease:        cubic-bezier(.2, .8, .2, 1);
    --xm-radius:      14px;

    /* Re-map the original theme's colours onto the Christmas palette */
    --colour-cubar-copper:       var(--xm-red);
    --colour-cubar-copper-light: var(--xm-gold);
    --background-black:          rgba(7, 17, 13, .62);

    /* Decorative SVGs */
    --xm-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cg%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='%231F5A3F'/%3E%3Cpath d='M58 21C46 17 34 15 24 13' stroke='%233E8A63' 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='%231F5A3F'/%3E%3Cpath d='M62 21c12-4 24-6 34-8' stroke='%233E8A63' stroke-width='1' fill='none'/%3E%3Ccircle cx='55' cy='22' r='4.6' fill='%23B3192E'/%3E%3Ccircle cx='62.5' cy='18' r='4.6' fill='%23C62238'/%3E%3Ccircle cx='63' cy='26' r='4.2' fill='%239E1428'/%3E%3Ccircle cx='53.6' cy='20.6' r='1.3' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='61.1' cy='16.6' r='1.3' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='61.7' cy='24.7' r='1.2' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
    --xm-starline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'%3E%3Cpath d='M0 7h114' stroke='%23D9B07E' stroke-width='1'/%3E%3Cpath d='M128 0l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23D9B07E'/%3E%3C/svg%3E");
    --xm-flakes: 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='.06' 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%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Ccircle cx='90' cy='70' r='1.6'/%3E%3Ccircle cx='220' cy='90' r='1.2'/%3E%3Ccircle cx='70' cy='120' r='1'/%3E%3Ccircle cx='170' cy='225' r='1.4'/%3E%3Ccircle cx='15' cy='150' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    --xm-hills: 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='%23CFE3EE' fill-opacity='.13'/%3E%3Cpath d='M0 88C200 58 420 110 640 80s360-22 580 6 220 10 220-6v40H0z' fill='%23CFE3EE' fill-opacity='.22'/%3E%3Cpath d='M0 104c240-18 480 14 760-4s420-14 680 2v18H0z' fill='%2307110D'/%3E%3Cpath d='M0 104c240-18 480 14 760-4s420-14 680 2' fill='none' stroke='%23F4FAFD' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body.xmas-theme {
    background:
        radial-gradient(1100px 620px at 8% -8%, rgba(179, 25, 46, .10), transparent 60%),
        radial-gradient(1000px 640px at 105% 12%, rgba(23, 58, 44, .55), transparent 60%),
        var(--xm-night);
    color: var(--xm-cream);
}

.xmas-theme a {
    color: var(--xm-gold);
}

.xmas-theme a:hover {
    color: var(--xm-gold-light);
}

.xmas-theme a:focus-visible,
.xmas-theme button:focus-visible {
    outline:        2px solid var(--xm-gold);
    outline-offset: 3px;
    border-radius:  4px;
}

::selection {
    background: var(--xm-red);
    color:      #FFFFFF;
}

/* Elegant serif for content headings (the script font stays for section titles) */
.about .content h3,
.xmas .content h3,
.specials .details h3,
.testimonials .testimonial-item h3,
#reservations h2,
.xm-festive h2 {
    font-family:    var(--xm-serif);
    font-weight:    600;
    letter-spacing: .3px;
    color:          var(--xm-gold-light);
}

.about .content h3,
.xmas .content h3 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 18px;
}

.about .content p,
.xmas .content p {
    color:     var(--xm-cream-soft);
    font-size: 16px;
    line-height: 1.8;
}

.about .content .fst-italic {
    font-family: var(--xm-serif);
    font-size:   22px;
    line-height: 1.5;
    color:       var(--xm-cream);
}

/* Small uppercase label used above festive headings */
.xm-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    margin:         0 0 18px;
    font-size:      12.5px;
    font-weight:    500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color:          var(--xm-gold-light);
}

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

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

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

@media (max-width: 576px) {
    .xm-eyebrow {
        gap:            8px;
        font-size:      11px;
        letter-spacing: 2.5px;
        white-space:    nowrap;
    }

    .xm-eyebrow::before,
    .xm-eyebrow::after {
        width: 18px;
    }
}

/*--------------------------------------------------------------
# Buttons (shared festive style)
--------------------------------------------------------------*/
#hero .btn-menu,
#hero .btn-book,
#xmas .btn-menu,
.events .btn-menu,
.xm-btn {
    position:        relative;
    overflow:        hidden;
    display:         inline-block;
    padding:         15px 32px;
    border-radius:   999px;
    font-family:     "Poppins", sans-serif;
    font-size:       15px;
    font-weight:     500;
    letter-spacing:  2.5px;
    line-height:     1;
    text-transform:  uppercase;
    color:           var(--xm-cream);
    background:      rgba(7, 17, 13, .55);
    border:          1px solid var(--xm-gold);
    box-shadow:      0 10px 30px rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    transition:      transform .35s var(--xm-ease), box-shadow .35s var(--xm-ease), background .35s, color .35s;
}

/* Primary: cranberry with a gold edge */
#hero .btn-menu,
#xmas .btn-menu:first-child,
.events .btn-menu,
.xm-btn--primary {
    background: linear-gradient(135deg, #C42137 0%, var(--xm-red) 45%, var(--xm-red-deep) 100%);
    color:      #FFFFFF;
    border-color: rgba(241, 219, 176, .75);
}

/* Light sweeping across the button on hover */
#hero .btn-menu::after,
#hero .btn-book::after,
#xmas .btn-menu::after,
.events .btn-menu::after,
.xm-btn::after {
    content:    "";
    position:   absolute;
    top:        0;
    left:       -60%;
    width:      40%;
    height:     100%;
    background: linear-gradient(100deg, transparent, rgba(255, 244, 220, .45), transparent);
    transform:  skewX(-20deg);
    transition: left .7s var(--xm-ease);
}

#hero .btn-menu:hover,
#hero .btn-book:hover,
#xmas .btn-menu:hover,
.events .btn-menu:hover,
.xm-btn:hover {
    color:      #FFFFFF;
    background: linear-gradient(135deg, #C42137 0%, var(--xm-red) 45%, var(--xm-red-deep) 100%);
    transform:  translateY(-2px);
    box-shadow: 0 14px 34px rgba(179, 25, 46, .35);
}

#hero .btn-menu:hover::after,
#hero .btn-book:hover::after,
#xmas .btn-menu:hover::after,
.events .btn-menu:hover::after,
.xm-btn:hover::after {
    left: 120%;
}

#xmas .btn-menu + .btn-menu {
    margin-left: 12px;
}

/*--------------------------------------------------------------
# Top bar: a cranberry ribbon
--------------------------------------------------------------*/
#topbar {
    background:    linear-gradient(90deg, var(--xm-red-deep) 0%, #8E1424 50%, var(--xm-red-deep) 100%);
    border-bottom: 1px solid rgba(217, 176, 126, .35);
}

#topbar .contact-info i {
    color: var(--xm-gold-light);
}

#topbar .contact-info i span,
#topbar .contact-info i a,
#topbar .social-media ul a {
    color: var(--xm-cream);
}

#topbar .contact-info i a:hover,
#topbar .social-media ul a:hover {
    color: var(--xm-gold-light);
}

/*--------------------------------------------------------------
# Header + fairy lights
--------------------------------------------------------------*/
#header {
    background:      linear-gradient(180deg, rgba(7, 17, 13, .88), rgba(7, 17, 13, .7));
    border-bottom:   1px solid rgba(217, 176, 126, .16);
}

/* Frosted glass on desktop only: backdrop-filter would trap the full-screen
   mobile menu (position: fixed) inside the header on phones */
@media (min-width: 992px) {
    #header {
        background:      linear-gradient(180deg, rgba(7, 17, 13, .82), rgba(7, 17, 13, .6));
        backdrop-filter: blur(8px);
    }
}

#header.header-scrolled {
    background:    rgba(7, 17, 13, .94);
    border-bottom: 1px solid rgba(217, 176, 126, .22);
}

/* Bulbs every 16px in gold, red and ice, each colour twinkling on its own beat */
.xm-lights,
.xm-lights::before,
.xm-lights::after {
    position:       absolute;
    left:           0;
    right:          0;
    height:         16px;
    pointer-events: none;
}

.xm-lights {
    bottom:     -9px;
    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(23, 58, 44, .95), rgba(23, 58, 44, .95)) 0 7px / 100% 1px no-repeat;
    animation:  xm-twinkle 2.6s ease-in-out infinite;
}

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

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

.xm-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:  xm-twinkle 2.9s ease-in-out 1.6s infinite;
}

/*--------------------------------------------------------------
# Santa hat on the logo
--------------------------------------------------------------*/
#header .logo {
    position: relative;
    display:  inline-block;
}

.xm-hat {
    position:         absolute;
    left:             -10px;
    top:              -15px;
    width:            32px;
    height:           auto;
    transform:        rotate(-24deg);
    transform-origin: 40% 90%;
    filter:           drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
    pointer-events:   none;
    animation:        xm-hat-wiggle 7s ease-in-out infinite;
}

#header .logo:hover .xm-hat {
    animation: xm-hat-tip .6s var(--xm-ease);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .xm-hat {
        width: 27px;
        left:  -8px;
        top:   -13px;
    }
}

/* Phones/tablets: the logo sits 12px from the screen edge, so pull the hat in */
@media (max-width: 991.98px) {
    .xm-hat {
        left: -2px;
    }
}

@keyframes xm-hat-wiggle {
    0%, 86%, 100% { transform: rotate(-24deg); }
    90%           { transform: rotate(-30deg); }
    94%           { transform: rotate(-20deg); }
}

@keyframes xm-hat-tip {
    0%, 100% { transform: rotate(-24deg) translateY(0); }
    40%      { transform: rotate(-34deg) translateY(-5px); }
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.navbar a,
.navbar a:focus {
    color:          var(--xm-cream);
    letter-spacing: .3px;
}

@media (min-width: 992px) {
    .navbar > ul > li > a {
        position: relative;
    }

    /* Gold underline that draws in from the centre */
    .navbar > ul > li > a::after {
        content:          "";
        position:         absolute;
        left:             calc(50% + 15px);
        right:            calc(50% - 15px);
        bottom:           4px;
        height:           1px;
        background:       var(--xm-gold);
        transition:       left .35s var(--xm-ease), right .35s var(--xm-ease);
    }

    .navbar > ul > li > a:hover::after,
    .navbar > ul > li > a.active::after {
        left:  30px;
        right: 0;
    }
}

/* Squeeze the menu a little on medium desktops so the extra Christmas link fits */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar a,
    .navbar a:focus {
        padding-left: 20px;
        font-size:    13.5px;
    }

    .navbar > ul > li > a:hover::after,
    .navbar > ul > li > a.active::after {
        left: 20px;
    }

    .navbar > ul > li > a::after {
        left:  calc(50% + 10px);
        right: calc(50% - 10px);
    }

    .book-a-table-btn {
        padding: 8px 18px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar a,
    .navbar a:focus {
        padding-left: 14px;
        font-size:    12.5px;
    }

    .navbar > ul > li > a:hover::after,
    .navbar > ul > li > a.active::after {
        left: 14px;
    }

    #header .logo img {
        max-height: 34px;
    }

    .book-a-table-btn {
        margin-left: 10px;
        padding:     7px 14px;
        font-size:   12px;
    }
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
    color: var(--xm-gold-light);
}

.xm-nav-festive,
.xm-nav-festive:focus {
    color: var(--xm-gold) !important;
}

.xm-nav-festive i {
    font-size:  13px !important;
    color:      var(--xm-gold-light);
    animation:  xm-star-twinkle 3s ease-in-out infinite;
}

.book-a-table-btn {
    white-space: nowrap;
    background:  linear-gradient(135deg, #C42137, var(--xm-red-deep));
    border:      1px solid rgba(241, 219, 176, .7);
    color:       #FFFFFF;
    box-shadow:  0 6px 18px rgba(179, 25, 46, .3);
}

.book-a-table-btn:hover {
    background:  var(--xm-gold);
    color:       #3B0A12;
    border-color: var(--xm-gold-light);
}

/* Mobile menu: frosted backdrop, panel drops in, links rise in one by one */
.mobile-nav-toggle {
    color:      var(--xm-cream);
    transition: transform .5s var(--xm-ease), color .3s;
}

.navbar-mobile {
    background:      rgba(4, 10, 8, .72);
    backdrop-filter: blur(6px);
    animation:       xm-fade .3s ease both;
}

.navbar-mobile .mobile-nav-toggle {
    color:     var(--xm-gold);
    transform: rotate(180deg);
}

.navbar-mobile ul {
    background:    linear-gradient(165deg, var(--xm-pine-2) 0%, var(--xm-pine) 40%, var(--xm-night) 100%);
    border:        1px solid var(--xm-line);
    border-radius: 18px;
    box-shadow:    0 30px 60px rgba(0, 0, 0, .55);
    padding:       8px 0 18px;
    animation:     xm-drop .55s var(--xm-ease) both;
}

.navbar-mobile ul::before {
    content:    "";
    display:    block;
    height:     46px;
    margin:     8px 0 4px;
    background: var(--xm-sprig) center / auto 36px no-repeat;
}

.navbar-mobile li {
    opacity:   0;
    animation: xm-rise .5s var(--xm-ease) forwards;
}

.navbar-mobile li:nth-child(1) { animation-delay: .10s; }
.navbar-mobile li:nth-child(2) { animation-delay: .14s; }
.navbar-mobile li:nth-child(3) { animation-delay: .18s; }
.navbar-mobile li:nth-child(4) { animation-delay: .22s; }
.navbar-mobile li:nth-child(5) { animation-delay: .26s; }
.navbar-mobile li:nth-child(6) { animation-delay: .30s; }
.navbar-mobile li:nth-child(7) { animation-delay: .34s; }
.navbar-mobile li:nth-child(8) { animation-delay: .38s; }
.navbar-mobile li:nth-child(9) { animation-delay: .42s; }

.navbar-mobile a,
.navbar-mobile a:focus {
    font-family: var(--xm-serif);
    font-size:   1.9rem;
    font-weight: 600;
    color:       var(--xm-cream);
    padding:     8px 20px;
}

.navbar-mobile .active,
.navbar-mobile .xm-nav-festive {
    color: var(--xm-gold) !important;
}

.navbar-mobile a:hover,
.navbar-mobile li:hover > a {
    color:            var(--xm-gold-light);
    background-color: rgba(179, 25, 46, .28);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero:before {
    background:
        radial-gradient(ellipse 55% 60% at 82% 18%, rgba(255, 196, 120, .14), transparent 70%),
        linear-gradient(90deg, rgba(7, 17, 13, .88) 0%, rgba(7, 17, 13, .6) 48%, rgba(7, 17, 13, .3) 100%),
        linear-gradient(180deg, rgba(7, 17, 13, .55) 0%, transparent 30%, rgba(111, 14, 27, .28) 72%, rgba(7, 17, 13, .9) 100%);
}

/* Moonlit snowy hills along the bottom of the hero */
#hero::after {
    content:        "";
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         -1px;
    height:         110px;
    background:     var(--xm-hills) bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index:        1;
}

#hero .container {
    z-index: 2;
}

#hero h1 {
    color: var(--xm-gold-light);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

/* Gold leaf shimmer on the CUBAR wordmark */
#hero h1 span {
    background:              linear-gradient(100deg, #B88A55 0%, #F6E3BB 25%, #D9B07E 45%, #FFF3D6 55%, #C9995F 75%, #F1DBB0 100%);
    background-size:         220% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    text-shadow:             none;
    animation:               xm-sheen 7s ease-in-out infinite;
}

#hero h2 {
    font-family:    var(--xm-serif);
    font-style:     italic;
    font-weight:    500;
    font-size:      30px;
    color:          var(--xm-cream);
    letter-spacing: .5px;
}

@media (max-width: 768px) {
    #hero h2 {
        font-size: 22px;
    }

    #hero .btn-menu,
    #hero .btn-book {
        font-size: 13px;
        padding:   13px 24px;
    }
}

/* Hanging baubles (markup in src/components/Ornaments.astro) */
.xm-ornaments {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        1;
}

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

.xm-bauble::before {
    content:    "";
    width:      1px;
    height:     var(--len, 160px);
    background: linear-gradient(180deg, rgba(217, 176, 126, 0), rgba(217, 176, 126, .85) 35%, var(--xm-gold));
}

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

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

    .xm-bauble {
        --size: 40px !important;
    }
}

/*--------------------------------------------------------------
# Section titles
--------------------------------------------------------------*/
.section-title::before {
    content:       "";
    display:       block;
    width:         96px;
    height:        30px;
    margin-bottom: 4px;
    background:    var(--xm-sprig) left center / contain no-repeat;
}

.section-title h1 {
    color: var(--xm-gold);
}

.section-title h1::after {
    width:          140px;
    height:         14px;
    margin:         0 12px;
    vertical-align: middle;
    background:     var(--xm-starline) center / contain no-repeat;
}

.section-title h2 {
    color: var(--xm-gold-light);
}

@media (max-width: 576px) {
    .section-title::before {
        margin-inline:       auto;
        background-position: center;
    }
}

/*--------------------------------------------------------------
# Section backgrounds
--------------------------------------------------------------*/
.section-bg {
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(179, 25, 46, .12), transparent 60%),
        linear-gradient(180deg, var(--xm-pine) 0%, var(--xm-night-2) 100%);
}

.about:before {
    background: linear-gradient(120deg, rgba(7, 17, 13, .95) 0%, rgba(16, 41, 31, .86) 55%, rgba(7, 17, 13, .92) 100%);
}

.xmas {
    padding: 110px 0 90px;
}

.xmas:before {
    background:
        radial-gradient(700px 420px at 90% 50%, rgba(179, 25, 46, .35), transparent 70%),
        linear-gradient(115deg, rgba(7, 17, 13, .96) 0%, rgba(7, 17, 13, .86) 48%, rgba(111, 14, 27, .7) 100%);
}

#menus:before {
    background:
        radial-gradient(800px 500px at 15% 10%, rgba(179, 25, 46, .3), transparent 70%),
        linear-gradient(160deg, rgba(111, 14, 27, .78) 0%, rgba(7, 17, 13, .93) 55%);
}

.events::before {
    background-color: transparent;
    background:
        radial-gradient(900px 500px at 10% 100%, rgba(179, 25, 46, .22), transparent 70%),
        linear-gradient(180deg, rgba(7, 17, 13, .92), rgba(16, 41, 31, .9));
}

/* Faint snowflake texture */
.why-us,
#khospitality,
.specials,
.gallery {
    background-image: var(--xm-flakes);
    background-size:  240px 240px;
}

#khospitality {
    background-color: var(--xm-pine);
    border-top:       1px solid var(--xm-line);
}

/*--------------------------------------------------------------
# Images with corner brackets (about, contact, xmas)
--------------------------------------------------------------*/
.about-img img {
    border:        1px solid rgba(217, 176, 126, .45);
    padding:       8px;
    background:    rgba(7, 17, 13, .5);
    border-radius: 6px;
    box-shadow:    0 30px 60px rgba(0, 0, 0, .45);
}

.about-img::before,
.about-img::after {
    border-color: var(--xm-gold) !important;
    border-width: 2px !important;
}

/*--------------------------------------------------------------
# Why Cubar boxes
--------------------------------------------------------------*/
.why-us .box {
    position:      relative;
    height:        100%;
    border-radius: var(--xm-radius);
    border:        1px solid var(--xm-line);
    background:    linear-gradient(160deg, rgba(23, 58, 44, .55) 0%, rgba(7, 17, 13, .9) 100%);
    box-shadow:    0 20px 40px rgba(0, 0, 0, .3);
    transition:    transform .45s var(--xm-ease), background .45s, border-color .45s, box-shadow .45s;
}

.why-us .box span {
    font-family: var(--xm-serif);
    font-style:  italic;
    font-size:   34px;
    color:       var(--xm-gold);
}

.why-us .box h4 {
    color: var(--xm-gold-light);
}

.why-us .box p {
    color: var(--xm-cream-soft);
}

/* A small gold star in the corner that lights up on hover */
.why-us .box::after {
    content:    "";
    position:   absolute;
    top:        22px;
    right:      22px;
    width:      18px;
    height:     18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4z' fill='%23D9B07E'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity:    .45;
    transition: opacity .4s, transform .6s var(--xm-ease);
}

.why-us .box:hover {
    padding:      50px 30px;
    background:   linear-gradient(160deg, #A3172A 0%, var(--xm-red-deep) 100%);
    border-color: rgba(241, 219, 176, .6);
    transform:    translateY(-8px);
    box-shadow:   0 30px 60px rgba(111, 14, 27, .45);
}

.why-us .box:hover::after {
    opacity:   1;
    transform: rotate(90deg) scale(1.2);
}

.why-us .box:hover span,
.why-us .box:hover h4 {
    color: var(--xm-gold-light);
}

.why-us .box:hover p {
    color: var(--xm-cream);
}

/*--------------------------------------------------------------
# Events / What's on sliders
--------------------------------------------------------------*/
.events .event-item img {
    border:        1px solid rgba(217, 176, 126, .45);
    padding:       8px;
    border-radius: 8px;
    background:    rgba(7, 17, 13, .5);
    box-shadow:    0 24px 50px rgba(0, 0, 0, .4);
}

.events .event-item h3 {
    color: var(--xm-gold);
}

.events .event-item p {
    color: var(--xm-cream-soft);
}

.swiper-pagination .swiper-pagination-bullet {
    background-color: rgba(247, 240, 227, .35) !important;
    transition:       width .35s var(--xm-ease), background-color .35s;
}

.swiper-pagination .swiper-pagination-bullet-active {
    width:            28px !important;
    border-radius:    6px;
    background-color: var(--xm-gold) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--xm-gold);
}

/*--------------------------------------------------------------
# Festive menus (menus page)
--------------------------------------------------------------*/
.list-menus {
    border:           1px solid var(--xm-line);
    outline:          1px solid rgba(217, 176, 126, .5);
    outline-offset:   -8px;
    border-radius:    6px;
    background-color: rgba(7, 17, 13, .55);
    backdrop-filter:  blur(4px);
    padding:          14px 0;
}

.list-menus a {
    color: var(--xm-gold);
}

.list-menus a:hover {
    color:      var(--xm-gold-light);
    background: linear-gradient(90deg, transparent, rgba(179, 25, 46, .85) 20%, rgba(179, 25, 46, .85) 80%, transparent);
    box-shadow: none;
}

.xm-festive .list-menus {
    background-color: rgba(111, 14, 27, .45);
}

.xm-festive p {
    color:       var(--xm-cream-soft);
    line-height: 1.8;
}

/*--------------------------------------------------------------
# Specialities tabs
--------------------------------------------------------------*/
.specials .nav-link {
    color:        var(--xm-cream);
    border-right: 2px solid var(--xm-line);
    transition:   background .35s, color .35s, padding .35s var(--xm-ease);
}

.specials .nav-link:hover {
    color:        var(--xm-gold-light);
    border-color: var(--xm-gold);
    padding-left: 22px;
}

.specials .nav-link.active {
    color:        #FFFFFF;
    background:   linear-gradient(90deg, rgba(179, 25, 46, .95), rgba(111, 14, 27, .95));
    border-color: var(--xm-gold);
}

.specials .details h3 {
    font-size: 36px;
}

.specials .details p {
    color: var(--xm-cream-soft);
}

.specials .tab-pane img {
    border:        1px solid rgba(217, 176, 126, .45);
    padding:       6px;
    border-radius: 50%;
    box-shadow:    0 20px 40px rgba(0, 0, 0, .45);
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item p {
    background:    linear-gradient(160deg, rgba(23, 58, 44, .75), rgba(7, 17, 13, .92));
    border:        1px solid var(--xm-line);
    border-radius: var(--xm-radius);
    color:         var(--xm-cream-soft);
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: var(--xm-gold);
}

.testimonials .testimonial-item .testimonial-img {
    border: 3px solid var(--xm-gold);
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
    border-right:  3px solid var(--xm-night);
    border-bottom: 3px solid var(--xm-night);
    position:      relative;
}

.gallery .gallery-item::after {
    content:        "";
    position:       absolute;
    inset:          0;
    border:         1px solid rgba(217, 176, 126, 0);
    background:     linear-gradient(180deg, transparent 55%, rgba(111, 14, 27, .45));
    opacity:        0;
    transition:     opacity .45s, border-color .45s;
    pointer-events: none;
}

.gallery .gallery-item:hover::after {
    opacity:      1;
    border-color: rgba(217, 176, 126, .7);
}

/* Lightbox backdrop in evergreen */
.goverlay {
    background: rgba(4, 10, 8, .94) !important;
}

/*--------------------------------------------------------------
# Booking section
--------------------------------------------------------------*/
#reservations {
    margin-block:  40px 70px;
    padding:       44px 36px;
    border-radius: 18px;
    border:        1px solid var(--xm-line);
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(179, 25, 46, .22), transparent 70%),
        linear-gradient(160deg, var(--xm-pine) 0%, var(--xm-night-2) 100%);
    box-shadow:    0 30px 70px rgba(0, 0, 0, .4);
}

#reservations h2 {
    font-size: 40px;
}

#reservations p {
    color: var(--xm-cream-soft);
}

#reservations .lead {
    color: var(--xm-cream);
}

@media (max-width: 576px) {
    #reservations {
        padding:       32px 18px;
        border-radius: 0;
    }
}

/*--------------------------------------------------------------
# Newsletter: wrapped like a gift
--------------------------------------------------------------*/
#newsletter {
    position:   relative;
    background:
        radial-gradient(900px 500px at 20% 0%, rgba(255, 255, 255, .06), transparent 70%),
        linear-gradient(135deg, #5A0B16 0%, #8E1424 50%, #5A0B16 100%);
    border-bottom: 1px solid rgba(241, 219, 176, .4);
}

/* Satin gold ribbon along the top edge */
#newsletter::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     4px;
    background: linear-gradient(90deg, var(--xm-gold-dark), var(--xm-gold-light) 30%, var(--xm-gold) 50%, var(--xm-gold-light) 70%, var(--xm-gold-dark));
}

#newsletter .section-title h2,
#newsletter .colour-light {
    color: var(--xm-gold-light) !important;
}

#newsletter h2.text-uppercase {
    font-family:    var(--xm-serif);
    text-transform: none !important;
    font-size:      38px;
    line-height:    1.3 !important;
}

#newsletter #mc_embed_shell {
    position:      relative;
    background:    rgba(7, 17, 13, .88);
    border:        1px solid var(--xm-line);
    border-radius: var(--xm-radius);
    padding:       26px 28px 10px;
    box-shadow:    0 30px 60px rgba(0, 0, 0, .35);
}

#newsletter #mc_embed_signup input[type=email],
#newsletter #mc_embed_signup input[type=text] {
    background:    rgba(255, 255, 255, .06);
    border:        1px solid rgba(217, 176, 126, .35);
    color:         var(--xm-cream);
    border-radius: 8px;
}

#newsletter #mc_embed_signup input:focus {
    border-color: var(--xm-gold);
    outline:      none;
}

#newsletter #mc_embed_signup .button {
    background:    linear-gradient(135deg, #F1DBB0, var(--xm-gold) 50%, var(--xm-gold-dark));
    color:         #3B0A12;
    border-radius: 999px;
    font-size:     1.15em;
    font-weight:   600;
    letter-spacing: 1px;
    height:        auto;
    padding:       12px 34px;
    transition:    transform .3s var(--xm-ease), box-shadow .3s;
}

#newsletter #mc_embed_signup .button:hover {
    transform:  translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

/*--------------------------------------------------------------
# Footer with snowy hills
--------------------------------------------------------------*/
#footer {
    position:   relative;
    background: #050C09;
}

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

#footer .footer-top {
    background:  var(--xm-night) var(--xm-flakes);
    background-size: 240px 240px;
    border-top:  0;
    border-bottom: 1px solid var(--xm-line);
}

.xm-greeting {
    margin:      -10px 0 40px;
    text-align:  center;
    font-family: "Apalu", cursive;
    font-size:   54px;
    line-height: 1.1;
    color:       var(--xm-gold);
}

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

#footer .footer-top h4 {
    color: var(--xm-gold);
}

#footer .footer-top .footer-links ul i {
    color: var(--xm-red);
}

#footer .footer-top .footer-links ul a,
#footer .footer-top .footer-info p {
    color: var(--xm-cream-soft);
}

#footer .footer-top .footer-links ul a:hover {
    color: var(--xm-gold-light);
}

#footer .footer-top .social-links a {
    background: var(--xm-pine-2);
    border:     1px solid var(--xm-line);
}

#footer .footer-top .social-links a:hover {
    background: var(--xm-red);
}

/*--------------------------------------------------------------
# Back to top: a bauble
--------------------------------------------------------------*/
.back-to-top {
    width:      46px;
    height:     46px;
    border:     0;
    background: radial-gradient(circle at 34% 30%, #F0646F 0%, var(--xm-red) 38%, var(--xm-red-deep) 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset -4px -6px 12px rgba(0, 0, 0, .25);
}

.back-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(--xm-gold-dark), var(--xm-gold-light), var(--xm-gold-dark));
}

.back-to-top i,
.back-to-top:hover i {
    color: #FFFFFF;
}

.back-to-top:hover {
    background: radial-gradient(circle at 34% 30%, #FF7A84 0%, #C42137 38%, var(--xm-red-deep) 100%);
    transform:  translateY(-3px) rotate(-8deg);
}

/*--------------------------------------------------------------
# Snow toggle + snow canvas (driven by xmas.js)
--------------------------------------------------------------*/
.xm-snow {
    position:       fixed;
    inset:          0;
    width:          100%;
    height:         100%;
    pointer-events: none;
    z-index:        995;
}

.xm-snow-toggle {
    position:        fixed;
    left:            15px;
    bottom:          15px;
    z-index:         996;
    width:           46px;
    height:          46px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    border:          1px solid var(--xm-line);
    background:      rgba(7, 17, 13, .78);
    backdrop-filter: blur(6px);
    color:           var(--xm-ice);
    font-size:       20px;
    box-shadow:      0 10px 24px rgba(0, 0, 0, .4);
    transition:      transform .5s var(--xm-ease), color .3s, opacity .3s, border-color .3s;
}

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

.xm-snow-toggle[aria-pressed="false"] {
    color:   rgba(247, 240, 227, .45);
}

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

/*--------------------------------------------------------------
# Santa's sleigh: flies across on every home page load (added by xmas.js)
--------------------------------------------------------------*/
.xm-sleigh {
    position:       fixed;
    top:            17vh;
    left:           0;
    width:          clamp(180px, 24vw, 320px);
    z-index:        1000001;   /* above everything; it never blocks clicks */
    pointer-events: none;
    filter:         drop-shadow(0 0 6px rgba(255, 214, 140, .65)) drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
    animation:      xm-fly 2.4s cubic-bezier(.42, .05, .5, .95) forwards;
}

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

/* Stardust left behind the runners */
.xm-dust {
    position:       fixed;
    z-index:        1000000;
    width:          7px;
    height:         7px;
    border-radius:  50%;
    pointer-events: none;
    background:     radial-gradient(circle, #FFF6DA 0 30%, rgba(241, 219, 176, .6) 55%, transparent 70%);
    animation:      xm-dust .9s ease-out forwards;
}

@keyframes xm-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 xm-bob {
    from { transform: translateY(-3px); }
    to   { transform: translateY(3px); }
}

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

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

@keyframes xm-star-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.82); }
}

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

@keyframes xm-sheen {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes xm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes xm-drop {
    from { opacity: 0; transform: translateY(-18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

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

/* Replaces the keyframe the Specialities tabs used from Animate.css (no longer loaded) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Respect visitors who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .xm-lights,
    .xm-lights::before,
    .xm-lights::after,
    .xm-bauble,
    .xm-hat,
    .xm-eyebrow i,
    .xm-nav-festive i,
    #hero h1 span {
        animation: none !important;
    }

    .navbar-mobile,
    .navbar-mobile ul,
    .navbar-mobile li {
        animation-duration: .01ms !important;
        animation-delay:    0s !important;
    }
}