/* /staging/css/site-modern.css
   Modern site styling for pages that opt-in (no legacy container assumptions)
*/

:root{
  --cg-ocean:#0b2b33;
  --cg-teal:#0f738a;
  --cg-bg:#eef4f7;
  --cg-card:#ffffff;
  --cg-text:#0b2b33;
  --cg-muted: rgba(11,43,51,.68);
  --cg-border: rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }

body.cg-modern{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--cg-text);
  background: var(--cg-bg);
}

/* Header */
.cg-header-band{
  background: var(--cg-ocean);
  color: #fff;
}
.cg-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 16px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:16px;
}
.cg-logo-crest img{ display:block; }

.cg-brand-center{
  text-align:center;
  min-width:0;
}
.cg-brand-image{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
}
.cg-brand-tagline{
  margin-top:6px;
  font-size:14px;
  color: rgba(255,255,255,.86);
}

.cg-header-right{
  text-align:right;
  white-space:nowrap;
  font-size:13px;
  color: rgba(255,255,255,.92);
}

/* Nav */
.cg-nav-band{
  background: var(--cg-teal);
}
.cg-nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.cg-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}
.cg-nav a{
  display:block;
  padding:12px 8px;
  color:#fff;
  text-decoration:none;
}
.cg-nav a:hover{ text-decoration: underline; }

.cg-has-sub{ position:relative; }
.cg-subnav{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  background:#ffffff;
  border:1px solid var(--cg-border);
  border-radius:10px;
  padding:8px 0;
  min-width:240px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  z-index:50;
}
.cg-subnav a{
  color: var(--cg-text);
  padding:10px 14px;
}
.cg-has-sub:hover .cg-subnav{ display:block; }

/* Main layout */
.cg-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 36px;
}

.cg-hero{
  background:#0f738a;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
}
.cg-hero > * { width:100%; }

.cg-card{
  background:var(--cg-card);
  border:1px solid var(--cg-border);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:16px;
}

.cg-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width:980px){
  .cg-grid{ grid-template-columns: 340px 1fr; }
}

.cg-title{
  margin:0;
  font-size:26px;
  line-height:1.15;
}
.cg-sub{
  margin:8px 0 0;
  color: var(--cg-muted);
}


.cg-muted{ color:#036f9d; font-size:14px; }

.cg-rates-wrap{ overflow-x:auto; }
.cg-rates{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}
.cg-rates td{
  border:1px solid var(--cg-border);
  padding:10px;
  vertical-align:middle;
  background:#fff;
}
.cg-highlight{
  background:#e9fbff !important;
  font-weight:600;
}

/* Footer */
.cg-footer-band{
  background: var(--cg-ocean);
  color: rgba(255,255,255,.90);
}
.cg-footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px;
}
.cg-footer-note{ margin-top:8px; opacity:.85; }

/* --- utilities used by condo pages --- */
.cg-spacer{ margin-top:14px; }
.cg-h2{ margin:0 0 3px; font-size:18px; color:#0f738a; }
.cg-prose p{ margin:10px 0; }
.cg-center{ text-align:center; }
.cg-list{ margin:8px 0 0 18px; padding:0; }
.cg-clear{ clear:both; }

/* --- header right mini contact --- */
.cg-contact-mini-label{ font-size:12px; opacity:.85; }
.cg-contact-mini-phone{ font-size:13px; }

/* --- calendar containment --- */
.cg-calendar-box{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-bottom: 14px;

  /* keep legacy floats from escaping */
  overflow: auto;

  /* prevents “run forever” visual spill */
  max-height: 520px;
}

/* ==========================================================
   FULL-BLEED BANDS (edge-to-edge header/nav/footer)
   ========================================================== */
.cg-header-band,
.cg-nav-band,
.cg-footer-band{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
}

/* ==========================================================
   HEADER INNER: true edge alignment
   Logo left, brand centered, weather/phone right
   ========================================================== */
.cg-header-band .cg-header-inner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(12px, 2vw, 28px) !important;
  padding-right: clamp(12px, 2vw, 28px) !important;

  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
}

.cg-header-band .cg-logo-crest{ justify-self: start !important; }
.cg-header-band .cg-brand-center{ justify-self: center !important; text-align: center !important; }
.cg-header-band .cg-header-right{ justify-self: end !important; text-align: right !important; }

/* ==========================================================
   AVAILABILITY CALENDAR (calendarinc.php output)
   Targets: .calendarbox > table.calfor
   - Tight spacing between title and Month/Year
   - Month/Year uses SUBTITLE blue
   - Keeps occupancy colors
   ========================================================== */

/* Hide extra months if calendar outputs more than one */
.calendarbox table.calfor:not(:first-of-type){
  display: none !important;
}

/* Calendar wrapper */
.calendarbox{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: center;
}

/* "Availability calendar" headline ONLY */
body.page-condo.cg-modern .calendarbox > div:first-child{
  margin-bottom: 4px !important; /* 🔧 tighten gap */
}

body.page-condo.cg-modern .calendarbox > div:first-child > strong{
  font-family: 'Raleway', sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;     /* 🔧 slightly tighter */
  color: #0f738a !important;
  font-weight: 300 !important;
}

/* Calendar container may scroll horizontally instead of squishing */
.calendari{
  width: 100% !important;
  max-width: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Calendar table */
.calendarbox table.calfor{
  min-width: 736px !important;
  width: 100% !important;
  margin: 0 auto !important;      /* 🔧 remove extra top margin */
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 6px 6px !important;
  border: 0 !important;
}

/* Month / Year header (e.g. January 2026) */
.calendarbox table.calfor td.cacatl{
  padding: 6px 12px !important;   /* 🔧 tighter vertical padding */
  text-align: center !important;

  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.3 !important;    /* 🔧 tighter */
  color: #036f9d !important;      /* --cg-subtitle */
  font-weight: 400 !important;

  border: 0 !important;
  background: transparent !important;
}

/* Day-of-week header row */
.calendarbox table.calfor td.dh{
  padding: 10px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* Calendar day cells */
.calendarbox table.calfor td:not(.cacatl):not(.dh){
  padding: 8px !important;
  height: 88px !important;
  line-height: 1.1 !important;
  font-size: 15px !important;
  vertical-align: top !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}

/* Ensure content inside day cells aligns correctly */
.calendarbox table.calfor td:not(.cacatl):not(.dh) *{
  vertical-align: top !important;
}


/* Condo 2 Rates title (matches Availability calendar) */
body.page-condo.cg-modern .cg-condo-rates-title{
  margin: 12px 0 6px 0;          /* balanced spacing between sections */
  text-align: center;
}

body.page-condo.cg-modern .cg-condo-rates-title > strong{
  font-family: 'Raleway', sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  color: #0f738a !important;
  font-weight: 300 !important;
}


/* ==========================================================
   CONDO PAGES (body.page-condo.cg-modern)
   ========================================================== */

body.page-condo.cg-modern .cg-header-nav-wrapper{
  width: var(--cg-slide-width, 100%);
  max-width: var(--cg-slide-width, 1060px);
  margin: 0 auto;
  position: relative;

  overflow: visible;          /* DO NOT CLIP NAVBAR */
  isolation: isolate;
  background: transparent;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;

  z-index: 999999;
}

/* Force slideshow to match --cg-slide-width exactly */
body.page-condo.cg-modern .cg-hero{
  width: var(--cg-slide-width, 100%);
  max-width: var(--cg-slide-width, 1060px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.page-condo.cg-modern #cgSlideshow,
body.page-condo.cg-modern .cg-slideshow.cg-xfade{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove outline/border around slideshow */
body.page-condo.cg-modern .cg-hero,
body.page-condo.cg-modern #cgSlideshow,
body.page-condo.cg-modern .cg-slideshow.cg-xfade{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body.page-condo.cg-modern .cg-hero:focus,
body.page-condo.cg-modern #cgSlideshow:focus,
body.page-condo.cg-modern .cg-slideshow.cg-xfade:focus,
body.page-condo.cg-modern .cg-hero:active,
body.page-condo.cg-modern #cgSlideshow:active,
body.page-condo.cg-modern .cg-slideshow.cg-xfade:active{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Datepicker popups — ensure they appear above slideshow/card */
.ui-datepicker{ z-index: 3000000 !important; }
.daterangepicker{ z-index: 3000000 !important; }
.flatpickr-calendar{ z-index: 3000000 !important; }

/* jQuery UI DATEPICKER — EXACT index look (force-win) */
body.page-condo.cg-modern .ui-datepicker,
body.page-condo.cg-modern .ui-datepicker.ui-widget{
  z-index: 3000000 !important;
  width: 18.5em !important;
  padding: 12px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.20) !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: 0.2px !important;
}

body.page-condo.cg-modern .ui-datepicker .ui-widget-header{
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg,#26a8c1 0%,#219ebb 55%,#1b86a0 78%,#166a80 100%) !important;
  color: rgba(255,255,255,0.98) !important;
  padding: 10px 10px !important;
}

body.page-condo.cg-modern .ui-datepicker .ui-datepicker-title{
  font-family: 'Raleway', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,0.98) !important;
}

body.page-condo.cg-modern .ui-datepicker .ui-datepicker-prev,
body.page-condo.cg-modern .ui-datepicker .ui-datepicker-next{
  top: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
}
body.page-condo.cg-modern .ui-datepicker .ui-datepicker-prev:hover,
body.page-condo.cg-modern .ui-datepicker .ui-datepicker-next:hover{
  background: rgba(255,255,255,0.18) !important;
}
body.page-condo.cg-modern .ui-datepicker .ui-icon{
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}
body.page-condo.cg-modern .ui-datepicker .ui-datepicker-prev .ui-icon::before{
  content: "‹";
  color: rgba(255,255,255,0.95);
  font-size: 18px;
  line-height: 1;
}
body.page-condo.cg-modern .ui-datepicker .ui-datepicker-next .ui-icon::before{
  content: "›";
  color: rgba(255,255,255,0.95);
  font-size: 18px;
  line-height: 1;
}
body.page-condo.cg-modern .ui-datepicker th{
  padding: 10px 0 6px 0 !important;
  color: rgba(11,43,51,.70) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}
body.page-condo.cg-modern .ui-datepicker td{ padding: 2px !important; }
body.page-condo.cg-modern .ui-datepicker td a.ui-state-default,
body.page-condo.cg-modern .ui-datepicker td span.ui-state-default{
  display: block !important;
  text-align: center !important;
  padding: 9px 0 !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0b2b33 !important;
  background: transparent !important;
}
body.page-condo.cg-modern .ui-datepicker td a.ui-state-hover{
  background: rgba(15,115,138,0.10) !important;
  border-color: rgba(15,115,138,0.20) !important;
  transform: translateY(-1px);
}
body.page-condo.cg-modern .ui-datepicker td a.ui-state-highlight{
  border-color: rgba(15,115,138,0.35) !important;
  background: rgba(15,115,138,0.08) !important;
  color: #0b2b33 !important;
}
body.page-condo.cg-modern .ui-datepicker td a.ui-state-active{
  background: #0f738a !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
body.page-condo.cg-modern .ui-datepicker td.ui-state-disabled span{
  color: rgba(11,43,51,.30) !important;
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.03) !important;
}

/* Header background + reflection images */
body.page-condo.cg-modern #cgHdrBg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  z-index: 0;
  pointer-events: none;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.page-condo.cg-modern #cgHdrReflect{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform-origin: center center;
  transform: rotate(180deg) scaleX(-1) translateZ(0) !important;
  backface-visibility: hidden;
  will-change: transform;
  filter: blur(8px) brightness(0.88) saturate(0.92);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  contain: paint;
}

/* Safety: never allow pseudo “glass/reflection” layers */
body.page-condo.cg-modern .cg-header-nav-wrapper::before,
body.page-condo.cg-modern .cg-header-nav-wrapper::after,
body.page-condo.cg-modern .cg-header-nav-wrapper .header::before,
body.page-condo.cg-modern .cg-header-nav-wrapper .header::after,
body.page-condo.cg-modern .cg-header-nav-wrapper .headimgs::before,
body.page-condo.cg-modern .cg-header-nav-wrapper .headimgs::after{
  content: none !important;
  display: none !important;
}

/* HEADER (scoped) */
body.page-condo.cg-modern .cg-header-nav-wrapper .header{
  padding: 14px 24px 8px 24px;
  height: auto;
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  column-gap: 24px;
  align-items: stretch;
  color: var(--cg-teal);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: transparent;
  position: relative;
  z-index: 5;
}

body.page-condo.cg-modern .cg-header-nav-wrapper .header a{ color: var(--cg-teal); }
body.page-condo.cg-modern .cg-header-nav-wrapper .header a:hover{ color: #095b6e; }

/* Logo (left) */
body.page-condo.cg-modern .logo-crest{ justify-self: start; align-self: center; }
body.page-condo.cg-modern .logo-crest > img{
  width: 110px;
  height: auto;
  display: block;
  vertical-align: top;
}

/* Center branding */
body.page-condo.cg-modern .headimgs{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  grid-column: 2;
  position: relative;
  z-index: 5;
}
body.page-condo.cg-modern .logo-text{
  max-width: 475px;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

body.page-condo.cg-modern .headtxt{
  margin: 0;
  text-align: center;
  font-family: "Garamond","Palatino Linotype","Book Antiqua",serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: 0.2px;
  color: var(--cg-teal);
}

/* Weather + Phone (right) */
body.page-condo.cg-modern .headtopright{
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0;
  text-align: right;

  font-family: "Palatino Linotype","Book Antiqua",Palatino,serif;
  font-size: 18px;
  line-height: 17px;
  color: var(--cg-teal);
  font-style: italic;

  height: 100%;
}
body.page-condo.cg-modern .weathert{
  margin: 0;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.30;
  border: 0;
}
body.page-condo.cg-modern .weathert td{
  padding: 0 6px 0 0;
  vertical-align: top;
  text-align: left;
  font-size: 12px;
  font-style: normal;
  font-family: verdana, arial, sans-serif;
}
body.page-condo.cg-modern .weathert td:first-child{
  width: 48px;
  min-width: 48px;
  padding-right: 0;
  vertical-align: middle;
}
body.page-condo.cg-modern .weathert div{
  font-weight: 700;
  margin: 0;
  line-height: 1.30;
}
body.page-condo.cg-modern .weathert span{
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.30;
}
body.page-condo.cg-modern .cg-phone,
body.page-condo.cg-modern .style12aqua{
  margin: 0;
  font-weight: 400;
  text-align: right;
  line-height: 1.2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--cg-teal);
  font-style: normal;
}
body.page-condo.cg-modern .headtopright .cg-phone{ margin-top: auto; }

/* Typography (match index) */
body.page-condo.cg-modern{
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: #414141;
}
body.page-condo.cg-modern h1,
body.page-condo.cg-modern h2,
body.page-condo.cg-modern h3,
body.page-condo.cg-modern .cg-title,
body.page-condo.cg-modern .cg-h2{
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: 0.6px;
  font-style: normal;
}
body.page-condo.cg-modern .cg-sub{
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  letter-spacing: 0.2px;
}
body.page-condo.cg-modern p,
body.page-condo.cg-modern li,
body.page-condo.cg-modern td,
body.page-condo.cg-modern .cg-prose,
body.page-condo.cg-modern .cg-prose p{
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* Header label under logo image text */
body.page-condo.cg-modern .cg-condo-label{
  margin-top: 2px;
  font-family: "Garamond","Palatino Linotype","Book Antiqua","Times New Roman",serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.2px;
  line-height: 1.00;
  color: #0f738a;
}

/* Navbar + dropdown stacking */
body.page-condo.cg-modern .rowcont,
body.page-condo.cg-modern .nbarcont,
body.page-condo.cg-modern .nbar{
  position: relative;
  z-index: 1000000;
}
body.page-condo.cg-modern .nbar li ul{ z-index: 1100000; }

/* Remove gap between navbar and slideshow */
body.page-condo.cg-modern .rowcont{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page-condo.cg-modern .rowcont + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-condo.cg-modern .cg-wrap,
body.page-condo.cg-modern .cg-main,
body.page-condo.cg-modern .cg-content,
body.page-condo.cg-modern .cg-slideshow,
body.page-condo.cg-modern .slideshow,
body.page-condo.cg-modern #slideshow{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Slideshow square corners */
body.page-condo.cg-modern .cg-hero,
body.page-condo.cg-modern #cgSlideshow,
body.page-condo.cg-modern .cg-slideshow.cg-xfade{
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  overflow: hidden !important;
}
body.page-condo.cg-modern .cg-hero img,
body.page-condo.cg-modern #cgSlideshow img,
body.page-condo.cg-modern .cg-slideshow img,
body.page-condo.cg-modern .cg-slideimg{
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
body.page-condo.cg-modern #slideshow *,
body.page-condo.cg-modern .slideshow *,
body.page-condo.cg-modern .cg-slideshow *,
body.page-condo.cg-modern .slides *{
  border-radius: 0 !important;
}
body.page-condo.cg-modern #slideshow img,
body.page-condo.cg-modern .slideshow img,
body.page-condo.cg-modern .cg-slideshow img,
body.page-condo.cg-modern .slides img{
  border-radius: 0 !important;
}

/* Slideshow touches header */
body.page-condo.cg-modern .cg-hero{
  margin-top: -36px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Responsive header */
@media (max-width: 980px){
  body.page-condo.cg-modern .cg-header-nav-wrapper .header{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 12px;
    padding: 14px 18px;
  }
  body.page-condo.cg-modern .logo-crest{
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  body.page-condo.cg-modern .headimgs{
    grid-column: 1;
    grid-row: 2;
  }
  body.page-condo.cg-modern .headtopright{
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-items: center;
    text-align: center;
  }
  body.page-condo.cg-modern .cg-phone{ text-align: center; }
  body.page-condo.cg-modern .headtopright table{ margin: 0 auto; }
}

/* NAVIGATION (scoped) */
body.page-condo.cg-modern .rowcont{
  clear: both;
  margin-top: 0;
}

body.page-condo.cg-modern .nbarcont{
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 40px;
  line-height: 36px;
  background: linear-gradient(180deg,#26a8c1 0%,#219ebb 55%,#1b86a0 78%,#166a80 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -10px 14px rgba(0,0,0,0.22);
  border-top: 0px solid rgba(255,255,255,0.18);
  border-bottom: 0px solid rgba(0,0,0,0.28);
  padding: 2px 0;
  display: block;
}

body.page-condo.cg-modern .nbar,
body.page-condo.cg-modern .nbar ul{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

body.page-condo.cg-modern .nbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.page-condo.cg-modern .nbar > li{
  position: relative;
  margin: 0;
  padding: 0;
  float: none;
}

body.page-condo.cg-modern .nbar li{ list-style: none; }

body.page-condo.cg-modern .nbar li a,
body.page-condo.cg-modern .nbar li li a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.96);
  font-weight: 600;
  font-size: 13px;
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
}

body.page-condo.cg-modern .nbar li a:hover,
body.page-condo.cg-modern .nbar li li a:hover{
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}

body.page-condo.cg-modern .nbar li ul{
  position: absolute;
  left: 0;
  top: calc(100% - 2px);
  display: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 26px rgba(0,0,0,0.22);
  background: linear-gradient(180deg,#26a8c1 0%,#219ebb 55%,#1b86a0 78%,#166a80 100%);
  border: 1px solid rgba(255,255,255,0.25);
  margin-top: 0;
  padding: 6px 0;
  min-width: 9em;
}

body.page-condo.cg-modern .nbar li:hover ul,
body.page-condo.cg-modern .nbar li.hover ul,
body.page-condo.cg-modern .nbar li ul:hover{
  display: block;
  visibility: visible;
  opacity: 1;
}

body.page-condo.cg-modern .nbar > li > a{ position: relative; }
body.page-condo.cg-modern .nbar > li > a::after{
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 14px;
}

body.page-condo.cg-modern .nbar li ul li a{
  padding: 9px 12px;
  white-space: nowrap;
  color: rgba(255,255,255,0.98);
  border-radius: 0;
  background: transparent;
  height: auto;
  justify-content: flex-start;
}

body.page-condo.cg-modern .nbar li ul li a:hover{
  background: rgba(255,255,255,0.14);
}
body.page-condo.cg-modern .nbar li ul li + li a{
  border-top: 1px solid rgba(255,255,255,0.70);
}

@media (max-width: 980px){
  body.page-condo.cg-modern .nbarcont{
    height: auto;
    overflow: hidden;
  }
  body.page-condo.cg-modern .nbar{
    display: block;
    font-size: 11px;
  }
  body.page-condo.cg-modern .nbar > li{ width: 100%; }
  body.page-condo.cg-modern .nbar li ul{
    position: static;
    display: block;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  body.page-condo.cg-modern .nbar li ul li a{
    padding-left: 22px;
    white-space: normal;
    color: rgba(255,255,255,0.92);
  }
  body.page-condo.cg-modern .nbar li ul li a:hover{
    background: rgba(255,255,255,0.10);
  }
  body.page-condo.cg-modern .nbar li a,
  body.page-condo.cg-modern .nbar li li a{
    justify-content: flex-start;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
  }
}


/* ==========================================================
   CONDO02: Title directly under form (NO GAP, CENTERED)
   ========================================================== */

/* Kill ALL spacing on the new form wrapper */
body.page-condo.cg-modern .cg-clean-booking-form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Whatever immediately follows the form — pull it UP */
body.page-condo.cg-modern .cg-clean-booking-form + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Common title wrappers used on condo pages */
body.page-condo.cg-modern .cg-grid,
body.page-condo.cg-modern .cg-title,
body.page-condo.cg-modern .cg-section,
body.page-condo.cg-modern .cg-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
  text-align: center !important;
}

/* Make title teal color */
body.page-condo.cg-modern .cg-title,
body.page-condo.cg-modern h1.cg-title {
  color: #0f738a !important;
}

/* Force the actual text itself to center */
body.page-condo.cg-modern h1,
body.page-condo.cg-modern h2,
body.page-condo.cg-modern h3,
body.page-condo.cg-modern p{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove gray border, shadow, and rounded corners from title card below form */
body.page-condo.cg-modern .cg-spacer .cg-card,
body.page-condo.cg-modern .cg-spacer .cg-photo-strip {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  padding-bottom: 26px !important;  /* Add ~10px extra height */
}

/* Also target the spacer wrapper itself */
body.page-condo.cg-modern .cg-spacer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ==========================================================
   SIDE PHOTOS (cg-photo-stack) — CENTERED
   10px padding on each side (320px container for 300px images)
   ========================================================== */

.cg-photo-stack-wrap{
  width: 320px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Container */
body.page-condo.cg-modern .cg-photo-stack {
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 16px !important;

  padding: 0 !important;
}

/* Photo wrapper */
body.page-condo.cg-modern .cg-photo-stack > * {
  width: 304px !important;
  max-width: 304px !important;
  box-sizing: border-box !important;

  margin: 0 auto !important;
  padding: 2px !important;

  justify-self: center !important;
  display: block !important;
  float: none !important;
  overflow: hidden !important;

  background: #fff !important;
  border: 1px solid rgba(15,115,138,.22) !important;
  box-shadow: 0 3px 5px rgba(0,0,0,.14) !important;

  transition: box-shadow .22s ease, border-color .22s ease;
}

/* Wrapper hover */
body.page-condo.cg-modern .cg-photo-stack > *:hover{
  border-color: rgba(15,115,138,.40) !important;
  box-shadow: 0 5px 8px rgba(0,0,0,.18) !important;
}

/* Images */
body.page-condo.cg-modern .cg-photo-stack img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
  display: block !important;

  border: 0 !important;
  box-shadow: none !important;

  transition: transform .28s ease !important;
  transform-origin: center center !important;
}

/* Slight zoom on hover */
body.page-condo.cg-modern .cg-photo-stack > *:hover img{
  transform: scale(1.03) !important;
}

/* Remove card padding and rounded corners */
body.page-condo.cg-modern .cg-grid > .cg-card {
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: 0 !important;
}

/* Remove gap between photo stack and calendar */
body.page-condo.cg-modern .cg-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 !important;
}

@media (min-width:980px){
  body.page-condo.cg-modern .cg-grid {
    grid-template-columns: 340px 1fr;
    gap: 0 !important;
  }
}

/* Right column width */
body.page-condo.cg-modern .cg-grid > .cg-card:last-child {
  max-width: 690px;
  width: 100%;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* Calendar sizing */
.calendarbox table.calfor{
  min-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.calendarbox table.calfor td:not(.cacatl):not(.dh){
  padding: 6px !important;
  height: 70px !important;
  line-height: 1.1 !important;
  font-size: 13px !important;
  vertical-align: top !important;
}

.calendarbox table.calfor:not(:first-of-type){
  display: table !important;
  margin-top: 12px !important;
}

/* Calendar scroll */
.cg-calendar-box{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-bottom: 14px;
  overflow-y: auto !important;
  max-height: 520px;
}

.calendarbox table.calfor td.dh{
  height: auto !important;
  padding: 8px 4px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* Calendar container */
body.page-condo.cg-modern .calendarbox{
  font-family: 'Raleway', sans-serif !important;
  font-size: 24px;
  line-height: 1.5;
  color: #0f738a;
  max-width: 720px;
  margin: 0 auto 12px auto;
  text-align: center;
}

/* ==========================================================
   RIGHT card intro sentence (above Rates)
   Targets: calendar box + immediately-following prose, first <p>
   ========================================================== */
body.page-condo.cg-modern .cg-card .cg-calendar-box + .cg-prose > p:first-of-type{
  font-family: 'Raleway', sans-serif !important;
  font-size: 28px;
  line-height: 1.5;
  color: #0f738a;
  max-width: 720px;
}
/* ==========================================================
   Remove vertical divider between grid cards
   ========================================================== */
body.page-condo.cg-modern .cg-grid > .cg-card:first-child{
  border-right: none;
}

body.page-condo.cg-modern .cg-grid > .cg-card:last-child{
  border-left: none;
}
/* ============================================================
   FOOTER — MODERNIZED (lighter top gradient + improved spacing)
------------------------------------------------------------ */

.footer {
  width: 100%;
  height: auto;
  padding: 32px 16px;  /* more vertical breathing room */

  /* Subtle Cayman-style gradient (lighter at top) */
  background: linear-gradient(
    180deg,
    rgba(24,142,165,0.95) 0%,   /* lighter blue top */
    rgba(15,115,138,0.92) 35%,
    rgba(9,85,104,0.92) 100%
  );

  /* Default footer text */
  color: #a6fcff;

  /* Typography */
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;     /* slightly larger */
  line-height: 1.75;     /* modern, airy */
  letter-spacing: 0.25px;
  font-weight: 400;
}

/* Centered footer content + prevent layout bleed */
.footer > div[align="center"] {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;

  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Prevent any container/card styles from leaking in */
.footer * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Footer links (clean + modern) */
.footer a,
.footer .footlinks a {
  color: rgba(255,255,255,0.96) !important;
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover,
.footer .footlinks a:hover {
  color: #b8fee2 !important;
  text-decoration: underline;
}

/* Footer link row */
.footlinks,
.footlinks a {
  font-size: 13.5px;
}

/* Secondary footer lines */
.footlines {
  font-size: 12.5px;
  opacity: 0.95;
}

/* Images in footer */
.footer img {
  max-width: 100%;
  height: auto;
}
/* ==========================================================
   FULL-BLEED FOOTER ON INDEX
   ========================================================== */
.cg-footer-wrap[data-bleed="1"] {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Spread footer content wider */
.cg-footer-wrap[data-bleed="1"] .cg-footer-card {
  max-width: 1430px !important;
  margin: 0 auto !important;
}

/* Right-align contact column on index */
.cg-footer-wrap[data-bleed="1"] .cg-footer-col-contact {
  text-align: right !important;
}

.cg-footer-wrap[data-bleed="1"] .cg-footer-col-contact ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   AVAILABILITY LOGIC (Admin checked days)
   - calendarinc.php marks NOT available days with td.cacahl
   - We render those days in site blue and keep others white
   ========================================================== */

/* Default day cells stay white (do not override month/day headers) */
.calendarbox table.calfor td:not(.cacatl):not(.dh):not(.cacahl){
  background: #ffffff !important;
  color: #0b2b33 !important;
}

/* NOT available (checked in /admin.php) */
.calendarbox table.calfor td.cacahl{
  background: #0f738a !important;   /* site blue/teal */
  border-color: rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
}
.calendarbox table.calfor td.cacahl *{
  color: #ffffff !important;
}

/* Legend boxes (in calendarinc.php) */
.smallbord{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 3px;
  background: #ffffff;
}
.smallbord.cacahl{
  background: #0f738a !important;
  border-color: #0f738a !important;
}

/* REMOVE GAP ABOVE FULL-WIDTH FOOTER */
body.page-condo.cg-modern .cg-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-condo.cg-modern .cg-wrap > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================
   LIGHTBOX OVERLAY STYLES
   ========================================================== */
.cg-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.cg-lightbox.active {
  display: flex;
}

.cg-lightbox-main {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  z-index: 100000;
}

.cg-lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  z-index: 100001;
}

.cg-lightbox-close:hover,
.cg-lightbox-close:focus {
  color: #bbb;
}

.cg-lightbox-prev,
.cg-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  padding: 16px;
  user-select: none;
  transition: 0.3s;
  z-index: 100001;
}

.cg-lightbox-prev:hover,
.cg-lightbox-next:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.3);
}

.cg-lightbox-prev {
  left: 20px;
}

.cg-lightbox-next {
  right: 20px;
}