/* ==========================================================================
   EDJ LANDING PAGES -- v4 section chrome for the 13 published subpages.
   Bjorn, 2026-08-26.

   WHY A FOURTH STYLESHEET INSTEAD OF REUSING THE HOMEPAGE SECTIONS
   ----------------------------------------------------------------
   The plan going in was to reuse each site's existing #metoder / #galleri /
   #omraden / #faq chassis so the port needed no new CSS. Measuring the five
   forks killed that plan. They declare THREE different class vocabularies for
   the same five sections:

     gavle, soderhamn : .section-tag .section-title .areas-flex .area-chip
                        .alt-row .alt-img .btn-hero
     norrtalje, sundsvall
                      : .section-label .methods-list .method-item .method-num
                        .areas-grid .area-tag .alt-section .alt-grid .btn
     ostersund        : .section-label .methods-grid .method-card
                        .services-grid .service-card   (no area classes at all)

   Reusing the chassis therefore means maintaining three renderers forever, and
   a fourth the first time a fork is touched. page.php already reached this
   conclusion once and wrote it down: "a template that silently depends on one
   of them renders unstyled on the other."

   EVERY SELECTOR HERE IS PREFIXED lp-. That is not a style preference, it is
   the safety property. The forks between them already own .section-label,
   .section-tag, .section-title, .faq-item, .faq-list, .area-tag, .area-chip,
   .method-item, .alt-row and .btn. A landing sheet that used any of those
   would inherit fork-specific rules on two sites and nothing on the other
   three. Grep before adding an unprefixed selector here.

   THE ONE DELIBERATE EXCEPTION IS #hero.
   hero-v4.css is enqueued site-wide (wp_enqueue_scripts, no is_front_page
   guard) and every rule in it is scoped under #hero or #trust. So a landing
   page that emits the homepage's exact hero markup gets the v4 capture card,
   the two-column grid and the palette for free, with no duplication and no
   chance of the two drifting apart. Nothing about the hero is styled here.
   ========================================================================== */

#lp-main {
  --lp-ink:    #0B1F14;
  --lp-green:  #1D6B3F;
  --lp-text:   #14201A;
  --lp-muted:  #5A6B61;
  --lp-border: #E2EAE5;
  --lp-tint:   #EFF7F1;
  --lp-accent: #FFC24B;
  background: #fff;
  color: var(--lp-text);
  font-size: 1.04rem;
  line-height: 1.72;
}

.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------- breadcrumbs */
/* THE ONLY RULES IN THIS FILE THAT REACH A CLASS THIS FILE DOES NOT OWN, and
   they are deliberate. parts/breadcrumbs.php inlines its own <style> painting
   the trail WHITE, which is right everywhere else in these forks -- there it
   renders inside #page-hero, a solid green band. A landing page has no such
   band, so the trail came out white on white: 1:1, entirely invisible. Caught
   by render-check.mjs on the Ostersund canary, not by reading the markup.

   EVERY SELECTOR BELOW IS ONE CLASS HEAVIER THAN THE RULE IT OVERRIDES, and
   that is load-bearing rather than tidiness. The partial's <style> block sits
   in the BODY, so it comes after this sheet in document order and wins any
   specificity tie on order alone. Matching its weight does nothing. Note that
   :hover needs THREE classes, because the partial's own :hover is already at
   two.

   The ratios are measured against #fff. The partial's own comments record
   being burned twice by computing them instead: the browser resolves
   var(--green) per fork and disagreed both times. */
.lp-crumbs { padding: 18px 0 0; }
.lp-crumbs .breadcrumbs ol { margin: 0; }
.lp-crumbs .breadcrumbs a { color: #1D6B3F; }                      /* 6.4:1 */
.lp-crumbs .breadcrumbs a:hover { color: #0B1F14; }
.lp-crumbs .breadcrumbs [aria-current="page"] { color: #5A6B61; }  /* 5.6:1 */
/* opacity is reset as well as colour. The partial dims the separator to .55,
   which over white lands near 1.9:1 -- overriding only the colour would have
   left a rule that still failed while looking fixed. */
.lp-crumbs .breadcrumbs li + li::before { color: #5A6B61; opacity: 1; }

/* ------------------------------------------------------------ prose blocks */
.lp-block { padding: 42px 0; border-top: 1px solid var(--lp-border); }
.lp-block:first-child { border-top: 0; padding-top: 46px; }

.lp-block h2 {
  margin: 0 0 14px;
  font-size: clamp(1.32rem, 2.4vw, 1.72rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}
/* The accent rule under an h2 is what makes a wall of h2s read as a stack of
   sections rather than one long document. It is the cheapest available signal
   and it needs no extra markup. */
.lp-block h2::after {
  content: ''; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin: 12px 0 0; background: var(--lp-accent);
}
.lp-block p { margin: 0 0 15px; }
.lp-block p:last-child { margin-bottom: 0; }
.lp-block a { color: var(--lp-green); }

/* Lists carry real content on these pages (species, site constraints), so
   they get the tick treatment rather than a browser bullet. */
.lp-block ul { list-style: none; margin: 18px 0 0; padding: 0; }
.lp-block li {
  position: relative; padding: 0 0 0 30px; margin: 0 0 12px;
}
.lp-block li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lp-green); box-shadow: 0 0 0 4px var(--lp-tint);
}
.lp-block li strong { color: var(--lp-ink); }

/* --------------------------------------------------------- the media split */
.lp-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 38px; align-items: center;
}
.lp-split figure { margin: 0; }
.lp-split img {
  display: block; width: 100%; height: 100%; max-height: 380px;
  object-fit: cover; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(11, 31, 20, .18);
}

/* ------------------------------------------------------------ trust column */
/* "Vem som utfor arbetet" is the one block whose h2 text is identical on all
   13 pages, so it is the only one special-cased. It is short, it is the
   insurance-and-reviews paragraph, and as plain prose between two long
   sections it disappeared entirely. */
.lp-trust {
  margin: 42px 0 0; padding: 26px 28px;
  background: var(--lp-tint); border: 1px solid var(--lp-border);
  border-left: 4px solid var(--lp-green); border-radius: 14px;
}
.lp-trust h2 {
  margin: 0 0 10px; font-size: 1.08rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lp-green);
}
.lp-trust h2::after { display: none; }
.lp-trust p { margin: 0; color: var(--lp-text); }
.lp-trust a { color: var(--lp-green); font-weight: 600; }

/* -------------------------------------------------------------------- FAQ */
#lp-faq { background: var(--lp-tint); padding: 52px 0; margin-top: 46px; }
#lp-faq h2 {
  margin: 0 0 22px; font-size: clamp(1.32rem, 2.4vw, 1.72rem);
  color: var(--lp-ink);
}
.lp-faq-item {
  background: #fff; border: 1px solid var(--lp-border); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.lp-faq-item > summary {
  cursor: pointer; list-style: none; padding: 17px 52px 17px 20px;
  font-weight: 700; color: var(--lp-ink); position: relative;
}
.lp-faq-item > summary::-webkit-details-marker { display: none; }
/* A chevron drawn in CSS, so there is no icon font and nothing to 404. */
.lp-faq-item > summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2.5px solid var(--lp-green);
  border-bottom: 2.5px solid var(--lp-green);
  transform: rotate(45deg); transition: transform .18s ease;
}
.lp-faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-faq-item > summary:focus-visible { outline: 3px solid var(--lp-green); outline-offset: -3px; }
.lp-faq-answer { padding: 0 20px 18px; color: var(--lp-text); }
.lp-faq-answer p { margin: 0; }

/* ------------------------------------------------------------ nearby towns */
#lp-near { padding: 44px 0 0; }
#lp-near h2 { margin: 0 0 12px; font-size: 1.2rem; color: var(--lp-ink); }
#lp-near p { margin: 0; color: var(--lp-muted); }
#lp-near a { color: var(--lp-green); font-weight: 600; }

/* -------------------------------------------------------------- bottom CTA */
#lp-cta {
  margin-top: 52px; padding: 54px 22px;
  background: linear-gradient(135deg, #0B1F14 0%, #1D6B3F 100%);
  color: #fff; text-align: center;
}
#lp-cta h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; }
#lp-cta p { margin: 0 auto 24px; max-width: 560px; color: rgba(255, 255, 255, .88); }
#lp-cta .lp-cta-btn {
  display: inline-block; border: 0; cursor: pointer;
  padding: 16px 34px; border-radius: 12px;
  background: var(--lp-accent); color: #3A2A05;
  font-size: 1.04rem; font-weight: 800; font-family: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
#lp-cta .lp-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0, 0, 0, .34); }
#lp-cta .lp-cta-call {
  display: block; margin-top: 16px; color: #fff; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .lp-split { grid-template-columns: 1fr; gap: 22px; }
  /* Text first on a phone. The photograph supports the argument, it does not
     open it, and 380px of image above the fold pushes the copy off screen. */
  .lp-split figure { order: 2; }
  .lp-split .lp-split-body { order: 1; }
  .lp-split img { max-height: 260px; }
}
@media (max-width: 700px) {
  #lp-main { font-size: 1.01rem; }
  .lp-block { padding: 32px 0; }
  .lp-trust { padding: 22px 20px; }
  #lp-faq { padding: 40px 0; }
}