/* logancrowder.ca, October 2026 redesign.
   Page layout lives in each page's inline styles (built from the approved design boards).
   This file holds the shared basics, hover states, the phone and tablet layout,
   the menu, forms, the guide download window, the listing photo viewer and the cookie notice. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #f4f5f7; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: #101b37; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
a { color: inherit; }
img { max-width: 100%; }
.lc-root { width: 100%; overflow-x: clip; }

/* Hover and focus states */
.lc-card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.lc-card:hover { border-color: #101b37; box-shadow: 0 12px 28px rgba(16,27,55,0.12); transform: translateY(-2px); }
.lc-panel { transition: background-color .2s ease; }
.lc-panel:hover { background-color: #f4f5f7 !important; }
.lc-alink svg { transition: transform .2s ease; }
.lc-alink:hover svg, .lc-card:hover .lc-go svg, .lc-panel:hover .lc-go svg { transform: translateX(3px); }
.lc-nav:hover { color: #f4f5f7 !important; }
.lc-toc a:hover { color: #101b37 !important; }
.lc-text a { color: #101b37; text-decoration: underline; text-decoration-color: #c8102e; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lc-text a:hover { text-decoration-thickness: 2px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid #101b37; outline-offset: 2px; }
footer input:focus, footer button:focus-visible { outline-color: #f4f5f7; }
.lc-shot img { transition: transform .35s ease; }
.lc-shot:hover img { transform: scale(1.03); }
.lc-shot:focus-visible { outline: 3px solid #101b37; outline-offset: 3px; }
.lc-all { transition: background-color .2s ease, color .2s ease; }
.lc-all:hover { background: #101b37 !important; color: #f4f5f7 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lc-card, .lc-alink svg, .lc-shot img { transition: none; }
  .lc-card:hover, .lc-shot:hover img { transform: none; }
}

/* Forms */
.lc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lc-success { font-family: 'Newsreader', Georgia, serif; font-size: 26px; line-height: 1.3; color: #101b37; padding: 8px 0; }
footer .lc-success { color: #f4f5f7; font-size: 22px; }
.lc-form-error { font-size: 14px; color: #8a0d20; margin-top: 8px; }
button[disabled] { opacity: 0.6; cursor: default; }

/* Menu button, hidden on desktop */
.lc-menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(244,245,247,0.24); border-radius: 0; padding: 0; cursor: pointer; color: #f4f5f7; }

/* Guide download window */
.lc-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(11,19,41,0.72); }
.lc-modal.lc-open { display: flex; }
.lc-modal-box { position: relative; width: 100%; max-width: 520px; background: #ffffff; padding: 44px 40px 40px; box-sizing: border-box; max-height: calc(100vh - 40px); overflow-y: auto; }
.lc-modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #101b37; cursor: pointer; }

/* Listing photo viewer */
.lc-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; box-sizing: border-box; padding: 16px 24px 28px; background: rgba(11,19,41,0.95); }
.lc-lightbox[hidden] { display: none; }
.lc-lb-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lc-lb-count { font-size: 15px; color: #c3c9d8; font-variant-numeric: tabular-nums; }
.lc-lb-body { flex-grow: 1; min-height: 0; display: flex; gap: 20px; margin-top: 8px; }
.lc-lb-stage { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 20px; }
.lc-lb-strip { width: 236px; flex-shrink: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(244,245,247,0.3) transparent; overscroll-behavior: contain; }
.lc-lb-thumb { display: block; padding: 0; border: 0; border-radius: 0; background: #18244a; aspect-ratio: 16 / 9; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .15s ease; }
.lc-lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lc-lb-thumb:hover { opacity: .9; }
.lc-lb-thumb[aria-current="true"] { opacity: 1; outline-color: #f4f5f7; }
.lc-lb-thumb:focus-visible { outline-color: #c8102e; opacity: 1; }
.lc-lb-img { display: block; min-width: 0; width: min(calc(100% - 144px), calc((100vh - 120px) * 16 / 9), 1600px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.lc-lb-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.lc-lb-btn:hover { background: rgba(244,245,247,0.12); }
.lc-lb-btn:focus-visible { outline: 2px solid #f4f5f7; outline-offset: 2px; }
.lc-lb-close { width: 48px; height: 48px; }
.lc-lb-prev, .lc-lb-next { width: 52px; height: 52px; border: 1px solid rgba(244,245,247,0.28); background: rgba(16,27,55,0.6); }
.lc-phone-only { display: none; }

/* Cookie notice */
#cookie-notice { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #0b1329; color: #c3c9d8; padding: 16px 96px; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.55; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(244,245,247,0.14); }
#cookie-notice a { color: #f4f5f7; text-decoration: underline; }
#cookie-notice button { height: 44px; padding: 0 24px; border: 0; border-radius: 0; background: #f4f5f7; color: #101b37; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Header: tighter from 1240 px down, so the logo and the menu never touch */
@media (max-width: 1240px) {
  .lc-root > header { padding: 0 48px !important; }
  .lc-root header nav { gap: 20px !important; }
}

/* Tablet */
@media (max-width: 1180px) {
  .lc-root > section[style*="padding"], .lc-root > footer { padding-left: 48px !important; padding-right: 48px !important; }
  .lc-root > header { padding: 0 48px !important; }
  .lc-root header nav { gap: 20px !important; }
  .lc-root [style*="padding: 0 80px 0 96px"], .lc-root [style*="padding: 56px 80px 88px 96px"] { padding-left: 48px !important; padding-right: 40px !important; }
  .lc-root [style*="padding: 60px 72px 64px 96px"] { padding-left: 48px !important; padding-right: 40px !important; }
  .lc-root [style*="padding: 60px 96px 64px 72px"] { padding-right: 48px !important; padding-left: 40px !important; }
  .lc-root [style*="padding: 104px 96px 104px 80px"] { padding: 72px 48px !important; }
  .lc-root [style*="repeat(4, minmax(0, 1fr))"], .lc-root [style*="repeat(5, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px; }
  .lc-root [style*="grid-template-rows: repeat(4, auto)"] { grid-template-rows: none !important; }
  .lc-root [style*="position: absolute; top: 5px; left: 0; right: 0; height: 1px"] { display: none; }
  .lc-root [style*="260px minmax(0, 760px)"] { grid-template-columns: 220px minmax(0, 1fr) !important; gap: 56px !important; }
  #cookie-notice { padding: 16px 48px; }

  /* Listing page */
  .lc-root .lc-hero { height: 480px !important; }
  .lc-root .lc-kpi { row-gap: 0 !important; }
  .lc-root .lc-kpi > div:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  .lc-root .lc-kpi > div:nth-child(n+3) { border-top: 1px solid #d6dae3; }
  .lc-root .lc-numbers { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .lc-root .lc-facts { grid-template-columns: minmax(0, 1fr) !important; }
  .lc-root .lc-gallery { grid-auto-rows: 200px !important; }
  .lc-root [style*="grid-template-columns: 300px minmax(0, 1fr)"] { grid-template-columns: 220px minmax(0, 1fr) !important; gap: 56px !important; }
}
@media (max-width: 1100px) {
  .lc-root header nav { display: none !important; }
  .lc-root header .lc-menu { display: inline-flex; }
  .lc-root header.lc-open nav { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; flex-direction: column; align-items: stretch !important; gap: 0 !important; background: #101b37; padding: 8px 48px 28px; border-bottom: 1px solid rgba(244,245,247,0.14); }
  .lc-root header.lc-open nav a.lc-nav { padding: 14px 0 !important; border-bottom: 1px solid rgba(244,245,247,0.14) !important; font-size: 17px !important; }
  .lc-root header.lc-open nav > div { display: none; }
  .lc-root header.lc-open nav > a:last-child { margin-top: 20px; justify-content: center; }
  .lc-root > header { position: relative; }
}

/* Phone */
@media (max-width: 760px) {
  .lc-root > section[style*="padding"], .lc-root > footer { padding: 56px 20px !important; }
  .lc-root > footer { padding-bottom: 32px !important; }
  .lc-root > header { height: 64px !important; padding: 0 20px !important; }
  .lc-root header.lc-open nav { padding: 8px 20px 24px; }
  .lc-root header a[href="https://cdwandassociates.com/"], .lc-root header > div > div[style*="width: 1px"] { display: none !important; }

  /* Every multi-column grid becomes one column, except small number columns */
  .lc-root [style*="grid-template-columns"]:not([style*="grid-template-columns: 56px"]):not(.lc-keep) { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
  .lc-root [style*="gap: 64px"], .lc-root [style*="gap: 72px"], .lc-root [style*="gap: 80px"], .lc-root [style*="gap: 96px"], .lc-root [style*="gap: 104px"] { gap: 36px !important; }
  .lc-root [style*="gap: 24px 40px"] { gap: 20px !important; }
  .lc-root [style*="grid-template-rows: subgrid"] { display: block !important; margin-bottom: 28px; }
  .lc-root [style*="grid-template-columns: 240px minmax(0, 360px)"] { gap: 10px !important; }

  /* Headings */
  .lc-root h1 { font-size: 40px !important; line-height: 1.08 !important; }
  .lc-root h2[style*="font-size: 48px"] { font-size: 32px !important; }
  .lc-root h2[style*="font-size: 38px"] { font-size: 29px !important; }
  .lc-root h3[style*="font-size: 32px"], .lc-root h3[style*="font-size: 30px"] { font-size: 25px !important; }
  .lc-root [style*="font-size: 44px"] { font-size: 30px !important; }
  .lc-root [style*="font-size: 38px"]:not(h2) { font-size: 28px !important; }
  .lc-root [style*="font-size: 36px"] { font-size: 28px !important; }
  .lc-root p[style*="font-size: 28px"], .lc-root p[style*="font-size: 30px"] { font-size: 23px !important; }
  .lc-root [style*="font-size: 19px"] { font-size: 17px !important; }

  /* Hero and split sections */
  .lc-root [style*="height: 680px"] { height: auto !important; }
  .lc-root [style*="min-height: 640px"] { min-height: 0 !important; }
  .lc-root [style*="padding: 0 80px 0 96px"], .lc-root [style*="padding: 56px 80px 88px 96px"] { padding: 40px 20px 48px !important; }
  .lc-root section > div[style*="position: relative; overflow: hidden"] { min-height: 240px; }
  .lc-root [style*="min-height: 620px"] { min-height: 320px !important; }
  .lc-root [style*="padding: 104px 96px 104px 80px"] { padding: 48px 20px 56px !important; }
  .lc-root [style*="padding: 60px 72px 64px 96px"], .lc-root [style*="padding: 60px 96px 64px 72px"] { padding: 40px 20px !important; border-left: 0 !important; border-top: 1px solid #d6dae3; }

  /* Cards and panels */
  .lc-root [style*="padding: 48px 56px"], .lc-root [style*="padding: 40px 44px"], .lc-root [style*="padding: 52px 52px"], .lc-root [style*="padding: 36px 40px"], .lc-root [style*="padding: 48px 48px"], .lc-root [style*="padding: 40px 40px"], .lc-root [style*="padding: 40px;"] { padding: 28px 20px !important; }
  .lc-root [style*="padding: 32px 36px"], .lc-root [style*="padding: 32px 34px"], .lc-root [style*="padding: 28px 30px"], .lc-root [style*="padding: 28px 32px"] { padding: 24px 20px !important; }
  .lc-root [style*="margin-top: 64px"] { margin-top: 40px !important; }

  /* Rows of buttons and links wrap */
  .lc-root div:has(> a[style*="white-space: nowrap"]) { flex-wrap: wrap; }
  .lc-root [style*="justify-content: space-between"] { flex-wrap: wrap; }
  .lc-root a[style*="white-space: nowrap"][style*="height: 52px"] { white-space: normal !important; text-align: center; }
  .lc-root footer [style*="text-align: right"] { text-align: left !important; }
  .lc-root footer [style*="width: 280px; height: 64px"] { width: 240px !important; height: 55px !important; }

  /* Listings on the home page scroll sideways */
  .lc-root #listings [style*="repeat(4, minmax(0, 1fr))"] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .lc-root #listings [style*="repeat(4, minmax(0, 1fr))"] > .lc-card { flex: 0 0 82%; scroll-snap-align: start; }

  .lc-root img[style*="height: 400px"], .lc-root img[style*="height: 420px"] { height: 240px !important; }

  /* Long reads */
  .lc-root nav.lc-toc { display: none !important; }
  .lc-root table { min-width: 560px; }
  .lc-root article { overflow-wrap: anywhere; }

  .lc-modal-box { padding: 40px 20px 28px; }
  #cookie-notice { padding: 14px 20px; }

  /* Featured listing card on Home and Parks for sale */
  .lc-root .lc-feature > div:first-child { min-height: 240px !important; }
  .lc-root .lc-feature > div:last-child { padding: 28px 20px 24px !important; }

  /* Listing page */
  .lc-root .lc-hero { height: 280px !important; }
  .lc-root .lc-kpi > div { padding: 18px 0 18px 16px !important; }
  .lc-root .lc-kpi > div:nth-child(odd) { padding-left: 0 !important; }
  .lc-root .lc-kpi [style*="font-size: 26px"] { font-size: 21px !important; }
  .lc-root .lc-stats > div { padding: 18px 0 20px 16px !important; border-left: 1px solid #d6dae3 !important; }
  .lc-root .lc-stats > div:nth-child(odd) { padding-left: 0 !important; border-left: 0 !important; }
  .lc-root .lc-stats [style*="font-size: 28px"] { font-size: 22px !important; }
  .lc-root .lc-stats, .lc-root .lc-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lc-root .lc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 120px !important; gap: 8px !important; }
  .lc-root .lc-gallery > figure:last-child { grid-column: span 2; }
  .lc-root .lc-facts, .lc-root .lc-docs { gap: 0 !important; }
  .lc-root .lc-facts > div { gap: 2px !important; }
  .lc-root [style*="padding: 30px 30px 32px"] { padding: 24px 20px !important; }
  .lc-root table.lc-fit { min-width: 0; }
  .lc-root .lc-mapscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lc-root .lc-mapscroll > svg { min-width: 600px; }
  .lc-root .lc-mapscroll[data-start="end"] > svg { min-width: 760px; }
  .lc-phone-only { display: block; }
  .lc-lightbox { padding: 12px 12px 16px; }
  .lc-lb-body { flex-direction: column; gap: 12px; }
  .lc-lb-stage { flex-wrap: wrap; align-content: center; gap: 12px 24px; }
  .lc-lb-img { order: -1; flex-basis: 100%; width: 100%; }
  .lc-lb-strip { width: auto; height: 58px; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; }
  .lc-lb-thumb { flex: 0 0 96px; height: 54px; }
}

/* YouTube video: poster with a play button until pressed */
.lc-yt .lc-yt-play { transition: background-color 0.15s ease; }
.lc-yt:hover .lc-yt-play { background: #a50d26 !important; }
.lc-yt:focus-visible { outline: 3px solid #f4f5f7; outline-offset: 4px; }
@media (max-width: 760px) {
  .lc-yt .lc-yt-play { width: 64px !important; height: 64px !important; margin: -32px 0 0 -32px !important; }
  .lc-yt .lc-yt-play svg { width: 22px; height: 25px; }
}
