/* Gæðasmíði customisations (written by migration/04_site.php) */

/* ---- logo: white version while the header floats over a dark hero (below 768px the header is a white bar) ---- */
@media (min-width: 768px) {
  body.layout-portfolio #sp-header:not(.header-sticky) img.logo-image,
  body.layout-portfolio #sp-header:not(.header-sticky) img.logo-image-phone,
  body.layout-dark-hero #sp-header:not(.header-sticky) img.logo-image,
  body.layout-dark-hero #sp-header:not(.header-sticky) img.logo-image-phone { content: url("../../../images/gaedasmidi/logo-white.png"); }
}
img.logo-image, img.logo-image-phone { width: auto; }

/* header button: solid brand green so it stays readable over photos */
#sp-header a.header-btn { background: #2F7A3A !important; border-color: #2F7A3A !important; color: #fff !important; }
#sp-header a.header-btn:hover { background: #1D5E28 !important; border-color: #1D5E28 !important; color: #fff !important; }

/* ---- home hero slider (SP Page Builder Slideshow) ---- */
.gs-hero-section > .sppb-row-container, .gs-hero-section .sppb-row-container { max-width: 100%; padding: 0; }
.gs-hero-section .sppb-column-addons, .gs-hero-section .sppb-addon-wrapper { margin: 0 !important; }
.gs-hero-slider { border-radius: 20px; overflow: hidden; }
.gs-hero-slider .sp-slider-content-align-left { max-width: 760px; }
.gs-hero-slider .gs-slide-eyebrow { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.gs-hero-slider .gs-slide-eyebrow::before { content: ""; width: 34px; height: 3px; background: #6FBF5B; display: inline-block; }
.gs-hero-slider .gs-slide-title { color: #fff; font-size: 64px; line-height: 1.08; font-weight: 600; margin: 0 0 22px; letter-spacing: -1px; }
.gs-hero-slider .gs-slide-title b { color: #9AD67F; font-weight: 600; }
.gs-hero-slider .gs-slide-text { color: rgba(255,255,255,.88); font-size: 19px; line-height: 1.6; max-width: 600px; margin: 0 0 30px; }
.gs-hero-slider .gs-slide-btn { display: inline-block; margin: 10px 12px 0 0; padding: 16px 30px; border-radius: 4px; font-size: 16px; font-weight: 600; background: #2F7A3A; color: #fff !important; border: 2px solid #2F7A3A; transition: all .25s; }
.gs-hero-slider .gs-slide-btn .sp-slider-btn-text { background: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important; border: 0 !important; }
.gs-hero-slider .gs-slide-btn:hover { background: #1D5E28; border-color: #1D5E28; }
.gs-hero-slider .gs-slide-btn.gs-slide-btn-outline { background: transparent; border-color: rgba(255,255,255,.8); }
.gs-hero-slider .gs-slide-btn.gs-slide-btn-outline:hover { background: #fff; color: #101218 !important; border-color: #fff; }
@media (max-width: 991px) {
  .gs-hero-slider .gs-slide-title { font-size: 46px; }
  .gs-hero-slider .gs-slide-text { font-size: 17px; }
}
@media (max-width: 575px) {
  .gs-hero-slider { border-radius: 12px; }
  .gs-hero-slider .gs-slide-eyebrow { font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; }
  .gs-hero-slider .gs-slide-title { font-size: 34px; }
  .gs-hero-slider .gs-slide-text { font-size: 15px; margin-bottom: 18px; }
  .gs-hero-slider .gs-slide-btn { padding: 12px 20px; font-size: 14px; margin-right: 8px; }
}

/* ---- gallery (Fyrri verk): responsive grid instead of fixed-size thumbnails ---- */
.gs-gallery .sppb-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 !important; }
.gs-gallery .sppb-gallery::before, .gs-gallery .sppb-gallery::after { display: none !important; }
.gs-gallery .sppb-gallery > li { margin: 0 !important; padding: 0 !important; width: auto !important; }
.gs-gallery .sppb-gallery a { display: block; border-radius: 12px; overflow: hidden; }
.gs-gallery .sppb-gallery img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s; }
.gs-gallery .sppb-gallery a:hover img { transform: scale(1.04); }
@media (max-width: 991px) { .gs-gallery .sppb-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .gs-gallery .sppb-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* long Icelandic compounds are wider than narrow phones at the template's heading sizes */
h1, h2, h3, h4, .sppb-addon-title, .sppb-dynamic-content-text { overflow-wrap: break-word; }

/* ---- footer: below 1200px the template keeps two half-width columns, too narrow for three link lists ---- */
@media (max-width: 1199px) {
  #column-wrap-id-53951724-0a45-4285-a851-a12305c1649a, #column-wrap-id-ae1fef0e-223f-4b5c-a39c-6d718842d62c { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  #column-wrap-id-53951724-0a45-4285-a851-a12305c1649a { margin-bottom: 36px; }
}
/* desktop: give the three link lists 60% so the e-mail address fits on one line */
@media (min-width: 1200px) {
  #column-wrap-id-53951724-0a45-4285-a851-a12305c1649a { flex: 0 0 40% !important; max-width: 40% !important; }
  #column-wrap-id-ae1fef0e-223f-4b5c-a39c-6d718842d62c { flex: 0 0 60% !important; max-width: 60% !important; }
}

/* ---- Þjónusta: the green service band has no side padding between phone and desktop widths ---- */
@media (min-width: 576px) and (max-width: 1199px) {
  .service-animation-inner > .sppb-container-inner { padding-left: 30px; padding-right: 30px; }
}

/* ---- project pages: the photo runs under the header, so darken its top and use the white logo ---- */
.page-23 #section-id-e7c40f9f-5c60-4fac-a85e-561aadba8f39 { position: relative; }
.page-23 #section-id-e7c40f9f-5c60-4fac-a85e-561aadba8f39::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none; }
@media (min-width: 768px) {
  body.view-dynamic #sp-header:not(.header-sticky) img.logo-image,
  body.view-dynamic #sp-header:not(.header-sticky) img.logo-image-phone { content: url("../../../images/gaedasmidi/logo-white.png"); }
}
@media (min-width: 576px) and (max-width: 991px) {
  /* footer: three link lists side by side; a slightly smaller size keeps the e-mail address on one line */
  #sp-bottom .sppb-link-list-wrap a, #sp-bottom .sppb-link-list a { font-size: 14px; }
  /* green service band: stack the heading and the intro text */
  .service-animation-inner .sppb-row-column { flex: 0 0 100% !important; max-width: 100% !important; }
  .service-animation-inner .sppb-row-column:empty, .service-animation-inner .sppb-row-column:has(.sppb-column-addons:empty) { display: none; }
}

/* ---- clear space between the logo and the MENU button (our logo is taller than the demo's) ---- */
@media (min-width: 768px) {
  #modal-menu-toggler { margin-top: 28px; }
}
/* tablet: the logo sat on the top edge of the rounded hero; move it down a little */
@media (min-width: 768px) and (max-width: 991px) {
  #sp-header .logo { padding-top: 12px; }
}

/* ---- modal menu: the active/hover line ran through the middle of the word (looked crossed out); put it under the text ---- */
#modal-menu .sp-megamenu-parent > li > a:before { top: auto; bottom: 4px; }

/* ---- Fyrirtækið, "Gildin okkar": the texts differ in length, so line the three photos up along the bottom ---- */
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-column-addons,
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-column-addons > .sppb-addon-wrapper,
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-column-addons > .sppb-addon-wrapper > .clearfix,
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature { display: flex !important; flex-direction: column; flex: 1 1 auto; width: 100%; }
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature > .sppb-addon-content { flex: 1 1 auto; }
#section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature .sppb-img-container { margin-top: auto; }
@media (min-width: 768px) and (max-width: 991px) {
  /* tablet: keep the three values side by side instead of 2 + 1 */
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-row > .sppb-row-column:has(.sppb-addon-feature) { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}

/* ---- phone menu: "Fá tilboð" becomes a green bar there; white text like the other buttons ---- */
@media (max-width: 767px) {
  #sppb-addon-79efa908-080b-4034-b74d-0dbefc803559 .sppb-addon-header a { color: #fff; }
}

/* ---- opening the menu popup hides the page scrollbar (body overflow: hidden); keep its space reserved
        so the page does not get wider and the hero slider does not jump ---- */
html { scrollbar-gutter: stable; }