/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0
@author: Andreas Toresäter
@copyright: Yesbridge 2025

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');
*/

html {
  font-size: 16px; /* Ensure root size is 16px */
  max-width: 100%; /*3860px;*/
  background-color: #FFFFFF;
}

.wp-block-group,
.wp-block-paragraph,
.entry-content > * {
    margin: 0 !important;
    margin-block-end: 0 !important;
}
* {
    box-sizing: border-box;
}

:root {
    --maxwidth: 1400px;
    font-size: 16px;
    --fluid-menu-height: 70px; /*round(clamp(70px, 0.0388px + 5.3876vw, 208px), 1px);*/
    --fluid-menu-space: clamp(2rem, 0.0129rem + 4.1397vw, 10rem);
    --fluid-menu-space-1280: clamp(1rem, 0.0097rem + 2.4vw, 7.5rem);
    --fluid-menu-space-smaller: clamp(1.5rem, 0.0097rem + 3.1048vw, 7.5rem);
    --fluid-h1: 52px;
    --fluid-h2: 45px;
    --fluid-h3: 31px;
    --fluid-h3-shrink: clamp(1.5rem, -0.425rem + 3.1111vw, 1.9375rem);
    --fluid-h4: 25px;
    --fluid-h5: clamp(0.6667rem, -0.6057rem + 1.6417vw, 3.355rem);
    --fluid-p: 18.5px;
    --fluid-quote-size: clamp(0.65rem, -0.0005rem + 1.3551vw, 3.2688rem);

    --fluid-hero-padding-vertical: 65px; /*clamp(2.25rem, -0.001rem + 4.6895vw, 11.3125rem);*/
    --fluid-hero-padding-horizontal: 0px; /*clamp(4.125rem, 0.0112rem + 8.5705vw, 20.6875rem);*/
    --fluid-hero-padding-horizontal-mobile: clamp(1.5rem, 0.0112rem + 5vw, 15rem);
    --fluid-padding-x-large: clamp(4.25rem, -0.0005rem + 8.8551vw, 15rem);
    --fluid-padding-medium: clamp(2.65rem, 0.0001rem + 5.5207vw, 10rem);
    --fluid-padding-small: clamp(1.5rem, 0.0004rem + 3.1242vw, 7.5375rem);
    --fluid-padding-x-small: clamp(0.7rem, -0.0001rem + 1.4586vw, 3.5188rem);
    --fluid-padding-xx-small: clamp(0.5rem, 0.0001rem + 1.0414vw, 2.5125rem);
    --fluid-marquee-wrapper-height: 66px;/*clamp(2.5rem, 0.0162rem + 5.1746vw, 12.5rem);*/
    --fluid-marquee-height: 125px; /*clamp(4.6875rem, -0.0163rem + 9.7995vw, 23.625rem);*/
    --fluid-button-font-size: 19.3px;
    --fluid-smaller-button-font-size: 16.7px;
    --fluid-padding-smaller-button-vertical: clamp(0.3rem, 0rem + 0.625vw, 1.5078rem);
    --fluid-padding-button-vertical: clamp(0.525rem, 0.0003rem + 1.0931vw, 2.6375rem);
    --fluid-padding-smaller-button-horizontal: clamp(0.75rem, 0.0002rem + 1.5621vw, 3.7688rem);
    --fluid-padding-button-horizontal: clamp(2rem, 0.0005rem + 4.1656vw, 10.05rem);

    --fluid-menu-font-size: 16px;
    --fluid-menu-small-font: 11.3px;

    --fluid-menu-height-mobile: 50px;/*clamp(40px, 15.5319px + 5.3191vw, 70px);*/
    --fluid-narrow-padding-mobile: clamp(0.7688rem, -0.0005rem + 3.4187vw, 2.1875rem);
    --fluid-p-mobile: clamp(1.1rem, 0rem + 2.25vw, 1.75rem);
    --fluid-h1-mobile: clamp(1.4313rem, 0.0047rem + 6.3404vw, 4.0625rem);
    --fluid-h2-mobile: clamp(1.0563rem, 0.0024rem + 4.6837vw, 3rem);
    /*--fluid-h3-mobile: clamp(0.9663rem, -0.0008rem + 4.2982vw, 2.75rem);
    --fluid-h4-mobile: clamp(0.7031rem, 0rem + 3.125vw, 2rem); */
    --fluid-h3-mobile: clamp(1.40rem, -0.0008rem + 4.2982vw, 2.75rem);
    --fluid-h4-mobile: clamp(1.30rem, 0rem + 3.125vw, 2rem);
    /*--fluid-button-font-size-mobile: clamp(0.625rem, -0.0019rem + 2.7861vw, 1.7813rem);*/
    --fluid-button-font-size-mobile: clamp(1.1rem, -0.0019rem + 2.7861vw, 1.7813rem);
    --fluid-button-font-size-mobile-scroll-banner: clamp(0.9rem, -0.0019rem + 2.7861vw, 1.7813rem);
    --fluid-button-font-size-mobile-form: clamp(0.85rem, -0.0019rem + 2.7861vw, 1.7813rem);
    --fluid-footer-menu-font-size-mobile: clamp(10px, 2.2518px + 1.6844vw, 19.5px);
    --fluid-footer-info-font-size-mobile: clamp(10px, 4.2908px + 1.2411vw, 17px);
    --fluid-footer-button-font-size-mobile: clamp(11px, 1.844px + 1.773vw, 20px);
}

/* Base layout properties */
.base-layout {
    max-width: 100%;
    width: 100%;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.narrow-layout {
    max-width: 81.8vw;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 9.1vw !important;
    margin-right: 9.1vw !important;
}

.padding-xs{
    padding: var(--fluid-padding-x-small);
}
.padding-s{
    padding: var(--fluid-padding-small);
}
.padding-m{
    padding: var(--fluid-padding-medium);
}
.padding-m-vertical{
    padding: var(--fluid-padding-medium) 0px;
}

.no-gap {
    column-gap: 0;
    row-gap: 0;
}

.rounded-left {
    border-bottom-left-radius: 0.65vw;
    border-top-left-radius: 0.65vw;
}

.rounded-right {
    border-bottom-right-radius: 0.65vw;
    border-top-right-radius: 0.65vw;
}

.base-padding-vertical{
    padding-top: min(7vw, 150px);
    padding-bottom: min(7vw, 150px);
}

.pdp-padding{
    padding-top: min(7vw, 150px);
    padding-bottom: 2.0vw; /*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

.pdp-padding-alt{
    padding-top: min(7vw, 150px);
    padding-bottom: 4vw; /*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

.pdp-padding-bottom{
    padding-top: 0px;
    padding-bottom: 2.0vw;/*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

h1.pdp-padding-bottom{
    padding-top: 0px;
    padding-bottom: 3.0vw;/*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

/* we need this since it is pdp-padding-bottom + padding-bottom-xx-small */
.pdp-padding-bottom-alt{
    padding-top: 0px;
    padding-bottom: 3vw;/*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

.pdp-padding-header{
    padding-top: 0px;
    padding-bottom: 2.2vw; /*var(--fluid-padding-x-small);*/
    margin-bottom: 0px !important;
}

.small-padding-vertical{
    padding-top: 4vw;
    padding-bottom: 4vw;
}

.base-padding-horizontal{
    padding-left: 2vw;
    padding-right: 2vw;
}

.narrow-padding-horizontal{
    /*padding-left: 9.1vw;
    padding-right: 9.1vw;*/
    width:82%;
    max-width: var(--maxwidth);
    margin: 0 auto !important;
}

@media (max-width: 990px) {
    .narrow-padding-horizontal{
        padding-left: 3.4vw;
        padding-right: 3.4vw;
        width: 100%;
    }
    .base-padding-horizontal{
        padding-left: 3.4vw;
        padding-right: 3.4vw;
    }
    .base-padding-vertical{
        padding-top: var(--fluid-padding-medium);
        padding-bottom: var(--fluid-padding-medium);
    }
    .small-padding-vertical{
        padding-top: 5vw;
        padding-bottom: 5vw;
    }
}

@media (max-width: 480px) {
    .small-padding-vertical{
        padding-top: var(--fluid-padding-medium);
        padding-bottom: var(--fluid-padding-medium);
    }
}

.thin-padding-horizontal{
    width:82%;
    max-width: 750px;
    margin: 0 auto !important;

    /*padding-left: 25vw;
    padding-right: 25vw;*/
}

@media (max-width: 480px) {
    .thin-padding-horizontal{
        padding-left: 3.4vw;
        padding-right: 3.4vw;
        width: 100%;
    }
}

.padding-bottom-xx-small {
    padding-bottom: var(--fluid-padding-xx-small);
}

.padding-bottom-x-small {
    padding-bottom: var(--fluid-padding-x-small);
}

.padding-bottom-small {
    padding-bottom: var(--fluid-padding-small);
}

.padding-bottom-medium {
    padding-bottom: var(--fluid-padding-medium);
}

.padding-bottom-base {
    padding-bottom: 7vw;
}

.padding-top-xx-small {
    padding-top: var(--fluid-padding-xx-small);
}

.padding-top-x-small {
    padding-top: var(--fluid-padding-x-small);
}

.padding-top-small {
    padding-top: var(--fluid-padding-small);
}

.padding-top-medium {
    padding-top: var(--fluid-padding-medium);
}

.no-padding,
.no-padding a {
    padding: 0px !important;
}

.no-margin {
    margin: 0px !important;
}

@media (max-width: 990px) { 
    .no-gap-mobile {
        row-gap: 0px !important;
        column-gap: 0px !important;
    }
    .mobile-hide-block {
        display: none !important;
    }
}
.medium-column-gap {
    column-gap: var(--fluid-padding-medium);
}

.no-padding-bottom {
    padding-bottom: 0px !important;
}

.tight-line {
    line-height: 1.1;
}

.rounded-corners {
    border-radius: 0.5vw;
}

.match-parent-width {
    max-width: 100%;
}

/* HEADINGS & PARAGRAPHS */
.wp-block-heading {
    margin: 0px !important;
}

h1,
h1 a,
h1 a:hover {
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    font-size: var(--fluid-h1);
    padding-bottom: var(--fluid-padding-medium);
    line-height: 1.3;
}

h1.decorated-link a {
    font-weight: 800; /* ExtraBold is typically 800 */
}

h2 {
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    padding-bottom: 3vw;
    font-size: var(--fluid-h2);
    line-height: 1.3;
}

.h2-larger{
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    font-size: var(--fluid-h1);
    padding-bottom: var(--fluid-padding-medium);
    line-height: 1.3;
}

.button-below-image .h2-larger{
    padding-bottom: var(--fluid-padding-x-small);
}

.pdp-padding-bottom.h2-larger{
    padding-bottom: 3vw;
}

h3 {
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    font-size: var(--fluid-h3);
    padding-bottom: var(--fluid-padding-xx-small);
    line-height: 1.6;
}

@media (min-width: 990.1px) and (max-width: 1215px) {    
    h3.shrink-to-fit {
        font-size: var(--fluid-h3-shrink);
    }
}

h4 {
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    font-size: var(--fluid-h4);
    padding-bottom: var(--fluid-padding-xx-small);
    line-height: 1.6;
}

h5 {
    font-family: "Inter", sans-serif; /* Fallback to sans-serif */
    font-weight: 800; /* ExtraBold is typically 800 */
    font-size: var(--fluid-p);
    padding-bottom: var(--fluid-padding-xx-small);
    line-height: 1.6;
}

p {
    font-size: var(--fluid-p);
    font-family: "Inter";
    line-height: 1.6;
    padding-bottom: var(--fluid-padding-xx-small);
    color: #001523;
}

.landing-hero p,
.footer-upper p,
.cta-paragraphs-column p { 
    color: #fff;
}

@media (max-width: 990px) {
    h1 {
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: var(--fluid-h1-mobile);
        padding-bottom: var(--fluid-padding-medium);
        line-height: 1.3;
    }

    h2 {
        font-family: "Inter", sans-serif;
        font-weight: 800;
        padding-bottom: 3vw;
        font-size: var(--fluid-h2-mobile);
        line-height: 1.3;
    }

    .h2-larger{
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: var(--fluid-h1-mobile);
        padding-bottom: var(--fluid-padding-medium);
        line-height: 1.3;
    }

    h3 {
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: var(--fluid-h3-mobile);
        padding-bottom: var(--fluid-padding-xx-small);
        line-height: 1.6;
    }

    h4 {
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: var(--fluid-h4-mobile);
        padding-bottom: var(--fluid-padding-xx-small);
        line-height: 1.6;
    }

    h5 {
        font-family: "Inter", sans-serif; /* Fallback to sans-serif */
        font-weight: 800; /* ExtraBold is typically 800 */
        font-size: var(--fluid-p);
        padding-bottom: var(--fluid-padding-xx-small);
        line-height: 1.6;
    }

    p {
        font-size: var(--fluid-p-mobile);
        font-family: "Inter";
        line-height: 1.6;
        padding-bottom: var(--fluid-padding-xx-small);
    }

    .card a {
        font-size: var(--fluid-p-mobile);
        font-family: "Inter";
        line-height: 1.6;
    }
}

ul.wp-block-list{
    padding-left: 1.0em;
    padding-inline-start: 1.0em;
    list-style-position: outside;
    margin-bottom: 0px;
}

ul.wp-block-list.tighter-list,
ul.wp-block-list.tighter-list.styled-bullet {
    padding-bottom: var(--fluid-padding-xx-small);  
}

ul.wp-block-list.tighter-list li,
ul.wp-block-list.tighter-list.styled-bullet li {
    padding-bottom: 0px;
}

ul.wp-block-list li {
    font-size: var(--fluid-p);
    font-family: "Inter";
    line-height: 1.6;
    padding-bottom: var(--fluid-padding-xx-small);
    color: #001523;
}

ul.styled-bullet {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.wp-block-list.styled-bullet li,
ul.styled-bullet li {
    position: relative;
    padding-left: 2.2rem; /* space for bullet + gap */
    font-size: var(--fluid-p);
    font-family: "Inter";
    line-height: 1.6;
    padding-bottom: var(--fluid-padding-xx-small);
    color: #001523;
}

ul.styled-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;           /* tweak so it aligns vertically with text */
    width: 1.3rem;          /* using rem is usually nicer than vw */
    height: 1.3rem;
    background-image: url('/wp-content/themes/blocksy_child/images/checkmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

h3.styled-bullet::before {
    content: '';
    display: inline-block;
    width: 3vw;
    height: 3vw;
    margin-right: 1.5vw;
    vertical-align: middle;
    background-image: url('/wp-content/themes/blocksy_child/images/checkmark.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
}

ol li{
    font-size: var(--fluid-p);
}

@media (max-width: 990px) {
    ul.wp-block-list.styled-bullet li,
    ul.styled-bullet li,
    ul.wp-block-list li,
    ul.wp-block-list.tighter-list li,
    ul.wp-block-list.tighter-list.styled-bullet li {
        font-size: var(--fluid-p-mobile);
    }
    ul.styled-bullet li::before{
        left: 0;
        top: .15em;           /* tweak so it aligns vertically with text */
        width: 1.5rem;          /* using rem is usually nicer than vw */
        height: 1.5rem;
        margin-right: 2vw;
    }
    h3.styled-bullet::before {
        width: 5vw;
        height: 5vw;
        margin-right: 1.5vw;
    }
}

p.narrow-l {
    max-width: 70%;
}

.narrow {
    max-width: 60%;
}

.narrow-m {
    width:82%;
    max-width: 750px;
    margin: 0 auto !important;
}

p.narrow-m {

}
@media (min-width: 990.1px) {
    .oppna-banner{
        width: 710px;
        max-width: 710px;
    }
}

p.narrow-s {
    max-width: 50%;
}

.wp-block-columns.medium-gap {
    column-gap: 7vw;
}

p.bold {
    font-weight: 700;
}

.new-price s {
    text-decoration-color: #d3de50;
}

/* Hide the default search icon */
.ct-header-search .ct-icon {
    display: none;
}

.policy p {
    margin-bottom: 0;
}

/* Add custom background image to the search button */
button.ct-header-search {
    background-image: url('/wp-content/themes/blocksy_child/images/magnifying-glass.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 16px;/*1.2vw;*/
    height: 16px;/*1.2vw;*/
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1280px) {
    button.ct-header-search {
        width: 1.0rem;
        height: 1.0rem;
    }
}

@media (max-width: 990px) {
    button.ct-header-search {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* Following needs !important to render correctly in WP Editor */
.blue-bg{
    background-color: #2e3b85;
    color: #FFFFFF !important;
    text-decoration-color: #FFFFFF !important;
}

.blue-bg h1, .blue-bg h2, .blue-bg h3, .blue-bg h4, .blue-bg h5, .blue-bg p{
    color: #FFFFFF !important;
    text-decoration-color: #FFFFFF !important;
}

.pale-blue-bg{
    background-color: #add0ee;
}

/* Do not display title of page as headline */
.entry-header {
    display: none;
}

.hero-section {
    display: none;
    background-color: #FFFFFF;
    max-width: 98vw;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    margin-left: 1vw !important;
    margin-right: 1vw !important;
}

.ct-container-full {
    padding: 0px;
    background-color: #FFFFFF;
}

.ct-container {
    max-width: 98vw;
}

/* STICKY TOP MENU */
#header [data-device="desktop"] .ct-container {
    grid-template-columns: 18% 1fr;
}

#header [data-device="desktop"] [data-column="end"] [data-items="primary"] nav#header-menu-1 {
    margin-right: auto !important;
}

/* LOGO */
.site-branding {
  max-width: 100%;
  overflow: visible; /* Remove clipping */
  padding-left: 1vw !important;
  display: flex;
  align-items: center;
}

/* Let the header height control the container (no !important here) */
.site-logo-container {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 100%;
  line-height: 0; /* kills baseline extra space */
}

/* In Blocksy the logo is usually wrapped in an <a> */
.site-logo-container a {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 0;
}

/* Responsive logo */
.site-branding img.default-logo {
  width: 13vw;
  max-width: 100%;
  height: auto;
  max-height: 50px;
  display: block;
  object-fit: contain;
}

/* Override the constraining flex-basis on the parent span */
.ct-toggle-dropdown-desktop {
  --yb-toggle-size: 20px;

  flex: 0 0 var(--yb-toggle-size) !important;
  width: var(--yb-toggle-size) !important;
  height: var(--yb-toggle-size) !important;
  min-width: var(--yb-toggle-size) !important;
  min-height: var(--yb-toggle-size) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.3vw !important;
}

/* Keep the SVG from having inline/baseline quirks */
.ct-toggle-dropdown-desktop svg.ct-icon {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Ensure SVG fills the parent responsively */
.ct-toggle-dropdown-desktop .ct-icon {
  width: 100% !important;
  height: 100% !important;
}

/* Path styles (no changes needed here based on your attempt) */
.ct-toggle-dropdown-desktop .ct-icon path {
  fill: #d3de50 !important;
  stroke: #d3de50 !important; /* If you want an outline; otherwise set to none */
  stroke-width: 1 !important; /* Fixed value; no need for vw as the SVG scales proportionally via viewBox */
}


/* Reset default menu item spacing */
.menu-item {
    margin: 0 !important; /* Remove theme margins */
    padding: 0 !important; /* Remove theme paddings */
}

/* Apply custom spacing using the variable */
#menu-top-sticky {
    display: flex; /* Ensure flexbox for consistent spacing */
    gap: var(--fluid-menu-space); /* Use the custom variable for spacing */
}

@media (max-width: 1280px) {
    #menu-top-sticky {
        gap: var(--fluid-menu-space-1280); /* Slightly smaller spacing on smaller screens */
    }
}

#header.ct-header {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%; /* max-width: var(--maxwidth); */
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px;
    margin-right: 0px;
    z-index: 1000;
    height: var(--fluid-menu-height);
    background-color: #fff;
}

#header [data-device="desktop"] div {
    height: var(--fluid-menu-height);
}

.header-menu-1 {
    height: var(--fluid-menu-height);
    margin-left: 0px !important;
}

/* Make sure to pad the content same amount as Sticky top menu */
#main { 
    margin-top: var(--fluid-menu-height) !important;
}

/* Menu custom HTML (Login, Kontakt button) */
.top-menu {
    display: flex;
    flex-direction: row;
    align-items: center; /* Ensure children stretch to full height */
    gap: var(--fluid-menu-space-smaller);
    padding-right: calc(0.4*var(--fluid-menu-space-smaller));
    height: var(--fluid-menu-height);
}

.ct-toggle-dropdown-desktop svg {
    transition: transform 0.3s ease;
}

.ct-menu-link[aria-expanded="true"] .ct-toggle-dropdown-desktop svg {
    transform: rotate(180deg) scale(0.75) !important;
    transform-origin: 50% 50% !important;
}

.ct-header-search{
    margin-right: var(--fluid-menu-space-smaller) !important;
}
@media (max-width: 1280px) {
    .ct-header-search{
        margin-right: var(--fluid-menu-space-1280) !important;
    }
}

.ct-menu-link {
    padding: 0px !important;
    font-weight: 700 !important;
    font-size: var(--fluid-menu-font-size) !important;
    text-decoration: none !important;
    position: relative;
    color: #2a3c89 !important;
}
.ct-menu-link:hover {
    text-decoration: none !important;
    color: #2a3c89 !important;
}
.menu-item .ct-menu-link:hover {
    color: #2a3c89 !important;
}
.menu-item {
    color: #2a3c89 !important;
}



/* Ensure .menu-text is the containing block and sized to its content */
.menu-text {
    position: relative;
    display: inline-block; /* Ensures width matches the text only */
    transform: translateZ(0);
    will-change: transform;
}

/* Base styles for the green underline */
.menu-text::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%; /* 100% of .menu-text width, not .ct-menu-link */
    height: 4px; /*round(0.25vw, 1px);*/
    background-color: #d3de50;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.sub-menu .menu-text::after,
.footer-links .menu-text::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%; /* 100% of .menu-text width, not .ct-menu-link */
    height: 2px;/*round(0.15vw, 1px);*/
    background-color: #d3de50;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

/* Position for main menu items */
#menu-top-sticky > .menu-item .menu-text::after {
  bottom: round(-0.4vw, 1px);
}

/* Position for sub-menu items */
#menu-top-sticky .sub-menu .menu-item .menu-text::after {
  bottom: 0px; /* Close to the text; adjust if needed */
}

/* Show underline on main menu item when its .menu-item or sub-menu is hovered */
#menu-top-sticky > .menu-item:hover > .ct-menu-link .menu-text::after {
  opacity: 1;
}

/* Show underline on sub-menu item only when its specific .ct-menu-link is hovered */
#menu-top-sticky .sub-menu .menu-item .ct-menu-link:hover .menu-text::after {
  opacity: 1;
}

#custom-footer .footer-links .menu-text::after {
  bottom: round(-0.4vw, 1px);
}

#custom-footer .footer-form .menu-text::after {
  bottom: 0px;
}

#custom-footer a:hover .menu-text::after {
  opacity: 1;
}

.nyhetsbrev-form a:hover .menu-text::after {
  opacity: 1;
}
.nyhetsbrev-form .menu-text::after {
  bottom: 0px;
}

.kontakt-checkbox-label a:hover .menu-text::after {
  opacity: 1;
}
.kontakt-checkbox-label .menu-text::after {
  bottom: 0px;
}

.popup-right a:hover .menu-text::after {
  opacity: 1;
}
.popup-right .menu-text::after {
  bottom: 0px;
}

.sub-menu .menu-item {
  padding: 0.75vw 2vw !important; /* Top/bottom 10px, left/right 15px; adjust as needed */
}

/* Prevent text wrapping in sub-menu items */
.sub-menu .menu-item .ct-menu-link {
  white-space: nowrap; /* Keeps text on a single line */
}

.sub-menu {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  padding-bottom: 10px !important; /* Optional: adds space inside the bottom edge */
  min-width: fit-content; /* Adjusts to the widest content */
  width: auto !important; /* Allows natural width based on content */
  left: -2vw !important; /* Shifts sub-menu 1vw to the left */
  
}

.ct-header-text {
    margin: 0px !important;
}

/* Style the link to match native menu items */
.top-menu .decorated-link {
    display: flex;
    align-items: center; /* Center text vertically */
}

.top-menu .decorated-link a {
    /* font-weight: 300; */
    font-size: var(--fluid-menu-font-size);
    display: flex;
    align-items: center;
    height:fit-content; /* Fill menu bar height */
}

.top-menu .yesbridge-button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.65;
}

.top-menu .yesbridge-button:hover,
.sticky-banner .yesbridge-button:hover {
    transform: scale(0.95);
    background-color: #f15823;
}

h1.wp-block-heading.decorated-link a::before {
    height: round(0.35vw, 1px);
}
h1.wp-block-heading.decorated-link a::after {
    height: round(0.35vw, 1px);
}

/* DEFAULT HERO */
.hero h1,
.hero .h2-larger {
    padding-bottom: var(--fluid-padding-xx-small);
}

/* HERO LANDING PAGE */
.landing-hero {
    /*padding: var(--fluid-hero-padding-vertical) var(--fluid-hero-padding-horizontal);*/
    padding-top: min(7vw, 150px);
    padding-bottom: min(7vw, 150px);
    padding-left: 0px;
    padding-right: 0px;
    background-position: center;
    color: #fff;
    max-width: 100%;
    
}

.landing-hero .wp-block-columns {
    width: 82%;
    max-width: var(--maxwidth);
    margin: 0 auto !important;
}

@media (max-width: 990px) {
    .landing-hero,
    .landing-hero .wp-block-columns{
        width: 100%;
    }
}
.landing-hero .wp-block-columns {
    column-gap: 0;
}

.landing-hero p {
    /*margin-block-end: 0;*/
}

.landing-hero h1 {
    color: #fff;
    padding-bottom: var(--fluid-padding-xx-small);
}

.landing-hero-bottom {
    background-color: #2e3b85;
    color: #fff;
    font-size: var(--fluid-h2);
    line-height: 1.4;
    font-weight: 800;
    padding: 7vw;
    max-width: 100% !important;
    width: 100%;
}

.wp-block-heading.has-text-align-center {
    max-width: 100%;
    width: 100%;
}

.wp-block-column p{
    margin-bottom: 0px;
}

.text-emphasize {
    color: #2e3b85;
    font-family: "Gelasio";
    font-weight: 300;
    font-style: italic;
    background-color:  #d3de50;
    border: #d3de50;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 8px;
    padding-bottom: 2px;
}

@media (max-width: 990px) {
    .landing-hero {
        background-size: cover;
        height: auto;
        padding: var(--fluid-hero-padding-vertical) var(--fluid-hero-padding-horizontal-mobile);
    }
    .landing-hero h1{
        font-size: var(--fluid-h1-mobile);
    }
    .landing-hero .wp-block-columns .wp-block-column:first-child {
        flex-basis: 100% !important;
    }
    .landing-hero .wp-block-columns .wp-block-column:last-child {
        flex-basis: 0% !important;
        flex-grow: 0;
        max-width: 0;
    }
    .landing-hero-bottom{
        padding-left: 3.4vw;
        padding-right: 3.4vw;
        padding-top: var(--fluid-padding-medium);
        padding-bottom: var(--fluid-padding-medium);
        font-size: var(--fluid-h3-mobile);
        line-height: 1.6;
    }
}

@media (max-width: 990px) {
    .landing-hero-bottom{
        padding-left: 3.4vw;
        padding-right: 3.4vw;
        padding-top: var(--fluid-padding-medium);
        padding-bottom: var(--fluid-padding-medium);
        font-size: var(--fluid-h4-mobile);
        line-height: 1.6;
    }
    .text-emphasize {
        padding-right: 2px;
        padding-left: 2px;
    }
}

/* Button with Orange Border */
.button-inline-orange-border {
    line-height: 120%;
    background-color: transparent; /* Transparent background */
    border: 5px solid #f15823; /* Orange border */
    border-radius: 8px;
    padding: 2px 5px;
    cursor: pointer;
    display: inline-flex; /* Ensure proper alignment with the link */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    color: inherit;
    font-size: inherit;
}

@media (max-width: 990px) {
    .button-inline-orange-border {
        line-height: 100%;
        border: 3px solid #f15823;
    }
}

/* Hover Effect */
.button-inline-orange-border:hover {
    background-color: #f15823; /* Turn orange on hover */
    border-color: #f15823; /* Keep border consistent */
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

/* Ensure the button remains clickable */
.button-inline-orange-border a,
.blue-bg .button-inline-orange-border a {
    color: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    text-decoration: none;
}
.button-inline-orange-border a:hover,
.blue-bg .button-inline-orange-border a:hover {
    color: #ffffff;
    text-decoration: none;
    font-size: inherit;
}

/* CONTENT ELEMENTS */
/* LINKS WITH CUSTOM HOVER */
.decorated-link {
    transform: translateZ(0);
    will-change: transform;
}

.decorated-link a {
    font-weight: 700;
    position: relative;
    text-decoration: none !important; /* Remove default underline */
    color: #2a3c89; /* Constant dark blue text color */
    display: inline-block; /* Ensure proper positioning with ::after */
    transform: translateZ(0);
    will-change: transform;
}

.decorated-link a:hover {
    text-decoration: none !important; /* Remove default underline */
    color: #2a3c89; /* Constant dark blue text color */
}

/* Green base underline */
.decorated-link a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: round(-0.4vw, 1px);
    width: 100%; /* Full width of the link */
    height: round(0.25vw, 1px);
    background-color: #d3de50; /* Solid green */
    z-index: 1; /* Base layer */
    transform: translateZ(0);
    will-change: transform;
}

/* Orange overlay line (initially zero width) */
.decorated-link a::before {
    content: '';
    position: absolute;
    left: 0; /* Start from the left */
    bottom: round(-0.4vw, 1px);
    width: 0; /* Initial zero width */
    height: round(0.25vw, 1px); /* Same thickness as green line */
    background-color: #f15823; /* Solid orange */
    transition: width 0.5s ease; /* Smooth width change */
    z-index: 2; /* Overlay layer */
    transform: translateZ(0);
    will-change: transform;
}

@media (max-width: 990px) {
    .decorated-link a::before,
    .decorated-link a::after {
        height: 3px; /* Same thickness as green line */
    }
}

/* Hover effect: Orange line grows from left to right */
.decorated-link a:hover::before {
    width: 100%; /* Grow to full width */
}

/* FULL WIDTH DECORATED HEADINGS LINKS */
.wp-block-heading.full-width-decorated-link a {
    font-weight: 800;
    position: relative;
    text-decoration: none !important; /* Remove default underline */
    color: inherit; /* Constant dark blue text color */
    display: block; /* Ensure full width of the parent container */
}

.wp-block-heading.full-width-decorated-link{
    padding-bottom: 4vw;
}

/* Green base underline */
.wp-block-heading.full-width-decorated-link a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: round(-1.25vw, 1px);
    width: 100%; /* Full width of the link */
    height: round(0.35vw, 1px);
    background-color: #d3de50; /* Solid green */
    z-index: 1; /* Base layer */
}

/* Orange overlay line (initially zero width) */
.wp-block-heading.full-width-decorated-link a::before {
    content: '';
    position: absolute;
    left: 0; /* Start from the left */
    bottom: round(-1.25vw, 1px);
    width: 0; /* Initial zero width */
    height: round(0.35vw, 1px);
    background-color: #f15823; /* Solid orange */
    transition: width 0.5s ease; /* Smooth width change */
    z-index: 2; /* Overlay layer */
}

/* Hover effect: Orange line grows from left to right */
.wp-block-heading.full-width-decorated-link a:hover::before {
    width: 100%; /* Grow to full width */
}

/* HEADINGS WITH CUSTOM UNDERLINE */
.decorated-header {
    font-weight: 800;
    position: relative;
    text-decoration: none !important; /* Remove default underline */
    color: inherit; /* Constant dark blue text color */
    display: inline-block; /* Ensure proper positioning with ::after */
}

/* Green base underline */
.decorated-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px; /* Gap between text and underline; adjust to match screenshot (5-15px) */
    width: 100%; /* Full width of the link */
    height: 3px; /* Thickness of the underline */
    background-color: #d3de50; /* Solid green */
    z-index: 1; /* Base layer */
}

.decorated-header.tight-line::after {
    bottom: -5px;
}

/* BUTTONS */
/* Yesbridge Button Styles */
.yesbridge-button {
    display: inline-block;
    padding: var(--fluid-padding-button-vertical, 14px) var(--fluid-padding-button-horizontal, 24px);
    font-size: var(--fluid-button-font-size);
    font-weight: 700;
    background-color: #f15823;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 0; /* Prevent margin-based centering */
}

/* Ensure the <a> tag wraps tightly around the button */
.yesbridge-button-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margins */
    display: inline-block !important;
    width: auto !important;
    text-decoration: none !important;
}
.yesbridge-button-link:hover {
    text-decoration: none !important; /* Remove underline */
    color: inherit !important; /* Inherit text color */
}

.yesbridge-button:hover {
    transform: scale(1.05); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
}

/* Mobile: Full width */
@media (max-width: 990px) {
    .yesbridge-button {
        padding: calc(1.5*var(--fluid-padding-button-vertical)) var(--fluid-padding-button-horizontal, 24px);
        display: block;
        width: 100%;
        font-size: var(--fluid-button-font-size-mobile)
    }
    .yesbridge-button-link {
        width: 100% !important;
    }
    .yesbridge-button:hover {
        transform: scale(1.0); /* Increases size to 105% of original */
        background-color: #f15823; /* Slightly darker orange on hover */
    }
}

/* additional style for smaller buttons 19pt font, smaller horizontal padding */
.smaller-button {
    font-size: var(--fluid-smaller-button-font-size);
    padding-left: 2.0vw;
    padding-right: 2.0vw;
    padding-top: var(--fluid-padding-smaller-button-vertical);
    padding-bottom: var(--fluid-padding-smaller-button-vertical);
}

@media (max-width: 480px) {
    .smaller-button {
        font-size: var(--fluid-smaller-button-font-size-mobile);
    }
    .date-header{
        font-size: 1.5rem;
    }
    .date-header.decorated-header{
        position: relative;
    }

    .date-header.decorated-header::after{
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        width: 30%;
        height: 3px;
    }
}

/* Ensure the parent block container aligns left */
.wp-block-yesbridge-custom-button {
    text-align: left !important; /* Force left alignment */
    display: block !important; /* Prevent centering from parent */
}

/* Ensure the parent block container aligns left */
.wp-block-yesbridge-custom-button {
    text-align: left !important; /* Force left alignment */
    display: block !important; /* Prevent centering from parent */
}

/* Ensure the parent block container doesn't center the button */
.wp-block-yesbridge-custom-button {
    text-align: left; /* Left-align the button within its block */
    display: block; /* Override any flex centering from parent */
}

.button-orange .wp-block-button__link {
    background-color:#f15823;
    color: white;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 6px;
}

/* For default WP button style with this */
.wp-block-button.orange-button .wp-block-button__link {
    background-color: #f15823; /* Base orange color */
    color: white;
    padding: 1vw 2vw; /* Slightly larger padding for a bigger button */
    border-radius: 0.5vw;
    text-decoration: none;
    font-size: var(--fluid-button-font-size); /* Slightly larger text for consistency */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}
.wp-block-button.orange-button .wp-block-button__link:hover {
    transform: scale(1.05); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
    color: white !important;
}

.wp-block-button.button-orange-hero .wp-block-button__link {
    background-color: #f15823; /* Base orange color */
    color: white;
    padding: 1vw 1.75vw; /* Slightly larger padding for a bigger button */
    border-radius: 0.5vw;
    text-decoration: none;
    font-size: var(--fluid-button-font-size); /* Slightly larger text for consistency */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

/* If button should shrink on hover, seminarium banners */
.wp-block-button.orange-button.hover-shrink .wp-block-button__link:hover {
    transform: scale(0.95, 0.95);
}

@media (max-width: 990px) {
    .button-orange-hero{
        
        display: block;
        width: 100%;
        font-size: var(--fluid-button-font-size-mobile)
    }
    .wp-block-button__link .wp-element-button {
        width: 100% !important;
    }
    .wp-block-button.orange-button .wp-block-button__link:hover {
        transform: scale(1.0); /* Increases size to 105% of original */
    }
    .wp-block-button.orange-button.hover-shrink .wp-block-button__link:hover {
        transform: scale(1.0);
    }
    .wp-block-button.button-orange-hero .wp-block-button__link {
        padding: calc(1.5*var(--fluid-padding-button-vertical)) var(--fluid-padding-button-horizontal, 24px);
        font-size: var(--fluid-button-font-size-mobile);
        width: 100% !important;
        border-radius: 1vw;
    }
    .wp-block-button.orange-button .wp-block-button__link {
        padding: calc(2*var(--fluid-padding-button-vertical)) var(--fluid-padding-button-horizontal, 24px);
        font-size: var(--fluid-button-font-size-mobile);
        width: 100% !important;
        border-radius: 1vw;
    }
    .wp-block-button.orange-button{
        width: 100% !important; /* buttons expand to full width on mobile */
    }
    .wp-block-button.orange-button.no-expand-mobile{
        width: fit-content !important; /* exception for mobile, do not expand */
    }
}

.wp-block-button.button-orange-hero .wp-block-button__link:hover {
    transform: scale(1.05); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
}

.wp-block-button.button-orange-sticky .wp-block-button__link {
    background-color: #f15823; /* Base orange color */
    color: white;
    padding: 12px 24px; /* Slightly larger padding for a bigger button */
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px; /* Slightly larger text for consistency */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.wp-block-button.button-orange-sticky .wp-block-button__link:hover {
    transform: scale(1.05); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
}

/* IMAGE OVERLAP LAYOUT */
@media (max-width: 990px) {
    .wp-block-custom-overlapping-images {
        padding-bottom: 67% !important; /* Fixed 2:1 aspect ratio */
    }

    .overlap-img-1 {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0.65vw !important; /* Force rounded corners on the wrapper for cropping */
    }

    .overlap-img-1 img {
        border-radius: 0.65vw !important; /* Remove radius from image to ensure wrapper handles clipping */
    }

    .overlap-img-2,
    .overlap-img-3 {
        display: none !important;
    }
}

/* Overlapping Images Animation */
.wp-block-custom-overlapping-images {
    overflow : visible !important; /* Ensure images can move outside the container */
}
.wp-block-custom-overlapping-images.animate-overlap {
    opacity: 1; /* Optional: Fade in the whole block */
    transition: opacity 0.5s ease; /* For fade-in */
}

.wp-block-custom-overlapping-images.animate-overlap.animated {
    opacity: 1;
}

.wp-block-custom-overlapping-images.animate-overlap .overlap-img-1,
.wp-block-custom-overlapping-images.animate-overlap .overlap-img-2,
.wp-block-custom-overlapping-images.animate-overlap .overlap-img-3 {
    transition: transform 0.5s ease; /* Ease movement; adjust duration/easing */
}

.wp-block-custom-overlapping-images.animate-overlap .overlap-img-1 {
    transform: translate(-1vw, -1vw); /* Initial top-left offset */
    transition-delay: 0.0s; /* No delay for first image */
}

.wp-block-custom-overlapping-images.animate-overlap .overlap-img-2 {
    transform: translate(1vw, 1vw); /* Initial bottom-right offset */
    transition-delay: 0.0s; /* Stagger delay for second image */
}

.wp-block-custom-overlapping-images.animate-overlap .overlap-img-3 {
    transform: translate(1vw, -1vw); /* Initial top-right offset (example for diagonal spread) */
    transition-delay: 0.0s; /* Stagger delay for third image */
}

.wp-block-custom-overlapping-images.animate-overlap.animated .overlap-img-1,
.wp-block-custom-overlapping-images.animate-overlap.animated .overlap-img-2,
.wp-block-custom-overlapping-images.animate-overlap.animated .overlap-img-3 {
    transform: translate(0, 0); /* Move to original positions */
}

/* Disable animation on mobile */
@media (max-width: 990px) {
    .wp-block-custom-overlapping-images.animate-overlap .overlap-img-1,
    .wp-block-custom-overlapping-images.animate-overlap .overlap-img-2,
    .wp-block-custom-overlapping-images.animate-overlap .overlap-img-3 {
        transform: translate(0, 0) !important; /* No offset */
        transition: none !important; /* No animation */
    }

    .wp-block-custom-overlapping-images.animate-overlap {
        opacity: 1 !important; /* Always visible */
        transition: none !important;
    }
}

/* Desktop: Ensure table layout */
.table-container .wp-block-group {
    display: block;
}
.table-container .wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
}
.table-container .wp-block-column {
    flex: 1;
}

/* Rounded corners and hover effect for all images */
.wp-block-image img {
    border-radius: 0.65vw;
    display: block;
}

/* Fix table images alignment and prevent cropping */
.table-container > .wp-block-group:nth-child(1) .wp-block-column {
    padding: 10px 0 0 0 !important; /* Override inline padding-top: 0 on col-1 */
}
.table-container > .wp-block-group:nth-child(1) .wp-block-image {
    margin: 0;
    width: 100%;
}

/* Mobile: Column-wise stacking */
@media (max-width: 767px) {
    .table-container {
        display: flex;
        flex-direction: column;
    }
    .table-container > .wp-block-group {
        display: contents;
    }
    .table-container > .wp-block-group > .wp-block-columns {
        display: contents;
    }
    .table-container .wp-block-column {
        width: 100%;
        margin-bottom: 10px;
        padding: 0 !important; /* Reset padding on mobile */
    }
    /* Order for col-1 */
    .table-container > .wp-block-group:nth-child(1) .col-1 { order: 1; }
    .table-container > .wp-block-group:nth-child(2) .col-1 { order: 2; }
    .table-container > .wp-block-group:nth-child(3) .col-1 { order: 3; }
    .table-container > .wp-block-group:nth-child(4) .col-1 { order: 4; }
    /* Order for col-2 */
    .table-container > .wp-block-group:nth-child(1) .col-2 { order: 5; }
    .table-container > .wp-block-group:nth-child(2) .col-2 { order: 6; }
    .table-container > .wp-block-group:nth-child(3) .col-2 { order: 7; }
    .table-container > .wp-block-group:nth-child(4) .col-2 { order: 8; }
    /* Order for col-3 */
    .table-container > .wp-block-group:nth-child(1) .col-3 { order: 9; }
    .table-container > .wp-block-group:nth-child(2) .col-3 { order: 10; }
    .table-container > .wp-block-group:nth-child(3) .col-3 { order: 11; }
    .table-container > .wp-block-group:nth-child(4) .col-3 { order: 12; }
}

/* SCROLLING BANNER */
.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  background-color: #2e3b85;
  box-sizing: border-box;
  max-width: 100%;
  height: var(--fluid-marquee-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* optional containment to reduce reflow side effects */
  contain: layout paint;
}

/* Pause by default, start when JS marks it ready */
.marquee .marquee__wrapper { animation-play-state: paused; }
.marquee.is-ready .marquee__wrapper { animation-play-state: running; }

.marquee__wrapper {
  display: inline-flex;
  white-space: nowrap;
  min-width: max-content;
  will-change: transform;
  animation: scroll var(--scroll-duration, 30s) linear infinite;
}

.marquee__item {
  flex: 0 0 auto;
  height: var(--fluid-marquee-wrapper-height);
  width: auto;
  margin-right: 100px; /* keep this for seamless -50% */
  display: block;
}

@keyframes scroll {
  to { transform: translate3d(-50%, 0, 0); }
}


/* Pause animation for accessibility */
@media (prefers-reduced-motion: reduce) {
  .marquee__wrapper {
    animation: none !important;
    transform: none !important;
  }
}

/* STICKY BANNER */
.sticky-banner {
    position: fixed !important;
    bottom: 1vw !important;
    right: 1vw !important;
    left: auto !important;
    background-color: #2e3b85c9; /* Blue background */
    color: #ffffff;
    padding: 1vw 1.5vw;
    border-radius: 0.5vw; /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2000;
    width: auto;
    white-space: nowrap; /* Prevent text wrapping */
}

.sticky-banner.visible {
    opacity: 1;
    visibility: visible;
}

.banner-text {
    font-size: var(--fluid-p);
    font-weight: 400;
    white-space: nowrap;
}

@media (max-width: 990px) {
    .sticky-banner {
        bottom: 10px !important;
        right: 10px !important;
        padding: 10px 15px;
        max-width: auto;
        font-size: 14px;
    }
    .wp-block-button__link.wp-element-button {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .sticky-banner {
        padding: 10px 10px;
        max-width: 98%;
        width: 98%;
        min-width: 98%;
        align-self: center;
        right: 1% !important;
    }
    .wp-block-button__link.wp-element-button {
        padding: 6px 12px;
        font-size: 12px;
    }
    .banner-text {
        font-size: var(--fluid-button-font-size-mobile-scroll-banner);
    }
}

.wp-block-button.button-orange {
    margin: 0;
    white-space: nowrap;
}

.wp-block-button__link.wp-element-button {
    background-color: #ff6200; /* Orange button */
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.wp-block-button__link.wp-element-button:hover {
    background-color: #e55a00; /* Darker orange */
}

/* Override Blocksy theme constraints */
.ct-container, .entry-content, .ct-inner-content {
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Editor-specific styles */
.block-editor .wp-block[data-type="custom/sticky-banner-block"] {
    background-color: #f0f0f0; /* Light gray background */
    border: 2px dashed #ccc; /* Dashed border */
    padding: 10px;
    margin: 10px 0;
    display: block;
    position: relative !important; /* Prevent fixed positioning in editor */
    max-width: 600px;
    opacity: 1 !important; /* Always visible in editor */
    visibility: visible !important;
}

.block-editor .wp-block[data-type="custom/sticky-banner-block"]::before {
    content: 'Sticky Banner Placeholder';
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* CTA BANNER */
.cta-banner {
    position: absolute !important;
    top: calc(12vw + var(--fluid-menu-height)) !important;
    right: 3.5vw !important;
    left: auto !important;
    background-color: #f15623c9;
    color: #ffffff;
    padding: 2vw;
    border-radius: 0.75vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 37.9vw;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

.cta-heading {
    padding-bottom: 1vw;
    font-size: var(--fluid-h3);
    font-weight: 800;
    margin: 0;
    text-align: center;
    color: #ffffff;
    display: block; /* Ensure block for flex context */
}

.cta-heading span {
    display: inline-block; /* Shrink to text width */
    position: relative; /* Make span the positioning context */
}

.cta-heading span::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%; /* Matches span’s text width */
    height: 4px;
    background-color: #d3de50;
}

.cta-paragraphs-column {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Adjust spacing between paragraphs as needed */
    padding-left: var(--fluid-padding-small);
    padding-right: var(--fluid-padding-small);
}

.cta-paragraph {
    margin: 0;
    padding-bottom: 0vw;
    text-align: center;
    font-size: var(--fluid-h4);
    font-weight: 700;
    /* Add any additional styling for individual paragraphs */
}

.cta-form {
    padding-top: 1vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75vw;
}

.cta-form-column {
    display: flex;
    flex-direction: column;
    gap: 0.7vw;
}

.cta-form-row {
    height: 2.5vw; /* Decides input fields height */
    display: flex;
    flex-direction: column;
}

.cta-banner .cta-custom-input {
    padding: 0 16px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: var(--fluid-menu-font-size);
    width: 100% !important;
    height: 100%;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    color: #2a3c89 !important;
}

.cta-button-column {
    display: flex;
    align-items: flex-end;
}

.cta-custom-button {
    background-color: #add0ee;
    color: #2a3c89;
    padding: 0 1.6vw; /* Increased padding to widen button */
    border: none;
    border-radius: 5px;
    font-size: 1.5vw;
    font-weight: 700;
    cursor: pointer;
    width: 100%; /* Allow button to expand with padding */
    min-width: fit-content; /* Ensure content fits */
    white-space: nowrap; /* Prevent text wrapping */
    height: 5.6vw;
    transition: all 0.3s ease;
}

.cta-custom-button:hover {
    background-color: #add0ee;
    color: #2a3c89;
    transform: scale(0.95, 0.95);
}

.cta-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    margin-top: var(--fluid-padding-xx-small);
}

.cta-checkbox {
    width: 1.5vw;
    height: 1.5vw;
    border: none;
    border-radius: 0.325vw;
}

.cta-checkbox-row label {
    font-size: 0.85vw;
}

@media (max-width: 990px) {
    .cta-banner {
        background-color: #f15623;
        position:unset!important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        max-width: 98vw;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 1vw !important;
        margin-right: 1vw !important;
        border-radius: 0;
        width: 100%;
    }
    .cta-heading {
        font-size: var(--fluid-h2-mobile);
    }
    .cta-heading span {
        display: inline-block;
        position: relative;
    }
    .cta-heading span::after {
        width: 100%;
    }
    .cta-paragraph {
        line-height: 1.65;
        font-size: var(--fluid-button-font-size-mobile);
    }
    .cta-paragraphs-column {
        margin-bottom: 3vw;
    }
    .cta-form {
        gap: 3vw;
    }
    .cta-custom-button {
        padding: calc(2*var(--fluid-padding-button-vertical)) var(--fluid-padding-button-horizontal, 24px);
        font-size: var(--fluid-button-font-size-mobile);
        height: 14vw; /* Match input height */
        border-radius: 0.75vw;
    }
    .cta-form-column {
        gap: 2vw;
    }
    .cta-form-row{
        height: auto;
    }
    .cta-banner .cta-custom-input 
    {
        padding: 0.5vw 2vw;
        border-radius: 0.75vw;
        font-size: 1rem;
        width: 100%;
        height: 6vw;
    }
    .cta-checkbox-row label {
        font-size: 0.9rem;
        grid-column: span 2;
    }
    .cta-checkbox-row input[type="checkbox"] {
        border-radius: 0.5vw;
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.5vw; /* Space between checkbox and label text */
    }
}

/* Editor-specific styles for CTA Banner */
.block-editor .wp-block[data-type="custom/cta-banner-block"] {
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    padding: 15px;
    margin: 10px 0;
    display: block;
    position: relative !important;
    max-width: 500px;
    opacity: 1 !important;
    visibility: visible !important;
}

.block-editor .wp-block[data-type="custom/cta-banner-block"]::before {
    content: 'CTA Banner Placeholder';
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Indicate hidden state in editor */
.block-editor .wp-block[data-type="custom/cta-banner-block"][style*="opacity: 0.5"]::before {
    content: 'CTA Banner Placeholder (Hidden on Frontend)';
    color: #ff0000; /* Red to highlight hidden state */
}

/* Card Styling */
.card {
    background-color: inherit;
    padding: 0; /*-right: var(--fluid-padding-xx-small);*/
    border-radius: 6px;
    text-align: left;
    height: 100%; /* Ensure cards stretch to the tallest card in the row */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content at the top */
    align-items: stretch; /* Ensure children stretch to full width */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect: Move card up by 0.5vw */
.card:hover {
    transform: translateY(-0.5vw);
    /* filter: brightness(1.15); */
    cursor: pointer;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.image-wrapper {
    position: relative;
    overflow: hidden;
}

.image-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 0.6vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2a3c89;
    opacity: 0; /* Starts invisible */
    pointer-events: none;
    transition: opacity 0.3s ease; /* Fades the opacity; adjust time/easing for slower/faster effect */
}

.card:hover .image-wrapper::after {
    opacity: 0.2; /* Fades to visible on hover */
}

@media (max-width: 990px) {
    .image-wrapper {
        position: relative;
        height: 0;
        padding-bottom: 66.666%; /* 2/3 ≈ 66.67% for 3:2 aspect ratio */
        overflow: hidden;
        border-radius: 0.6vw; /* Apply rounded corners to the wrapper for clipping */
    }

    .image-wrapper img {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
        border-radius: 0; /* Remove radius from image to let wrapper handle it */
    }
}

/* Trigger link's ::before effect on card hover */
.card:hover .decorated-link a::before {
    width: 100%;
}

/* Image styling */
.card img {
    width: 100%;
    height: auto;
    border-radius: 0.6vw;
    display: block; /* Ensure image behaves as a block */
}

/* Heading styling */
.card h1, .card h2, .card h3, .card h4, .card h5 {
    color: inherit;
    margin: var(--fluid-padding-x-small) 0;
    padding: 0;
    flex: 0 0 auto; /* Prevent heading from stretching, take only needed space */
}

/* Paragraph styling */
.card p {
    padding-bottom: var(--fluid-padding-x-small);
    margin-bottom: 0;
    margin-block-end: 0;
    flex: 0 0 auto; /* Prevent paragraph from stretching, take only needed space */
}

/* Link styling */
.card .decorated-link {
    margin-top: auto; /* Push link to the bottom of the card */
    margin-bottom: var(--fluid-padding-x-small);
}

.card .decorated-link a::before{
    bottom: round(-0.1vw, 1px);
}

.card .decorated-link a::after{
    bottom: round(-0.1vw, 1px);
}

/* Ensure links inside decorated-link are styled */
.card a {
    color: inherit !important;
    text-decoration: none;
    font-size: var(--fluid-p);
}
.card a:hover {
    color: inherit;
    text-decoration: none;
    font-size: var(--fluid-p);
}

/* Frontend Grid Layout */
.custom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    column-gap: var(--fluid-padding-x-small);
    row-gap: calc(2 * var(--fluid-padding-x-small));
    width: 100%;
    box-sizing: border-box;
    align-items: stretch; /* Ensure all cards stretch to the tallest card's height */
}

.custom-grid.no-tint .card .image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000000;
    opacity: 0; /* Starts invisible */
    pointer-events: none;
    transition: none; /* Fades the opacity; adjust time/easing for slower/faster effect */
}

.custom-grid.no-tint .card .image-wrapper img {
    border-radius: 0px;
}

.wp-block-columns.book-columns-fixed-right img {
    border-radius: 0px;
}

.custom-grid.height-restrained-img {
    row-gap: var(--fluid-padding-medium);;
}

.custom-grid.height-restrained-img .card img {
    width: auto !important;
    height: auto;
    max-height: 22vw;
    max-width: 100%;
    object-fit: contain;
}

.height-restrained-img .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 990px) {
    .custom-grid.height-restrained-img .image-wrapper img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .custom-grid.height-restrained-img.no-tint.compact-mobile .image-wrapper {
        padding-bottom: 100%;
    }
}

/* Editor Grid Layout */
.custom-grid-editor .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch; /* Ensure editor cards stretch to the tallest card */
}

/* Responsive Design: 1 or 2 columns on mobile */
@media (max-width: 990px) {
    .custom-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fluid-padding-small);
        row-gap: calc(2 * var(--fluid-padding-small));
    }
    .one-column-collapse .custom-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .custom-grid-editor .block-editor-block-list__layout {
        grid-template-columns: repeat(2, 1fr);
    }
    .card a,
    .card a:hover {
        color: inherit;
        text-decoration: none;
        font-size: var(--fluid-p-mobile);
    }
}

@media (max-width: 1125px) {
    .custom-grid.early-mobile {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fluid-padding-small);
        row-gap: calc(2 * var(--fluid-padding-small));
    }
    .one-column-collapse .custom-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .custom-grid-editor .block-editor-block-list__layout {
        grid-template-columns: repeat(2, 1fr);
    }
    .card a,
    .card a:hover {
        color: inherit;
        text-decoration: none;
        font-size: var(--fluid-p-mobile);
    }
}

@media (max-width: 555px) {
    .custom-grid.compact-mobile {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fluid-padding-x-small);
        row-gap: calc(2 * var(--fluid-padding-x-small));
    }
    .custom-grid.compact-mobile h4.card-title{
        font-size: 1.2rem;
    }
    .custom-grid.compact-mobile p.padding-bottom-x-small {
        display: none
    }
    .custom-grid.compact-mobile .decorated-link.padding-bottom-xx-small {
        padding-bottom: 0.1rem !important;
    }
    .custom-grid.compact-mobile .card a,
    .custom-grid.compact-mobile .card a:hover {
        color: inherit;
        text-decoration: none;
        font-size: 0.95rem;
    }
    .custom-grid.compact-mobile h4{
        margin-bottom: 0px;
    }
}

@media (max-width: 480px) {
    .custom-grid.compact-mobile {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fluid-padding-x-small);
        row-gap: calc(2 * var(--fluid-padding-x-small));
    }
    .custom-grid.compact-mobile h4.card-title{
        font-size: 0.85rem;
    }
    .custom-grid.compact-mobile p.padding-bottom-x-small {
        display: none
    }
    .custom-grid.compact-mobile .decorated-link.padding-bottom-xx-small {
        padding-bottom: 0.1rem !important;
    }
    .custom-grid.compact-mobile .card a,
    .custom-grid.compact-mobile .card a:hover {
        color: inherit;
        text-decoration: none;
        font-size: 0.75rem;
    }
    .custom-grid.compact-mobile h4{
        margin-bottom: 0px;
    }
}

/* Visually hide content but keep it accessible to screen readers & crawlers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
@media (max-width: 415px) {
    .custom-grid {
        gap: var(--fluid-padding-xx-small);
    }
}
*/

/* FOOTER */
#custom-footer{
    width: 100% !important;
    background-color: #FFFFFF;
}

/* Upper Section */
#custom-footer .footer-upper {
    background-color: #2e3b85; /* Dark blue */
    color: #FFFFFF; /* White text */
    text-align: center;
    font-size: var(--fluid-h2);
    font-weight: 800;
    width: 100% !important;
    max-width: 100% !important;
}

.footer-upper a {
    color: #FFFFFF;
}

.footer-upper p{
    font-size: var(--fluid-h2);
    line-height: 1.75;
    margin: 0px;
}

@media (max-width: 990px) {
    #custom-footer .footer-upper p {
        /*font-size: var(--fluid-h2-mobile);*/
        font-size: var(--fluid-h3-mobile);
        /*font-size: var(--fluid-h1-mobile);*/
    }
}

/* Lower Section */
#custom-footer .footer-lower {
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    /*margin: 0 auto;*/
    padding-left: 1vw;
    padding-right: 1vw;
    border: 1px solid #FFFFFF;
    /*gap: 1vw;  Reduced to minimize impact on widths */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding/borders in width */
}

#custom-footer .footer-column.company-info {
    flex: 0 0 25%; /* Exactly 1/3 */
    max-width: 25%;
    box-sizing: border-box;
}

#custom-footer .footer-column.links-form {
    flex: 0 0 75%; /* Exactly 2/3 */
    max-width: 75%;
    box-sizing: border-box;
    padding-left: var(--fluid-padding-small);
    padding-top: 0.5vw;
}

.company-info {
    text-align: left;
    /* margin-right: var(--fluid-padding-medium); Space between company info and links */
}

.company-info img {
    max-width: 16vw; /* Adjust logo size */
    margin-bottom: var(--fluid-padding-x-small);
}

.company-info p {
    color: #2e3b85;
    font-size: var(--fluid-menu-small-font);
    margin: 0.26vw 0;
}

.company-info .social-media {
    display: flex;
    align-items: center;
    gap: 0.54vw;
    margin: 0.54vw 0;
}

.company-info .social-media a {
    color: #2e3b85; /* LinkedIn blue */
    font-size: var(--fluid-h4);
}

.company-info .social-media p {
    padding-bottom: 0;
}

.company-info .copyright {
    font-size: var(--fluid-menu-small-font);
    color: #2e3b85;
    margin-top: 1.08vw; /* Space from social media */
}

/* Links Grid */
.links-form {
    flex: 2; /* Give more space to the links and form */
}

.footer-links {
    display: grid;
    grid-template-columns: 37% 30% 33%; /* 3 columns for 9 links */
    gap: 1.5vw; /* Space between links */
    margin-bottom: 1.5vw; /* Space between links and form */
    line-height: 1.3 !important;
}

.footer-links a,
.footer-links a:hover {
    color: #2a3c89; /* Dark color for links */
    text-decoration: none;
    font-size: var(--fluid-menu-font-size); /* Consistent size */
    text-transform: none; /* No uppercase transformation */
    font-weight: normal; /* Not bold */
}

/* Newsletter Form */
.footer-form {
    text-align: left; /* Align left like the image */
    margin-top: 3.2vw; /* Space above the form */
}

.footer-form h3 {
    color: #2a3c89; /* Dark blue */
    font-size: var(--fluid-menu-font-size); /* Consistent size */
    font-weight: 700;
    margin-bottom: 0px;
}

.footer-form .form-grid {
    display: grid;
    grid-template-columns: 63% 37%; /* Button on left, input spans remaining space */
    gap: 0.25vw; /* Space between elements */
    align-items: center; /* Vertically align items */
}

.footer-form button {
    background-color: #f15823; /* Orange */
    color: #FFFFFF;
    padding: 10px;
    border: none;
    border-radius: 0.3215vw;
    font-size: var(--fluid-smaller-button-font-size);
    font-weight: 700;
    cursor: pointer;
    width: 100%; /* Full width within its grid cell */
    height: 46px;/*3.6vw; /* Consistent height */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.footer-form button:hover {
    transform: scale(1.05, 1.05); /* First value: horizontal (x), second: vertical (y) */
    background-color: #f15823; /* Slightly darker orange on hover */
}

.footer-form input[type="email"] {
    width:auto;
    padding: 10px;
    margin-right: var(--fluid-padding-x-small);
    border: 2px solid #2e3b85;
    border-radius: 0.3215vw;
    font-size: var(--fluid-menu-font-size);
    height: 46px;/*3.6vw; /* Consistent height */
}

.footer-form input[type="checkbox"] {
    width: var(--fluid-menu-font-size);
    height: var(--fluid-menu-font-size);
    margin-right: 8px; /* Space between checkbox and label text */
    vertical-align: middle; /* Align with label text */
    appearance: none; /* Remove default browser styling */
    -webkit-appearance: none; /* For WebKit browsers */
    border: 1px solid #2e3b85; /* Match form border color */
    background-color: #FFFFFF; /* White background */
    cursor: pointer;
}

.footer-form input[type="checkbox"]:checked {
    background-color: #2e3b85; /* Fill color when checked */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); /* Custom checkmark */
    background-size: var(--fluid-menu-font-size);
    background-position: center;
    background-repeat: no-repeat;
}

.footer-form label {
    font-size: var(--fluid-menu-small-font);
    color: #2e3b85;
    display: block; /* Ensure label takes full width */
    margin-top: 10px; /* Space above checkbox */
}

.footer-form a:hover {
    color: #2e3b85;
}

.footer-desktop {
    width: 100%;
}

.footer-mobile {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--fluid-padding-medium);
}
.mobile-logo {
    padding-bottom: var(--fluid-padding-small);
}
.mobile-logo img {
    max-width: 30%; /* Adjust size as needed */
    margin-bottom: 20px;
}

.mobile-links-form .footer-form h3 {
    font-size: 0.80rem; /* Consistent size */
    font-weight: 700;
    padding-bottom: var(--fluid-padding-xx-small);
}

.mobile-links-form .footer-form input[type="email"] {
    width:auto;
    padding: 0.5vw 1.5vw;
    margin-right: var(--fluid-padding-small);
    border: 0.3vw solid #2e3b85;
    border-radius: 0.75vw;
    font-size: 1rem;
    height: 7vw; /* Consistent height */
}

.mobile-links-form .footer-form button {
    padding: 0.5vw 1.5vw;
    border: none;
    border-radius: 0.75vw;
    font-size: var(--fluid-footer-button-font-size-mobile);
    font-weight: 700;
    cursor: pointer;
    height: 7.5vw; /* Match input height */
    min-height: 7.5vw;
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.mobile-links-form .footer-links {
    display: grid;
    grid-template-columns: 40% 27% 33%; /* 3 columns for 9 links */
    column-gap: 1vw; /* Space between links */
    row-gap: 2.2vw;
    margin-bottom: 4vw; /* Space between links and form */
    text-align: left;
}

.mobile-links-form .footer-links a {
    font-size: var(--fluid-footer-menu-font-size-mobile); /* Consistent size */
}

.mobile-links-form {
    width: 100%;
    margin-bottom: 3vw;
}

.mobile-info-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3vw;
    align-items: flex-start;
}

.mobile-info-row p,
.mobile-copyright p {
    color: #2a3c89;
    padding-bottom: 0px;
}
.mobile-address, .mobile-contact, .mobile-social-media {
    flex: 1;
    max-width: fit-content;
    align-content: center;
}

@media (max-width: 480px) {
    .mobile-address, .mobile-contact, .mobile-social-media {
        flex: 1;
        max-width: none;
    }
}

.mobile-address p,
.mobile-contact p,
.mobile-social-media p
{
    text-align: left;
    font-size: var(--fluid-footer-info-font-size-mobile);
    margin-bottom: 0px;
}

.mobile-copyright p
{
    text-align: left;
    font-size: var(--fluid-footer-info-font-size-mobile);
}

.mobile-copyright {
    text-align: left;
    width: 100%;
}

.mobile-links-form .footer-form label,
.mobile-links-form .footer-form label a,
.mobile-social-media a,
.mobile-social-media a:hover {
    font-size: var(--fluid-footer-info-font-size-mobile);
    grid-column: span 2;
    text-decoration: none;
}

.mobile-links-form .footer-form label a {
    text-decoration: underline;
}

.mobile-links-form .footer-form input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5vw;
    margin-right: 0.5vw; /* Space between checkbox and label text */
}

/* FOOTER SWAPING */
/* Default: Show desktop footer, hide mobile footer */
.footer-desktop {
    display: flex;
}
.footer-mobile {
    display: none;
}

/* Mobile devices: Hide desktop footer, show mobile footer */
@media (max-width: 990px) {
    .footer-desktop {
        display: none;
    }
    .footer-mobile {
        display: flex;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* FOOTER MOBILE <480px */
@media (max-width: 480px) {

    .footer-form {
        text-align: left; /* Align left like the image */
        margin-top: 1.5rem; /* Space above the form */
    }

    /* 1) Links: 3 columns -> 2 columns */
    .mobile-links-form .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 6vw;
        row-gap: 3.5vw;
    }

  .footer-form label{
    margin-top: 0px;
    margin-left: 0.25rem;
    margin-bottom: 0.5rem;
  }

  /* let the long GDPR link span full width */
  .mobile-links-form .footer-links a:last-child {
    grid-column: 1 / -1;
  }

  /* 2) Contact info: 2 columns -> 1 column */
  .mobile-info-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .mobile-address,
  .mobile-contact {
    max-width: none;
  }

  /* 3) Form: input + button on separate rows */
  .mobile-links-form .footer-form .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .mobile-links-form .footer-form input[type="email"],
  .mobile-links-form .footer-form button {
    width: 100%;
    height: 48px;          /* switch away from vw heights */
    min-height: 48px;
    padding: 12px 14px;    /* switch away from vw padding */
    border-radius: 10px;   /* optional */
    font-size: 1.2rem;
  }

  /* Your label currently forces "grid-column: span 2" - undo that for 1-col */
  .mobile-links-form .footer-form label,
  .mobile-links-form .footer-form label a {
    grid-column: auto;
    line-height: 1.35;
    font-size: 1rem;
  }

  /* 4) Make it readable: bump font sizes on tiny screens */
  .mobile-links-form .footer-links a {
    font-size: 1rem;       /* ~16px */
    line-height: 1.25;
  }

  .mobile-links-form .footer-form h3 {
    font-size: 1rem;
    line-height: 1.2;
  }

  .mobile-address p,
  .mobile-contact p,
  .mobile-copyright p,
  .mobile-links-form .footer-form label {
    font-size: 0.95rem;
  }

  /* Optional: slightly larger logo on small phones */
  .mobile-logo img {
    max-width: 45%;
  }
}

/* CAROUSEL SLIDER */
.carousel-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.carousel {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.carousel.is-dragging {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    gap: min(2vw, 40px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.carousel-card {
    flex: 0 0 auto;
    background-color: #d3de5033;
    border: 0.35vw solid #d3de50;
    padding: 1.75vw;
    box-sizing: border-box;
    border-radius: 0.75vw;
    display: flex;
    flex-direction: column;
}

.bottom-group {
    margin-top: auto;
}

.carousel-card img {
    max-width: 125px;
    width: 125px;
    height: auto;
    margin-bottom: 0.65vw;
}

.carousel-card .quote {
    font-style: italic;
    font-size: calc(var(--fluid-p) + 2px);
    margin: 0 0 0.65vw 0;
    font-family: "Gelasio";
}

.carousel-card .name {
    font-weight: bold;
    margin: 0 0 0.3vw 0;
}

.carousel-card .title {
    margin: 0;
}

p.name,
p.title {
    padding-bottom: 0;
}

.q-char {
    line-height: 0;
    padding-bottom: 0;
    padding-top: 2vw;
    font-size: 6vw;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    margin-bottom: 0;
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.arrow {
    background-color: #FFFFFF;
    color: #2e3b85;
    border: none;
    padding-top: var(--fluid-padding-medium);
    padding-bottom: 0;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    font-size: 2.75vw;
    cursor: pointer;
    margin: 0 1vw;
    line-height: 0;
    box-sizing: border-box;
}

.arrow.right,
.arrow.left {
    color: transparent;
}

.nav-container .right:before {
    color: #2e3b85;
    content: "›";
    position: relative;
    top: -0.15vw;
}

.nav-container .left:after {
    color: #2e3b85;
    content: "‹";
    position: relative;
    top: -0.15vw;
}

.indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--fluid-padding-medium);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.indicator {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 50%;
    background: #2e3b8533;
    display: inline-block;
    margin: 0 0.3vw;
    cursor: pointer;
    transition: background 0.3s;
    line-height: 0;
    box-sizing: border-box;
    border: none;
    padding: 0;
}

.indicator.active {
    background: #2e3b85;
}

/* Responsive text tweaks */
@media (max-width: 620px) {
    .carousel .bottom-group p {
        font-size: 16px;
    }
}

@media (max-width: 565px) {
    .carousel .bottom-group p {
        font-size: 14px;
    }
}

@media (max-width: 495px) {
    .carousel .bottom-group p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .carousel-track {
        gap: 3vw;
    }

    .carousel-card {
        width: 70vw;
        border: 1vw solid #d3de50;
        border-radius: 3vw;
        padding: 3vw;
    }

    .arrow {
        font-size: 5vw;
        padding-top: var(--fluid-padding-medium);
        padding-bottom: 0;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .indicator {
        width: 3vw;
        height: 3vw;
        margin: 0 0.5vw;
    }

    .q-char {
        font-size: 18vw;
        padding-top: 9vw;
    }

    .carousel-card .quote {
        font-size: 1.1rem;
    }

    .wp-block-mytheme-testimonial-carousel.carousel-wrapper {
        position: relative;
        left: 3px;
    }
}

@media (min-width: 480.1px) and (max-width: 990px) {
    .carousel-track {
        gap: 3vw;
    }

    .carousel-card {
        width: 35vw;
        border: 0.5vw solid #d3de50;
        border-radius: 1.5vw;
    }

    .arrow {
        font-size: 3vw;
        padding-top: var(--fluid-padding-medium);
        padding-bottom: 0;
        padding-left: 0.75vw;
        padding-right: 0.75vw;
    }

    .indicator {
        width: 2vw;
        height: 2vw;
        margin: 0 0.4vw;
    }

    .q-char {
        font-size: 14vw;
        padding-top: 7vw;
    }

    .carousel-card .quote {
        font-size: 2.5vw;
    }
}

@media (min-width: 990.1px) {
    .carousel-card {
        width: 25.5vw;
        max-width: 440px !important;
    }
}

/* Blue Quote Card Styles */
.blue-quote-card {
    width: 100%;
    background-color: #2e3b851a; /* Blue-transparent background */
    border: 0.25vw solid #2e3b85; /* Blue border */
    padding: 1.75vw;
    box-sizing: border-box;
    border-radius: 0.5vw;
    transition: background-color 0.3s, border-color 0.3s;
    margin-block-end: var(--theme-content-spacing) !important;
}

.blue-quote-card:hover {
    background-color: #d3de501a; /* Green-transparent background on hover */
    border-color: #d3de50; /* Green border on hover */
}

/* For both blue and green quote cards */
.quote,
.title,
.name,
.q-char{
    color: #2e3b85;
}

.blue-quote-card .q-char {
    line-height: 0;
    padding-bottom: 0;
    padding-top: 3vw;
    font-size: 8vw;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    margin-bottom: 0;
}

.blue-quote-card .quote {
    font-style: italic;
    font-size: calc(var(--fluid-p) + 2px);
    margin: 0 0 0.65vw 0;
    font-family: "Gelasio";
}

.blue-quote-card .name {
    font-weight: bold;
    margin: 0 0 0.3vw 0;
}

.blue-quote-card .title {
    margin: 0;
}

.blue-quote-card img {
    max-width: 125px;
    width: 125px;
    height: auto;
    margin-bottom: 0.65vw;
}

@media (max-width: 990px) {
    .blue-quote-card .quote {
        font-size: var(--fluid-p-mobile);
    }
    .blue-quote-card .q-char {
        font-size: 11vw;
        padding-top: 5vw;
    }
}

/* NYHETSBREV FORM (pale-blue-bg) */
.nyhetsbrev-form .form-grid {
    display: grid;
    grid-template-columns: 63% 37%; /* Button on left, input spans remaining space */
    gap: 0.25vw; /* Space between elements */
    align-items: center; /* Vertically align items */
}

.nyhetsbrev-form button {
    background-color: #f15823; /* Orange */
    color: #FFFFFF;
    padding: 0.5vw;
    border: none;
    border-radius: 0.3215vw;
    font-size: var(--fluid-smaller-button-font-size);
    font-weight: 700;
    cursor: pointer;
    width: 100%; /* Full width within its grid cell */
    height: 3.6vw; /* Match input height */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.nyhetsbrev-form button:hover {
    transform: scale(1.05); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
}

.nyhetsbrev-form input[type="email"] {
    background-color:#FFFFFF;
    width:auto;
    padding: 0.5vw 1vw;
    margin-right: var(--fluid-padding-x-small);
    border: 0;
    border-radius: 0.3215vw;
    font-size: var(--fluid-menu-font-size);
    height: 3.6vw; /* Consistent height */
}

.nyhetsbrev-form input[type="checkbox"] {
    width: var(--fluid-menu-font-size);
    height: var(--fluid-menu-font-size);
    margin-right: 8px; /* Space between checkbox and label text */
    vertical-align: middle; /* Align with label text */
    appearance: none; /* Remove default browser styling */
    -webkit-appearance: none; /* For WebKit browsers */
    border-radius: 0.2vw;
    /*border: 1px solid #2e3b85;  Match form border color */
    background-color: #FFFFFF; /* White background */
    cursor: pointer;
}

.nyhetsbrev-form input[type="checkbox"]:checked {
    background-color: #2e3b85; /* Fill color when checked */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); /* Custom checkmark */
    background-size: var(--fluid-menu-font-size);
    background-position: center;
    background-repeat: no-repeat;
}

.nyhetsbrev-form label {
    font-size: var(--fluid-menu-small-font);
    color: #2e3b85;
    display: block; /* Ensure label takes full width */
    margin-top: 10px; /* Space above checkbox */
}

.nyhetsbrev-form a:hover {
    color: #2e3b85;
}

@media (max-width:990px){
    .nyhetsbrev-form .form-grid {
        grid-template-columns: 55% 45%; /* Button on left, input spans remaining space */
    }
    .nyhetsbrev-form button {
        border-radius: 0.75vw;
        font-size: var(--fluid-button-font-size-mobile-form);
        height: 7vw; /* Match input height */
        min-height: 7vw;
    }
    .nyhetsbrev-form button:hover {
        transform: scale(1.01); /* Increases size to 105% of original */
        background-color: #f15823; /* Slightly darker orange on hover */
    }
    .nyhetsbrev-form input[type="email"] {
        border-radius: 0.75vw;
        font-size: 1rem;
        height: 7vw; /* Consistent height */
    }
    .nyhetsbrev-form label {
        font-size: 0.9rem;
        grid-column: span 2;
    }
    .nyhetsbrev-form input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 0.5vw;
        margin-right: 0.5vw; /* Space between checkbox and label text */
    }
}

@media (max-width:480px){
   .nyhetsbrev-form button {
        border-radius: 10px;
        font-size: 1.2rem;
        height: 48px !important;
        min-height: 48px !important;
    }
    .nyhetsbrev-form input[type="email"] {
        border-radius: 10px;
        font-size: 1.2rem;
        height: 48px !important;
        padding: 14px;
    }
}

/* KONTAKT FORM */
.kontakt-form {
  margin: 0 auto; /* Centers the form */
}

.kontakt-form-container {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
}

.wp-block-column.contact-column {
    display: flex;
    flex-direction: column;
}

.spacer {
    flex-grow: 1; /* Grows to fill available space */
}

.wp-block-column.contact-column h4.wp-block-heading {
    margin-top: 0; /* No need for auto anymore */
}

.extra-margin {
    margin-top: 1vw;
}

.input-row {
  display: flex;
  gap: 1.5vw;
}

.input-row input,
.input-row input:focus {
  flex: 1;
  padding: 0.5vw 1vw;
  border-radius: 0.3215vw;
  font-size: var(--fluid-menu-font-size);
  background-color: #ffffff;
  height: 3.6vw;
}

.kontakt-form-container input[type="email"],
.kontakt-form-container textarea,
.kontakt-form-container input[type="tel"],
.kontakt-form-container input[type="number"],
.kontakt-form-container input[type="text"],
.kontakt-form-container select
 {
  padding: 0.5vw 1vw;
  border-radius: 0.3215vw;
  font-size: var(--fluid-menu-font-size);
  width: 100%;
  background-color: #ffffff;
  color: #2e3b85;
}

.kontakt-form-container input[type="email"],
.kontakt-form-container input[type="tel"],
.kontakt-form-container input[type="number"],
.kontakt-form-container input[type="text"],
.kontakt-form-container select
{
    height: 3.6vw;
}

.kontakt-form-container textarea {
  min-height: 5vw;
  resize: vertical; /* Allows vertical resizing only */
}

.kontakt-form-container button {
    background-color: #f15823; /* Orange */
    color: #FFFFFF;
    padding: 0.5vw;
    border: none;
    border-radius: 0.3215vw;
    font-size: var(--fluid-smaller-button-font-size);
    font-weight: 700;
    cursor: pointer;
    width: 100%; /* Full width within its grid cell */
    height: 3.6vw; /* Match input height */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.kontakt-form-container button:hover {
  background-color: #f15823; /* Darker orange on hover */
  transform: scale(1.02, 1.06);
}

.kontakt-checkbox-label {
  font-size: var(--fluid-menu-font-size);
}

.kontakt-checkbox-label{
  display: flex;
  flex-wrap: wrap;         /* allows privacy line to become a new row */
  column-gap: 0.3rem;      /* space between checkbox and main text */
  row-gap: 0.35em;         /* space between main line and privacy line */
  align-items: flex-start;
  line-height: 1.25;
}

/* Only affect the checkbox inside this label */
.kontakt-checkbox-label > input[type="checkbox"]{
  flex: 0 0 auto;
  position: static;
  top: auto;
  margin: 0;
  margin-top: -0.35em;
}

/* Main text sits to the right of the checkbox and wraps with hanging indent */
.kontakt-checkbox-main{
  flex: 1 1 0;
  min-width: 0;            /* important so wrapping behaves */
}

/* Privacy line: force a new row and align flush-left (no indent) */
.kontakt-checkbox-label > .privacy-text{
  flex: 0 0 100%;          /* full-width row */
  margin: 0;               /* keep it flush-left */
}

.kontakt-form-container input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  top: 5px;
  border-radius: 0.1rem;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.kontakt-form-container input[type="checkbox"]:checked {
  background-color: #2e3b85;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.kontakt-form-container a {
  color: #2e3b85;
  text-decoration: none;
}

.kontakt-form-container a:hover {
  text-decoration: underline;
}

/* Optional: Responsive adjustments */
@media (max-width: 990px) {
    .outer-container-form {
        display: flex;
        flex-direction: column;
    }
    .outer-container-form .rounded-left { /* Rounded corners: left goes to top, right to bottom */
        border-top-left-radius: 1vw;
        border-top-right-radius: 1vw;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .outer-container-form .rounded-right {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .kontakt-form-container {
        gap: 3vw;
    }
    .kontakt-form-container button {
        padding: calc(2*var(--fluid-padding-button-vertical)) var(--fluid-padding-button-horizontal, 24px);
        font-size: var(--fluid-button-font-size-mobile);
        height: 8vw; /* Match input height */
        border-radius: 0.75vw;
    }
    .kontakt-form-container input[type="email"],
    .kontakt-form-container input[type="tel"],
    .kontakt-form-container input[type="number"],
    .kontakt-form-container input[type="text"],
    .kontakt-form-container select
    {
        padding: 0.5vw 2vw;
        border-radius: 0.75vw;
        font-size: 1rem;
        width: 100%;
    }

    .kontakt-form-container textarea{
        padding: 2vw 2vw;
        border-radius: 0.75vw;
        font-size: 1rem;
        width: 100%;
    }

    .kontakt-form-container input[type="email"],
    .kontakt-form-container input[type="tel"],
    .kontakt-form-container input[type="number"],
    .kontakt-form-container input[type="text"],
    .kontakt-form-container select
    {
        height: 38px;
    }

    .kontakt-form-container label {
        font-size: 0.9rem;
        grid-column: span 2;
    }
    .kontakt-form-container input[type="checkbox"] {
        border-radius: 0.5vw;
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.5vw; /* Space between checkbox and label text */
        position: relative;
        top: 5px;
    }

}

.darken {
    position: relative;
}

.darken::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #151d47aa;
    z-index: 1;
    pointer-events: none; /* Prevents overlay from blocking interactions */
}

.darken > * {
    position: relative;
    z-index: 2; /* Keeps content above the overlay */
}

.darken-blue {
    position: relative;
}

.darken-blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2a3c8933;
    z-index: 1;
    pointer-events: none; /* Prevents overlay from blocking interactions */
}

.darken-blue > * {
    position: relative;
    z-index: 2; /* Keeps content above the overlay */
}

.darken-soft {
    position: relative;
}

.darken-soft::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #151d4788;
    z-index: 1;
    pointer-events: none; /* Prevents overlay from blocking interactions */
}

.darken-soft > * {
    position: relative;
    z-index: 2; /* Keeps content above the overlay */
}

@media (max-width: 990px){
    .darken-blue.darken-soft-mobile::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #151d4788;
        z-index: 1;
        pointer-events: none;
    }
}

/* SOCIAL MEDIA */
.social-sharing-block {
    text-align: left;
    margin-top: 20px;
}

.social-sharing-block p {
    color: #2e3b85;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin: 0;
}

.social-sharing-block p::after {
    content: '';
    position: absolute;
    bottom: 0.8vw;
    left: 0;
    width: 100%;
    height: 0.2vw;
    background-color: #d3de50;
}

.social-icons {
    display: flex;
    justify-content: left;
    gap: 0.75vw;
    margin-top: 0.25vw;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4vw;
    height: 3.4vw;
    border-radius: 0.5vw;
}

.social-icons a svg {
    fill: white;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    padding: 0;
    display: block;
}

/* Only shrink the middle icon a bit */
.social-icons a.twitter-share svg,
.social-icons a.twitter-share2 svg {
    transform: scale(0.82);
    transform-origin: center;
}

.linkedin-share,
.twitter-share,
.facebook-share,
.linkedin-share2,
.twitter-share2,
.facebook-share2 {
    background-color: #2e3b85;
}

@media (min-width: 990.1px) {
    /* MOBILE MENU */
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 990px) {
    /* MOBILE MENU */
    .desktop-only {
        display: none !important;
    }
}

.wp-block-columns.mobile-stack,
.wp-block-columns.mobile-stack-reverse {
    column-gap: 5vw;
}

@media (max-width: 990px) {

    .wp-block-columns.mobile-stack {
        flex-direction: column;
    }

    .wp-block-columns.mobile-stack-reverse {
        flex-direction: column-reverse !important;
    }

    .wp-block-columns.mobile-stack-reverse .wp-block-column,
    .wp-block-columns.mobile-stack .wp-block-column {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .wp-block-columns.mobile-stack,
    .wp-block-columns.mobile-stack-reverse {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.mobile-stack-reverse .wp-block-image.alignright,
    .wp-block-columns.mobile-stack .wp-block-image.alignright {
        margin-right: 0;
        margin-left: 0;
        width: 100% !important;
    }

    /* Ensure the figure takes the full width of the column */
    .wp-block-columns.mobile-stack-reverse .wp-block-column .wp-block-image,
    .wp-block-columns.mobile-stack .wp-block-column .wp-block-image {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Style the image to fill the width and crop vertically */
    .wp-block-columns.mobile-stack-reverse .wp-block-column .wp-block-image img,
    .wp-block-columns.mobile-stack .wp-block-column .wp-block-image img {
        width: 100% !important;
        /*height: 67% !important;  Adjust this value as needed */
        object-fit: cover !important;
        object-position: center !important;
    }

    .wp-block-columns.mobile-stack-reverse.mobile-keep-3-2 .wp-block-column .wp-block-image img,
    .wp-block-columns.mobile-stack.mobile-keep-3-2 .wp-block-column .wp-block-image img {
        height: auto !important;
    }

    /* This is changed to Heading -> Image -> Paragraph -> Button */
    .wp-block-columns.mobile-stack.button-below-image .wp-block-column {
        display: contents;
    }

    .wp-block-columns.mobile-stack.button-below-image .wp-block-heading {
        order: 1;
        margin: 0px;
        padding: 0px;
    }

    .wp-block-columns.mobile-stack.button-below-image p {
        order: 3;
        margin: 0px;
        padding: 0px;
    }

    .wp-block-columns.mobile-stack.button-below-image .wp-block-image {
        order: 2;
    }

    .wp-block-columns.mobile-stack.button-below-image a.yesbridge-button-link {
        order: 4;
    }

    .wp-block-columns.mobile-stack.button-below-image div.wp-block-buttons {
        order: 4;
    }

    /* testamonial cards re-stack */
    .wp-block-columns.testimonial-mobile-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .wp-block-columns.testimonial-mobile-stack .wp-block-column {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }

    .wp-block-columns.testimonial-mobile-stack .blue-quote-card {
        width: 100%;
        height: auto;
    }

    p.narrow-l {
    max-width: 70%;
    }

    .narrow {
        max-width: 100%;
    }

    .narrow-m {
    width:100%;
    max-width: 750px;
    margin: 0 auto !important;
}

    p.narrow-m {
        max-width: 100% !important;
    }

    p.narrow-s {
        max-width: 50%;
    }

    .rounded-corners {
        border-radius: 1vw;
    }

    .thin-padding-horizontal{
        padding-left: var(--fluid-narrow-padding-mobile);
        padding-right: var(--fluid-narrow-padding-mobile);
    }

    .social-icons {
        display: flex;
        justify-content: left;
        gap: 2vw;
        margin-top: 1vw;
    }

    .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5.5vw; /* Uniform container size */
        height: 5.5vw; /* Uniform container size */
        border-radius: 0.6vw; /* Optional: Round buttons if desired */
    }

    .padding-xs.mobile-padding {
        padding: 3vw;
    }

    /* MOBILE MENU */
    #offcanvas .ct-panel-inner {
        background-color: transparent !important; /* Remove white from outer wrapper to allow transparency below content */
        width: 100% !important;
        max-width: 100% !important;
        position: absolute;
        left: 0px;
        box-shadow: none;
        margin-top: 50px;/*calc(var(--fluid-menu-height-mobile) - 2px);*/
        height: fit-content;
        max-height: 100%;
        align-self: flex-start;
    }
    #offcanvas .ct-panel-content[data-device="mobile"] {
        background: transparent !important; /* Ensure mobile container is transparent */
    }

    #offcanvas .ct-panel-inner li {
        margin-bottom: 20px !important;
    }
    #offcanvas .ct-panel-inner li:first-child {
        margin-top: 20px !important;
    }
    #offcanvas .ct-panel-inner .ct-panel-actions{
        display: none;
    }
    #menu-top-sticky-1 .menu-text {
        font-size: 18px;
    }
    #menu-top-sticky-1 a::before {
        display: none;
    }
    #offcanvas .ct-sub-menu-parent a{
        width: fit-content;
    }
    #offcanvas .ct-sub-menu-parent button{
        margin-left: 0px;
    }
    .ct-toggle-dropdown-mobile .ct-icon {
        width: 2.0rem !important; /* Responsive width */
        height: 2.0rem !important; /* Responsive height */
    }
    .ct-toggle-dropdown-mobile .ct-icon path {
        stroke: #d3de50;
        fill: #d3de50;
        stroke-width: calc(0.05rem); /* Scales stroke proportionally */
    }
    .sub-menu .menu-item {
        padding: 0 !important; /* Top/bottom 10px, left/right 15px; adjust as needed */
    }

    /* LOGO (MOBILE) */
    .site-branding {
        max-width: 100%;
        overflow: visible;
        height: var(--fluid-menu-height-mobile); /* 70px */
        padding: 0 !important;
        display: flex;
        align-items: center;
    }

    /* Container is exactly the header height */
    .site-logo-container {
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 0; /* important: kills baseline extra space */
    }

    /* Make sure the link wrapper doesn’t add height */
    .site-logo-container a {
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 0;
    }

    /* Fit inside the parent, never taller */
    #header [data-device="mobile"] img.default-logo {
        padding-left: var(--fluid-narrow-padding-mobile);
        padding-top: 5px;
        padding-bottom: 5px;
        height: auto;
        max-height: 100%;
        width: auto;          /* override any vw widths */
        max-width: 70vw;      /* keep room for icons */
        display: block;
        object-fit: contain;
    }


    #header.ct-header {
        height: var(--fluid-menu-height-mobile);
    }
    #header [data-device="mobile"] div {
        height: var(--fluid-menu-height-mobile);
    }
    button[data-id="trigger"] .ct-icon {
        transform: scale(1.25);
        margin-right: var(--fluid-narrow-padding-mobile);
    }
    .header-menu-1 {
        height: var(--fluid-menu-height-mobile);
    }
    #main { 
        padding-top: 0px;/*var(--fluid-menu-height-mobile) !important;*/
    }
    .top-menu {
        height: var(--fluid-menu-height-mobile);
    }
    /* Special case, smaller h1 on Alla Utbildningae */
    h2.smaller-h1,
    h2.smaller-h1 a{
        font-size: var(--fluid-h2-mobile);
    }
}

@media (max-width: 990px) {

    .header-menu-1 {
        height: 50px;
        min-height: 50px;
    }
    #header [data-device="mobile"] div {
        height: 50px;
        min-height: 50px;
    }
    #header.ct-header {
        height: 50px;
        min-height: 50px;
    }
    #main { 
        margin-top: 50px !important;
    }
}

@media (max-width: 400px) {
    .wp-block-columns.mobile-stack.button-below-image .wp-block-button__link {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        white-space: nowrap !important; /* Keeps the label on one line, per your preference */
    }
}

@media (max-width: 600px) {
    .wp-block-columns.mobile-center .wp-block-column{ /* When stacking on small screens center the content */
        text-align: center;
    }
    .wp-block-columns.mobile-center .wp-block-button{
        width: 100% !important;
    }
}

@media (max-width: 990px) {
    @media (min-width: 600px) {
        .wp-block-columns.no-mobile-stacking { /* need to diverge from design doc and make items stack on small screens */
            flex-wrap: nowrap !important;
        }
        .wp-block-columns.no-mobile-stacking .wp-block-column:nth-child(1) { /* Need to keep WP from messing up flex-basis */
            flex: 0 0 20% !important;
        }
        .wp-block-columns.no-mobile-stacking .wp-block-column:nth-child(2) {
            flex: 0 0 40% !important;
        }
        .wp-block-columns.no-mobile-stacking .wp-block-column:nth-child(3) {
            flex: 0 0 30% !important;
        }
    }
}

/* MOBILE BREAK POINTS */
@media (max-width: 990px) {
    div [data-device="desktop"] {
        display: none !important;
    }
    div [data-device="mobile"] {
        display: block !important;
    }
    .ct-header-trigger {
        display: block !important;
    }
}
@media (min-width: 990.1px) {
    div [data-device="desktop"] {
        display: block !important;
    }
    div [data-device="mobile"] {
        display: none !important;
    }
    .ct-header-trigger {
        display: none !important;
    }
}

/* SEARCH MODAL */
/* Custom styles for search modal */
#search-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50vw !important;
    height: 15vw !important;
    background-color: #2e3b85 !important; /* Dark blue background */
    max-width: none !important; /* Override any max-width if needed */
    overflow: auto !important; /* In case content overflows */
    z-index: 9999 !important;
    border-radius: 0.65vw !important; /* Optional: add some rounding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; /* Optional: add shadow for popup feel */
}
#search-modal.ct-panel {
  overflow: hidden !important;
}
/* Add darkening backdrop on body */
body:has(#search-modal.active)::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important; /* Below the modal */
}

/* Center the content inside */
#search-modal .ct-panel-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 2vw !important; /* Changed to vw for better responsiveness across widths */
}

/* Style the search form */
#search-modal .ct-search-form {
    width: 80% !important; /* Make form take most of the popup width */
    position: relative !important;
}

/* Search input field */
#search-modal .modal-field {
    background-color: white !important;
    color: #2e3b85 !important;
    border: 1px solid #2e3b85 !important; /* Optional: add border */
    border-radius: 0.65vw;
    padding: 0.5vw 1.5vw !important;
    font-size: var(--fluid-button-font-size) !important;
    height: 4vw;
    margin-bottom: 0px !important;
}

/* Submit button */
#search-modal .ct-search-form-controls button[type="submit"] {
    background-color: #2e3b85 !important;
    color: white !important;
    border: none !important;
    padding: 0vw !important;
    cursor: pointer !important;
    width: 3vw;
    height: 3vw;
    min-height: 3vw !important;
}

.ct-search-form-controls{
    top: 0.5vw !important;
    right: 0.5vw !important;
    width: 3vw !important;
    height: 3vw !important;
    min-height: 3vw !important;
}

/* Hide live search results */
#search-modal .ct-search-results {
    display: none !important;
}

/* Close button styling */
#search-modal .ct-toggle-close {
    color: #d3de50 !important; /* Ensure visibility */
    background: transparent !important;
    position: absolute !important;
    top: 0 !important; /* Adjusted to start from top edge */
    right: 0 !important; /* Adjusted to start from right edge */
    width: 4vw !important; /* Larger for vertical/horizontal hit box (increased slightly for buffer) */
    height: 4vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 10 !important; /* Ensure it's above content if needed */
}

#search-modal .ct-toggle-close svg {
    width: 1.5vw !important;
    height: 1.5vw !important;
    fill: #d3de50 !important;
}

/* Ensure the overlay/backdrop allows outside clicks */
body:has(#search-modal.active) {
    overflow: hidden !important; /* Prevent scrolling when modal open */
}

#search-modal .ct-panel-actions {
    /* Removed height to eliminate flow space, allowing content to center in full modal height */
    width: auto !important; /* Or set a width if needed */
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0;
}

.entry-card h2.entry-title{
    font-size: var(--fluid-h4);
    padding-bottom: var(--fluid-padding-xx-small);
}
@media (max-width: 990px) {
    #search-modal {
        width: 75vw !important;
        height: 15vh !important;
        border-radius: 0.95vw !important; /* Optional: add some rounding */
    }
    #search-modal .modal-field {
        border-radius: 1vw;
        padding: 0.5vw 1.5vw !important;
        font-size: var(--fluid-p-mobile) !important;
        height: 5vh;
    }

    /* Submit button */
    #search-modal .ct-search-form-controls button[type="submit"] {
        width: 4vh;
        height: 4vh;
        min-height: 4vh !important;
        min-width: 4vh !important;
    }

    .ct-search-form-controls{
        top: 0.5vh !important;
        right: 0.5vh !important;
        width: 4vh !important;
        height: 4vh !important;
        min-height: 4vh !important;
    }
    #search-modal .ct-toggle-close {
        top: 0 !important; /* Adjusted to start from top edge */
        right: 0 !important; /* Adjusted to start from right edge */
        width: 4vh !important; /* Larger for vertical/horizontal hit box (increased slightly for buffer) */
        height: 4vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        z-index: 10 !important; /* Ensure it's above content if needed */
    }

    #search-modal .ct-toggle-close svg {
        width: 2vh !important;
        height: 2vh !important;
        fill: #d3de50 !important;
    }

    .entry-card h2.entry-title{
        font-size: var(--fluid-h3-mobile);
        padding-bottom: var(--fluid-padding-xx-small);
    }
}

/* POP UP */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
}

#popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 0px;
    max-width: 70vw;
    width: 70vw;
    display: flex;
    border-radius: 0.65vw;
}

.popup-left {
    flex: 1 1 50%; /* Equal width with flexibility */
    overflow: hidden; /* Ensure cropping is contained */
    border-top-left-radius: 0.65vw;
    border-bottom-left-radius: 0.65vw;
}

.popup-left img {
    width: 100%;
    height: 100%; /* Fill the container height */
    object-fit: cover; /* Crop left and right, center horizontally */
    object-position: center; /* Center the image horizontally */
}

.popup-right {
    flex: 1 1 50%; /* Equal width with flexibility */
    display: flex;
    flex-direction: column;
    padding: 2vw 3vw;
    border-top-right-radius: 0.65vw;
    border-bottom-right-radius: 0.65vw;
}

.popup-right .popup-top p {
    text-align: center;
    font-size: var(--fluid-h2);
    font-weight: 800;
    line-height: 1.6;
    margin-bottom: 0;
    padding-bottom: var(--fluid-padding-x-small);
}

.popup-right p.popup-bottom {
    margin-bottom: 0;
    padding-bottom: var(--fluid-padding-x-small);
}

#popup-close {
    position: absolute;
    top: 0.65vw;
    right: 1vw;
    font-weight: 700;
    cursor: pointer;
    font-size: 1.4vw;
    color: #d3de50;
}

.popup-right .form-grid button {
    background-color: #f15823; /* Orange */
    color: #FFFFFF;
    padding: 10px;
    border: none;
    border-radius: 0.65vw;
    font-size: var(--fluid-button-font-size);
    font-weight: 700;
    cursor: pointer;
    width: 100%; /* Full width within its grid cell */
    height: 3.6vw; /* Match input height */
    transition: all 0.3s ease; /* Smooth transition for size and color changes */
}

.popup-right .form-grid button:hover {
    transform: scale(1.02); /* Increases size to 105% of original */
    background-color: #f15823; /* Slightly darker orange on hover */
}

.popup-right .form-grid input[type="email"] {
    width: 100%;
    padding: 0.5vw 1vw;
    border: 2px solid #2e3b85;
    border-radius: 0.65vw;
    font-size: var(--fluid-menu-font-size);
    height: 3.8vw; /* Consistent height */
    background-color: #FFFFFF;
    margin-bottom: 1vw;
}

.popup-right input[type="checkbox"] {
    width: var(--fluid-menu-font-size);
    height: var(--fluid-menu-font-size);
    margin-right: 8px; /* Space between checkbox and label text */
    vertical-align: middle; /* Align with label text */
    appearance: none; /* Remove default browser styling */
    -webkit-appearance: none; /* For WebKit browsers */
    border: 1px solid #2e3b85; /* Match form border color */
    background-color: #FFFFFF; /* White background */
    cursor: pointer;
}

.popup-right input[type="checkbox"]:checked {
    background-color: #2e3b85; /* Fill color when checked */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); /* Custom checkmark */
    background-size: var(--fluid-menu-font-size);
    background-position: center;
    background-repeat: no-repeat;
}

.popup-right label {
    font-size: var(--fluid-menu-small-font);
    color: #FFFFFF;
    display: block; /* Ensure label takes full width */
    margin-top: 10px; /* Space above checkbox */
}

.popup-right .menu-text {
    color: #FFFFFF;
}

.popup-right a:hover {
    color: #FFFFFF;
}

html {
  scroll-padding-top: 90px;
}

@media (max-width: 990px) {
    #popup-content {
        flex-direction: column;
        border-radius: 2vw;
        max-width: 80%;
        width: 80%;
        max-height: 90%;
    }
    #popup-close {
        top: 3.5vw;
        right: 3.5vw;
        font-size: 3.0vw;

    }
    .popup-right {
        border-radius: 1vw;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 10vw;
        padding-bottom: 5vw;
    }
    .popup-right .popup-top p {
        text-align: center;
        font-size: var(--fluid-h2-mobile);
        line-height: 2;
    }
    .popup-left {
        display: none;
    }
    .popup-right .popup-top p {
        font-size: var(--fluid-h2-mobile);
        padding-bottom: var(--fluid-padding-medium);
    }
    .popup-right .form-grid input[type="email"] {
        padding: 1vw 2vw;
        border-radius: 1vw;
        font-size: 1rem;
        height: 40px; /* Consistent height */
        margin-bottom: var(--fluid-padding-small);
    }
    .popup-right p.popup-bottom {
        padding-bottom: var(--fluid-padding-medium);
    }
    .popup-right .form-grid button {
        border-radius: 1vw;
        font-size: var(--fluid-button-font-size-mobile);
        height: 8vw;
        margin-bottom: var(--fluid-padding-x-small);
    }
    .popup-right input[type="checkbox"] {
        width: 1.2rem;
        height: 1.2rem;
    }

    .popup-right label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #popup-content {
        flex-direction: column;
        border-radius: 2vw;
        max-width: 95%;
        width: 95%;
    }
}

/* Mobile Menu Custom HTML Styling */
#offcanvas .ct-panel-content-inner{
    padding-left: 0px;
    padding-right: 0px;
}

#offcanvas .ct-panel-content-inner nav{
    padding-left: var(--fluid-narrow-padding-mobile);
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] {
    width: 100% !important; /* Full width override */
    max-width: 100% !important;
    height: auto !important; /* Allow natural height expansion */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content {
    width: 100% !important; /* Full width for entry-content */
    max-width: 100% !important;
    height: auto !important; /* Override computed height */
    padding: 0 !important; /* Remove any padding constraints */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu {
    width: 100% !important; /* Full width for top-menu */
    max-width: 100% !important;
    height: auto !important; /* Override any height constraints */
    min-height: 10vw !important; /* Minimum height for space */
    flex-direction: column !important; /* Force vertical stack */
    background-color: #2e3b85 !important; /* Blue background for container */
    padding: var(--fluid-narrow-padding-mobile) !important; /* Padding for height and spacing */
    align-items: stretch !important; /* Stretch items full width */
    gap: 2vw !important; /* Vertical space between items */
    overflow: visible !important; /* Prevent overflow clipping */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu .kontakt-item {
    order: 1 !important; /* Kontakt on top */
    width: 100% !important; /* Full width */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu .kontakt-item .yesbridge-button {
    width: 100% !important; /* Full width button */
    height: 12vw !important; /* Taller button */
    min-height: 12vw !important;
    font-size: max(22px,var(--fluid-button-font-size-mobile)) !important; /* Adjust font if needed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f15823 !important; /* Ensure button background isn't white */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu .login-item {
    order: 2 !important; /* LOGIN below */
    text-align: center !important; /* Center LOGIN */
    width: 100% !important; /* Full width */
    overflow: visible !important; /* Ensure visibility */
    background-color: transparent !important; /* No override background on item */
    padding: 1.75vw !important;
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu .login-item .decorated-link {
    display: inline-block !important; /* Ensure the wrapper is inline-block for text-width underline */
    width: auto !important; /* Auto width to match content */
    margin: 0 auto !important; /* Center the entire decorated-link */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-header-text[data-id="text"] .entry-content .top-menu .login-item .decorated-link a {
    color: white !important; /* White text for LOGIN */
    font-size: 18px;/*var(--fluid-footer-button-font-size-mobile) !important; /* Fixed font size */
    display: inline-block !important; /* Ensure centering works without full width */
    width: auto !important; /* Match text width for underline */
}

/* Desktop: Reinforce vertical centering and prevent top alignment */
@media (min-width: 990.1px) {
    .top-menu {
        flex-direction: row !important;
        background-color: transparent !important; /* No blue on desktop */
        align-items: center !important; /* Vertical center */
        height: 100% !important; /* Full height to match menu bar */
        padding: 0 1vw 0 0 !important; /* Add right padding to prevent overflow */
        gap: var(--fluid-menu-space-smaller) !important; /* Space between LOGIN and Kontakt */
    }

    .top-menu .login-item,
    .top-menu .kontakt-item {
        display: flex !important;
        align-items: center !important; /* Center vertically */
        height: 100% !important; /* Match parent height */
        margin: 0 !important; /* Reset margins causing top alignment */
    }

    .top-menu .yesbridge-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important; /* Auto height, centered within parent */
        max-height: 44px;
        margin: 0 !important; /* No extra margins */
        background-color: #f15823 !important; /* Preserve desktop button color */
    }

    .top-menu .decorated-link a {
        color: inherit !important; /* Preserve desktop text color */
    }
}

/* Hide search icon when mobile menu is open */
body:has(#offcanvas.active) button.ct-header-search {
    display: none !important;
}

.privacy-text {
    font-size: 90%;
}

.privacy-link {
    color: #2e3b85 !important;
    text-decoration: underline !important;
    /*font-size: var(--fluid-menu-small-font) !important;*/
    font-size: inherit !important;
}

.privacy-link:hover {
    color: #2e3b85 !important;
    text-decoration: underline !important;
    /*font-size: var(--fluid-menu-small-font) !important;*/
}

.privacy-link-cta{
    color: white !important;
    text-decoration: underline !important;
    font-size: inherit !important;
}
.privacy-link-cta:hover{
    color: white !important;
    text-decoration: underline !important;
    font-size: inherit !important;
}


#popup-close svg.ct-icon {
    width: 24px;  /* Increase for larger size (e.g., 30px or 2em for responsive) */
    height: 24px; /* Keep square for "X" shape */
}

#popup-close svg.ct-icon line {
    stroke-width: 3; /* Increase for thicker lines (e.g., 2.5 or 4) */
}

/* Base behavior for this special columns block */
.wp-block-columns.column-align {
    align-items: stretch; /* Ensures columns stretch to the same height */
}

.wp-block-columns.column-align .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content starting from the top */
}

.wp-block-columns.column-align .wp-block-column .decorated-link {
    margin-top: auto; /* Pushes the "Läs mer" link to the bottom of the column */
}

/* Stack ONLY this columns block for any viewport ≤ 990px */
@media (max-width: 990px) {

  /* Stack just this block – no global wp-block-columns selector */
  .wp-block-columns.column-align {
    display: block !important;
  }

  /* extra spacing between the stacked rows */
  .wp-block-columns.column-align > .wp-block-column {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }

  /* less bottom margin on paragraphs inside the columns */
  .wp-block-columns.column-align > .wp-block-column p {
    margin-block-end: 0.5rem !important;
    margin-bottom: 0.5rem !important; /* for browsers using margin-bottom */
  }

  /* optional: remove bottom margin on the last column */
  .wp-block-columns.column-align > .wp-block-column:last-child {
    margin-bottom: 0;
  }
}

.desktop-more-padding-bottom{
    padding-bottom: var(--fluid-padding-small);
}

@media (max-width: 990px) {
    .desktop-more-padding-bottom{
        padding-bottom: 0px;
    }
}

.no-margin-bottom {
    margin-bottom: 0 !important; /* Removes bottom margin */
}

.underlined span {
    position: relative;
    text-decoration: none !important; /* Remove default underline */
    color: inherit; /* Constant dark blue text color */
    display: inline-block; /* Ensure proper positioning with ::after */
    transform: translateZ(0);
    will-change: transform;
}

/* Green base underline */
.underlined span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px; /* Gap between text and underline; adjust to match screenshot (5-15px) */
    width: 100%; /* Full width of the link */
    height: 2px; /* Thickness of the underline */
    background-color: #d3de50; /* Solid green */
    z-index: 1; /* Base layer */
    transform: translateZ(0);
    will-change: transform;
}

/* Ensure off-canvas panel is visible and rendered on iOS */
#offcanvas.ct-panel.active {
    -webkit-transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    right: 0 !important; /* For right-side behavior */
}

#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
    background-color: #FFFFFF !important; /* Apply white only to the direct content wrapper */
    height: auto !important; /* Change from 100vh to auto to fit content only */
    max-height: calc(100vh - var(--fluid-menu-height-mobile)); /* Optional: cap at available viewport height minus header to prevent overflow if content is very long */
    overflow-y: auto !important; /* Keep scrolling if content exceeds max-height */
    -webkit-overflow-scrolling: touch;
    display: block !important;
}

/* Avoid overflow conflicts that break iOS menus */
#header.ct-header,
body[data-panel="in:right"] {
    overflow: visible !important; /* Remove any hidden overflow on header/body */
}

/* Ensure inner elements don't inherit transparency */
.ct-panel-content-inner,
.mobile-menu.menu-container {
    background-color: #ffffff !important;
}

/* Target iPhone SE viewport */
@media (max-width: 375px) {
    #offcanvas.active .mobile-menu {
        position: relative !important; /* Ensure not absolute/fixed in a way that hides it */
    }
}

/* Another iOS bug.. */
a[href^="tel"] {
    color: inherit !important; /* Inherit the white color from the parent */
    text-decoration: none !important; /* Remove default link underline if it interferes with your custom underline */
}
/* iOS Safari: prevent “data detectors” from adding their own underline/color */
a[x-apple-data-detectors],
a[x-apple-data-detectors-type],
a[href^="tel"],
a[href^="mailto"] {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important; /* just in case */
}

/*  In-line paragraph links */
p a {
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-color: #4A6FB5 !important;
    color: #4A6FB5;
    font-size: inherit;
}

p a:hover {
    text-decoration: underline;
    color: #001523;
    text-decoration-color: #4A6FB5;
    font-size: inherit;
}

/*  index links */
li a {
    text-underline-offset: 3px;
    text-decoration: none;
    text-decoration-color: #4A6FB5 !important;
    color: #4A6FB5;
    font-size: inherit;
}

li a:hover {
    text-decoration: underline;
    color: #001523;
    text-decoration-color: #4A6FB5;
    font-size: inherit;
}

.blue-bg p a {
    color: #add0ee;
    text-decoration-color: #add0ee !important;
    text-decoration: underline;
}

.blue-bg p a:hover {
    color: #ffffff;
    text-decoration-color: #add0ee !important;
    text-decoration: underline;
}

.smaller-icons a {
    height: 1.7vw;
    width: 1.7vw;
}

@media (max-width: 990px) {
    .smaller-icons a {
        height: 1.5rem;
        width: 1.5rem;
    }
}

@media (max-width: 990px) {
  .ct-header [data-device="desktop"] {
    display: none !important;
  }
  .ct-header [data-device="mobile"] {
    display: block !important;
  }
  .wp-block-columns.crop-4-2-mobile .wp-block-image {
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }
  .wp-block-columns.crop-4-2-mobile .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

@media (min-width: 990.1px) {
  .ct-header [data-device="desktop"] {
    display: block !important;
  }
  .ct-header [data-device="mobile"] {
    display: none !important;
  }
}

@media (max-width: 1180px) {

    .wp-block-columns.early-mobile.mobile-stack {
        flex-direction: column;
    }

    .wp-block-columns.early-mobile.mobile-stack-reverse {
        flex-direction: column-reverse !important;
    }

    .wp-block-columns.early-mobile.mobile-stack-reverse .wp-block-column,
    .wp-block-columns.early-mobile.mobile-stack .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .wp-block-columns.early-mobile.mobile-stack-reverse .wp-block-image.alignright,
    .wp-block-columns.early-mobile.mobile-stack .wp-block-image.alignright {
        margin-right: 0;
        margin-left: 0;
        width: 100% !important;
    }

    /* Ensure the figure takes the full width of the column */
    .wp-block-columns.early-mobile.mobile-stack-reverse .wp-block-column .wp-block-image,
    .wp-block-columns.early-mobile.mobile-stack .wp-block-column .wp-block-image {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Style the image to fill the width and crop vertically */
    .wp-block-columns.early-mobile.mobile-stack-reverse .wp-block-column .wp-block-image img,
    .wp-block-columns.early-mobile.mobile-stack .wp-block-column .wp-block-image img {
        width: 100% !important;
        /*height: 45vw !important;  Adjust this value as needed */
        object-fit: cover !important;
        object-position: center !important;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image .wp-block-column {
        display: contents;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image .wp-block-heading {
        order: 1;
        margin: 0px;
        padding: 0px;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image p {
        order: 3;
        margin: 0px;
        padding: 0px;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image .wp-block-image {
        order: 2;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image a.yesbridge-button-link {
        order: 4;
    }

    .wp-block-columns.early-mobile.mobile-stack.button-below-image div.wp-block-buttons {
        order: 4;
    }

}

@media (max-width: 480px) {
    .wp-block-columns.testimonial-mobile-stack .wp-block-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* <= 480px: input on first row, button on second, label on third */
@media (max-width: 480px) {
    .nyhetsbrev-form .form-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 2.5vw; /* a bit more breathing room vertically */
    }

    .nyhetsbrev-form input[type="email"],
    .nyhetsbrev-form button,
    .nyhetsbrev-form label {
        grid-column: 1 / -1;  /* Each spans full width of the grid */
    }

    .nyhetsbrev-form input[type="email"] {
        width: 100%;
        margin-right: 0;       /* Remove desktop right margin */
        height: auto;          /* Let height adapt better on tiny screens */
    }

    .nyhetsbrev-form button {
        width: 100%;           /* Full width of parent */
        height: auto;          /* Let content define height */
        min-height: 44px;      /* Tap-friendly size */
    }
}

/* Desktop: use CSS Grid only on this block */
@media (min-width: 991px) {
    .book-columns-fixed-right {
        display: grid !important;
        grid-template-columns:
            minmax(240px, 1fr)   /* LEFT column: never smaller than 340px, can grow */
            minmax(0, 750px);    /* RIGHT column: up to 750px, can shrink when needed */
        column-gap: var(--theme-content-spacing, 1.5rem);
        align-items: start;
    }

    /* Make sure inner columns don't fight widths */
    .book-columns-fixed-right > .wp-block-column {
        width: auto;
        margin: 0;
    }
}

/* Below 991px: fall back to normal WP columns behavior (flex) */
@media (max-width: 990px) {
    .book-columns-fixed-right {
        display: flex;      /* WP core uses flex for columns */
        flex-wrap: wrap;
    }

    .book-columns-fixed-right > .wp-block-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 990px) {
    /* Force wrapping at 2 columns */
    .wp-block-columns.testimonial-mobile-stack.wp-block-columns-is-layout-flex {
        flex-wrap: wrap !important;
    }

    .wp-block-columns.testimonial-mobile-stack .wp-block-column {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    /* Hide 3rd (and any extra) column to cap total cards at 9 */
    .wp-block-columns.testimonial-mobile-stack .wp-block-column:nth-child(n+3) {
        display: none;
    }
}

/* Keep your 1-column behavior on very small screens */
@media (max-width: 480px) {
    .wp-block-columns.testimonial-mobile-stack .wp-block-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Hide 2nd and 3rd columns on very small screens */
    .wp-block-columns.testimonial-mobile-stack .wp-block-column:nth-child(n+2) {
        display: none;
    }
}

.ct-toggle-dropdown-desktop svg.ct-icon{
  transform: scale(0.75);
  transform-origin: 50% 50%;
}

/* Yesbridge Kurs-knapp alignment (force) */
.yesbridge-kurs-button-wrapper {
  display: flex;
  width: 100%;
}

.yesbridge-kurs-button-wrapper.is-content-justification-left { justify-content: flex-start; }
.yesbridge-kurs-button-wrapper.is-content-justification-center { justify-content: center; }
.yesbridge-kurs-button-wrapper.is-content-justification-right { justify-content: flex-end; }

.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    border-radius: 12px;
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner__inner {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.cookie-banner__text h3 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
}

.cookie-banner__text p {
    margin: 0;
    line-height: 1.5;
}

.cookie-banner__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-banner__actions button {
    cursor: pointer;
    border: 0;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
}

#cookie-accept {
    background: #f15823;;
    color: #fff;
}

#cookie-reject {
    background: #e9ecef;
    color: #111;
}

@media (max-width: 990px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 12px;
    }

    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions {
        flex-direction: column;
    }
}

@media (max-width: 990px) {
  .goal-mobile-reorder {
    display: flex;
    flex-direction: column;
  }

  .goal-mobile-reorder > .goal-mobile-heading-row,
  .goal-mobile-reorder > .goal-mobile-content-row {
    display: contents;
  }

  .goal-mobile-reorder > .goal-mobile-heading-row > .wp-block-column:first-child {
    display: none;
  }

  .goal-mobile-reorder > .goal-mobile-content-row > .wp-block-column:first-child {
    order: 1;
  }

  .goal-mobile-reorder > .goal-mobile-heading-row > .wp-block-column:last-child {
    order: 2;
  }

  .goal-mobile-reorder > .goal-mobile-content-row > .wp-block-column:last-child {
    order: 3;
  }
}

.form-headline{
    font-size: var(--fluid-menu-font-size);
    font-weight: 700;
    line-height: 1.0;
}

/* FAQ section */
.yb-faq-section {
  margin: 4rem 0;
}

.yb-faq-title {
  margin: 0 0 0.75rem;
}

.yb-faq-intro {
  margin: 0 0 2rem;
  text-align: center;
}

/* Columns block */
.yb-faq-grid {
  gap: 1rem;
}

/* Optional: make each column stretch nicely */
.yb-faq-grid > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* FAQ item */
.yb-faq-item {
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yb-faq-item[open] {
  border-color: #ff931e;
}

/* Summary row */
.yb-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.25rem 4.25rem 1.25rem 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.yb-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus/minus icon */
.yb-faq-item summary::before,
.yb-faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #8fa09b;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.yb-faq-item summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.yb-faq-item[open] summary::before,
.yb-faq-item[open] summary::after {
  background: #ff931e;
}

.yb-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

/* Answer */
.yb-faq-item .yb-faq-answer,
.yb-faq-item > p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  line-height: 1.6;
}

/* Small hover effect on desktop */
@media (hover: hover) {
  .yb-faq-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .yb-faq-grid {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .yb-faq-item summary {
    padding: 1rem 3.75rem 1rem 1rem;
  }

  .yb-faq-item .yb-faq-answer,
  .yb-faq-item > p {
    padding: 0 1rem 1rem;
  }
}