/*
-------------------------------------------
wf-variables.css
-------------------------------------------

  Beskrivning: Variabler
	Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Variabler
------------------------------------------- */

:root {
  --munksjostaden-color-brand: #636363;
  --munksjostaden-color-brand-hover: color-mix(in hsl, var(--munksjostaden-color-brand), #000 10%);
  --munksjostaden-color-brand-contrast: #fff;
  --ostra-munksjon-color-brand: #4e7f54;
  --ostra-munksjon-color-brand-hover: color-mix(in hsl, var(--ostra-munksjon-color-brand), #000 10%);
  --ostra-munksjon-color-brand-contrast: #fff;
  --skeppsbron-color-brand: #6ba9dc;
  --skeppsbron-color-brand-hover: color-mix(in hsl, var(--skeppsbron-color-brand), #fff 10%);
  --skeppsbron-color-brand-contrast: #000;
  /* Bolagsfärgerna */
  --smuab-color-brand: #2f628b;
  --smuab-color-brand-hover: color-mix(in hsl, var(--smuab-color-brand), #000 10%);
  --smuab-color-brand-contrast: #fff;
  --solasen-fridhem-color-brand: #db8926;
  --solasen-fridhem-color-brand-hover: color-mix(in hsl, var(--solasen-fridhem-color-brand), #fff 10%);
  --solasen-fridhem-color-brand-contrast: #000;
  --stationsomradet-color-brand: #51334f;
  --stationsomradet-color-brand-hover: color-mix(in hsl, var(--stationsomradet-color-brand), #000 10%);
  --stationsomradet-color-brand-contrast: #fff;
  --wf-block-transform: scale(1.02);
  /* Animationer */
  --wf-block-transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  --wf-btn-transform: scale(1.02);
  --wf-btn-transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  /* Knappar */
  --wf-button-padding: 0.75em 1em;
  /* Färger i standardfiler */
  --wf-color-danger: var(--env-element-danger-background-color);
  --wf-color-danger-fair: #f0e0e0;
  --wf-color-disable-background: #eee;
  --wf-color-disable-border: #e1e1e1;
  --wf-font-heading: var(--env-text-heading-01-font-family);
  /* Textstorlekar - 2560 */
  --wf-font-size-h1: clamp(3.4rem, 3.25vw, 5.2rem);
  --wf-font-size-h2: clamp(2.6rem, 2.25vw, 3.6rem);
  --wf-font-size-h3: clamp(2.2rem, 1.75vw, 2.8rem);
  --wf-font-size-h4: clamp(2.0rem, 1.56vw, 2.4rem);
  --wf-font-size-normal: clamp(1.8rem, 1.38vw, 2rem);
  --wf-font-size-preamble: clamp(2.2rem, 1.75vw, 2.8rem);
  --wf-font-size-small: clamp(1.6rem, 1.13vw, 1.8rem);
  --wf-form-button-line-height: 1;
  --wf-form-button-padding: 1em 1.5em;
  /* Formulär */
  --wf-form-text-input-line-height: 1.2;
  --wf-form-text-input-padding: 0.9em;
  --wf-global-border-color: #f2f2f2;
  /* Gemensamma färger för alla webbplatser */
  --wf-global-font: 'Open Sans';
  --wf-global-font-color: #222;
  --wf-grid-4-col: 452px;
  --wf-grid-5-col: 575px;
  --wf-grid-6-col: 698px;
  --wf-grid-7-col: 821px;
  --wf-grid-8-col: 944px;
  /* Grid */
  --wf-grid-size: 1436px;
  --wf-icon-arrow-222: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%23222%22/%3E%0A%3C/svg%3E');
  /* Temp för att skapa fler ikoner:
    första ikonen --wf-icon-X-X ska ha färgen #2F628B
    andra ikonen --wf-icon-Y-X ska ha #274A72
    tredje --wf-icon-Z-X ska ha #4F3602
    fjärde: #4A4A4A
    femte: #3B5F3F
    sjätte: #51334F
  */
  /* Ikoner */
  --wf-icon-arrow-fff: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%23fff%22/%3E%0A%3C/svg%3E');
  --wf-icon-scroll-fff: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2022.6%2045.62%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.13%2C33.74h-5.66c-4.67%2C0-8.47-3.8-8.47-8.47V8.47C0%2C3.8%2C3.8%2C0%2C8.47%2C0h5.66c4.67%2C0%2C8.47%2C3.8%2C8.47%2C8.47v16.79c0%2C4.67-3.8%2C8.47-8.47%2C8.47ZM8.47%2C2.95c-3.04%2C0-5.52%2C2.48-5.52%2C5.52v16.79c0%2C3.04%2C2.48%2C5.52%2C5.52%2C5.52h5.66c3.04%2C0%2C5.52-2.48%2C5.52-5.52V8.47c0-3.04-2.48-5.52-5.52-5.52h-5.66Z%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M11.3%2C45.62c-.35%2C0-.7-.13-.98-.38l-4.58-4.09c-.61-.54-.66-1.48-.12-2.09.54-.61%2C1.48-.66%2C2.09-.12l3.62%2C3.23%2C3.77-3.25c.62-.53%2C1.55-.46%2C2.08.15s.46%2C1.55-.15%2C2.08l-4.75%2C4.09c-.28.24-.62.36-.96.36Z%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M11.3%2C15.63c-.82%2C0-1.48-.66-1.48-1.48v-5.43c0-.82.66-1.48%2C1.48-1.48s1.48.66%2C1.48%2C1.48v5.43c0%2C.82-.66%2C1.48-1.48%2C1.48Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E');
  --wf-page-edge-spacing: clamp(1rem, calc(0.5rem + 2vw), 6rem);
  /* Borderradie  - Gå igenom filerna*/
  --wf-radius: 10px;
  --wf-radius-large: 20px;
  --wf-radius-small: 4px;
  /*
    View width calculations:
    Ex. 20px / 1920 px x 100 = 1.04 vw
  */
  /* Avstånd - 2560 */
  --wf-spacing-10: clamp(0.5rem, 0.39vw, 1.0rem);
  --wf-spacing-100: clamp(5.0rem, 3.91vw, 10.0rem);
  --wf-spacing-120: clamp(6.0rem, 4.69vw, 12.0rem);
  --wf-spacing-160: clamp(8.0rem, 6.25vw, 16.0rem);
  --wf-spacing-180: clamp(9.0rem, 7.03vw, 18.0rem);
  --wf-spacing-20: clamp(1.0rem, 0.78vw, 2.0rem);
  --wf-spacing-30: clamp(1.5rem, 1.17vw, 3.0rem);
  --wf-spacing-40: clamp(2.0rem, 1.56vw, 4.0rem);
  --wf-spacing-60: clamp(3.0rem, 2.34vw, 6.0rem);
  --wf-spacing-80: clamp(4.0rem, 3.12vw, 8.0rem);
  --wf-tab-transform: scale(1.02) translateY(-0.04em);
  --wf-tab-transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


/* Ikoner - Pil med Brand color */
.sv-theme-smuab {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%232F628B%22/%3E%0A%3C/svg%3E');
}

.sv-theme-skeppsbron {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%23274A72%22/%3E%0A%3C/svg%3E');
}

.sv-theme-solasen-fridhem {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%234F3602%22/%3E%0A%3C/svg%3E');
}

.sv-theme-munksjostaden {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%234A4A4A%22/%3E%0A%3C/svg%3E');
}

.sv-theme-ostra-munksjon {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%233B5F3F%22/%3E%0A%3C/svg%3E');
}

.sv-theme-stationsomradet {
  --wf-icon-arrow-brand: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%2351334F%22/%3E%0A%3C/svg%3E');
}


/* Färger beroende på tema */
[class*='sv-theme-'] {
  --color-block: var(--env-block-background-color);
  --color-block-primary: var(--env-block-primary-background-color);
  --color-block-secondary: var(--env-block-secondary-background-color);
  --color-brand: var(--env-ui-color-brand);
  --color-brand-contrast: var(--env-ui-color-brand-contrast);
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, black 10%); /* Mörkare hover-färg för brand-färg där texten är vit */
  --color-brand-secondary: var(--env-element-secondary-background-color);
  --color-brand-secondary-contrast: var(--env-element-secondary-font-color);
  --color-text-decor: var(--env-link-font-color);
}

/* Färger beroende på tema - Undantag */
.sv-theme-solasen-fridhem,
.sv-theme-skeppsbron {
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, white 10%); /* Ljusare hover-färg för brand-färg där texten är #222 */
}


/* Bakgrundsfade per bolag/delområde */
.sv-theme-smuab {
  --color-brand-fade-base: #2f628b;
  --color-brand-fade-base-contrast: #fff;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(47, 98, 139, 0.9) 0%, rgba(47, 98, 139, 0) 100%);
  --color-brand-fade-overlay: rgba(47, 98, 139, 0.9);
}

.sv-theme-skeppsbron {
  --color-brand-fade-base: #274a72;
  --color-brand-fade-base-contrast: #fff;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(39, 74, 114, 0.9) 0%, rgba(39, 74, 114, 0) 100%);
  --color-brand-fade-overlay: rgba(39, 74, 114, 0.9);
}

.sv-theme-solasen-fridhem {
  --color-brand-fade-base: #db8926;
  --color-brand-fade-base-contrast: #000;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(219, 137, 38, 0.9) 0%, rgba(219, 137, 38, 0) 100%);
  --color-brand-fade-overlay: rgba(219, 137, 38, 0.9);
}

.sv-theme-munksjostaden {
  --color-brand-fade-base: #636363;
  --color-brand-fade-base-contrast: #fff;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(99, 99, 99, 0.9) 0%, rgba(99, 99, 99, 0) 100%);
  --color-brand-fade-overlay: rgba(99, 99, 99, 0.9);
}

.sv-theme-ostra-munksjon {
  --color-brand-fade-base: #4e7f54;
  --color-brand-fade-base-contrast: #fff;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(78, 127, 84, 0.9) 0%, rgba(78, 127, 84, 0) 100%);
  --color-brand-fade-overlay: rgba(78, 127, 84, 0.9);
}

.sv-theme-stationsomradet {
  --color-brand-fade-base: #51334f;
  --color-brand-fade-base-contrast: #fff;
  --color-brand-fade-gradient: linear-gradient(0deg, rgba(81, 51, 79, 0.9) 0%, rgba(81, 51, 79, 0) 100%);
  --color-brand-fade-overlay: rgba(81, 51, 79, 0.9);
}


/*
-------------------------------------------
Omskrivning Envision-variabler
------------------------------------------- */

.sv-theme-standard {
  --env-border-radius-medium: var(--wf-radius);
  --env-border-radius-small: var(--wf-radius-small);
  --env-font-size-medium: var(--wf-font-size-normal);
  --wf-radius-large: var(--wf-radius-large);
}