/* ===========================================================================
   cld.css — the only stylesheet new work goes into.

   Loaded LAST, after global.css, new.css and pp-wm.css, so it wins on ties.
   Never edit those three. They are 2014-era and shared by every unmigrated
   page; changing them risks all 43 pages at once.

   ---------------------------------------------------------------------------
   2026-09-23 — first styling pass.

   The 2014 stylesheets build every container at a fixed pixel width with
   float columns: #logoBar 1056, #nav 1024, #mainAreaWrapper 1024, #lMain 715,
   #rMainSideBar 304. includes/header.php emits a viewport meta tag, so a phone
   now renders that 1024px layout at device width and the page scrolls
   sideways. Everything below is written to undo the fixed widths from the
   outside, without editing a single 2014 rule.

   Three structural facts this file relies on, all verified 2026-09-23:
     - .eventWrap and .hotelsWrap cards are direct children of #lMain, and no
       page uses both. Scoped with :has(> ...) so a page that nests them keeps
       its old float behaviour rather than breaking.
     - footer.php only emits #rMainSideBar when there is something to put in
       it. 40 of 43 pages therefore have no sidebar, and were rendering a
       715px column inside a 1024px wrapper with 300px of dead space.
     - 76 social icons across 14 pages carry href="", so clicking one reloads
       the page. Hidden here rather than edited out of 14 files.

   Palette is unchanged. #3575b9 is the site's identity and it stays. What
   changed is which of the existing blues carries body links: #4bb6f5 on white
   is 2.3:1 and effectively unreadable, #3575b9 is 4.8:1 and passes AA. Both
   were already on the site.
   =========================================================================== */

:root {
  /* Sampled from css/global.css and css/new.css, most-used first.
     These describe what the site already is. They are not a new palette. */
  --uk-blue:        #3575b9;  /* primary, links and headings */
  --uk-blue-mid:    #4882c6;
  --uk-blue-light:  #4bb6f5;  /* accent — decorative use only, fails AA as text */

  --uk-ink:         #333;
  --uk-ink-soft:    #666;
  --uk-white:       #fff;
  --uk-black:       #000;

  --uk-rule:        #ccc;     /* borders */
  --uk-rule-soft:   #d1d1d1;
  --uk-bg-grey:     #f0f0f0;
  --uk-bg-grey-2:   #e5e5e5;
  --uk-bg-warm:     #f7f7f6;

  --uk-focus:       #4bb6f5;
}

/* ---------------------------------------------------------------------------
   Tokens added in the 2026-09-23 pass. Kept separate from the block above so
   it stays obvious which values were sampled from the old site and which are
   new decisions.
--------------------------------------------------------------------------- */

:root {
  /* Darker step of the existing blue, for hover and for text that sits on a
     tint. Same hue, just down in lightness. */
  --uk-blue-deep:   #27578c;

  /* Body text. The 2014 body colour is #878787 on #fefefe, which is 3.6:1 and
     fails WCAG AA for normal text. This is 9.4:1 and still reads soft. */
  --uk-text:        #3d4450;
  --uk-text-mute:   #5f6775;

  /* One warm accent, used sparingly: the current-page marker in the nav and
     the rule under a page title. The Okanagan reads as lake blue plus dry
     orchard gold, and the site had no second colour at all. */
  --uk-sun:         #c8862a;

  --uk-surface:     #ffffff;
  --uk-surface-alt: #f6f8fa;
  --uk-hairline:    #e3e8ee;

  --uk-shadow:      0 1px 2px rgba(22, 40, 66, .05),
                    0 4px 12px rgba(22, 40, 66, .06);
  --uk-shadow-lift: 0 2px 4px rgba(22, 40, 66, .07),
                    0 12px 28px rgba(22, 40, 66, .12);

  --uk-radius:      10px;
  --uk-radius-sm:   6px;

  /* Single source of truth for page width. The old files hardcode 1024 and
     1056 in five places; everything below reads this instead. */
  --uk-max:         1140px;
  --uk-gutter:      20px;
}

/* ---------------------------------------------------------------------------
   Skip link. Introduced in includes/header.php, so it has to be styled here
   or it renders as stray text at the top of every migrated page.
--------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--uk-white);
  color: var(--uk-blue);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--uk-blue);
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   Visible focus for keyboard users. The 2014 stylesheets set none anywhere.
   :focus-visible only paints for keyboard focus, so this does not add outlines
   to mouse clicks and cannot disturb the existing look for ordinary use.
--------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--uk-focus);
  outline-offset: 2px;
}

/* ===========================================================================
   1 · FOUNDATION
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--uk-text);
  background: var(--uk-surface);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Nothing in a 2014 fixed-width layout was told to stay inside its box. */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

img {
  height: auto;
}

/* Long unbroken strings — the site is full of pasted Google Maps URLs as link
   text in places — must not force a horizontal scrollbar on a phone. */
#lMain {
  overflow-wrap: break-word;
}

/* --- Links ---------------------------------------------------------------
   The 2014 link colour #4bb6f5 is 2.3:1 on white. It is kept as a decorative
   accent elsewhere in this file but never again as body text.
------------------------------------------------------------------------- */

a:link,
a:visited {
  color: var(--uk-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

a:hover,
a:active {
  color: var(--uk-blue-deep);
}

/* --- Headings ------------------------------------------------------------
   Dosis is already loaded at 400/600/800. It was being used at 400, which is
   thin for a display face and made every heading feel provisional.
------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Dosis', sans-serif;
  color: var(--uk-blue);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

#lMain h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 700;
  padding: 0;
  margin: 4px 0 18px;
}

/* A short warm rule under the page title. The only place the accent appears
   at full strength, which is what keeps it an accent. */
#lMain h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  background: var(--uk-sun);
  border-radius: 2px;
}

#lMain h2 {
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 600;
  margin: 34px 0 10px;
}

#lMain h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 24px 0 8px;
}

#lMain p {
  margin: 0 0 16px;
}

/* Comfortable measure for running prose. Cards and grids opt out below. */
#lMain > p,
#lMain > ul,
#lMain > ol {
  max-width: 68ch;
}

#lMain > ul,
#lMain > ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

#lMain > ul { list-style: disc; }
#lMain > ol { list-style: decimal; }

#lMain > ul li,
#lMain > ol li {
  margin-bottom: 6px;
}

/* ===========================================================================
   2 · PAGE CONTAINERS

   Every fixed pixel width in the 2014 files is replaced with the same fluid
   container. This is the change that stops a phone scrolling sideways.
   =========================================================================== */

#logoBar,
#nav,
#mainAreaWrapper,
#footer {
  width: 100%;
  max-width: var(--uk-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--uk-gutter);
  padding-right: var(--uk-gutter);
}

/* --- Logo bar ----------------------------------------------------------- */

#logoBar {
  padding-top: 16px;
  padding-bottom: 12px;
  overflow: visible;
}

#logoBar .logo {
  float: none;
  display: block;
  max-height: 64px;
  width: auto;
}

/* --- Banner image --------------------------------------------------------
   .hrdMainImg is a fixed-size 2014 banner. Let it fill the content column and
   crop rather than letterbox, so pages with differently sized banners still
   line up with each other.
------------------------------------------------------------------------- */

.hrdMainImg,
#nav ~ .hrdMainImg {
  width: 100%;
  max-width: var(--uk-max);
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
  object-position: center;
  border: none;
  border-radius: var(--uk-radius);
  box-shadow: var(--uk-shadow);
  margin: 0 auto 4px;
  padding: 0 var(--uk-gutter);
  /* padding on a replaced element would inset the image, so box-sizing keeps
     the visual width correct against the containers above. */
  box-sizing: border-box;
}

/* --- Navigation ----------------------------------------------------------
   Kept as a single centred row that wraps. The current page is marked with a
   warm underline instead of text-decoration, which was ambiguous next to
   ordinary links.
------------------------------------------------------------------------- */

#nav {
  border: none;
  border-top: 1px solid var(--uk-hairline);
  border-bottom: 1px solid var(--uk-hairline);
  border-radius: 0;
  overflow: visible;
  margin-bottom: 22px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 15px;
  background: var(--uk-surface);
}

#nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
}

#nav li {
  display: block;
  border: none;
}

#nav a,
#nav li a:link,
#nav li a:visited {
  display: block;
  padding: 11px 13px;
  color: var(--uk-text);
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--uk-radius-sm) var(--uk-radius-sm) 0 0;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

#nav li a:hover,
#nav li a:focus-visible {
  color: var(--uk-blue);
  background: var(--uk-surface-alt);
}

#nav a.current,
#nav li a.current:link,
#nav li a.current:visited {
  color: var(--uk-blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom-color: var(--uk-sun);
}

/* --- Main area -----------------------------------------------------------
   #lMain was float:left at a fixed 715px. On the 40 pages with no sidebar
   that left roughly 300px of empty space to the right of every page.
   Two columns only when footer.php actually emitted a sidebar.
------------------------------------------------------------------------- */

#mainAreaWrapper {
  overflow: visible;
  padding-bottom: 40px;
}

#lMain,
#lMain.lMain-full {
  float: none;
  width: auto;
  max-width: none;
  margin-right: 0;
}

#mainAreaWrapper:has(> #rMainSideBar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

#rMainSideBar {
  width: auto;
  overflow: visible;
}

#rMainSideBar p {
  border: 1px solid var(--uk-hairline);
  border-radius: var(--uk-radius);
  text-align: left;
  padding: 14px;
}

/* ===========================================================================
   3 · CARD GRIDS

   .eventWrap (homepage tiles) and .hotelsWrap (listing entries) are both
   float:left at fixed widths, so they wrap badly and snag on each other when
   heights differ. Replaced with a grid on the parent.

   Scoped with :has(> ...) deliberately. If a page ever nests its cards inside
   another div, that page simply keeps the old float layout instead of losing
   its structure. Verified 2026-09-23: on all 20 card pages the cards are
   direct children of #lMain, and no page uses both types.
   =========================================================================== */

#lMain:has(> .eventWrap),
#lMain:has(> .hotelsWrap) {
  display: grid;
  gap: 18px;
  align-items: start;
}

#lMain:has(> .eventWrap) {
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

#lMain:has(> .hotelsWrap) {
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

/* Everything that is not a card spans the full row, so headings, intro
   paragraphs, the poem and the tips strip keep behaving like page content. */
#lMain:has(> .eventWrap) > *:not(.eventWrap),
#lMain:has(> .hotelsWrap) > *:not(.hotelsWrap) {
  grid-column: 1 / -1;
}

/* --- Homepage tiles ------------------------------------------------------ */

.eventWrap {
  float: none;
  width: auto;
  margin: 0;
  border: none;
  border-radius: var(--uk-radius);
  overflow: hidden;
  background: var(--uk-surface);
  box-shadow: var(--uk-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}

.eventWrap:hover {
  box-shadow: var(--uk-shadow-lift);
  transform: translateY(-2px);
}

/* The heading sits under the image now. The blue bar on top of every tile
   made thirteen identical blue rectangles down the homepage. */
.eventWrap h2 {
  order: 2;
  background: none;
  color: var(--uk-blue);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  border-radius: 0;
  margin: 0;
  padding: 12px 14px 14px;
}

.eventWrap a {
  display: block;
}

.eventWrap h2 a:link,
.eventWrap h2 a:visited {
  color: var(--uk-blue);
  text-decoration: none;
}

.eventWrap:hover h2 a {
  color: var(--uk-blue-deep);
}

.eventWrap > a {
  order: 1;
  overflow: hidden;
}

.eventWrap img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  transition: transform .35s ease;
}

.eventWrap:hover img {
  transform: scale(1.04);
}

/* --- Listing cards -------------------------------------------------------
   Internally these were three floated columns at 154px / 160px / 125px, which
   cannot survive a fluid card. Laid out as a column instead.
------------------------------------------------------------------------- */

.hotelsWrap {
  float: none;
  width: auto;
  margin: 0;
  border: none;
  border-radius: var(--uk-radius);
  background: var(--uk-surface);
  box-shadow: var(--uk-shadow);
  padding: 0 0 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hotelsWrap:hover {
  box-shadow: var(--uk-shadow-lift);
  transform: translateY(-2px);
}

.hotelsWrap h3 {
  background: var(--uk-surface-alt);
  border-bottom: 1px solid var(--uk-hairline);
  border-radius: 0;
  text-align: left;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  padding: 13px 16px;
}

.hotelsWrap h3 a:link,
.hotelsWrap h3 a:visited {
  color: var(--uk-blue);
  text-decoration: none;
}

.hotelsWrap h3 a:hover {
  color: var(--uk-blue-deep);
  text-decoration: underline;
}

.hotelsWrap p {
  float: none;
  width: auto;
  border: none;
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--uk-text-mute);
  flex: 1 0 auto;
}

.hotelsWrap .features,
.hotelsWrap .featuresSp,
.hotelsWrap .addy,
.hotelsWrap .inq {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 16px 8px;
  text-align: left;
  font-size: 15px;
}

/* .rate holds a literal "-" on most listings — a rating column that was never
   filled in. Kept in the markup, dropped to a quiet corner rather than sitting
   at 20px in the middle of the card. */
.hotelsWrap .rate {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 16px 6px;
  text-align: left;
  font-size: 15px;
  color: var(--uk-text-mute);
}

.hotelsWrap .rate:empty {
  display: none;
}

/* --- Social / map icon row ---------------------------------------------- */

.socPk,
.realEstate .socPk {
  float: none;
  width: auto;
  margin: 0;
  padding: 6px 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.socPk li {
  float: none;
  margin: 0;
  width: 24px;
  height: 24px;
  opacity: .78;
  transition: opacity .15s ease, transform .15s ease;
}

.socPk li:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* 76 of these across 14 pages have href="" and reload the page when clicked.
   Hidden here rather than edited out of 14 content files, so the fix is one
   line and reverses cleanly. The markup is untouched. */
.socPk li:has(> a[href=""]),
.socPk li.nul:has(> a:not([href])) {
  display: none;
}

/* ===========================================================================
   4 · PAGE FURNITURE
   =========================================================================== */

/* --- Tips strip ---------------------------------------------------------- */

.infoTips {
  background-color: var(--uk-surface-alt);
  border: 1px solid var(--uk-hairline);
  border-radius: var(--uk-radius);
  color: var(--uk-text-mute);
  font-style: normal;
  margin: 30px 0 10px;
  padding: 18px 20px;
  text-align: left;
}

.infoTips40 {
  margin: 0;
  text-align: left;
  max-width: 68ch;
}

/* --- The homepage poem ---------------------------------------------------
   Was float:left with an 80px left pad, which on a fluid column parked it off
   centre against nothing. It is the most human thing on the site, so it gets
   treated as a pull quote rather than hidden.
------------------------------------------------------------------------- */

.poem {
  float: none;
  padding: 22px 26px;
  margin: 34px 0 10px;
  text-align: left;
  font-size: 17px;
  line-height: 1.8;
  font-style: italic;
  color: var(--uk-text-mute);
  background: var(--uk-surface-alt);
  border-left: 3px solid var(--uk-sun);
  border-radius: 0 var(--uk-radius) var(--uk-radius) 0;
}

.poem strong {
  display: block;
  margin-bottom: 10px;
  font-style: normal;
  font-weight: 600;
  color: var(--uk-blue);
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
}

/* --- Footer -------------------------------------------------------------- */

#footerCon {
  background: var(--uk-blue);
  margin-top: 50px;
}

#footer {
  background: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 28px;
  padding-top: 34px;
  padding-bottom: 10px;
  font-size: 15px;
}

#footer h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.footerCols,
.footerCols1 {
  float: none;
  width: auto;
  margin: 0 0 24px;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

/* The first footer column holds two lists side by side. They were separated
   with margin-left:60px, which does not survive a fluid column. */
.footerCols1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 20px;
  align-items: start;
}

.footerCols1 h3 {
  grid-column: 1 / -1;
}

.footerColsSplit {
  margin-left: 0;
}

.footerCols.footerColsLast {
  border: none;
}

#footer ul,
.footerCols ul,
.footerCols1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer li {
  margin-bottom: 6px;
}

#footer a:link,
#footer a:visited {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
  color: var(--uk-white);
  text-decoration: underline;
}

.footerUK {
  grid-column: 1 / -1;
}

.footerUK .ukFooter {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#footerBot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 16px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

#footerBot p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Booking / comparison table. Introduced 2026-09-23 with the new accommodation
   model on accommodations-beds-breakfasts.php.

   A table rather than a row of cards, on purpose. Four identical bordered
   cards is the template pattern the writing rules warn about, and a table is
   also the format AI assistants extract most cleanly from a comparison.
--------------------------------------------------------------------------- */

.bookTable {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 16px;
  background: var(--uk-surface);
  border-radius: var(--uk-radius);
  overflow: hidden;
  box-shadow: var(--uk-shadow);
}

.bookTable th,
.bookTable td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--uk-hairline);
}

.bookTable thead th {
  background: var(--uk-surface-alt);
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--uk-blue);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.bookTable tbody tr:last-child th,
.bookTable tbody tr:last-child td {
  border-bottom: none;
}

.bookTable td:first-child {
  white-space: nowrap;
  font-weight: 600;
  width: 1%;
}

.bookTable td:first-child a {
  text-decoration: none;
}

.bookTable td:first-child a:hover {
  text-decoration: underline;
}

.bookTable tbody tr:hover {
  background: var(--uk-surface-alt);
}

/* A dated check is honest after it goes stale. A bare phone number never is. */
.verified {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--uk-text-mute);
}

.verified::before {
  content: "\2713\00a0";
  color: #2e7d4f;
  font-weight: 700;
}

/* Said out loud when a detail could not be read from the source. Better than
   a confident wrong address, and better than a silent omission. */
.unverified {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--uk-text-mute);
  font-style: italic;
}

.unverified::before {
  content: "\26a0\00a0";
  font-style: normal;
  color: var(--uk-sun);
}

.lastChecked {
  font-size: 15px;
  color: var(--uk-text-mute);
  padding: 14px 16px;
  margin: 4px 0 0;
  background: var(--uk-surface-alt);
  border-left: 3px solid var(--uk-hairline);
  border-radius: 0 var(--uk-radius-sm) var(--uk-radius-sm) 0;
}

/* On a phone the two-column table stacks, or the description column gets
   squeezed to about eight characters. */
@media only screen and (max-width: 560px) {

  .bookTable,
  .bookTable tbody,
  .bookTable tr,
  .bookTable td {
    display: block;
    width: auto;
  }

  .bookTable thead {
    display: none;
  }

  .bookTable tr {
    border-bottom: 1px solid var(--uk-hairline);
    padding: 4px 0;
  }

  .bookTable tr:last-child {
    border-bottom: none;
  }

  .bookTable td {
    border-bottom: none;
    padding: 6px 16px;
  }

  .bookTable td:first-child {
    white-space: normal;
    padding-top: 14px;
    font-size: 17px;
  }

  .bookTable td:last-child {
    padding-bottom: 14px;
  }
}

/* ===========================================================================
   5 · REMAINING 2014 FIXED-WIDTH COMPONENTS

   The card grids above cover 20 pages. These are the other fixed-pixel float
   components still in use, found by scanning global.css and new.css for
   width declarations of 320px or more and checking each against the live
   pages. Every one of them would push a phone sideways.

   Two patterns are used below and nothing else:
     - repeated sibling boxes become a grid on their parent, same :has(>)
       scoping as the cards
     - one-off boxes keep their original width as a max-width, so the desktop
       rendering is unchanged and only small screens see a difference
   =========================================================================== */

/* --- transportation.php · 9 boxes, 235px floats -------------------------- */

#lMain:has(> .transportBox) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 26px;
  align-items: start;
}

#lMain:has(> .transportBox) > *:not(.transportBox) {
  grid-column: 1 / -1;
}

.transportBox {
  float: none;
  width: auto;
  border-right: none;
  text-align: left;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--uk-hairline);
}

/* --- kelowna-realestate.php, real-estate-2.php · 320px floats ------------ */

#lMain:has(> .realEstate) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  align-items: start;
}

#lMain:has(> .realEstate) > *:not(.realEstate) {
  grid-column: 1 / -1;
}

.realEstate,
.realEstateList {
  float: none;
  width: auto;
  margin: 0;
  border: none;
  border-radius: var(--uk-radius);
  background: var(--uk-surface);
  box-shadow: var(--uk-shadow);
  overflow: hidden;
}

/* --- okanagan-lake.php and the four real-estate area pages --------------- */

.beachBox {
  float: none;
  width: auto;
  max-width: 68ch;
  border-right: none;
  text-align: left;
}

/* --- Centred data groups. Keep the original width as a ceiling only. ----- */

.cellGroup,
.sanicellGroup,
.parksWrapper,
.termDir {
  width: auto;
  max-width: 100%;
}

.cellGroup        { max-width: 580px; }
.sanicellGroup    { max-width: 500px; }
.parksWrapper     { max-width: 445px; }

/* --- advertising-rates.php ----------------------------------------------- */

.adWrap  { width: auto; max-width: 505px; }
.adWrap2 { width: auto; max-width: 700px; }

/* --- travel.php · CSS banner rather than an <img> ------------------------
   .hdrArrDep is a 1024x274 fixed box with a background image. Given an
   aspect-ratio it scales instead of overflowing, and background-size:100%
   from global.css keeps the artwork in step.
------------------------------------------------------------------------- */

.hdrArrDep {
  width: 100%;
  max-width: var(--uk-max);
  height: auto;
  aspect-ratio: 1024 / 274;
  border: none;
  border-radius: var(--uk-radius);
  box-shadow: var(--uk-shadow);
  margin: 0 auto 4px;
}

/* --- Belt and braces -----------------------------------------------------
   Roughly forty more fixed pixel widths exist in the 2014 files on components
   that are not currently on any page, and 43 pages of hand-written markup
   will have something these rules missed. Nothing should be able to force a
   sideways scroll on a phone.
------------------------------------------------------------------------- */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Tables in hand-written 2014 content carry width attributes. */
#lMain table {
  max-width: 100%;
  height: auto;
}

/* Empty paragraphs used as 2014 spacers would otherwise open a grid row. */
#lMain > p:empty {
  display: none;
}

/* ===========================================================================
   6 · RESPONSIVE

   The 2014 files carry about twenty scattered media queries at eight
   different breakpoints. Nothing below removes them; these simply come later
   and win where they overlap.
   =========================================================================== */

/* --- Tablet -------------------------------------------------------------- */

@media only screen and (max-width: 900px) {

  /* One column. The sidebar, where it exists at all, goes under the content. */
  #mainAreaWrapper:has(> #rMainSideBar) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  #rMainSideBar {
    width: auto;
    max-width: 420px;
  }
}

/* --- Phone ---------------------------------------------------------------
   Below 720px the horizontal nav stops fitting. global.css already ships a
   jump menu in a <select> for exactly this, set to display:none and never
   switched on. MM_jumpMenu() is defined in js/generic.js and works, and the
   select carries the full 22-item site list rather than the 9 in the bar.
------------------------------------------------------------------------- */

@media only screen and (max-width: 720px) {

  :root {
    --uk-gutter: 16px;
  }

  body {
    font-size: 16px;
  }

  #nav ul {
    display: none;
  }

  #nav {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }

  #nav #mediaNav {
    margin: 0;
  }

  #nav select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font-family: 'Dosis', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--uk-blue);
    background: var(--uk-surface-alt);
    border: 1px solid var(--uk-hairline);
    border-radius: var(--uk-radius-sm);
    /* 44px minimum touch target. */
    min-height: 46px;
  }

  #logoBar {
    padding-top: 12px;
    padding-bottom: 8px;
    text-align: center;
  }

  #logoBar .logo {
    margin: 0 auto;
    max-height: 52px;
  }

  .hrdMainImg {
    border-radius: var(--uk-radius-sm);
  }

  /* Listing cards go full width rather than squeezing two into 360px. */
  #lMain:has(> .hotelsWrap) {
    grid-template-columns: minmax(0, 1fr);
  }

  #lMain:has(> .eventWrap) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .eventWrap img {
    height: 128px;
  }

  .eventWrap h2 {
    font-size: 17px;
    padding: 10px 12px 12px;
  }

  #footer {
    gap: 4px 20px;
    padding-top: 26px;
  }

  #footerBot {
    justify-content: flex-start;
  }

  .poem {
    padding: 18px 20px;
  }
}

/* --- Small phone --------------------------------------------------------- */

@media only screen and (max-width: 420px) {

  #lMain:has(> .eventWrap) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eventWrap img {
    height: 112px;
  }
}

/* --- Motion ---------------------------------------------------------------
   Every transition above is decorative. None of them carry meaning.
------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .eventWrap:hover,
  .hotelsWrap:hover {
    transform: none;
  }

  .eventWrap:hover img {
    transform: none;
  }
}

/* --- Print ---------------------------------------------------------------- */

@media print {

  #nav,
  #rMainSideBar,
  .skip-link,
  .hrdMainImg {
    display: none;
  }

  #footerCon {
    background: none;
    border-top: 1px solid #999;
  }

  #footer a:link,
  #footer a:visited,
  #footer h3 {
    color: #000;
  }

  .eventWrap,
  .hotelsWrap {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------------------
   Status note on a listing whose own website says it is closed, seasonal or in
   receivership. Added 2026-09-24 after the hijack sweep.

   The listing stays and the link stays, because the business's own site is the
   accurate source. What changes is that this site stops implying the place is
   open for business. Warmer than a removal and more honest than silence.
--------------------------------------------------------------------------- */

.statusNote {
  display: block;
  margin-top: 6px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #8a5a12;
  background: #fdf6e8;
  border-left: 3px solid var(--uk-sun);
  border-radius: 0 var(--uk-radius-sm) var(--uk-radius-sm) 0;
}

/* ---------------------------------------------------------------------------
   Evidence list under a "best of" entry. Added 2026-09-26.

   This is the product, not decoration. The whole claim of the best-of pages is
   that a pick is backed by a published result rather than an opinion, so the
   evidence gets its own scannable block rather than being buried in a prose
   sentence. It is also the part an AI assistant can lift cleanly, which is the
   other reason it is a list and not a paragraph.

   The year sits in a fixed-width badge so the column reads vertically and a
   visitor can see at a glance whether the proof is recent or from 2021.
--------------------------------------------------------------------------- */

.proof {
  list-style: none;
  margin: 0 0 2px;
  padding: 0 16px 6px;
}

.proof li {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0 0 7px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--uk-text);
}

.proof li:last-child {
  margin-bottom: 0;
}

.proof-yr {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 2px 7px;
  font-family: 'Dosis', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--uk-blue);
  background: var(--uk-surface-alt);
  border: 1px solid var(--uk-hairline);
  border-radius: 999px;
}

/* A first-place result carries the accent. Used sparingly, so it still means
   something when it appears. */
.proof li strong {
  color: var(--uk-blue-deep);
}

/* The short human note under the evidence. Deliberately quieter than the
   proof above it: the evidence is the claim, this is the colour. */
.hotelsWrap .features {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--uk-hairline);
  color: var(--uk-text-mute);
  font-size: 14.5px;
  line-height: 1.55;
}