/* ============================================================
   Our Dartmoor — organic/woodcut redesign, Phase 2: Full Listing page
   Loaded after organic-cards.css. Restyles the REAL listing markup
   (.od-listing / .od-head / .od-tabs / .od-kindwords-block etc, from
   components/com_ourdartmoor/tmpl/listing/default.php) to match
   organic-unified.html (header/kind-words/map) and echo the main nav's
   own tab-underline language rather than a separate folder-tab design.
   Companion script: js/organic-listing.js (card textures + tab scribble).
   No-ops on every other page (guarded on .od-listing existing). ============================================================ */

/* ---- header: badges as pills, big hand-lettered name, tidy location line ---- */
.od-badges{display:flex;flex-wrap:wrap;gap:8px;}
.od-badge{font:600 .68rem/1 var(--od-font,'Cabin',sans-serif) !important;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .6rem !important;border:1px solid rgba(79,106,44,.4) !important;color:var(--moor,#4f6a2c) !important;
  background:rgba(79,106,44,.10) !important;border-radius:3px !important;}
.od-badge.is-featured{border-color:rgba(224,165,38,.5) !important;color:#8a5a0c !important;background:rgba(224,165,38,.15) !important;}
.od-badge.is-social,.od-badge.is-online{border-color:rgba(138,94,147,.4) !important;color:var(--heather-deep) !important;background:rgba(138,94,147,.12) !important;}

.od-head h1{font-family:var(--od-display,'Cabin Sketch',cursive) !important;font-weight:700;font-size:clamp(2rem,4vw,2.7rem);
  line-height:1.0;color:#33301f;margin:.3rem 0 0;}
.od-head-place{font:600 .78rem/1 var(--od-font,'Cabin',sans-serif) !important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moor,#4f6a2c);margin:.5rem 0 0 !important;}
.od-head-logo{border-radius:4px;box-shadow:0 3px 8px rgba(30,24,12,.2);transform:rotate(-3deg);}

.od-hero{border-radius:3px;box-shadow:0 10px 22px rgba(48,40,26,.18),0 3px 8px rgba(48,40,26,.12);}

/* ---- tabs: same mechanic as the search button (organic-skin.css/
   organic-nav.js) - no scribble at rest, bounces in from the right on hover,
   stays in for the active tab, text sits above it. No z-index on .od-tabbtn
   itself (would trap the label below the scribble the way .odt-go did before
   that got fixed) - the label span carries its own z-index instead. Paul,
   2026-09-18: "apply this idea to the tabs and we can work from there". */
.od-tabbar{position:relative;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line,#e2e4e1);padding:0;list-style:none;}
.od-tabbtn{position:relative;font:600 .92rem/1 var(--od-font,'Cabin',sans-serif) !important;
  padding:.8rem 1.1rem;cursor:pointer;color:var(--slate,#6b7077);background:none !important;
  border:none !important;border-radius:0 !important;}
.od-tabbtn.is-active{color:#2b2822 !important;font-weight:700;}
/* site.css's OWN active-tab indicator - a horizontal rainbow gradient bar
   along the top of the tab - is still in the cascade underneath this file
   and now clashes with ours; drop it (Paul, 2026-09-18: "get rid of...
   the horizontal follower on the active tab"). */
.od-tabbtn.is-active::after{display:none !important;}
/* Rainbow mark on the active tab - wider/taller now, reading as a proper
   band rather than a thin sliver, since it's the ONLY persistent "you are
   here" cue now the horizontal one above is gone (Paul, 2026-09-18: "make
   the vertical rainbow run partway across the active tab"). */
/* Now a wash that extends ~75% across the tab and fades out (via mask, so
   the colour stops stay crisp and only the opacity trails off), sitting
   BEHIND the label (z-index 2, label is 4) rather than a solid edge bar
   (Paul, 2026-09-18: "extend about 75% into the active tab, fading as it
   does - to appear behind the text"). */
.od-tabbtn.is-active::before{content:'';position:absolute;left:0;top:6%;
  width:90%;height:88%;border-radius:4px;
  background:var(--rainbow-organic);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);
  z-index:2;}
.od-tabbtn.is-active .od-tab-label{padding-left:10px;}
.od-tab-label{position:relative;z-index:4;transition:padding .2s;}
.od-tab-scribble{position:absolute;opacity:0;z-index:3;pointer-events:none;overflow:visible;
  transform:translateX(var(--scr-x,24px));transition:opacity .3s var(--bounce,cubic-bezier(.34,1.56,.64,1)),transform .4s var(--bounce,cubic-bezier(.34,1.56,.64,1));}
.od-tab-scribble.in{opacity:1;transform:translateX(0);}
.od-tab-scribble path{fill:none;stroke-linecap:round;stroke-linejoin:round;}

.od-panel{background:none;border:none;padding:1.1rem 0;}

/* Button shape/scribble/tilt (sketch-button, bounce-in scribble) moved to
   organic-skin.css - now site-wide, not just this page (Paul, 2026-09-18:
   "please put this site wide (including the search button on the search
   bar)"). See organic-skin.css's ".od-btn, .od-share-btn, .odt-go" block. */

/* "Visit website" (the primary, non-ghost action button) reads in plain
   white-on-green by default; Paul wants it to stand out more at rest, not
   just on hover. Gorse text on the same green fill. */
.od-listing .od-actions .od-btn:not(.is-ghost) .od-btn-label{color:var(--p-gorse,#f0d69a);}
.od-listing .od-actions .od-btn:not(.is-ghost):hover .od-btn-label{color:#fff;}

/* ---- map: jaunty cream-bordered frame, matching the cover/gallery language ---- */
.od-map{border:10px solid #fbf8f0;box-shadow:0 10px 22px rgba(48,40,26,.16);border-radius:2px;}

/* ---- kind words: pastel-rainbow accent bar (the nav's own --rainbow-organic)
   instead of a plain single-colour border + oversized quote mark, which read
   as two clashing designs mashed together (Paul, 2026-09-18). Simpler now:
   italic quote text, no decorative glyph, rainbow spine on the left. */
.od-kindwords{display:flex;flex-direction:column;gap:0;}
.od-kw{position:relative;margin:0 0 18px;padding:0;border:none !important;background:none !important;}
/* !important throughout: user.css's own `.odt-main blockquote` rule (higher
   specificity, loads last) otherwise wins on this element - it IS a
   <blockquote>, which is why a green card box was showing through. */
.od-kw-body{position:relative;margin:8px 0 0 !important;padding:6px 8px 6px 20px !important;
  border-left:none !important;background:none !important;
  font-family:var(--od-lead,'EB Garamond',Georgia,serif) !important;font-style:italic !important;
  font-size:1.2rem !important;line-height:1.45;color:#37321f !important;}
/* Same fading-wash technique as the active tab indicator, not a plain 4px
   bar - random width per quote (JS sets --kw-w, up to 90%), faded via mask
   so only opacity trails off, blurred for a soft/organic left edge instead
   of a ruler-straight line. On .od-kw (the whole figure: quote + citation)
   rather than just .od-kw-body, so it runs the full height of the section,
   not just the blockquote text (Paul, 2026-09-18: "the distance needs to be
   up to 90%... make the left edges less rigid... the gradient can be the
   whole height of the sections as well"). Opacity bumped ~20% darker per
   Paul, 2026-09-18 ("the wash needs to be about 20% darker": .22 -> .27). */
.od-kw::before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--kw-w,40%);
  border-radius:3px;background:var(--rainbow-organic);opacity:.27;filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%);}
/* site.css's OWN small opening quote mark (.od-kw-body::before, content
   '\201C') is still in the cascade - I only ever killed its ::after (close)
   twin and moved MY wash onto a DIFFERENT element (.od-kw, not .od-kw-body),
   so this one kept quietly rendering alongside the new bigger mark (Paul,
   2026-09-18: "there is a random extra speech mark... the one that was
   there originally"). Kill it too. */
.od-kw-body::before{content:"" !important;}
.od-kw-body::after{content:"" !important;}
.od-kw-cite{display:block;margin-top:8px;padding-left:20px;font-size:.9rem;font-style:normal;font-weight:600;color:var(--moor-deep,#3d5222);}
.od-kw-name::before{content:"\2014 ";}
/* Open/close quote marks as REAL inserted spans (organic-listing.js), not
   ::before/::after - those two slots are already spoken for by the wash
   above and by killing site.css's own close-quote, and juggling more than
   one decorative mark through only 2 pseudo-element slots per element is
   exactly what kept going wrong here (Paul, 2026-09-18: "this seems to be a
   reoccurring problem when we do quotes"). Plain inline text-flow marks
   sidestep all the positioning/z-index fights entirely. */
.od-kw-mark{font-family:var(--od-serif,'Cinzel',serif);font-style:normal;font-size:1.7em;
  line-height:0;vertical-align:-.12em;color:var(--heather,#b98bb0);}
/* Section heading in the decorative display face like every other heading
   on the page (h1, card titles) - was plain body Cabin, which read as
   inconsistent/like ordinary text rather than a section heading (Paul,
   2026-09-18: "the title 'Kind Words' needs to be in Cabin Font"). */
.od-kindwords-block h2{font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;color:#33301f;}

/* ---- "You might also like" (related listings): same display font as the
   section heading above, and the small photo cards pick up the site's own
   language - jaunty random tilt (straightens + lifts on hover), ink border,
   Cabin Sketch name (Paul, 2026-09-18: "can the 'You might also like' be in
   Cabin and the little links with photos take on some of our style
   additions?"). ---- */
.od-related h2{font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;color:#33301f;}
.od-related-card{border:none !important;border-radius:14px 4px 14px 4px !important;
  box-shadow:0 4px 10px rgba(74,59,50,.15);transform:rotate(var(--cr,0deg));
  transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;}
.od-related-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 10px 20px rgba(74,59,50,.22);}
.od-related-name{font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700 !important;font-size:1.05rem;color:#33301f;}
/* Explicit, deliberate hover colour instead of whatever weight/colour shift
   was happening implicitly before (Paul, 2026-09-18: "is the text going
   bold? It doesn't look good - just have it go heather or green"). Weight
   pinned to the same 700 as rest so nothing can visibly heavy-up on hover. */
.od-related-card:hover .od-related-name{color:var(--heather-deep,#6b4763);}

/* ---- sidebar cards (Contact / Follow / Along the way / Golden hour /
   Categories / Tags): same torn-material wall/wood/lichen texture language as
   the Directory results cards (organic-cards.css), randomised by
   organic-listing.js. Paul, 2026-09-18: "can we think about using the card
   textures (animations etc) on the Contact/Follow/Golden Hour/Categories and
   Tags sections?" ---- */
/* overflow:visible !important - site.css has a SECOND, unrelated `.od-card`
   rule (the news/updates card grid, same class name reused) later in the
   file with `overflow:hidden`, same specificity, which was clipping the
   title clean off when it slid/scaled past the card edge on hover
   (Paul, 2026-09-18: "the text... if it zooms outside the card it vanishes"). */
.od-card{position:relative;overflow:visible !important;border:none !important;border-radius:3px !important;
  background-size:cover;background-repeat:no-repeat;background-position:var(--bp,center);
  box-shadow:0 6px 14px rgba(48,40,26,.12),0 2px 5px rgba(48,40,26,.08) !important;
  transform:rotate(var(--cr,0deg));
  transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;}
.od-card.wall  {background-color:#e9eae7;background-image:linear-gradient(rgba(233,234,230,.85),rgba(236,237,233,.92)),var(--tex);}
.od-card.wood  {background-color:#efe7d1;background-image:linear-gradient(rgba(245,235,205,.83),rgba(247,238,212,.90)),var(--tex);}
.od-card.lichen{background-color:#eae0ec;background-image:linear-gradient(rgba(237,227,240,.83),rgba(240,231,242,.90)),var(--tex);}
/* Angled at rest, not just on hover (Paul, 2026-09-18: "the Contact/Follow
   section all need to be angled very slightly"). --cr is the same random
   per-card value set by organic-listing.js. */
.od-card:hover{transform:translateY(-4px) rotate(var(--cr,-0.8deg));box-shadow:0 12px 22px rgba(48,40,26,.18),0 4px 8px rgba(48,40,26,.12) !important;}
/* Giant one-line auto-fit title, same treatment + technique as the Directory
   results cards (organic-cards.css/js's .od-tile-body h2 a + fitTitles()) -
   sized to fill the card width by organic-listing.js, slides+scales on
   hover of the WHOLE card. Paul, 2026-09-18: "Can we have the titles... do
   the same as the listing results... echo the styling from before". */
.od-card h2{font-family:var(--od-display,'Cabin Sketch',cursive) !important;font-weight:700;
  line-height:1.0 !important;white-space:nowrap;text-transform:none !important;letter-spacing:0 !important;
  margin:0 0 .6rem !important;display:inline-block;
  transform:translateX(var(--tx,0px));transition:transform .4s cubic-bezier(.2,.85,.3,1);}
.od-card:hover h2{transform:translateX(calc(var(--tx,0px) + var(--slide,14px))) scale(1.05);}
.od-card.wall   h2{color:#5d5748;}
.od-card.wood   h2{color:#3a2f22;}
.od-card.lichen h2{color:#4a3550;}
.od-card .od-chip{border:1px solid rgba(107,71,99,.35) !important;background:rgba(255,255,255,.55) !important;
  color:var(--heather-deep,#6b4763) !important;}
.od-card .od-chip:hover{border-color:var(--heather,#b98bb0) !important;background:var(--heather-deep,#6b4763) !important;color:#fff !important;}
.od-card .od-chip.is-tag{background:rgba(255,255,255,.55) !important;color:var(--moor-deep,#3d5222) !important;border-color:rgba(79,106,44,.35) !important;}
.od-card .od-chip.is-tag:hover{background:var(--moor-deep,#3d5222) !important;color:#fff !important;border-color:var(--moor-deep,#3d5222) !important;}
/* Social icons were going white-on-white (site.css's own hover sets the icon
   itself to white; our near-white hover background then hid it entirely) -
   Paul, 2026-09-18: "make sure all the links on these sections will be
   easily viewable on mouseover". Solid colour fill + white icon reads
   clearly against every card tint instead. */
.od-card .od-social a{background:rgba(255,255,255,.6) !important;border:1px solid rgba(0,0,0,.08) !important;
  color:var(--heather-deep,#6b4763) !important;transition:transform .24s var(--bounce,cubic-bezier(.34,1.56,.64,1)),background .2s,color .2s;}
.od-card .od-social a:hover{transform:translateY(-3px) scale(1.12);
  background:var(--heather-deep,#6b4763) !important;border-color:var(--heather-deep,#6b4763) !important;color:#fff !important;}
/* Contact links (website/email) and the Golden hour sun-map link - plain
   text links on a photographic card background can wash out; give hover a
   solid, unmistakable colour change of its own. */
.od-card .od-contact a:hover,.od-card .od-gh-link:hover{color:var(--heather-deep,#6b4763) !important;text-decoration:underline;}

body.sensible-on .od-tab-scribble{display:none !important;}

@media(prefers-reduced-motion:reduce){
  .od-tab-scribble{transition:none;}
}