/**
 * Global custom styles migrated from Breakdance Global Settings -> Custom CSS.
 *
 * Keep additions grouped with a short comment so the origin of each block
 * stays clear.
 */

/* Main menu */
.breakdance-menu-list {
    width: 500px !important;
    max-width: calc(100vw - 20px) !important;
    right: 0;
    left: auto !important;
    background-color: #F2F2F2 !important;
    border-radius: 12.5px;
    top: -10px !important;
    right: -10px;
}
.breakdance-menu-toggle {
  z-index: 1001 !important;
}

/* Footer reveal animation */
footer.bde-section {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

.bde-section-18-100.footer-visible {
  transform: translateY(0);
}

/* Alla sections: scrollar ovanpå footern.
   Opak bakgrund (sidans bakgrundsfärg) krävs för att dölja den fixerade
   footern bakom innehållet. "inherit" blev transparent och lät den svarta
   footern lysa igenom. */
section.bde-section,
.bde-globalblock{
  position: relative;
  z-index: 100;
  background-color: var(--bde-background-color);
}

/* Headern: ovanpå allt */
header.bde-header-builder {
  position: relative;
  z-index: 200;
}

/* Grid */

/* =====================
   DESKTOP — gäller alltid som default
   ===================== */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* =====================
   TABLET LANDSCAPE ≤1119px
   ===================== */
@media (max-width: 1119px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
  .hidden-lg { display: none !important; }
}

/* =====================
   TABLET PORTRAIT ≤1023px
   ===================== */
@media (max-width: 1023px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
  .hidden-md { display: none !important; }
}

/* =====================
   PHONE LANDSCAPE ≤767px
   ===================== */
@media (max-width: 767px) {
  .col-sm-1  { grid-column: span 1; }
  .col-sm-2  { grid-column: span 2; }
  .col-sm-3  { grid-column: span 3; }
  .col-sm-4  { grid-column: span 4; }
  .col-sm-5  { grid-column: span 5; }
  .col-sm-6  { grid-column: span 6; }
  .col-sm-7  { grid-column: span 7; }
  .col-sm-8  { grid-column: span 8; }
  .col-sm-9  { grid-column: span 9; }
  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; }
  .col-sm-12 { grid-column: span 12; }
  .hidden-sm { display: none !important; }
}

/* =====================
   PHONE PORTRAIT ≤479px
   ===================== */
@media (max-width: 479px) {
  .col-xs-1  { grid-column: span 1; }
  .col-xs-2  { grid-column: span 2; }
  .col-xs-3  { grid-column: span 3; }
  .col-xs-4  { grid-column: span 4; }
  .col-xs-5  { grid-column: span 5; }
  .col-xs-6  { grid-column: span 6; }
  .col-xs-7  { grid-column: span 7; }
  .col-xs-8  { grid-column: span 8; }
  .col-xs-9  { grid-column: span 9; }
  .col-xs-10 { grid-column: span 10; }
  .col-xs-11 { grid-column: span 11; }
  .col-xs-12 { grid-column: span 12; }
  .hidden-xs { display: none !important; }
}

/* Bakgrundsfärger.
   Sätt även --bde-background-color så att sektionerna (som använder den
   variabeln) får samma färg som sidan och döljer den fixerade footern. */

/* Yellow */
.page-id-6109,
.single-post {
  --bde-background-color: var(--custom-yellow);
  background-color: var(--custom-yellow);
}

/* Blue */
.page-id-6171,
.parent-pageid-6171 {
  --bde-background-color: var(--custom-blue);
  background-color: var(--custom-blue);
}

/* Green */
.page-id-5821, 
.parent-pageid-5821 {
  --bde-background-color: var(--custom-green);
  background-color: var(--custom-green);
}

/* Orange */
.page-id-6178, 
.parent-pageid-6178 {
  --bde-background-color: var(--custom-orange);
  background-color: var(--custom-orange);
}

/* Peach */
.asdasd {
  --bde-background-color: var(--custom-peach);
  background-color: var(--custom-peach);
}

/* Purple */
.error404 {
  --bde-background-color: var(--custom-purple);
  background-color: var(--custom-purple);
}

/* Disco.
   Animera även sektionerna (inte bara body). De opaka sektionerna ligger
   ovanpå body, så utan detta syns disco-animationen bara i remsan vid
   scrollbaren. Alla startar samtidigt vid laddning och håller sig i synk. */
.page-id-6364,
.page-id-6364 section.bde-section,
.page-id-6364 .bde-globalblock {
  animation: discoFärg 10s ease-in-out infinite;
}

@keyframes discoFärg {
  0%   { background-color: #FBD9AB; } /* Orange */
  25%  { background-color: #B5D5D0; } /* Blue */
  50%  { background-color: #F7CEB1; } /* Peach */
  75%  { background-color: #F6FFA0; } /* Lemon */
  90%  { background-color: #BAE6BE; } /* Green */
  100% { background-color: #FBD9AB; } /* tillbaka till start */
}

/* Black */
body.dark-page,
.post-type-archive-projekt, 
.single-projekt {
  --bde-body-text-color: var(--custom-white);
  --bde-headings-color: var(--custom-white);
  --bde-background-color: var(--custom-black);
  --bde-links-color: var(--custom-white);
  --bde-brand-primary-color: var(--custom-black);
  --bde-palette-color-1-f947352d-542f-48fe-8c17-7bd3afdab299: var(--custom-white);
  --bde-palette-yellow-ee7d5e0e-8550-4aff-befc-48da6035512f-2: var(--custom-black);
}
body.dark-page .breakdance-menu-list,
.post-type-archive-projekt .breakdance-menu-list,
.single-projekt .breakdance-menu-list {
  --bde-palette-color-1-f947352d-542f-48fe-8c17-7bd3afdab299: var(--custom-black);
  --bde-body-text-color: var(--custom-black);
  --link-color-active: var(--custom-black);
  --bde-headings-color: var(--custom-black);
  --bde-background-color: transparent;
  --bde-links-color-hover: var(--custom-black);
  --link-color: var(--custom-black);
  --bde-links-color: var(--custom-black);
  --bde-brand-primary-color: var(--custom-white);
}
body.dark-page .breakdance-menu-list .breakdance-menu-link,
.post-type-archive-projekt .breakdance-menu-list .breakdance-menu-link,
.single-projekt .breakdance-menu-list .breakdance-menu-link {
  color: var(--custom-black) !important;
}
html.is-breakdance-menu-open body.dark-page header .breakdance-menu-toggle,
html.is-breakdance-menu-open .post-type-archive-projekt header .breakdance-menu-toggle,
html.is-breakdance-menu-open .single-projekt header .breakdance-menu-toggle {
  --toggle-layer-color: var(--custom-black);
  --toggle-layer-color-active: var(--custom-black);
  --toggle-background-color: transparent;
}
html.is-breakdance-menu-open body.dark-page header .bde-button__button,
html.is-breakdance-menu-open .post-type-archive-projekt header .bde-button__button,
html.is-breakdance-menu-open .single-projekt header .bde-button__button {
  --bde-palette-color-1-f947352d-542f-48fe-8c17-7bd3afdab299: var(--custom-black);
  --bde-button-primary-text-color: var(--custom-black);
  --bde-button-primary-background-color: transparent;
  --bde-button-primary-border-color: var(--custom-black);
    --bde-palette-yellow-ee7d5e0e-8550-4aff-befc-48da6035512f-2: var(--custom-white);

}
body.dark-page .breakdance-menu-list .breakdance-menu-link:hover,
.post-type-archive-projekt .breakdance-menu-list .breakdance-menu-link:hover,
.single-projekt .breakdance-menu-list .breakdance-menu-link:hover {
  color: var(--custom-black) !important;
}
body.dark-page header .breakdance-image-object,
.post-type-archive-projekt header .breakdance-image-object, 
.single-projekt header .breakdance-image-object,
.bde-image2-6525-116, .post-type-archive-projekt .bde-image2-7461-130-7461-1, .single-projekt .bde-image2-7461-130-7461-1,
.post-type-archive-projekt .bde-image2-7461-132-7461-1,
.single-projekt .bde-image2-7461-132-7461-1,
.post-type-archive-projekt form, 
.single-projekt form {
  filter: invert(1);
}

body.dark-page footer,
.post-type-archive-projekt footer, 
.single-projekt footer,
body.dark-page form#nyhetsbrev107,
.post-type-archive-projekt form#nyhetsbrev107,
.single-projekt form#nyhetsbrev107 {
  filter: invert(1);
}

/* Tjänster image swap */

.services-image-wrapper {
  position: relative;
}

.js-service-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.5s ease;
  pointer-events: none;
}

.js-service-img--webbutveckling {
  opacity: 1;
  transform: translateY(0);
}

/* Complianz styling */

#cmplz-document h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h2, .editor-styles-wrapper .cmplz-unlinked-mode h3 {
    font-size: inherit !important;
    font-weight: 600;
      font-family: 'aktiv-grotesk';
}

#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary {
    padding: 10px 10px;
}

#cmplz-cookies-overview .cmplz-dropdown summary p, #cmplz-document .cmplz-dropdown summary p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary p {
    font-size: 10px;
  text-transform: uppercase;
}

#cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4 {
    font-size: inherit !important;
    margin: 5px 0;
    font-family: 'aktiv-grotesk';
}

.cmplz-cookiebanner {
    max-width: calc(100% - 40px);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    transition: .3s all;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover {
    background: #000 !important;
    color: #fff !important;
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
    padding: 10px 15px;
}