/* Guides: long-form articles under /guides/ and the guides index */

.page-header__byline { color: rgba(235,247,238,0.85); font-size: var(--text-sm); font-weight: 700; margin-top: var(--space-4); }
.page-header__crumbs { color: rgba(235,247,238,0.8); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3); }
.page-header__crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.article { background: var(--mint); padding: var(--rhythm) var(--space-6) calc(var(--rhythm) * 1.5); }
.article__body { max-width: 760px; margin-inline: auto; color: #3d4a48; font-size: var(--text-base); line-height: 1.75; }
.article__body h2 { color: var(--teal); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; margin: calc(var(--rhythm) * 1.1) 0 var(--space-4); scroll-margin-top: calc(var(--nav-height, 72px) + 16px); }
.article__body h3 { color: var(--teal-dark); font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); scroll-margin-top: calc(var(--nav-height, 72px) + 16px); }
.article__body p { margin: 0 0 var(--space-4); }
.article__body ul, .article__body ol { margin: 0 0 var(--space-5); padding-left: 1.3em; display: grid; gap: var(--space-2); }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li::marker { color: var(--teal); }
.article__body a { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article__body strong { color: var(--teal-dark); }

/* Key takeaways: the short answer, up top, for readers and AI summaries alike */
.takeaways { background: var(--white); border-left: 5px solid var(--gold); border-radius: var(--border-radius); padding: var(--space-5) var(--space-6); box-shadow: 0 4px 24px rgba(30,134,127,0.08); margin-bottom: var(--rhythm); }
.takeaways h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); color: var(--teal-dark); }
.takeaways ul { margin: 0; }

.toc { background: rgba(30,134,127,0.06); border-radius: var(--border-radius); padding: var(--space-4) var(--space-6); margin-bottom: var(--rhythm); }
.toc p { margin: 0 0 var(--space-2); font-weight: 800; color: var(--teal-dark); }
.toc ol { margin: 0; }
.article__body .toc a { color: var(--teal-dark); }

/* "How we do it" callouts: our own practice, kept separate from general advice */
.callout { background: var(--teal); color: var(--cream); border-radius: var(--border-radius-lg); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.callout h3, .callout strong { color: var(--cream); margin-top: 0; }
.callout ul { margin-bottom: 0; }
.callout li::marker { color: var(--gold); }
.callout a { color: var(--cream); }
.callout--warn { background: #fff4e5; color: #5a3b12; border-left: 5px solid #e0a040; }
.callout--warn h3, .callout--warn strong { color: #5a3b12; }
.callout--warn li::marker { color: #e0a040; }

.table-wrap { overflow-x: auto; margin: 0 0 var(--space-6); border-radius: var(--border-radius); box-shadow: 0 2px 12px rgba(30,134,127,0.08); }
.article__body table { width: 100%; border-collapse: collapse; background: var(--white); font-size: var(--text-sm); line-height: 1.5; }
.article__body th, .article__body td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid rgba(30,134,127,0.12); }
.article__body th { background: rgba(30,134,127,0.08); color: var(--teal-dark); font-weight: 800; }

.sources { font-size: var(--text-sm); }
.sources li { word-break: break-word; }

/* Author box */
.author { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; background: var(--white); border-radius: var(--border-radius-lg); padding: var(--space-5) var(--space-6); margin-top: var(--rhythm); box-shadow: 0 4px 24px rgba(30,134,127,0.08); }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--white); box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.15)); }
.author p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.author strong { display: block; font-size: var(--text-base); }

/* FAQ inside an article reuses the site's FAQ styles; tighten its section padding */
.article .faq__grid { grid-template-columns: 1fr; }

/* Guides index */
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); max-width: 1000px; margin: 0 auto; }
.guide-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(30,134,127,0.08); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(30,134,127,0.14); }
.guide-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--focus, 50% 40%); display: block; }
.guide-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.guide-card__eyebrow { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown); margin: 0 0 var(--space-2); }
.guide-card h2 { color: var(--teal-dark); font-size: var(--text-xl); line-height: 1.3; margin: 0 0 var(--space-2); }
.guide-card p { color: #4a4a4a; font-size: var(--text-sm); line-height: 1.6; margin: 0 0 var(--space-3); }
.guide-card span { color: var(--teal); font-weight: 800; font-size: var(--text-sm); }
@media (max-width: 760px) { .guide-list { grid-template-columns: 1fr; } }

/* =====================================================
   Off-leash park finder (js/park-finder.js)
   ===================================================== */
.pf { max-width: 1200px; margin: 0 auto var(--rhythm); scroll-margin-top: calc(var(--nav-height, 72px) + 16px); }
.pf__intro { max-width: 760px; margin: 0 auto var(--space-5); }
.pf__controls { background: var(--white); border-radius: var(--border-radius-lg); padding: var(--space-5); box-shadow: 0 4px 24px rgba(30,134,127,0.08); display: grid; gap: var(--space-4); }
.pf__search { width: 100%; font: inherit; font-size: var(--text-base); padding: 12px 16px; border-radius: var(--border-radius-full); border: 2px solid rgba(30,134,127,0.25); background: var(--mint); color: var(--teal-dark); }
.pf__search:focus { outline: none; border-color: var(--teal); }
.pf__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pf-chip { font: inherit; font-size: var(--text-sm); font-weight: 700; padding: 6px 14px; border-radius: var(--border-radius-full); border: 2px solid var(--teal); background: transparent; color: var(--teal); cursor: pointer; }
.pf-chip[aria-pressed="true"] { background: var(--teal); color: var(--cream); }
.pf__toggles { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 700; color: var(--teal-dark); }
.pf__toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pf__toggles input { accent-color: var(--teal); width: 18px; height: 18px; }
.pf__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--teal-dark); }
.pf__count { font-weight: 800; }

.pf__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
.pf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-height: 640px; overflow-y: auto; padding-right: 4px; }
.pf__map { height: 640px; border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(30,134,127,0.12); background: #dfe9e6; position: sticky; top: calc(var(--nav-height, 72px) + 16px); z-index: 0; }

.pf-card { background: var(--white); border-radius: var(--border-radius); padding: var(--space-4) var(--space-5); box-shadow: 0 2px 12px rgba(30,134,127,0.08); border: 2px solid transparent; cursor: pointer; font-size: var(--text-sm); line-height: 1.55; color: #3d4a48; }
.pf-card:hover, .pf-card:focus-visible, .pf-card--active { border-color: var(--teal); outline: none; }
.pf-card h3 { margin: 0; font-size: var(--text-lg); color: var(--teal-dark); }
.pf-card__where { margin: 2px 0 var(--space-2); color: #6b6b6b; font-weight: 700; font-size: var(--text-xs); }
.pf-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.pf-badge { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(30,134,127,0.1); color: var(--teal-dark); }
.pf-badge--ok { background: rgba(30,134,127,0.16); }
.pf-badge--warn { background: #fff0d9; color: #8a5a17; }
.pf-card p { margin: 0 0 var(--space-2); }
.pf-card__amen { color: #6b6b6b; }
.pf-card__links { display: flex; gap: var(--space-4); margin: var(--space-2) 0 0 !important; }
.pf-card__links a { color: var(--teal); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.pf-empty { padding: var(--space-5); text-align: center; color: var(--teal-dark); background: var(--white); border-radius: var(--border-radius); }

.pf-pin { display: grid; place-items: center; }
.pf-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 16px; }

@media (max-width: 860px) {
  .pf__body { grid-template-columns: 1fr; }
  .pf__map { position: relative; top: 0; height: 320px; order: -1; }
  .pf__list { max-height: none; overflow: visible; }
}

/* =====================================================
   Suburb landing pages (dog-walker-*.html)
   ===================================================== */
.lp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: 0 0 var(--space-6); }
.lp-facts p { margin: 0; background: var(--white); border-radius: var(--border-radius); padding: var(--space-3) var(--space-4); box-shadow: 0 2px 12px rgba(30,134,127,0.08); font-size: var(--text-sm); line-height: 1.45; color: #4a4a4a; }
.lp-facts strong { display: block; color: var(--teal-dark); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin-bottom: 2px; }
@media (max-width: 760px) { .lp-facts { grid-template-columns: 1fr 1fr; } }

.article__body .lp-parks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0 0 var(--space-5); }
.lp-park { background: var(--white); border-radius: var(--border-radius); padding: var(--space-4) var(--space-5); box-shadow: 0 2px 12px rgba(30,134,127,0.08); font-size: var(--text-sm); line-height: 1.55; }
.article__body .lp-park h3 { margin: 0; font-size: var(--text-lg); color: var(--teal-dark); }
.lp-park p { margin: 0 0 var(--space-2); }
.lp-park__where { color: #6b6b6b; font-weight: 700; font-size: var(--text-xs); }
.lp-park__links { display: flex; gap: var(--space-4); margin-bottom: 0 !important; }
@media (max-width: 760px) { .article__body .lp-parks { grid-template-columns: 1fr; } }

.lp-services { grid-template-columns: repeat(3, 1fr); max-width: none; padding-inline: 0; margin-bottom: var(--space-6); }
.article__body .lp-services a { text-decoration: none; font-weight: inherit; }
@media (max-width: 860px) { .lp-services { grid-template-columns: 1fr; } }

.lp-review { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); background: var(--white); border-left: 5px solid var(--gold); border-radius: var(--border-radius); box-shadow: 0 4px 24px rgba(30,134,127,0.08); }
.lp-review blockquote { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; color: var(--teal-dark); }
.lp-review figcaption { font-size: var(--text-sm); color: #4a4a4a; }
.lp-near { font-size: var(--text-sm); margin-top: var(--rhythm); }