/* ==========================================================================
   README — 11-overrides.css
   Purpose: Targeted, high-specificity overrides to beat Flatsome IDs/inline styles.
   Owner: Frontend / SupportDesign
   Updated: 2025-08-15 12:00 (Europe/Stockholm)

   STRATEGY:
     1) Prefer class-based styling in 03-typography.css (e.g., .hero__title).
     2) Scope overrides by adding .sd-scope to a Section/Row in UX Builder.
     3) Use !important only when necessary (inline styles / ID selectors).

   DO:
     - Target only what cannot be solved at the component/base level.
     - Keep selectors scoped (#content, #main, .sd-scope) to avoid global fallout.
   DON'T:
     - Dump generic resets or global typography here.
     - Overuse !important; escalate only when needed.
========================================================================== */

/* ==========================================================================
   11-overrides.css
   Project: SupportDesign WordPress (Flatsome Child)
   Last updated: 2025-08-15
   Author: Björn Stove & ChatGPT (CSS structure & overrides)
   Purpose: See README notes below.

   DO:
   - Use semantic tokens from 00-tokens_old.css for colors, fonts, spacing.
   - Add custom classes in UX Builder (e.g., hero__title) and style in typography.css.
   - Scope overrides with .sd-scope where possible to avoid global bleed.

   DON'T:
   - Hardcode colors or font stacks; always reference tokens.
   - Overuse !important — keep it in overrides.css only where needed.
   - Mix unrelated concerns; tokens = variables only, typography = base styles only.

   ========================================================================== */

/* ==========================================================================
   11-overrides.css  —  Targeted overrides to win against Flatsome rules
   Usage: High-specificity selectors and !important where needed.
   Keep this file as small as possible. Only put necessary overrides here.
   ========================================================================== */

/* Strategy
   1) Prefer adding your own class in UX Builder (e.g., hero__title) and style it in 03-typography.css.
   2) If Flatsome injects ID-based or inline styles, use scoped, higher-specificity rules here.
   3) Use !important sparingly, only to beat inline styles or unavoidable ID rules.
*/

/* 1) Scope: apply .sd-scope to any Section or Row via "Custom CSS class" in UX Builder
   to limit overrides to that area. */
.sd-scope .sd-strict {}

/* 2) Beat Flatsome Text element IDs like #text-123456789
   - Targets elements with class .text generated by Flatsome Text module.
   - Keeps your naming (.hero__title) intact if you also add that class.
*/
/*OVERRIDE GLOBAL PAGE WRAPPING*/
.page-wrapper {
  padding: 0 !important;
}

/*BSV CSS */
/* ==========================================================================
    BUTTONS
========================================================================== */



/* ==============================
   Brown Background Button Variant
   ============================== */

.sd-scope .sd__button-bg_brown {
    display: inline-block;
    background-color: var(--color-mocha);       /* brown background */
    color: var(--color-white);                     /* white text */
    border-radius: 6px;
    font-weight: var(--fw-sans-regular);
    padding: 0.6em 1.8em;
    text-decoration: none;
    text-align: center;
    min-width: 200px;
    max-width: 450px;

    transition: all 0.25s ease;
}

.sd-scope .sd__button-bg_brown:hover {
    background-color: var(--color-brown);   /* outline effect */
    color: currentColor;

}
.sd-scope .sd-form input[type="submit"]{
	display: inline-block;
    background-color: var(--color-forest);       
    color: var(--color-white);                    
    border-radius: 6px;
    font-weight: 600;
    padding: 0.6em 1.8em;
    text-decoration: none;
    text-transform: inherit;
    text-align: center;
    min-width: 200px;
    max-width: 450px;
    transition: all 0.25s ease;


}

.sd-scope .sd-form input[type="submit"]:hover{
 background-color: var(--color-green);
    box-shadow: inset 0 0 0 100px rgba(0,0,0,.3);

}
.sd-scope .sd__button-bg_darkgreen {
    display: inline-block;
    background-color: var(--color-forest);       /* brown background */
    color: var(--color-white);                     /* white text */
    border-radius: 6px;
    font-weight: 600;
    padding: 0.6em 1.8em;
    text-decoration: none;
    text-align: center;
    min-width: 200px;
    max-width: 450px;
    transition: all 0.25s ease;
}

.sd-scope .sd__button-bg_darkgreen:hover {
    background-color: transparent;   /* outline effect */
    box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
}
.sd-scope .sd__button-bg_lightblue{
    display: inline-block;
    background-color: var(--color-lightblue);       /* brown background */
    color: var(--color-black);                     /* white text */
    border: 2px solid var(--color-lightblue-50); /*todo ändra*/
    border-radius: 6px;
    font-weight: 600;
    padding: 0.6em 1.8em;
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease;

}
.sd-scope .sd__button-bg_lightblue:hover {
    background-color: var(--color-lightblue-50);
    box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
}

.sd-scope h1>span.rest-words, .last-word {
    font-family: var(--font-serif) !important;
    display: block; /* optional: forces it on its own line too */
}

.sd-scope h2>span.rest-words, .last-word {
    font-family: var(--font-serif) !important;
    display: block; /* optional: forces it on its own line too */
}

.sd-greenbox-row {
    position: relative;
    z-index: 200;
}
.sd-greenbox-row .greenbox-slider {
    position: relative;
}
.sd-scope .greenbox-slider .flickity-page-dots,
.sd-scope .greenbox-slider .flickity-prev-next-button {
    z-index: 50;
}
.sd-scope .greenbox-slider .flickity-page-dots {
    position: absolute;
    top: 1.5rem;         /* adjust position as needed */
    bottom: auto !important;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;           /* space between bars */
    z-index: 20;
}
.sd-scope .greenbox-slider .text-box {
    position: relative;
    z-index: 10; /* below dots */
    padding-top: 2rem;
}
.sd-scope .greenbox-slider .flickity-page-dots .dot {
    flex: 0 0 auto;
    width: 80px;         /* ← make this larger for wider bars */
    height: 2px;         /* bar thickness */
    border-radius: 2px;  /* softer rounded edges */
    /*background-color: #4458a7;  !* your brand color *!*/
    opacity: 0.4;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.sd-scope .greenbox-slider .flickity-page-dots .dot.is-selected {
    opacity: 1;
    background-color: #2b351f; /* active color */
}

.sd-greenbox-row,
.sd-greenbox-row .row,
.sd-greenbox-row .col {
  overflow: visible !important;
}


.sd-greenbox-row {
position: relative;
}
.sd-greenbox-column {
  position: relative; /* ensures z-index works */
 transform: translateY(calc(-100% - 3rem));
overflow: visible !important;
  z-index: 200; /* optional, if you want it above others */

  /*margin-top: calc(-100% - 2rem);*/
}

/*End bsv css*/

.sd-scope .sd-strict #content .text.hero__title,
#main .text.hero__title,
.sd-scope .sd-strict .text.hero__title,
[id^="text-"].text.hero__title {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-sans-medium) !important;
  line-height: var(--lh-tight) !important;
}

/* 3) Force serif italic subtitle even if Flatsome sets a font inline */
/*.sd-scope .sd-strict #content .text .hero__subtitle,*/
/*#main .text .hero__subtitle,*/
/*.sd-scope .sd-strict .text .hero__subtitle,*/
/*[id^="text-"].text .hero__subtitle {*/
/*  font-family: var(--font-subheading) !important;*/
/*  font-style: italic !important;*/
/*  font-weight: var(--fw-serif-regular) !important;*/
/*}*/

/* 4) Global text color normalization inside Flatsome text modules */
/*#content .text > *,
#main .text > *,
.sd-scope .text > * {
  color: var(--color-text) !important;
}*/

/* 5) Example: override an inline font-size set by Flatsome Text element
   Attach the class .h1 or .h2 on the element in UX Builder to opt-in. */
#content .text .h1,
#main .text .h1,
.sd-scope .sd-strict  .text .h1 {
  font-size: var(--fs-900) !important;
  letter-spacing: -0.01em !important;
}

#content .text .h2,
#main .text .h2,
.sd-scope .sd-strict  .text .h2 {
  font-size: var(--fs-800) !important;
}

/* 6) Color utility overrides (if Flatsome hard-codes colors) */
.sd-scope .sd-strict  .text .text-primary { color: var(--color-primary) !important; }
.sd-scope .sd-strict  .text .text-secondary { color: var(--color-secondary) !important; }
.sd-scope .sd-strict  .text .text-accent { color: var(--color-accent) !important; }

/* 7) Safety valve: last-resort generic override for any Flatsome Text element
   Uncomment if absolutely necessary; this will affect all Text elements site-wide.
*/
/*
[id^="text-"].text {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
*/
/* ==========================================================================
   Scoped override examples — apply only inside sections/rows with these classes
   Add the class name (without the dot) in UX Builder → Advanced → Custom CSS Class
   ========================================================================== */
/* =============================================================================
  Here we set some initial overrieds - might be fixed later
  We set Navbar to move down a bit and fix a blue button
 */
.header {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  width: 95%;
  background: white;
  color: black;
  z-index: 1000;
}
/* Override Flatsome container margin for header */
header .header-inner.container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.blue-button{
  background-color: #d1e7fe !important;
  color: black !important;
}
.sd-scope .sd-strict .ml-auto {
  margin-left: auto !important;
}
.sd-scope .sd-strict .mr-auto {
  margin-right: auto !important;
}

/* 1) sd-scope — Generic typography & color fixes */
.sd-scope .sd-strict  .text.hero__title {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-sans-medium) !important;
}
.sd-scope .sd-strict  .text.hero__subtitle {
  font-family: var(--font-subheading) !important;
  font-style: italic !important;
} .sd-strict

/* 2) landing-scope — Landing page specific look */
.sd-scope .sd-strict  .landing-scope .text.hero__title {
  font-size: var(--fs-900) !important;
  color: var(--color-primary) !important;
}
.sd-scope .sd-strict  .landing-scope .button {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
}

.sd-scope .sd-strict .col,
.sd-scope .sd-strict .columns {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Master Typography Overrides (Scoped)
   Purpose: Ensure headings, subtitles, and body text follow design tokens even when Flatsome sets inline styles or IDs.
   Usage: Apply .sd-scope to the Section/Row/Column in UX Builder.
   ========================================================================== */

/* ===== Subtitles ===== */
.sd-scope .sd-strict .text.subtitle,
.sd-scope .sd-strict [id^="text-"].text.subtitle,
.sd-scope .sd-strict .text.t-serif-italic,
.sd-scope .sd-strict [id^="text-"].text.t-serif-italic {
  font-family: var(--font-subheading) !important;   /* Libre Baskerville */
  font-style: italic !important;
  font-weight: var(--fw-serif-regular) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-snug) !important;
}

/* ===== Headings (H1–H6) ===== */

.sd-scope .sd-strict .text h1,
.sd-scope .sd-strict .text h2,
.sd-scope .sd-strict .text h3,
.sd-scope .sd-strict .text h4,
.sd-scope .sd-strict .text h5,
.sd-scope .sd-strict .text h6,
.sd-scope .sd-strict [id^="text-"].text h1,
.sd-scope .sd-strict [id^="text-"].text h2,
.sd-scope .sd-strict [id^="text-"].text h3,
.sd-scope .sd-strict [id^="text-"].text h4,
.sd-scope .sd-strict [id^="text-"].text h5,
.sd-scope .sd-strict [id^="text-"].text h6 {
  font-family: var(--font-heading) !important;      /* Plus Jakarta Sans */
  font-weight: var(--fw-sans-medium) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-snug) !important;
  /*font-size-adjust: ex-height 0.5;*/
  font-size-adjust: 0.53;
}

/* ===== Paragraphs ===== */
.sd-scope .sd-strict .text p,
.sd-scope .sd-strict [id^="text-"].text p {
  font-family: var(--font-body) !important;         /* Plus Jakarta Sans */
  font-weight: var(--fw-sans-light) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-normal) !important;
}


/* ==========================================================================
   MASTER TYPOGRAPHY OVERRIDES — Scoped controls to beat Flatsome inline/ID styles
   Usage:
     - Prefer Section scope: add `sd-scope` to the outer Section in UX Builder.
     - Use `sd-scope-row` or `sd-scope-col` only if you need narrower targeting.
     - Combine with page scopes (e.g., `.home-page-scope.sd-scope`) for page-specific control.
   ========================================================================== */
/* ============================================
   Responsive typography overrides for Flatsome
   Without parent scope
   ============================================ */
.sd-scope .sd-strict h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: clamp(1.1, 2vw, 1.3) !important;
}

.sd-scope .sd-strict h2 {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: clamp(1.15, 2vw, 1.35) !important;
}

.sd-scope .sd-strict h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: clamp(1.2, 2vw, 1.4) !important;
}

.sd-scope .sd-strict h4 {
  font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
  line-height: clamp(1.25, 2vw, 1.45) !important;
}

.sd-scope .sd-strict p {
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
  line-height: clamp(1.4, 2vw, 1.65) !important;
}


/* ---- Subtitles (Libre Baskerville italic) ---- */
.sd-scope .sd-strict .text.subtitle,
.sd-scope .sd-strict [id^="text-"].text.subtitle {
  font-family: var(--font-subheading) !important;
  font-style: italic !important;
  font-weight: var(--fw-serif-regular) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-snug) !important;
}



/* ---- Headings (Plus Jakarta Sans Medium) ---- */
.sd-scope .sd-strict .text h1,
.sd-scope .sd-strict .text h2,
.sd-scope .sd-strict .text h3,
.sd-scope .sd-strict .text h4,
.sd-scope .sd-strict .text h5,
.sd-scope .sd-strict .text h6,
.sd-scope .sd-strict [id^="text-"].text h1,
.sd-scope .sd-strict [id^="text-"].text h2,
.sd-scope .sd-strict [id^="text-"].text h3,
.sd-scope .sd-strict [id^="text-"].text h4,
.sd-scope .sd-strict [id^="text-"].text h5,
.sd-scope .sd-strict [id^="text-"].text h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-sans-medium) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-snug) !important;
  font-size-adjust: 0.53;
}



/* ---- Body text (Plus Jakarta Sans Light) ---- */
.sd-scope .sd-strict .text p,
.sd-scope .sd-strict .text li,
.sd-scope .sd-strict .text span,
.sd-scope .sd-strict [id^="text-"].text p,
.sd-scope .sd-strict [id^="text-"].text li,
.sd-scope .sd-strict [id^="text-"].text span {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-sans-light) !important;
  color: var(--color-text) !important;
  line-height: var(--lh-normal) !important;
}

/*take away the bottom absolute footer in flatsome*/
.sd-scope .absolute-footer {
  display: none !important;
}
  /*CSS to make the bg image cover the whole drawer*/
/* Force drawer background to cover full width */
/* still css to come here */
/* Set the drawer width */

.sd-scope .off-canvas {
  --off-canvas-width: 85vw; /* 85% of viewport width */
  max-width: 320px; /* Cap at 320px for larger phones */
}

/* Paint the background on the drawer container itself */

.off-canvas .mfp-content {
  background: url('/wp-content/uploads/2025/08/bg_mobile.png') center / cover no-repeat !important; /* noinspection CssInvalidUrl */
}

/* Make sure inner wrappers don't paint white */
.off-canvas .mfp-container,
.off-canvas .sidebar-menu { background: transparent !important; }

/* woocommerce overrides */
nav.woocommerce-breadcrumb.breadcrumbs  {
 display: none !important;
}
/* 4) dark-scope — Dark mode section */
/*.dark-scope {*/
/*  background-color: var(--color-primary) !important;*/
/*  color: var(--color-primary-ink) !important;*/
/*}*/
/*.dark-scope .text > * {*/
/*  color: var(--color-primary-ink) !important;*/
/*}*/

/* 5) promo-scope — Promotional banner style */
/*.promo-scope {*/
/*  background-color: var(--color-secondary) !important;*/
/*  padding: var(--spacing-md) !important;*/
/*}*/
/*.promo-scope .text > * {*/
/*  color: var(--color-secondary-ink) !important;*/
/*}*/
/*.promo-scope .button {*/
/*  background-color: var(--color-primary) !important;*/
/*  color: var(--color-primary-ink) !important;*/
/*}*/

/* 6) minimal-scope — Stripped-down clean section */
/*.minimal-scope .text > * {*/
/*  color: var(--color-text) !important;*/
/*  font-weight: var(--fw-sans-light) !important;*/
/*}*/
/*.minimal-scope {*/
/*  background: transparent !important;*/
/*  border: none !important;*/
/*}*/

/* *********************************************** */
/* Vertical Mobile Menu*/
/* *********************************************** */
/* ===== Menu text (drawer) ===== */
.sd-scope span.ux-menu-link__text {
    font-family: var(--font-subheading);
    font-style: italic;
    font-weight: var(--fw-serif-regular);
    line-height: var(--lh-tight);
    color: var(--color-linen);
}
.sd-scope .ux-menu-link__text:hover,
.sd-scope .ux-menu-link__text:active {
    color: var(--color-linen);
}
.sd-scope .sd__vertical-menu {
    color: var(--color-linen);
}
.sd-scope .sd__vertical-menu_link {
    color: var(--color-linen);
    &:hover {
        color: var(--color-stone);
    }
}

.sd-scope .sd-vertical-menu {
    color: var(--color-linen);
}
/* ==========================================================================
    MOBILE & OFF-CANVAS
========================================================================== */
.sd-scope .off-canvas {
    --off-canvas-width: 85vw; /* 85% of viewport width */
    max-width: 320px; /* Cap at 320px for larger phones */
}

@media (min-width: 768px){
    .sd-scope  .off-canvas {
        background: transparent !important;
    }
    .sd-scope  button.mfp-close {
        right: 30px;
        color:white;
        opacity: 1;
    }
    .sd-scope  button.mfp-close:hover {
        color: lightgrey;
        opacity: .8;
    }
}