/* 1. Hidden Checkbox Toggle */
    #menu-toggle {
      display: none;
    }

    /* 2. The floating circle button */
    .menu-btn {
      position: fixed;
      top: 22px;
      left: 22px;
      width: 50px;
      height: 50px;
      opacity: 0.9;
      background: #efe8da;
      border-radius: 50%;
      box-shadow: 0 2px 12px #0004;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1100;
      transition: box-shadow 0.2s;
    }
    .menu-btn:hover {
      box-shadow: 0 6px 24px #0007;
    }

    /* 3. The plus/X icon using pseudo-elements */
    .menu-icon {
      width: 25px;
      height: 25px;
      position: relative;
      transition: transform 0.6s ease;
    }
    .menu-icon::before,
    .menu-icon::after {
      content: '';
      position: absolute;
      left: 11px;
      width: 3px;
      height: 25px;
      background: #232323;
      border-radius: 50px;
      transition: transform 0.45s ease;
    }
    .menu-icon::before {
      transform: rotate(0deg);
    }
    .menu-icon::after {
      transform: rotate(90deg);
    }
    /* When checked, rotate icon and morph into X */
    #menu-toggle:checked + .menu-btn .menu-icon {
      transform: rotate(135deg);
    }
    #menu-toggle:checked + .menu-btn .menu-icon::before {
      transform: rotate(0deg); /* stays vertical for X */
    }
    #menu-toggle:checked + .menu-btn .menu-icon::after {
      transform: rotate(90deg); /* stays horizontal for X */
    }

    /* 4. The slide-in menu */
    .side-menu {
      position: fixed;
      top: 0;
      left: 0;
      height: auto;
      min-height: 100vh;
      width: 100vw; /* 100% of the viewport width */
      /* screen-width: 100vw; */ /*wix has this setting*/
      background-color: #B63D32; /* red brick color if pic doesn't load */
      background: url('MENUversionOUTSIDE.jpg') center/cover no-repeat;
      box-shadow: 2px 0 32px #0006;
      transform: translateX(-100%);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.55,0,0.1,1), opacity 0.32s;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 50px;
    }
    #menu-toggle:checked ~ .side-menu {
      transform: translateX(0);
      opacity: 1;
    }
    /* Menu Items */
    .side-menu .menu-item {
      text-decoration: none;
      font-size: 2rem;
      font-weight: bold;
      color: #3C1D17;
      /* margin-bottom: 32px; */
      letter-spacing: 1px;
      /* text-shadow: 1px 1px 6px #2229; */
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: color 0.15s;
      width: 100%;
    }
    .side-menu .menu-item:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .menu-item.active {
      background-color: rgba(255, 255, 255, 0.8); /* strong white highlight */
      color: #a73636; /* bold red */
    }


    .menu-clear-box {
      position: fixed;
      /* top: 0;
      left: 0; */
      /* width: 40%; */
      top: 15%;
      left: 17vw; /* 17% of view width */
      min-width: 17em;
     /* margin-left:auto;
      margin-right:auto; */
      /* height: 50%; */
      background-color: rgba(255, 255, 255, 0.2); /* translucent background */
      box-shadow: -5px 11px 7px rgba(0, 0, 0, 0.2);   /* soft drop shadow */
      /* box shadow l/r then u/d then blur */
      backdrop-filter: blur(6px);                 /* frosted glass effect */
      padding: 2rem 0rem; /* top/bottom and sides */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      z-index: 1000;
      white-space: nowrap;
    }


   /* @media (max-width: 768px) {
      .mobile_visible {
        display: block;
      }
    }

    .mobile_visible {
      display: none;
    } */

    .ribbon {
      height: 15px;
      background-color: #B63D32; /* or whatever your house sigil color is */
      position:fixed;
      top: 110px;
      left: 0;
      width: 100%;
      z-index: 5
    }

    /*scroll to top button hides when mobile menu appears */
    #scrollTopBtn {
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    #scrollTopBtn.hidden {
      opacity: 0;
      pointer-events: none; /* optional: prevents click when hidden */
    }

    /*scroll to top*/
    #scrollTopBtn {
      opacity: 1;
      animation: none;
      display: flex;
      z-index: 9999;
    }

    button.scroll-to-top-button:focus {
      outline: none;
      box-shadow:
        0 2px 5px rgba(0,0,0,0.2),
        0 0 0 3px rgba(80,150,255,0.4); /* soft blue focus halo */
    }

    button.scroll-to-top-button {
      border: 1.5px solid #ffffff; /* Subtle dark gray, tweak to taste */
      /* OR, if you want no border at all: */
      /* border: none; */
      background: rgba(255,255,255,0.9);
      /* keep other styles you want here */
    }



/* --- Scroll-to-Top Button --- */
.scroll-to-top-button {
    /* Fixed positioning in the viewport */
    position: fixed;
    bottom: 20px;  /* Distance from the bottom of the screen */
    right: 20px;   /* Distance from the right of the screen */
    z-index: 99; /* Ensure it's on top of almost everything else */

    /* Basic button styling (the circle) */
    width: 50px;         /* Diameter of the circle */
    height: 50px;        /* Diameter of the circle */
    background-color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    border-radius: 50%;  /* Makes it a perfect circle */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */

    /* Center the caret icon inside */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Smooth fade-in animation on load */
    opacity: 0; /* Start invisible */
    animation: fadeInButton 0.8s ease-out forwards; /* Animation name, duration, timing, fill-mode */
    animation-delay: 1.5s; /* Optional: delay appearance slightly after content loads */

    /* Smooth transition for hover/active states (if we add them later) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    /* Accessibility: Remove default link underline */
    text-decoration: none;
}

/* --- Caret Icon (Pure CSS) --- */
.caret-icon {
    /* Create the top line of the caret (like a V without the bottom point) */
    width: 20px;   /* Width of the caret */
    height: 20px;  /* Height of the caret */
    border: solid #333; /* Color of the caret */
    border-width: 0 3px 3px 0; /* Only right and bottom borders */
    display: inline-block; /* Allows transform */
    padding: 3px; /* Adjust padding to control caret thickness/size */
    transform: rotate(-135deg); /* Rotate to make it point up */
    /* Adjust margin-top to fine-tune vertical position within the circle */
    margin-top: 5px;
}

/* Optional: Hover effect for the button */
.scroll-to-top-button:hover {
    background-color: rgba(240, 240, 240, 0.95); /* Slightly darker white on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer; /* Indicate it's clickable */
}

/* --- Fade-in Animation for the Button --- */
@keyframes fadeInButton {
    0% { opacity: 0; }
    100% { opacity: 0.9; }
}