/* Raftækjasalan customisations */
/* white logo while the header floats over the dark home hero; below 768px the header is a white bar
   at the bottom of the screen, so the normal logo stays there */
@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 { content: url("../../../images/raftaekjasalan/logo-white.png"); }
}
/* header logo sat in the hero's rounded corner, half on the white page edge, and was small. On every page: pull it
   in from the corner, enlarge it, and drop the menu button below the bolt. The white logo over dark photos also gets a soft shadow */
@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 { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(0,0,0,.5)); }
}
@media (min-width: 992px) {
  #sp-header:not(.header-sticky) img.logo-image { height: 68px !important; transform: translate(14px, 16px); }
  #sp-header:not(.header-sticky) #modal-menu-toggler { top: 52px !important; left: 14px; }
}
/* home hero: the template sizes its decorative shapes in px for a ~1905px screen; on 1200-1600px screens the blue panel
   and white band covered the logo and the left diagonal cut through the headline. Same proportions, scaled with the viewport */
@media (min-width: 992px) {
  body.layout-portfolio .portfolio-hero-div::before { width: 72vw; height: 36.75vw; }
  body.layout-portfolio .portfolio-hero-div .sppb-addon-wrapper:has(.div-1) { width: 76.85vw; height: 16.54vw; }
  body.layout-portfolio .portfolio-hero-div .sppb-addon-wrapper:has(.div-3) { width: 55.17vw; height: 35.7vw; }
}
img.logo-image, img.logo-image-phone { width: auto; }
/* home hero: darken the left side so the headline stays readable */
body.layout-portfolio .portfolio-hero-div { background-image: linear-gradient(90deg, rgba(10,12,40,.78) 0%, rgba(10,12,40,.45) 40%, rgba(10,12,40,0) 72%), url("../../../images/raftaekjasalan/hero-wide.webp") !important; background-position: 60% 50% !important; }
/* pages whose hero photo is dark at the top (OMCN) also get the white logo (same 768px limit) */
@media (min-width: 768px) {
  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/raftaekjasalan/logo-white.png"); }
}
/* header button: solid brand blue on inner pages so it stays readable over photos */
body:not(.layout-portfolio) #sp-header a.header-btn { background: #4344F8 !important; border-color: #4344F8 !important; color: #fff !important; }
body:not(.layout-portfolio) #sp-header a.header-btn:hover { background: #2F30D9 !important; border-color: #2F30D9 !important; color: #fff !important; }
.rs-baform { margin-top: 10px; }
.rs-price td:first-child { padding-right: 16px; }
/* phone-only copy of the hero headline + buttons, shown under the hero photo */
.rs-mobile-hero-title .sppb-addon-title, .rs-mobile-hero-title .sppb-addon-title b { color: #101218 !important; font-size: 28px !important; line-height: 1.2 !important; }
.rs-mobile-hero-buttons .sppb-addon-content { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-mobile-hero-buttons .sppb-btn { margin: 0 !important; padding: 14px 20px !important; font-size: 15px !important; }
.rs-mobile-hero-buttons .sppb-btn-outline { color: #101218 !important; border-color: #101218 !important; }
.rs-mobile-hero-buttons .sppb-addon-content { margin-left: 0 !important; margin-right: 0 !important; }
/* long Icelandic compounds (Raftækjasölunnar, Þjónustusamningar) are wider than narrow phones at the template's 38px */
h1, h2, h3, h4, .sppb-addon-title, .sppb-dynamic-content-text { overflow-wrap: break-word; }
/* below 1200px the template keeps two half-width columns that are too narrow for our content:
   About/OMCN hero (title ran into the intro text) and the footer (three link lists squeezed into one half) */
@media (max-width: 1199px) {
  #column-wrap-id-1758273576503, #column-wrap-id-1758273576504,
  #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-1758273576504 { margin-top: 16px; }
  #column-wrap-id-53951724-0a45-4285-a851-a12305c1649a { margin-bottom: 36px; }
}
@media (max-width: 575px) {
  .sp-page-title .sp-page-title-sub-heading { font-size: 30px; }
  .view-article .article-details .article-header h1 { font-size: 28px; line-height: 1.25; }
  #sppb-addon-33564d0b-1ce7-4ce6-b5ee-8c6d883ba934 .sppb-dynamic-content-text { font-size: 30px !important; } /* service detail title */
}
/* news list: "Lesa meira" shown over the darkened photo on hover (template used brand colour there) */
.article-list .caption-inner .more-btn.sppb-btn-link { background: #fff; color: #4344F8 !important; padding: 12px 22px !important; border-radius: 40px !important; white-space: nowrap; }
.article-list .caption-inner .more-btn.sppb-btn-link:hover { background: #4344F8; color: #fff !important; text-decoration: none; }
/* com_content views (news list, article) sit below the page-title block like the SPPB pages do */
body.com-content #sp-main-body { padding-top: 0; }
/* single article: the template only boxes the header, box the body the same way */
.view-article .details-wrap { max-width: 1140px; padding: 0 15px; margin: 0 auto; }
@media (max-width: 1199px) { .view-article .details-wrap { max-width: 960px; } }
@media (max-width: 991px) { .view-article .details-wrap { max-width: 720px; } }
@media (max-width: 767px) { .view-article .details-wrap { max-width: 540px; } }
@media (max-width: 575px) { .view-article .details-wrap { max-width: 100%; } }
.view-article [itemprop="articleBody"] { max-width: 820px; font-size: 18px; line-height: 1.7; }
.view-article [itemprop="articleBody"] h2 { font-size: 28px; line-height: 1.3; margin: 48px 0 14px; }
.view-article [itemprop="articleBody"] blockquote { font-size: 26px; line-height: 1.35; font-weight: 500; color: var(--sppb-text-primary); border-left: 4px solid #4344F8; padding: 4px 0 4px 24px; margin: 32px 0; }
.view-article [itemprop="articleBody"] blockquote p { margin: 0; }
.view-article [itemprop="articleBody"] hr { margin: 40px 0; opacity: .15; }
.view-article [itemprop="articleBody"] img { max-width: min(100%, 320px); height: auto; margin: 24px 0; }
/* main (modal) menu: the template's hover/active line ran through the middle of the text; put it under the text instead */
#modal-menu .sp-megamenu-parent > li > a::before,
#modal-menu .sp-megamenu-parent > li > span::before { top: auto !important; bottom: 0; }
/* Um okkur "Okkar gildi": the three value columns (title, text, photo) stay side by side down to 576px; the page builder
   dropped them to 2 + 1 below 992px. Phones keep one per row, three columns of text don't fit there */
@media (min-width: 576px) {
  #column-wrap-id-j74mIXTooknqTVGI5F3Wn, #column-wrap-id-BPoXRV27kCxEQq_rUBGpr, #column-wrap-id-D0_L6fuvPnONNlpr8Pgrj { max-width: 33.3333% !important; flex-basis: 33.3333% !important; }
  /* texts differ in length: stretch each feature box to the column height and let its text part take the spare
     room, so titles stay level at the top and the photos level at the bottom */
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature,
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature > .sppb-addon-content,
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-column-addons > .sppb-addon-wrapper:has(.sppb-addon-feature),
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-column-addons > .sppb-addon-wrapper:has(.sppb-addon-feature) > .clearfix { height: 100%; }
  #section-id-dk8CDqhZsUH6ZNy39Xvny .sppb-addon-feature .sppb-media-content { flex-grow: 1; }
}
/* home project cards (Kaffivagninn, Te og kaffi…): light grey instead of the template's lavender */
.portfolio-project-list .sppb-dynamic-content-collection__item { background-color: #EEF1F4; }
.portfolio-project-list .sppb-dynamic-content-collection__item:hover { background-color: #E2E7EC; }
/* home "Þjónusta" section icon (Raw HTML addon): Font Awesome shield in a brand-blue badge */
.rs-shield-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 24px; background: var(--sppb-color-primary); color: #fff; font-size: 40px; line-height: 1; }
@media (max-width: 991px) { .rs-shield-icon { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; } }
/* home "Vantar þig rafvirkja?" section icon (Raw HTML addon): Font Awesome plug in the same brand-blue badge, a size up */
.rs-plug-icon { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 32px; background: var(--sppb-color-primary); color: #fff; font-size: 62px; line-height: 1; transform: rotate(-12deg); }
@media (max-width: 991px) { .rs-plug-icon { width: 88px; height: 88px; border-radius: 26px; font-size: 48px; } }