/* ==========================================================================
   Røros – Header og meny
   Figma: Røros – Design, node 2183:7 (desktop) and 2183:9 (mobile)
   Loaded from functions.php. Icons are in resources/icon/, so keep this as a file
   (pasting it into Theme Options would break the icon paths).

   Selectors:
     .menu-primary-inner > li  – top-level items in the main menu (Uncode)
     .navbar-extra-icons       – search / account / cart icons, desktop (Uncode)
     .mobile-additional-icons  – search / account / cart icons, mobile (Uncode)
     .mobile-menu-button       – burger, mobile (Uncode)
     .menu-item-has-children   – items that have a dropdown / mega menu
     .current-menu-item        – the page you are on
     .current-menu-ancestor    – parents of the page you are on

   Set these in Theme Options, not here:
     - Menu hover and active color: #000000
     - Menu dropdown shadow: none
     - Logo height 54px, content width 1080px
   ========================================================================== */

:root {
  /* Colours, fonts and text sizes are the design tokens in globals.css. */
  /* Left/right padding on top-level menu links. 2 × this = the 32px gap
     between items in Figma. The open-state line is inset by the same
     amount so it spans only label + chevron. */
  --roros-nav-link-padding: 16px;
  /* Figma: 64px from the logo to the first menu label */
  --roros-nav-logo-gap: 64px;
}

/* --------------------------------------------------------------------------
   0. Header bar – Figma desktop "Header": 102px = 24px + 54px logo + 24px.
   Uncode pads the logo column 27px (its column padding) and adds an empty
   1px menu border. Uncode measures the header from the page, so the content,
   mega menu and search panel follow the new height.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  #masthead .logo-container {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  #masthead .menu-container.menu-borders {
    border-bottom-width: 0 !important;
    box-shadow: none !important;
  }

  /* With the boxed layout the bar is only as wide as the box, so the page shows
     beside the sticky header on wide screens. Paint its white out to both screen
     edges, as the mega menu panel (3b) – border-image outset takes no space and
     causes no sideways scrolling. */
  #masthead .menu-container {
    border-image: linear-gradient(var(--roros-color-bg-page) 0 0) 0 fill / 0 / 0 100vw;
  }
}

/* --------------------------------------------------------------------------
   1. Top-level menu items
   Figma: 32px between items, text GT Walsheim Medium 18/25.
   -------------------------------------------------------------------------- */

.menu-primary-inner > .menu-item > a {
  position: relative;
  color: var(--roros-color-text-primary) !important;
  text-decoration: none !important;
}

@media (min-width: 960px) {
  /* Flex instead of inline items, so the white space between <li>s
     doesn't add to the 32px gap */
  .menu-primary-inner {
    display: flex !important;
    padding-left: calc(var(--roros-nav-logo-gap) - var(--roros-nav-link-padding)) !important;
  }

  .menu-primary-inner > .menu-item > a {
    padding-left: var(--roros-nav-link-padding) !important;
    padding-right: var(--roros-nav-link-padding) !important;
    font-family: var(--roros-font-family-ui) !important;
    font-size: var(--roros-font-size-label) !important;
    font-weight: 500 !important;
    line-height: var(--roros-line-height-label) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}

@media (min-width: 960px) {
  /* Chevron: Figma "Icon / Chevron down", 16px, 4px gap from the label.
     Replaces Uncode's font icon with the SVG, coloured by currentColor. */
  .menu-primary-inner > .menu-item-has-children > a > i.fa-dropdown {
    width: 16px;
    height: 16px;
    margin-left: 4px !important;
  }
  .menu-primary-inner > .menu-item-has-children > a > i.fa-dropdown::before {
    content: "" !important;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: currentColor;
    -webkit-mask: url("../icon/chevron-down.svg") center / contain no-repeat;
    mask: url("../icon/chevron-down.svg") center / contain no-repeat;
  }
}

/* --------------------------------------------------------------------------
   1b. Search, account and cart – Figma "Icon button"
   24px icon in a 32px button, 16px apart, right edge on the content edge.
   The link is 44px wide (minimum touch target) and centred on the button,
   so neighbours are spaced 4px apart and the last one hangs 6px outside.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .navbar-extra-icons > ul {
    display: flex !important;
    width: max-content !important;
    padding-left: 0 !important;
    margin-right: -6px !important;
  }

  .navbar-extra-icons > ul > li {
    flex: none;
  }

  .navbar-extra-icons > ul > li + li {
    margin-left: 4px !important;
  }

  .navbar-extra-icons > ul > li > a {
    justify-content: center;
    width: 44px !important;
    padding: 0 !important;
  }
}

/* Icon look, shared by desktop and mobile: Figma icons replace Uncode's
   font icons, drawn as masks so they take the link colour. */
:is(.navbar-extra-icons, .mobile-additional-icons) :is(.search-icon-container, .cart-icon-container, .account-icon-container) {
  position: relative;
  display: block;
}

:is(.navbar-extra-icons, .mobile-additional-icons) :is(.fa-search3, .fa-user-o, .fa-cart) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  font-size: 0 !important;
}

:is(.navbar-extra-icons, .mobile-additional-icons) :is(.fa-search3, .fa-user-o, .fa-cart)::before {
  content: "" !important;
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--roros-icon) center / contain no-repeat;
  mask: var(--roros-icon) center / contain no-repeat;
}

:is(.navbar-extra-icons, .mobile-additional-icons) .fa-search3 { --roros-icon: url("../icon/search.svg"); }
:is(.navbar-extra-icons, .mobile-additional-icons) .fa-user-o  { --roros-icon: url("../icon/user.svg"); }
:is(.navbar-extra-icons, .mobile-additional-icons) .fa-cart    { --roros-icon: url("../icon/bag.svg"); }

/* Cart count – Figma "Teller": 18px black circle, white 12/17 */
:is(.navbar-extra-icons, .mobile-additional-icons) .cart-icon-container .badge {
  position: absolute;
  top: -4px;
  left: 20px;
  right: auto;
  box-sizing: border-box !important; /* Uncode's badge styles */
  min-width: 18px;
  width: max-content;
  height: 18px;
  margin: 0;
  padding: 0 3px;
  transform: none !important; /* Uncode's badge styles */
  border-radius: 999px;
  text-align: center;
  background: var(--roros-color-action-primary);
  color: var(--roros-color-text-inverse);
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-micro);
  font-weight: 400;
  line-height: var(--roros-line-height-micro);
  letter-spacing: 0;
}

/* Sections 2–4 are desktop only: on mobile the menu is a list, not dropdowns. */
@media (min-width: 960px) {

  /* --------------------------------------------------------------------------
     2. Open state – "Open = undermenyen er åpen (svart strek under)"
     2px black line under the label AND the chevron, as on the Figma nav item.
     Drawn with ::after instead of text-decoration: Uncode's link is a flex
     container, so a text underline also lands on the icon and flips above it
     when the icon rotates.
     The link is as tall as the header, so the line is placed from the middle:
     half the 25px text line + 8px padding = about 20px below centre.
     :focus-within makes it work for keyboard users too.
     -------------------------------------------------------------------------- */

  .menu-primary-inner > .menu-item > a::after {
    content: "";
    position: absolute;
    left: var(--roros-nav-link-padding);
    right: var(--roros-nav-link-padding);
    top: calc(50% + 20px);
    height: 2px;
    background: var(--roros-color-border-strong);
    opacity: 0;
    pointer-events: none;
  }

  /* Same line on hover for every top-level item (no text underline) */
  .menu-primary-inner > .menu-item:is(:hover, :focus-within) > a::after {
    opacity: 1;
  }

  .menu-primary-inner > .menu-item-has-children > a > i {
    transition: transform 0.2s ease;
  }

  .menu-primary-inner > .menu-item-has-children:is(:hover, :focus-within) > a > i {
    transform: rotate(180deg);
  }

  /* --------------------------------------------------------------------------
     3. Overlay – Figma "Overlegg": 20% black over the page, below the panel.
     Drawn as a huge shadow on the open panel, clipped at the panel's top edge,
     so it never covers the header and needs no fixed header height.
     The clip and "no shadow" are set on the closed state too: Uncode keeps
     the panel open for a moment after hover ends and transitions "all" over
     0.6s. If the clip went with :hover, the overlay would animate unclipped
     into Uncode's black dropdown shadow and flash over the header.
     -------------------------------------------------------------------------- */

  .menu-primary-inner > .menu-item-has-children > :not(a) {
    /* !important: Uncode sets its own dropdown shadow (0 55px 80px -40px #000) */
    box-shadow: none !important;
    clip-path: inset(0 -100vmax -100vmax -100vmax);
  }

  .menu-primary-inner > .menu-item-has-children:is(:hover, :focus-within) > :not(a) {
    box-shadow: 0 0 0 100vmax var(--roros-color-bg-image-overlay) !important;
  }

  /* --------------------------------------------------------------------------
     3b. Full-width panel with the boxed layout
     Paints the white panel and its 1px black top/bottom lines out to both
     screen edges, without changing layout or causing sideways scrolling
     (border-image outset only paints; it takes no space).
     .block-wrapper-parent is Uncode's class for a mega menu panel – WordPress
     has no class that separates mega menus from normal dropdowns.
     Remove the border from the Content Block's Custom tab when using this,
     so the lines come from one place.
     -------------------------------------------------------------------------- */

  .menu-primary-inner > .menu-item-has-children > .block-wrapper-parent > li > :first-child {
    border-image:
      linear-gradient(var(--roros-color-border-strong) 0 1px, var(--roros-color-bg-page) 0 calc(100% - 1px), var(--roros-color-border-strong) 0)
      0 fill / 0 / 0 100vw;
  }

  /* --------------------------------------------------------------------------
     4. Mega menu links (inside the Content Block)
     Figma "Menu link": title Belwe 24/29, description 16/22 #323232.
     Underline the title on hover so the whole link reads as clickable.
     -------------------------------------------------------------------------- */

  .menu-primary-inner .menu-item .menu-item a:hover,
  .menu-primary-inner .menu-item .menu-item a:focus-visible {
    text-decoration: underline 1px;
    text-underline-offset: 4px;
  }

  /* Layout – Figma "Undermeny – Oppskrifter": 48px top/bottom, content
     on the 1080px column. Link columns 232px wide, 32px apart, featured
     recipe (264px) pushed to the right edge. Replaces WPBakery's equal
     columns and 36px gutters. Empty columns are hidden. */
  .megamenu-block-wrapper > .vc_row > .row-parent {
    padding: 48px 0 !important;
  }

  .megamenu-block-wrapper .row-inner {
    display: flex !important;
    gap: 32px;
    margin: 0 !important;
  }

  .megamenu-block-wrapper .row-inner > .wpb_column {
    flex: none;
    float: none !important;
    width: 232px !important;
    /* Uncode sets height: 0 on columns in Chrome (table-cell layout) */
    height: auto !important;
    padding: 0 !important;
  }

  .megamenu-block-wrapper .row-inner > .wpb_column:not(:has(h2, .tmb)) {
    display: none !important;
  }

  .megamenu-block-wrapper .row-inner > .wpb_column:has(.tmb) {
    width: 264px !important;
    margin-left: auto;
  }

  /* 4px between title and description */
  .megamenu-block-wrapper .wpb_column:has(h2) .uncode_text_column {
    margin-top: 4px !important;
  }

  /* Figma "Menu link": the whole block is clickable, hover underlines the
     title. The click area is Uncode's empty column link (.col-link) laid
     over the column, so the hover is read from that link. */
  .megamenu-block-wrapper .wpb_column:has(> .col-link:is(:hover, :focus-visible)) h2 {
    text-decoration: underline 1px !important;
    text-underline-offset: 4px;
  }

  /* Featured recipe – Figma "Utvalgt": image, 12px, title Heading/H4,
     12px, "Se oppskriften →" in UI/Body (Link / See all). Uncode renders
     the link as an outline button; it is reset to a text link here.
     The 12px gaps are padding on the links (not margin/padding on their
     wrappers), and both links are full width, so every point of the card
     is clickable. */
  .megamenu-block-wrapper .tmb .t-entry-text-tc {
    padding: 0 !important;
  }

  .megamenu-block-wrapper .tmb .t-entry-title,
  .megamenu-block-wrapper .tmb .t-entry-title a {
    margin: 0 !important;
    color: var(--roros-color-text-primary) !important;
    font-family: var(--roros-font-family-display) !important;
    font-size: var(--roros-font-size-h4) !important;
    font-weight: normal !important;
    line-height: var(--roros-line-height-h4) !important;
    letter-spacing: 0 !important;
  }

  .megamenu-block-wrapper .tmb .t-entry-title a {
    display: block;
    padding: 12px 0 !important;
  }

  /* flex: the wrapper is a <p> with Uncode's 28/49 body text, which would
     add space around the link */
  .megamenu-block-wrapper .tmb .t-entry-readmore {
    display: flex;
    margin: 0 !important;
    padding: 0;
  }

  /* #masthead: Uncode's button colours are !important with long
     .style-dark .tmb-light … selectors */
  #masthead .megamenu-block-wrapper .tmb .t-entry-readmore .btn {
    display: flex !important;
    flex: 1;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--roros-color-text-primary) !important;
    font-family: var(--roros-font-family-ui) !important;
    font-size: var(--roros-font-size-ui-body) !important;
    font-weight: 400 !important;
    line-height: var(--roros-line-height-ui-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    /* Uncode underlines links in paragraphs (.row .uncoltable p a) */
    text-decoration: none !important;
  }

  #masthead .megamenu-block-wrapper .tmb .t-entry-readmore .btn::after {
    content: "";
    flex: none;
    width: 16px;
    height: 14px;
    background: var(--roros-color-icon-primary);
    -webkit-mask: url("../icon/arrow-right.svg") center / contain no-repeat;
    mask: url("../icon/arrow-right.svg") center / contain no-repeat;
  }

  #masthead .megamenu-block-wrapper .tmb :is(.t-entry-title a, .btn):is(:hover, :focus-visible) {
    text-decoration: underline 1px !important;
    text-underline-offset: 4px;
  }

}

/* Mega menu link text – Figma "Menu link": title Heading/H3, description
   Body/Small. Link columns are the ones with an h2 title; the featured recipe
   column has none and keeps its own sizes.
   :where() keeps specificity below the mobile list rules in section 7, so
   mobile still gets its 18/25 titles. */
.megamenu-block-wrapper :where(.wpb_column:has(h2)) h2 {
  font-family: var(--roros-font-family-display) !important;
  font-size: var(--roros-font-size-h3) !important;
  /* Belwe Medium has a single weight; Uncode's heading weight would fake bold */
  font-weight: normal !important;
  line-height: var(--roros-line-height-h3) !important;
  color: var(--roros-color-text-primary) !important;
}

.megamenu-block-wrapper :where(.wpb_column:has(h2)) p {
  font-family: var(--roros-font-family-ui) !important;
  font-size: var(--roros-font-size-body-sm) !important;
  line-height: var(--roros-line-height-body-sm) !important;
  color: var(--roros-color-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */

.menu-item > a:focus-visible {
  outline: 2px solid var(--roros-color-border-strong);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-item-has-children > a > i {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   6. Mobile header – Figma "Header" (Device=Mobile), node 2148:5800
   68px tall: 44px logo, 12px top/bottom, 16px sides.
   Search, account, cart (32px buttons, 12px apart) and a 24px burger.
   Each link is 44px wide for touch, so neighbouring hit areas just meet.
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  #masthead .row-menu-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #logo-container-mobile {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 !important;
  }

  #logo-container-mobile #main-logo,
  #logo-container-mobile .logo-image {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  #logo-container-mobile .logo-image img {
    width: 100% !important;
    height: 100% !important;
  }

  #logo-container-mobile .mmb-container {
    position: static !important;
    display: flex !important;
    align-items: center;
    height: auto !important;
    margin-right: -10px;
  }

  .mobile-additional-icons {
    position: static !important;
    display: flex !important;
    align-items: center;
    height: auto !important;
    margin: 0 !important;
  }

  /* #logo-container-mobile: Uncode hides the mobile search link with a
     stronger selector */
  #logo-container-mobile .mobile-additional-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-additional-icons :is(.fa-search3, .fa-user-o, .fa-cart) {
    margin: 0 !important;
  }

  /* Burger → Figma "Icon / Menu"; cross → "Icon / Close" when open.
     Uncode's three animated lines are hidden. */
  .mobile-menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin-left: -4px !important;
    padding: 0 !important;
  }

  .mobile-menu-button .lines {
    display: none !important;
  }

  .mobile-menu-button::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: var(--roros-color-icon-primary);
    -webkit-mask: url("../icon/menu.svg") center / contain no-repeat;
    mask: url("../icon/menu.svg") center / contain no-repeat;
  }

  .mobile-menu-button.close::before {
    -webkit-mask-image: url("../icon/close.svg");
    mask-image: url("../icon/close.svg");
  }

  /* ------------------------------------------------------------------------
     7. Mobile menu – Figma "Meny – mobil, åpen", node 2135:3014
     Top level: Belwe Medium 22/26, 32px apart.
     Sub-links shown open under their heading: GT Walsheim 18/25,
     12px below the heading, 8px apart. No chevrons.
     ------------------------------------------------------------------------ */

  #masthead .menu-horizontal-inner {
    padding: 16px 0 32px !important;
  }

  .menu-primary-inner > .menu-item + .menu-item {
    margin-top: 32px;
  }

  /* #masthead: Uncode's "mobile menu font size" (Theme Options) is set with
     a long :not() chain that beats a class-only selector. */
  #masthead .menu-primary-inner > .menu-item > a {
    display: block !important;
    padding: 0 !important;
    font-family: var(--roros-font-family-display) !important;
    font-size: var(--roros-font-size-h3) !important;
    font-weight: normal !important;
    line-height: var(--roros-line-height-h3) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .menu-primary-inner .fa-dropdown {
    display: none !important;
  }

  /* Always open, in the page flow. #masthead: Uncode's submenu rules are
     more specific than a plain class selector. */
  #masthead .menu-primary-inner > .menu-item > ul {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Uncode turns clicks off on closed dropdowns
       (.menu-horizontal ul.menu-smart li > ul) – here they are always open */
    pointer-events: auto !important;
  }

  .menu-primary-inner > .menu-item > ul > .menu-item + .menu-item {
    margin-top: 8px;
  }

  #masthead .menu-primary-inner > .menu-item > ul > .menu-item > a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--roros-font-family-ui) !important;
    font-size: var(--roros-font-size-body) !important;
    font-weight: 400 !important;
    line-height: var(--roros-line-height-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* Mega menu Content Block (Oppskrifter): show only the link titles as a
     plain list – no descriptions, no featured recipe, no panel styling. */
  .menu-primary-inner .megamenu-block-wrapper > .vc_row {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .menu-primary-inner .megamenu-block-wrapper .wpb_column:not(:has(h2)) {
    display: none !important;
  }

  .menu-primary-inner .megamenu-block-wrapper :is(.row, .row-inner, .wpb_column, .uncol, .uncoltable, .uncell, .uncont) {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-primary-inner .megamenu-block-wrapper .wpb_column + .wpb_column {
    margin-top: 8px !important;
  }

  .menu-primary-inner .megamenu-block-wrapper .uncont > :not(:has(h2)) {
    display: none !important;
  }

  .menu-primary-inner .megamenu-block-wrapper .heading-text {
    margin: 0 !important;
    line-height: var(--roros-line-height-body) !important;
  }

  .menu-primary-inner .megamenu-block-wrapper h2 {
    display: block !important;
    margin: 0 !important;
    font-family: var(--roros-font-family-ui) !important;
    font-size: var(--roros-font-size-body) !important;
    font-weight: 400 !important;
    line-height: var(--roros-line-height-body) !important;
    letter-spacing: 0 !important;
  }

  /* Underline on hover, as on desktop. Mega menu titles are made clickable
     by Uncode's column link (.col-link) laid over them, so their hover is
     read from that link. (hover: hover) keeps the underline from sticking
     after a tap on touch screens; keyboard focus always shows it. */
  @media (hover: hover) {
    #masthead .menu-primary-inner .menu-item > a:hover,
    .menu-primary-inner .megamenu-block-wrapper .wpb_column:has(> .col-link:hover) h2 {
      text-decoration: underline 1px !important;
      text-underline-offset: 4px;
    }
  }

  #masthead .menu-primary-inner .menu-item > a:focus-visible,
  .menu-primary-inner .megamenu-block-wrapper .wpb_column:has(> .col-link:focus-visible) h2 {
    text-decoration: underline 1px !important;
    text-underline-offset: 4px;
  }
}