:root {
  --default-font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Noto Sans", serif;
  --nav-font: "Noto Sans", sans-serif;
}


/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #faf8f5;
  /* Background color for the entire website, including individual sections */
  --default-color: #49321d;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #3d2b1f;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #9a7a3a;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #6a6a6a;
  /* The default color of the main navmenu links */
  --nav-hover-color: #9a7a3a;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #6a6a6a;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #9a7a3a;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* UI utility tokens — derived from global colors, centralise repeated patterns */
:root {
  /* Semantic colors */
  --color-error: #df1529;
  --color-success: #059652;

  /* Frequently used semi-transparent tones */
  --border-color: color-mix(in srgb, var(--default-color), transparent 90%);
  /* dividers and subtle borders               */
  --bg-subtle: color-mix(in srgb, var(--default-color), transparent 94%);
  /* very faint tinted backgrounds             */
  --bg-wash: color-mix(in srgb, var(--default-color), transparent 98%);
  /* near-white tinted backgrounds             */
  --ghost-color: color-mix(in srgb, var(--default-color), transparent 95%);
  /* near-invisible decorative elements        */
  --muted-light-color: color-mix(in srgb, var(--default-color), transparent 70%);
  /* light muted text (breadcrumbs, etc.)      */
  --muted-color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* secondary / meta text                     */
  --muted-strong-color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* slightly more present muted text         */
  --text-strong-color: color-mix(in srgb, var(--default-color), transparent 30%);
  /* near-body-color text (footer links, etc.) */
  --text-emphasis-color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* strong text, close to --default-color   */
  --muted-soft-color: color-mix(in srgb, var(--default-color), transparent 60%);
  /* soft muted text (hr, social icons)       */
  --input-border-color: color-mix(in srgb, var(--default-color), transparent 70%);
  /* form field borders                      */
  --decorative-rule-color: color-mix(in srgb, var(--default-color), transparent 85%);
  /* decorative separator lines            */
  --overlay-bg: rgba(0, 0, 0, 0.2);
  /* slide/section overlay                     */
  --accent-hover: color-mix(in srgb, var(--accent-color), transparent 20%);
  /* accent color on hover (lighter)           */
  --accent-faint: color-mix(in srgb, var(--accent-color), transparent 90%);
  /* very faint accent tint                    */

  /* Font-size scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 24px;

  /* Motion */
  --transition-fast: 0.3s;
  --transition-base: 0.5s;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-base: 6px;
  --radius-lg: 8px;
  --radius-full: 50%;

  /* Elevation */
  --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.1);
  /* cards, dropdowns */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* elevated panels  */

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;

  /* Z-index scale */
  --z-content: 1;          /* decorative background elements */
  --z-above: 2;            /* content overlays on images */
  --z-loader: 3;           /* spinners / loaders */
  --z-overlay: 10;         /* section loading overlays */
  --z-dropdown: 99;        /* nav dropdowns */
  --z-header: 997;         /* sticky header */
  --z-modal: 1050;         /* modals / floating dropdowns */
  --z-mobile-nav: 9997;    /* mobile nav wrapper */
  --z-mobile-panel: 9998;  /* mobile nav panel */
  --z-mobile-toggle: 9999; /* mobile nav toggle button */
  --z-scroll-top: 99999;   /* scroll-to-top button */
  --z-lightbox: 999999;    /* fullscreen lightbox */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f7f2ec;
  /* warm tint for section alternation */
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html {
  background-color: var(--background-color);
  background-image: radial-gradient(ellipse at center,
      #ffffff 0%,
      #f5eee5 45%,
      #d9cabb 100%);
  background-attachment: fixed;
  min-height: 100%;
}

body {
  color: var(--default-color);
  background-color: transparent;
  font-family: var(--default-font);
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: 1.8;
  min-height: 100%;
}

a {
  color: var(--accent-color) !important;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%) !important;
  text-decoration: none;
}

/* Global focus-visible — accessible keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Remove default outline on mouse/touch interaction */
:focus:not(:focus-visible) {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.txthover {
  transition: 0.4s ease-in-out;
}

.txthover:hover {
  transform: scale(1.1);
}

.txtboldhover:hover {
  font-weight: bold;
}

/* Announcement date bottom right */
.announcement-date {
  right: 0;
  bottom: 0;
  font-size: 0.85em;
  color: var(--muted-color) !important;
  pointer-events: none;
}

/* Reusable themed scrollbar */
.themed-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--bg-subtle);
}

.themed-scrollbar::-webkit-scrollbar {
  width: 8px;
  background: var(--bg-subtle);
}

.themed-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: var(--radius-base);
}

.themed-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

.themed-scrollbar::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}

/* Limit announcements column height in trending section */
.trending-category {
  margin-bottom: 3rem;
}

.trending-category .col-lg-4 {
  max-height: 38rem;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .trending-category .col-lg-4 {
    max-height: none;
  }
}

.trending-category .col-lg-4::-webkit-scrollbar {
  width: 8px;
  background: var(--bg-subtle);
}

.trending-category .col-lg-4::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: var(--radius-base);
}

.trending-category .col-lg-4::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

.trending-category .col-lg-4::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}


/* Shared accent button base */
.btn-accent,
.about .content .read-more,
.comment-form form .btn-primary,
.contact .contact-form button[type=submit] {
  background-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-family: var(--nav-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 60%);
  transition: var(--transition-fast);
  cursor: pointer;
}

.btn-accent:hover,
.about .content .read-more:hover,
.comment-form form .btn-primary:hover,
.contact .contact-form button[type=submit]:hover {
  background-color: var(--accent-hover) !important;
  color: var(--contrast-color) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 50%);
  transform: translateY(-1px);
}

/* Contact Form Messages
------------------------------*/
.contact-form .error-message {
  display: none;
  background: var(--color-error);
  color: var(--contrast-color);
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact-form .sent-message {
  display: none;
  color: var(--contrast-color);
  background: var(--color-success);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: contact-form-loading 1s linear infinite;
}

@keyframes contact-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
/* Default logo size */
.logo {
  height: 80px;
  /* Default height for larger screens */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 576px) {
  .logo {
    height: 35px;
    /* Smaller height for mobile screens */
  }

  .txthover:hover {
    transform: none;
  }
}

.header {
  color: var(--default-color);
  background-color: transparent;
  padding: 10px 0;
  transition: all var(--transition-base);
  z-index: var(--z-header);
}

/* Backdrop blur lives on a pseudo-element so it does NOT create a containing
   block for position:fixed descendants (the mobile nav overlay). */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(250, 248, 245, 0.88);
  backdrop-filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.sitename {
  font-size: 1.1rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Responsive sizing for the site title.

   These must stay AFTER the unconditional .sitename rule above. A media query
   carries no extra specificity, so at equal specificity the later rule wins —
   putting them before it (where the phone rule used to live, up in the
   max-width: 576px block) meant the 1.1rem base silently overrode them at
   every width.

   Large phones and small tablets: the nav has collapsed to the burger menu
   but the title is still full size, so step it down once. */
@media (min-width: 577px) and (max-width: 1199px) {
  .sitename {
    font-size: 0.95rem;
  }
}

/* Phones: the full museum name wraps to two or three lines and competes with
   the logo for the header's width. Smaller again so it stays legible without
   pushing the burger menu off the row. */
@media (max-width: 576px) {
  .sitename {
    font-size: 0.78rem;
    line-height: 1.15;
  }
}

/* Mobile/tablet: the title shares one row with the language switcher and the
   burger, so cap it at two lines. Without the clamp a long name (or a long
   single word) grows the header vertically instead of wrapping tidily. */
@media (max-width: 1199px) {
  .sitename {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
  }
}

.header .header-social-links {
  padding-right: 15px;
}

.header .header-social-links a {
  color: var(--muted-strong-color);
  padding-left: 6px;
  display: inline-block;
  transition: var(--transition-fast);
  font-size: var(--font-base);
}

.header .header-social-links a:hover {
  color: var(--accent-color);
}

.header .header-social-links a i {
  line-height: 0px;
}

/* Language Switcher */
.lang-switcher {
  padding-left: 10px;
}

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--muted-strong-color), transparent 60%);
  border-radius: var(--radius-base);
  color: var(--muted-strong-color);
  font-size: 13px;
  font-family: var(--nav-font);
  padding: 4px 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.lang-switcher-btn:hover,
.lang-switcher-btn:focus {
  color: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
  box-shadow: none;
}

.lang-switcher-btn::after {
  font-size: 10px;
  margin-left: 2px;
}

.lang-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.lang-switcher-menu {
  min-width: 130px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  box-shadow: var(--shadow-sm);
  padding: 4px 0;
}

.lang-switcher-menu .lang-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-family: var(--nav-font);
  color: var(--nav-color);
  padding: 6px 14px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.lang-switcher-menu .lang-option:hover {
  color: var(--nav-hover-color);
  background-color: var(--accent-faint);
}

.lang-switcher-menu .lang-option.active {
  color: var(--accent-color);
  font-weight: 600;
}

.lang-switcher-menu form {
  margin: 0;
  padding: 0;
}

/* Desktop: the nav markup sits after the language switcher inside
   .header-right (so mobile gets lang-then-burger on one row), but visually the
   links belong before the flag. Reorder with flex instead of duplicating the
   nav. */
@media (min-width: 1200px) {

  /* .header-right takes all the width left over by the brand, so the nav can
     be centred inside it and the language switcher pinned to the far end.
     Without flex-grow the two would sit packed together at the right edge. */
  .header .header-right {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header .header-right .navmenu {
    order: 1;
    /* auto margins on both sides centre the links in the leftover space */
    margin-left: auto;
    margin-right: auto;
  }

  .header .header-right .lang-switcher {
    order: 2;
    flex-shrink: 0;
  }

  /* me-auto would absorb the leftover width itself and defeat the centring
     above, so drop it here. The brand keeps its natural width instead. */
  .header .header-brand {
    margin-right: 0 !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 1199px) {

  /* Single row: brand takes the leftover width, lang + burger keep theirs.
     nowrap stops the brand from bumping the controls onto a second row when
     the title is long. */
  .header .container-fluid {
    flex-wrap: nowrap;
    column-gap: 8px;
  }

  /* The brand shrinks to whatever is left. min-width: 0 is what actually lets
     it shrink below the title's intrinsic width so the text wraps instead of
     pushing the row wider. */
  .header .header-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px !important;
  }

  /* me-5 on the title link is desktop spacing for the nav that used to follow
     it; on mobile it just steals width from the title. */
  .header .header-brand>a.text-decoration-none {
    margin-right: 0 !important;
    min-width: 0;
  }

  /* Lang + burger: never shrink, stay pinned right. */
  .header .header-right {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 12px !important;
  }

  /* Hamburger last in the row */
  .header .header-right .navmenu {
    order: 9;
    display: flex;
    align-items: center;
  }

  .lang-name {
    display: none;
  }

  .lang-switcher-btn {
    padding: 4px 6px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .sitename {
    max-width: 260px;
  }

  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: var(--font-md);
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: var(--transition-fast);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: var(--font-xs);
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu>ul>li>a {
    position: relative;
  }

  .navmenu>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    height: 1.5px;
    background: var(--nav-hover-color);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
  }

  .navmenu>ul>li:hover>a::after,
  .navmenu>ul>li>a.active::after {
    transform: scaleX(1);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-sm);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: var(--font-xs);
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    transition: color 0.3s;
    z-index: var(--z-mobile-toggle);
  }

  .navmenu {
    padding: 0;
    z-index: var(--z-mobile-nav);
  }

  /* main mobile menu panel */
  .navmenu>ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: var(--radius-lg);
    background-color: var(--nav-mobile-background-color);
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.3s;
    z-index: var(--z-mobile-panel);
    box-shadow: var(--shadow-sm);
  }

  .navmenu>ul>li {
    list-style: none;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-fast);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: var(--font-xs);
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-fast);
    background-color: var(--accent-faint);
    flex-shrink: 0;
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  /* generic nested mobile submenus, excluding bootstrap dropdown-menu */
  .navmenu .dropdown ul:not(.dropdown-menu) {
    position: static;
    display: none;
    list-style: none;
    z-index: var(--z-dropdown);
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: all 0.3s ease-in-out;
  }

  .navmenu .dropdown ul:not(.dropdown-menu) li {
    list-style: none;
  }

  .navmenu .dropdown ul:not(.dropdown-menu) ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  /* Bootstrap dropdown-menu: force static/inline positioning inside the mobile
     nav overlay. On desktop (≥1200px) this block is inactive and Popper.js
     (data-bs-strategy="fixed" on the toggle element) handles positioning. */
  .navmenu li.dropdown .dropdown-menu {
    display: none;
    position: static !important;   /* intentional: overrides Popper inline styles on mobile */
    inset: auto !important;
    transform: none !important;
    float: none;
    list-style: none;
    margin: 8px 0 0;
    padding: 4px 0 8px 20px;
    min-width: 160px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    box-shadow: var(--shadow-sm);
  }

  .navmenu li.dropdown .dropdown-menu.show {
    display: block !important;
  }

  .navmenu li.dropdown .dropdown-menu li {
    list-style: none;
  }

  .navmenu li.dropdown .dropdown-menu .dropdown-item,
  .navmenu li.dropdown .dropdown-menu button.dropdown-item {
    color: var(--nav-dropdown-color);
    font-size: var(--font-base);
    font-family: var(--nav-font);
    font-weight: 500;
    padding: 8px 0;
    text-align: start;
    background: transparent;
    border: 0;
    width: 100%;
  }

  .navmenu li.dropdown .dropdown-menu .dropdown-item:hover,
  .navmenu li.dropdown .dropdown-menu button.dropdown-item:hover,
  .navmenu li.dropdown .dropdown-menu .dropdown-item:focus,
  .navmenu li.dropdown .dropdown-menu button.dropdown-item:focus {
    color: var(--nav-dropdown-hover-color);
    background-color: rgba(33, 37, 41, 0.03);
  }

  .navmenu li.dropdown .dropdown-menu .dropdown-item.logout-btn {
    color: var(--accent-color);
  }

  .navmenu li.dropdown .dropdown-menu .dropdown-divider {
    border-color: var(--border-color);
    margin: 4px 0;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: var(--z-mobile-toggle);
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }

  .navmenu .user-nav-dropdown>a {
    justify-content: flex-start;
    gap: 6px;
  }

  .navmenu .user-nav-dropdown>a.dropdown-toggle::after {
    margin-left: auto;
  }
}


/*--------------------------------------------------------------
# User nav dropdown (authenticated state)
--------------------------------------------------------------*/
.navmenu .dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 4px 0;
  font-family: var(--nav-font);
  font-size: 13px;
  background-color: var(--surface-color);
  min-width: 160px;
}

/* Prevent Popper's [data-bs-popper] from injecting left:0 which causes the
   menu to jump left on every other click. With strategy="fixed" Popper writes
   correct top/left itself; we only need to neutralise the Bootstrap default. */
.navmenu .user-nav-dropdown .dropdown-menu[data-bs-popper] {
  left: auto;
  right: 0;
}

.navmenu .dropdown-item {
  color: var(--nav-color);
  padding: 7px 16px;
}

.navmenu .dropdown-item:hover,
.navmenu .dropdown-item:focus {
  background-color: var(--accent-faint);
  color: var(--nav-hover-color);
}

.navmenu .dropdown-item.logout-btn {
  color: var(--accent-color);
  font-size: inherit;
}

.navmenu .dropdown-item.logout-btn:hover {
  background-color: var(--accent-faint);
  color: var(--accent-color);
}

.navmenu .dropdown-divider {
  border-color: var(--border-color);
  margin: 4px 0;
}

.navmenu li .dropdown-menu form {
  margin: 0;
  padding: 0;
}

.navmenu li .dropdown-menu button.dropdown-item {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/*--------------------------------------------------------------
# Modal — scrollable fix when <form> wraps modal-body + modal-footer
# Bootstrap's modal-dialog-scrollable expects .modal-body to be a
# direct flex child of .modal-content. When a <form> sits in between,
# it breaks the flex chain. Make the form behave as a flex passthrough.
--------------------------------------------------------------*/
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}

/*--------------------------------------------------------------
# Post Entry Triggers — real <button>s so cards are keyboard-reachable,
# stripped back to look exactly like the plain text/image they replaced.
--------------------------------------------------------------*/
.post-entry-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.post-entry-trigger:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.post-entry-title-trigger {
  color: var(--heading-color);
}

.post-entry-title-trigger:hover {
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Post Entry Modal — expanded post view opened from the landing page
--------------------------------------------------------------*/
.post-entry-modal .modal-content {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.post-entry-modal .modal-header {
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.post-entry-modal .modal-title {
  font-family: var(--heading-font);
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading-color);
}

.post-entry-modal .post-meta {
  margin-bottom: var(--space-xs);
}

/* Fixed ratio keeps portrait and landscape covers the same shape, and
   `contain` shows the whole artifact instead of cropping into it. */
.post-entry-modal-figure {
  aspect-ratio: 16 / 9;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.post-entry-modal-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-entry-modal-body {
  padding: var(--space-lg);
  font-size: var(--font-base);
  line-height: 1.75;
  color: var(--text-emphasis-color);
}

.post-entry-modal-body p {
  margin-bottom: var(--space-md);
}

.post-entry-modal-body p:last-child {
  margin-bottom: 0;
}

.post-entry-modal-body a {
  color: var(--accent-color);
  text-decoration: underline;
}

.post-entry-modal-body a:hover {
  color: var(--accent-hover);
}

.post-entry-modal-footer {
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-wash);
}

.post-entry-modal-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.post-entry-modal-author img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.post-entry-modal-author-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted-strong-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-entry-modal-close {
  border: 1px solid var(--input-border-color);
  color: var(--default-color);
  background-color: transparent;
  transition: background-color var(--transition-fast) ease,
              border-color var(--transition-fast) ease;
}

.post-entry-modal-close:hover {
  background-color: var(--bg-subtle);
  border-color: var(--accent-color);
  color: var(--default-color);
}

@media (max-width: 575.98px) {
  .post-entry-modal .modal-header,
  .post-entry-modal-body {
    padding: var(--space-md);
  }

  .post-entry-modal .modal-title {
    font-size: var(--font-lg);
  }

  .post-entry-modal-figure {
    aspect-ratio: 4 / 3;
  }
}

/*--------------------------------------------------------------
# Login Modal
--------------------------------------------------------------*/
#loginModal .modal-content {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--default-font);
}

#loginModal .modal-header {
  background-color: var(--heading-color);
  color: var(--contrast-color);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  padding: 16px 20px;
}

#loginModal .modal-title {
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--contrast-color);
}

#loginModal .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

#loginModal .btn-close:hover {
  opacity: 1;
}

#loginModal .modal-body {
  padding: 24px 28px;
}

#loginModal #loginError {
  font-size: 0.875rem;
  font-family: var(--nav-font);
  background-color: color-mix(in srgb, var(--color-error), transparent 90%);
  border-color: color-mix(in srgb, var(--color-error), transparent 60%);
  color: var(--color-error);
  border-radius: var(--radius-base);
  padding: 8px 12px;
}

#loginModal .form-label {
  color: var(--muted-strong-color);
  font-size: 0.875rem;
  font-family: var(--nav-font);
  margin-bottom: 4px;
}

#loginModal .form-control {
  background-color: var(--surface-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-base);
  color: var(--default-color);
  font-family: var(--default-font);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#loginModal .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-faint);
  outline: none;
}

#loginModal .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

#loginModal .form-check-label {
  color: var(--muted-color);
  font-size: 0.875rem;
  font-family: var(--nav-font);
}

#loginModal a {
  color: var(--accent-color);
  font-size: 0.875rem;
  font-family: var(--nav-font);
}

#loginModal a:hover {
  color: var(--nav-hover-color);
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: var(--font-sm);
  position: relative;
}

.footer .footer-top {
  padding-top: 28px;
  padding-bottom: 8px;
  border-top: 1px solid var(--border-color);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 8px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.footer .footer-about p {
  font-size: var(--font-sm);
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-color);
  font-size: var(--font-sm);
  color: var(--accent-color);
  margin-right: 8px;
  transition: var(--transition-fast);
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: var(--font-base);
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 0;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: var(--font-xs);
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  line-height: 1;
  transition: color 0.25s ease;
}

.footer .footer-links ul a:hover {
  color: #fff;
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 14px 0;
  border-top: 1px solid var(--border-color);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}

.footer .credits a {
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  overflow: hidden;
  background: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.6s ease-out;
}

#preloader img {
  width: auto;
  height: 100px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: var(--z-scroll-top);
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* Pre-allocate a GPU compositing layer so the browser doesn't create one
     mid-frame on mobile, which causes a full-width white flash on first paint. */
  will-change: opacity;
  transform: translateZ(0);
}

/* Accessibility: focus style for keyboard navigation */
.scroll-top:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.scroll-top i {
  font-size: var(--font-xl);
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: var(--accent-hover);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 0.65 !important;
  pointer-events: auto;
}

.scroll-top.active:hover {
  opacity: 1 !important;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.page-title h1 {
  font-size: var(--font-xl);
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: var(--muted-light-color);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  padding: 1rem 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  margin-bottom: 2rem;
  position: relative;
}

.section-title .section-title-container {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
}

@media (max-width: 767px) {
  .section-title .section-title-container {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }
}

.section-title h2 {
  font-size: 40px;
  font-weight: 400;
}

.section-title p {
  margin-bottom: 0;
}

.section-title p a {
  color: var(--default-color);
  text-transform: uppercase;
  font-size: var(--font-xs);
  letter-spacing: 0.5px;
  border-bottom: 1.5px solid var(--default-color);
  font-family: var(--nav-font);
  font-weight: 500;
  padding-bottom: 2px;
}

/*--------------------------------------------------------------
# Slider Section
--------------------------------------------------------------*/
.slider {
  background-color: transparent;
}

.slider .swiper-pagination .swiper-pagination-bullet {
  background-color: color-mix(in srgb, var(--default-color) 90%, white 15%);
  width: 18px;
  height: 18px;
}

.slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  width: 22px;
  height: 22px;
}

.slider .swiper-wrapper {
  align-items: stretch;
}

.slider .swiper-slide {
  height: 600px;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  overflow: hidden;
  background-color: var(--slider-dark-bg);
}

.slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 65%);
  z-index: 1;
}

@media (max-width: 576px) {
  .slider .swiper-slide {
    height: 300px;
    min-height: 0;
    background-size: contain;
  }
}

.slider .swiper-button-prev:after,
.slider .swiper-button-next:after {
  font-size: var(--font-xl);
  color: var(--muted-color);
}

.slider .content {
  padding: 60px 80px;
  max-width: 700px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 576px) {
  .slider .content {
    padding: 24px 20px;
  }
}

.slider .content a,
.slider .content h2,
.slider .content p {
  color: var(--default-color);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.55),
    1px -1px 0 rgba(0, 0, 0, 0.55),
    -1px 1px 0 rgba(0, 0, 0, 0.55),
    1px 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/*--------------------------------------------------------------
# Trending Category Section
--------------------------------------------------------------*/
.trending-category .post-entry {
  margin-bottom: 30px;
}

.trending-category .post-entry img {
  margin-bottom: 30px;
}

.trending-category .post-entry h2 {
  margin-bottom: 20px;
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.2;
}
.moderator-panel-page .panel-label {
  font-size: 1.1rem;
}
.moderator-panel-page .panel-page-title {
  font-size: 2.1rem;
}
.moderator-panel-page .panel-card-title {
  font-size: 1.3rem;
}
.moderator-panel-page .panel-btn-primary {
  font-size: 1.15rem;
}

.trending-category .post-entry h2 a {
  color: var(--heading-color);
}

.trending-category .post-entry h2 a:hover {
  text-decoration: underline;
}

.trending-category .post-entry.lg h2 {
  font-size: 40px;
  line-height: 1;
}

.trending-category .custom-border {
  border-color: var(--border-color) !important;
}

@media (max-width: 768px) {
  .trending-category .custom-border {
    border: none !important;
  }
}

.trending-category .trending {
  border: 1px solid var(--border-color);
}

.trending-category .trending>h3 {
  color: var(--default-color);
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.trending-category .trending .trending-post {
  padding: 0;
  margin: 0;
}

.trending-category .trending .trending-post li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: block;
}

.trending-category .trending .trending-post li a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  z-index: var(--z-above);
}

.trending-category .trending .trending-post li a .number {
  position: absolute;
  z-index: var(--z-content);
  font-size: 5rem;
  left: -10px;
  top: -20px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--ghost-color);
}

.trending-category .trending .trending-post li a h3 {
  font-size: var(--font-md);
  color: var(--default-color);
  transition: 0.3s;
}

.trending-category .trending .trending-post li a .author {
  color: var(--muted-color);
  font-weight: 500;
}

.trending-category .trending .trending-post li a:hover h3 {
  color: var(--default-color);
  text-decoration: underline;
}

.trending-category .trending .trending-post li:last-child a {
  border-bottom: none;
}

/*--------------------------------------------------------------
# Announcements Section (standalone)
--------------------------------------------------------------*/
.announcements .trending {
  border: 1px solid var(--border-color);
}

.announcements .trending>h3 {
  color: var(--default-color);
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.announcements .trending .trending-post {
  padding: 0;
  margin: 0;
}

.announcements .trending .trending-post li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: block;
}

.announcements .trending .trending-post li a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  z-index: var(--z-above);
}

.announcements .trending .trending-post li a h3 {
  font-size: var(--font-md);
  color: var(--default-color);
  transition: 0.3s;
}

.announcements .trending .trending-post li a .author {
  color: var(--muted-color);
  font-weight: 500;
}

.announcements .trending .trending-post li a:hover h3 {
  color: var(--default-color);
  text-decoration: underline;
}

.announcements .trending .trending-post li:last-child a {
  border-bottom: none;
}

/* Image overlay */
.image-overlay-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: fit-content;
}

.image-loading-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--bg-subtle);
}

.image-overlay-container.image-loading-wrapper {
  display: inline-block;
}

.image-loading-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
}

.image-loading-wrapper.is-loaded img {
  opacity: 1;
}

.image-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-top-color: var(--default-color);
  animation: image-loading-spin 0.7s linear infinite;
  z-index: var(--z-loader);
}

.image-loading-wrapper.is-loaded .image-loading-spinner {
  opacity: 0;
  visibility: hidden;
}

@keyframes image-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.image-overlay-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-fast) ease;
}

.image-overlay-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition-fast) ease;
  pointer-events: none;
}

.image-overlay-container:hover img {
  transform: scale(1.05);
}

/*--------------------------------------------------------------
# Shared post-meta / author / post-list — used across all category sections
--------------------------------------------------------------*/
.post-meta {
  font-size: 11px;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-color);
  margin-bottom: 10px;
}

.author .photo {
  margin-right: 10px;
}

.author .photo img {
  width: 40px;
  border-radius: var(--radius-full);
  margin-bottom: 0;
}

.author .name h3 {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-family: var(--default-font);
}

.post-list h2,
.post-list h2 a {
  color: var(--heading-color);
  margin-bottom: 20px;
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.2;
}

.post-list h2 a:hover {
  text-decoration: underline;
}

.post-list.lg h2 {
  font-size: 40px;
  line-height: 1;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content .who-we-are {
  text-transform: uppercase;
  margin-bottom: 15px;
  color: var(--muted-strong-color);
}

.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--font-base);
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: var(--font-md);
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  padding-right: 19px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

.about .about-images img {
  border-radius: 10px;
}

.history-content p {
  text-align: justify;
}

/* Image cards sit in a centred grid below each section's text. A short final
   row stays centred rather than left-aligned (justify-content-center on the
   row), which suits sections with two or three images. */
.history-gallery {
  margin-top: 2rem;
}

.history-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.history-card:hover,
.history-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .12));
}

.history-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.history-card-img:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: -3px;
}

.history-card-caption {
  padding: .6rem .75rem;
  margin: 0;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--muted-strong-color);
  text-align: center;
}

/*--------------------------------------------------------------
# Announcement / Event Detail
--------------------------------------------------------------*/
.announcement-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* "Booking open" pill, used in the homepage list and on event cards. */
.ann-badge-booking {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.event-panel {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.event-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 .85rem;
}

.event-facts dt {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-color);
  margin-top: .75rem;
}

.event-facts dt:first-child {
  margin-top: 0;
}

.event-facts dd {
  margin: .15rem 0 0;
  color: var(--default-color);
}

/* Honeypot: off-screen rather than display:none, since some bots skip
   hidden inputs but will still fill a visually-positioned one. */
.rsvp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Sidebar announcement browser — jump between announcements without
   returning to the homepage. Fixed height so the panel can't push the
   booking form off-screen on an archive with many entries. */
.ann-browser-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: var(--space-sm);
}

.ann-browser-group {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-color);
  margin: var(--space-md) 0 var(--space-sm);
}

.ann-browser-group:first-child {
  margin-top: 0;
}

.ann-browser-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .85rem;
  margin-bottom: var(--space-sm);
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  /* Events carry an accent spine so they read as a different kind of
     item than plain notices at a glance. */
  border-left: 3px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--default-color);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.ann-browser-item:last-child {
  margin-bottom: 0;
}

.ann-browser-item.is-event {
  border-left-color: var(--accent-color);
}

.ann-browser-item.is-past {
  border-left-color: var(--muted-light-color);
}

.ann-browser-item.is-past .ann-browser-title {
  color: var(--muted-strong-color);
}

.ann-browser-item:hover,
.ann-browser-item:focus-visible {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
  color: var(--default-color);
}

.ann-browser-item:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.ann-browser-date,
.ann-browser-place {
  font-size: .78rem;
  color: var(--muted-color);
}

/* Activities documenting an event read as an outbound link, not a sibling
   announcement, so they get the accent treatment rather than a date spine. */
.ann-browser-item.is-activity {
  border-left-color: var(--accent-color);
}

.ann-browser-item.is-activity .ann-browser-place {
  color: var(--accent-color);
  font-weight: 600;
}

.ann-browser-flag {
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-top: .15rem;
}

.ann-browser-title {
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.35;
}

.rsvp-success-icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-sm);
  position: relative;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  padding: 30px;
  height: 100%;
}

@media (max-width: 576px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-base);
  flex-shrink: 0;
}

.team .team-member .pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 576px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: var(--font-lg);
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: var(--decorative-rule-color);
  bottom: 0;
  left: 0;
}

@media (max-width: 576px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: var(--font-sm);
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 576px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: var(--bg-subtle);
  transition: ease-in-out var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: var(--text-emphasis-color);
  font-size: var(--font-base);
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: var(--shadow-md);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: var(--ghost-color);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: var(--muted-strong-color);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: var(--font-base);
  margin-right: 8px;
  line-height: 0;
  color: var(--muted-strong-color);
}

.blog-details .meta-top a {
  color: var(--muted-strong-color);
  font-size: var(--font-sm);
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.blog-details .meta-bottom i {
  color: var(--muted-strong-color);
  display: inline;
}

.blog-details .meta-bottom a {
  color: var(--muted-strong-color);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: var(--font-sm);
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: var(--font-sm);
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: var(--font-base);
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: var(--font-base);
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: var(--text-emphasis-color);
}

.blog-comments .comment h5 .reply i {
  font-size: var(--font-lg);
}

.blog-comments .comment time {
  display: block;
  font-size: var(--font-sm);
  color: var(--muted-strong-color);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: var(--shadow-md);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: var(--font-sm);
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid var(--input-border-color);
  font-size: var(--font-sm);
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: var(--muted-color);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: var(--font-sm);
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: var(--muted-color);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  padding: 10px 20px;
}

/* .comment-form form .btn-primary:hover {
 
} */

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
}

.blog-posts .post-img img {
  transition: 0.5s;
}

.blog-posts .post-date {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.blog-posts .post-content {
  padding: 30px;
}

.blog-posts .post-title {
  font-size: var(--font-lg);
  color: var(--heading-color);
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.blog-posts .meta i {
  font-size: var(--font-base);
  color: var(--accent-color);
}

.blog-posts .meta span {
  font-size: 15px;
  color: var(--muted-strong-color);
}

.blog-posts p {
  margin-top: 20px;
}

.blog-posts hr {
  color: var(--muted-soft-color);
  margin-bottom: 15px;
}

.blog-posts .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: var(--font-base);
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
  color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: var(--muted-strong-color);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--muted-strong-color);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: var(--font-lg);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: var(--font-md);
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: var(--font-sm);
}

.contact .contact-form {
  height: 100%;
}

.contact .contact-form input[type=text],
.contact .contact-form input[type=email],
.contact .contact-form textarea {
  font-size: var(--font-sm);
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: var(--input-border-color);
}

.contact .contact-form input[type=text]:focus,
.contact .contact-form input[type=email]:focus,
.contact .contact-form textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 88%);
  background-color: #fff;
}

.contact .contact-form input[type=text]::placeholder,
.contact .contact-form input[type=email]::placeholder,
.contact .contact-form textarea::placeholder {
  color: var(--muted-light-color);
}

.contact .contact-form button[type=submit] {
  padding: 10px 30px;
}

/* .contact .contact-form button[type=submit]:hover {

} */

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  margin: 40px 0 30px 0;
}

.widget-title {
  color: var(--heading-color);
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 0 0 0 10px;
  margin: 0 0 20px 0;
  border-left: 4px solid var(--accent-color);
}

.widget-item {
  margin-bottom: 30px;
  background-color: var(--bg-wash);
  border: 1px solid var(--border-color);
  padding: 30px;
  border-radius: 5px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: var(--font-xl);
  margin-bottom: 0px;
  padding: 0;
  color: var(--text-emphasis-color);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: var(--muted-soft-color);
  margin-right: 5px;
  font-size: var(--font-md);
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: var(--text-strong-color);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid var(--input-border-color);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
  /* focus ring handled by parent :focus-within */
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: var(--font-base);
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: var(--font-sm);
  color: var(--muted-color);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: var(--bg-subtle);
  color: var(--text-strong-color);
  border-radius: 50px;
  font-size: var(--font-sm);
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: var(--muted-soft-color);
  font-size: var(--font-sm);
}

.blog-author-widget-2 img {
  max-width: 160px;
}

.blog-author-widget-2 h4 {
  font-weight: 600;
  font-size: var(--font-xl);
  margin: 15px 0 0 0;
  padding: 0;
  color: var(--text-emphasis-color);
}

.blog-author-widget-2 .social-links {
  margin: 5px 0;
}

.blog-author-widget-2 .social-links a {
  color: var(--muted-soft-color);
  margin: 0 3px;
  font-size: var(--font-md);
}

.blog-author-widget-2 .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget-2 p {
  font-style: italic;
  color: var(--text-strong-color);
  margin: 10px 0 0 0;
}

/*--------------------------------------------------------------
# Gallery Page
--------------------------------------------------------------*/

/* Sidebar */
.gallery-page aside.col-lg-3 {
  align-self: flex-start;
}

.gallery-sidebar {
  position: sticky;
  top: 80px;
}

.sidebar-label {
  display: block;
  font-family: var(--nav-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-color);
  margin-bottom: 10px;
}

/* Collapsible sidebar sections (Categories / Sort).

   The toggle is a <button> so it is keyboard-operable, but it has to read as
   the plain label it replaced, hence the button reset. */
.sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.sidebar-toggle-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Active-selection hints shown while the panel is closed. */
.sidebar-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 0.65rem;
  letter-spacing: 0;
}

.sidebar-toggle-value {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .sidebar-toggle-badge sets display: inline-flex, which would otherwise win
   over the [hidden] attribute the JS toggles. */
.sidebar-toggle-badge[hidden],
.sidebar-toggle-value[hidden] {
  display: none;
}

.sidebar-toggle-icon {
  flex-shrink: 0;
  font-size: 0.8rem;
  transition: transform var(--transition-fast);
}

/* Bootstrap sets aria-expanded on the toggle itself, so the chevron can follow
   the panel state without any extra JS. */
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  color: var(--accent-color);
}

.sidebar-toggle:focus {
  outline: none;
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* Desktop/tablet: no collapsing at all. The panel is forced open and the
   toggle degrades to a static label. !important is needed to beat Bootstrap's
   own .collapse { display: none } when the panel lacks .show. */
@media (min-width: 768px) {
  .sidebar-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .sidebar-toggle {
    cursor: default;
    pointer-events: none;
  }

  .sidebar-toggle-icon,
  .sidebar-toggle-badge,
  .sidebar-toggle-value {
    display: none;
  }
}

/* Phones and small tablets: the sections are stacked and usually collapsed, so
   the desktop spacing between them reads as dead space. Tighten the gaps and
   let the toggle's own padding provide the tap target instead of margins. */
@media (max-width: 767.98px) {

  /* The sidebar is a flex column here, so the 24px gap inherited from the
     tablet rules applies between every section. */
  .gallery-sidebar {
    gap: 4px !important;
    padding: 14px !important;
  }

  /* Each section is full width once stacked; flex-basis 220px would otherwise
     try to sit them side by side at wider phone sizes. */
  .gallery-filter,
  .gallery-sort {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
  }

  .gallery-search {
    margin-bottom: 4px !important;
  }

  /* The label's bottom margin is spacing for an open panel; when the panel is
     closed it is pure gap between two headers. Move it onto the panel. */
  .sidebar-toggle {
    margin-bottom: 0;
    padding: 9px 0;
  }

  .sidebar-collapse.show {
    padding-bottom: 4px;
  }

  /* Separator between the two collapsed rows, so tightening the gap does not
     make them read as one block. */
  .gallery-sort .sidebar-toggle {
    border-top: 1px solid var(--border-color);
  }
}

/* Search */
.gallery-search .form-control {
  background-color: var(--surface-color);
  border: 1px solid var(--input-border-color);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--default-color);
  font-size: 0.9rem;
  padding: 8px 12px;
}

.gallery-search .form-control:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.gallery-search-btn {
  background-color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--contrast-color);
  padding: 8px 14px;
  transition: background-color var(--transition-fast);
}

.gallery-search-btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--contrast-color);
}

.gallery-clear-btn {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: 0.82rem;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gallery-clear-btn:hover,
.gallery-clear-btn:focus,
.gallery-clear-btn:focus-visible,
.gallery-clear-btn:active,
.gallery-clear-btn:active:focus {
  background-color: transparent;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.gallery-clear-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: none;
}

.gallery-clear-btn:focus,
.gallery-clear-btn:active {
  box-shadow: none;
}

/* Filter list */
.filter-list {
  border-top: 1px solid var(--border-color);
}

.filter-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--default-color);
  font-size: 1.1rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.filter-link:hover,
.filter-link.active {
  color: var(--accent-color);
}

.filter-link.active {
  font-weight: 600;
}

.filter-count {
  font-size: 0.78rem;
  color: var(--muted-color);
  background-color: var(--bg-subtle);
  border-radius: 20px;
  padding: 1px 8px;
  font-family: var(--nav-font);
}

.filter-link.active .filter-count,
.filter-link:hover .filter-count {
  background-color: var(--accent-faint);
  color: var(--accent-color);
}

/* Results bar */
.gallery-results-bar {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.results-count {
  font-family: var(--nav-font);
  font-size: 0.85rem;
  color: var(--muted-color);
}

.clear-filters {
  font-family: var(--nav-font);
  font-size: 0.82rem;
  color: var(--muted-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.clear-filters:hover {
  color: var(--accent-color);
}

/* Cards */
.gallery-card {
  background-color: var(--surface-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.gallery-card-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

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

.gallery-card:hover .gallery-card-img {
  transform: scale(1.04);
}

.gallery-card-img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  font-size: 2.5rem;
}

.gallery-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--nav-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
}

.gallery-card-body {
  padding: 16px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gallery-card-title {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.gallery-card-title a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.gallery-card-title a:hover {
  color: var(--accent-color);
}

.gallery-card-meta {
  font-family: var(--nav-font);
  font-size: 0.78rem;
  color: var(--muted-color);
  margin-bottom: 8px;
}

.gallery-card-desc {
  font-size: 0.9rem;
  color: var(--muted-strong-color);
  margin: 0;
  line-height: 1.6;
}

/* Empty state */
.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted-color);
}

.gallery-btn-reset {
  background-color: transparent;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  border-radius: var(--radius-sm);
  padding: 7px 20px;
  font-family: var(--nav-font);
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.gallery-btn-reset:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/* Pagination */
.gallery-pagination .page-link {
  color: var(--default-color);
  border-color: var(--border-color);
  background-color: var(--surface-color);
  font-family: var(--nav-font);
  font-size: 0.9rem;
  padding: 7px 14px;
  transition: all var(--transition-fast);
}

.gallery-pagination .page-link:hover,
.gallery-pagination .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

/* Loading overlay */
.gallery-loading-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: color-mix(in srgb, var(--background-color), transparent 15%);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.gallery-loading-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.gallery-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-spinner-ring {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--accent-faint);
  border-top-color: var(--accent-color);
  animation: gallery-spin 0.75s linear infinite;
}

@keyframes gallery-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Infinite-scroll load-more indicator */
.gallery-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 8px;
  color: var(--default-color);
  font-family: var(--nav-font);
  font-size: 0.9rem;
}

.gallery-load-more-text {
  opacity: 0.75;
}

.gallery-spinner-ring-sm {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--accent-faint);
  border-top-color: var(--accent-color);
  animation: gallery-spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* ── Item detail page ── */
.item-detail-back {
  display: inline-flex;
  align-items: center;
  font-family: var(--nav-font);
  font-size: 0.88rem;
  color: var(--accent-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.item-detail-back:hover {
  color: var(--accent-hover);
}

.item-detail-img-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-subtle);
}

.item-detail-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.item-detail-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  font-size: 4rem;
  color: var(--muted-color);
}

.item-detail-badge {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--nav-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.item-detail-title {
  font-family: var(--heading-font);
  font-size: 2rem;
  color: var(--heading-color);
  margin-bottom: 12px;
  line-height: 1.3;
}

.item-detail-meta {
  font-family: var(--nav-font);
  font-size: 0.9rem;
  color: var(--muted-color);
  margin-bottom: 20px;
}

.item-detail-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--default-color);
}

/* Responsive: sidebar becomes top bar on mobile */
@media (max-width: 991px) {
  .gallery-sidebar {
    position: static;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    background-color: var(--surface-color);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
  }

  .gallery-search {
    flex: 1 1 220px;
    margin-bottom: 0 !important;
  }

  .gallery-filter {
    flex: 1 1 220px;
  }

  .gallery-sort {
    flex: 1 1 220px;
    margin-top: 0 !important;
  }

  .filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: none;
  }

  .filter-link {
    border-bottom: none;
    padding: 4px 12px;
    background-color: var(--bg-subtle);
    border-radius: 20px;
    font-size: 0.85rem;
  }

  .filter-link.active {
    background-color: var(--accent-faint);
    color: var(--accent-color);
  }

  .filter-count {
    display: none;
  }
}

/* ==========================================================================
   Moderator Panel
   ========================================================================== */

.moderator-panel-page .main { background: var(--bg-subtle); }

/* ── Layout ── */
.panel-section { padding: 2rem 0 4rem; min-height:60vh; }
.panel-page-title { font-size: 1.5rem; font-weight: 700; color: var(--heading-color); margin: 0; }

/* ── Sidebar nav ──
   Two columns from lg up; below that the sidebar collapses behind the
   "Sections" button and stacks above the content. */
.panel-layout { display: block; }
.panel-tab-content { padding-top: 1.5rem; min-width: 0; }

.panel-sidebar { margin-bottom: 1rem; }
.panel-nav-group + .panel-nav-group { margin-top: 1.25rem; }
.panel-nav-group-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-color); padding: 0 .75rem .35rem; opacity: .75;
}
.panel-nav-link {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .75rem; border: none; border-radius: 8px;
  background: transparent; color: var(--default-color);
  font-size: .92rem; font-weight: 500; text-align: left;
  border-left: 3px solid transparent;
}
.panel-nav-link .bi { font-size: 1rem; color: var(--muted-color); flex-shrink: 0; }
.panel-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-nav-badge { font-size: .68rem; flex-shrink: 0; }
.panel-nav-link:hover:not(.active) { background: var(--bg-subtle); color: var(--heading-color); }
.panel-nav-link.active {
  background: var(--surface-color); color: var(--heading-color); font-weight: 600;
  border-left-color: var(--heading-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.panel-nav-link.active .bi { color: var(--heading-color); }

/* The panel is a dense workspace: tables, not prose. From lg up let it break
   out of container-lg's 1140px so the columns get the room they need, capped
   so it does not sprawl on an ultrawide display. */
@media (min-width: 992px) {
  .moderator-panel-page .panel-section > .container-lg {
    max-width: min(1600px, 100% - 3rem);
  }
  .panel-layout {
    display: grid;
    /* Size the sidebar to its widest label rather than a fixed width, so no
       nav item is ever clipped. Bounded so an unusually long translation can
       never crowd out the table beside it. */
    grid-template-columns: fit-content(22rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  .panel-sidebar {
    position: sticky; top: 1.5rem; margin-bottom: 0;
    /* overflow-y alone would compute overflow-x to auto as well, which is what
       produced a horizontal scrollbar; clip the x-axis explicitly. */
    max-height: calc(100vh - 3rem); overflow-y: auto; overflow-x: hidden;
    padding: 1rem .5rem;
    background: var(--surface-color); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  }
  /* Labels set the column width here, so let them run to their natural size
     instead of truncating into the fixed track they used to share. */
  .panel-sidebar .panel-nav-text { overflow: visible; text-overflow: clip; }
  .panel-sidebar .panel-nav-link { width: auto; min-width: 13rem; }
  .panel-tab-content { padding-top: 0; }
}

/* ── Language tabs (bilingual CRUD modal fields) ── */
.panel-lang-tabs { border-bottom: 2px solid var(--decorative-rule-color); margin-bottom: 1rem; }
.panel-lang-tabs .nav-link {
  color: var(--muted-color); border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; font-weight: 500; padding: .4rem .9rem; font-size: .9rem;
}
.panel-lang-tabs .nav-link.active { color: var(--heading-color); border-bottom-color: var(--heading-color); background: transparent; font-weight: 600; }
.panel-lang-tabs .nav-link:hover:not(.active) { color: var(--heading-color); border-bottom-color: var(--input-border-color); }

/* ── Cards ── */
.panel-card {
  background: var(--surface-color); border-radius: 12px; padding: 1.5rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .07); border: 1px solid var(--border-color);
}
.panel-card-title {
  font-size: 1.05rem; font-weight: 600; color: var(--heading-color);
  margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--bg-subtle);
}

/* ── Stat cards ──
   Compact horizontal tiles: the icon sits beside the figure rather than
   stacked above it, so ten counters read as one dense strip instead of
   three tall rows pushing the actual working area below the fold. */
.stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .6rem;
  row-gap: 0;
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  padding: .7rem .8rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
  border: 1px solid var(--border-color);
}

.stat-icon {
  grid-row: 1 / span 2;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent-color);
  opacity: .85;
}

.stat-nums {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.1;
}

.stat-total {
  font-size: .8rem;
  color: var(--muted-light-color);
  font-weight: 400;
}

.stat-label {
  font-size: .72rem;
  color: var(--muted-color);
  line-height: 1.25;
}

.stat-card-alert .stat-icon,
.stat-card-alert .stat-nums { color: var(--color-error); }

/* ── Traffic / analytics ── */
.traffic-figure {
  background: var(--bg-wash);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: .75rem .9rem;
  height: 100%;
}

.traffic-figure-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.15;
}

.traffic-figure-label {
  font-size: .75rem;
  color: var(--muted-color);
  margin-top: .1rem;
}

.traffic-trend {
  font-size: .75rem;
  font-weight: 600;
  vertical-align: middle;
}

.traffic-trend.is-up { color: var(--color-success); }
.traffic-trend.is-down { color: var(--color-error); }

/* Chart.js needs a bounded parent to size against, or a responsive canvas
   grows on every resize event. */
.traffic-chart-wrap {
  position: relative;
  height: 230px;
}

.traffic-subtitle {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-color);
  margin-bottom: .5rem;
}

.traffic-table td {
  padding: .35rem .5rem;
  font-size: .85rem;
  vertical-align: middle;
}

.traffic-table a {
  color: var(--default-color);
  text-decoration: none;
}

.traffic-table a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* ── Labels ── */
.panel-label {
  font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-strong-color); margin-bottom: .3rem; display: block;
}

/* ── Buttons ── */
.panel-btn-primary { background: var(--default-color); border-color: var(--default-color); color: var(--contrast-color); font-size: 1rem; }
.panel-btn-primary:hover, .panel-btn-primary:focus { background: var(--heading-color); border-color: var(--heading-color); color: var(--contrast-color); }
.panel-btn-outline { border: 1px solid var(--heading-color); color: var(--heading-color); background: transparent; font-size: .9rem; }
.panel-btn-outline:hover { background: var(--heading-color); color: var(--contrast-color); }
.panel-btn-ghost-danger { border: 1px solid var(--color-error); color: var(--color-error); background: transparent; font-size: .9rem; }
.panel-btn-ghost-danger:hover { background: var(--color-error); color: var(--contrast-color); }

/* ── Icon buttons (table actions) ── */
.panel-icon-btn {
  background: transparent; border: 1px solid var(--border-color); color: var(--muted-strong-color);
  width: 30px; height: 30px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-base); font-size: .875rem; margin-left: 4px;
  transition: all var(--transition-fast);
}
.panel-icon-btn:hover { background: var(--bg-subtle); color: var(--heading-color); border-color: var(--input-border-color); }
.panel-icon-btn-danger:hover { background: var(--color-error); color: var(--contrast-color); border-color: var(--color-error); }

/* ── Badges ── */
.panel-badge-success { background: #d4edda; color: #155724; font-weight: 500; }
.panel-badge-muted   { background: #e9ecef; color: #6c757d; font-weight: 500; }

/* ── Unread message row ── */
.msg-unread td { font-weight: 600; }
.msg-unread td:first-child::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--default-color);
  margin-right: .45rem;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* ── Table ── */
.panel-table { font-size: 1rem; }
.panel-table thead th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-color); font-weight: 600; background: var(--bg-wash);
  border-bottom: 1px solid var(--border-color); padding: .7rem 1rem;
}
.panel-table tbody tr { border-bottom: 1px solid var(--bg-subtle); }
.panel-table tbody tr:last-child { border-bottom: none; }
.panel-table tbody td { padding: .8rem 1rem; vertical-align: middle; color: var(--heading-color); }

/* ── Thumbnails ── */
.panel-thumb {
  width: 38px; height: 38px; object-fit: cover;
  border-radius: var(--radius-base); flex-shrink: 0;
}
.panel-thumb-placeholder {
  width: 38px; height: 38px; border-radius: var(--radius-base);
  background: var(--bg-subtle); display: flex; align-items: center;
  justify-content: center; color: var(--muted-light-color); font-size: 1rem; flex-shrink: 0;
}

/* ── Profile photo ── */
.profile-photo-wrap {
  width: 170px; height: 170px; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--decorative-rule-color);
}
.profile-photo { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-placeholder {
  width: 100%; height: 100%; background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--input-border-color); font-size: 2.8rem;
}

/* ── Modal image preview ── */
.panel-img-preview {
  max-width: 500px; max-height: 500px; object-fit: cover;
  border-radius: var(--radius-base); border: 1px solid var(--decorative-rule-color);
}

/* ── Error alert inside modal ── */
.panel-form-errors { font-size: 1rem; }

/* ── Textareas ──
   Let the moderator drag longer fields taller. Initial height comes from each
   widget's own `rows` (2–6 across the panel forms), so a summary field stays
   compact while a long description starts roomy; the bounds only stop a drag
   from collapsing the field or running past the modal. */
.moderator-panel-page textarea {
  resize: vertical;
  min-height: 4.5rem;
  max-height: 40rem;
}

/* ── Bookings tab ── */
.booking-event + .booking-event {
  margin-top: .5rem;
}

.booking-event-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .65rem .75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: left;
  font-size: .9rem;
  color: var(--default-color);
}

.booking-event-head:hover {
  border-color: var(--input-border-color);
}

.booking-event-title {
  font-weight: 600;
  color: var(--heading-color);
  min-width: 0;
}

.booking-caret {
  font-size: .8rem;
  color: var(--muted-color);
}

.booking-event-when,
.booking-event-count {
  font-size: .82rem;
  white-space: nowrap;
}

.booking-event-body {
  padding: .85rem .75rem .25rem;
}

.booking-row {
  display: grid;
  grid-template-columns: 1fr auto auto minmax(9rem, auto) auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--bg-subtle);
}

.booking-row:last-child {
  border-bottom: none;
}

/* Cancelled bookings stay visible as a record but read as inactive. */
.booking-row-cancelled {
  opacity: .55;
}

.booking-row-cancelled .booking-who .fw-medium {
  text-decoration: line-through;
}

.booking-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .booking-event-head {
    grid-template-columns: auto 1fr;
    row-gap: .25rem;
  }
  .booking-event-when,
  .booking-event-count {
    grid-column: 2;
  }
  .booking-row {
    grid-template-columns: 1fr auto;
    row-gap: .4rem;
  }
  .booking-who {
    grid-column: 1 / -1;
  }
}

/* ── Sortable column headers ── */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--heading-color); }
.sort-icon { font-size: .75rem; opacity: .35; transition: opacity var(--transition-fast); vertical-align: middle; }
.sortable-th:hover .sort-icon { opacity: .7; }
.sortable-th.sort-asc  .sort-icon,
.sortable-th.sort-desc .sort-icon { opacity: 1; color: var(--heading-color); }

/* ── Activities section ── */

.activities-section{
  min-height: 60vh;
}

/* ── Activity image lightbox ── */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  padding: .4rem .7rem;
  border: none;
  border-radius: 6px;
  opacity: .35;
  transition: opacity .18s, background .18s;
  z-index: 10;
}
.lightbox-nav:hover,
.lightbox-nav:focus-visible { opacity: 1; background: rgba(255,255,255,.3); color: #fff; outline: none; }
.lightbox-nav.d-none-soft { visibility: hidden; pointer-events: none; }
.lightbox-nav-prev { left: 1rem; }
.lightbox-nav-next { right: 1rem; }
.lightbox-img-wrap { max-height: calc(100dvh - 120px); display: flex; align-items: center; justify-content: center; }
.lightbox-img-wrap img { max-height: calc(100dvh - 120px); max-width: 100%; object-fit: contain; }
.noselect { user-select: none; -webkit-user-select: none; pointer-events: none; }
/* ── Error pages (404) ── */
.error-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0;
}

.error-code {
  font-family: var(--heading-font);
  font-size: clamp(72px, 18vw, 140px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-md);
  color: var(--accent-color);
  /* The digits are decoration behind the real message, so keep them light. */
  opacity: .35;
  letter-spacing: .04em;
}

.error-title {
  font-family: var(--heading-font);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: var(--space-md);
}

.error-text {
  color: var(--muted-strong-color);
  font-size: var(--font-md);
  max-width: 48ch;
  margin: 0 auto;
}