/* ==========================================================================
   Røros – Kampanje
   Figma: «Campaign tooltip» 2333:1198 and «Campaign box» 2333:1211
   Markup: components/campaign-tooltip.php, components/campaign-box.php,
   settings: inc/campaign.php. Loaded only while the campaign runs, for
   visitors who aren't logged in.

   campaign.js moves the tooltip into the header and sets, from the header's
   top left corner:
     --campaign-tooltip-icon-x       – the account icon's centre
     --campaign-tooltip-icon-bottom  – the account icon's bottom edge
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tooltip – desktop: a 340px bubble with its arrow under the account icon.
   Mobile: a strip under the header with the short text.
   -------------------------------------------------------------------------- */

.campaign-tooltip {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--roros-spacing-12);
  background: var(--roros-color-surface-cream);
  color: var(--roros-color-text-primary);
  text-align: left;
}

.campaign-tooltip[hidden] {
  display: none;
}

/* The arrow – a 14px square turned 45°, half above the top edge */
.campaign-tooltip::before {
  content: "";
  position: absolute;
  top: -0.4375rem; /* 7px */
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  background: inherit;
  transform: rotate(45deg);
}

/* Out of the way while the search panel, a dropdown or the mobile menu is open */
:root.roros-search-open .campaign-tooltip,
#masthead:has(.menu-primary-inner > .menu-item-has-children:is(:hover, :focus-within)) .campaign-tooltip,
#masthead:has(.main-menu-container.open-items) .campaign-tooltip {
  visibility: hidden;
}

.campaign-tooltip__heading,
.campaign-tooltip__text,
.campaign-tooltip__text-mobile {
  margin: 0;
  color: var(--roros-color-text-primary);
  overflow-wrap: anywhere; /* a word wider than the bubble or strip */
}

.campaign-tooltip__heading {
  grid-area: heading;
  font-family: var(--roros-font-family-display);
  font-size: var(--roros-font-size-h4);
  font-weight: normal;
  line-height: var(--roros-line-height-h4);
}

.campaign-tooltip__text {
  grid-area: text;
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-body-sm);
  font-weight: 400;
  line-height: var(--roros-line-height-body-sm);
}

.campaign-tooltip__text-mobile {
  grid-area: text-mobile;
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-label);
  font-weight: 500;
  line-height: var(--roros-line-height-label);
}

.campaign-tooltip__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--roros-spacing-12) var(--roros-spacing-24);
}

/* Button, Primary – as wide as its label here */
.campaign-tooltip__button {
  width: auto;
  text-align: center;
  text-decoration: none;
}

.campaign-tooltip__button:hover {
  color: var(--roros-color-text-inverse);
}

.campaign-tooltip__link,
.campaign-tooltip__link:hover {
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-ui-body);
  font-weight: 400;
  line-height: var(--roros-line-height-ui-body);
  color: var(--roros-color-text-primary);
  text-decoration: underline;
}

/* «Lukk» – Figma's cross is 12px wide in a 24px icon, close.svg's 10px.
   Drawn at 29px it matches. The hit area reaches 44px with ::after. */
.campaign-tooltip__close {
  grid-area: close;
  position: relative;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.campaign-tooltip__close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--roros-color-icon-primary);
  -webkit-mask: url("../icon/close.svg") center / 1.8125rem no-repeat;
  mask: url("../icon/close.svg") center / 1.8125rem no-repeat;
}

.campaign-tooltip__close::after {
  content: "";
  position: absolute;
  inset: -0.625rem; /* 10px */
}

@media (min-width: 960px) {
  /* The bubble's anchor. When the header sticks, Uncode's inline position: fixed wins.
     Desktop only: on mobile Uncode's own CSS fixes the header from the start. */
  #masthead .menu-container:has(> .campaign-tooltip) {
    position: relative;
  }

  /* Right edge 42px right of the icon's centre, so the arrow, 42px in from it, is under the icon.
     Top: the arrow's tip 4px below the icon. */
  .campaign-tooltip {
    top: calc(var(--campaign-tooltip-icon-bottom) + 0.875rem); /* 14px */
    left: calc(var(--campaign-tooltip-icon-x) + 2.625rem); /* 42px */
    width: 21.25rem; /* 340px */
    padding: var(--roros-spacing-24);
    row-gap: var(--roros-spacing-12);
    grid-template-areas:
      "heading close"
      "text text"
      "actions actions";
    transform: translateX(-100%);
  }

  .campaign-tooltip::before {
    right: calc(2.625rem - 0.4375rem);
  }

  .campaign-tooltip__text-mobile {
    display: none;
  }

  .campaign-tooltip__actions {
    padding-top: 0.25rem; /* 4px */
  }
}

@media (max-width: 959px) {
  .campaign-tooltip {
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--roros-spacing-16);
    row-gap: 0.5rem; /* 8px */
    grid-template-areas:
      "text-mobile close"
      "actions .";
  }

  .campaign-tooltip::before {
    left: calc(var(--campaign-tooltip-icon-x) - 0.4375rem);
  }

  .campaign-tooltip__heading,
  .campaign-tooltip__text {
    display: none;
  }

  .campaign-tooltip__actions {
    padding-top: 0.5rem; /* 8px */
  }
}

/* --------------------------------------------------------------------------
   2. Box on Min side – the image above the text, or beside it where the box is
   wide enough. Min side's column is narrower than the screen, so the layout goes
   by the box's own width (container query): Figma's desktop layout from 800px,
   its mobile layout below.
   -------------------------------------------------------------------------- */

.campaign-box {
  container-type: inline-size;
  margin-bottom: var(--roros-spacing-32);
  background: var(--roros-color-surface-cream);
  color: var(--roros-color-text-primary);
}

@media (min-width: 960px) {
  .campaign-box {
    margin-bottom: 4rem; /* 64px to the forms */
  }
}

.campaign-box__inner {
  display: flex;
  flex-direction: column;
}

.campaign-box__media {
  padding: var(--roros-spacing-24) var(--roros-spacing-24) 0;
}

.campaign-box__image {
  display: block;
  width: 100%;
  height: 12.5rem; /* 200px */
  object-fit: contain;
}

.campaign-box__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--roros-spacing-12);
  min-width: 0;
  padding: var(--roros-spacing-24) var(--roros-spacing-16);
}

@container (min-width: 50rem) {
  .campaign-box__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--roros-spacing-48);
    padding-right: var(--roros-spacing-48);
  }

  /* 340px image. In a box under 936px it shrinks, and the text keeps its 400px. */
  .campaign-box__media {
    flex: 0 1 26.25rem; /* 420px = 48 + 340 + 32 */
    min-width: 0;
    padding: var(--roros-spacing-32) var(--roros-spacing-32) var(--roros-spacing-32) var(--roros-spacing-48);
  }

  .campaign-box__image {
    height: 14.375rem; /* 230px */
  }

  /* 400px: room for «Rørosmeieriet‑pakke» in H2, 381px with its non-breaking hyphen */
  .campaign-box__content {
    flex: 1 0 25rem;
    gap: var(--roros-spacing-16);
    padding: var(--roros-spacing-32) 0;
  }

  /* Without an image */
  .campaign-box__content:first-child {
    padding-left: var(--roros-spacing-48);
  }
}

.campaign-box__heading,
.campaign-box__text,
.campaign-box__terms {
  margin: 0;
  letter-spacing: 0;
  overflow-wrap: anywhere; /* a word wider than the box, e.g. on a 320px phone */
}

.campaign-box .campaign-box__heading { /* Uncode sizes every h2 – one class isn't enough */
  font-family: var(--roros-font-family-display);
  font-size: var(--roros-font-size-h2);
  font-weight: normal;
  line-height: var(--roros-line-height-h2);
  color: var(--roros-color-text-primary);
}

.campaign-box__text {
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-body);
  font-weight: 400;
  line-height: var(--roros-line-height-body);
  color: var(--roros-color-text-primary);
}

.campaign-box__terms {
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-caption);
  font-weight: 400;
  line-height: var(--roros-line-height-caption);
  color: var(--roros-color-text-secondary);
}

.campaign-box__terms-link,
.campaign-box__terms-link:hover {
  color: inherit;
  text-decoration: underline;
}