/* =========================================================
   rk_site.css — tidy unified build
   - No visual changes, just de-duped & organised
   - Works with rk_site.js v9 (desktop .open, mobile .is-subopen)
   ========================================================= */

/* ---------------------------------------------------------
   0) Root variables (fallbacks only; JS updates --header-fixed)
   --------------------------------------------------------- */
:root{
  --header-fixed: 55px;           /* JS syncs this to real header height */
  --sidebar-w: 240px;             /* left nav width on desktop */
  --header-offset: 95px;          /* tuned top offset for content/sidebar */
  --gap-min: 24px;                /* min content gap from sidebar */
  --gap-max: 90px;                /* max content gap from sidebar */
  --gap-fluid: clamp(var(--gap-min), 6vw, var(--gap-max));
}

/* ---------------------------------------------------------
   1) Reset / Base
   --------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family: Arial, sans-serif;
  color:#333;                     /* text colour */
  background:#f5f5f7;             /* page background */
  line-height:1.6;
  display:block !important;       /* belt & braces vs odd resets */
}
h1{ color:#0066CC; margin-bottom:1rem; }

/* ---------------------------------------------------------
   2) Header & container
   --------------------------------------------------------- */
header{
  background:#F0F7FF;             /* header bar colour */
  position:fixed; inset:0 0 auto 0;
  height:55px; z-index:1000;
}
header .container{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 1rem;
}
header nav{ flex:1; display:flex; justify-content:center; }

/* ---------------------------------------------------------
   3) Page container (below fixed header)
   --------------------------------------------------------- */
.page-container{
  width:100%; margin:0 auto;
  padding-top:165px;              /* room for header + local spacing */
}
.page-container .content-wrapper{
  max-width:1100px; margin:0 auto;
  padding:0 20px; min-width:0;
}
.page-container .page-content{ margin:0; padding:0; }

/* ---------------------------------------------------------
   4) Main navigation (base)
   --------------------------------------------------------- */
.main-nav .menu{
  list-style:none; display:flex; align-items:center;
  background:#F0F7FF;
}
.main-nav .menu > li{ position:relative; }
.main-nav .menu > li > a{
  display:block; padding:10px 15px; font-weight:bold;
  color:#003366; text-decoration:none;
}
.main-nav .menu > li > a:hover{
  background:#005EB8; color:#F0F7FF; border-radius:6px;
}
/* --- Header navigation compact mode (final) --- */
.main-nav .menu {
  justify-content: center;
}

.main-nav .menu > li {
  margin-right: 0.4rem;    /* very tight item gap */
}

.main-nav .menu > li:last-child {
  margin-right: 0;
}

/* tighten clickable padding a bit */
.main-nav .menu > li > a {
  padding: 13px 10px;      /* was 10px 15px */
}

/* ---------------------------------------------------------
   5) Dropdowns (desktop structure; visibility via JS)
   --------------------------------------------------------- */
.main-nav .menu li.has-dropdown{ position:relative; }
.main-nav .menu li.has-dropdown > .dropdown{
  display:none; position:absolute; top:100%; left:0; z-index:1000;
  background:#F0F7FF; border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  margin:0; padding:.5rem .75rem; min-width:220px; list-style:none;
  transition:opacity .2s ease, transform .2s ease;
  opacity:0; transform:translateY(5px); pointer-events:none;
}
/* visible when JS adds .open (desktop) */
.main-nav .menu li.has-dropdown.open > .dropdown{
  display:block; opacity:1; transform:translateY(0); pointer-events:auto;
}

/* nested flyouts (open to the right on desktop) */
.main-nav .menu .dropdown li.has-dropdown{ position:relative; list-style:none; }
.main-nav .menu .dropdown li.has-dropdown > .dropdown{
  display:none; position:absolute; top:0; left:100%; z-index:1100;
  background:#DAE6F5; border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,.12);
  margin:0; padding:.5rem .75rem; min-width:220px; list-style:none;
}
.main-nav .menu .dropdown li.has-dropdown.open > .dropdown{ display:block; }

/* submenu titles & links */
.main-nav .submenu-title{
  display:flex; justify-content:space-between; align-items:center;
  padding:.35rem .5rem; font-weight:bold; cursor:default; color:#003366; white-space:nowrap;
}
.main-nav .menu .dropdown a{
  color:#3570B5; text-decoration:none; display:block;
  padding:.25rem .4rem; border-radius:6px; white-space:nowrap;
}
.main-nav .menu .dropdown a:hover{ background:#f5f7fa; border-radius:8px; }

/* ---------------------------------------------------------
   6) Unified arrow indicator (CSS-only; JS adds .has-arrow)
   --------------------------------------------------------- */
header .main-nav .menu li.has-dropdown > a.has-arrow{
  display:flex; align-items:center; justify-content:space-between;
}
header .main-nav .menu li.has-dropdown > a.has-arrow::after{
  content:"▸"; margin-left:.5rem; opacity:.8; transition:transform .15s ease;
}
header .main-nav .menu li.is-subopen > a.has-arrow::after,  /* mobile toggled */
header .main-nav .menu li.open      > a.has-arrow::after{   /* desktop hover */
  transform:rotate(90deg);
}

/* ---------------------------------------------------------
   7) Multi-column flyouts (single system driven by JS classes)
   --------------------------------------------------------- */
header .main-nav .menu .dropdown.multi-column{
  display:grid; gap:8px 16px;
}
header .main-nav .menu .dropdown.multi-column.two-column{   grid-template-columns:repeat(2, minmax(160px,1fr)); }
header .main-nav .menu .dropdown.multi-column.three-column{ grid-template-columns:repeat(3, minmax(160px,1fr)); }
header .main-nav .menu .dropdown.multi-column.four-column{  grid-template-columns:repeat(4, minmax(160px,1fr)); }

/* ---------------------------------------------------------
   8) Travelogues “grid section” (kept as-is, de-duped)
   --------------------------------------------------------- */
#travelogues-mega-list{ list-style:none; }
#travelogues-mega-list *{ list-style:none; }
#travelogues-mega-list li.grid-section{ position:relative; }
#travelogues-mega-list li.grid-section > .submenu-title{
  display:flex; justify-content:space-between; align-items:center; padding:.35rem .5rem;
}
#travelogues-mega-list li.grid-section > .submenu-grid{
  display:none; position:absolute; top:0; right:100%; margin-right:.5rem;
  background:#F0F7FF; border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.12);
  list-style:none; min-width:260px;
}
#travelogues-mega-list li.grid-section.open > .submenu-grid{ display:block; }
.submenu-grid a{
  color:#3570B5; text-decoration:none; display:block;
  padding:.25rem .35rem; border-radius:6px; white-space:nowrap;
}
.submenu-grid a:hover{ background:#f5f7fa; }

/* ---------------------------------------------------------
   Travelogue content spacing (right/left padding fix)
   --------------------------------------------------------- */
body[data-section="travelogues"] #content {
  max-width: 1300px;             /* prevent text running too wide */
  margin: 0 auto;               /* centre the column */
  padding: 0 32px 2rem 32px;    /* add side padding + breathing room at bottom */
  line-height: 1.7;
}

body[data-section="travelogues"] .text-block p {
  text-align: justify;          /* optional — looks neater in long reads */
  margin-bottom: 1em;
}

body[data-section="travelogues"] h1 {
  margin-bottom: 1em;
  color: #003366;
}

/* ---------------------------------------------------------
   9) Sidebar tree (Travel Photos)
   --------------------------------------------------------- */
.sidebar-nav{
  flex:0 0 260px; align-self:flex-start;
  max-height:calc(100vh - 95px); overflow:auto;
  background:#F0F7FF; border:1px solid #ccc; border-radius:8px;
  padding:.5rem; position:sticky; top:95px;
}
@media (max-width:900px){ .sidebar-nav{ display:none; } }

.sidebar-nav ul, .sidebar-nav li{ list-style:none; }
.sidebar-nav .node{ margin:2px 0; }
.sidebar-nav .label{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.35rem .5rem; border-radius:6px; cursor:pointer; color:#003366;
}
.sidebar-nav .label:hover, .sidebar-nav a.active{ background:#005EB8; color:#F0F7FF !important; }
.sidebar-nav .is-parent > .label{ background:#DAE6F5; }
.sidebar-nav .arrow{ font-size:.8em; color:#3570B5; }
.sidebar-nav .children{ margin-left:.75rem; border-left:2px solid #DAE6F5; padding-left:.5rem; }
.sidebar-nav .collapsed > .children{ display:none; }
.sidebar-nav .children a{
  display:block; padding:.25rem .35rem; border-radius:6px;
  color:#3570B5; text-decoration:none;
}
.sidebar-nav .children a:hover{ background:#F0F7FF; }

/* ---------------------------------------------------------
   10) Layout with sidebar — desktop / wide
   --------------------------------------------------------- */
@media (min-width:1025px){
  .page-container > .container{
    max-width:none !important; margin:0 !important; padding-left:0 !important;
    padding-right:clamp(16px, 2vw, 32px) !important;         /* right gutter only */
  }
  #layout.with-sidebar{
    display:flex !important; align-items:flex-start !important; gap:0 !important;
    max-width:none !important; margin:0 !important;
  }
  #layout.with-sidebar #sidebar{
    flex:0 0 var(--sidebar-w) !important;
    margin-top:var(--header-offset) !important; margin-left:0 !important;
  }
  #layout.with-sidebar #content{
    flex:1 !important;
    margin-top:var(--header-offset) !important;
    padding-left:var(--gap-fluid) !important;     /* fluid gap between sidebar & content */
    margin-left:0 !important; display:block !important;
  }
  #layout.with-sidebar .content-inner{
    max-width:clamp(820px, 64vw, 1100px) !important; width:100% !important;
  }
}

/* ---------------------------------------------------------
   11) Sidebar off-canvas (≤1024px) — optional, unchanged look
   --------------------------------------------------------- */
.nav-overlay{ z-index:1000; }     /* panel overlay; menu panel z-index is higher */

@media (max-width:1024px){
  #layout.with-sidebar{ display:block !important; padding-inline:12px; }
  #layout.with-sidebar #content{
    margin-top:calc(var(--header-fixed) + 16px) !important;
    padding-left:0 !important; margin-left:0 !important;
  }
  #layout.with-sidebar #sidebar{
    position:fixed; top:var(--header-fixed); left:0;
    width:min(86vw, 320px);
    height:calc(100dvh - var(--header-fixed));
    overflow:auto; background:#fff; border-right:1px solid #dcdcdc;
    transform:translateX(-100%); transition:transform .2s ease; z-index:1001;
    margin:0 !important; padding:12px; border-radius:0 12px 12px 0;
  }
  #layout.with-sidebar #sidebar.is-open{ transform:translateX(0); }
  .sidebar-fab{
    position:fixed; top:calc(var(--header-fixed) + 8px); left:12px; z-index:1002;
    display:none; background:#003366; color:#fff; border:0; border-radius:999px; padding:8px 12px;
    box-shadow:0 6px 20px rgba(0,0,0,.2);
  }
  .sidebar-fab:focus-visible{ outline:2px solid #ffd700; outline-offset:2px; }
}

/* ---------------------------------------------------------
   11A) Sidebar policy override — hide on ≤1024px (keep overlay)
   --------------------------------------------------------- */
@media (max-width:1024px){
  /* Hide any sidebar variants outright */
  .sidebar-nav,
  #layout.with-sidebar #sidebar,
  .sidebar-fab{
    display: none !important;
  }
}
/* Ensure sidebar links like Wales and Northern Ireland are not bold */
aside.sidebar-nav .label a {
  font-weight: normal !important;
}

/* ---------------------------------------------------------
   12) Footer
   --------------------------------------------------------- */
footer{ text-align:center; padding:1rem 0; }
footer .social-icons{ display:flex; justify-content:center; gap:12px; margin:.5rem 0; }
footer .social-icons img{ width:60px; height:auto; display:block; }

/* ---------------------------------------------------------
   13) Gallery helpers / placeholder
   --------------------------------------------------------- */
.img-missing{ border:3px solid red !important; position:relative; display:inline-block; }
.img-missing::after{
  content:"MISSING IMAGE"; color:red; font-size:.85rem; font-weight:bold;
  background:rgba(255,255,255,.7); padding:2px 6px; border:1px solid red; border-radius:4px;
  position:absolute; top:4px; left:4px;
}
.gallery-block img.thumb{
  height:110px; width:auto; object-fit:cover; display:block;
  border-radius:8px; transition:transform .2s ease-in-out;
}
.gallery-block img.thumb:hover{ transform:scale(1.05); }

/* ---------------------------------------------------------
   14) Lightbox caption ribbon (baguetteBox)
   --------------------------------------------------------- */
#baguetteBox-overlay .full-image{ position:relative !important; display:inline-block; }
#baguetteBox-overlay .full-image img{ display:block; max-width:100%; height:auto; }
#baguetteBox-overlay .full-image figcaption,
#baguetteBox-overlay .baguetteBox-caption{
  position:absolute !important; bottom:0 !important; left:50%;
  transform:translateX(-50%); margin:0 auto; padding:6px 10px;
  background:#FFF !important; color:#333 !important;
  font-size:1.55rem; line-height:1.2; text-align:center;
  box-sizing:border-box; width:auto; max-width:75%;
}

/* ---------------------------------------------------------
   15) Mobile navigation (≤1200px) — hamburger + accordion
   --------------------------------------------------------- */
.nav-toggle{ display:none; }                /* hidden by default (desktop) */
header .main-nav .menu{ display:flex; }     /* visible by default (desktop) */

@media (max-width:1200px){
  /* who shows */
  .nav-toggle{ display:inline-flex !important; }
  header .main-nav .menu{ display:none !important; }

  /* open mobile panel */
  header .main-nav .menu.is-open{
    display:block !important;
    position:fixed !important; top:var(--header-fixed); left:0; right:0;
    background:#F0F7FF; padding:12px 16px 20px;
    max-height:calc(100dvh - var(--header-fixed));
    overflow:auto; overscroll-behavior:contain; z-index:1002;
  }

  /* default: all submenus hidden + hard reset of desktop flyout styles */
  header .main-nav .menu .dropdown{
    display:none !important; position:static !important;
    left:auto !important; right:auto !important; top:auto !important;
    min-width:0 !important; width:auto !important; max-width:none !important;
    white-space:normal !important;
    opacity:1 !important; transform:none !important; pointer-events:none !important;
    box-shadow:none !important; background:transparent !important;
  }

  /* open states (top-level and nested) */
  header .main-nav .menu > li.is-subopen   > .dropdown,
  header .main-nav .menu .dropdown li.is-subopen > .dropdown{
    display:block !important; pointer-events:auto !important; margin:.35rem 0;
  }

  /* kill multi-column on mobile */
  header .main-nav .menu .dropdown.multi-column{
    columns:auto !important; column-count:1 !important;
  }

  /* mobile arrows (works with .has-arrow too) */
  header .main-nav .menu > li.has-dropdown > a,
  header .main-nav .menu .dropdown li.has-dropdown > a{
    display:flex; align-items:center; justify-content:space-between;
  }
  header .main-nav .menu > li.has-dropdown > a::after,
  header .main-nav .menu .dropdown li.has-dropdown > a::after{
    content:"▸"; margin-left:.5rem; transition:transform .15s ease; opacity:.8;
  }
  header .main-nav .menu > li.is-subopen > a::after,
  header .main-nav .menu .dropdown li.is-subopen > a::after{
    transform:rotate(90deg);
  }
}

/* ---------------------------------------------------------
   16) Safety: allow .open to show on mobile if it leaks through
   --------------------------------------------------------- */
@media (max-width:1200px){
  header .main-nav .menu > li.open > .dropdown,
  header .main-nav .menu .dropdown li.open > .dropdown{
    display:block !important; pointer-events:auto !important;
  }
}

/* Sticky hover: remove the 1px “gap” above panels and nested panels */
header .main-nav .menu li.has-dropdown > .dropdown{
  margin-top:-1px; /* overlap the bottom border/line-height of the trigger */
}
header .main-nav .menu .dropdown li.has-dropdown > .dropdown{
  left: calc(100% - 1px); /* overlap nested panel seam */
}

/* =========================================================
   DESKTOP MEGAMENU — column widths & tighter line rhythm
   (≥1201px)
   ========================================================= */
@media (min-width:1201px){

  /* 1) Make sure open multi-column flyouts actually use grid */
  .main-nav .menu li.has-dropdown.open > .dropdown.multi-column,
  .main-nav .menu .dropdown li.has-dropdown.open > .dropdown.multi-column{
    display: grid !important;
  }

  /* 2) More realistic min widths per tier (keeps labels from wrapping) */
  .main-nav .menu .dropdown.multi-column{
    /* tighter vertical gap; keep column gap for legibility */
    row-gap: 2px;
    column-gap: 18px;
    align-content: start;
  }
  .main-nav .menu .dropdown.multi-column.two-column{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
  .main-nav .menu .dropdown.multi-column.three-column{
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  .main-nav .menu .dropdown.multi-column.four-column{
    grid-template-columns: repeat(4, minmax(180px, 1fr));
  }

  /* 3) Kill stray margins in list items (hidden culprit for ‘blank lines’) */
  .main-nav .menu .dropdown li{
    margin: 0 !important;
    list-style: none;
  }

  /* 4) Tighter link spacing to remove the ‘line space’ look */
  .main-nav .menu .dropdown a{
    padding: 4px 10px;        /* was ~.25rem .4rem */
    line-height: 1.3;         /* was ~1.6 via body */
    white-space: nowrap;      /* keep single-line labels */
    display: block;
    border-radius: 6px;
  }

  /* 5) Optional: compact the submenu section headers slightly */
  .main-nav .submenu-title{
    padding: 4px 8px;
    line-height: 1.25;
  }
}

/* ============================================
   Travelogues → nested flyouts (desktop only)
   Allow wrapping so long labels don’t force skinny columns
   ============================================ */
@media (min-width:701px){
  /* target the nested panel inside Travelogues only */
  #travelogues-mega-list .dropdown li.has-dropdown > .dropdown a,
  #travelogues-mega      .dropdown li.has-dropdown > .dropdown a,
  #travelogues-list      .dropdown li.has-dropdown > .dropdown a{
    white-space: normal !important;   /* override global nowrap */
    overflow-wrap: anywhere;          /* break long words if needed */
    word-break: normal;
    line-height: 1.25;                /* keep it tight so wrapped lines don’t look ‘gappy’ */
    padding: 4px 8px;                 /* modest vertical padding for multi-line labels */
  }
}

@media (min-width:1201px){
  #travelogues-mega-list .dropdown li.has-dropdown > .dropdown,
  #travelogues-mega      .dropdown li.has-dropdown > .dropdown,
  #travelogues-list      .dropdown li.has-dropdown > .dropdown{
    display: grid !important;                       /* ensure grid, not block */
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    column-gap: 18px;
    row-gap: 0;
    min-width: 460px;                               /* tweak 540–620 to taste */
  }
}

/* Match sticky-hover close speed with shorter transitions (desktop) */
@media (min-width:1201px){
  header .main-nav .menu > li > .dropdown,
  header .main-nav .menu .dropdown li > .dropdown{
    transition: opacity .10s ease, transform .10s ease; /* was .20s */
    will-change: opacity, transform;
  }
}

/* ---------------------------------------------------------
   Accessibility: reduced motion support
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   Accessibility: skip link (visible on focus only)
   --------------------------------------------------------- */
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:absolute; left:8px; top:8px; width:auto; height:auto;
  padding:6px 12px; background:#003366; color:#fff; z-index:2000;
  border-radius:4px;
}

/* ---------------------------------------------------------
   Accessibility: reduced motion support
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   Mobile safe-area support (iOS notch / Android cutouts)
   --------------------------------------------------------- */

/* Header: add top padding equal to notch inset if present */
header {
  padding-top: env(safe-area-inset-top);
}

/* Footer: add bottom padding equal to gesture bar inset */
footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Optional: body wrapper margin to keep content from clashing with edges */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---------------------------------------------------------
   Mobile dropdown scroll handling
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  header .main-nav ul.dropdown {
    max-height: 80vh;       /* never taller than 80% of viewport */
    overflow-y: auto;       /* allow vertical scroll within the menu */
    -webkit-overflow-scrolling: touch; /* smooth inertial scrolling on iOS */
  }
}

/* ---------------------------------------------------------
   Back-to-top button (minimal style)
   --------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1500;
  display: none;              /* hidden until scrolled */
  padding: 6px 10px;
  font-size: 20px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: #003366;        /* header/footer blue */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}
.back-to-top:focus {
  outline: 3px solid #ffd700; /* accent gold for focus */
}
.back-to-top.show {
  display: block;
  opacity: 0.9;
}
.back-to-top:hover {
  opacity: 1;
}

/* ---------------------------------------------------------
   Lightbox controls (restore arrows)
   --------------------------------------------------------- */
.baguetteBox-button {
  display: block !important;   /* ensure they show */
  opacity: 0.8;                /* visible against dark bg */
  color: #fff !important;      /* white arrows/X */
  background: none !important; /* remove unwanted backgrounds */
  border: none !important;
  outline: none !important;
}

.baguetteBox-button:hover {
  opacity: 1;
}

/* ---------------------------------------------------------
   Scroll cue gradients for long dropdowns (mobile)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  header .main-nav ul.dropdown {
    max-height: calc(100vh - 60px); /* full screen minus header height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;       /* escape parent clipping */
    top: 60px;             /* just below header */
    left: 0;
    right: 0;
    background: #f9f9f9;   /* match site background */
    z-index: 1200;         /* above content */
  }

  /* Gradients overlay */
  header .main-nav ul.dropdown::before,
  header .main-nav ul.dropdown::after {
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: none;
    z-index: 5;
  }

  header .main-nav ul.dropdown::before {
    content: "";
    top: 0;
    background: linear-gradient(to top, rgba(249,249,249,0) 0%, #f9f9f9 100%);
  }

  header .main-nav ul.dropdown::after {
    content: "";
    bottom: 0;
    background: linear-gradient(to bottom, rgba(249,249,249,0) 0%, #f9f9f9 100%);
  }
}

@media (max-width: 1024px) {
  /* Only the UL .menu should expand full height */
  header .main-nav ul.menu {
    position: fixed;
    top: 55px;                  /* just below header */
    left: 0;
    right: 0;
    bottom: 0;                  /* fill viewport */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f9f9f9;
    z-index: 1200;
  }

  /* Nested dropdowns behave normally inside */
  header .main-nav ul.dropdown {
    position: static !important;
    max-height: none !important;
    height: auto;
  }

  /* Gradient cues overlay */
  header .main-nav ul.dropdown::before,
  header .main-nav ul.dropdown::after {
    position: sticky;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: none;
    z-index: 5;
  }
  header .main-nav ul.dropdown::before {
    content: "";
    top: 0;
    background: linear-gradient(to top, rgba(249,249,249,0) 0%, #f9f9f9 100%);
  }
  header .main-nav ul.dropdown::after {
    content: "";
    bottom: 0;
    background: linear-gradient(to bottom, rgba(249,249,249,0) 0%, #f9f9f9 100%);
  }
}

.gallery-block {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;          /* space between items */
  margin: 8px 0 28px;
}
.gallery-block a {
  display: inline-block;
  margin: 2px;
}
.gallery-block img.thumb {
  border-radius: 4px;
  max-width: 150px;   /* or whatever fits your design */
  height: auto;
}
.gallery-block img.thumb {
  height: 120px;          /* set fixed height */
  width: auto;            /* let width vary naturally */
  object-fit: cover;      /* crop nicely if aspect ratio is awkward */
  border-radius: 4px;
  margin: 2px;
}

/* ---------------------------------------------------------
   Homepage layout
   --------------------------------------------------------- */

.home-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2em;
  max-width: 1000px;
  margin: 2em auto;
  flex-wrap: wrap; /* allow stacking on small screens */
}

.home-image {
  flex: 0 1 65%; /* max 2/3 width */
  display: flex;
  justify-content: center;
}

.home-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.home-text {
  flex: 1 1 30%;
  font-size: 1.2em;
  line-height: 1.6;
  min-width: 250px; /* keep readable when narrow */
}

.home-text p {
  margin-bottom: 1.5em; /* line space between paragraphs */
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .home-layout {
    flex-direction: column;
    text-align: center;
  }

  .home-text {
    font-size: 1.1em;
    line-height: 1.5;
  }
}

/* ---------------------------------------------------------
    --- Britain-specific layout elements ---
   --------------------------------------------------------- */

.county-sites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75em;
  margin-top: 1.5em;
}

.county-sites .site-thumb {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.75em;
  text-align: center;
  transition: background 0.2s ease-in-out;
}
.county-sites .site-thumb:hover {
  background: #f9f9f9;
}

.no-content {
  background: #fff8e1;
  border: 1px solid #ffd700;
  border-radius: 12px;
  padding: 1.5em;
  margin: 2em 0;
  text-align: center;
  color: #333;
  font-style: italic;
}

/* Britain county tiles */
.county-sites { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }
.site-thumb.tile { width:200px; text-align:center; }
.site-thumb .thumb-img { height:160px; width:auto; object-fit:cover; border-radius:12px; display:block; margin:0 auto; transition:transform .2s ease; }
.site-thumb .thumb-link:hover .thumb-img { transform:scale(1.05); }
.thumb-caption { margin-top:8px; font-size:0.95rem; color:#333; }


/* ---------------------------------------------------------
    --- Private Menu  ---
   --------------------------------------------------------- */

/* Private menu lock */
#menu-private a.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
#menu-private.unlocked a.disabled {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
}
/* ---------------------------------------------------------
    --- Private Menu modal  ---
   --------------------------------------------------------- */

.b4-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity 0.3s ease-in-out;
}
.b4-overlay.hidden { opacity: 0; pointer-events: none; }

.b4-dialog {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  text-align: center;
  max-width: 360px;
  width: 90%;
  color: #333;
}

.b4-dialog h2 {
  color: #003366;
  margin-bottom: 0.5rem;
}

.b4-dialog input {
  width: 80%;
  padding: 0.6rem;
  font-size: 1rem;
  margin-top: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.b4-dialog .actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.b4-dialog button {
  background: #005eb8;
  border: none;
  padding: 0.6rem 1.2rem;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.b4-dialog button:hover {
  background: #003366;
}

/* ---------------------------------------------------------
   SEARCH DROPDOWN STYLES
   Controls the autocomplete/search suggestion box UI
   --------------------------------------------------------- */

/* Main dropdown container */
.search-dropdown {
  position: absolute;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  overflow-y: auto;
  max-height: 70vh;

  /* 👇 Adjust width here
     --------------------------
     Increase min-width or max-width
     to make the dropdown wider.
     Example: 480px → 600px */
  min-width: 420px;
  max-width: 480px;
}

/* Hide dropdown when inactive */
.search-dropdown.hidden {
  display: none;
}

/* Generic result item */
.search-dropdown a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  transition: background 0.15s ease;
}

/* Hover state */
.search-dropdown a:hover {
  background: #f7f9fa;
}

/* No-results message */
.search-dropdown .no-results {
  padding: 0.5rem 0.8rem;
  color: #777;
  font-style: italic;
}

/* --- Specific layout for structured results --- */
.search-dropdown a.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-bottom: 1px solid #eee;
  padding: 0.4rem 0.7rem;
}

/* Thumbnail image */
.search-dropdown img.rk-thumb {
  /* 👇 Adjust thumbnail size here
     Increase/decrease width/height for smaller or larger icons */
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Text container beside thumbnail */
.search-dropdown .rk-info {
  flex: 1;
  line-height: 1.3;
}

/* Category label (e.g. "Around Britain") */
.search-dropdown .rk-cat {
  font-weight: 600;
  color: #555;
}

/* Result title (page or photo title) */
.search-dropdown .rk-title {
  font-size: 0.88rem;
  margin-bottom: 2px;
  color: #222;
}

/* Text excerpt (for text-based results) */
.search-dropdown .rk-excerpt {
  font-size: 0.8rem;
  color: #666;
  white-space: normal;
  margin-top: 1px;
}

/* Highlight matched term */
.search-dropdown mark {
  background: #fff59d; /* yellow highlight */
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

mark {
  border-radius: 3px;
  padding: 0 2px;
}