/* Fix layout shift in Safari caused by jobs ajax pager.
   Make scrolling to inside link targets smooth. */
body {
  position: relative;
  scroll-behavior: smooth;
}

/* Make bare bones images responsive. */
img {
  width: 100%;
  height: auto;
}

/* Fix issue produced by hanna basics :first-child: margin-top: 0; */
sup:first-child {
  margin-top: -1.1em;
}

/* Hiding highlighting of mobile menu button for Android/Safari mobile/Edge */
a.Layout__header__skiplink {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Handle long links on narrow screens. */
.TextBlock p a {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.ch2-open-settings-btn,
.ch2-open-settings-btn:hover,
.ch2-open-settings-btn:active {
  padding-bottom: 0;
  border-bottom: 0;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Set spacing for article (news) tags. */
.ArticleMeta__tags {
  margin-top: 1rem;
}

/* Prevent Cookie Hub icon overlap the main menu close. */
.ch2-icon.ch2-visible {
  z-index: calc(var(--H-zindex--header, var(--zindex--header)) - 1);
}

/* Places detail page. -------------------------------------------------------- */
.InfoHero__footer {
  margin: 30px 0 0 0;
}

.InfoHero__footer > .paragraph--type--logos {
  display: grid;
  grid-template-columns: 60px 2fr;
  grid-auto-rows: 40px;
  align-items: center;
  margin: 0;
}

.InfoHero__footer > .paragraph--type--logos .field-image > img {
  width: 50px;
  height: auto;
}

.InfoHero__footer > .paragraph--type--logos .text a {
  border-bottom: var(--link-underline);
  color: var(--link-color);
  font-weight: var(--link-weight);
  padding-bottom: var(--link-underline-offset);
  text-decoration: none;
  transition: var(--link-transition);
  transition-property: border-color,background-color,color,text-shadow,box-shadow,outline;
}

.InfoHero__footer > .paragraph--type--logos .text a:active,
.InfoHero__footer > .paragraph--type--logos .text a:hover {
  border-bottom: var(--link-underline--hover);
  color: var(--link-color--hover);
}

.InfoHero__footer > .paragraph--type--logos .field-title {
  font-size: 16px;
  font-weight: 700;
}

/* Construction page. -------------------------------------------------------- */
.construction-list {
  padding-top: 70px;
}
.construction-list > li {
  max-width: 792px;
  padding: 24px 32px;
  border-top: 1px solid #c7cbd0;
}

.construction-list .construction-list-item > div {
  margin-bottom: 8px;
}

.construction-list .construction-list-item .views-field-field-type {
  font: var(--font-bd-s);
  color: var(--color-faxafloi-100);
  position: relative;
  padding-left: 20px;
  /*float: left;*/
  margin-right: 25px;
}

.construction-list .construction-list-item .views-field-field-type::before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/construction/suitcase_ico.png') no-repeat center center/cover;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
}

.construction-list .construction-list-item .views-field-field-time-frame {
  font: var(--font-bd-s);
  color: var(--color-faxafloi-100);
  position: relative;
  padding-left: 20px;
}

.construction-list .construction-list-item.hide .views-field-field-time-frame {
  display: none;
}

.construction-list .construction-list-item .views-field-field-time-frame::before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/construction/hourglass_ico.png') no-repeat center center/cover;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
}

.construction-list .construction-list-item .views-field-title {
  font: var(--font-sh-s);
}

.construction-list .construction-list-item .views-field-title a {
  color: inherit;
}

.construction-list .construction-list-item .views-field-field-short-description {
  font: var(--font-bd-s);
  color: #727477;
}

/* Announcements paragraph. -------------------------------------------------------- */
.paragraph--type--announcements.GridBlocks {
  background-color: var(--color-suld-25);
  margin-left: -80px;
  margin-right: -72px;
  padding-left: 50px;
  padding-top: 50px;
  padding-bottom: 52px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item {
  position: relative;
  background-color: #fff;
  width: 376px;
  height: 185px;
  padding: 24px 27px 15px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.triangle_square_middle:before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/triangle_square.svg') no-repeat center center/cover;
  position: absolute;
  top: 33px;
  right: 0;
  width: 124px;
  height: 126px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.circle-flower-middle:before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/circle_right.svg') no-repeat center center/cover;
  position: absolute;
  top: 25px;
  right: 0;
  width: 62px;
  height: 137px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.circle-flower-middle:after {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/flower.svg') no-repeat center center/cover;
  position: absolute;
  top: 40%;
  right: 45px;
  width: 38px;
  height: 38px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.two-circles-top:before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/circle_up.svg') no-repeat center center/cover;
  position: absolute;
  top: 0;
  right: 24px;
  width: 161px;
  height: 50px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.two-circles-top:after {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/circle_small_right.svg') no-repeat center center/cover;
  position: absolute;
  top: 30px;
  right: 0;
  width: 26px;
  height: 53px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.quarter-of-hoop-middle:after {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/quarter_of_hoop.svg') no-repeat center center/cover;
  position: absolute;
  top: 23px;
  right: 0;
  width: 116px;
  height: 101px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.half-pentagon-middle:after {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/half_pentagon.svg') no-repeat center center/cover;
  position: absolute;
  top: 30px;
  right: 0;
  width: 67px;
  height: 125px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.two-triangles-middle:after {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/triangle_right.svg') no-repeat center center/cover;
  position: absolute;
  top: 37px;
  right: 0;
  width: 27px;
  height: 35px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item.two-triangles-middle:before {
  content: '';
  background: url('/themes/custom/reykjavik/assets/announcements/triangle_down.svg') no-repeat center center/cover;
  position: absolute;
  bottom: 0;
  right: 35px;
  width: 86px;
  height: 86px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item__title {
  font: var(--font-bd-l);
  font-weight: var(--font-weight--bold);
  width: 229px;
}

.paragraph--type--announcements.GridBlocks .GridBlocks__item__meta {
  color: var(--color-suld-150);
  font: var(--font-bd-s);
  font-size: var(--font-label-size);
  font-weight: var(--font-weight--normal);
  line-height: 16px;
}

@media (min-width: 980px) {
  .paragraph--type--announcements.GridBlocks:not(.GridBlocks--twocol)>.GridBlocks__item:nth-child(3n+1) {
    margin-left: 3.3112582781456954%;
  }
}

@media (max-width: 1181px) {
  .paragraph--type--announcements.GridBlocks {
    margin-left: unset;
    margin-right: unset;
    padding-left: unset;
  }
}

@media (max-width: 988px) {
  .paragraph--type--announcements.GridBlocks .GridBlocks__item {
    margin-left: 8%;
  }
}

/* Mobile: cancel Hanna's column-reverse for left-aligned island blocks so Left Block stays on top. */
@media (max-width: 767px) {
  .IslandBlock--align--left {
    flex-direction: column;
  }
}

/* Frontend editing adjustments */

.IslandBlock,
.frontend-editing .IslandBlock__content,
.frontend-editing.GridBlocks .GridBlocks__item,
.paragraph-type-view-reference,
.paragraph-type-block-reference,
.paragraph-type-island-text-image,
.paragraph-type-extra-links {
  position: relative;
}

:is(body.node-elected-representative, body.node-news, body.node-places, body.node-tender)
  #block-reykjavik-content
  > article.frontend-editing {
  position: relative;
}

/* Island vector + text / grid box: FE markup sits in flex row-reverse or grid auto-flow and
   ends up top-right; pin the actions wrapper to the block’s top-left (see #365 / island FE). */
.paragraph--type--island-text-blocks .IslandBlock > .frontend-editing-actions,
.paragraph-type-island-text-blocks .IslandBlock > .frontend-editing-actions,
.paragraph--type--island-text-block .IslandBlock > .frontend-editing-actions,
.paragraph-type-island-text-block .IslandBlock > .frontend-editing-actions,
.paragraph--type--grid-box .grid-box__container > .frontend-editing-actions,
.paragraph-type-grid-box .grid-box__container > .frontend-editing-actions {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

/* Hero-super: auto-placement would push this to row 2, adding extra height.
   Explicit grid placement in row 1 overlaps it with the media/words layers instead. */
div.hero-super > .frontend-editing-actions {
  grid-row: 1;
  grid-column: 1 / -1;
}

/* Submenu-reference: the global height: unset below overrides the module’s height: 0.
   Restore 0-height so the actions div does not push the submenu block down. */
.paragraph--type--submenu-reference > .frontend-editing-actions {
  height: 0;
}

/* Hero: take the FE actions bar entirely out of flow.
   HeroBlock.twig consumes the paragraph's attributes (setAttribute('class','HeroBlock')),
   so the FieldReferenceHelper outer wrapper ends up as div.frontend-editing with only
   that class — no paragraph--type--* class is present. Target via :has(> .HeroBlock). */
.frontend-editing:has(> .HeroBlock) > .frontend-editing-actions,
/* Carousel: ParagraphsCarouselTypePlugin adds paragraph-carousel-{landscape|portrait};
   the standard paragraph--type--carousel class is absent on the FieldReferenceHelper wrapper. */
.paragraph-carousel-landscape > .frontend-editing-actions,
.paragraph-carousel-portrait > .frontend-editing-actions,
/* Grid block: wrapper has GridBlocks class but no paragraph--type-- class. */
.GridBlocks > .frontend-editing-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.IslandBlock .IslandBlock__content > .frontend-editing-actions,
.paragraph-type-news-reference > .ImageCards > .frontend-editing-actions {
  position: absolute;
  top: 40px;
}
/* Carousel card: frontend_editing renders inside ArticleCarouselCard__contextual. */
.ArticleCarouselCard__contextual > .frontend-editing-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.paragraph-type-card > div.card__content > .frontend-editing,
.node-content-main > .frontend-editing-actions > .common-actions-container,
.GalleryItem .common-actions-container,
.paragraph--type--status-bar-blockr > .frontend-editing-actions > .common-actions-container,
.paragraph-type-news-reference > div.ImageCards >.frontend-editing-actions > .common-actions-container,
.block-content--type-basic > .block-content__content > .frontend-editing-actions > .common-actions-container,
.block-content--type-reference-block > .block-content__content > .frontend-editing-actions > .common-actions-container,
.paragraph-type-content-reference > div.ImageCards >.frontend-editing-actions > .common-actions-container,
:is(body.node-construction) #block-reykjavik-content > article.frontend-editing > .frontend-editing-actions > .common-actions-container,
:is(body.node-frontpage) #block-reykjavik-content > article.frontend-editing > .frontend-editing-actions > .common-actions-container,
:is(body.node-content-page) #block-reykjavik-content > article.frontend-editing > div.node-content-main > .frontend-editing-actions > .common-actions-container,
:is(body.node-page) #block-reykjavik-content > article.frontend-editing > div.node-content-main > .frontend-editing-actions > .common-actions-container {
  position: absolute;
  top: -40px;
  z-index: 10;
}

/* View/block reference, hero-super, island text & image, extra links: keep edit chrome inside the block (no negative top). */
.paragraph-type-view-reference .common-actions-container,
.paragraph-type-block-reference .common-actions-container,
div.hero-super > .frontend-editing-actions > .common-actions-container,
/* Hero outer field wrapper: HeroBlock.twig mutates the paragraph attributes to
   class="HeroBlock", so the FieldReferenceHelper wrapper has only frontend-editing.
   Target via :has(> .HeroBlock) — confirmed by live DOM inspection. */
.frontend-editing:has(> .HeroBlock) > .frontend-editing-actions > .common-actions-container,
.paragraph-carousel-landscape > .frontend-editing-actions > .common-actions-container,
.paragraph-carousel-portrait > .frontend-editing-actions > .common-actions-container,
.GridBlocks > .frontend-editing-actions > .common-actions-container,
.ArticleCarouselCard__contextual > .frontend-editing-actions > .common-actions-container,
.paragraph-type-island-text-image > div.IslandPageBlock > .frontend-editing-actions > .common-actions-container,
.paragraph-type-extra-links .frontend-editing-actions > .common-actions-container,
.paragraph--type--island-text-blocks .IslandBlock > .frontend-editing-actions > .common-actions-container,
.paragraph-type-island-text-blocks .IslandBlock > .frontend-editing-actions > .common-actions-container,
.paragraph--type--island-text-block .IslandBlock > .frontend-editing-actions > .common-actions-container,
.paragraph-type-island-text-block .IslandBlock > .frontend-editing-actions > .common-actions-container,
.paragraph--type--grid-box .grid-box__container > .frontend-editing-actions > .common-actions-container,
.paragraph-type-grid-box .grid-box__container > .frontend-editing-actions > .common-actions-container,
:is(body.node-elected-representative) #block-reykjavik-content > article.frontend-editing > div > .frontend-editing-actions > .common-actions-container,
:is(body.node-news) #block-reykjavik-content > article.frontend-editing > div > .frontend-editing-actions > .common-actions-container,
:is(body.node-places ) #block-reykjavik-content > article.frontend-editing > div > .frontend-editing-actions > .common-actions-container,
:is(body.node-tender) #block-reykjavik-content > article.frontend-editing > div > .frontend-editing-actions > .common-actions-container {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 10;
}
@media (min-width: 980px) {
  .ExtraLinks__related__list {
    position: absolute;
  }
}
.common-actions-container {
  position: relative;
  top: 5px;
  left: 5px;
  z-index: 99;
}
.common-actions-container .title-edit-container,
.common-actions-container .icons-container {
  margin-left: 0;
  margin-right: 0;
}
.common-actions-container .title-edit-container > * {
  display: inline-block;
}
.common-actions-container .title-edit-container .action-title {
  width: auto;
  padding-right: 15px;
}
/* #block-reykjavik-content > article.frontend-editing:not(.school-section) {
  padding-top: 40px;
} */

.frontend-editing-actions {
  height: unset;
}

/* Last update date on construction page */
.last-saved-date {
  display: block;
  float: right;
  color: var(--color-faxafloi-100);
  margin-bottom: -25px;
}

.views-field-changed .last-saved-date {
  margin-right: -30px;
}

/* Front end editing change */

body.frontend-editing--hidden .unpublished-paragraph,
body.frontend-editing--hidden .unpublished-paragraph-inner {
  display: none;
}

/* OpenReader. -------------------------------------------------------- */
#block-openreader {
  position: relative;
  min-height: 40px;
  margin: 25px 0;
}

@media (min-width: 992px) {
  #block-openreader {
    float: right;
  }

  body[class*="node-"] #block-openreader {
    float: none;
  }
}

/* Skip link focus.  */
.visually-hidden.focusable:focus {
  width: auto;
  height: 4rem;
  background: #0367e1;
  opacity: 1;
  color: white;
  max-width: 75.5rem;
  display: flex;
  margin: 1rem auto;
  padding: 1.0625rem 2rem 1rem 4rem;
  border-radius: 8px;
  transition: all .4s 0ms;
  transition-property: visibility, max-height, opacity, margin, padding;
  transition-timing-function: ease-in, cubic-bezier(.165, .84, .44, 1), ease-in, ease-in, ease-in-out;
}

/* Unpublished paragraphs */
div.unpublished-paragraph:first-child:after {
  content: '' !important;
  position: absolute !important;
  top: -5px !important;
  left: -5px !important;
  bottom: -5px !important;
  right: -5px !important;
  border: 2px #d8222f dashed !important;
}

/* Unpublished paragraphs inner */
div.unpublished-paragraph-inner {
  border: 2px #d8222f dashed;
}
li.frontend-editing a.unpublished-paragraph-inner {
  border: 2px #d8222f dashed;
}
/* paragraph only for graphql */
.paragraph--type--abendingarflokkur {
  border: 1px solid;
  padding: 1rem;
  margin-bottom: 2rem;
  font-weight: bold;
}
.paragraph--type--abendingarflokkur .TextBlock {
  font-size: 12px;
  line-height: 1rem;
}

.paragraph-type-app-location-controller {
  width: 100%;
  border: 1px solid #0367e1;
  padding: 2rem;
  font-size: 2rem;
  line-height: 2rem;
}
.paragraph--type--polling-station img {
  width: auto;
  height: auto;
  float: inline-end;
}

.paragraph--type--polling-station{
  font-size: 1.5rem;
  line-height: 2rem;
}

.paragraph--type--polling-station div {
  margin-bottom: 1rem;
}

/* Label divs inside those rows: first div child of each row */
.paragraph--type--polling-stations .paragraph--type--polling-station > div > div:first-child {
  font-weight: bold;
}

.paragraph--type--polling-stations .paragraph--type--polling-station {
  clear: both;
  margin-bottom: 2rem;
  border-bottom: 1px solid #0367e1;
}


/* WEB-724: Fix for ContextMenu sprinkle adding wrapper div in language selector.
   The Hanna loadSprinkles('ContextMenu') adds a <div style="all: unset;"> wrapper
   around ContextMenu components, which breaks the layout when ContextMenu is used
   as custom content inside MainMenu2 hot items. Using display:contents makes the
   wrapper transparent to the layout, so styles flow through to the <details> element. */
.MainMenu2__hot__item--redhot > div[style*="all: unset"] {
  display: contents !important;
}

/* WEB-724: Ensure ContextMenu details element aligns with other hot item buttons */
.MainMenu2__hot__item--redhot .ContextMenu {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* WEB-724: Reset details/summary default spacing to match button alignment */
.MainMenu2__hot__item--redhot .ContextMenu summary {
  display: inline-block !important;
}

/* WEB-928: Prevent hot items from wrapping to a second line when a button
   has a long label (e.g. "Informacje po polsku"). */
@media (min-width: 980px) {
  .MainMenu2__hot__items {
    flex-flow: nowrap;
  }
}

/* WEB-906: Release containing-block trap for the submenu modal on mobile.
   The Hanna CDN Layout ancestor (.Layout / .Layout__content) may carry
   transform/contain/filter that prevents position:fixed from reaching the
   viewport — reset only while the submenu is open. */
@media (max-width: 1024px) {
  .Layout:has(.submenu-nav__container[open]),
  .Layout__content:has(.submenu-nav__container[open]) {
    transform: none !important;
    contain: none !important;
    filter: none !important;
  }
}

/* WEB-906: Fix MainMenu2 mobile open state. The Hanna CDN sets
   .MainMenu2--open[class] { position:fixed; height:100vh } for a full-screen
   modal, but an ancestor in @hanna/Layout.twig (.Layout / .Layout__content)
   creates a containing block that traps the fixed positioning. */
@media (max-width: 979px) {

  /* (a) Release the containing-block trap. */
  .Layout:has(.MainMenu2--open),
  .Layout__content:has(.MainMenu2--open) {
    transform: none !important;
    contain: none !important;
    filter: none !important;
  }

  /* (b) True full-screen panel, no margins, no rounding. */
  .MainMenu2--open[class] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  /* (c) Toggler in open state: × only, top-right. */
  .MainMenu2--open[class] .MainMenu2__toggler[class] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    padding: 0 !important;
  }
  .MainMenu2--open[class] .MainMenu2__toggler[class]::after {
    content: "\00d7" !important;
    font-size: 2rem !important;
    line-height: 3rem !important;
    color: #fff !important;
    display: block !important;
    text-align: center !important;
  }

  /* (d) Left-align items. */
  .MainMenu2--open[class] .MainMenu2__main,
  .MainMenu2--open[class] .MainMenu2__main__item,
  .MainMenu2--open[class] .MainMenu2__main__sub__items,
  .MainMenu2--open[class] .MainMenu2__hot__items,
  .MainMenu2--open[class] .MainMenu2__extra__items {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }
}