/* ==========================================================================
   Landcycle – Planning applications (local authority) page
   File: css/landcycle-planning.css

   Load AFTER the live site stack, in this order:
     bootstrap@5.3.0-alpha1 → app-bootstrap.css → style.css → wp.css → THIS FILE

   Everything here is scoped to .lcp-page (the page's <main>), so the shared
   header, footer and other pages are untouched. New component classes use
   the "lcp-" prefix to avoid clashing with style.css / wp.css.

   Where this file deliberately departs from a live rule, the reason is noted.
   ========================================================================== */

:root {
  --lc-dark-green: #154734;
  --lc-dark-green-hover: #0f3527;
  --lc-light-green: #799900;
  --lc-light-green-hover: #657e02;   /* matches app-bootstrap.css .btn-success:hover */
  --lc-green-tint: #f2f5f3;
  --lc-green-tint-2: #e5ece8;
  --lc-lime-tint: #f1f5e0;
  --lc-pale-green: #edf4e6;          /* alternating section background */
  --lc-grey-text: #4a4f4c;           /* 8.6:1 on white */
  --lc-border: #d5ddd8;
  --lc-note: #5b2be0;                /* design-note colour, deliberately off-brand */
  --lc-note-bg: #f3efff;
}

/* --------------------------------------------------------------------------
   1. Page typography
   wp.css sets body to 14px "Nunito Sans" (a font the site never loads — only
   "Nunito" is requested) and `section` to Rajdhani. The brand guide asks for
   Rajdhani 500 at 17–18px because of its small x-height, so the page content
   is set to that here. The shared header keeps its live styling.
   -------------------------------------------------------------------------- */
.lcp-page {
  font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;          /* 18px */
  line-height: 1.5;
  color: #000;
  --bs-body-font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --bs-border-color: var(--lc-border);
}

/* wp.css colours h2–h6 Light green (#799900). That is 3.3:1 on white, which
   the brand guide only allows for large headings, so headings in page
   content use Dark green. Weight 600 matches wp.css. */
.lcp-page h2, .lcp-page h3, .lcp-page h4, .lcp-page h5 {
  color: var(--lc-dark-green);
  font-weight: 600;
  line-height: 1.15;
}
.lcp-page h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.lcp-page h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.lcp-page h2 a, .lcp-page h3 a { color: inherit; }
.lcp-page .text-secondary-lc { color: var(--lc-grey-text); }
.lcp-page a { text-underline-offset: 3px; }

/* wp.css gives every <section> 50px padding. Sections here use Bootstrap
   spacing utilities instead, so reset it. */
.lcp-page section { padding: 0; font-family: inherit; }

/* Section bands: full-width, alternating White / Pale green below the hero
   so each section reads as a separate block. Each band holds its own
   .container. */
.lcp-page .lcp-band { background-color: #fff; }
.lcp-page .lcp-band--tint { background-color: var(--lc-pale-green); }
.lcp-page .lcp-band--tint .accordion { --bs-accordion-bg: #fff; }

/* --------------------------------------------------------------------------
   2. Buttons
   app-bootstrap.css makes .btn-primary Dark green, but wp.css loads later and
   turns it Light green with white text (3.2:1, fails WCAG AA). Restore Dark
   green on this page. Light green buttons, pills and badges (.btn-success,
   .lcp-free, .lcp-step) use White text, which is 3.3:1 on #799900 and only
   passes WCAG AA as large text — so per the brand guide they are set in
   700 Bold at 19px+ (buttons 20px).
   -------------------------------------------------------------------------- */
.lcp-page .btn { font-weight: 600; }
.lcp-page .btn-primary {
  background-color: var(--lc-dark-green) !important;
  border-color: var(--lc-dark-green) !important;
  color: #fff !important;
}
.lcp-page .btn-primary:hover, .lcp-page .btn-primary:focus-visible {
  background-color: var(--lc-dark-green-hover) !important;
  border-color: var(--lc-dark-green-hover) !important;
}
.lcp-page .btn-success {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.25rem;            /* 20px – WCAG large bold text */
  padding: .875rem 1.75rem;      /* 14px 28px */
}
.lcp-page .btn-success:hover, .lcp-page .btn-success:focus-visible {
  background-color: var(--lc-light-green-hover) !important;
  border-color: var(--lc-light-green-hover) !important;
  color: #fff !important;
}

/* Filter "chips": Bootstrap .btn-check radios styled as pills. Bootstrap's
   default checked colour is blue, and app-bootstrap.css only covers
   .btn-outline-success, so set the checked state here. */
.lcp-page .btn-check + .btn-outline-primary { background: #fff; }
.lcp-page .btn-check:checked + .btn-outline-primary,
.lcp-page .btn-check + .btn-outline-primary:hover {
  background: var(--lc-dark-green) !important;
  border-color: var(--lc-dark-green) !important;
  color: #fff !important;
}
.lcp-chip-count { opacity: .75; font-weight: 500; font-size: .85em; margin-left: .25rem; }

/* Pagination: app-bootstrap.css sets the active page Light green with white
   text (3.2:1). Use Dark green on this page. */
.lcp-page .pagination { --bs-pagination-color: var(--lc-dark-green); }
.lcp-page .active > .page-link, .lcp-page .page-link.active {
  background-color: var(--lc-dark-green) !important;
  border-color: var(--lc-dark-green) !important;
  color: #fff;
}

/* Form controls: brand focus ring instead of Bootstrap blue. */
.lcp-page .form-control:focus, .lcp-page .form-select:focus {
  border-color: var(--lc-dark-green);
  box-shadow: 0 0 0 .2rem rgba(21, 71, 52, .2);
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
/* The hero sits on White (it was Dark green), so its text, links and
   stats use Dark green / Black. wp.css colours the h1 white, so it is reset. */
.lcp-hero { border-bottom: 1px solid var(--lc-border); }
.lcp-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; margin-bottom: .5rem; color: var(--lc-dark-green) !important; }
.lcp-hero .lead { color: #000; font-weight: 500; max-width: 44em; }
.lcp-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--lc-grey-text); --bs-breadcrumb-item-active-color: var(--lc-grey-text); font-size: .95rem; }
.lcp-hero .breadcrumb a { color: var(--lc-dark-green); }
.lcp-hero-search { max-width: 1040px; box-shadow: 0 6px 24px rgba(21,71,52,.12); border: 1px solid var(--lc-border); border-radius: .75rem; background: #fff; padding: .5rem; }
.lcp-hero-search .input-group { border: 1px solid var(--lc-border); border-radius: .5rem; overflow: hidden; height: 100%; }
.lcp-hero-search .input-group:focus-within { border-color: var(--lc-dark-green); }
.lcp-hero-search .form-control { border: 0; font-size: 1.15rem; }
.lcp-hero-search .form-control:focus { box-shadow: none; }
.lcp-hero-search .input-group-text { background: #fff; border: 0; color: var(--lc-grey-text); }
.lcp-hero-search .btn-success { white-space: nowrap; height: 100%; }
@media (max-width: 991.98px) { .lcp-hero-search .btn-success { white-space: normal; } }
.lcp-hero-search:focus-within { border-color: var(--lc-dark-green); box-shadow: 0 0 0 3px rgba(21,71,52,.2), 0 6px 24px rgba(21,71,52,.12); }
.lcp-hero-hint { color: var(--lc-grey-text); font-size: .95rem; }
.lcp-hero-hint a, .lcp-hero-hint .btn-link { color: var(--lc-dark-green) !important; padding: 0; vertical-align: baseline; font-size: inherit; font-weight: 600; text-decoration: underline; }
.lcp-stat { border-left: 3px solid var(--lc-light-green); padding-left: .9rem; }
.lcp-stat b { display: block; font-size: 1.9rem; line-height: 1.1; font-weight: 700; color: var(--lc-dark-green); }
.lcp-stat span { font-size: .95rem; color: var(--lc-grey-text); }

/* --------------------------------------------------------------------------
   4. Task cards
   wp.css restyles every .card with a 10px Light green border on the right
   and bottom and square corners. These cards use the standard Bootstrap
   card border instead (thin, grey, rounded), restored from Bootstrap's own
   card variables. The shadow comes from Bootstrap's .shadow class.
   -------------------------------------------------------------------------- */
.lcp-page .card.lcp-task {
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.lcp-task { transition: transform .15s; }
.lcp-task:hover { transform: translateY(-2px); }
.lcp-task .card-body { display: flex; flex-direction: column; gap: .35rem; }
.lcp-task p { color: var(--lc-grey-text); font-size: 1rem; margin: 0; flex: 1; }
.lcp-task .stretched-link { font-weight: 700; color: var(--lc-dark-green); text-decoration: none; margin-top: .5rem; }
.lcp-task-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--lc-lime-tint); color: var(--lc-dark-green); display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .25rem; }
.lcp-free {                      /* Light green pill – White text, 19px Bold */
  background-color: var(--lc-light-green) !important;
  color: #fff !important;
  font-size: 1.1875rem;          /* 19px */
  font-weight: 700;
  padding: .375rem 1rem;         /* 6px 16px */
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   5. Explorer: list + map
   -------------------------------------------------------------------------- */
.lcp-app { border: 1px solid var(--lc-border); border-radius: .6rem; background: #fff; transition: border-color .15s, box-shadow .15s; scroll-margin-top: 1rem; }
.lcp-app:hover, .lcp-app.is-active { border-color: var(--lc-dark-green); box-shadow: 0 4px 16px rgba(21,71,52,.08); }
.lcp-app h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.lcp-app h3 a { text-decoration: none; }
.lcp-app h3 a:hover { text-decoration: underline; }
.lcp-app-meta { font-size: .95rem; color: var(--lc-grey-text); }
.lcp-app-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .75rem; }
.lcp-app-actions a { font-weight: 600; color: var(--lc-dark-green); text-decoration: none; }
.lcp-app-actions a:hover { text-decoration: underline; }
.lcp-app-actions a.btn { color: #fff; }
.lcp-type-badge { background: var(--lc-green-tint-2); color: var(--lc-dark-green); font-weight: 700; font-size: .8rem; }

.lcp-map-panel { position: relative; height: 440px; border: 1px solid var(--lc-border); border-radius: .6rem; overflow: hidden; background: var(--lc-green-tint-2); }
/* The map no longer sticks on desktop: the forum discussions sit under it
   in the same column and fill the space beside the list. */
@media (min-width: 992px) { .lcp-map-panel { height: 560px; } }
.lcp-map { position: absolute; inset: 0; }
.lcp-map-cta { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 500; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
@media (max-width: 991.98px) {
  .lcp-explorer[data-view="list"] .lcp-map-panel { display: none; }   /* forum still shows, after the list */
  .lcp-explorer[data-view="list"] .lcp-forum-block { margin-top: 0 !important; }
  .lcp-explorer[data-view="map"] .lcp-list-col { display: none; }
}
.lcp-pin { width: 16px; height: 16px; border-radius: 50%; background: var(--lc-dark-green); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lcp-pin.on { background: var(--lc-light-green); transform: scale(1.5); }

/* --------------------------------------------------------------------------
   5b. Forum discussions
   -------------------------------------------------------------------------- */
/* Scoped as section.lcp-forum-block so it beats `.lcp-page section { padding: 0 }`
   above and the <section> styling in wp.css. */
.lcp-page section.lcp-forum-block { background-color: var(--lc-pale-green); border-radius: .6rem; padding: 1.25rem; }
@media (max-width: 575.98px) { .lcp-page section.lcp-forum-block { padding: 1rem; } }
.lcp-page .lcp-forum-title { font-size: 1.5rem; margin-bottom: .25rem; }
.lcp-forum { --bs-list-group-border-color: var(--lc-border); background: #fff; }
.lcp-post { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; }
.lcp-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--lc-dark-green); color: #fff; font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; overflow: hidden; }
.lcp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lcp-post-body { flex: 1; min-width: 0; }
.lcp-page .lcp-post-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .15rem; line-height: 1.3; }
.lcp-post-title a { color: #000; text-decoration: none; }
.lcp-post-title a:hover { color: var(--lc-dark-green); text-decoration: underline; }
.lcp-post-meta { font-size: .95rem; color: var(--lc-grey-text); }
.lcp-post-view { flex: none; }
@media (max-width: 575.98px) {
  .lcp-avatar { width: 44px; height: 44px; font-size: 1rem; }
  .lcp-post-view { display: none; }                 /* title link does the job on phones */
}

/* --------------------------------------------------------------------------
   6. Alerts band
   -------------------------------------------------------------------------- */
.lcp-alerts h2 { color: #fff; }
.lcp-alerts h2 em { font-style: normal; color: var(--lc-light-green); } /* large text: 3.2:1 passes AA large */
.lcp-alerts p, .lcp-alerts li { color: #e1ebe5; }
.lcp-alerts li b { color: #fff; }
.lcp-step { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lc-light-green); color: #fff; font-weight: 700; font-size: 1.25rem; display: grid; place-items: center; } /* White, 20px Bold = large text */
.lcp-alerts .form-label { font-weight: 600; }

/* Alerts video block (replaces the dark panel and form) */
.lcp-alerts-video { max-width: 860px; }
.lcp-alerts-video h2 em { font-style: normal; color: var(--lc-dark-green); }
.lcp-video { border-radius: .75rem; overflow: hidden; box-shadow: 0 10px 30px rgba(21,71,52,.15); background: var(--lc-dark-green); }
.lcp-video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #fff; background: linear-gradient(135deg, var(--lc-dark-green), #0f3527); }
.lcp-video-play { width: 84px; height: 84px; border-radius: 50%; background: var(--lc-light-green); color: #fff; display: grid; place-items: center; font-size: 2rem; padding-left: 6px; }
.lcp-video-label { font-size: 1.15rem; font-weight: 600; }

/* "Buying a home in Liverpool?" box */
.lcp-page .box_grid { background-color: var(--lc-pale-green) !important; border-radius: .6rem; }

/* --------------------------------------------------------------------------
   7. Postcode districts
   -------------------------------------------------------------------------- */
.lcp-district { display: flex; justify-content: space-between; align-items: baseline; text-decoration: none; height: 100%; }
.lcp-district:hover { border-color: var(--lc-dark-green) !important; }
.lcp-district b { font-size: 1.35rem; color: var(--lc-dark-green); }
.lcp-district small { color: var(--lc-grey-text); }
.lcp-streets { columns: 2 160px; }
.lcp-streets li { break-inside: avoid; }

/* --------------------------------------------------------------------------
   8. Accordions (glossary, FAQ, streets) – brand colours instead of blue
   -------------------------------------------------------------------------- */
.lcp-page .accordion {
  --bs-accordion-active-color: var(--lc-dark-green);
  --bs-accordion-active-bg: var(--lc-green-tint);
  --bs-accordion-btn-focus-border-color: var(--lc-dark-green);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(21,71,52,.2);
}
.lcp-page .accordion-button { font-weight: 600; font-size: 1.1rem; color: var(--lc-dark-green); font-family: inherit; }
.lcp-page .accordion-body { font-size: 1rem; }
.lcp-page .table th { color: var(--lc-dark-green); width: 34%; font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Footer — live wp.css styles <footer>. Only the logo size is added.
   -------------------------------------------------------------------------- */
footer .lcp-footer-logo { max-height: 25px; }

/* --------------------------------------------------------------------------
   10. Design notes (presentation only — remove before production)
   -------------------------------------------------------------------------- */
.lcp-note { display: none; position: relative; border: 2px dashed var(--lc-note); background: var(--lc-note-bg); color: #1d1240; border-radius: 10px; padding: 12px 14px 12px 52px; margin: 14px 0; font-size: 1rem; line-height: 1.45; font-family: 'Rajdhani', Arial, sans-serif; }
.lcp-note::before { content: attr(data-n); position: absolute; left: 12px; top: 11px; width: 28px; height: 28px; border-radius: 50%; background: var(--lc-note); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.lcp-note strong { color: var(--lc-note); }
.lcp-note code { background: #fff; padding: 0 4px; border-radius: 4px; font-size: .9em; color: #1d1240; }
body.show-notes .lcp-note { display: block; }
.lcp-notes-panel { display: none; border: 2px dashed var(--lc-note); background: var(--lc-note-bg); border-radius: 12px; padding: 20px 22px; color: #1d1240; font-size: 1rem; }
body.show-notes .lcp-notes-panel { display: block; }
.lcp-notes-panel h2 { color: var(--lc-note) !important; font-size: 1.5rem; }
.lcp-notes-panel code { background: #fff; padding: 0 4px; border-radius: 4px; color: #1d1240; }
.lcp-notes-panel h3 { color: #1d1240 !important; font-size: 1.15rem; }
.lcp-notes-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 1000; background: var(--lc-note); color: #fff; border: 0; border-radius: 99px; padding: 12px 18px; font: 700 1rem 'Rajdhani', Arial, sans-serif; box-shadow: 0 6px 20px rgba(91,43,224,.4); }

/* ==========================================================================
   11. Planning application details page (landcycle-planning-application.html)
   Shares everything above; these rules are only used on that page.
   ========================================================================== */
.lcp-ref { color: var(--lc-grey-text); font-size: .95rem; }
.lcp-status { font-weight: 700; font-size: .85rem; padding: .4em .8em; }
.lcp-status--pending { background: #fff4d6; color: #5c4400; }          /* 8.9:1 */
.lcp-status--approved { background: var(--lc-green-tint-2); color: var(--lc-dark-green); }
.lcp-status--refused { background: #fde4e1; color: #8a1c10; }

.lcp-keyfacts dt { font-size: .95rem; font-weight: 500; color: var(--lc-grey-text); order: 2; }
.lcp-keyfacts dd { font-size: 1.35rem; font-weight: 700; color: var(--lc-dark-green); line-height: 1.2; margin: 0; }
.lcp-keyfacts .lcp-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; height: 100%; }

/* White content panels on the pale green body band */
.lcp-page section.lcp-panel { background: #fff; border: 1px solid var(--lc-border); border-radius: .75rem; padding: 1.5rem; }
@media (min-width: 768px) { .lcp-page section.lcp-panel { padding: 1.75rem 2rem; } }
.lcp-page section.lcp-panel.p-0 { padding: 0; }
.lcp-panel h2 { font-size: 1.6rem; }
.lcp-quote { font-size: 1.2rem; border-left: 4px solid var(--lc-light-green); padding-left: 1rem; margin-bottom: 1.25rem; }
.lcp-explainer { background: var(--lc-pale-green); border-radius: .6rem; padding: 1rem 1.25rem; }
.lcp-page .lcp-explainer h3 { font-size: 1.1rem; margin-bottom: .35rem; }

/* Progress tracker */
.lcp-progress { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.lcp-progress::before { content: ""; position: absolute; top: 15px; left: 16.66%; right: 16.66%; height: 3px; background: var(--lc-border); }
.lcp-progress li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 0 .25rem; }
.lcp-progress small { color: var(--lc-grey-text); font-size: .9rem; }
.lcp-progress-dot { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--lc-border); display: grid; place-items: center; color: #fff; font-size: .9rem; margin-bottom: .35rem; position: relative; z-index: 1; }
.lcp-progress .is-done .lcp-progress-dot { background: var(--lc-dark-green); border-color: var(--lc-dark-green); }
.lcp-progress .is-current .lcp-progress-dot { border-color: var(--lc-dark-green); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 16px var(--lc-light-green); }
.lcp-progress .is-current b { color: var(--lc-dark-green); }

/* Map */
.lcp-app-map { height: 360px; background: var(--lc-green-tint-2); }
.lcp-map-links a { font-weight: 600; color: var(--lc-dark-green); }
/* planning location marker (ADO #544): user-marked sites and the tools to mark them */
.pl-marker-note { margin-bottom: 10px; padding: 10px 12px; border-left: 3px solid #0288d1; background: var(--lc-green-tint); }
.pl-marker-tools { margin-top: 10px; padding: 12px; border: 1px solid var(--lc-border); border-radius: 10px; background: #fff; }
.pl-marker-tools[hidden], .pl-marker-start[hidden] { display: none; }
/* !important as on the checked buttons above: public-site.css's .lc-site .lcp-page .btn-outline-primary resets the colour */
.pl-marker-mode.active, .pl-marker-mode.active:hover {
  background: var(--lc-dark-green) !important;
  border-color: var(--lc-dark-green) !important;
  color: #fff !important;
}

/* Details grid */
.lcp-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--lc-border); }
.lcp-details > div { padding: .8rem .25rem; border-bottom: 1px solid var(--lc-border); }
.lcp-details dt { font-size: .9rem; font-weight: 600; color: var(--lc-grey-text); }
.lcp-details dd { margin: 0; font-size: 1.1rem; }
.lcp-page .lcp-title-table th { width: auto; font-size: .95rem; }

/* Alert panel */
.lcp-page section.lcp-panel--alert { background: var(--lc-dark-green); border-color: var(--lc-dark-green); color: #fff; }
.lcp-page .lcp-panel--alert h2 { color: #fff; }
.lcp-panel--alert p { color: #e1ebe5; }

/* Forum prompts */
.lcp-prompt { display: flex; gap: .75rem; height: 100%; background: var(--lc-pale-green); border-radius: .6rem; padding: .9rem 1rem; font-size: 1rem; }
.lcp-prompt > i { color: var(--lc-dark-green); font-size: 1.25rem; margin-top: .2rem; width: 1.4rem; text-align: center; flex: none; }

/* Nearby */
.lcp-nearby { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; border: 1px solid var(--lc-border); border-radius: .6rem; padding: .9rem 1rem; text-decoration: none; color: #000; }
.lcp-nearby b { color: var(--lc-dark-green); font-size: 1.15rem; }
.lcp-nearby:hover { border-color: var(--lc-dark-green); }
.lcp-nearby:hover b { text-decoration: underline; }
/* Only the title is the link; stretched-link makes the whole card clickable */
.lcp-nearby b a { color: inherit; text-decoration: none; }
.lcp-nearby:hover b a { text-decoration: underline; }

/* Sidebar: on the pale green band, the forum block becomes a white card */
.lcp-app-page .lcp-band--tint section.lcp-forum-block { background: #fff; border: 1px solid var(--lc-border); }
.lcp-app-page .lcp-forum .lcp-post { padding: .75rem 0; border-left: 0; border-right: 0; }
.lcp-app-page .lcp-forum .lcp-post:first-child { border-top: 0; }
.lcp-app-page .lcp-forum .lcp-post:last-child { border-bottom: 0; }
.lcp-app-page .lcp-forum .lcp-avatar { width: 40px; height: 40px; font-size: .95rem; }
.lcp-app-page .lcp-forum .lcp-post-title { font-size: 1.02rem; }
.lcp-app-page .lcp-forum-title { font-size: 1.3rem; }
.lcp-page section.lcp-side-card { background: #fff; border: 1px solid var(--lc-border); border-radius: .6rem; padding: 1.25rem; }
.lcp-page .lcp-side-title { font-size: 1.3rem; margin-bottom: .35rem; }
.lcp-share .btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }

/* Advertisement slot */
.lcp-page section.lcp-ad { position: relative; border-radius: .6rem; overflow: hidden; background: var(--lc-dark-green); color: #fff; min-height: 250px; padding: 0; }
.lcp-ad-label { position: absolute; top: .5rem; right: .75rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #cfdcd4; }
.lcp-ad-body { padding: 2rem 1.5rem 1.5rem; }
.lcp-ad-icon { font-size: 2rem; color: var(--lc-light-green); margin-bottom: .75rem; }
.lcp-page .lcp-ad h2 { color: #fff; font-size: 1.6rem; }
.lcp-ad p { color: #e1ebe5; }

.lcp-map-popup {
  background: white;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  min-width: 160px;
  font-size: 13px;
}

.lcp-map-popup a {
  display: inline-block;
  margin-top: 5px;
}

.ol-viewport {
  border-radius: inherit;
}

/* Hero actions: all three buttons share the Light green button size so they line up */
.lcp-hero-actions .btn { font-size: 1.25rem; font-weight: 700; padding: .875rem 1.75rem; }
@media (max-width: 575.98px) { .lcp-hero-actions .btn { flex: 1 1 100%; } }