/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* =============================================
   SKUGGOR – ta bort temats box-shadow
   ============================================= */

#header.header-shadow .header-inner,
#header.header-shadow #header-wrap,
#header.header-sticky.sticky-active .header-inner,
#header.header-sticky.sticky-active #header-wrap,
.mainMenu-open #header .header-inner,
.mainMenu-open #header #header-wrap {
  box-shadow: none !important;
}

#topbar {
  border-bottom: none !important;
  background-color: #F1ECE5 !important;
}

/* =============================================
   FÄRGER & TYPOGRAFI
   ============================================= */

.services-text,
.services-text h1,
.services-text h2,
.services-text h4,
.services-text span {
  color: #522E29 !important;
}

#mainMenu ul li[class^="social-"] a i {
  font-size: 22px;
}

#section2 p {
  font-size: 16px;
}

#footer ul li,
#footer ul li a {
  font-size: 16px;
}

.link-underline {
  text-decoration: underline;
  font-weight: normal;
}

.link-underline:hover {
  font-weight: bold;
}

.hagen-link {
  color: #522E29;
}

.hagen-link:hover,
.hagen-link:focus {
  font-weight: bold;
  color: #522E29 !important;
  text-decoration: underline;
}

/* =============================================
   WATERMARK-IKON I H2
   ============================================= */

h2 {
  position: relative;
  z-index: 1;
}

.watermark-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.1;
  pointer-events: none;
}

.watermark-icon i {
  font-size: 4em;
  color: #fff;
}

/* =============================================
   ÖVRIGT
   ============================================= */

.overlay-bg {
  background-color: #32000D;
}

#footer .copyright-content {
  background-color: #512E29 !important;
}

.portfolio-item,
.portfolio-item img {
  cursor: default !important;
  pointer-events: none !important;
  width: 100%;
  display: block;
}

.section-flexibelt { background-color: #512E29; padding: 3rem; }
.section-tryggt    { background-color: #6B4D49; padding: 3rem; }

@media (max-width: 991.98px) {
  .section-flexibelt,
  .section-tryggt { text-align: center !important; }
}

#section4 { background-color: #512E29; }

section {
  padding: 4rem 0 !important;
}

@media (max-width: 767.98px) {
  section {
    padding: 40px 0 !important;
  }
}

/* =============================================
   HEADER DESKTOP – större höjd och logga
   ============================================= */

#header,
#header .header-inner,
#header #header-wrap {
  height: 100px !important;
  line-height: 100px !important;
}

#header .header-inner #logo,
#header #header-wrap #logo {
  height: 100px !important;
}

#header .header-inner #logo a > img,
#header #header-wrap #logo a > img {
  height: 80px !important;
  width: auto !important;
}

/* =============================================
   HEADER MOBIL & TABLET (max 991px)
   ============================================= */

@media (max-width: 991.98px) {

  /* Headerns höjd och bakgrundsfärg */
  #header,
  #header .header-inner,
  #header #header-wrap,
  #header .header-inner .container,
  #header .header-inner > *,
  #header #header-wrap > * {
    height: 70px !important;
    line-height: 70px !important;
    background-color: #F1ECE5 !important;
  }

  /* Logo-wrapper */
  #header #logo,
  #header .header-inner #logo,
  #header #header-wrap #logo {
    height: 70px !important;
    text-align: left !important;
    width: auto !important;
    left: 20px !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Logotypens bild – mobil (≤575px) */
  #header .header-inner #logo a > img,
  #header #header-wrap #logo a > img {
    height: clamp(3rem, 14vw, 3.5rem) !important;   /* ~48–56px */
    width: auto !important;
    max-height: 100% !important;
  }

  /* Meny öppen – bakgrund på alla delar */
  .mainMenu-open #header,
  .mainMenu-open #header::before,
  .mainMenu-open #header::after,
  .mainMenu-open #header .header-inner,
  .mainMenu-open #header #header-wrap,
  .mainMenu-open #header .container,
  .mainMenu-open #header #mainMenu,
  .mainMenu-open #header #mainMenu > .container,
  .mainMenu-open #header #mainMenu nav {
    background-color: #F1ECE5 !important;
  }

  /* Menyns bredd – ta bort temats calc(100% + 14px) */
  .mainMenu-open #header #mainMenu {
    width: 100% !important;
  }

  /* Meny stängd – listans bakgrund */
  #mainMenu:not(.menu-overlay) {
    background-color: #F1ECE5 !important;
  }

  /* Menyns länkfärger */
  #mainMenu nav > ul > li > a {
    color: #522E29 !important;
    border-bottom: 1px solid rgba(82, 46, 41, 0.12);
  }

  /* Hamburgarens streck */
  #mainMenu-trigger .lines,
  #mainMenu-trigger .lines::before,
  #mainMenu-trigger .lines::after {
    background-color: #522E29 !important;
  }

  /* Body-bakgrund synlig i sidomarginaler på tablet */
  body,
  .body-inner {
    background-color: #F1ECE5 !important;
  }
}

/* =============================================
   HEADER TABLET (576–991px) – större logga
   ============================================= */

@media (min-width: 576px) and (max-width: 991.98px) {

  #header,
  #header .header-inner,
  #header #header-wrap,
  #header .header-inner .container,
  #header .header-inner > *,
  #header #header-wrap > * {
    height: 90px !important;
    line-height: 90px !important;
  }

  #header #logo,
  #header .header-inner #logo,
  #header #header-wrap #logo {
    height: 90px !important;
  }

  #header .header-inner #logo a > img,
  #header #header-wrap #logo a > img {
    height: clamp(4rem, 10vw, 4.8rem) !important;   /* ~64–77px */
  }
}

/* =============================================
   TJÄNSTER – extra avstånd under H2 på mobil/tablet
   ============================================= */

#section2 .heading-text.heading-section {
  margin-bottom: 3rem !important;
}

/* =============================================
   H3 & H4 – framhäv rubriker
   ============================================= */

h3, .h3 {
  font-weight: 700 !important;
  font-size: 1.8em !important;
  letter-spacing: 0.5px;
}

/* =============================================
   GALLERI – 2+2 layout på tablet
   ============================================= */

@media (min-width: 576px) and (max-width: 991.98px) {
  .portfolio-4-columns .portfolio-item {
    width: 50% !important;
  }
}

/* =============================================
   H1 – ska se ut som temats H2 i .heading-section
   ============================================= */

.heading-text.heading-section h1 {
  font-size: 48px !important;
  line-height: 56px;
  margin-bottom: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (max-width: 991.98px) {
  .heading-text.heading-section h1 {
    font-size: 40px !important;
    line-height: 44px;
    margin-bottom: 16px;
  }
}