/* fonts loaded */
/* PRIMARY */

@font-face {
   font-family: 'Roboto Condensed';
   src: local('Roboto Condensed'),
      url('/fonts/robotocondensed-variablefont_wght-webfont.woff2') format('woff2'),
      url('/fonts/robotocondensed-variablefont_wght-webfont.woff') format('woff');
}

@font-face {
   font-family: 'Roboto Condensed Italic';
   src: local('Roboto Condensed Italic'),
      url('/fonts/robotocondensed-italic-variablefont_wght-webfont.woff2') format('woff2'),
      url('/fonts/robotocondensed-italic-variablefont_wght-webfont.woff') format('woff');
}


/* SECONDARY */

@font-face {
   font-family: 'Roboto Light';
   src: local('Roboto Light'),
      url('/fonts/roboto-light-webfont.woff2') format('woff2'),
      url('/fonts/roboto-light-webfont.woff') format('woff');
   font-weight: lighter;
}

@font-face {
   font-family: 'Roboto Regular';
   src: local('Roboto Regular'),
      url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
      url('/fonts/roboto-regular-webfont.woff') format('woff');
}

@font-face {
   font-family: 'Roboto Medium';
   src: local('Roboto Medium'),
      url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
      url('/fonts/roboto-medium-webfont.woff') format('woff');
   font-weight: 500;
}

@font-face {
   font-family: 'Roboto Medium Italic';
   src: local('Roboto Medium Italic'),
      url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
      url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
   font-weight: 500;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto Bold';
   src: local('Roboto Bold'),
      url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
      url('/fonts/roboto-bold-webfont.woff') format('woff');
   font-weight: 700;
}

@font-face {
   font-family: 'Roboto Italic';
   src: local('Roboto Italic'),
      url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
      url('/fonts/roboto-italic-webfont.woff') format('woff');
   font-weight: 400;
   font-style: italic;
}


@font-face {
   font-family: 'Roboto Light Italic';
   src: local('Roboto Light Italic'),
      url('/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
      url('/fonts/roboto-lightitalic-webfont.woff') format('woff');
   font-weight: 200;
   font-style: italic;
}


/* global styling */

/* variables */

:root {
   --clr-cta: #0075e3;
   --clr-mutedcta: #2e4459;
   --clr-inactive: #aec4da;
   /*   1a82e2*/
   --clr-cta-line: #c1d6eb;
   --clr-primary: #e2f1ff;
   --clr-copy: #3a3a3a;
   --clr-lead: #555;
   --clr-black: #000;
   --clr-offblack: #161616;
   --clr-italic: #585858;
   --clr-gray: #454545;
   --clr-mediumgray: #727272;
   --clr-lightgray: #d2d2d2;
   --clr-brightgray: #ebebeb;
   --clr-header: #eeeeee;

   --clr-secondary: #f6f6f6;
   --clr-secondary-400: #ebf3fa;
   --clr-inline: #b3d8fa;

   --clr-accent: #0763b9;
   --clr-active: #0d3e6c;
   --clr-lightcta: #EFF8FF;
   --clr-darkcta: #000e1c;

   --clr-offwhite-bg: #f6f6f6;
   --clr-offwhite-light: #fafafa;
   --clr-white: #fff;

   --clr-neutral-shadow: hsl(0 0% 42% / 0.25);
   --clr-primary-shadow: hsl(209 79% 24% / 0.20);
   --clr-secondary-shadow: hsl(31 75% 14% / 0.10);
   --clr-nav-shadow: 0 4px 8px hsl(0 0% 35% / 0.20);
   --clr-card-shadow: 0 4px 8px hsl(0 0% 35% / 0.12);

   --gradient-secondary-bg: linear-gradient(160deg, var(--clr-secondary), var(--clr-secondary-400));
   --primary-bg: rgb(226, 241, 255, 0.9);

   --padding-tight: 0.3rem;
   --padding-small: 0.5rem;
   --padding-close: 1rem;
   --padding-normal: 1.5rem;
   --padding-big: 3rem;
   --padding-bigger: 4rem;
   --padding-huge: 6rem;

   --ff-primary: 'Roboto Condensed', sans-serif;
   --ff-secondary: 'Roboto Regular', sans-serif;
   --ff-roboto-light: 'Roboto Light', sans-serif;
   --ff-roboto-lightitalic: 'Roboto Light Italic', sans-serif;
   --ff-roboto-medium: 'Roboto Medium', sans-serif;
   --ff-roboto-mediumitalic: 'Roboto Medium Italic', sans-serif;
   --ff-roboto-bold: 'Roboto Bold', sans-serif;

   --margins-mobile: min(100% - 2rem, 98%);
   --margins-tablet: min(100% - 2rem, 90%);
   --margins-normal: min(100% - 2rem, 70%);

   --side-margins-mobile: 100%;
   --side-margins-tablet: 100%;
   --side-margins-normal: 100%;


}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding: 5rem;
}

body {
   display: flex;
   flex-direction: column;
   height: 100vh;

   color: var(--clr-neutral-100);

   margin: 0;
   padding: 0;

   font-family: var(--ff-secondary);
   font-size: 1em;
}

/* body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/Gyllene\ snittet_BL.png') center no-repeat;
    background-size: cover;
    z-index: 1;

} */


::selection {
   color: var(--clr-white);
   background: var(--clr-accent);
}

.margins {
   width: var(--margins-normal);
   margin-inline: auto;
}

.side-margins,
.info-margins {
   width: var(--side-margins-normal);
   padding-inline: var(--padding-normal);
}

.logo-brand {
   width: 300px;
   cursor: pointer;
}

.logo-icon {
   width: 32px;
   margin: 0;
   padding: 0;
}

.btn-icon {
   width: 20px;
   height: 20px;
}
.btn-label {
   font-size: 0.85rem;
   font-weight: 400;
}

.btn-hamburger {
   all: unset;
   display: grid;
   width: 50px;
   aspect-ratio: 1;

   place-items: center;
   z-index: 999;
   touch-action: manipulation;
}

.hero-banner {
   position: relative;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   isolation: isolate;

   /* Startvärde för “zoom ut”: börjar lite inzoomad och zoomar ut mot 1.0 */
   --hero-bg-scale: 1.14;
}

.hero-banner::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;

   background: url("/img/bg6_lo.webp");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

   transform: scale(var(--hero-bg-scale));
   transform-origin: center;
   will-change: transform;
}

@media (min-width: 900px) {
   .hero-banner::before {
      background-image: url("/img/bg6_med.webp");
   }
}

@media (min-width: 1440px) {
   .hero-banner::before {
      background-image: url("/img/bg6_hi.webp");
   }
}

@media (min-width: 1920px) {
   .hero-banner::before {
      background-image: url("/img/bg6_ultra.webp");
   }
}

.hero-banner::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to right,
         hsl(209 100% 94% / 1),
         hsl(209 100% 94% / 0.95),
         hsl(0 0% 100% / 0) 70%);
   z-index: -1;
}



/* FIXME: Se till att alla priser och beräkningar visas i svart obs mange har kladdat in den här delen kolla det sen */
.sale-price,
.calculation-result,
.savings-result {
   color: var(--clr-black);

}


.sale-price {
   padding-top: 0;
   margin-top: 0;

   font-weight: bold;

}

@media (prefers-reduced-motion: no-preference) {

   @keyframes slide-in-effect {
      from {
         transform: translateX(-100%);
      }

      to {
         transform: translateX(0);
      }
   }
}


@media (max-width: 763px) {
   .hero-banner::after {
      transform: translateX(0%);
      background: linear-gradient(to top, hsl(209 100% 94% / 1), hsl(209 100% 94% / 0.95), hsl(0 0% 100% / 0) 70%);
   }
}

.top-nav {
   position: fixed;
   top: 0;

   display: flex;

   align-items: center;
   gap: 1rem;
   z-index: 99;
   justify-content: space-between;

   padding-block: 0;
   padding-inline: var(--padding-normal);
   margin-block: 0;
   width: 100%;

   isolation: isolate;

   transition: transform 0.3s ease,
      opacity 0.3s ease,
      box-shadow 250ms ease-out;

   transform: translateY(0);
   /* Utgångsläget för menyn */
}

.top-nav.hidden {
   transform: translateY(-120%);
   /* Hissar upp menyn utanför sikte */

}



.top-nav::after {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0;
   /* Initially hidden */
   background: linear-gradient(to bottom, var(--clr-white), hsl(0 0% 100% / 0.7));
   backdrop-filter: blur(8px);

   z-index: -1;
   transition: opacity 250ms ease-in-out;
}

.top-nav.scrolled::after {
   opacity: 1;
   box-shadow: var(--clr-nav-shadow);
   /* Fade in background */
}


.padding-top {
   margin-top: var(--padding-normal);
}

.padding-top-close {
   margin-top: var(--padding-close);
}


.padding-top-huge {
   margin-top: var(--padding-huge);
}


.padding-top-big {
   margin-top: var(--padding-big);
}

.padding-top-bigger {
   margin-top: var(--padding-bigger);
}

.padding-bottom {
   margin-bottom: var(--padding-normal);
}

.padding-bottom-close {
   margin-bottom: var(--padding-close);
}

.padding-bottom-big {
   margin-bottom: var(--padding-big);
}

.padding {
   margin-block: var(--padding-normal);
}

.padding-close {
   margin-block: var(--padding-close);
}

.padding-small {
   margin-block: var(--padding-small);
}

.padding-tight {
   margin-block: var(--padding-tight);
}


.margin-bottom {
   padding-bottom: var(--padding-tight);
}

.margin-bottom-normal {
   padding-bottom: var(--padding-close);
}

/* card styling */

.card-margins {
   width: var(--margins-normal);
   margin-inline: auto;
}


.card-layout {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   width: 100%;

   gap: var(--padding-normal);
}

.card-agent-layout,
.card-list-layout {
   display: flex;
   flex-direction: column;
   gap: var(--padding-normal);
}

.card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: var(--clr-secondary-400);
   box-shadow: 0 4px 12px var(--clr-secondary-shadow);

}

.card-style {
   padding: var(--padding-normal);
   border-radius: var(--padding-small);


}

.info-card {
   padding: var(--padding-normal);

   border-radius: var(--padding-small);
   background-color: var(--clr-white);
   margin-bottom: var(--padding-big);
}

.grid-card-style {
   border-radius: var(--padding-close);
   padding-block: 0;
   margin-block: 0;
}


.grid-card-layout {
   display: grid;
   grid-template-columns: 1fr 1.618fr;

   margin: 0;
   padding: 0;
}

@media (max-width: 480px) {


   .top-nav { 
      padding-block: var(--padding-close);
   }

   .nav-link {
      padding-block: var(--padding-close);

   }

   
   .grid-card-layout {
      display: flex;
      flex-direction: column;
   }

   .right-object {

      justify-content: center;
      width: 100%;
   }
}

.grid-card-layout img {
   object-fit: contain;

   height: 100%;
   margin: 0;
   padding: 0;

}

.border {
   border: 1px solid var(--clr-lightgray);


}

/* Layout för varje mäklarkort */
.agent-card,
.agent-card-style {
   all: unset;

   display: grid;
   grid-template-columns: 150px 1fr auto;
   grid-template-rows: auto auto;
   column-gap: var(--padding-close);
   row-gap: var(--padding-tight);
   align-items: center;

   border-radius: none;

   padding: var(--padding-tight) var(--padding-close) 0 var(--padding-close);

   transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;

   cursor: pointer;
   border-bottom: 1px solid var(--clr-lightgray);

}


.agent-card:hover,
.agent-card:focus,
.agent-card:focus-within {
   background-color: var(--clr-white);
   box-shadow: var(--clr-card-shadow);
   outline: none;
   border-bottom: none;
   border-radius: var(--padding-tight);

}


.agent-card:hover .card-body,
.agent-card:focus .card-body,
.agent-card:focus-within .card-body {
   border-bottom: 1px solid transparent;
}

.agent-card:active {
   background-color: var(--clr-lightgray);
   box-shadow: 0 0 0 transparent;
}

/* Ikon – kolumn 1, rad 1 */
.agent-card .card-icon {
   grid-column: 1;
   grid-row: 1;
   align-self: center;
   /* i nivå med titel/knapp */
   margin-block: 0;
   padding-left: var(--padding-tight);
}


/* Titel – kolumn 2, rad 1 */
.card-title {
   grid-column: 2;
   grid-row: 1;
   align-self: center;
   padding-block: var(--padding-tight) var(--padding-close);
   line-height: 1;
   /* i nivå med ikon/knapp */
}

.card-title .heading-3 {
   margin-block: 0;
   /* undvik extra radhöjd */
   line-height: 1.1;
   /* kompakt men läsbar */
}

/* CTA – kolumn 3, rad 1, högerställd */
.card-cta,
.card-details-cta,
.agent-card>.cta,
.agent-card> :nth-child(3) {
   grid-column: 3;
   grid-row: 1;
   justify-self: end;
   align-self: center;
   /* i nivå med ikon/titel */
   white-space: nowrap;
}

/* Om du använder en span som “knapp”, hindra den från att öka höjden */
.card-cta span,
.card-details-cta span,
.agent-card>.cta span {
   display: inline-flex;
   align-items: center;
   margin: 0;
   line-height: 1;
}

/* Brödtext + rekommendation – rad 2, spänner över kolumn 2–3
   (underline/border går inte under ikonen) */
.card-body {
   grid-column: 2 / 4;
   /* kolumn 2–3 */
   grid-row: 2;
   padding-bottom: var(--padding-normal);
   align-self: stretch;
   /* påverkar inte rad 1 */
}


/* Små justeringar */
.agent-description {
   max-width: 64ch;
}



.shadow {
   box-shadow: 0 4px 12px var(--clr-secondary-shadow);
}

.step-header {
   width: 100%;
   margin-block: 0 var(--padding-close);
   padding-block: var(--padding-big) var(--padding-close);
   /* Lower alpha for more blur effect */

}

.card-agent,
.card-list-agent {
   display: grid;
   grid-template-columns: 50px 2fr;

   background: var(--clr-white);
}

.width-100 {
   width: 100%;
}


.card-icon {
   display: grid;
   justify-content: center;
   align-items: top;
   margin-block: 2rem;
}

.card-list-agent {
   grid-template-columns: minmax(60px, 1fr) 5fr auto;
   max-height: 5rem;
   background-color: var(--clr-offwhite-bg);
   transition: background-color 250ms ease-in-out,
      box-shadow 250ms ease-in-out;

   box-shadow: 0 4px 8px var(--clr-neutral-shadow);

}


.card,
.card-agent {
   box-shadow: 0 4px 12px var(--clr-neutral-shadow);
   border-radius: var(--padding-close);
   transition: box-shadow 140ms ease-in-out;
}

.card-agent-image {
   border-radius: var(--padding-close) 0 0 var(--padding-close);

   max-width: 50%;
   object-fit: cover;


   padding: 0;
   margin: 0;
}

.card-image-slot {
   display: flex;
   justify-content: top;
   align-items: left;
   margin: 0;
   padding: 0;
   padding-bottom: 1rem;
}

.card-agent-image-container {
   width: 100px;
   height: 100px;
   overflow: hidden;
}


.card-agent-details {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--padding-normal);
}


.card-details {
   flex: 0 1 0px;
   font-size: clamp(1.2rem, 1.4rem, 1.4vw);
   font-weight: normal;
   line-height: 1.2;
   padding: var(--padding-close);
}

.card-details-cta {
   position: relative;
   padding: var(--padding-close);

   border-radius: 0 0 var(--padding-close) var(--padding-close);
   display: grid;
}




/* Rund initial-ikon med neutral grå bakgrund */
/* .avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--clr-mediumgray, #e5e7eb);
   
   color: var(--clr-white, #fff);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-family: inherit;
   letter-spacing: .3px;
   text-transform: uppercase;
   user-select: none;
   line-height: 1;
}


.avatar[data-len="1"] {
   font-size: 14px;
}

.avatar[data-len="2"] {
   font-size: 13px;
}

.avatar[data-len="3"] {
   font-size: 11px;
} */


.card img {
   border-radius: var(--padding-close) var(--padding-close) 0 0;
}


.card-details p span {
   color: var(--clr-gray);
}

.card-details p {

   padding-top: 0;
   margin-top: 0;
}

.card-list-agent img {
   max-height: 5rem;
}


/* checkboxes card */

.agent-container {
   display: flex;
   flex-direction: column;
   gap: var(--padding-close);

}

.checkbox-card {
   display: grid;
   grid-template-columns: 150px 2fr auto;

   background-color: var(--clr-white);
   border-radius: var(--padding-tight);

   transition: box-shadow 140ms ease-in-out, background-color 150ms ease-in-out;
   cursor: pointer;
   box-shadow: 0 4px 8px var(--clr-primary-shadow);
   position: relative;
   /* Ensures the label can properly encapsulate */
}

.checkbox-card img {
   border-radius: var(--padding-tight) 0 0 var(--padding-tight);
   width: 100px;
   /* Always fills the grid column */
   height: 100%;
   min-height: 100px;
   /* Force a minimum height */
   object-fit: cover;
   /* Crop the image instead of shrinking it */
}



.checkbox-button-label {
   padding: var(--padding-close);
   display: grid;
   place-items: center;
}

.checkbox-button-label p {
   padding: 0;
   margin: 0;
}

/* the checkbox label textbutton */
.checkbox-button-label span:last-child:after {
   content: 'Lägg till';
   font-weight: bold;
   color: var(--clr-cta);
}

/* Hover effect */
.label-checkbox:hover>.checkbox-card,
.label-checkbox:focus-within>.checkbox-card {
   background-color: var(--clr-primary);
   outline: 1px solid var(--clr-cta);
}


/* Hidden checkbox */
.agent-checkbox {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

/* Checked state */
.agent-checkbox:checked+.checkbox-card {
   background-color: var(--clr-primary);
   box-shadow: none;
}


.agent-checkbox:checked+.checkbox-card .checkbox-button-label span:last-child::after {
   content: 'Ta bort';
   font-weight: bold;
   color: var(--clr-gray);
}


/* ============================================
   FAQ accordion (MäklarAvtal) – A11y + SEO
   ============================================ */

.faq-accordion {
   max-width: 70ch;
   margin-inline: auto;
}

/* Varje rad */
.faq-item {
   scroll-margin-top: 110px;
}

.faq-question {
   margin: 0;
}

/* Vi bygger layouten inuti knappen men behåller ert designspråk via .btn-accordion */
.btn-accordion.faq-trigger {
   padding: var(--padding-close) 0;
   width: 100%;
   color: var(--clr-gray);
}

/* Inre grid: ikon | text | chevron */
.faq-trigger__inner {
   display: grid;
   grid-template-columns: 2.3rem 1fr 1.6rem;
   gap: var(--padding-small);
}

/* Ikoner */
.faq-icon-svg,
.faq-chevron-svg {
   width: 32px;
   height: 32px;
   display: block;
   fill: var(--clr-gray);
}

.faq-chevron-svg {
   width: 18px;
   height: 18px;
   transition: transform 180ms ease;
}

/* Texten */
.faq-caption {
   display: flex;
   align-items: center;
   font-family: var(--ff-secondary);
   font-weight: 600;
   color: var(--clr-lead);

   font-size: 1rem;
   text-wrap: pretty;

   text-align: left;
}

/* Öppet läge */
.faq-item.is-open .faq-chevron-svg {
   transform: rotate(180deg);
}

.faq-item.is-open .faq-icon-svg,
.faq-item.is-open .faq-chevron-svg {
   fill: var(--clr-cta);
}

/* Panel */
.faq-panel {
   padding: 0 0 var(--padding-normal) 0;
}


/* Er .accordion-content har redan en desktop-indent (2.3rem).
   Det gör att brödtexten linjerar snyggt med frågetexten efter ikonen. */
.faq-panel .copy {
   max-width: 62ch;
   padding-bottom: var(--padding-tight);

}

/* Fokus (tangentbord) – tydligt och konsekvent */
.btn-accordion.faq-trigger:focus-visible {
   outline: 1px solid var(--clr-cta);
   outline-offset: 4px;
   border-radius: var(--padding-tight);
}

/* Reduced motion: ta bort visuella transitions */
@media (prefers-reduced-motion: reduce) {
   .faq-chevron-svg {
      transition: none;
   }
}



/* card layout carousel on smaller screens */

/* only enlarge card if not on cell */
@media (max-width: 763px) {

   .card:focus-within,
   .card:hover {
      box-shadow: 0 0 24px var(--clr-secondary-shadow);
   }

   .card-agent:focus-within,
   .card-agent:hover {
      box-shadow: 0 4px 24px var(--clr-neutral-shadow);

   }
}


@media (max-width: 480px) {

   .card-layout,
   .card-agent-layout {
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      gap: var(--padding-close);
      padding: var(--padding-normal) var(--padding-close);
      width: 100%;
   }

   .card,
   .card-agent {
      flex: 0 0 auto;
      width: 95%;

      scroll-snap-align: center;
   }

   .card-agent {
      display: flex;
      flex-direction: column;

   }



   /* 
  .card-margins header {
    width: var(--margins-mobile);
    margin-inline: auto;
  } */

   /* Hide scrollbars on the container */
   .card-layout::-webkit-scrollbar {
      display: none;
   }

   .card-layout {
      gap: var(--padding-close);
   }

   .contract-group-details {
      display: block;
   }

   .contract-group-details label {
      display: block;
      align-items: center;
      padding: 0;
      margin: 0;
      margin-bottom: var(--padding-tight);
   }

   .card-margins {
      width: 100%;
      margin-inline: auto;
   }
}


/* layout styling */
hr.divider {
   border: none;
   height: 1px;
   background-color: var(--clr-cta-line);
}


.subpage-header {
   position: relative;
   padding-block: var(--padding-huge) var(--padding-normal);
   isolation: isolate;
   width: 100%;
   border-bottom: 1px solid var(--clr-lightgray);
}

/* .subpage-header::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 8px;
   background: linear-gradient(to top, var(--clr-primary-shadow), transparent);
   z-index: 1;
   pointer-events: none;
} */

.subpage-header::before {
   content: '';
   position: absolute;
   right: 0;
   width: 66%;
   height: 100%;
   background: linear-gradient(to right, var(--clr-header), transparent), url('/img/bg4.webp') no-repeat center;
   background-size: cover;
   top: 0;
   opacity: 0.5;
   /* Adjust the opacity to make the image more transparent */
   z-index: -1;
}

.center-heading {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.left-layout {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
}

.grid-layout {
   display: grid;
   grid-template-columns: 1fr 1.618fr;

   gap: var(--padding-big);
}

.auto {
   grid-template-columns: auto 1fr;
}


.gray-text {
   color: var(--clr-mediumgray);
}

.reversed {
   grid-template-columns: 1.618fr 1fr;
}

.align-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.align-right {

   text-align: right;
}

.align-bottom {
   display: flex;

   align-items: flex-end;
}

.position-top {
   display: flex;
   align-items: flex-start;
   height: 100%;

}

.align-top {
   display: flex;
   flex-direction: column;

   justify-items: start;
   height: 100%;
}

.right-object {
   display: flex;
   justify-content: flex-end;
}

.center-object {
   display: flex;
   justify-content: center;
}

.nav-branding {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 1rem;
}

.flex-layout,
.perm-flex-layout,
.contact-field,
.btn-layout,
.perm-btn-layout {
   display: flex;
   gap: var(--padding-close);

   align-items: center;

}

.contact-field {
   gap: var(--padding-tight);
   display: grid;

   grid-template-columns: 32px 1fr;
}

/* Turnstile visas bara om Cloudflare kräver en interaktion; ligger då diskret till vänster i knappraden */
.contact-layout .cf-turnstile {
   margin-right: auto;
   line-height: 0;
}

.contact-field div:first-child {
   display: flex;
   flex-direction: column;
   height: 100%;
   align-items: flex-start;
   margin-top: var(--padding-normal);
}

.flex-header {
   display: flex;
   justify-content: space-between;
}

.column {
   flex-direction: column;
}

.slider-container {
   max-width: 100%;
   display: flex;
   align-items: center;
   gap: var(--padding-close);
}

.max-width {

   max-width: 100%;
}

.max-width * {
   flex-grow: 1;
}

.hero-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   height: 66%;
   align-items: end;

   /* animation: slide-up-effect 50ms 1s forwards ease-in; */
}

.no-grow {
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   align-self: flex-start;
}

.flex-grow {
   flex-grow: 1;
   max-width: 100%;
   flex-shrink: 0;
   flex-basis: auto;
   align-self: flex-start;
}

section,
footer {
   padding-block: var(--padding-big);
}


main>section {
   padding-block: var(--padding-huge);

}

main>section:first-child {
   padding-top: var(--padding-normal);
}

.keywords-info-box {
   display: flex;
   align-items: start;
   justify-content: space-between;

   gap: var(--padding-small);
   margin-bottom: var(--padding-tight);
   /* border-bottom: 1px solid var(--clr-neutral-50); */

}

.keywords-inner {
   display: flex;
   align-items: start;
   gap: var(--padding-small);
}

.side-content {
   display: flex;
   width: 100%;
   padding-block: var(--padding-normal);
   gap: var(--padding-normal);

}

.side-content>div {
   flex-grow: 1;
   flex-basis: 65%;
}


aside.keywords-sidebar {
   position: sticky;
   top: var(--padding-normal);
   border-radius: var(--padding-small);
   background-color: var(--clr-white);
   border: 1px solid var(--clr-lightgray);
   place-self: start;
   flex-grow: 1;
   width: auto;
}

.padding-around {
   padding: var(--padding-normal);

}

.border-radius-top {
   border-radius: var(--padding-small) var(--padding-small) 0 0;

}

.border-radius-bottom {
   border-radius: 0 0 var(--padding-small) var(--padding-small);

}

.border-line-bottom {
   border-bottom: 1px solid var(--clr-lightgray);
}

.step-section {

   padding-block: 0 var(--padding-huge);

}


@media (prefers-reduced-motion: no-preference) {
   @keyframes slide-up-effect {
      from {
         transform: translateY(50%);
         opacity: 0;
      }

      to {
         transform: translateY(0);
         opacity: 1;
      }
   }
}

@media (prefers-reduced-motion: reduce) {
   .hero-layout {
      opacity: 1;
   }
}

@media (max-width: 763px) {
   .hero-layout {
      display: block;
      opacity: 1;

   }
}

/* background styling */

.blue-bg {
   background-color: var(--clr-primary);
}

.lightblue-bg {
   background-color: var(--clr-lightcta);

}

.offwhite-light-bg {
   background-color: var(--clr-offwhite-light);
}

.white-bg {
   background-color: var(--clr-offwhite-bg);
}

.secondary-bg {
   background-color: var(--clr-secondary);
}

.white-bg {
   background-color: var(--clr-offwhite-bg);
}

.purewhite-bg {
   background-color: var(--clr-white);

}


.orange-bg {
   background: var(--clr-secondary);
}

.gray-bg {
   background: var(--clr-header);
}

.cta {
   background-color: var(--clr-primary);
}

.grid-row-span-2 {
   grid-row: span 2;
}

.grid-col-span-2 {
   grid-column: span 2;
}

.primary-navigation,
.secondary-navigation {
   display: flex;
   column-gap: clamp(1rem, 2vw, 2rem);
   row-gap: 0.5rem;
   font-family: var(--ff-secondary);
   list-style: none;
   align-items: center;
   white-space: nowrap;
   padding-left: 0;
}

.secondary-navigation {
   margin-top: 0;
   flex-direction: column;
   align-items: start;
   gap: clamp(0.5rem, 1vw, 1.5rem);
}


.footer-navigation {
   display: flex;
   flex-direction: column;
   margin-top: 0;

   gap: clamp(0.5rem, 1vw, 1.5rem);

   list-style: none;
   padding-left: 0;
   align-items: end;
}


.footer-container div p.heading {
   text-align: right;
   margin-top: 0;

}


/* footer styling */

footer {
   margin-top: auto;
   position: relative;
   margin-top: auto;
}


.footer-container {

   display: grid;
   grid-template-columns: 2fr auto 1fr;
}


/* image styling */

.logo {
   width: 24px;
   display: grid;
   place-items: center;
}

.logo-button {
   width: 36px;
   margin-block: 0 var(--padding-tight);

}


img {
   display: block;

   max-width: 100%;
   object-fit: cover;

   font-family: var(--ff-roboto-lightitalic);
   color: var(--clr-mediumgray);
}

.inline-image {
   border-radius: var(--padding-tight);
}

.contain-image {
   background-image: var(--bg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
   /* bygger på att föräldern redan har höjd */
   overflow: hidden;
   border-radius: 0.95rem 0 0 0.95rem;

   transition: width 500ms ease-in-out,
      height 500ms ease-in-out;
}

.right-border-radius {
   border-radius: 0 0.95rem 0.95rem 0;

}

.logo-image {
   width: 1.5rem;
   object-fit: contain;
   filter: grayscale();
   transition: filter 250ms;
   cursor: pointer;
}

.brand-image {
   width: 150px;
   object-fit: cover;
}

.logo-image:hover {
   filter: none;
}

.icon {
   width: 32px;
   height: 32px;

}


.inline-icon {
   display: inline-block;
   width: 24px;
   height: 24px;
}

.main-logo {
   cursor: pointer;
   flex-grow: 0;
   margin-block: 0;
   width: 32px;
   height: 32px;
}


/* aimatimon styling 
*/
.hidden-agents {
   display: none;
   opacity: 0;
}

.agent-list-unfurl {
   display: block;
   animation: agentListUnfurl 0.4s ease-in-out forwards;
}

.agent-list-furl {
   animation: agentListFurl 0.4s ease-in-out forwards;
}

@keyframes agentListUnfurl {
   from {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
      visibility: hidden;
   }

   to {
      opacity: 1;
      transform: translateY(0);
      max-height: 500px;
      /* Adjust based on content */
      visibility: visible;
   }
}

@keyframes agentListFurl {
   from {
      opacity: 1;
      transform: translateY(0);
      max-height: 500px;
      visibility: visible;
   }

   to {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
      visibility: hidden;
   }
}


/* text styling */

/* fonts: heading styling */
/* color: var(--clr-neutral-100);
font-weight: 500;
margin-bottom: 1rem; */

.required {
   color: red;
   vertical-align: super;
   font-size: 0.8em;
}

.cta-color {
   color: var(--clr-cta);
}

.mutedcta {
   color: var(--clr-mutedcta);
}

.step {
   color: var(--clr-cta);
   font-weight: 600;
}

.step-label {
   color: var(--clr-cta);
   font-weight: 600;
   font-size: 0.9rem;
   margin: 0 0 0.25rem;
}

.error,
.warning {
   color: red;
}

.gap-tight {
   gap: var(--padding-tight);
}

.gap-close {
   gap: var(--padding-close);
}

.gap-normal {
   gap: var(--padding-normal);
}

.box-padding {
   padding-block: var(--padding-normal);
   padding-right: var(--padding-normal);
}

.main-logobrand,
.footer-logobrand {
   width: 120px;
   margin: 0;
}

.main-title {
   max-width: 36ch;
   font-weight: 900;
   font-size: clamp(2.7rem, 3.6vw, 4rem);
   line-height: 1.05;
   margin-bottom: 0;
   text-wrap: balance;

}

p {
   color: var(--clr-primary);
   line-height: 1.5;
   margin-bottom: 0.3vh;
}



.inverted {
   color: var(--clr-active);
   margin: 0;
}

.center {
   text-align: center;
   padding: 0;
   margin: 0;
}


.obligatory {
   color: var(--clr-secondary);
}


h1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
.heading,
h5,
.heading-5,
h6 {
   font-family: var(--ff-primary);
   color: var(--clr-black);
   margin-top: 0;
   line-height: 1;
   /* Set a reasonable default line height */

}

h1,
.heading-1 {
   color: var(--clr-offblack);
   font-size: clamp(2.7rem, 3.6vw, 4rem);
   margin-block: 2rem;

}

h2,
.heading-2 {
   font-size: clamp(2rem, 2.5vw, 3rem);

   word-wrap: break-word;
   overflow-wrap: break-word;

   font-weight: bold;


}

h2 {
   margin-bottom: 0;
   line-height: 1.2;
}

.heading-2 {
   margin-bottom: 2rem;
}

h3,
.heading-3 {
   font-size: clamp(1.2rem, 2vw, 2rem);
   margin-bottom: var(--padding-tight);
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
   margin-block: 1rem;

}


h4,
.heading-4,
.heading {
   font-size: clamp(1.2rem, 1.2vw, 1.2rem);
}

.heading-4,
.heading {
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 0.05rem;
}

.heading {
   padding-bottom: 0.5rem;
}

.heading-5 {
   font-size: 1.2rem;
   font-weight: bold;
}

.subpage {
   font-size: clamp(2.5rem, 2.5vw, 3rem);
   padding-bottom: 0;
   margin-block: 0;
   /* Set a reasonable default line height */
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;


}

h2.subpage {
   font-size: clamp(1.5rem, 2vw, 2rem);
   padding-bottom: var(--padding-tight);
   word-wrap: break-word;
   overflow-wrap: break-word;
   color: inherit;
   font-family: var(--ff-primary);
   padding: 0;
   font-weight: bold;

}

h3.subpage {
   font-size: clamp(1.2rem, 1.5vw, 1.5rem);
}

h4.subpage {
   font-size: clamp(1.125rem, 1.125vw, 1.125rem);
}


.copy {
   color: var(--clr-copy);
   line-height: 1.5;
   margin-block: 0 0.5rem;
   font-size: 1rem;
}

.max-copy-length {
   max-width: 74ch;
   text-wrap: balance;
}

.max-copy-card {
   max-width: 42ch;
}

.small-text {
   font-size: 0.8rem;
   color: var(--clr-active);
}

.copy-lead {
   color: var(--clr-gray);
   font-weight: 400;
}

.lead, .lead-copy{
   font-weight: 500;
   font-size: 1.2rem;
   font-family: 'Roboto Medium', sans-serif;
   padding-block: var(--padding-close);

   color: var(--clr-lead);
}

.lead-copy {
   font-weight: 400;
   padding-block: 0;
   margin-block: var(--padding-close);
   font-family: 'Roboto', sans-serif;

}

.sublead {
   font-size: 1.2rem;
   font-family: 'Roboto', sans-serif;
   padding-block: 0;
   margin-block: var(--padding-tight) var(--padding-close);
   color: var(--clr-lead);

}


.eyebrow {
   display: block;
   font-weight: 600;
   letter-spacing: 0.04em;
   font-family: 'Roboto Light', sans-serif;

   font-size: 1.125rem;
   text-transform: uppercase;
   color: var(--clr-mediumgray);
   margin-bottom: 0.5rem;

}


.step-lead {
   margin-top: 0;
}

.cta-lead {
   max-width: 42ch;
   text-wrap: balance;
}

.heading-italic,
.italic {
   font-family: 'Roboto Medium Italic', sans-serif;
   color: var(--clr-lead);

   margin-bottom: var(--padding-normal);
}

.subtitle {
   font-weight: bold;
   font-size: 24px;
}

.heading-italic {
   font-family: 'Roboto Light Italic', sans-serif;
   color: var(--clr-gray);
   font-size: 1rem;
}

.medium {
   font-family: 'Roboto Medium', sans-serif;
   color: inherit;
   font-style: inherit;

}

.light {
   font-family: 'Roboto Light', sans-serif;
   color: var(--clr-lead);
   font-size: 1.5rem;
   margin-bottom: var(--padding-normal);
}

.light-italic {
   font-family: 'Roboto Light Italic', sans-serif;
   color: var(--clr-lead);

   margin-bottom: var(--padding-normal);
}

.bold {
   font-family: 'Roboto Bold', sans-serif;
   font-style: inherit;
   font-weight: 700;
   color: inherit;
}

.cta-color {
   font-weight: 600;
   color: var(--clr-active);
}

.visually-hidden {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
   white-space: nowrap;
}

.muted {
   color: var(--clr-gray);
}



/* button styling */

.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-list-agents,
.btn-accordion {
   all: unset;

   font-family: var(--ff-roboto-medium);

   display: block;

   padding: var(--padding-close) var(--padding-normal);

   color: white;
   background-color: var(--clr-cta);

   border-radius: var(--padding-tight);
   border: 1px solid transparent;
   outline: 1px solid transparent;

   box-shadow: 0 4px 5px var(--clr-primary-shadow);

   text-align: center;
   cursor: pointer;

   white-space: nowrap;
   overflow: hidden;

   user-select: none;

}

.btn-accordion {
   margin-block: var(--padding-small);
   color: var(--clr-gray);
   font-size: 0.85rem;
}

.btn-primary:disabled {
   background-color: var(--clr-lightgray);
   color: var(--clr-gray);
   cursor: not-allowed;
   box-shadow: none;
}

.btn-card-choose {
   color: var(--clr-cta);
   font: inherit;
   font-weight: bold;
}

.btn-secondary {
   background-color: transparent;

   box-shadow: 0 0 0 var(--clr-primary-shadow);

   color: var(--clr-black);
   border: 1px solid var(--clr-cta);

}

.inverted-button {
   color: var(--clr-white);
}

.btn-tertiary,
.btn-list-agents,
.btn-accordion {

   color: var(--clr-black);
   background-color: transparent;
   box-shadow: none;
}

.btn-list-agents,
.btn-accordion {
   padding: var(--padding-close) 0;
   width: 100%;
   color: var(--clr-gray);

}

.accordion-content {
   margin-left: 2.3rem;
   border-bottom:1px solid var(--clr-primary-shadow);

}

.btn-primary:hover:not(:disabled),
.btn-primary:focus {
   background-color: var(--clr-accent);
   box-shadow: 0 4px 5px var(--clr-primary-shadow);
   color: white;
}

.btn-secondary:hover,
.btn-secondary:focus {
   box-shadow: none;
   color: var(--clr-cta);
}


.btn-list-agents:hover>*,
.btn-list-agents:focus>*,
.btn-accordion:hover>*,
.btn-accordion:focus>* {
   color: var(--clr-cta);
}

.btn-list-agents:focus,
.btn-accordion:focus {
   outline: 1px solid var(--clr-cta);
}

.btn-primary:focus:not(:disabled),
.btn-secondary:focus,
.btn-tertiary:focus {
   outline: 1px solid var(--clr-primary);
}


.btn-tertiary:hover {
   border: 1px solid var(--clr-cta);
}

.btn-tertiary:active {
   border: 1px solid var(--clr-active);
}


.btn-secondary:active {
   /* box-shadow: 0 0px 0px var(--clr-primary-shadow); */
   border: 1px solid var(--clr-active);
   outline: 1px solid transparent;
   /* background-color: transparent; */
   color: var(--clr-active);

}

.btn-secondary:active * {
   color: var(--clr-white);
}

.btn-primary:active:not(:disabled) {
   background-color: var(--clr-active);
   outline: 1px solid var(--clr-active);
   box-shadow: 0 0 0 var(--clr-primary-shadow);
}

/* Utilities */
.btn-wrap {
   white-space: normal;
   overflow: visible;
}

.card-layout--tight {
   gap: var(--padding-small);
}

@media (max-width: 480px) {
   .card-layout.card-layout--tight {
      gap: var(--padding-small);
      padding: var(--padding-close);
   }
}


.small {
   padding: var(--padding-tight) var(--padding-close);
   margin: 0;
   height: 24px;
   flex-shrink: 0;
   align-items: start;

}

.fixed-icon {
   flex-shrink: 0;
   flex-basis: 32px;
}

.icon-button {
   
   display: flex;
   gap: var(--padding-small);
   align-items: center;
   justify-content: center;

}

.inline-button {
   all: unset;
   font: inherit;
   font-size: inherit;
   font-weight: 600;
   color: var(--clr-gray);
   display: inline-flex;
   align-items: center;
   gap: var(--padding-small);
   cursor: pointer;
}

.inline-button:hover,
.inline-button:focus {
   color: var(--clr-black);
   text-decoration: underline;
   text-decoration-line: dotted;
   text-underline-offset: 0.25em;

}

.icon-button-label {
   margin: 0;
}

.icon-label {
   margin-top: 0;
   color: var(--clr-offblack);
   font-size: 0.7rem;
}

.icon-button-house {
   all: unset;
   position: relative;
   /* Behövs för att placera den visuella markeringen */
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0;
   padding-block: 0.2rem 0.1rem;
   padding-inline: 0.3rem;
   cursor: pointer;
   /* Ändrar muspekaren till en pekare */
   isolation: isolate;
}

.icon-button-house input[type="radio"] {
   display: none;
}

.icon-button-house::before {
   content: '';
   width: 100%;
   height: 100%;

   background-color: transparent;
   position: absolute;
   border-radius: var(--padding-close);
   transition: background-color 150ms ease-in-out;
   z-index: -1;
}

/* Gör texten fet för den valda knappen */
.icon-button-house input[type="radio"]:checked+img+.icon-label {
   font-weight: bold;
   color: var(--clr-black);
}

/* Markera när den är i fokus eller hover */
.icon-button-house:hover::before,
.icon-button-house:focus::before {
   outline: 1px solid var(--clr-accent);
}

/* Bakgrundsfärg för den valda knappen */
.icon-button-house:has(:checked)::before {
   background-color: var(--clr-white);
   outline: 1px solid var(--clr-cta);
}

/* buttons */

.chip {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: var(--padding-tight) var(--padding-small);
   font-weight: 300;
   line-height: 1;
   margin-inline: 0;
   border-radius: 4px;
   font-size: 0.85rem;
   color: var(--clr-black);
   background: var(--clr-lightcta);
   border: 1px solid var(--clr-accent);
   /* box-shadow: var(--clr-primary-shadow); */
   white-space: nowrap;
   user-select: none;
   cursor: default;
}

.chip-big {
   padding: var(--padding-small) var(--padding-close);
   cursor: pointer;
}
/* variant for neutral / ghost chips */
.chip--muted {
   background: transparent;
   border: 1px solid rgba(7, 40, 69, 0.06);
   box-shadow: none;
   color: #254061;
   font-weight: 500;
}

/* small icon inside chip */
.chip svg {
   width: 14px;
   height: 14px;
   display: block;
   opacity: 0.9;
}

.chip.chip-big:hover,.chip.chip-big:focus {
   background: var(--clr-offwhite-light);
}


/* respects reduced motion preference */
@media (prefers-reduced-motion: reduce) {
   .chip {
      transition: none;
      transform: none;
   }
}

.btn-hamburger {
   all: unset;
   display: none;
   place-items: center;
}


@media (max-width: 763px) {

   .btn-hamburger {

      display: grid;
   }

   #btn-search {
      display: none;
   }
}


/* link styling */
a:link,
a:visited {
   text-decoration: none;

}

.inline-link:link {
   color: var(--clr-active);
   text-decoration: underline;
   text-underline-offset: 0.3em;
   text-decoration-line: 1px;
   text-decoration-color: var(--clr-mediumgray);
}

.inline-link:visited {
   color: var(--clr-active);
   text-decoration-color: var(--clr-lightgray);
}

.inline-link:hover,
.inline-link:focus {
   color: var(--clr-cta);
   text-decoration-style: solid;
   text-decoration-color: var(--clr-cta);
}

.inline-link:active {
   color: var(--clr-copy);
}


.inline-link.active-footer {
   text-decoration-color: var(--clr-accent);
}

.nav-link:link,
.nav-link:visited {
   display: block;
   font-family: var(--ff-secondary);
   font-weight: 500;
   color: var(--clr-black);
   transition: color 120ms;
   height: 100%;
}


.nav-link:hover:not(.active),
.nav-link:focus {
   outline: none;
   color: var(--clr-cta);
}

.nav-link:active:not(.active) {
   color: var(--clr-active);
}

.nav-link::after {
   content: '';
   display: block;
   position: relative;
   top: 1em;
   background-color: transparent;
   height: 2px;

   /* Set the transformation origin to the left edge of the element */
   transition: background-color 250ms ease-in-out,
      transform 250ms ease-in-out;

   transform-origin: center center;
   transform: scaleX(0);
}


.nav-link:hover:not(.active)::after,
.nav-link:focus:not(.active)::after {
   content: '';
   transform: scaleX(0.8);
   background-color: var(--clr-cta);
}



.active::after {
   content: '';
   transform: scaleX(0.7);
   background-color: var(--clr-active);
}

.footer-navigation .nav-link.active::after {
   transform: scaleX(1);
}

.nav-link:active:not(.active)::after,
.navigation-bar .nav-link:active::after {
   transform: scaleX(0.7);
}

/*popup after sent message! */

.popup-bar {
   position: fixed;

   display: none;
   /* centrerad toast under den fasta menyn – left: 50% krävs för att translateX(-50%) ska centrera */
   left: 50%;
   top: 5rem;
   transform: translateX(-50%);

   justify-content: center;
   flex-direction: column;
   align-items: flex-start;
   gap: calc(var(--padding-close) / 2);

   width: min(32rem, calc(100% - 2 * var(--padding-close)));

   padding: var(--padding-normal);

   border-radius: var(--padding-close);
   /* nästan ogenomskinlig – annars syns rubriker bakom som suddiga fläckar */
   background: hsl(209 100% 95% / 0.97);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);

   z-index: 999;
   opacity: 1;

   animation: closeToast 3s 5s forwards;
}

/* Egen styling – lånar inga sidklasser (.lead, .bold m.fl.) så avstånden styrs bara här */
.popup-bar__header {
   display: flex;
   align-items: center;
   gap: var(--padding-small);
}

.popup-bar__logo {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
}

.popup-bar__title,
.popup-bar__text {
   margin: 0;
   padding: 0;
}

.popup-bar__title {
   font-family: var(--ff-roboto-bold);
   font-weight: 700;
   font-size: 1.125rem;
   line-height: 1.3;
   color: var(--clr-black);
}

.popup-bar__text {
   font-size: 1rem;
   line-height: 1.5;
   color: var(--clr-copy);
}

/* Starta auto-stängning efter 3s delay, varaktighet 3s */
.popup.auto-close {
   animation: closeBar 3s 3s forwards;
   animation-play-state: running;
   /* starta direkt (så CSS-delayen tar vid) */
}

/* Säkerställ hover-pausering (om den inte redan finns) */
.popup:hover {
   animation-play-state: paused;
}


.popup-bar:hover {
   opacity: 1;
   animation-play-state: paused;
}


.popup {
   display: flex;
   position: fixed;
   top: 3rem;
   left: 50%;
   transform: translateX(-50%) translateY(0);
   min-width: 20rem;
   max-width: 90vw;
   color: #fff;
   padding: var(--padding-normal) var(--padding-normal);
   border-radius: var(--padding-close);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
   z-index: 9999;
   align-items: center;
   justify-content: center;
   background: hsl(209 99% 90% / 0.8);

   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);

   opacity: 1;

   animation-play-state: paused;
   animation: closeBar 3s 5s forwards;

}

.popup::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;

   /* 2px kant med vit upptill/vänster, skugga nedtill/höger */
   border-top: 1px solid #fff;
   border-left: 1px solid #fff;
   border-bottom: 1px solid hsla(0, 0%, 99%, 0.3);
   border-right: 1px solid hsla(0, 0%, 99%, 0.3);
}

.popup:hover {
   opacity: 1;
   animation-play-state: paused;
}

.bar-text {
   max-width: 62ch;
}

/* Visa/styra via klasser – inga inline styles */
.popup-bar.is-open {
   display: flex;
   /* aktiverar baren */
}


.popup-bar.closing {
   animation: closeBar 0.2s linear forwards;
   /* snabb stängning på knapp */
}


@keyframes closeBar {
   100% {
      opacity: 0;
      display: none;
      transform: translateX(-50%) translateY(-100%);
   }
}

/* popup-bar tonas ut uppåt mot menyn */
@keyframes closeToast {
   100% {
      opacity: 0;
      transform: translateX(-50%) translateY(-1rem);
   }
}

/** skip link **/

.skip-link {
   position: fixed;
   /* Se till att rutan är fastklistrad*/
   z-index: 0;
   /* ska ej synas ovan för i början*/
   top: 0;
   left: 1rem;
   padding: 1rem 2rem;

   font-size: 1.125rem;
   text-decoration: underline;
   text-underline-offset: 0.5em;
   /* flytta om underline*/

   color: black;
   /*hög kontrast här viktigt*/
   background-color: white;

   translate: 0 -100%;
   /* animera upp utanför skärmen*/
   transition: translate 250ms ease-in-out;
   /*animationsstil */
}

.skip-link:focus {

   translate: 0;
   z-index: 9999;
}

.space-between {
   justify-content: space-between;
   width: 100%;
}



/* normal screen */

@media (min-width: 1199px) {
   .info-margins {
      width: 60%;
      margin-inline:auto;
   }
}

/* TABLET VIEW */

@media (min-width: 764px) and (max-width: 1199px) {
   .margins {
      width: var(--margins-tablet);

   }

   .side-margins,
   .info-margins {
      width: var(--side-margins-tablet);
      padding-inline: var(--padding-normal);
   }



   .card-layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      width: 100%;

      gap: var(--padding-normal);
   }

   .card-margins {
      width: var(--margins-tablet);
   }

   #btn-search {
      display: none;
   }

}


.btn-agent-close {
   all: unset;
   display: grid;
   place-content: center;
   width: 24px;
   height: 24px;
   aspect-ratio: 1;

   touch-action: manipulation;

}


/* Morph close button to open/close states */
.icon-close .close-line {
   transition: transform 250ms ease-in-out,
      opacity 250ms ease-in-out;
   transform-origin: 50% 50%;
}

/* Default "plus" state */
.icon-close .cross {
   transform: rotate(0deg);
}

.icon-close .across {
   transform: rotate(90deg);
}

/* Active "close" state */
.icon-close.morphRotate .cross {
   transform: rotate(-45deg);
   opacity: 0;

}

.icon-close.morphRotate .across {
   transform: rotate(0deg);

}


/* Standardfärg för plus-tecknet */
.icon-close rect {
   fill: var(--clr-active);
   /* Plus-tecknet är blått */
   transition: fill 250ms ease-in-out;
}


.icon-close.morphRotate>rect {
   fill: var(--clr-lightbg-line);
}

/* Breadcrumbs (semantisk OL/LI) */
.breadcrumbs {
   display: block;
}



.breadcrumbs__list {
   list-style: none;
   margin: 0;
   padding: 0;

   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;

   font-size: .95em;
   gap: 0;
}

.breadcrumbs__item {
   display: inline-flex;
   align-items: center;
}

.breadcrumbs__item a,
.breadcrumbs__item span {
   margin-bottom: 0;
}

.breadcrumbs__item+.breadcrumbs__item::before {
   content: "›";
   opacity: .6;
   margin: 0 0.5rem;
}

.breadcrumbs a {
   text-decoration: none;
}

.breadcrumbs a:hover {
   text-decoration: underline;
}

/* EFFECTS */



/* Gör att scrollIntoView hamnar snyggt även om du har en sticky navbar */
.agent-card {
   scroll-margin-top: 110px;
}

/* Aside-raderna */
.agent-jump {
   all: unset;
   display: flex;
   width: 100%;
   background: transparent;

   padding: var(--padding-tight);
   cursor: pointer;
   align-items: center;
   gap: var(--padding-tight);
}

.agent-jump:focus {
   background-color: var(--clr-lightcta);
   outline-offset: 2px;
}


/* Kort highlight när man “hoppar” */
.agent-card.is-peek {
   outline: 3px solid var(--clr-cta);
   outline-offset: 4px;
   border-radius: 12px;
}

/* Slider highlight container */
.slider-container {
   position: relative;
   border-radius: 14px;
}

/* Fokus-stil (syns även utan highlight) */
.slider-input:focus-visible {
   outline: none;
   box-shadow: var(--clr-card-shadow);
   border-radius: 999px;
}

/* Highlight “pulse” runt hela sliderblocket */
.slider-container.is-highlight::before {
   content: "";
   position: absolute;
   inset: -10px;
   border-radius: 18px;
   background: var(--clr-inline);
   box-shadow: var(--clr-card-shadow);
   opacity: 0;
   pointer-events: none;
   animation: sliderHighlightPulse 1400ms ease-out 1;
}

@keyframes sliderHighlightPulse {
   0% {
      opacity: 0;
      transform: scale(.985);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, .18);
   }

   15% {
      opacity: 1;
      transform: scale(1);
   }

   60% {
      opacity: .55;
      box-shadow: 0 0 0 10px rgba(0, 0, 0, .08);
   }

   100% {
      opacity: 0;
      box-shadow: 0 0 0 18px rgba(0, 0, 0, 0);
   }
}

/* (Valfritt) liten hint/arrow som JS kan skapa */
.js-slider-hint {
   position: absolute;
   left: 25%;
   top: -12px;
   transform: translate(-50%, -6px);
   padding: .35rem .6rem;
   border-radius: 999px;
   background: var(--clr-cta);
   color: var(--clr-white);
   font-size: .9rem;
   line-height: 1;
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease, transform 180ms ease;
   white-space: nowrap;
}

.js-slider-hint.is-visible {
   opacity: 1;
   transform: translate(-50%, -14px);
}

/* Respektera reduced motion */
@media (prefers-reduced-motion: reduce) {
   .slider-container.is-highlight::before {
      animation: none;
      opacity: .35;
   }

   .js-slider-hint {
      transition: none;
   }
}


/* MOBILE VIEW */

@media (max-width: 480px) {
   .box-padding {
      padding-block: 0 var(--padding-close);
      padding-inline: var(--padding-close);
   }

   /* global styling */
   .footer-navigation {
      flex-direction: column;
   }

   .footer-container div p.heading {
      text-align: left;
   }

   .footer-container {
      display: block;
   }

   .footer-navigation {
      align-items: start;
   }

   /* text styling */

   h2 {
      line-height: 1;

   }


   /* layout styling */

   .btn-layout {
      display: grid;
   }


   .margins {
      width: var(--margins-mobile);
   }

   .side-margins,
   .info-margins {
      width: var(--side-margins-mobile);
      padding-inline: var(--padding-close);
   }

   .card-margins {
      width: 100%;
   }

   .agent-card {
      display: block;
      padding: var(--padding-close);
   }

   .card-list-layout {
      gap: 0;
   }

   .card-body {
      padding-bottom: 0;
   }

   .btn-card-choose {
      display: none;
   }

   .btn-card-choose {
      color: var(--clr-cta);
      font: inherit;
      font-weight: bold;
   }

   .card-style {
      margin: 0;
      border: 0;
   }


   .side-content {
      flex-direction: column-reverse;

   }

   .slider-container {
      flex-direction: column;
      align-items: start;
   }

   aside.keywords-sidebar {
      width: 100%;
      max-width: 100%;
      position: static;
   }

   aside.keywords-sidebar .keywords-info-box {
      display: none;
   }


   #allBrokerList,
   #keywordsInfo {
      display: none;
   }

   #infoMessageButton .btn-label {
      display: none;
   }

   .padding-around {
      padding: var(--padding-close);
   }

   .info-card {
      padding: var(--padding-close);

   }

   /* image styling */
   img {
      margin-block: 1rem;
   }

   
   .main-logobrand {
      display: none;
   }

   /* Morph hamburger button to open/close states */
   .icon-hamburger .line {
      transition: rotate 200ms 0ms ease-in,
         transform 200ms 200ms ease-in,
         opacity 0ms 200ms;

      transform-origin: center;
   }

   .icon-hamburger.morphToClose .line {
      transition: rotate 200ms ease-in-out 200ms,
         transform 200ms ease-in-out,
         opacity 0ms 200ms ease-in-out;

   }

   .icon-hamburger.morphToClose .top {
      transform: translateY(10px);
      rotate: 45deg;
   }

   /* .icon-hamburger.morphToClose .middle {
    opacity: 0;
  } */

   .icon-hamburger.morphToClose .bottom {
      transform: translateY(-10px);
      rotate: -45deg;
   }

   .primary-navigation {
      position: fixed;

      inset: 3rem 0 0 0;

      height: 100vh;
      padding-inline: var(--padding-normal);
      padding-block: var(--padding-normal);

      background: var(--clr-white);
      /* backdrop-filter: blur(20px); */

      flex-direction: column;
      align-items: left;
      display: block;

      border-top: 1px solid var(--clr-lightgray);
      column-gap: var(--padding-normal);

      opacity: 0;
      transform: translateX(100%);
      transition: all 250ms ease-in-out;

      z-index: 98;
   }


   .secondary-navigation {
      margin-bottom: 2rem;
   }
   .nav-link {
      padding-inline: var(--padding-small);
   }

   .nav-link:hover::after {
      opacity: 0;
   }

   .nav-link.active {
      background: var(--clr-cta-line);
      border-radius: var(--padding-tight);
   
   }

   .nav-link.active::after {
      opacity: 0;
   }

   .primary-navigation.open {
      transform: translateX(0%);
      opacity: 1;
   }


   .grid-layout {
      display: block;
   }

   .flex-layout {
      flex-direction: column;
      gap: 0;

   }

   .icon-button p {
      display: none;
   }

   .icon-button img {
      margin: 0;
   }

   .accordion-content {
      margin-left: 0rem;

   }

   .btn-accordion {
      padding-block: 0rem;
   }

   /* footer styling */
   .footer-container div p.lead {
      margin-top: var(--padding-normal);
   }

   #btn-search {
      display: none;
   }

   /* --- Prisvisning under input (Fast arvode) --- */
   .amount-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .25rem;
   }

   /* Säkerställ att prisraden hamnar under och inte trycks ut till höger */
   #fixedAmountPretty {
      display: block;
      width: 100%;
      text-align: left;
   }
}


/*4K */
@media (min-width: 1920px) {
   .margins {
      width: 1400px;
      margin-inline: auto;

   }

   .side-margins {
      width: 60%;
      margin-inline: auto;

   }

   .info-margins {
      width: 40%;
      margin-inline: auto;

   }


   .card-margins {
      width: 1200px;
      margin-inline: auto;
   }
}

/* ===== TOC scrollspy ===== */
.doc-toc {
  list-style: none;
  padding: 0;
  margin-top: .75rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--clr-border, #e2e8f0);
}
.doc-toc a {
  display: block;
  padding: .45rem .75rem;
  color: var(--clr-copy);
  line-height: 1.3;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color .15s, border-color .15s;
}
.doc-toc a:hover { color: var(--clr-active); }
.doc-toc a.toc-active {
  color: var(--clr-active);
  border-left-color: var(--clr-active);
  font-weight: 600;
}