@charset "UTF-8";

/* =========================================================
   OUR BENCH — GLOBAL STYLES (AI-friendly, fully flex-based)
   ========================================================= */
:root{
  --brand-orange: #cc2a17; /* accessible orange-red (headings/links/accents) */
  --brand-gold:   #d49500; /* warm gold (nav hovers, highlights, bars) */
  --brand-green:  #2E4A34; /* deep green (buttons/skip link background) */
  --text:         #000000;
  --bg:           #ffffff;
 --nav-height: 72px;  /* desktop nav height */
}
@media (max-width:768px){ :root{ --nav-height: 96px; } }  /* mobile nav height */
/* ===== Base & resets ===== */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

body,td,th{
  font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;
  color:var(--text);
  background:var(--bg);
  margin:0;
  text-align: left;
}

a{ color:var(--brand-orange); text-decoration:none; }
a:visited,a:hover,a:active{ color:var(--brand-orange); }
a:focus-visible{ outline:2px solid var(--brand-gold); outline-offset:2px; }

.img-full{ width:100%; margin:0 auto; display:block; clear:both; }

/* =========================================================
   LAYOUT (Flex refactor)
   ========================================================= */
.container{ background:#fff; padding-top: 20px;  } - /* Push content below the nav, so the logo is never hidden */

/* Generic flex row: replaces old .row + floats */
.row{
  display:flex;
  flex-wrap:wrap;
  gap:0;              /* adjust if you want spacing between columns */
  width:100%;
  margin:0 auto;
}
.row.blockDisplay{ display:flex; } /* kept for compatibility */

/* 50/50 columns (replaces .column_half floats) */
.column_half{
  flex:1 1 50%;
  min-width:280px;    /* prevents over-squeeze on small screens */
}

/* 3-up columns (replaces .columns floats) */
.columns{
  flex:1 1 33.333%;
  min-width:260px;    /* wraps gracefully on smaller screens */
  padding:10px 0;
  margin-top:15px;
  color:var(--text);
  text-align:left;
}
.container .columns h4{ text-align:center; color:var(--brand-orange); }

/* Optional: two-column content wrapper (left/right) */
.content-flex{
  display:flex;
  flex-wrap:wrap;
  gap:10px;           /* space between left/right */
  align-items:flex-start;
}
.content-flex .left_article{ flex:1 1 58%; min-width:280px; }
.content-flex .right_article{ flex:0 1 40%; min-width:260px; }

/* Center block of text */
.center-text {
  text-align: center;
}

/* Center images responsively */
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;   /* ensures image scales in smaller screens */
  height: auto;      /* keeps aspect ratio */
}

/* =========================================================
   HEADER 1: LOGO STRIP
   ========================================================= */
.primary_header{
  background:#fff;
    clear:both;
	padding: 10 px 0; 
	margin: 0 auto;
}
.primary_header img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================================
   HEADER 2: MAIN NAV (Top menu under logo)
   ========================================================= */
.site-navbar{
  position: sticky; /* or fixed */
  top: 0;
  background: #fff;
  z-index: 1999;
}
.site-navbar .site-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0; }
.site-navbar .site-menu > li{ position:relative; }
.site-navbar .site-menu > li > a{
  padding:10px 0;
  font-size:16px;
  color:#000;
  display:inline-block;
}
.site-navbar .site-menu > li > a > span{
  padding:5px 30px;
  border-radius:20px;
  transition:.3s ease;
  position:relative;
}
/* Active + hover pill */
.site-navbar .site-menu > li.active > a > span,
.site-navbar .site-menu > li > a:hover > span{
  background:var(--brand-gold);
  color:#000;
}
/* Animated underline */
.site-navbar .site-menu > li > a > span::after{
  content:"";
  position:absolute;
  left:50%; bottom:-5px;
  width:0; height:2px;
  background:var(--brand-orange);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.site-navbar .site-menu > li.active > a > span::after,
.site-navbar .site-menu > li > a:hover > span::after{ width:50%; }

/* Dropdown */
.site-navbar .site-menu .has-children > a span{ padding-right:30px; }
.site-navbar .site-menu .has-children > a span:before{
  content:"↓"; font-size:16px;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
}
.site-navbar .site-menu .has-children .dropdown{
  visibility:hidden; opacity:0;
  position:absolute; top:100%; left:0;
  min-width:200px;
  background:#fff;
  border-top:2px solid var(--brand-gold);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.1);
  transition:.2s ease;
  margin-top:20px;
}
.site-navbar .site-menu .has-children:hover .dropdown{
  visibility:visible; opacity:1; margin-top:0;
}
.site-navbar .site-menu .has-children .dropdown > li{ list-style:none; }
.site-navbar .site-menu .has-children .dropdown a{
  display:block; padding:7px 20px; color:var(--brand-orange);
}
.site-navbar .site-menu .has-children .dropdown a:hover{ background:#fafafb; }

/* =========================================================
   ACCESSIBILITY: Skip link (always visible, top-right)
   ========================================================= */
.skip-link{
  position:fixed; top:10px; right:10px;
  background:var(--brand-green);
  color:#fff;
  padding:8px 14px;
  font-size:14px;
  border-radius:4px;
  z-index:9999;
  transition:background .3s ease, color .3s ease;
}
.skip-link:hover,.skip-link:focus{
  background:var(--brand-gold);
  color:var(--brand-green);
}

/* =========================================================
   HEADINGS (consistent, left aligned, readable)
   ========================================================= */
.container .left_article h1,
.container .left_article h2,
.container .left_article h3{
  padding-left:5%;
  padding-right:5%;
  margin:0;
  text-align:left;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.4em;
}
.container .left_article h1{
  color:var(--brand-orange);
  font-size:1.6em;
  margin-top:1.5em;
  margin-bottom:.5em;
}
.container .left_article h2{
  color:var(--brand-green);
  font-size:1.3em;
  margin-top:1.2em;
  margin-bottom:.5em;
}
.container .left_article h3{
  color:var(--brand-gold);
  font-size:1.1em;
  margin-top:1em;
  margin-bottom:.5em;
}

/* =========================================================
   SECONDARY HEADER BAR (GOLD) — FLEX
   ========================================================= */
.secondary_header{
  width:100%;
  padding:10px 0;
  background:var(--brand-gold);
}
.container .secondary_header ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0;
  list-style:none;
  margin:0;
  padding:0 0 15px 0;
  width:100%;
}
.secondary_header ul li{
  flex:1 1 16%;
  min-width:140px;
  color:#fff;
  font-family:"Source Sans Pro",sans-serif;
  letter-spacing:1px;
  text-align:center;
  position:relative;
  padding:8px 6px;
  transition:color .3s ease;
  cursor:pointer;
}
.secondary_header ul li:hover{ color:var(--brand-orange); }
.secondary_header ul li::after{
  content:"";
  position:absolute; left:50%; bottom:-5px;
  width:0; height:2px;
  background:var(--brand-orange);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.secondary_header ul li:hover::after{ width:50%; }
.secondary_header ul li a{ color:inherit; text-decoration:none; display:inline-block; padding:.25rem .5rem; }

/* =========================================================
   CONTENT
   ========================================================= */
.left_article{
  background:#fff;
  width:100%;
  padding-bottom:15px;
  color:#000;
}
.container .left_article p{
  padding-left:5%;
  padding-right:5%;
  text-align:left;
  margin:30px 0 15px;
	}
.container .left_article ul{
  padding-left:10%;
  padding-right:5%;
  text-align:left;
  list-style-position: inside;   /* bullets hang outside text block */

}

.container .left_article li {
  margin: 0.4em 0;                /* a little vertical spacing */
  line-height: 1.5;               /* improves readability */
}


/* Right-side feature list (used inside .content-flex) */
.right_article{
  background:#f6f6f6;
  padding:10px 0;
}
.container .right_article ul{ margin:0; padding:0; list-style:none; }
.right_article ul li{
  text-align:center;
  background:#b3b3b3; color:#fff;
  width:90%; margin:10px auto; padding:15px 0;
  border-left:5px solid #717070;
  font-weight:bold;
  transition:background .3s ease;
}
.right_article ul li:hover{ background:#717070; }

/* =========================================================
   ORDERED LISTS (match site style)
   ========================================================= */
.container .left_article ol {
  padding-left: 10%;          /* indent to match unordered lists */
  padding-right: 5%;
  margin: 30px 0 15px;        /* same vertical rhythm as <p> */
  text-align: left;
  list-style-position: outside; /* numbers aligned neatly */
  counter-reset: item;        /* allows custom number styling */
}

.container .left_article ol li {
  margin: 0.4em 0;            /* consistent vertical spacing */
  line-height: 1.5;           /* easy to read */
  font-size: 1rem;            /* same as body text */
  color: var(--text);
}

.container .left_article ol li::marker {
  color: var(--brand-orange); /* orange numbers like your link/brand accent */
  font-weight: bold;
}


/* =========================================================
   MENU2 (Horizontal, matches top nav)
   ========================================================= */
.menu2{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* center across page */
  align-items:center;
  list-style:none;
  margin:20px auto;
  padding:0;
  gap:0;                    /* no spacing between by default */
}

.menu2 li{
  margin:0 5px;
  position:relative;
}

.menu2 li a{
  display:inline-block;
  padding:8px 20px;
  font-size:16px;
  color:#000;
  border-radius:20px;
  text-decoration:none;
  transition:all .3s ease;
  position:relative;
}

/* Hover + active pill background */
.menu2 li a:hover,
.menu2 li a:focus{
  background:var(--brand-gold);
  color:#000;
}

/* Orange underline effect */
.menu2 li a::after{
  content:"";
  position:absolute;
  left:50%; bottom:-5px;
  width:0; height:2px;
  background:var(--brand-orange);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.menu2 li a:hover::after,
.menu2 li a:focus::after{
  width:50%;
}

/* Responsive tweak: stack on very small screens */
@media (max-width:600px){
  .menu2{ flex-direction:column; align-items:center; }
  .menu2 li{ margin:6px 0; }
}
/* =========================================================
   Photo Gallery
   ========================================================= */

.nf-gallery-wrap * { 
  box-sizing: border-box; 
}

.nf-gallery-wrap h1, 
.nf-gallery-wrap h2 {
  margin: 1.2em 0 .5em;
  line-height: 1.35;
  text-transform: none;
}

.nf-gallery-wrap p { 
  margin: .6em 0 1em; 
  line-height: 1.6; 
  text-align: left; 
}

.nf-gallery { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 10px; /* Reduced gap */
  margin: 10px 0; 
  padding: 0; 
}

@media (min-width: 640px) { 
  .nf-gallery { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

@media (min-width: 1024px) { 
  .nf-gallery { 
    grid-template-columns: repeat(3, 1fr); 
  } 
}

.nf-item { 
  background: #fff; 
  border: 1px solid #eee; 
  border-radius: 8px; /* Slightly smaller for a compact look */
  padding: 4px; /* Reduced from 12px */
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.nf-item img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 6px; /* Smaller radius to match compact style */
}

.nf-item figcaption { 
  width: 100%; 
  margin-top: 6px; /* Reduced from 8px */
  font-size: 0.9rem; /* Slightly smaller text */
  line-height: 1.4; 
  text-align: left; 
}

.nf-gallery-wrap ul { 
  margin-left: 1.5rem; /* Slightly reduced */
  padding-left: 1rem; 
  list-style: disc outside;
	 text-align: left;
}

.nf-gallery-wrap li + li { 
  margin-top: 0.3rem; 
}


/* =========================================================
   FOOTER & META
   ========================================================= */
.footer{ background:var(--brand-gold); }
.title{
  font-weight:bold;
  font-family:"Source Sans Pro",sans-serif;
  text-align:center;
  color:#fff;
  letter-spacing:2px;
}
.footnote{
  text-align:center;
  color:#C9DA68;
  font-variant:small-caps;
  font-weight:lighter;
  font-size:xx-small;
}
.copyright{
  text-align:center;
  background:var(--brand-gold);
  color:#fff;
  text-transform:uppercase;
  font-weight:lighter;
  letter-spacing:2px;
  font-family:"Source Sans Pro",sans-serif;
}

/* =========================================================
	GALLERY
   ========================================================= */

/* Responsive gallery grid (1 → 2 → 3 up) */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 20px 0;
  padding: 0;
}

@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.gallery-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make images fluid with gentle rounding */
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Caption styling, left-aligned for readability */
.gallery-item figcaption {
  width: 100%;
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

/* Optional: remove justification for easier reading site-wide (or scope to container) */
.gallery,
.gallery-item figcaption,
.left_article p {
  text-align: left;
}
/* =========================================================
   SOCIAL — FLEX
   ========================================================= */
.social{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;              /* spacing between icons */
  text-align:center;
  margin:0;
  width:100%;
  background:#fff;
  clear:both;
  padding:7px 0;
}
.social_icon{
  flex:0 1 100px;        /* icon blocks that wrap neatly */
  transition:opacity .3s linear;
}
.container .social .social_icon:hover{ cursor:pointer; opacity:.5; }
.thumbnail{ width:100px; height:100px; border-radius:200px; margin:0 auto; display:block; }
.thumbnail_align{ text-align:center; margin-left:auto; margin-right:auto; }

/* =========================================================
   UTILITIES
   ========================================================= */
.noDisplay{ display:none; }
.bookalet{ width:90%; margin:0 auto; }

/* Support legacy <textbox> or .textbox */
textbox,.textbox{
  text-align:left;
  padding-left:0;
  width:90%;
  margin:0 auto;
}

/* =========================================================
   CONTACT BOX
   ========================================================= */
.contact-box {
  background: #f9f9f9;
  border: 2px solid var(--brand-gold);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 650px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.contact-box h2 {
  color: var(--brand-green);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.contact-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-box li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.contact-box .contact-icon {
  font-size: 1.3rem;
  margin-right: 8px;
  color: var(--brand-orange);
}

.contact-box a {
  color: var(--brand-orange);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-box a:hover,
.contact-box a:focus {
  color: var(--brand-gold);
}

/* =========================================================
   MOBILE NAV (Off-canvas) — unchanged structure
   ========================================================= */
.site-mobile-menu{
  width:300px; position:fixed; right:0; z-index:2000;
  padding-top:20px; background:#fff; height:100vh;
  transform:translateX(110%);
  box-shadow:-10px 0 20px -10px rgba(0,0,0,.1);
  transition:.3s all ease-in-out;
}
.offcanvas-menu .site-mobile-menu{ transform:translateX(0%); }
.site-mobile-menu .site-mobile-menu-header{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.site-mobile-menu .site-mobile-menu-close span{
  font-size:30px; display:inline-block; padding-left:10px; line-height:1; cursor:pointer; transition:.3s;
}
.site-mobile-menu .site-mobile-menu-logo a{ display:inline-block; text-transform:uppercase; }
.site-mobile-menu .site-mobile-menu-logo a img{ max-width:70px; }

.site-mobile-menu .site-mobile-menu-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative;
  padding:0 20px 150px; height:calc(100vh - 52px);
}
.site-mobile-menu .site-nav-wrap{ padding:0; margin:0; list-style:none; position:relative; }
.site-mobile-menu .site-nav-wrap a{
  padding:10px 20px; display:block; position:relative; color:#212529;
}
.site-mobile-menu .site-nav-wrap a:hover{ color:var(--brand-gold); }
.site-mobile-menu .site-nav-wrap li{ position:relative; display:block; }
.site-mobile-menu .site-nav-wrap li.active > a{ color:var(--brand-gold); }
.site-mobile-menu .site-nav-wrap .arrow-collapse{
  position:absolute; right:0; top:10px; z-index:20;
  width:36px; height:36px; text-align:center; cursor:pointer; border-radius:50%;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse:hover{ background:#f8f9fa; }
.site-mobile-menu .site-nav-wrap .arrow-collapse:before{
  font-size:12px; z-index:20; font-family:"icomoon"; content:"\f078";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-180deg);
  transition:.3s;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before{ transform:translate(-50%,-50%); }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
/* Secondary header: show 2 per row on phones; 1 per row on very small screens */
@media (max-width: 600px){
  .secondary_header ul{ justify-content:center; }
  .secondary_header ul li{ flex:1 1 45%; min-width:140px; }
}
@media (max-width: 360px){
  .secondary_header ul li{ flex:1 1 100%; min-width:0; }
}

/* Columns: allow smoother wrap on narrow viewports */
@media (max-width: 768px){
  .column_half{ flex:1 1 100%; }
  .columns{ flex:1 1 100%; }
}

/* Optional tighter spacing for content-flex on narrow screens */
@media (max-width: 900px){
  .content-flex{ gap:12px; }
  .content-flex .left_article{ flex-basis:100%; }
  .content-flex .right_article{ flex-basis:100%; }
}

/* =========================================================
   LIGHT BOX 
   ========================================================= */

/* Lightbox2 Branding Tweaks for Our Bench */
.lb-data .lb-caption {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--brand-orange);   /* orange captions */
  font-weight: 600;
}

.lb-data .lb-number {
  font-size: 0.85rem;
  color: var(--brand-green);    /* green image counter */
  margin-top: 0.2rem;
}

.lb-outerContainer {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Navigation arrows */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover {
  opacity: 1;
}

/* Loading / close icon adjustments */
.lb-loader,
.lb-close {
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
.lb-close {
  background: var(--brand-gold);   /* gold close button */
  border-radius: 50%;
  padding: 6px;
}
/* Thumbnail zoom effect for galleries */
.js-favs img,
.nf-gallery img,
.gallery img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  border-radius: 8px;
}

/* Hover effect */
.js-favs img:hover,
.nf-gallery img:hover,
.gallery img:hover {
  transform: scale(1.05); /* gentle zoom */
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* soft shadow */
}

/* Keep captions always visible */
.nf-item figcaption,
.gallery-item figcaption,
.js-favs li h4,
.js-favs li p {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--brand-orange); /* brand colour for consistency */
}


/* =========================================================
  Facilities at a glance - highlight box
   ========================================================= */
/* Facilities at a Glance box */
.facilities-box {
  background: #fff8e5;              /* soft gold background */
  border: 2px solid var(--brand-gold);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem auto 2rem;
  max-width: 800px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.facilities-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facilities-box li {
  margin: 0.6rem 0;
  font-size: 1.05rem;
  line-height: 1.5;
  padding-left: 1.8rem;
  position: relative;
  color: var(--text);
}

.facilities-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-orange);
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.5;
}
/* =========================================================
   Standout Single Image (Responsive & Centered)
   ========================================================= */
/* === Standout Single Images (utility) === */
.standout-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: auto;          /* natural size, don’t force full width */
  max-width: 80%;       /* keep it within viewport on desktops */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

@media (max-width: 640px) {
  .standout-center {
    max-width: 95%;
  }
}

.standout-center + figcaption {
  text-align: center;
  font-size: 1rem;
  margin-top: 0.5rem;
  color: #444;
}

/* =========================================================
  Map container
   ========================================================= */

.map-container {
  position: relative;
  width: 100%;
  max-width: 900px;       /* optional: limit max width */
  margin: 2rem auto;      /* centre container */
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================================================
  Blockquote on review page
   ========================================================= */
blockquote {
  margin: 1.5em auto;
  padding: 1em 1.5em;
  border-left: 4px solid #ccc;
  font-style: italic;
  background: #fafafa;
  position: relative;
}

blockquote cite {
  display: block;
  margin-top: 0.75em;
  text-align: right;
  font-style: normal;
  font-weight: bold;
  color: #555;
}

blockquote cite::before {
  content: "— ";  /* automatically adds the dash */
  color: #888;
}