/* Component tweaks. Each block names the CSS class set in Elementor (Advanced > CSS Classes). */

/* ------------------------------------------------------------------
   Lucide icons (Media Library: icon-*.svg)
   They are stroke icons; Elementor colours SVG icons with `fill`, which would fill them solid.
   Keep them outlined and let them follow the text colour of their wrapper.
   Icon List has no wrapper colour, so use a ck-icon-* class on the widget to colour its icons.
------------------------------------------------------------------- */
.elementor svg[stroke-linecap="round"][fill="none"] { fill: none !important; stroke: currentColor; }
.ck-icon-blue  .elementor-icon-list-icon { color: var(--e-global-color-secondary); }
.ck-icon-ink   .elementor-icon-list-icon { color: var(--e-global-color-primary); }
.ck-icon-white .elementor-icon-list-icon { color: #fff; }
.ck-icon-sky   .elementor-icon-list-icon { color: var(--e-global-color-accent); }
.ck-btn-icon17 .elementor-button-icon svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------
   Link lists (Icon List widget used as a plain menu)
------------------------------------------------------------------- */
/* .ck-links-44 – every row is a 44px tap target, text vertically centred */
.ck-links-44 .elementor-icon-list-item { min-height: 44px; align-items: center; padding-block: 0 !important; }
.ck-links-44 .elementor-icon-list-item > a { min-height: 44px; align-items: center; }
/* .ck-ilist-after – icon directly after the text (e.g. footer phone) */
.ck-ilist-after .elementor-icon-list-item > a,
.ck-ilist-after .elementor-icon-list-item { flex-direction: row-reverse; justify-content: flex-end; }
.ck-ilist-after .elementor-icon-list-icon { padding-inline-end: 0 !important; padding-inline-start: var(--ck-gap, 18px); }
.ck-ilist-after.ck-gap-9 { --ck-gap: 9px; }
.ck-icon-muted .elementor-icon-list-icon { color: var(--e-global-color-muted); }
/* .ck-links-wrap20 – inline link row that wraps with a 20px gap on phones */
@media (max-width: 639px) {
	.ck-links-wrap20 .elementor-icon-list-items { flex-wrap: wrap; gap: 20px; margin: 0 !important; }
	.ck-links-wrap20 .elementor-icon-list-item { margin: 0 !important; }
}

/* .ck-store-card – shop card link: lift + arrow nudge on hover (background colour is set in Elementor) */
.ck-store-card { transition: transform .25s cubic-bezier(.22,.68,.2,1), background-color .2s; }
.ck-store-card:hover { transform: translateY(-3px); }
.ck-store-card .ck-store-arrow .elementor-icon { transition: transform .25s cubic-bezier(.22,.68,.2,1), color .2s; }
.ck-store-card:hover .ck-store-arrow .elementor-icon { transform: translate(3px, -3px); color: var(--e-global-color-primary); }

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------- */
/* .ck-glass – frosted sticky header (Elementor has no backdrop-filter control) */
.ck-glass { -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }

/* .ck-ilist-end – Icon List with the icon after the text, pushed to the far edge (menu links) */
.ck-ilist-end .elementor-icon-list-item > a,
.ck-ilist-end .elementor-icon-list-item { flex-direction: row-reverse; justify-content: space-between; }
.ck-ilist-end .elementor-icon-list-icon { padding-inline-end: 0 !important; padding-inline-start: 14px; transition: transform .2s; }
.ck-ilist-end .elementor-icon-list-item:hover .elementor-icon-list-icon { transform: translateX(4px); }

/* .ck-nav-list – menu link rows: 44px tap height (!important: Elementor zeroes padding-bottom on all but the last item) */
.ck-nav-list .elementor-icon-list-item { min-height: 44px; padding-block: 10px !important; align-items: center; }
.ck-nav-list .elementor-icon-list-item > a { width: 100%; align-items: center; }
.ck-nav-sm .elementor-icon-list-item { padding-block: 9px !important; }
.ck-nav-tall .elementor-icon-list-item { min-height: 48px; }
.ck-nav-list.ck-divider-bottom .elementor-icon-list-item { border-bottom: 1px solid var(--e-global-color-line); }

/* .ck-nav-inline – quick links row under the mega panel columns */
.ck-nav-inline .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ck-nav-inline .elementor-icon-list-item { justify-content: flex-start; flex-direction: row-reverse; gap: 14px; }
.ck-nav-inline .elementor-icon-list-icon { padding-inline-start: 14px; }

/* .ck-mega – main menu. Items 6 ("Kontakt & butiker") and 7 ("Begär offert" button)
   are the mobile versions of item 5 and the header CTA; Mega Menu has no per-item visibility. */
@media (min-width: 960px) {
	.ck-mega .e-n-menu-item:nth-child(n+6) { display: none; }
	.ck-mega .e-n-menu-item:nth-child(5) { margin-inline-end: 0 !important; } /* last visible item: drop the item spacing */
	/* direct links are semibold, dropdown triggers medium (Mega Menu sets one weight for all items with !important) */
	.ck-mega .e-n-menu-item:nth-child(n+3) .e-n-menu-title-text { font-weight: 600 !important; }
	/* the dropdown is a floating card: the full-width layer around it stays transparent and click-through,
	   so the page under the header is never covered or pushed */
	.ck-mega .e-n-menu-content, .ck-mega .e-n-menu-content > .e-con { background: transparent !important; box-shadow: none !important; }
	.ck-mega .e-n-menu-content > .e-con { pointer-events: none; }
	.ck-mega .ck-mega-panel { pointer-events: auto; }
}
@media (max-width: 639px) {
	.ck-mega .e-n-menu-toggle { border: 0 !important; border-radius: 3px !important; background: #fff; }
}
/* .ck-mega-panel – desktop dropdown card: sky accent on top (Elementor border has one colour for all sides) */
.ck-mega-panel { border-top-color: var(--e-global-color-accent) !important; }

@media (max-width: 959px) {
	/* dropdown sheet under the header */
	.ck-mega .e-n-menu[data-layout] .e-n-menu-wrapper { background-color: #fff !important; }
	.ck-mega .e-n-menu-content { width: 100% !important; max-width: 100%; }
	.ck-mega .e-n-menu-item:nth-child(-n+5) .e-n-menu-title { background: transparent !important; }
	.ck-mega .e-n-menu-item:nth-child(7) .e-n-menu-title { border-radius: 999px !important; background: var(--e-global-color-primary) !important; }
	.ck-mega .e-n-menu-item:nth-child(7) .e-n-menu-title svg { fill: #fff !important; color: #fff !important; stroke: #fff; }
	.ck-mega .e-n-menu-wrapper { padding: 12px 24px 24px; background: #fff; border: 0 !important; border-bottom: 1px solid var(--e-global-color-line) !important; box-shadow: 0 14px 22px #16163f0a; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
	.ck-mega .e-n-menu-item:nth-child(5) { display: none !important; } /* desktop "Kontakt" */
	.ck-mega .e-n-menu-item { border-bottom: 1px solid var(--e-global-color-line); }
	.ck-mega .e-n-menu-heading, .ck-mega .e-n-menu-item { margin: 0 !important; }
	.ck-mega .e-n-menu-item { width: 100% !important; }
	.ck-mega .e-n-menu-title { justify-content: space-between; width: 100%; box-sizing: border-box; }
	.ck-mega .e-n-menu-title:has([aria-expanded="true"]) .e-n-menu-title-text { color: var(--e-global-color-secondary) !important; }
	.ck-mega .e-n-menu-title-container { flex: 1; }
	.ck-mega .e-n-menu-item:nth-child(-n+2) .e-n-menu-title { min-height: 56px; }
	.ck-mega .e-n-menu-item:nth-child(n+3) .e-n-menu-title { min-height: 45px; padding-block: 9.3px !important; } /* 46px row incl. 1px divider */
	/* item 7: "Begär offert" as the full-width pill button at the end of the sheet */
	.ck-mega .e-n-menu-item:nth-child(7) { border-bottom: 0; margin-top: 18px !important; }
	.ck-mega .e-n-menu-item:nth-child(7) .e-n-menu-title { justify-content: center; min-height: 52px; padding-block: 14px !important; border-radius: 999px; background: var(--e-global-color-primary); }
	.ck-mega .e-n-menu-item:nth-child(7) .e-n-menu-title-container { flex: 0 1 auto; }
	.ck-mega .e-n-menu-item:nth-child(7) .e-n-menu-title-text { color: #fff !important; line-height: 24px; }
}

/* ------------------------------------------------------------------
   Text + buttons
------------------------------------------------------------------- */
/* .ck-hl – highlighted words inside a heading: <span class="ck-hl"> */
.ck-hl { color: var(--e-global-color-secondary); }
/* .ck-pill – pill button that lifts on hover */
.ck-pill .elementor-button { transition: background-color .2s, color .2s, transform .25s cubic-bezier(.22,.68,.2,1); }
.ck-pill .elementor-button:hover { transform: translateY(-3px); }
.ck-pill .elementor-button-icon svg { width: 18px; height: 18px; }
/* .ck-stretch – the button's link covers its whole card (the nearest .ck-card / .ck-pane) */
:is(.ck-pane, .ck-card) :is(.e-con, .elementor-widget):has(.ck-stretch),
:is(.ck-pane, .ck-card) .ck-stretch { position: static; }
.ck-stretch .elementor-button::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .ck-pill .elementor-button { transition: none; } }

/* ------------------------------------------------------------------
   Utilities (set on a Heading / Text Editor widget)
------------------------------------------------------------------- */
/* measure limits in characters of the text's own font size */
.ck-mw-16ch :is(.elementor-heading-title, p) { max-width: 16ch; }
.ck-mw-42ch :is(.elementor-heading-title, p) { max-width: 42ch; }
.ck-mw-46ch :is(.elementor-heading-title, p) { max-width: 46ch; }
.ck-mw-56ch :is(.elementor-heading-title, p) { max-width: 56ch; }
.ck-mw-740 { max-width: 740px; }
.ck-ilist-after.ck-gap-12 { --ck-gap: 12px; }
/* .ck-arrow-nudge – link arrow slides 2px on hover */
.ck-arrow-nudge .elementor-icon-list-icon svg { transition: transform .18s ease; }
.ck-arrow-nudge .elementor-icon-list-item:hover .elementor-icon-list-icon svg { transform: translateX(2px); }
/* .ck-chip-icon – small label chip whose icon sits in a white circle */
.ck-chip-icon .elementor-icon-list-item { min-height: 26px; }
.ck-chip-icon .elementor-icon-list-icon svg { box-sizing: content-box; width: 16px !important; height: 16px !important; padding: 5px; border-radius: 50%; background: #fff; }

/* ------------------------------------------------------------------
   Express band (Saved template "Block – Express band", .ck-express)
------------------------------------------------------------------- */
.ck-express { position: relative; isolation: isolate; }
.ck-express::before,
.ck-express::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 30px, #ffffff40 30px 32px); }
.ck-express::before { width: 460px; height: 460px; right: -130px; top: 50%; transform: translateY(-50%); }
.ck-express::after { width: 260px; height: 260px; left: 34%; bottom: -150px; opacity: .7; }
@media (max-width: 700px) { .ck-express::before { right: -200px; } }
@media (prefers-reduced-motion: no-preference) {
	.ck-express::before { animation: ck-ripple 7s ease-in-out infinite alternate; }
	.ck-express::after { animation: ck-ripple-b 9s ease-in-out infinite alternate; }
}
@keyframes ck-ripple { from { transform: translateY(-50%) scale(.9); } to { transform: translateY(-50%) scale(1.1); } }
@keyframes ck-ripple-b { from { transform: scale(.9); } to { transform: scale(1.15); } }
.ck-mw-44ch :is(.elementor-heading-title, p) { max-width: 44ch; }
.ck-o70 { opacity: .7; }
.ck-o92 { opacity: .92; }
/* .ck-underline – text link with a 2px underline bar and an arrow that slides on hover */
.ck-underline .elementor-icon-list-item > a { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.ck-underline .elementor-icon-list-text { color: inherit; }
.ck-underline .elementor-icon-list-item > a { color: var(--ck-link, inherit); }
.ck-underline .elementor-icon-list-icon svg { transition: transform .25s cubic-bezier(.22,.68,.2,1); }
.ck-underline .elementor-icon-list-item:hover .elementor-icon-list-icon svg { transform: translateX(5px); }

/* .ck-draw – line icons draw themselves in (site.js adds .draw-ready / .is-drawn) */
.ck-draw svg.draw-ready :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ck-draw svg.draw-ready.is-drawn :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.4,.1,.2,1); }

/* ------------------------------------------------------------------
   Plan card (.ck-plan) – grid: title | foot, then route and steps full width
------------------------------------------------------------------- */
.ck-plan .ck-plan-title { grid-column: 1; }
.ck-plan .ck-plan-foot { grid-column: 2; }
.ck-plan .ck-plan-route, .ck-plan .ck-plan-steps { grid-column: 1 / -1; }
.ck-mw-18ch :is(.elementor-heading-title, p) { max-width: 18ch; }
.ck-mw-52ch :is(.elementor-heading-title, p) { max-width: 52ch; }
.ck-mw-34ch :is(.elementor-heading-title, p) { max-width: 34ch; }
.ck-plan-route { position: relative; height: 3px; min-height: 0 !important; margin-top: clamp(34px, 4.5vw, 52px) !important; background: #ffffff30; border-radius: 3px; overflow: visible !important; }
.ck-plan-route::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--e-global-color-accent); transform-origin: left; transform: scaleX(var(--p, 1)); }
.ck-plan-badge { position: absolute !important; top: -19px; left: calc(var(--p, 1) * (100% - 40px)); width: 40px !important; margin: 0 !important; }
.ck-plan-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px) !important; margin-top: 28px !important; }
.ck-plan-4 .ck-plan-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ck-plan-step { min-width: 0; }
.ck-plan-text strong { display: block; margin-bottom: 4px; font-weight: 600; }
@media (max-width: 1000px) { .ck-plan-4 .ck-plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.ck-plan { --e-con-grid-template-columns: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; }
	.ck-plan .ck-plan-title { order: 1; } .ck-plan .ck-plan-route { order: 2; } .ck-plan .ck-plan-steps { order: 3; }
	.ck-plan .ck-plan-foot { grid-column: 1; order: 4; margin-top: 30px; padding-top: 24px; border-top: 1px solid #ffffff2e; width: 100%; }
	.ck-plan .ck-plan-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
	.ck-plan-step { flex-direction: row !important; align-items: baseline !important; gap: 18px !important; }
	.ck-plan-num { min-width: 56px; }
	.ck-plan-num .elementor-heading-title { font-size: 36px !important; }
}
@media (max-width: 760px) {
	.ck-plan { border-radius: 22px !important; }
	.ck-plan-foot .ck-plan-btn, .ck-plan-foot .ck-plan-btn .elementor-button, .ck-plan-actions { width: 100% !important; }
}
/* section around a plan card on the home page: tighter padding below 760px */
@media (max-width: 760px) { .ck-plan-section { --padding-top: 28px !important; --padding-bottom: 40px !important; } } /* Elementor pads via these variables */

/* .ck-reveal – fades up when scrolled into view (site.js adds .reveal-pending / .is-visible) */
.reveal-pending { opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(.22,.68,.2,1), transform 320ms cubic-bezier(.22,.68,.2,1); }
.reveal-pending.is-visible, .reveal-pending:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce), print { .reveal-pending { opacity: 1; transform: none; } }
@media (max-width: 960px) {
	.ck-plan-num { flex: 0 0 auto !important; min-width: 56px !important; width: auto !important; }
}

/* .ck-split / hero title – word masks created by motion.js */
.ck-word { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.ck-word > span { display: inline-block; will-change: transform; }

/* .ck-hours – Price List used as an opening-hours table: day left, time right, dotted rule under each row */
.ck-hours .elementor-price-list li { margin: 0 !important; padding: 14px 0; border-bottom: 2px dotted #9fb0cf; }
.ck-hours .elementor-price-list-header { display: flex; justify-content: space-between; gap: 20px; margin: 0 !important; }
.ck-hours .elementor-price-list-separator { display: none; }
.ck-hours .elementor-price-list-price { white-space: nowrap; }
/* .ck-note-link – inline link in a small note */
.ck-note-link a { color: var(--e-global-color-secondary); text-decoration: underline; text-underline-offset: 4px; }
.ck-balance .elementor-heading-title { text-wrap: balance; }

/* ------------------------------------------------------------------
   Closing CTA card (Saved templates "Block – CTA företag / privat", .ck-cta)
------------------------------------------------------------------- */
.ck-cta { position: relative; isolation: isolate; }
.ck-cta::after { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 30px, #ffffff1a 30px 32px); pointer-events: none; }
.ck-cta .ck-cta-chips { grid-column: 1 / -1; }
.ck-cta-chips .elementor-icon-list-items { flex-wrap: wrap; gap: 10px 22px; margin: 0 !important; }
.ck-cta-chips .elementor-icon-list-item { margin: 0 !important; }
.ck-cta-actions .ck-ilist-end .elementor-icon-list-icon { padding-inline-start: 14px; }
@media (max-width: 860px) {
	.ck-cta { --e-con-grid-template-columns: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; border-radius: 22px !important; }
	.ck-cta .ck-cta-actions { padding: 20px 0 0 !important; border-left: 0 !important; border-top: 1px solid #ffffff2e !important; }
}

/* .ck-faq – Nested Accordion as a plain question list with a rotating plus */
.ck-faq { border-bottom: 2px solid var(--e-global-color-primary); }
.ck-faq .e-n-accordion-item-title-icon svg { transition: transform .3s cubic-bezier(.22,.68,.2,1); }
.ck-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg { transform: rotate(45deg); }
.ck-faq-answer p { padding: 0 56px clamp(24px, 3vw, 40px) 0; max-width: 62ch; }
@media (max-width: 600px) { .ck-faq-answer p { padding-right: 0; } }
/* plan button label stays on one line */
.ck-plan-btn .elementor-button-text { white-space: nowrap; }
.ck-min0 { min-width: 0; }