/* =====================================================================
   Our Dartmoor — front-end styles (self-contained; safe inside YOOtheme)
   Tweak the palette below to taste.
   ===================================================================== */
:root {
    --od-green:    #798d53;
    --od-green-d:  #62733f;
    --od-green-l:  #eef1e6;
    --od-ink:      #24271f;
    --od-granite:  #5b5e60;
    --od-stone:    #f5f4ef;
    --od-line:     #dcd8cf;
    --od-muted:    #71746d;
}

.od-listing { color: var(--od-ink); }
.od-listing a:not(.od-btn) { color: var(--od-green-d); }
.od-listing h1, .od-listing h2, .od-listing h3 { color: var(--od-ink); }

.od-back { font-size: .9rem; margin-bottom: 1rem; }
.od-back a { color: var(--od-granite); text-decoration: none; }
.od-back a:hover { color: var(--od-green-d); }
.od-back .sep { color: var(--od-line); margin: 0 .5rem; }

/* Header */
.od-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.od-head-logo { width: 84px; height: 84px; object-fit: contain; border-radius: .5rem; border: 1px solid var(--od-line); background: #fff; flex: 0 0 auto; }
.od-head h1 { margin: .1rem 0; font-size: 2.2rem; line-height: 1.15; }
.od-head-place { color: var(--od-muted); margin: 0; }
.od-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .25rem; }
.od-badge { font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 1rem; background: var(--od-green-l); color: var(--od-green-d); }
.od-badge.is-featured { background: #f3e6c4; color: #8a6d18; }
.od-badge.is-online { background: var(--od-green-l); color: var(--od-green-d); }
.od-badge.is-buy { background: #f3e6c4; color: #8a6d18; }
.od-badge.is-copy { background: var(--od-stone); color: var(--od-granite); }

/* Hero (image-led) */
.od-hero { width: 100%; max-height: 360px; object-fit: cover; border-radius: .6rem; margin-bottom: 1.2rem; }

/* Action row */
.od-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.od-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: .45rem; font-weight: 600; font-size: .92rem; text-decoration: none; border: 1px solid var(--od-green); background: var(--od-green); color: #fff; cursor: pointer; transition: background .15s; }
.od-btn:hover { background: var(--od-green-d); border-color: var(--od-green-d); color: #fff; }
.od-btn.is-ghost { background: #fff; color: var(--od-green-d); }
.od-btn.is-ghost:hover { background: var(--od-green-l); }

/* Layout */
.od-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.8rem; align-items: start; }
@media (max-width: 820px) { .od-layout { grid-template-columns: 1fr; } }
.od-body { font-size: 1.05rem; }
.od-body :is(p, ul, ol) { line-height: 1.65; }

/* Cards / sidebar */
.od-card { background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.od-card h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; color: var(--od-granite); margin: 0 0 .7rem; }
.od-contact { list-style: none; margin: 0; padding: 0; font-size: 1.05rem; }
.od-contact li { margin-bottom: .5rem; }
.od-contact a { word-break: break-word; }

/* Chips (categories / tags) */
.od-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.od-chip { font-size: .95rem; text-decoration: none; padding: .3rem .7rem; border-radius: 1rem; border: 1px solid var(--od-line); color: var(--od-granite); background: var(--od-stone); }
.od-chip:hover { border-color: var(--od-green); color: var(--od-green-d); }
.od-chip.is-tag { background: var(--od-green-l); border-color: transparent; color: var(--od-green-d); }

/* Social icons */
.od-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.od-social a { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--od-stone); border: 1px solid var(--od-line); color: var(--od-granite); font-size: 1.25rem; text-decoration: none; transition: all .15s; }
.od-social a:hover { background: var(--od-green); border-color: var(--od-green); color: #fff; transform: translateY(-2px); }

/* Tabs */
.od-tabs { margin-top: 1.4rem; }
.od-tabbar { display: flex; gap: .25rem; border-bottom: 2px solid var(--od-line); margin-bottom: 1rem; flex-wrap: wrap; }
.od-tabbtn { appearance: none; border: 0; background: none; padding: .6rem 1rem; font-weight: 600; color: var(--od-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.od-tabbtn.is-active { color: var(--od-green-d); border-bottom-color: var(--od-green); }
.od-panel { display: none; }
.od-panel.is-active { display: block; animation: odTabFade .3s ease both; }
@keyframes odTabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .od-panel.is-active { animation: none; } }

/* Click-to-watch reels (video tab): a light facade that only loads the real
   embed, and its third-party scripts, when the visitor taps play. */
.od-reels { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.od-reel { margin: 0; border-radius: .7rem; overflow: hidden; border: 1px solid var(--od-line); background: #fff; }
.od-reel--vertical { width: 300px; max-width: 100%; }
.od-reel--wide { width: 100%; max-width: 640px; }
.od-reel-play { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; color: #fff; background: linear-gradient(155deg, #46583a, #24271f 72%); overflow: hidden; }
/* Poster still (YouTube / Vimeo / TikTok): cover-fill the card, with a soft
   dark wash so the play button, badge and note stay readable over any image. */
.od-reel-play.has-poster { background-color: #24271f; background-size: cover; background-position: center; background-repeat: no-repeat; }
.od-reel-play.has-poster::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .5)); }
.od-reel-play.has-poster .od-reel-badge,
.od-reel-play.has-poster .od-reel-triangle,
.od-reel-play.has-poster .od-reel-note { z-index: 1; }
.od-reel--vertical .od-reel-play { height: 580px; }
.od-reel--wide .od-reel-play { aspect-ratio: 16 / 9; }
.od-reel-badge { position: absolute; top: .65rem; left: .65rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; background: rgba(0, 0, 0, .5); padding: .28rem .7rem; border-radius: 1rem; }
.od-reel-badge i { font-size: .95rem; }
.od-reel-triangle { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .94); transform: translate(-50%, -50%); transition: transform .15s ease; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.od-reel-triangle::after { content: ""; position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--od-green-d); }
.od-reel-play:hover .od-reel-triangle, .od-reel-play:focus-visible .od-reel-triangle { transform: translate(-50%, -50%) scale(1.09); }
.od-reel-note { position: absolute; left: 0; right: 0; bottom: .7rem; text-align: center; font-size: .76rem; opacity: .9; padding: 0 .6rem; }
.od-reel-cap { padding: .55rem .75rem; font-size: .92rem; color: var(--od-ink); }
.od-reel-frame { display: block; width: 100%; border: 0; background: #000; }
.od-reel--vertical .od-reel-frame { height: 580px; }
.od-reel--wide .od-reel-frame { width: 100%; aspect-ratio: 16 / 9; }
/* Platform-coloured badges */
.od-reel--instagram .od-reel-badge { background: linear-gradient(135deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.od-reel--tiktok .od-reel-badge { background: #000; }
.od-reel--facebook .od-reel-badge { background: #1877f2; }
.od-reel--youtube .od-reel-badge { background: #ff0000; }
.od-reel--vimeo .od-reel-badge { background: #1ab7ea; }

/* "Grab your badge" self-serve page */
.od-badgepage { max-width: 900px; }
.od-badge-cta { margin: .3rem 0 1.2rem; }
.od-badge-cta .od-btn { font-size: 1rem; padding: .7rem 1.2rem; }
.od-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.od-badge-card { border: 1px solid var(--od-line); border-radius: .6rem; padding: 1rem; background: #fff; }
.od-badge-preview { display: flex; align-items: center; justify-content: center; min-height: 78px; padding: .6rem; background: var(--od-stone); border-radius: .5rem; }
/* Name + copy button sit on one row under the preview; wraps on very narrow screens. */
.od-badge-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.od-badge-name { margin: 0; font-weight: 700; color: var(--od-ink); font-size: .95rem; }
.od-badge-copy { flex: 0 0 auto; }
/* The raw HTML is secondary (and useless on a phone), so it lives in a toggle. */
.od-badge-details { margin-top: .7rem; }
.od-badge-details summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--od-green-d); }
/* Template CSS defeats the native closed-details collapse, so hide it explicitly. */
.od-badge-details:not([open]) .od-badge-codeview { display: none !important; }
.od-badge-codeview { margin: .5rem 0 0; font-family: monospace; font-size: .74rem; line-height: 1.4; color: var(--od-granite); background: var(--od-stone); border: 1px solid var(--od-line); border-radius: .4rem; padding: .5rem; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }

/* Gallery - grid */
.od-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.od-grid a { display: block; }
.od-grid img { width: 100%; height: 130px; object-fit: cover; border-radius: .45rem; }
.od-grid figcaption { font-size: .78rem; color: var(--od-muted); margin-top: .2rem; }

/* Gallery - carousel */
.od-carousel { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.od-carousel a { flex: 0 0 auto; scroll-snap-align: start; }
.od-carousel img { height: 220px; width: auto; border-radius: .45rem; }

/* Gallery - slideshow */
.od-slideshow { }
.od-slide-stage { position: relative; background: var(--od-stone); border-radius: .5rem; overflow: hidden; }
.od-slide-stage img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.od-slide-img { transition: opacity .35s ease; }
.od-slide-img.is-fading { opacity: 0; }
/* UIkit gallery slideshow (fade) + thumbnails */
.od-ukss .uk-slideshow-items { border-radius: .5rem; overflow: hidden; }
/* Show photos at their true size (never upscaled/stretched), centred within the
   frame, with a soft accent-colour field around small or odd-shaped images.
   The link fills the slide so UIkit's animation stays intact; the image is
   centred inside it at natural size (capped, so it only ever scales DOWN). */
.od-ukss .uk-slideshow-items > li > a { display: block; position: relative; width: 100%; height: 100%; }
.od-ukss .uk-slideshow-items > li > a > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.od-ukss .uk-slideshow-items > li:nth-child(4n+1) { background: #edf2ec; }
.od-ukss .uk-slideshow-items > li:nth-child(4n+2) { background: #f4e9f0; }
.od-ukss .uk-slideshow-items > li:nth-child(4n+3) { background: #fbf1d8; }
.od-ukss .uk-slideshow-items > li:nth-child(4n+4) { background: #e9efe6; }
.od-place-gallery-ss { margin: 1.6rem 0; }
.od-ukss .uk-thumbnav > * > a { opacity: .5; transition: opacity .2s ease; }
.od-ukss .uk-thumbnav > .uk-active > a,
.od-ukss .uk-thumbnav > * > a:hover { opacity: 1; }
.od-ukss-thumb { display: block; width: 90px; height: 60px; object-fit: cover; border-radius: .25rem; }
.od-slide-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 1.2rem; cursor: pointer; }
.od-slide-nav.prev { left: .6rem; } .od-slide-nav.next { right: .6rem; }
.od-slide-thumbs { display: flex; gap: .4rem; margin-top: .5rem; overflow-x: auto; }
.od-slide-thumbs img { height: 56px; width: 76px; object-fit: cover; border-radius: .3rem; cursor: pointer; opacity: .55; border: 2px solid transparent; }
.od-slide-thumbs img.is-active { opacity: 1; border-color: var(--od-green); }

/* Video */
.od-videos .ratio { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 1rem; }
.od-videos .ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: .5rem; }

/* Map */
.od-map { height: 340px; border-radius: .5rem; }

/* =====================================================================
   Stage 2 - directory / category listing pages + map page chrome
   ===================================================================== */
/* The display font on h1 now comes from the template (.odt h1), which covers
   every view including any added later. There used to be a hand-written list of
   view classes here with !important, and every new view that was forgotten got
   the body font instead. Only size/colour/spacing belong here now. */
.od-directory h1, .od-categories h1, .od-category h1, .od-map-page h1 {
    font-size: 2.4rem; color: var(--od-ink); margin: 0 0 1.1rem;
}
.od-category .od-crumb { font-size: .95rem; margin-bottom: .6rem; }
.od-category .od-crumb a { color: var(--od-granite); text-decoration: none; }
.od-category .od-crumb a:hover { color: var(--od-green-d); }
.od-lead { color: var(--od-muted); font-size: 1.05rem; max-width: 60ch; margin: 0 0 1.4rem; }
.od-empty { color: var(--od-muted); font-size: 1.05rem; }
.od-fuzzy-note { color: var(--od-muted); font-size: 0.98rem; margin: 0 0 1.2rem; padding: 0.6rem 0.9rem; background: var(--od-sand, #f5f4ef); border-left: 3px solid var(--od-green, #6b7f5b); border-radius: 4px; }
.od-fuzzy-note strong { color: var(--od-ink); }
.od-custom { line-height: 1.6; }
.od-custom > :first-child { margin-top: 0; }
.od-custom iframe, .od-custom img, .od-custom video, .od-custom blockquote { max-width: 100%; }

/* Active tag filter heading + browse-by-tag cloud */
.od-active-filter { font-size: 1.1rem; color: var(--od-ink); margin: 0 0 1.1rem; }
.od-active-filter a { margin-left: .6rem; font-size: .95rem; color: var(--od-green-d); }
.od-tagcloud { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 1.6rem; }
.od-tagcloud-label { font-weight: 600; color: var(--od-granite); margin-right: .3rem; }
.od-tagcloud .od-chip-extra { display: none; }
.od-tagcloud.show-all .od-chip-extra { display: inline-block; }
.od-tagmore { background: none; border: 0; color: var(--od-green-d); font-weight: 600; cursor: pointer; font-size: .9rem; padding: .2rem .4rem; }
.od-tagmore:hover { text-decoration: underline; }

/* Tags on directory tiles */
.od-tile-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.od-tile-tag { font-size: .76rem; text-decoration: none; padding: .1rem .45rem; border-radius: 1rem; background: var(--od-green-l); color: var(--od-green-d); }
.od-tile-tag:hover { background: var(--od-green); color: #fff; }

/* Filter bar */
.od-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* Contact form */
.od-contact-page h1 { font-size: 2rem; color: var(--od-ink); margin: 0 0 1rem; }
.od-contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.8rem; align-items: start; }
.od-contact-layout.is-single { grid-template-columns: 1fr; }
@media (max-width: 820px) { .od-contact-layout { grid-template-columns: 1fr; } }
.od-contact-form.od-card { padding: 1.4rem 1.5rem; }
.od-form-section { font-size: 1.2rem; color: var(--od-green-d); margin: 1.4rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--od-line); }
.od-form-section:first-child { margin-top: 0; }
.od-contact-layout.is-single .od-contact-form.od-card { max-width: 640px; }
.od-contact-img { width: 100%; border-radius: .6rem; margin-bottom: 1.1rem; display: block; }

/* FAQ accordion (native details/summary, no JS) */
.od-faq details { border: 1px solid var(--od-line); border-radius: .5rem; background: #fff; margin-bottom: .55rem; }
.od-faq summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; color: var(--od-ink); list-style: none; display: flex; justify-content: space-between; gap: .5rem; }
.od-faq summary::-webkit-details-marker { display: none; }
.od-faq summary::after { content: '+'; color: var(--od-green-d); font-weight: 700; }
.od-faq details[open] summary { color: var(--od-green-d); }
.od-faq details[open] summary::after { content: '\2212'; }
.od-faq-answer { padding: 0 .9rem .85rem; line-height: 1.55; }
.od-cf-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.od-cf-row label { font-weight: 600; color: var(--od-granite); }
.od-contact-form textarea.od-input { resize: vertical; min-height: 9rem; }
.od-contact-form .od-btn { margin-top: .3rem; }
.od-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.od-contact-thanks { background: var(--od-green-l); border: 1px solid var(--od-line); border-radius: .6rem; padding: 1.5rem; max-width: 640px; }
.od-contact-thanks h2 { color: var(--od-green-d); margin: 0 0 .5rem; font-size: 1.4rem; }
.od-contact-thanks .od-btn { margin-top: 1rem; }

/* Search suggestions dropdown */
.od-search-wrap { position: relative; }
.od-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid var(--od-line); border-radius: .45rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .12); display: none; overflow: hidden; }
.od-suggest-item { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding: .5rem .8rem; text-decoration: none; color: var(--od-ink); }
.od-suggest-item:hover { background: var(--od-green-l); }
.od-suggest-label { font-weight: 500; }
.od-suggest-sub { font-size: .8rem; color: var(--od-muted); text-transform: capitalize; white-space: nowrap; }
.od-filters .od-field { flex: 1 1 240px; }
.od-filters .od-field-submit { flex: 0 0 auto; }
.od-input, .od-select { width: 100%; padding: .62rem .8rem; border: 1px solid var(--od-line); border-radius: .45rem; font-size: 1rem; background: #fff; color: var(--od-ink); }
.od-input:focus, .od-select:focus { outline: none; border-color: var(--od-green); box-shadow: 0 0 0 3px var(--od-green-l); }
.od-filters .od-btn { height: 100%; }

/* Listing tiles (directory, category, places, place views).
   The grid is UIkit's (uk-grid + uk-child-width-*), so these rules only theme
   the card to the Our Dartmoor look. UIkit's uk-card-default is white with a
   shadow and square corners; ours is white with a hairline border, rounded, and
   lifts on hover.

   The fixed image ratio below is deliberate and is NOT something UIkit does: it
   is what lets photographs of wildly different sizes sit together tidily in a
   grid. Do not drop it in favour of uk-cover, which needs JS and reflows. */
.od-tiles { margin-left: -1.3rem; }
.od-tiles > * { padding-left: 1.3rem; }
.od-tile.uk-card,
.od-tile { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; overflow: hidden; box-shadow: none; transition: box-shadow .15s, transform .15s; }
.od-tile.uk-card:hover,
.od-tile:hover { box-shadow: 0 7px 20px rgba(0, 0, 0, .1); transform: translateY(-3px); }
/* The grid column wrapper, which is what gets hidden when filtering. */
.od-tile-col[hidden] { display: none; }
.od-tile-img { display: block; aspect-ratio: 3 / 2; background: var(--od-green-l); }
.od-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logos (no cover photo): contain + centre on a neutral panel instead of cropping */
.od-tile-img.is-logo { background: #fff; }
.od-tile-img.is-logo img { object-fit: contain; padding: 14px; }
/* Book / publication covers: show the whole (portrait) cover, do not stretch it */
.od-tile-img.is-cover { background: var(--od-stone); }
.od-tile-img.is-cover img { object-fit: contain; padding: 8px; }
.od-tile-body { padding: .85rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.od-tile-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.od-tile h2 { font-family: 'Cabin Sketch', 'Cabin', cursive !important; font-weight: 700; font-size: 1.55rem; margin: .1rem 0 0; line-height: 1.15; }
.od-tile h2 a { color: var(--od-ink); text-decoration: none; }
.od-tile h2 a:hover { color: var(--od-green-d); }
.od-tile-town { color: var(--od-muted); font-size: .95rem; margin: 0; }
.od-tile-text { font-size: .95rem; line-height: 1.5; margin: .15rem 0 0; }

/* Category cards */
.od-cat-group { margin-bottom: 2.6rem; }
.od-cat-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.od-cat-group-head h2 { font-size: 1.5rem; color: var(--od-ink); margin: 0 0 .2rem; }
.od-catcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; margin-top: .7rem; }
.od-catcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; overflow: hidden; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.od-catcard:hover { box-shadow: 0 7px 20px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.od-catcard-img { aspect-ratio: 3 / 2; background: var(--od-green-l); }
.od-catcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-catcard-body { padding: .8rem 1rem; }
.od-catcard-title { font-family: 'Cabin Sketch', 'Cabin', cursive !important; font-weight: 700; display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; font-size: 1.5rem; color: var(--od-ink); margin: 0; }
.od-count { background: var(--od-green-l); color: var(--od-green-d); border-radius: 1rem; padding: .12rem .6rem; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.od-catcard-text { font-size: 1rem; color: var(--od-muted); margin: .4rem 0 0; }

/* Pagination - centred numbers in equal boxes (neutralises Bootstrap page-link) */
.od-pagination { margin-top: 2rem; }
.od-pagination ul, .od-pagination .pagination { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; justify-content: center; }
.od-pagination li { margin: 0; }
.od-pagination a, .od-pagination span, .od-pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5em; height: 2.5em; padding: 0 .6rem; margin: 0;
    border: 1px solid var(--od-line); border-radius: .4rem; box-sizing: border-box;
    text-decoration: none; color: var(--od-green-d); background: #fff; font-size: 1rem;
}
.od-pagination a:hover, .od-pagination .page-link:hover { border-color: var(--od-green); background: var(--od-green-l); }
.od-pagination .active span, .od-pagination .active a, .od-pagination .active .page-link { background: var(--od-green); color: #fff; border-color: var(--od-green); }
.od-pagination .disabled span, .od-pagination .disabled .page-link { color: #bbb; }
.od-pagination .counter { margin-top: .7rem; text-align: center; color: var(--od-muted); font-size: .9rem; }
/* Prev/next/first/last arrows: Joomla emits empty <span class="icon-angle-*">
   spans that rely on an icomoon font we don't load, so they showed as blank
   boxes-within-boxes. Neutralise the inner box and draw plain chevrons. */
.od-pagination [class^="icon-angle"], .od-pagination [class*=" icon-angle"] {
    display: inline; min-width: 0; height: auto; padding: 0; margin: 0;
    border: 0; background: none; border-radius: 0; font-style: normal; font-size: 1.15rem; line-height: 1;
}
.od-pagination .icon-angle-left::before { content: '\2039'; }         /* single left  */
.od-pagination .icon-angle-right::before { content: '\203A'; }        /* single right */
.od-pagination .icon-angle-double-left::before { content: '\00AB'; }  /* double left  */
.od-pagination .icon-angle-double-right::before { content: '\00BB'; } /* double right */

/* Map page chrome */
.od-map-controls { background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; padding: 1rem; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 820px) { .od-map-controls { grid-template-columns: 1fr; } }
.od-label { font-size: .9rem; color: var(--od-granite); font-weight: 600; display: block; margin-bottom: .3rem; }
.od-input-group { display: flex; }
.od-input-group .od-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.od-input-group .od-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.od-place-status { font-size: .9rem; color: #b3261e; margin-top: .3rem; min-height: 1.1em; }
.od-map-hint { margin: 0 0 .7rem; color: var(--od-muted); font-size: .9rem; }
.od-fullmap { height: 72vh; min-height: 440px; border-radius: .6rem; }

/* Gorse card: the highlighted "use the layers button" note above the map */
.od-gorse-card { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; padding: .85rem 1.1rem; background: #fbf1c4; border: 1px solid #e6cf6a; border-left: 4px solid #e0b400; border-radius: .5rem; color: #4a4326; }
.od-gorse-card i { font-size: 1.3rem; color: #c99a00; flex: 0 0 auto; }
.od-gorse-card p { margin: 0; font-weight: 600; }

/* "Find out more about the map layers" info list below the map */
.od-map-layers-info { margin: 1.6rem 0 0; }
.od-map-layers-info h2 { font-size: 1.3rem; color: var(--od-ink); margin: 0 0 .3rem; }
.od-mli-intro { color: var(--od-muted); margin: 0 0 .9rem; }
.od-map-layers-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.od-map-layers-info li { list-style: none !important; margin: 0; padding: .75rem .95rem; border: 1px solid var(--od-line); border-radius: .5rem; background: #fff; }
.od-map-layers-info li::marker { content: ""; }
.od-mli-name { display: block; font-weight: 700; color: var(--od-ink); }
.od-mli-desc { display: block; color: var(--od-granite); font-size: .95rem; margin: .15rem 0 .45rem; }
.od-mli-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--od-green-d); text-decoration: none; font-weight: 600; font-size: .9rem; }
.od-mli-link:hover { text-decoration: underline; }
.od-mli-link i { font-size: .8rem; color: var(--od-muted); }
@media (min-width: 720px) { .od-map-layers-info ul { grid-template-columns: 1fr 1fr; } }
.od-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .5); }
.od-type-filters { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.od-type-filter { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .95rem; }
.od-type-filter .swatch { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .4); }
.leaflet-popup-content .od-view-listing { display: inline-block; margin-top: .4rem; color: var(--od-green-d); font-weight: 600; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(121, 141, 83, .35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--od-green); color: #fff; font-weight: 600; }

/* =====================================================================
   Events
   ===================================================================== */
.od-events-page h1 { font-size: 2rem; color: var(--od-ink); margin: 0 0 .4rem; }
.od-events-toggle { margin: 0 0 1.5rem; }
.od-events-toggle a { color: var(--od-green-d); text-decoration: none; font-weight: 600; }
.od-events-toggle a:hover { text-decoration: underline; }

.od-events { display: flex; flex-direction: column; gap: 1rem; }
.od-event { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; overflow: hidden; transition: box-shadow .15s; }
.od-event:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .09); }
.od-event-date { flex: 0 0 88px; background: var(--od-green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem .3rem; }
.od-event-date .day { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.od-event-date .mon { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.od-event-date .yr { font-size: .75rem; opacity: .85; }
.od-event-body { padding: .85rem 1.1rem; flex: 1; min-width: 0; }
.od-event-body h2 { font-size: 1.35rem; margin: 0 0 .25rem; line-height: 1.2; }
.od-event-body h2 a { color: var(--od-ink); text-decoration: none; }
.od-event-body h2 a:hover { color: var(--od-green-d); }
.od-event-when { color: var(--od-muted); font-size: .95rem; margin: 0 0 .3rem; }
.od-event-venue { font-size: .95rem; margin: 0 0 .4rem; }
.od-event-venue a { color: var(--od-green-d); }
.od-event-price { font-size: .95rem; font-weight: 600; color: var(--od-green-d); margin: 0 0 .4rem; }
.od-event-snippet { font-size: .95rem; line-height: 1.5; margin: 0; }
.od-event-thumb { flex: 0 0 150px; }
.od-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) { .od-event-thumb { display: none; } }

/* Calendar */
.od-toggle-sep { color: var(--od-line); margin: 0 .5rem; }
.od-cal-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1rem; }
.od-cal-month { font-size: 1.4rem; font-weight: 700; color: var(--od-ink); min-width: 9em; text-align: center; }
.od-cal { border: 1px solid var(--od-line); border-radius: .6rem; overflow: hidden; }
.od-cal-head, .od-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.od-cal-wd { background: var(--od-green); color: #fff; text-align: center; font-weight: 600; font-size: .85rem; padding: .5rem .2rem; text-transform: uppercase; letter-spacing: .03em; }
.od-cal-cell { min-height: 96px; border-right: 1px solid var(--od-line); border-bottom: 1px solid var(--od-line); padding: .3rem; background: #fff; }
.od-cal-cell:nth-child(7n) { border-right: 0; }
.od-cal-cell.is-blank { background: var(--od-stone); }
.od-cal-cell.is-today { background: var(--od-green-l); }
.od-cal-cell.is-today .od-cal-day { background: var(--od-green); color: #fff; }
.od-cal-day { font-size: .85rem; color: var(--od-muted); font-weight: 600; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.od-cal-event { display: block; margin-top: .2rem; padding: .15rem .35rem; border-radius: .3rem; background: var(--od-green); color: #fff; font-size: .78rem; line-height: 1.25; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-cal-event:hover { background: var(--od-green-d); color: #fff; }
.od-cal-event .t { font-weight: 700; margin-right: .2rem; }
@media (max-width: 620px) {
    .od-cal-cell { min-height: 64px; }
    .od-cal-event { font-size: .68rem; }
    .od-cal-wd { font-size: .7rem; }
}

/* Single event */
.od-event-single .od-back { margin-bottom: 1rem; }
.od-event-single h1 { font-size: 2.2rem; color: var(--od-ink); margin: 0 0 .5rem; }
.od-event-hero { width: 100%; max-height: 360px; object-fit: cover; border-radius: .6rem; margin: 0 0 1.3rem; }
.od-event-meta { display: flex; flex-direction: column; gap: .5rem; background: var(--od-stone); border: 1px solid var(--od-line); border-radius: .6rem; padding: 1rem 1.1rem; margin-bottom: 1.3rem; font-size: 1.05rem; }
.od-event-meta .row-i { display: flex; gap: .6rem; align-items: flex-start; }
.od-event-meta .row-i i { color: var(--od-green-d); width: 1.2em; text-align: center; margin-top: .2rem; }
.od-event-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0; }
.od-event-more { margin: 1rem 0; font-size: 1.05rem; }
.od-event-more a { color: var(--od-green-d); font-weight: 600; text-decoration: none; }
.od-event-more a:hover { text-decoration: underline; }

/* Suggest-a-listing call to action on a listing page */
.od-suggest-cta { margin-top: 2.2rem; padding: 1.3rem 1.4rem; background: var(--od-green-l); border: 1px solid var(--od-line); border-radius: .6rem; text-align: center; }
.od-suggest-cta p { margin: 0 0 .8rem; color: var(--od-ink); font-size: 1.05rem; }
.od-suggest-btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Safety warning shown above the AI note on tors and heritage listings */
.od-safety-note { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0; padding: .85rem 1rem; background: #fdeee0; border: 1px solid #f0c89a; border-left: 3px solid #d97a2b; border-radius: .5rem; }
.od-safety-note i { color: #c25a12; font-size: 1.1rem; margin-top: .12rem; flex: 0 0 auto; }
.od-safety-note p { margin: 0; font-size: .92rem; line-height: 1.55; color: #6b4a2a; }
.od-safety-note a { color: #b5540f; font-weight: 700; white-space: nowrap; }

/* AI-assisted heritage: disclaimer note + further reading */
.od-ai-note { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0; padding: .85rem 1rem; background: var(--od-stone); border: 1px solid var(--od-line); border-left: 3px solid var(--od-green); border-radius: .5rem; }
.od-ai-note i { color: var(--od-green-d); font-size: 1.05rem; margin-top: .15rem; flex: 0 0 auto; }
.od-ai-note p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--od-granite); }
.od-ai-note a { color: var(--od-green-d); font-weight: 600; }

.od-further { margin: 1.6rem 0; }
.od-further h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; color: var(--od-granite); margin: 0 0 .3rem; }
.od-further-intro { margin: 0 0 .7rem; color: var(--od-muted); font-size: .95rem; }
.od-further-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.od-further-list li { list-style: none !important; margin: 0; padding: 0; }
.od-further-list li::marker { content: ""; }
.od-further-list a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: .45rem; border: 1px solid var(--od-line); background: #fff; color: var(--od-green-d); text-decoration: none; font-size: .92rem; font-weight: 600; transition: all .15s; }
.od-further-list a:hover { border-color: var(--od-green); background: var(--od-green-l); }
.od-further-list i { font-size: .8rem; color: var(--od-muted); }

.od-cf-hint { display: block; margin-top: .3rem; color: var(--od-muted); font-size: .82rem; }

/* Suggest-an-edit link kept close to the listing content */
.od-edit-inline { margin: 1.1rem 0 0; font-size: .9rem; }
.od-edit-inline a { display: inline-flex; align-items: center; gap: .4rem; color: var(--od-granite); text-decoration: none; }
.od-edit-inline a:hover { color: var(--od-green-d); }
.od-edit-inline i { font-size: .8rem; }

/* Photo credits beneath a gallery (CC attribution) */
.od-img-credits { margin: .55rem 0 0; font-size: .8rem; font-style: italic; color: var(--od-muted); }

/* Place (village/town) landing pages */
.od-place, .od-places-index { max-width: 1100px; margin: 0 auto; }
/* Place page: other places nearby */
.od-place-nearby { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--od-line); }
.od-place-nearby h2 { margin: 0 0 1rem; }
.od-nearby-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.od-nearby { display: block; text-decoration: none; color: var(--od-ink); border-radius: .5rem; overflow: hidden; border: 1px solid var(--od-line); background: #fff; transition: box-shadow .15s, transform .15s; }
.od-nearby:hover { box-shadow: 0 5px 14px rgba(0,0,0,.1); transform: translateY(-2px); color: var(--od-ink); }
.od-nearby-img { display: block; aspect-ratio: 3 / 2; background: var(--od-green-l); }
.od-nearby-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-nearby-img.is-empty { background: linear-gradient(135deg, var(--od-green-l), #fff); }
.od-nearby-body { display: block; padding: .5rem .6rem .6rem; }
.od-nearby-name { display: block; font-weight: 600; font-size: .84rem; line-height: 1.25; }
.od-nearby-dist { display: block; font-size: .72rem; color: var(--od-muted); margin-top: .15rem; }
@media (max-width: 900px) { .od-nearby-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .od-nearby-list { grid-template-columns: repeat(2, 1fr); } }

/* Places index: search + area chips. All places stay in the page and are hidden
   with [hidden], so the index remains a single crawlable hub. */
.od-places-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 0 0 1.4rem; }
.od-places-search { flex: 0 1 260px; }
.od-places-search .od-input { width: 100%; }
.od-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.od-chip {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    font-size: .82rem; font-weight: 600; padding: .35rem .8rem; border-radius: 1rem;
    border: 1px solid var(--od-line); background: #fff; color: var(--od-granite);
    transition: background .15s, color .15s, border-color .15s;
}
.od-chip:hover { border-color: var(--od-green); color: var(--od-green-d); }
.od-chip.is-on { background: var(--od-green); border-color: var(--od-green); color: #fff; }
.od-chip-n { font-size: .72rem; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.od-places-none { padding: 1.5rem 0; color: var(--od-muted); }
.od-tile[hidden] { display: none; }

.od-place-cover { margin-bottom: 1.4rem; }
.od-place-cover img { width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; border-radius: .6rem; }
/* Creative Commons covers must name the photographer, so the credit is part of
   the cover, not an optional extra. */
.od-place-cover-credit { margin: .45rem 0 0; font-size: .72rem; line-height: 1.4; color: var(--od-muted); }
.od-place-cover-credit a { color: var(--od-green-d); }
.od-place-head h1 { margin: 0 0 .3rem; }
.od-head-village { margin: .25rem 0 0; font-size: 1.02rem; }
.od-head-village a { color: var(--od-green); font-weight: 600; text-decoration: none; }
.od-head-village a:hover { text-decoration: underline; }

.od-place-count { color: var(--od-green); font-weight: 600; margin: 0 0 1.2rem; }
.od-place-count a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.od-place-count a:hover { color: var(--od-green-d); }
.od-place-intro { font-size: 1.12rem; line-height: 1.7; color: var(--od-ink); margin-bottom: 1.6rem; }
.od-place-intro p { margin: 0 0 1rem; }
.od-place-notes { background: var(--od-green-l); border-left: 4px solid var(--od-green); border-radius: .4rem; padding: 1rem 1.2rem; margin: 0 0 1.6rem; font-style: italic; color: var(--od-ink); }
.od-place-notes-label { display: block; font-style: normal; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--od-green); margin-bottom: .4rem; }
.od-place-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; margin-bottom: 1.8rem; }
.od-place-gallery figure { margin: 0; }
.od-place-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: .5rem; display: block; }
.od-place-gallery figcaption { font-size: .82rem; color: var(--od-muted); margin-top: .3rem; }
.od-place-gallery a.od-lb { cursor: zoom-in; display: block; }

/* Lightbox for place gallery */
.od-lightbox-overlay { position: fixed; inset: 0; background: rgba(20,22,18,.93); display: none; align-items: center; justify-content: center; z-index: 9999; }
.od-lightbox-overlay.is-open { display: flex; }
.od-lightbox-overlay img { max-width: 92vw; max-height: 82vh; border-radius: .4rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.od-lightbox-cap { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; color: #fff; font-size: 1rem; padding: 0 1rem; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.od-lightbox-close, .od-lightbox-nav { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer; line-height: 1; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.od-lightbox-close { top: 3%; right: 3%; font-size: 2rem; }
.od-lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.od-lightbox-prev { left: 2%; }
.od-lightbox-next { right: 2%; }
.od-lightbox-close:hover, .od-lightbox-nav:hover { background: rgba(255,255,255,.28); }
@media (max-width: 560px) { .od-lightbox-nav { width: 42px; height: 42px; font-size: 1.8rem; } }

.od-place-mapwrap { margin-bottom: 1.8rem; scroll-margin-top: 1rem; }
.od-place-mapwrap h2, .od-place-listings h2 { font-size: 1.4rem; margin: 0 0 .9rem; }
.od-place-map { height: 360px; border-radius: .6rem; border: 1px solid var(--od-line); }
.od-place-listings { margin-bottom: 1.6rem; scroll-margin-top: 1rem; }
.od-place-empty { color: var(--od-muted); font-style: italic; }
.od-place-back { margin-top: 1.4rem; }
.od-places-lead { color: var(--od-muted); font-size: 1.05rem; margin-bottom: 1.4rem; }

/* "You might also like" related listings */
.od-related { margin-top: 2.4rem; }
.od-related h2 { font-size: 1.5rem; color: var(--od-ink); margin: 0 0 1rem; }
.od-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.od-related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; overflow: hidden; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.od-related-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.od-related-img { display: block; aspect-ratio: 3 / 2; background: var(--od-green-l) center / cover no-repeat; }
.od-related-body { padding: .6rem .7rem .8rem; }
.od-related-name { display: block; font-weight: 600; color: var(--od-ink); line-height: 1.2; }
.od-related-town { display: block; font-size: .85rem; color: var(--od-muted); margin-top: .15rem; }

/* Kind Words (testimonials) */
.od-kindwords-page h1 { font-size: 2rem; color: var(--od-ink); margin: 0 0 1.3rem; }
.od-kindwords { display: flex; flex-direction: column; gap: 1.1rem; max-width: 760px; }
.od-kw { margin: 0; background: #fff; border: 1px solid var(--od-line); border-left: 4px solid var(--od-green); border-radius: .6rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.od-kw-body { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.55; color: var(--od-ink); }
/* line-height:0 keeps the larger quote marks from stretching the first line */
.od-kw-body::before, .od-kw-body::after { color: var(--od-green); font-weight: 700; font-size: 1.25rem; line-height: 0; vertical-align: -.3rem; }
.od-kw-body::before { content: '\201C'; margin-right: .12rem; }
.od-kw-body::after { content: '\201D'; margin-left: .06rem; }
.od-kw-cite { margin-top: auto; font-style: normal; }
.od-kw-name { display: block; font-weight: 700; color: var(--od-ink); }
.od-kw-name a { color: var(--od-green-d); text-decoration: none; }
.od-kw-name a:hover { text-decoration: underline; }
.od-kw-role { display: block; font-size: .9rem; color: var(--od-muted); }
.od-kw-about { display: inline-block; margin-top: .3rem; font-size: .85rem; color: var(--od-green-d); text-decoration: none; }
.od-kw-about:hover { text-decoration: underline; }
.od-kindwords-block { margin-top: 2.2rem; }
.od-kindwords-block h2 { font-size: 1.5rem; color: var(--od-ink); margin: 0 0 1rem; }
/* Kind Words landing: intro, per-listing groups and the closing invitation */
.od-kw-intro { max-width: 760px; font-size: 1.12rem; line-height: 1.65; color: var(--od-ink); margin: 0 0 2rem; }
.od-kw-section-head { font-family: 'Cabin Sketch', 'Cabin', cursive !important; font-weight: 700; font-size: 1.7rem; color: var(--od-ink); margin: 2.2rem 0 1.1rem; }
.od-kw-group { max-width: 760px; margin: 0 0 1.8rem; }
.od-kw-group-title { font-size: 1.2rem; margin: 0 0 .7rem; }
.od-kw-group-title a { color: var(--od-green-d); text-decoration: none; }
.od-kw-group-title a:hover { text-decoration: underline; }
/* 2-up listing cards: image + name + the kind words below.
   Multi-column (masonry-style) so cards of different heights pack together and
   fill the space instead of leaving gaps in a rigid grid. */
.od-kw-grid { column-count: 2; column-gap: 1.5rem; margin: 0 0 1.5rem; }
.od-kw-card { background: #fff; border: 1px solid var(--od-line); border-radius: .7rem; overflow: hidden; margin: 0 0 1.5rem; break-inside: avoid; -webkit-column-break-inside: avoid; }
.od-kw-card-img { display: block; aspect-ratio: 16 / 9; background: var(--od-green-l) center / cover no-repeat; }
.od-kw-card-img.is-empty { background: linear-gradient(135deg, var(--od-green-l), #fff); }
.od-kw-card-body { padding: 1.1rem 1.3rem 1.3rem; }
.od-kw-card-title { font-family: 'Cabin Sketch', 'Cabin', cursive !important; font-weight: 700; font-size: 1.5rem; margin: 0 0 .8rem; line-height: 1.1; }
.od-kw-card-title a { color: var(--od-green-d); text-decoration: none; }
.od-kw-card-title a:hover { text-decoration: underline; }
.od-kw-card .od-kindwords { max-width: none; gap: 0; }
.od-kw-card .od-kw { border: 0; border-radius: 0; background: none; padding: 0; }
.od-kw-card .od-kw + .od-kw { border-top: 1px solid var(--od-line); margin-top: 1rem; padding-top: 1rem; }
@media (max-width: 700px) { .od-kw-grid { column-count: 1; } }
.od-kw-cta { max-width: 760px; margin: 2.6rem 0 0; padding: 1.15rem 1.35rem; background: var(--od-green-l); border-radius: .6rem; line-height: 1.55; color: var(--od-ink); }

/* ---------------------------------------------------------------------------
   Historic map timeline (view=timeline)
   --------------------------------------------------------------------------- */
.od-timeline-page { color: var(--od-ink); }
.od-timeline-page h1 { margin: .1rem 0 .6rem; }
.od-tl-intro { color: var(--od-muted); max-width: 760px; margin-bottom: 1.2rem; }

.od-tl-stage { position: relative; }
.od-tl-map { width: 100%; border-radius: .6rem; border: 1px solid var(--od-line); background: var(--od-stone); }
.od-tl-map .leaflet-container { border-radius: .6rem; }

.od-tl-hint {
    position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 500;
    background: #fff8e1; border: 1px solid #d6b656; color: #6b5310;
    padding: .4rem .9rem; border-radius: 1rem; font-size: .82rem; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none;
}

/* Control panel sits under the map so it never hides the moor. */
.od-tl-panel { margin-top: .9rem; border-radius: .6rem; }
.od-tl-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; flex-wrap: wrap; }
.od-tl-dates {
    font-family: 'Cabin Sketch', 'Cabin', cursive; font-weight: 700;
    font-size: 1.7rem; line-height: 1; color: var(--od-green-d); white-space: nowrap;
}
.od-tl-title { flex: 1 1 12rem; color: var(--od-muted); font-size: .88rem; line-height: 1.3; }
.od-tl-play { flex: 0 0 auto; }

.od-tl-ticks { display: flex; margin-top: .3rem; font-size: .66rem; color: var(--od-muted); }
.od-tl-ticks span { flex: 1; text-align: center; }
.od-tl-ticks span:first-child { text-align: left; }
.od-tl-ticks span:last-child { text-align: right; }
.od-tl-ticks span.on { color: var(--od-green-d); font-weight: 700; }

.od-tl-blend-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.od-tl-pct { color: var(--od-green-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-tl-blend-row { display: flex; align-items: center; gap: .7rem; }
.od-tl-blend-row .uk-range { flex: 1; }
.od-tl-end { font-size: .72rem; color: var(--od-muted); white-space: nowrap; }
.od-tl-osbase { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; font-size: .82rem; color: var(--od-muted); cursor: pointer; }

.od-tl-credit { margin: .8rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--od-muted); }
.od-tl-credit a { color: var(--od-green-d); }

/* The article below is hand-written; give it room to breathe but do not
   impose a layout on it beyond a comfortable measure. */
.od-tl-article { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--od-line); line-height: 1.65; }
.od-tl-article > h2:first-child { margin-top: 0; }
.od-tl-article img { max-width: 100%; height: auto; border-radius: .4rem; }
.od-tl-article a { color: var(--od-green-d); }

@media (max-width: 700px) {
    .od-tl-map { height: 380px !important; }
    .od-tl-dates { font-size: 1.35rem; }
    .od-tl-title { flex-basis: 100%; order: 3; }
    .od-tl-ticks span { font-size: .58rem; }
    .od-tl-end { font-size: .64rem; }
}
.od-kw-cta a { color: var(--od-green-d); font-weight: 600; text-decoration: none; white-space: nowrap; }
.od-kw-cta a:hover { text-decoration: underline; }
/* Leave-kind-words button + form extras */
.od-kw-empty { color: var(--od-muted); margin: 0 0 1rem; }
.od-kw-leave { display: inline-flex; margin-top: 1rem; }
.od-captcha { display: block; margin: .8rem 0 .2rem; }
.od-btn-ghost { background: #fff; color: var(--od-green-d); border: 1px solid var(--od-line); margin-left: .5rem; }
.od-btn-ghost:hover { border-color: var(--od-green); background: var(--od-green-l); }
/* "from {business}" link on kind-words cards (completes the circle) */
.od-kw-from { display: inline-block; margin-top: .2rem; font-size: .9rem; color: var(--od-green-d); text-decoration: none; }
.od-kw-from::before { content: '\2197'; margin-right: .25rem; }
.od-kw-from:hover { text-decoration: underline; }
.od-field-note { font-size: .85rem; color: var(--od-muted); margin: .35rem 0 0; }
/* "Your own listing" autocomplete on the Leave Kind Words form */
.od-ac-wrap { position: relative; }
.od-ac { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--od-line); border-radius: .4rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .12); overflow: hidden; margin-top: .2rem; }
.od-ac-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .55rem .8rem; font-size: .95rem; color: var(--od-ink); cursor: pointer; }
.od-ac-item span { color: var(--od-muted); font-size: .85rem; }
.od-ac-item:hover { background: var(--od-green-l); color: var(--od-green-d); }

/* Upcoming events block on a listing page */
.od-listing-events { margin-top: 1.6rem; }
.od-listing-events h2 { font-size: 1.3rem; color: var(--od-ink); margin: 0 0 .7rem; }
.od-mini-events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.od-mini-events li { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; padding: .55rem .8rem; background: var(--od-stone); border: 1px solid var(--od-line); border-radius: .45rem; }
.od-mini-events .od-mini-date { color: var(--od-green-d); font-weight: 600; font-size: .9rem; min-width: 9em; }
.od-mini-events a { color: var(--od-ink); text-decoration: none; font-size: 1.05rem; }
.od-mini-events a:hover { color: var(--od-green-d); }

/* News aggregator */
.od-news { max-width: 820px; }
.od-news-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.od-news-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--od-line); }
.od-news-thumb { flex: 0 0 150px; display: block; border-radius: .5rem; overflow: hidden; background: var(--od-stone); }
.od-news-thumb img { display: block; width: 150px; height: 100px; object-fit: cover; }
.od-news-body { flex: 1 1 auto; min-width: 0; }
.od-news-title { display: inline-block; font-size: 1.18rem; font-weight: 700; color: var(--od-green-d); text-decoration: none; line-height: 1.35; }
.od-news-title:hover { text-decoration: underline; }
.od-news-excerpt { margin: .45rem 0; color: var(--od-granite); font-size: .96rem; line-height: 1.55; }
@media (max-width: 560px) {
    .od-news-item { flex-direction: column; gap: .6rem; }
    .od-news-thumb { flex-basis: auto; width: 100%; }
    .od-news-thumb img { width: 100%; height: 190px; }
}
.od-news-meta { margin: 0; font-size: .82rem; color: var(--od-muted); display: flex; gap: .35rem .85rem; flex-wrap: wrap; align-items: baseline; }
.od-news-src { color: var(--od-muted); font-weight: 600; text-decoration: none; }
.od-news-src:hover { color: var(--od-green-d); text-decoration: underline; }
.od-news-empty { margin: 1.6rem 0; padding: 1.1rem 1.2rem; background: var(--od-stone); border: 1px solid var(--od-line); border-radius: .5rem; color: var(--od-granite); }
.od-news-credit { margin-top: 1.5rem; font-size: .82rem; color: var(--od-muted); font-style: italic; }

/* ---- Sun & Golden Hour: per-listing card + standalone map ---------------- */
/* "Golden hour" sidebar card on a listing (heading inherits the sidebar
   card size from the template, matching Contact/Follow) */
.od-goldenhour .od-gh-times { list-style: none; margin: 0 0 .5rem; padding: 0; }
.od-goldenhour .od-gh-times li { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .38rem 0; border-bottom: 1px dashed var(--od-line); }
.od-goldenhour .od-gh-times li:last-child { border-bottom: 0; }
.od-goldenhour .od-gh-times span { color: var(--od-muted); font-size: .9rem; }
.od-goldenhour .od-gh-times b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--od-ink); }
.od-goldenhour .od-gh-times li.gh b { color: #8a5e0c; }
.od-goldenhour .od-gh-dir { margin: .2rem 0 .7rem; font-size: .84rem; color: var(--od-muted); }
.od-goldenhour .od-gh-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--od-green-d); text-decoration: none; font-size: .9rem; }
.od-goldenhour .od-gh-link::after { content: "\2192"; }
.od-goldenhour .od-gh-link:hover { text-decoration: underline; }

/* Standalone sun map page */
.od-sun-page { max-width: 1180px; margin: 0 auto; }
.od-sun-intro { color: var(--od-granite); max-width: 62ch; margin: .2rem 0 1.2rem; }
.od-sun-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; margin-bottom: 1rem; }
.od-sun-controls .od-control { min-width: 240px; }
.od-sun-scrub { width: 100%; margin-top: .5rem; accent-color: #E0A526; }
.od-btn-ghost { background: transparent; border: 1px solid var(--od-line); color: var(--od-green-d); }
.od-btn-ghost:hover { background: var(--od-green-l); }
.od-sun-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 780px) { .od-sun-layout { grid-template-columns: 1fr; } }
.od-sun-map { height: 540px; border-radius: .6rem; border: 1px solid var(--od-line); z-index: 0; }
@media (max-width: 780px) { .od-sun-map { height: 380px; } }
.od-sun-panel { background: #fff; border: 1px solid var(--od-line); border-radius: .6rem; padding: 1rem 1.1rem; position: sticky; top: 1rem; }
.od-sun-panel h2 { font-size: 1.02rem; margin: 0 0 .15rem; color: var(--od-ink); line-height: 1.3; }
.od-sun-date-label { font-size: .85rem; color: var(--od-muted); margin: 0 0 .7rem; }
.od-sun-date-label:empty { margin: 0; }
.od-sun-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--od-line); }
.od-sun-row span { color: var(--od-muted); font-size: .9rem; }
.od-sun-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.od-sun-row.gh b { color: #8a5e0c; }
.od-sun-daylight { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; padding-top: .6rem; }
.od-sun-daylight span { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--od-muted); }
.od-sun-daylight b { font-size: 1.25rem; font-weight: 700; color: var(--od-green-d); font-variant-numeric: tabular-nums; }
.od-sun-dir { margin: .5rem 0 0; font-size: .84rem; color: var(--od-granite); }
.od-sun-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--od-line); font-size: .78rem; color: var(--od-muted); }
.od-sun-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.od-sun-legend .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.od-sun-legend .sw.dash { background: repeating-linear-gradient(90deg,#9aa0a6 0 3px,transparent 3px 6px); }