/*
 * Altibox theme styles. Look follows the current www.altibox.no (header, footer, colours, mobile menu),
 * set in Altibox Sans. Migrated Beaver Builder content additionally relies on legacy-content.css
 * (generated, loaded before this file).
 *
 * Theme utilities are prefixed "ab-" so they never collide with legacy class names used in content.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
  font-family: "Altibox Sans";
  font-style: oblique 0deg 10deg;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/AltiboxSansVF.woff2") format("woff2");
}

@font-face {
  font-family: "Altibox Display";
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/AltiboxDisplay-Bold.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Tokens */

:root {
  --ab-red: #e51a1a;
  --ab-burgundy: #3f0016;
  --ab-light-peach: #fff4f0;
  --ab-light-burgundy: #990025;
  --ab-orange: #f7785f;
  --ab-peach: #ffccb2;
  --ab-purple: #958cf2;
  --ab-white: #ffffff;
  --ab-segment-text: #330312;   /* segment strip labels */
  --ab-underline-red: #d73e35;  /* active segment underline */
  --ab-footer-rule: #666666;

  --ab-font: "Altibox Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ab-font-display: "Altibox Display", var(--ab-font);

  --ab-container: 1170px;
  --ab-gutter: 15px;
}

/* ---------------------------------------------------------------- Base (content typography comes from legacy-content.css) */

body {
  font-family: var(--ab-font);
  -webkit-font-smoothing: antialiased;
  /* Footer sits at the bottom even on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main { flex: 1 0 auto; }
body.menu-open { overflow: hidden; }

:focus-visible { outline: 2px solid var(--ab-red); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link, .skip-link:visited {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 4px 14px;
  background: #ac322a;
  color: var(--ab-white);
}
.skip-link:focus { left: 0; top: 0; }

.ab-container { width: 100%; max-width: var(--ab-container); margin-inline: auto; padding-inline: var(--ab-gutter); }

/* ---------------------------------------------------------------- Utilities for new content (Beaver Builder: Advanced > Class) */

.ab-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 21px;
  border: 1px solid var(--ab-red);
  border-radius: 999px;
  font-family: var(--ab-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  color: var(--ab-burgundy);
  background: transparent;
  cursor: pointer;
}
.ab-button:hover, .ab-button:focus { text-decoration: none; }
.ab-button--primary, .ab-button--primary:visited { background: var(--ab-red); color: var(--ab-white); }
.ab-button--primary:hover { background: var(--ab-light-burgundy); border-color: var(--ab-light-burgundy); color: var(--ab-white); }
.ab-button--dark, .ab-button--dark:visited { background: var(--ab-burgundy); border-color: var(--ab-burgundy); color: var(--ab-white); }
.ab-button--peach, .ab-button--peach:visited { background: var(--ab-peach); border-color: var(--ab-peach); color: var(--ab-burgundy); }

/* Buttons in migrated Beaver Builder content (replaces the old theme's generated :not() chains) */
.btn, .fl-button[role=button] { position: relative; }

.ab-tag {
  display: inline-block;
  padding: 6px 12px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.ab-display { font-family: var(--ab-font-display); }

/* Titles in Altibox Display, where the old theme had GT-Walsheim (h5/h6 stay Altibox Sans, as they were small
   labels in a body font there too). After legacy-content.css, which sets the body font on all headings */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--ab-font-display); }
.ab-rounded { border-radius: 24px; overflow: hidden; }
.ab-bg-burgundy { background-color: var(--ab-burgundy); color: var(--ab-white); }
.ab-bg-light-burgundy { background-color: var(--ab-light-burgundy); color: var(--ab-white); }
.ab-bg-light-peach { background-color: var(--ab-light-peach); }
.ab-bg-peach { background-color: var(--ab-peach); }

/* ---------------------------------------------------------------- Header: segment strip */

.site-header { position: relative; z-index: 50; }

.segment-nav { background: var(--ab-light-peach); }
.segment-nav__list { display: flex; margin: 0; padding: 0 0 0 5px; list-style: none; }
.segment-nav__list a {
  position: relative;
  display: block;
  margin-right: 2px;
  padding: 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ab-segment-text);
  text-decoration: none;
}
.segment-nav__list a:hover,
.segment-nav__list a:focus { color: var(--ab-segment-text); text-decoration: none; }
.segment-nav__list .is-active > a::after,
.segment-nav__list a:hover::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 12px;
  height: 2px;
  background: var(--ab-underline-red);
}

/* ---------------------------------------------------------------- Header: main bar */

.main-nav { background: var(--ab-burgundy); }
.main-nav__inner { display: flex; align-items: center; min-height: 72px; padding-block: 15px; }

.main-nav__logo { display: block; padding: 0 20px 2px; line-height: 0; }
.main-nav__logo img { width: auto; height: 24px; }

.main-nav__menu { flex: 1; }
.main-nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.main-nav__list a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ab-white);
  text-decoration: none;
}
/* Hover as the active item, as on the static site (the faint overlay had too little contrast) */
.main-nav__list a:hover,
.main-nav__list a:focus { background: var(--ab-red); color: var(--ab-white); text-decoration: none; }
.main-nav__list .current-menu-item > a,
.main-nav__list .current-menu-ancestor > a,
.main-nav__list .current-page-ancestor > a { background: var(--ab-red); }

.main-nav__my-pages, .main-nav__my-pages:visited {
  padding: 10px 20px;
  border: 1px solid var(--ab-white);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ab-white);
  text-decoration: none;
}
.main-nav__my-pages:hover,
.main-nav__my-pages:focus { background: var(--ab-white); color: var(--ab-burgundy); text-decoration: none; }

/* Search, left of Mine sider as on the old site: "Søk" opens into a field. It is the field's label, so
   clicking it focuses the field */
.main-nav__search { display: flex; align-items: center; margin: 0 10px 0 auto; }
.main-nav__search label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;                       /* legacy-content.css: label { margin-bottom: 5px; font-weight: 500 !important } */
  padding: 10px 20px;
  font-weight: 400 !important;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ab-white);
  cursor: pointer;
}
.main-nav__search img { width: 16px; height: auto; transform: scaleY(-1); }
.main-nav__search input {
  width: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ab-white);
  transition: width 0.2s;
}
.main-nav__search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.main-nav__search:focus-within input,
.main-nav__search input:not(:placeholder-shown) { width: 180px; padding-inline: 4px; border-bottom-color: var(--ab-white); }
.main-nav__search input:focus { outline: none; }
.main-nav__search:focus-within { outline: 2px solid var(--ab-white); outline-offset: 2px; }

.main-nav__toggle { display: none; }

/* ---------------------------------------------------------------- Header: mobile menu */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 20px 25px 40px;
  background: var(--ab-burgundy);
  color: var(--ab-white);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:hover, .mobile-menu a:focus { color: var(--ab-white); }
.mobile-menu__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.mobile-menu__segments { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.mobile-menu__segments a {
  position: relative;
  display: block;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ab-white);
  text-decoration: none;
}
.mobile-menu__segments .is-active > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ab-white);
}
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ab-white);
  cursor: pointer;
}
.mobile-menu__close-icon { position: relative; width: 26px; height: 26px; }
.mobile-menu__close-icon::before,
.mobile-menu__close-icon::after {
  content: "";
  position: absolute;
  top: 12px; left: -1px;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--ab-white);
  transform: rotate(45deg);
}
.mobile-menu__close-icon::after { transform: rotate(-45deg); }

.mobile-menu__my-pages, .mobile-menu__my-pages:visited {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--ab-white);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--ab-white);
  text-decoration: none;
}
.mobile-menu__list { margin: 0 0 20px; padding: 0; list-style: none; }
.mobile-menu__list a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ab-white);
  text-decoration: none;
}
.mobile-menu__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--ab-white);
}
/* The search icon artwork is white; it needs to be dark on the white field */
.mobile-menu__search img { width: 16px; height: auto; transform: scaleY(-1); filter: brightness(0); }
.mobile-menu__search input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: #333;
}
.mobile-menu__search input:focus { outline: none; }
.mobile-menu__search:focus-within { outline: 2px solid var(--ab-red); }

/* ---------------------------------------------------------------- Footer */

.site-footer { background: var(--ab-burgundy); color: var(--ab-white); padding-top: 20px; }
.site-footer .ab-container { padding-inline: 55px; }
.site-footer a { color: var(--ab-white); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: var(--ab-white); text-decoration: underline; }
.site-footer__rule { margin: 20px 0; border: 0; border-top: 1px solid var(--ab-footer-rule); }

.footer-nav__columns { display: flex; margin: 40px 0 0; padding: 0; list-style: none; }
.footer-nav__columns > li { flex: 1 1 0; min-width: 0; padding-right: 15px; }
.footer-nav__columns > li > a { display: inline-block; margin-bottom: 4px; font-size: 20px; font-weight: 700; line-height: 24px; }
.footer-nav__columns .sub-menu { margin: 0; padding: 0; list-style: none; }
.footer-nav__columns .sub-menu a { display: inline-block; font-size: 14px; line-height: 48px; }

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  font-size: 12px;
}
.site-footer__follow { display: flex; align-items: center; gap: 12px; }

/* The socials artwork is one image (104x24); invisible links sit over each 24px icon */
.site-footer__social { position: relative; width: 104px; height: 24px; flex: none; }
.site-footer__social img { display: block; width: 104px; height: 24px; }
.site-footer__social-link { position: absolute; top: 0; width: 24px; height: 24px; }
.site-footer__social-link--facebook { left: 0; }
.site-footer__social-link--x { left: 40px; }
.site-footer__social-link--instagram { left: 80px; }

.site-footer__legal { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.site-footer__legal li + li::before { content: "|"; margin: 0 15px; }

.site-footer__brand { padding: 20px 0 40px; text-align: center; font-size: 12px; }
.site-footer__brand img { width: 62px; height: auto; }
.site-footer__brand p { margin: 30px 0 0; }

/* ---------------------------------------------------------------- Bli-kunde address widget */

/* The card the old widget drew itself (address-search__card in its own CSS): white, from 768px; on smaller
   screens the page's own white box shows, as before */
@media (min-width: 768px) {
  .bli-kunde-widget {
    padding: 28px 56px;
    border-radius: 15px;
    background: var(--ab-white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  }
}

/* ---------------------------------------------------------------- Legacy icon font */

/* The old theme's "altibox" icon font, for the icons in migrated content (checkmarks, info, contact ...).
   legacy-content.css sets font-family 'altibox' on [class^=icon-]; these are the glyphs content uses. */
@font-face {
  font-family: "altibox";
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url("../fonts/altibox-icons.woff") format("woff");
}
.icon-advarsel-hvit-rgb::before { content: "\e62f"; }
.icon-cart3::before { content: "\e04f"; }
.icon-favoritt-hvit-rgb::before { content: "\e61e"; }
.icon-film-grasirkel-rgb::before { content: "\e610"; }
.icon-huskeliste-grasirkel-rgb::before { content: "\e612"; }
.icon-info-grasirkel-rgb::before { content: "\e602"; }
.icon-info-hvit-rgb::before { content: "\e622"; }
.icon-innstillinger-grasirkel-rgb::before { content: "\e603"; }
.icon-kontakt-grasirkel-rgb::before { content: "\e60c"; }
.icon-kontakt-hvit-rgb::before { content: "\e628"; }
.icon-kontaktskjema-rdsirkel-rgb::before { content: "\e636"; }
.icon-programarkiv-grasirkel-rgb::before { content: "\e605"; }
.icon-spm-hvit-rgb::before { content: "\e629"; }
.icon-telefon-grasirkel-rgb::before { content: "\e619"; }
.icon-tv-grasirkel-rgb::before { content: "\e60b"; }
.icon-tv-hvit-rgb::before { content: "\e621"; }
.icon-tv-program-grasirkel-rgb::before { content: "\e611"; }
.icon-uniE001::before { content: "\e001"; }
.icon-uniE00A::before { content: "\e00a"; }
.icon-uniE01F::before { content: "\e01f"; }
.icon-uniE03A::before { content: "\e03a"; }
.icon-uniE042::before { content: "\e042"; }
.icon-uniE048::before { content: "\e048"; }
.icon-uniE059::before { content: "\e059"; }
.icon-uniE06A::before { content: "\e06a"; }
.icon-uniE090::before { content: "\e090"; }
.icon-uniE0A6::before { content: "\e0a6"; }
.icon-uniE0A7::before { content: "\e0a7"; }
.icon-uniE0AC::before { content: "\e0ac"; }
.icon-utbygging-rdsirkel-rgb::before { content: "\e63e"; }
.icon-wifi-grasirkel-rgb::before { content: "\e614"; }
.icon-wifi-hvit-rgb::before { content: "\e62d"; }

/* ---------------------------------------------------------------- Templates without Beaver Builder */

.entry, .not-found, .search-page { max-width: var(--ab-container); margin: 60px auto; padding-inline: var(--ab-gutter); }
.not-found { text-align: center; }

.search-page__form { display: flex; gap: 10px; max-width: 600px; margin: 20px 0 40px; }
.search-page__form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
}
.search-page__list { margin: 0; padding: 0; list-style: none; }
.search-page__item { padding: 20px 0; border-top: 1px solid #e5e5e5; }
.search-page__item h2 { margin: 0 0 8px; font-size: 20px; }
.search-page__item p { margin: 0; color: #555; }
.search-page__item mark { background: var(--ab-light-peach); color: inherit; font-weight: 500; }
.search-page .nav-links { display: flex; gap: 15px; margin-top: 30px; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 991px) {
  .segment-nav,
  .main-nav__menu,
  .main-nav__my-pages,
  .main-nav__search { display: none; }

  .main-nav__inner { min-height: 60px; padding-block: 10px; }
  .main-nav__logo { padding-left: 10px; }

  .main-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--ab-white);
    cursor: pointer;
  }
  .main-nav__toggle-icon,
  .main-nav__toggle-icon::before,
  .main-nav__toggle-icon::after {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--ab-white);
  }
  .main-nav__toggle-icon { position: relative; }
  .main-nav__toggle-icon::before,
  .main-nav__toggle-icon::after { content: ""; position: absolute; left: 0; }
  .main-nav__toggle-icon::before { top: -8px; }
  .main-nav__toggle-icon::after { top: 8px; }

  .site-footer .ab-container { padding-inline: 25px; }
  .footer-nav__columns { flex-wrap: wrap; row-gap: 24px; }
  .footer-nav__columns > li { flex: 1 0 45%; }
}

@media (max-width: 600px) {
  .footer-nav__columns > li { flex-basis: 100%; }
  .site-footer__meta { flex-direction: column; align-items: flex-start; }
}