/*
 * b24-mobile-lite.css — mobile-only weight reduction for the four Google Ads landing pages.
 * Loaded only at ?mlite=1 and only under 861px. Desktop is never touched.
 *
 * Why this file exists: measured 2026-08-30, the ad landing pages run 11.2–13.0 screens on a
 * 390x844 phone, 858–1033 words, with five consecutive transparent zero-padding sections on
 * /begravelsesbyraa-oslo/ — no visual stop anywhere. The reader is a bereaved person on a
 * phone, often at night. Nothing here deletes content: everything stays in the DOM so
 * mobile-first indexing keeps seeing it. It is collapsed, railed, or given a surface.
 */

/* ============================================================== GLOBAL, ALL WIDTHS
 * Noise rules. A number stacked on a number, or the same sentence three times, reads badly
 * at any width — these are content defects, not layout ones, so they are not behind a media
 * query and they are not scoped to a handful of templates.
 * ------------------------------------------------------------------------------------- */

/* Set by the script on the smaller of two phone CTAs that land within 700px of each other,
   and on the lines whose only job was repeating the number. */
body.mlite-global .mlite-dupe-phone,
body.mlite-global .mlite-dupe-auto { display: none !important; }

/* .b24-cflow__altbtn renders inline inside its own sentence, so the dark button lands on top
   of the words either side of it. Pre-existing; worst on narrow screens but wrong anywhere. */
body.mlite-global .b24-cflow__alt { display: block; }
body.mlite-global .b24-cflow__altbtn {
  display: inline-block;
  margin: 10px 0 0;
  min-height: 44px;
}
@media (max-width: 899px) {
  body.mlite-global .b24-cflow__altbtn { display: block; width: 100%; }
}

/* ==================================================== NARROW ONLY, LAYOUT (<= 899px)
 * Everything below reshapes layout and only makes sense on a phone-width screen. 899px is
 * the theme's own mobile boundary (the width at which it swaps in .sticky-call-btn), so
 * there is no band left where the site is in mobile layout but this layer is absent.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 899px) {

/* ---------------------------------------------------------------- surfaces
 * The home page already alternates paper / transparent / linen / petrol and reads fine.
 * The area-landing and tjeneste-detail templates do not — they run five sections of
 * rgba(0,0,0,0) with padding 0. JS stamps data-mlite-sec on each main > section so the
 * rhythm does not depend on class names the templates never set. */
body.mlite main > section[data-mlite-sec] {
  padding-top: 40px;
  padding-bottom: 40px;
}
body.mlite main > section[data-mlite-sec][data-mlite-surface="paper"]  { background: #F7F6F2; }
body.mlite main > section[data-mlite-sec][data-mlite-surface="linen"]  { background: #F1F0EA; }
body.mlite main > section[data-mlite-sec][data-mlite-surface="plain"]  { background: #FDFCFA; }
/* a hairline only where two like surfaces would otherwise touch */
body.mlite main > section[data-mlite-sec] + section[data-mlite-sec] {
  border-top: 1px solid rgba(40, 42, 41, 0.08);
}
/* Sections that already paint themselves are marked "none" and get NO rule at all.
 * An earlier version wrote `background: none` here, which stripped the petrol contact
 * section and the light hero — "leave it alone" has to mean writing nothing. */

/* ------------------------------------------------------- typographic steps
 * Measured: 18px was used 99–116 times per page and every h3 sat at 20–24px. Two sizes
 * one step apart is not a hierarchy — the eye never finds a stopping point, which is what
 * "too much text" actually feels like. Real steps: 16.5 / 19 / 28. */
body.mlite main { font-size: 16.5px; }
body.mlite main p,
body.mlite main li { font-size: 16.5px; line-height: 1.55; }
body.mlite main h2 { font-size: 28px; line-height: 1.15; }
body.mlite main h3 { font-size: 19px; line-height: 1.25; }
body.mlite main .section-lead { font-size: 17px; }

/* --------------------------------------------------------------- the rail
 * One swipeable row instead of a six-card vertical stack. Pure scroll-snap, no library.
 * The cards keep their own styling; only the container becomes a rail. */
.mlite-railwrap { margin: 0 -20px; }
.mlite-rail {
  display: flex !important;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 20px 8px;
  margin: 0;
  /* align-items is set on the child below, not here: `body.brand-page .pricing-grid`
     (0,2,1) outspecifies `.mlite-rail` (0,1,0) and kept the row on stretch, so the short
     price card grew to the tallest and left a void above its button. align-self on the
     item has no competing rule. */
}
.mlite-rail::-webkit-scrollbar { display: none; }
.mlite-rail > * {
  flex: 0 0 82%;
  scroll-snap-align: center;
  min-width: 0;
  margin: 0 !important;
  align-self: flex-start;
}
/* the theme pushes the price button to the card foot with margin-top:auto, which in a
   stretched row parked it a screen below the price it belongs to */
.mlite-rail .price-cta { margin-top: 14px !important; }
/* .price-phonenote carries margin-top:-18px, tuned for a full-width card. At the rail's
   82% width it climbed 14px into "16 500 kr". Measured on the plain page first: the
   overlap is not there, so it is this layer's to fix, not the theme's. */
.mlite-rail .price-phonenote { margin-top: 6px !important; }
/* a rail of two reads better as two-thirds each, so both are visibly present */
.mlite-rail[data-n="2"] > * { flex-basis: 78%; }
/* The theme reveals .fade-up blocks on vertical intersection. Inside a horizontal scroller
   the off-screen cards never satisfy that observer: measured on the home services rail,
   items 3-5 started at opacity 0 and one of them was STILL invisible after swiping to the
   end — a blank card under the reader's thumb. A rail's own scroll is the reveal, so the
   animation is switched off inside one. (No @layer in this theme, so !important holds.) */
.mlite-rail > *,
.mlite-rail .fade-up { opacity: 1 !important; transform: none !important; }

.mlite-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 12px 0 0;
  margin: 0;
  list-style: none;
}
.mlite-dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(40, 42, 41, 0.22);
  transition: background 180ms ease, transform 180ms ease;
}
.mlite-dots button[aria-current="true"] { background: #BAAD7B; transform: scale(1.5); }
/* the dot row is a scroll indicator, not a control surface — give it a real tap area
   without making it look like six more things to press */
.mlite-dots li { display: flex; align-items: center; justify-content: center;
                 width: 22px; height: 22px; }

/* ----------------------------------------------------------- the accordion
 * For prose that has no card structure to rail (the kremasjon /tl/ column: nine gblocks,
 * 3959px). The heading stays a heading visually; only the body folds. */
details.mlite-acc {
  border-top: 1px solid rgba(40, 42, 41, 0.12);
  padding: 0;
}
details.mlite-acc:last-of-type { border-bottom: 1px solid rgba(40, 42, 41, 0.12); }
details.mlite-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 14px 0;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.25;
}
details.mlite-acc > summary::-webkit-details-marker { display: none; }
details.mlite-acc > summary::after {
  content: "";
  flex: 0 0 12px; width: 12px; height: 12px;
  border-right: 1.5px solid #BAAD7B;
  border-bottom: 1.5px solid #BAAD7B;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 200ms ease;
}
details.mlite-acc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details.mlite-acc > .mlite-acc__body { padding: 0 0 18px; }

/* --------------------------------------------------- price card, mobile form
 * A price card ran 1307–1633px. What a person needs to see at a glance is the name, the
 * number, and how to ask. The two description paragraphs and the inclusion list fold. */
.mlite-rail .price-card { padding: 20px 18px 22px; }
.mlite-rail .price-card > h3 { font-size: 21px; margin: 0 0 4px; }
.mlite-rail .price-card .price { margin: 10px 0 4px; }
details.mlite-more { margin: 12px 0 14px; }
details.mlite-more > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600;
  color: #2F4150;
  border-bottom: 1px solid rgba(47, 65, 80, 0.25);
}
details.mlite-more > summary::-webkit-details-marker { display: none; }
details.mlite-more > summary::after { content: " +"; margin-left: auto; font-weight: 400; }
details.mlite-more[open] > summary::after { content: " \2013"; }

/* --------------------------------------------------- readability and tap targets */
body.mlite main .mlite-readable { font-size: 16px; line-height: 1.5; }

/* A 44px touch target that costs nothing in layout: a transparent overlay centred on the
   element. The element keeps its own size, its own shape and its own place on the line —
   which `min-height` did not, turning 8px carousel dots into ovals and 24px breadcrumb
   crumbs into 44px ones. Width stays 100% so neighbouring links never overlap. */
body.mlite main .mlite-tappable { position: relative; }
body.mlite main .mlite-tappable::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* The search toggle leaves the mobile header — see the note in the script. */
body.mlite-global .iv-search-toggle { display: none; }
@media (min-width: 900px) {
  body.mlite-global .iv-search-toggle { display: inline-flex; }
}

/* ------------------------------------------- call first, reassurance, night line */

/* The folded callback panel. One quiet line, not a second button competing with the call. */
details.mlite-callback { margin: 14px 0 0; }
details.mlite-callback > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16.5px;
  margin-top: 6px;
  color: inherit;
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 32%, transparent);
}
@supports not (color: color-mix(in srgb, currentColor 32%, transparent)) {
  details.mlite-callback > summary { border-bottom-color: currentColor; }
}
details.mlite-callback > summary::-webkit-details-marker { display: none; }
details.mlite-callback > summary::after { content: "+"; margin-left: auto; font-weight: 400; }
details.mlite-callback[open] > summary::after { content: "–"; }
details.mlite-callback > *:not(summary) { padding-top: 10px; }
/* Colour is inherited, never named. An earlier version hard-coded petrol and then listed the
   sections where it had to flip to ivory. /kontakt/ puts a PAPER card inside the petrol
   .contact-section, so the summary came out ivory on ivory (1.04:1) and vanished; /priser/
   got petrol on petrol (1:1). Inheriting from the surface is right on every surface without
   anyone maintaining a list. */

/* ------------------------------------------------------------------- misc
 * Nothing below adds a component. It only stops things opening pre-expanded: an accordion
 * whose first row is already 570–670px tall is a wall of text wearing an accordion's coat. */
body.mlite .sitpick-item[open] > .sitpick-body { }   /* state handled in JS, kept for specificity notes */

/* the hero on /priser/ and /kremasjon/ runs 1545px before a single word of content */
body.mlite .hero .hero-mountains { display: none; }
body.mlite .hero { padding-top: 28px; padding-bottom: 32px; }

}