/* KMR Media — child-theme style.css
 * Canonical source for the KMR global header rail, shared header, footer and
 * typography. Authored by Lumi; live-verified against production 2026-09-20.
 *
 * CHANGE LOG
 * 20260701T232258Z  header rail repair (staging): single global source for
 *                   mobile topbar/header/logo/menu rails.
 * 20260920T0430CEST  nav one-row fix + body base font + first-paint header fix.
 * 20260920T1400CEST  site-wide designed header; "Så funkar det" removed from the
 *                   menu; footer phone pill repaired; footer menu orphan fix.
 *
 * ---------------------------------------------------------------
 * 1) WHY THE MENUS WRAPPED (measured live 2026-09-20, not assumed)
 *
 * The KMR design ships a ~552 KB inline <style> block that carries the header
 * rules: the 336x120 design logo and the hiding of four desktop-only items
 * (1125 Portfolio, 1254 tel, 1255 mail, CTA button). That block is printed only
 * on the eleven designed pages. Every other template — the portfolio archive,
 * its 16 posts, the three author archives and the two policy pages — fell back
 * to Flatsome's default header: the 262x95 default logo plus ALL TEN items,
 * measured 1073px of items inside an 828px rail, so the desktop nav ran over
 * TWO rows at every width up to 1920px.
 *
 * The designed pages had a second, narrower defect: six items at 17.6px needed
 * 659px, but between 850 and 999px the 336px logo left only 444-628px of rail,
 * so the last item wrapped there as well (measured rows=2 at 850/900/980).
 *
 * ---------------------------------------------------------------
 * 2) SITE-WIDE DESIGNED HEADER
 *
 * The header rules below are no longer page-scoped, so every template shows one
 * header: the 336x120 design logo and exactly the designed desktop items. On
 * the designed pages the declarations are identical, so nothing changes there;
 * the other ten templates now match instead of falling back to the default.
 * This carries the design's own header — it is not a new design.
 *
 * ---------------------------------------------------------------
 * 3) ONE ROW AT EVERY WIDTH 850-1920px  (five items, after 1256 was removed)
 *
 * Measured need for the five items (1250, 1251, 1252, 22, 1253):
 *   17.6px + 18px gaps = 609px     17.6px + 12px gaps = 585px
 * The rail is capped at 1120px, so the 336px logo leaves too little room below
 * 1100px. Rather than shrink the type, the logo steps down to the design's own
 * 202x84 mobile size, which frees 134px and keeps the type at full size:
 *   >=875px    336px/202px logo, 17.6px, 9px margins (Flatsome's own)  gap 18px
 *   850-874px  logo stepped down, 17.6px, 6px margins                 gap 12px
 * Below 850px Flatsome swaps to the mobile header, where no desktop row exists.
 *
 * SELECTOR NOTE: the late design block writes its logo rules as
 * `body.page-id-N #logo` (one id + one class), which outranks a plain `#logo`.
 * The bands that change the logo therefore use `#masthead #logo` (two ids) so
 * they win on the designed pages too.
 *
 * ---------------------------------------------------------------
 * 4) FOOTER PHONE PILL REPAIR
 *
 * An inline rule (`KMR footer fix3 20260919`) set font-size:0 on the phone pill
 * and moved its label into a :before pseudo-element. Because line-height and
 * min-height are expressed in em, both collapsed, and the pill measured 28px
 * against 43px for the mail and CTA pills beside it:
 *   mailto  494x43  fs=17.072px  line-height=40.97px  min-height=42.68px
 *   tel     494x28  fs=0px       line-height=0px      min-height=0px    <- wrong
 * The rule is neutralised below by out-ranking it with `#footer` (an id beats
 * any number of classes) and dropping the :before, so the theme's own .button
 * styling renders all three pills identically.
 *
 * Every block below is reversible; this file is the only artefact that changes.
 */
:root{
  --kmr-header-rail-max:1120px;
  --kmr-header-rail-pad:20px;
  --kmr-header-mobile-pad:14px;
  --kmr-header-mobile-logo-w:202px;
  --kmr-header-mobile-logo-h:84px;
}
#top-bar .flex-row.container,
.header-main .header-inner{
  width:min(var(--kmr-header-rail-max),calc(100% - (var(--kmr-header-rail-pad) * 2)))!important;
  max-width:var(--kmr-header-rail-max)!important;
  padding-left:0!important;
  padding-right:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.header-main .flex-right{margin-left:auto!important;}
.header-nav.header-nav-main{justify-content:flex-end!important;margin-left:auto!important;}
.header-nav-main>li:last-child{margin-right:0!important;}
#logo{margin-left:0!important;}
#logo img{object-position:left center!important;}

/* body base font: Arimo -> Nunito (theme headings already Nunito/League Spartan) */
body,.nav>li>a{font-family:'Nunito',sans-serif!important;}

/* ============================================================
   SITE-WIDE DESIGNED HEADER (20260920)
   The same declarations the late design block carries, declared for every
   template so the portfolio/policy/author templates stop falling back to
   Flatsome's default header (which wrapped ten items onto two rows).
   Delete this block to revert those templates to the default header.
   ============================================================ */
#masthead #logo,
#logo{
  background:url('https://www.kmrmedia.se/wp-content/uploads/2026/09/kmr-mediabyra-source-color-logo-scaled-1.png') left center/contain no-repeat!important;
  width:336px!important;
  max-width:336px!important;
  height:120px!important;
  max-height:120px!important;
  margin-left:0!important;
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
}
#logo img{opacity:0!important;}
/* desktop-only menu items the design hides: Portfolio, tel, mail, CTA button */
@media (min-width:850px){
  .header-main .header-nav.header-nav-main>li.menu-item-1125,
  .header-main .header-nav.header-nav-main>li.menu-item-1254,
  .header-main .header-nav.header-nav-main>li.menu-item-1255,
  .header-main .header-nav.header-nav-main>li.html.header-button-1{display:none!important;}
}

/* ============================================================
   NAV: ONE ROW 850-1920px (20260920)
   ============================================================ */
.header-main .header-inner .flex-col.hide-for-medium.flex-right{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
}
.header-nav.header-nav-main{justify-content:flex-end!important;flex-wrap:nowrap!important;}
.header-nav.header-nav-main>li{flex-shrink:0!important;}
.header-nav.header-nav-main>li>a{white-space:nowrap!important;}
/* hidden desktop items must not reserve margin space in the row */
.header-nav.header-nav-main>li.menu-item-1254,
.header-nav.header-nav-main>li.menu-item-1255,
.header-nav.header-nav-main>li.html.header-button-1{
  margin-left:0!important;
  margin-right:0!important;
}
/* SPACING: Flatsome's own rule is `.nav-spacing-medium>li{margin:0 9px}`, i.e.
   an 18px gap between labels. An earlier fix in this file narrowed that to 4px
   (8px gap) because the menu then held SIX items; with five items the rail has
   room again, so the theme's own 9px is restored wherever it fits:
     875-1920px  margin 9px  -> 18px gap   (the theme's own spacing)
     850-874px   margin 6px  -> 12px gap   (9px does not fit below 875px)
   Measured at 850px: navW 553px, available 608px, so 6px leaves 7px of slack. */
@media (min-width:875px){
  .header-nav.header-nav-main.nav-spacing-medium>li{margin-left:9px!important;margin-right:9px!important;}
}
@media (min-width:850px) and (max-width:874px){
  .header-nav.header-nav-main.nav-spacing-medium>li{margin-left:6px!important;margin-right:6px!important;}
}
/* 850-1099: keep the type at full size and step the logo down to the design's
   own 202x84 mobile size instead. That frees 134px, so the five items fit with
   98px to spare at 850px. `#masthead #logo` outranks the design block's
   `body.page-id-N #logo`, which would otherwise hold 336px on designed pages. */
@media (min-width:850px) and (max-width:1099px){
  #masthead #logo{
    width:var(--kmr-header-mobile-logo-w)!important;
    max-width:var(--kmr-header-mobile-logo-w)!important;
    height:var(--kmr-header-mobile-logo-h)!important;
    max-height:var(--kmr-header-mobile-logo-h)!important;
  }
}

/* ============================================================
   FOOTER PHONE PILL (20260920)
   Neutralises the inline "footer fix3" rule that collapsed the phone pill to
   28px by setting font-size:0 and relocating the label into a :before.
   `#footer` is an id and therefore outranks the inline `.footer-wrapper` class
   chain, while still losing to nothing else that matters here.
   ============================================================ */
html body #footer a.button.success.expand[href^="tel:"]{
  font-size:0.97em!important;
  display:block!important;
  gap:normal!important;
  align-items:normal!important;
  justify-content:normal!important;
  line-height:2.4em!important;
  min-height:2.5em!important;
}
html body #footer a.button.success.expand[href^="tel:"] span{
  font-size:1em!important;
  position:static!important;
}
html body #footer a.button.success.expand[href^="tel:"] span:before{
  content:none!important;
  display:none!important;
}
html body #footer a.button.success.expand[href^="tel:"] i{
  font-size:16px!important;
}

/* ============================================================
   FOOTER MENU (20260920)
   The footer link row wrapped with a single orphaned item on the second line
   between 600 and 800px. Measured sweep over font-size x gap: 13px holds one
   row from 1024px down to 700px, which is as far as a single row can go.
   ============================================================ */
@media (min-width:700px) and (max-width:1023px){
  ul.links.footer-nav>li{margin-left:0!important;margin-right:0!important;}
  ul.links.footer-nav>li>a{font-size:13px!important;letter-spacing:0!important;white-space:nowrap!important;}
}

/* ============================================================
   MOBILE HEADER (<=849px) — unchanged from the 20260701 rail repair
   ============================================================ */
@media (max-width:849px){
  #masthead #logo{
    width:var(--kmr-header-mobile-logo-w)!important;
    max-width:var(--kmr-header-mobile-logo-w)!important;
    height:var(--kmr-header-mobile-logo-h)!important;
    max-height:var(--kmr-header-mobile-logo-h)!important;
  }
  body #top-bar .flex-row.container,
  body #top-bar .container,
  body .header-wrapper #masthead.header-main .header-inner.flex-row.container,
  body .header-main .header-inner.flex-row.container,
  body .mobile-header-wrapper .header-inner.flex-row.container{
    box-sizing:border-box!important;
    width:min(var(--kmr-header-rail-max),calc(100% - (var(--kmr-header-mobile-pad) * 2)))!important;
    max-width:var(--kmr-header-rail-max)!important;
    padding-left:0!important;
    padding-right:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:0!important;
    column-gap:0!important;
  }
  body .header-wrapper #masthead.header-main .header-inner.flex-row.container{
    justify-content:flex-start!important;
  }
  body .header-wrapper #masthead.header-main .header-inner > #logo.flex-col.logo,
  body .header-main .header-inner > #logo.flex-col.logo{
    order:1!important;
    box-sizing:border-box!important;
    flex:0 0 var(--kmr-header-mobile-logo-w)!important;
    width:var(--kmr-header-mobile-logo-w)!important;
    max-width:var(--kmr-header-mobile-logo-w)!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    text-align:left!important;
    display:flex!important;
    justify-content:flex-start!important;
  }
  body #masthead #logo > a,
  body .header-main #logo > a{
    display:block!important;
    width:var(--kmr-header-mobile-logo-w)!important;
    max-width:var(--kmr-header-mobile-logo-w)!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body #masthead #logo img.header-logo,
  body #masthead #logo img,
  body .header-main #logo img.header-logo,
  body .header-main #logo img{
    display:block!important;
    width:var(--kmr-header-mobile-logo-w)!important;
    max-width:var(--kmr-header-mobile-logo-w)!important;
    height:var(--kmr-header-mobile-logo-h)!important;
    max-height:var(--kmr-header-mobile-logo-h)!important;
    margin-left:0!important;
    margin-right:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
    transform:none!important;
  }
  body .header-wrapper #masthead.header-main .header-inner > .flex-col.show-for-medium.flex-left,
  body .header-main .header-inner > .flex-col.show-for-medium.flex-left{
    order:2!important;
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body .header-wrapper #masthead.header-main .mobile-nav,
  body .header-main .mobile-nav{
    width:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    justify-content:flex-end!important;
  }
  body .header-wrapper #masthead.header-main .mobile-nav > li,
  body .header-main .mobile-nav > li{
    margin-left:0!important;
    margin-right:0!important;
  }
  body .header-wrapper #masthead.header-main .header-inner > .flex-col.show-for-medium.flex-right,
  body .header-main .header-inner > .flex-col.show-for-medium.flex-right{
    flex:0 0 0!important;
    width:0!important;
    max-width:0!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body #top-bar .nav-right{margin-left:auto!important;justify-content:flex-end!important;}
  body .header-contact-wrapper{margin-left:auto!important;}
}