/*
Service messages - short, time-limited operational notices.

Two components: the global bar, a row of the sticky header, and the in-page
container shown on the front page and on branch pages. The placement decides
the tone, so neither has variants: global is always critical, in-page always
informational.

Sizes are transcribed from Casper's frontend design, which draws a 375 and a
1440 artboard; the switch between them is the design system's "small"
breakpoint. The type is spelled out rather than inherited because the design
system sets no font on body - every component declares its own.
*/

/* --- Global bar ------------------------------------------------------- */

/*
The bar is a full-width row of the header's grid - it is printed inside the
`<header>` so that it sticks, hides and returns with the menu instead of
sitting still above it (DDF-592). `1 / -1` because the header's own columns
change with the breakpoint and with the burger menu.

The text size is fixed against iOS. Safari there inflates text it judges too
small for the block around it (`-webkit-text-size-adjust: auto`, its default),
and the move into the header changed which block that is: the bar came back
from an iPhone about 40% larger than the design draws it, while the logo in
the row below was untouched. The sizes here are transcribed from the design
and the bar is a line or two tall by construction, so it opts out. This turns
off the automatic adjustment only - pinch zoom and the reader's own text size
still apply.
*/

.service-message-bar {
  -webkit-text-size-adjust: 100%;
  background-color: var(--c-signal-alert);
  color: var(--c-text-primary-white);
  grid-column: 1 / -1;
  text-size-adjust: 100%;
}

.service-message-bar__inner {
  align-items: flex-start;
  box-sizing: border-box;
  color: inherit;
  display: flex;
  gap: 12px;
  margin: 0 auto;
  max-width: 1440px;
  padding: 12px 16px;
  text-decoration: none;
}

/*
The icons are drawn in black - the bell filled, the arrow stroked. Inlined
into the page they can follow the text colour instead.
*/

.service-message-bar__icon {
  display: flex;
  flex: 0 0 auto;
  margin-top: 2px;
}

.service-message-bar__icon svg {
  height: 18px;
  width: 18px;
}

.service-message-bar__icon path {
  fill: currentcolor;
}

.service-message-bar__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.service-message-bar__heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
}

.service-message-bar__body {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}

/*
The bar is clickable in full, and the arrow is what says so - at every width.
The design puts a "Læs mere" text link there on mobile, which the CMS has no
field for; leaving the arrow out to match left the mobile bar with nothing at
all to show it was a link, while the in-page messages showed theirs (DDF-592).

Centred against the whole bar rather than pinned to the first line: the arrow
stands for the message as a whole, not for the line of text it happens to sit
beside.

The margin is room for the animation: the head travels 30px right on hover
(arrows.scss), and the bar's 16px of padding is not enough for it - the head
slid out of the bar and was clipped by the page's `overflow-x-clip`. The
in-page messages reserve the same way (KB-61) with 30px plus 10px clearance;
here the padding is the clearance. The breakpoint below drops the margin,
where 44px of padding already holds the travel.
*/

.service-message-bar__arrow {
  align-self: center;
  display: flex;
  flex: 0 0 auto;
  margin-right: 30px;
}

.service-message-bar__arrow .arrow__body {
  stroke: currentcolor;
}

.service-message-bar__arrow .arrow__head {
  fill: currentcolor;
}

@media (min-width: 768px) {
  /*
  `flex-start`, not `center`: the design draws the bar as a single line, and
  centring is right for that. Once the text wraps, the bar grows tall and
  centring strands the bell in the middle, away from the line it belongs to -
  KB-63. Aligning to the top keeps it on the first line at any height, and is
  identical to centring while the bar is one line tall. The arrow opts out of
  it, above.
  */

  .service-message-bar__inner {
    align-items: flex-start;
    gap: 16px;
    padding: 14px 44px;
  }

  .service-message-bar__icon {
    margin-top: 0;
  }

  .service-message-bar__icon svg {
    height: 24px;
    width: 24px;
  }

  /* Wide enough for the heading and the body to share a line. */
  .service-message-bar__content {
    align-items: baseline;
    flex-direction: row;
    gap: 16px;
  }

  /*
  The heading may shrink. It was `0 0 auto`, which let a long heading hold
  its full single-line width and squeeze the body into a narrow column of
  wrapped lines beside it - KB-63. Shrinking lets the heading wrap too, so
  the two share the row in proportion instead of one starving the other.
  */

  .service-message-bar__heading {
    flex: 0 1 auto;
    font-size: 14px;
    line-height: 22px;
  }

  .service-message-bar__body {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 22px;
  }

  .service-message-bar__arrow {
    margin-right: 0;
  }
}

/* --- In-page container ------------------------------------------------ */

.service-messages {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1440px;
  padding: 16px;
}

/*
The pagefold: the top-left corner is clipped away so the page shows through,
and the triangle left underneath is the fold. Drawn here rather than with the
design system's `pagefold-*` classes, which are a fixed size - the design
folds 16px on mobile and 24px from the small breakpoint up.
*/

.service-messages__container {
  align-items: flex-start;
  background-color: var(--c-global-secondary);
  clip-path: polygon(16px 0, 0 16px, 0 100%, 100% 100%, 100% 0);
  display: flex;
  gap: 12px;
  padding: 20px 16px;
  position: relative;
}

.service-messages__container::before {
  border-bottom: 16px solid var(--c-global-tertiary-1);
  border-left: 16px solid transparent;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
}

/* One icon for the whole group, not one per message. */

.service-messages__icon {
  color: var(--c-text-primary-black);
  flex: 0 0 auto;
  margin-top: 2px;
}

.service-messages__icon path {
  fill: currentcolor;
}

.service-messages__icon svg {
  height: 24px;
  width: 24px;
}

.service-messages__list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

/* A hairline between stacked messages, none above the first. */

.service-messages__item + .service-messages__item {
  border-top: 1px solid var(--c-global-tertiary-1);
  margin-top: 16px;
  padding-top: 16px;
}

.service-messages__message {
  color: var(--c-text-primary-black);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.service-messages__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/*
Lora, the design system's title face. It has no custom property of its own -
components reach it through the SCSS typography mixin - so the stack is
written out here.

This is an h2 (KB-64), so every property the user agent would set for one is
overridden here: the face, the size, and `font-weight: 400` - the design draws
the heading in regular Lora, not bold. The margin the UA adds is already zeroed
by the design system's reset.
*/

.service-messages__heading {
  color: var(--c-text-primary-black);
  font-family: Lora, serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}

.service-messages__body {
  color: var(--c-text-secondary-gray);
  font-family: var(--font-body);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/*
The arrow animates by translating its head 30px right and stretching its
body, drawn outside the svg box (`overflow: visible` in the design system's
arrows.scss). Without room reserved for that, the extended arrow runs into
the edge of the message - KB-61.

40px is the same reservation `content-list-item-grid` makes on /artikler,
and it is not a padding-derived number: it is the 30px the arrow grows plus
10px clearance. The design system lands on the same 10px in `.arrow-button`,
whose 101px width is the 61px arrow plus 30px plus 10px.
*/

.service-messages__arrow {
  align-self: flex-end;
  display: flex;
  flex: 0 0 auto;
  margin-right: 40px;
}

@media (min-width: 768px) {
  .service-messages {
    padding: 24px 44px;
  }

  /*
  Grid rather than flex, so the bell can sit on the first line without
  giving up the centred box the design draws.

  The design's 128px box is taller than a short message. `align-content:
  center` centres the single content row inside it, which is what flex
  centring gave; `align-self: start` on the bell then aligns it to the top of
  that row rather than the top of the box. So the bell stays on the first
  line however tall the content grows - a message whose text wraps, or
  several messages stacked (KB-60) - and a short single message keeps its
  centred box instead of leaving dead space beneath it.

  Flex could not express both: there, the top of the content and the top of
  the box are the same edge, so `flex-start` moved the text too.
  */

  .service-messages__container {
    align-content: center;
    clip-path: polygon(24px 0, 0 24px, 0 100%, 100% 100%, 100% 0);
    display: grid;
    gap: 32px;
    grid-template-columns: auto 1fr;
    min-height: 128px;
    padding: 24px 32px;
  }


  .service-messages__container::before {
    border-bottom-width: 24px;
    border-left-width: 24px;
  }

  .service-messages__icon {
    align-self: start;
    margin-top: 0;
  }

  .service-messages__icon svg {
    height: 40px;
    width: 40px;
  }

  .service-messages__message {
    align-items: center;
    flex-direction: row;
    gap: 32px;
  }

  .service-messages__text {
    gap: 8px;
  }

  .service-messages__heading {
    font-size: 24px;
    line-height: 32px;
  }

  .service-messages__body {
    font-size: 16px;
    line-height: 24px;
  }

  .service-messages__arrow {
    align-self: auto;
  }
}