/*
 * Smeden custom overrides.
 * Loaded efter main.css.
 */

/* -------------------------------------------------------
 * Farvepalette: Warm Steel
 * Overskriver Modernas standard blå-toner med varme,
 * industrielle farver passende til et smedeværksted.
 * ------------------------------------------------------- */
:root {
  --heading-color:    #2c2416;  /* Brændt jern - overskrifter */
  --accent-color:     #4a7a8a;  /* Mørk guld / bronze : b8860b */
  --contrast-color:   #ffffff;
}

.light-background {
  --background-color: #f5f2ec;  /* Varm creme */
}

.cold-background {
  --background-color: #f4f8fb;  /* Kold blå-hvid */
}

.dark-background {
  --background-color: #1e4356;
  --surface-color:    #284e62;
  --default-color:    #ffffff;
  --heading-color:    #ffffff;
  --contrast-color:   #ffffff;
}

.footer {
  --background-color: #cad8df;  /* Stålblå footer */
  --default-color:    #2c2416;
  --heading-color:    #2c2416;
}

/* -------------------------------------------------------
 * Views wrappers
 * Gør drupal_view() og views wrapper-divs usynlige for
 * Bootstrap grid layout saa col-* virker direkte.
 * ------------------------------------------------------- */
.row > .views-element-container {
  display: contents;
}

/* Page title banner — jævn padding */
.page-title {
  padding: 80px 0;
}


/* -------------------------------------------------------
 * Landing page hero-sektion
 * ------------------------------------------------------- */
.hero-section {
  background-color: var(--background-color, #1e4356);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 140px 0 80px;
  text-align: center;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 26, 18, 0.45);
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

.hero-section h1 {
  color: #fff;
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* -------------------------------------------------------
 * Mosaic collage (forside block_2)
 *
 * To varianter: --a (tight grid) og --b (mockup scatter)
 * Toggle-knap (kun for indloggede) skifter mellem de to.
 * ------------------------------------------------------- */
.mosaic-section {
  padding: 0;
  overflow: hidden;
  margin: 140px 0;
}

section.section,
.section,
.nav-boxes-section {
  padding: 90px 0;
}

@media (max-width: 991px) {
  .mosaic-section { margin: 80px 0; }
  section.section, .section, .nav-boxes-section { padding: 60px 0; }
}

@media (max-width: 575px) {
  .mosaic-section { margin: 50px 0; }
  section.section, .section, .nav-boxes-section { padding: 40px 0; }
}

.mosaic-section .views-element-container {
  display: contents;
}

/* Fælles for begge varianter */
.mosaic-grid {
  display: grid;
  width: 100%;
  gap: 4px;
}

.mosaic-item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.mosaic-item:hover img {
  transform: scale(1.05);
}

.mosaic-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mosaic-item:hover .mosaic-overlay {
  opacity: 1;
}

.mosaic-overlay span {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------
 * Variant A: tight grid, 3 kolonner
 * ------------------------------------------------------- */
.mosaic-grid--a {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 250px 250px 250px;
}

.mosaic-grid--a .mosaic-cell--1 { grid-column: 1; grid-row: 1 / span 2; }
.mosaic-grid--a .mosaic-cell--2 { grid-column: 2; grid-row: 1; }
.mosaic-grid--a .mosaic-cell--3 { grid-column: 3; grid-row: 1; }
.mosaic-grid--a .mosaic-cell--4 { grid-column: 2; grid-row: 2; }
.mosaic-grid--a .mosaic-cell--5 { grid-column: 3; grid-row: 2; }
.mosaic-grid--a .mosaic-cell--6 { grid-column: 1; grid-row: 3; }
.mosaic-grid--a .mosaic-cell--7 { grid-column: 2; grid-row: 3; }
.mosaic-grid--a .mosaic-cell--8 { grid-column: 3; grid-row: 3; }

/* -------------------------------------------------------
 * Variant B: mockup scatter, 8-kolonne basenhed
 *
 * 2 CSS-kolonner = 1 basenhed (kvadrat).
 * grid-auto-rows = bredden af 2 kolonner = 50vw/4 = ~12.5vw.
 *
 * Layout (8 CSS-kol / 4 baseenheder, 7 rækker):
 *
 *  CSS col: 1  2  3  4  5  6  7  8
 *  R1:                  [1  1×1  ]
 *  R2:      [5 1×1] [2  portrait  2×3  ] [3 1×2] [4 Carlsberg 2×3]
 *  R3:              [2  portrait  2×3  ] [3 1×2] [4 Carlsberg 2×3]
 *  R4:              [2  portrait  2×3  ]
 *  R5:  [6      bro     4×2         ]   [7 korridor 2×3] [8 2×2]
 *  R6:  [6      bro     4×2         ]   [7 korridor 2×3]
 *  R7:                                  [7 korridor 2×3]
 * ------------------------------------------------------- */
.mosaic-grid--b {
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: calc((min(60vw, 1320px) - 120px) / 8);
  gap: 6px;
  background: #fff;
  padding: 24px 32px;
  max-width: min(60vw, 1320px);
  margin: 0 auto;
}

/*
 * Brugerens grid-beskrivelse (A-H = col 1-8, rækker 1-7):
 * D2-E4:  2×3  → col 4-5, row 2-4
 * D5-E7:  2×3  → col 4-5, row 5-7
 * C4:     1×1  → col 3,   row 4
 * A6-C7:  3×2  → col 1-3, row 6-7
 * F1:     1×1  → col 6,   row 1
 * F2-G2:  2×1  → col 6-7, row 2
 * F3-H4:  3×2  → col 6-8, row 3-4
 * G5-H6:  2×2  → col 7-8, row 5-6
 */
.mosaic-grid--b .mosaic-cell--1 { grid-column: 4 / span 2; grid-row: 2 / span 3; } /* D2-E4: 2×3 */
.mosaic-grid--b .mosaic-cell--2 { grid-column: 4 / span 2; grid-row: 5 / span 3; } /* D5-E7: 2×3 */
.mosaic-grid--b .mosaic-cell--3 { grid-column: 3;           grid-row: 4; }          /* C4:    1×1 */
.mosaic-grid--b .mosaic-cell--4 { grid-column: 1 / span 3;  grid-row: 5 / span 2; } /* A5-C6: 3×2 */
.mosaic-grid--b .mosaic-cell--5 { grid-column: 6;           grid-row: 1; }          /* F1:    1×1 */
.mosaic-grid--b .mosaic-cell--6 { grid-column: 6 / span 2;  grid-row: 2; }          /* F2-G2: 2×1 */
.mosaic-grid--b .mosaic-cell--7 { grid-column: 6 / span 3;  grid-row: 3 / span 2; } /* F3-H4: 3×2 */
.mosaic-grid--b .mosaic-cell--8 { grid-column: 7 / span 2;  grid-row: 5 / span 2; } /* G5-H6: 2×2 */
.mosaic-grid--b .mosaic-cell--9 { grid-column: 1 / span 2;  grid-row: 3 / span 2; } /* A3-B4: 2×2 */

.mosaic-grid--b .mosaic-item {
  border-radius: 10px;
}

.mosaic-grid--b .mosaic-item img {
  border-radius: 10px;
}

/* -------------------------------------------------------
 * Admin toggle-knap (kun for indloggede)
 * ------------------------------------------------------- */
.mosaic-toggle {
  display: none;
}

body.user-logged-in .mosaic-toggle {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.05em;
}

.mosaic-section {
  position: relative;
}

/* -------------------------------------------------------
 * Mobil: 2 kolonner, samme størrelse
 * ------------------------------------------------------- */
@media (max-width: 767px) {
  .mosaic-grid--a,
  .mosaic-grid--b {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
    grid-auto-rows: 45vw;
    gap: 4px;
    padding: 0;
  }

  .mosaic-grid--a [class*="mosaic-cell--"],
  .mosaic-grid--b [class*="mosaic-cell--"] {
    grid-column: unset;
    grid-row: unset;
  }

  .mosaic-grid--b .mosaic-item,
  .mosaic-grid--b .mosaic-item img {
    border-radius: 6px;
  }
}

/* -------------------------------------------------------
 * Nav-bokse (CTA band)
 * Drupal field-wrappers er transparente for Bootstrap grid
 * ------------------------------------------------------- */
/* -------------------------------------------------------
 * Nav-bokse (CTA band) — Moderna service-item stil
 * ------------------------------------------------------- */
:root {
  --cyan-color: #0dcaf0;
  --orange-color: #fd7e14;
  --teal-color: #20c997;
}

.nav-boxes-section {
  background: var(--background-color, #fff);
}

/* Billede: kvadratisk via aspect-ratio */
.nav-box-image {
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 6px;
}

.nav-box-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Service-item base — fra Moderna */
.nav-boxes .service-item {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  text-align: center;
  transition: 0.3s;
  border: none;
  border-radius: 0;
}

.nav-boxes .service-item .nav-box-image {
  background-color: var(--surface-color, #fff);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: 0.3s;
}

.nav-boxes .service-item:hover .nav-box-image {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

.nav-boxes .service-item h3 {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 10px 0 0;
  padding: 0;
  color: var(--heading-color, #1e4356);
  transition: color 0.3s;
}

/* Farve-varianter: baggrund + border på hover */
.nav-boxes .service-item.item-cyan .nav-box-image,
.nav-boxes .service-item.item-orange .nav-box-image,
.nav-boxes .service-item.item-teal .nav-box-image   { background-color: #f4f8fb; }

.nav-boxes .service-item.item-cyan:hover .nav-box-image,
.nav-boxes .service-item.item-orange:hover .nav-box-image,
.nav-boxes .service-item.item-teal:hover .nav-box-image  { border-color: var(--accent-color); }

.nav-boxes .service-item.item-cyan:hover h3,
.nav-boxes .service-item.item-orange:hover h3,
.nav-boxes .service-item.item-teal:hover h3  { color: var(--accent-color); }

/* Zoom på billede ved hover */
.nav-boxes .service-item:hover .nav-box-image img {
  transform: scale(1.05);
}

/* Skjul page title blokken — titlen printes i hero-bæltet via page template */
#block-smeden-page-title {
  display: none;
}

/* -------------------------------------------------------
 * Portfolio filter — Views exposed form → Moderna stil
 * ------------------------------------------------------- */
.portfolio .views-exposed-form {
  text-align: center;
  margin-bottom: 20px;
}

.portfolio .views-exposed-form .form-item {
  display: inline-block;
  margin-bottom: 0;
}

/* Skjul label og submit — filteret styres via select/links */
.portfolio .views-exposed-form label,
.portfolio .views-exposed-form .form-actions {
  display: none;
}

/* Select → pill-knapper stil */
.portfolio .views-exposed-form select {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  color: var(--default-color);
  cursor: pointer;
  padding: 4px 12px;
  transition: color 0.3s;
}

.portfolio .views-exposed-form select:focus {
  outline: none;
  color: var(--accent-color);
  box-shadow: none;
}

/* BEF kategori-filter — pill-knapper (radio + checkbox) */
.portfolio .views-exposed-form .form-item label { margin-bottom: 0; }

/* Skjul "Kategori" label og selve input */
.portfolio .views-exposed-form .fieldgroup legend,
.portfolio .views-exposed-form > .form-item > label,
.portfolio .views-exposed-form input[type="radio"],
.portfolio .views-exposed-form input[type="checkbox"] { display: none; }

/* Wrapper: centrer pills */
.portfolio .views-exposed-form .bef-checkboxes,
.portfolio .views-exposed-form .bef-radios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Label som pill-knap */
.portfolio .views-exposed-form input[type="radio"] + label.option,
.portfolio .views-exposed-form input[type="checkbox"] + label.option {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border: 1.5px solid var(--accent-color);
  border-radius: 2rem;
  color: var(--heading-color);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}

.portfolio .views-exposed-form input[type="radio"] + label.option:hover,
.portfolio .views-exposed-form input[type="checkbox"] + label.option:hover {
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
}

.portfolio .views-exposed-form input[type="radio"]:checked + label.option,
.portfolio .views-exposed-form input[type="checkbox"]:checked + label.option {
  background: var(--accent-color);
  color: #fff;
}

/* Skjul submit-knap hvis BEF auto-submit er aktivt */
.portfolio .views-exposed-form .form-actions { display: none; }

/* -------------------------------------------------------
 * CTA knap — global variant af .hero .btn-get-started
 * ------------------------------------------------------- */
.btn-cta,
.more-link a {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.3s;
  text-decoration: none;
  color: var(--default-color);
  border: 2px solid var(--accent-color);
}

.btn-cta:hover,
.more-link a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
}

.more-link {
  text-align: center;
  margin-top: 2rem;
}

/* Text-and-image paragraph — billede må ikke overflow kolonnen */
.nav-boxes-section .col-lg-6 img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Views AJAX scroll — kompensér for sticky header */
.view-projekter {
  scroll-margin-top: 120px;
}

/* -------------------------------------------------------
 * Referencer-tabel
 * ------------------------------------------------------- */
.view-projekter table,
.portfolio table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.view-projekter table thead th,
.portfolio table thead th {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 16px;
  border: none;
  position: sticky;
  top: 80px;
  z-index: 2;
}

.view-projekter table thead th:first-child,
.portfolio table thead th:first-child {
  border-radius: 6px 0 0 0;
}

.view-projekter table thead th:last-child,
.portfolio table thead th:last-child {
  border-radius: 0 6px 0 0;
}

.view-projekter table tbody td,
.portfolio table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  vertical-align: top;
}

.view-projekter table tbody tr:nth-child(even),
.portfolio table tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

.view-projekter table tbody tr:hover,
.portfolio table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.view-projekter table tbody td a,
.portfolio table tbody td a {
  color: var(--accent-color);
  text-decoration: none;
}

.view-projekter table tbody td a:hover,
.portfolio table tbody td a:hover {
  text-decoration: underline;
}

/* Responsiv tabel — horisontal scroll på mobil */
@media (max-width: 767px) {
  .view-projekter table,
  .portfolio table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------
 * Pager — Moderna blog-pagination stil
 * ------------------------------------------------------- */
.pager {
  margin-top: 2rem;
  padding-top: 0;
}

.pager__items {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pager__item {
  margin: 0 5px;
}

.pager__item a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
  font-size: 14px;
}

.pager__item.is-active a {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pager__item a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pager__item--previous a,
.pager__item--next a,
.pager__item--first a,
.pager__item--last a {
  width: auto;
  padding: 0 12px;
  border-radius: 50px;
  font-size: 13px;
}

/* Mini pager — samme stil */
.js-pager__items {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
  gap: 12px;
}

.js-pager__items li {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
}

.js-pager__items li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
  font-size: 14px;
}

.js-pager__items li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* -------------------------------------------------------
 * Portfolio grid — CSS Grid (ingen row-wrapper nødvendig)
 * Sæt klassen direkte i Views UI → Format → CSS class
 * cols-3 = 3 kolonner, cols-2 = 2 kolonner, cols-4 = 4 kolonner
 * ------------------------------------------------------- */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Alt der ikke er en views-row (exposed form, header, pager osv.) fylder fuld bredde */
.cols-2 > :not(.views-row),
.cols-3 > :not(.views-row),
.cols-4 > :not(.views-row) { grid-column: 1 / -1; }

@media (max-width: 991px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
 * Portfolio grid
 * ------------------------------------------------------- */

/* Billeder fylder kortet med consistent hoejde + rundede hjørner */
.portfolio .portfolio-content {
  border-radius: 8px;
}

.portfolio .portfolio-content img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Titel-badge — altid synlig over billedet */
.portfolio .portfolio-content .portfolio-title-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  pointer-events: none;
}

.portfolio .portfolio-content .portfolio-title-badge h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
  margin: 0;
  border-radius: 4px;
}

/* Projekt node — runde hjørner på slider-billeder */
.portfolio-details .portfolio-details-slider img {
  border-radius: 8px;
}

/* Overlay rammer billedets rundede hjørner */
.portfolio .portfolio-content .portfolio-info {
  border-radius: 8px;
}

/* Skjul h4 i overlay — titel vises via badge i stedet */
.portfolio .portfolio-content .portfolio-info h4 {
  display: none;
}

/* Luft mellem portfolio-items */
.portfolio .portfolio-item {
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------
 * Header: hvid baggrund, mørke menupunkter
 * ------------------------------------------------------- */
.header {
  --background-color: #ffffff;
  --nav-color: #333333;
  --nav-hover-color: #b8860b;
  background-color: var(--background-color) !important;
  padding: 20px 0;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header .logo img {
  max-height: 100px !important;
  height: 100px;
  width: auto;
  transition: max-height 0.3s ease, height 0.3s ease;
}

.path-frontpage:not(.scrolled) .header .logo img {
  max-height: 125px !important;
  height: 125px;
}

/* Mobile nav: Drupal wrapper structure — sikr at ul vises uanset nesting */
.mobile-nav-active .navmenu ul {
  display: block;
}

.scrolled .header .logo img {
  max-height: 44px !important;
  height: 44px;
}

/* Nulstil Drupal's em.placeholder-styling (loading-state look) overalt i frontend */
em.placeholder {
  display: inline;
  min-height: 0;
  vertical-align: baseline;
  cursor: auto;
  background-color: transparent;
  opacity: 1;
  animation: none;
}

/* Scrolled: header krymper */
.scrolled .header {
  --background-color: #ffffff;
  padding: 8px 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* -------------------------------------------------------
 * Header: fixed-top under admin toolbars.
 * --drupal-displace-offset-top sættes dynamisk af Gin
 * og inkluderer alle synlige toolbars.
 * ------------------------------------------------------- */
.header {
  position: sticky !important;
  top: 0px !important;
  z-index: 499 !important;
}

body.toolbar-fixed .header {
  top: 53px !important;
}

/* -------------------------------------------------------
 * Utility-blokke i content-regionen uden eget section-wrapper
 * Constrainer messages, local-tasks og main content til
 * Bootstrap container-bredde på forsiden.
 * ------------------------------------------------------- */
#block-smeden-page-title,
#block-smeden-local-tasks,
#block-smeden-content {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.messages__wrapper {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

/* -------------------------------------------------------
 * Drupal messages → Bootstrap alerts
 * ------------------------------------------------------- */
.messages {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
}

.messages--status {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.messages--warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.messages--error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.messages__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------
 * Drupal form elements → Bootstrap form styling
 * ------------------------------------------------------- */
.form-item {
  margin-bottom: 1rem;
}

.form-item__label,
label.form-item__label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-item__label.form-required::after,
label.form-required::after {
  content: " *";
  color: #dc3545;
}

input.form-text,
input.form-email,
input.form-tel,
input.form-number,
input.form-url,
input.form-search,
input.form-date,
input[type="password"],
textarea.form-textarea,
select.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: auto;
}

input.form-text:focus,
input.form-email:focus,
input.form-tel:focus,
input.form-number:focus,
input.form-url:focus,
input.form-search:focus,
input.form-date:focus,
input[type="password"]:focus,
textarea.form-textarea:focus,
select.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-item__description {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6c757d;
}

input.form-submit,
button.form-submit {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  background-color: #b8860b;
  border: 1px solid #b8860b;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

input.form-submit:hover,
button.form-submit:hover {
  background-color: #9a7009;
  border-color: #9a7009;
}

.form-actions {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------
 * Feature-sektion (basic block: billede + header + body)
 * Bygger på Modernas .about section-styles fra main.css.
 * ------------------------------------------------------- */
.about .field--name-field-image img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Checkmark via ::before hvis redaktøren bruger plain <ul> uden BI-ikoner */
.about .content ul li:not(:has(i)) {
  padding-left: 1.75rem;
  position: relative;
}

.about .content ul li:not(:has(i))::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-color, #b8860b);
  font-weight: 700;
}


/* -------------------------------------------------------
 * Footer — 3-kolonne grid: logo, adresse, links
 * ------------------------------------------------------- */
.footer-top {
  padding: 50px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.footer-col--logo img {
  max-height: 80px !important;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Adresse og menu-blokke: fjern section-wrapper padding */
.footer-col--content section,
.footer-col--content .section {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Projekt slider — pile-navigation inde i billedet */
.portfolio-details .portfolio-details-slider {
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-button-prev,
.portfolio-details .portfolio-details-slider .swiper-button-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition: background 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.portfolio-details .portfolio-details-slider .swiper-button-prev:hover,
.portfolio-details .portfolio-details-slider .swiper-button-next:hover {
  background: var(--accent-color);
}

.portfolio-details .portfolio-details-slider .swiper-button-prev:hover::after,
.portfolio-details .portfolio-details-slider .swiper-button-next:hover::after {
  color: #fff;
}

.portfolio-details .portfolio-details-slider .swiper-button-prev::after,
.portfolio-details .portfolio-details-slider .swiper-button-next::after {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: 700;
}

/* Paragraph billeder — runde hjørner */
.paragraph--type--text-and-image img,
.paragraph--type--image-gallery img {
  border-radius: 8px;
}

/* Blockquote paragraph — citat-stil */
.historie-quote {
  border-left: 4px solid var(--accent-color);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
}

.historie-quote footer {
  margin-top: 1rem;
  font-style: normal;
  font-weight: 600;
  color: var(--accent-color);
  font-size: 0.9rem;
}

/* Kategori-tags på projekt-side — Moderna tags-widget stil */
.kategori-tags a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  text-decoration: none;
  transition: 0.3s;
}

.kategori-tags a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* Menu i footer — Moderna stil med chevron */
.footer-col--links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col--links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer-col--links ul li:first-child { padding-top: 0; }

.footer-col--links ul li::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: 12px;
  margin-right: 8px;
  color: var(--accent-color);
  line-height: 0;
}

.footer-col--links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-decoration: none;
  line-height: 1;
  transition: color 0.3s;
}

.footer-col--links ul a:hover { color: var(--accent-color); }

.footer-copyright {
  padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  text-align: center;
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; }
}