/* ═══════════════════════════════════════════════════════════════
   info-page-redesign.css – egettryck.se CMS/info pages (/info/...)
   Visual wrapper only around the existing WYSIWYG content: a hero
   band in the homepage's language (egstartpage hero.tpl wave, section
   title type) plus typography, link and image normalization. Stored
   CMS HTML is never edited.
   Two surfaces only: the breadcrumb's light tone (breadcrumb + hero as
   one zone) and white. Two families only: Barlow for headings (the
   homepage section titles), Roboto for text (the site body font).
   Classes prefixed .icp- to avoid theme conflicts. Loaded only from
   themes/egettryckse/templates/cms/page.tpl, so selectors here never
   leak onto non-CMS pages. Bump ?v=N in that template on every edit.
═══════════════════════════════════════════════════════════════ */

:root {
  --icp-ink:       #1a1a1a;
  --icp-label:     #a08870;
  --icp-link:      #8c4e08;
  --icp-line:      #ece6dc;
  --icp-ff-head:   'Barlow', 'Helvetica Neue', sans-serif;
  --icp-ff-body:   'Roboto', 'Helvetica Neue', sans-serif;

  /* Site-wide grid — same 1200px/15px as the breadcrumb, header,
     homepage blocks and /kundvagn (see breadcrumb-redesign.css), so
     hero title and text sit on the breadcrumb's line. */
  --icp-measure:   1200px;
  --icp-gutter:    15px;
}

/* ─── FLATTEN THE THEME'S BOOTSTRAP SCAFFOLDING ──────────────────
   The layout wraps CMS content in .container.no-index > .row >
   #content-wrapper: ~40px extra left offset at mid widths, and at wide
   widths the theme pins .container to 1200px — the band then stopped
   at 1200px, stuck to the left. !important because the theme's width
   rule wins otherwise. Scoped to body#cms. */
body#cms .container.no-index {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body#cms .container.no-index > .row {
  margin-left: 0;
  margin-right: 0;
}
body#cms #content-wrapper {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ─── HERO BAND ───────────────────────────────────────────────────
   Same surface as .eg-breadcrumb (--eg-canvas, header-redesign.css), so
   breadcrumb + hero read as one zone. Not --eg-header-bg: that is the
   header's own, darker beige — using it stacked two beiges. */
.icp-hero {
  position: relative;
  background: var(--eg-canvas, #f9f8f6);
  padding: 40px 0 88px;
  margin: 0;
  border: 0;
}
.icp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--icp-measure);
  margin: 0 auto;
  padding: 0 var(--icp-gutter);
}
.icp-hero__eyebrow {
  margin: 0 0 10px;
  font-family: var(--icp-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--icp-label);
}
.icp-hero__title {
  margin: 0;
  max-width: 900px;
  font-family: var(--icp-ff-head);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--icp-ink);
}
/* The homepage hero's wave, filled white so the band flows into the
   content instead of ending on a hard line. */
.icp-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: 1;
}
.icp-hero__wave svg {
  display: block;
  width: 100%;
  height: 64px;
  fill: #ffffff;
}

/* ─── CONTENT ─────────────────────────────────────────────────────── */
.icp-page {
  background: #ffffff;
  padding: 8px 0 72px;
}
.icp-container {
  max-width: var(--icp-measure);
  margin: 0 auto;
  padding: 0 var(--icp-gutter);
}

/* ─── TYPOGRAPHY NORMALIZATION ───────────────────────────────────
   WYSIWYG paste (Google Docs etc.) carries inline font-family/color
   on almost every tag, so those two properties need !important. */
.icp-card,
.icp-card p,
.icp-card span,
.icp-card li,
.icp-card td,
.icp-card th,
.icp-card div {
  font-family: var(--icp-ff-body) !important;
  color: var(--icp-ink) !important;
}

/* Base size for content without inline sizes — the theme's own base
   is 13px. Not !important, so an unmapped inline size still wins. */
.icp-card p,
.icp-card li,
.icp-card td,
.icp-card th,
.icp-card dd,
.icp-card dt {
  font-size: 16px;
}
.icp-card p {
  line-height: 1.7;
  margin: 0 0 16px;
}
.icp-card > :last-child {
  margin-bottom: 0;
}

.icp-card h1,
.icp-card h2,
.icp-card h3,
.icp-card h4 {
  font-family: var(--icp-ff-head) !important;
  color: var(--icp-ink) !important;
  font-weight: 800 !important;
  line-height: 1.25;
  margin: 40px 0 14px;
}
.icp-card h2 { font-size: 28px; }
.icp-card h3 { font-size: 22px; }
.icp-card h4 { font-size: 18px; }

/* Empty headings are Google Docs paste leftovers (FAQ alone has 10);
   hidden so they don't open blank gaps. A hidden one would still be
   :first-child, hence the sibling rule for the top margin. */
.icp-card h1:empty,
.icp-card h2:empty,
.icp-card h3:empty,
.icp-card h4:empty {
  display: none;
}
.icp-card > :first-child,
.icp-card > :empty:first-child + * {
  margin-top: 0;
}

/* Paste artifacts sometimes carry a left indent; lists keep theirs. */
.icp-card > p,
.icp-card > div,
.icp-card > h1,
.icp-card > h2,
.icp-card > h3,
.icp-card > h4 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.icp-card ul,
.icp-card ol {
  padding-left: 22px;
  margin: 0 0 16px;
  line-height: 1.7;
}

/* ─── LEGACY INLINE FONT SIZES → BRAND SCALE ─────────────────────
   Across all active CMS pages the inline-size vocabulary is small:
   11pt (311 uses) = body, 15/16pt = sub-heading, 23/26pt = lead.
   Mapped onto the design scale so the editor's hierarchy survives but
   in one system. Cascade-only, content HTML untouched. */
.icp-card [style*="font-size:11pt"],
.icp-card [style*="font-size: 11pt"],
.icp-card [style*="font-size:11px"],
.icp-card [style*="font-size: 11px"],
.icp-card [style*="font-size:13px"],
.icp-card [style*="font-size: 13px"] {
  font-size: 16px !important;
}
.icp-card [style*="font-size:15pt"],
.icp-card [style*="font-size: 15pt"],
.icp-card [style*="font-size:16pt"],
.icp-card [style*="font-size: 16pt"],
.icp-card [style*="font-size:16px"],
.icp-card [style*="font-size: 16px"] {
  font-family: var(--icp-ff-head) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.3;
}
.icp-card [style*="font-size:23pt"],
.icp-card [style*="font-size: 23pt"],
.icp-card [style*="font-size:26pt"],
.icp-card [style*="font-size: 26pt"] {
  font-family: var(--icp-ff-head) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

/* ─── LINKS ───────────────────────────────────────────────────────── */
.icp-card a {
  color: var(--icp-link) !important;
  text-decoration: underline;
  text-decoration-color: rgba(140, 78, 8, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.icp-card a:hover {
  text-decoration-color: currentColor;
}

/* ─── IMAGES ──────────────────────────────────────────────────────── */
.icp-card img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0;
}

/* ─── TABLES ──────────────────────────────────────────────────────── */
.icp-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}
.icp-card table td,
.icp-card table th {
  border: 1px solid var(--icp-line);
  padding: 8px 12px;
}

/* ─── MOBILE ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .icp-hero { padding: 24px 0 52px; }
  .icp-hero__title { font-size: 28px; }
  .icp-hero__wave svg { height: 36px; }
  .icp-page { padding-bottom: 40px; }
  .icp-card h2 { font-size: 22px; }
  .icp-card h3 { font-size: 19px; }
  /* Hero title is 28px here; the content lead must stay below it. */
  .icp-card [style*="font-size:23pt"],
  .icp-card [style*="font-size: 23pt"],
  .icp-card [style*="font-size:26pt"],
  .icp-card [style*="font-size: 26pt"] {
    font-size: 21px !important;
  }
  .icp-card [style*="font-size:15pt"],
  .icp-card [style*="font-size: 15pt"],
  .icp-card [style*="font-size:16pt"],
  .icp-card [style*="font-size: 16pt"],
  .icp-card [style*="font-size:16px"],
  .icp-card [style*="font-size: 16px"] {
    font-size: 18px !important;
  }
}