@font-face {
  font-family: 'ClashDisplay';
  src: url('/fonts/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('/fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
}
* {
  font-family: 'Poppins', 'ClashDisplay', sans-serif;
  letter-spacing: 0.3px;
}

.hero-header *,
.hero-header-2 *
{
  font-family: 'Permanent Marker', cursive !important;
  letter-spacing: 0px !important;
  font-weight: 400 !important;
  font-size: 44px !important;
  line-height: 1.05 !important;
  color: #d600a8 !important;
}

.hero-header-2 * {
    color: #61cef1 !important;
}

/* YouTube header variant (no background — just white brush text + shadow). */
.hero-header.youtube-header {
  transform-origin: center;
}
.hero-header.youtube-header * {
  padding-top: 300px;
  color: white !important;
  text-shadow: 4px 4px 2px #d600a8;
}

/* Bounce-in "bang" entrance — triggered by .is-banged (added when scrolled into view). */
@keyframes awtv-bang-in {
  0%   { opacity: 0; transform: scale(0.2); }
  55%  { opacity: 1; transform: scale(1.18); }
  78%  { transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-header.youtube-header.is-banged {
  animation: awtv-bang-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-header.youtube-header.is-banged { animation: none; }
}

.elementor-element-d6ed97f,
.elementor-element-d6ed97f .elementor-widget-container {
  display: block !important;
  column-count: 1 !important;
  columns: auto !important;
  column-gap: 0 !important;
}

.elementor-element-d6ed97f p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #111 !important;
}

/* Generic: any text-editor that receives a .hero-img (JS adds .awtv-wrap-text) → single column,
   so the text wraps around the floated image. Colour/font left to Elementor (e.g. kontakt stays white). */
.awtv-wrap-text,
.awtv-wrap-text .elementor-widget-container {
  display: block !important;
  column-count: 1 !important;
  columns: auto !important;
  column-gap: 0 !important;
}

/* Kontakt contact block: let all the text wrap around the floated image. */
#kontakt .awtv-contact { max-width: 100%; }   /* 560px cap was too narrow for a readable wrap */
/* Breathing room on the contact text block (sides). */
.awtv-contact.awtv-wrap-text {
  padding-left: 30px;
  padding-right: 30px;
}
/* Smaller image + tighter text so more of the content fits beside the image's height. */
/* width: 40% with the container's min-height:600px would force an oval — clear min-height so the
   1/1 aspect-ratio keeps it a circle. */
#kontakt .hero-img { width: 40% !important; max-width: 40% !important; min-height: 0 !important; }
#kontakt .awtv-contact p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
#kontakt .awtv-contact h3 { font-size: 20px; margin: 16px 0 8px; }
/* "Prenumerera" button label — the original magenta, just a little softer (was rendering white).
   High specificity + !important so it wins over .awtv-contact{color:#fff} and the widget's own rule. */
#kontakt .awtv-news button {
  color: #e24dc2 !important;                                                            /* fallback */
  color: color-mix(in srgb, var(--e-global-color-secondary, #d600a8) 70%, #fff) !important;
}
/* Newsletter box sits in the left column (beside the right-floated image), under the text.
   display: flow-root makes it a BFC so it fits next to the float instead of overlapping it. */
.awtv-contact .awtv-news {
  clear: none;
  display: flow-root;
}
/* Breathing room under the contact image (double, so the gap down to the newsletter is bigger)
   and under the newsletter form. The left/text-wrap spacing is unchanged. */
#kontakt .hero-img { margin-bottom: 40px !important; }
#kontakt .awtv-news { margin-bottom: 20px; }

/* === #kontakt side columns — desktop only ===
   Everything sits inside a 1140px band. A left + right column flank the centred content, each a
   vertical gradient from full magenta (top) to full cyan (bottom). The newsletter is a full-width
   panel at the bottom. Columns are injected into .e-con-inner by site-hero.js; hidden below 1025px. */
@media (min-width: 1025px) {
  #kontakt {
    position: relative;
  }
  #kontakt > .e-con-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Full-bleed gradient columns: each fills its gutter from the 1140px content band out to the
     window edge. magenta (top) → cyan (bottom). Stars (footer canvas) are drawn on top. */
  .awtv-kontakt-pillar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - 570px);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(to bottom, #61cef1 0%, #d600a8 100%);
  }
  .awtv-kontakt-pillar.is-left {
    left: 0;
  }
  .awtv-kontakt-pillar.is-right {
    right: 0;
  }
  .awtv-kontakt-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  /* Newsletter as a wide panel at the bottom (full content width). */
  #kontakt .awtv-news {
    width: 100%;
    clear: both;
  }
}
@media (max-width: 1024px) {
  .awtv-kontakt-pillar {
    display: none;
  }
}

/* Footer-spill stars: a band at the bottom of the blue page wrapper, sitting BEHIND the sections
   (z-index:-1) so it shows in the blue area above the footer and through the last section's slant.
   Stars fade in toward the bottom (next to the footer) — set in JS. */
.elementor-element-52faf50 {
  position: relative;
  /* Own stacking context so the z-index:-1 spill band stays contained (above the wrapper bg, below
     the sections) on ALL sizes. On desktop the edge-fade mask already did this; on mobile/tablet
     there's no mask, so without this the band's negative z-index escaped and the stars vanished. */
  isolation: isolate;
}
.awtv-footer-spill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* FOUC guard: until the JS has moved the .hero-img into its text holder (it then adds
   .awtv-wrapped), keep the image invisible so it never flashes full-width BELOW the text in its
   pre-wrap position. We hide ONLY the image — never the text — so LCP/paint of the copy is
   unaffected. Reveals the instant the wrap is applied. visibility (not display) keeps the float
   box reserved so there's no extra reflow on reveal. Reversible: drop these two rules to restore. */
.hero-img:not(.awtv-wrapped) {
  visibility: hidden !important;
}
.hero-img.awtv-wrapped {
  visibility: visible !important;
}

.hero-img {
  float: right !important;
  width: 60% !important;
  max-width: 60% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;   /* the Elementor container's min-height forces an oval — clear it so 1/1 wins */
  margin: 0 0 16px 34px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  shape-outside: circle(50%) !important;
  shape-margin: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1;
}

/* Optimized WebP versions of the two front-page host photos (originals were ~3MB / ~2.5MB PNG).
   Overrides the Elementor container backgrounds so no editor change is needed.
   b22e4a9 = hero image, b7cf1a4 = kontakt image. */
.elementor-element-b22e4a9 {
  background-image: url("/wp-content/uploads/2026/06/r-bild.webp") !important;
}
.elementor-element-b7cf1a4 {
  background-image: url("/wp-content/uploads/2026/06/r-welcome.webp") !important;
}

/* ===== YELLOW SUN — only inside the circular image ===== */
.hero-img-sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(
    circle 130px at var(--mx, 50%) var(--my, 50%),
    rgba(255,221,0,0.85) 0%,
    rgba(255,205,0,0.78) 42%,
    rgba(255,180,0,0.5) 66%,
    rgba(255,160,0,0.2) 84%,
    rgba(255,160,0,0) 100%
  );
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sffu-tagline,
.sffu-tagline * {
  font-family: 'Permanent Marker', cursive !important;
  letter-spacing: 0px !important;
  font-weight: 400 !important;
  color: #d600a8 !important;
}
.sffu-col-title { color: #d600a8; font-weight: 600; }
.sfhu-link-text { text-shadow: 2px 1px 2px #bbb; }
.sfhu-link-text-clone { text-shadow: 2px 1px 2px #d600a8; }
.sffu-cols a:hover { text-shadow: 2px 1px 2px #d600a8; }

@media (max-width: 767px) {
  .hero-header * { font-size: 30px !important; }

  /* Hero on mobile: drop the 700px min-height and the big top space — that empty area isn't needed.
     The real padding lives on the boxed container's .e-con-inner, so trim it THERE, just enough to
     clear the fixed/transparent header. Heading stays left-aligned. */
  .elementor-element-f7ffabf {
    min-height: 0 !important;
    padding-top: 60px !important;
  }

  /* Round host photos default to a full-width circle on mobile. */
  .hero-img {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 16px 0 0 !important;
    border-radius: 50% !important;
    shape-outside: none !important;
  }

  /* Hero section image: max 50% wide, floated LEFT, so the text wraps on the right. */
  .elementor-element-f7ffabf .hero-img {
    float: left !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 4px 16px 12px 0 !important;
    shape-outside: circle(50%) !important;
    shape-margin: 12px !important;
  }

  /* Kontakt image: float LEFT at 50% so the contact intro text wraps around it. */
  #kontakt .hero-img {
    float: left !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 4px 16px 16px 0 !important;
    shape-outside: circle(50%) !important;
    shape-margin: 12px !important;
  }
}

/* Slanted section bottoms — but NOT the SF Scroll Video stage (#youtube): the plugin needs that
   section to stay non-clipping so its "fill window" 100vw×100vh media can spill past the box. */
section:not(#youtube) {
  clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
}
#youtube,
#youtube .sfea-track,
#youtube .sfea-overlay {
  clip-path: none !important;
}

/* YouTube video outline — MAGENTA (this section's background is cyan, so the usual cyan ring used
   on the other players would vanish). 3px outside like the others; on desktop it fades out as the
   video grows (engine raises --sfea-progress 0→1). The ring is on .sfea-media, which at rest sits
   small inside the overlay, so the offset isn't clipped. */
#youtube .sfea-media {
  outline: 5px solid rgba(214, 0, 168, calc((1 - var(--sfea-progress, 0)) * 0.5));
  outline-offset: 3px;
}

@media (max-width: 767px) {
  /* Drop the section's 700px min-height so it shrinks to the (now 16:9, plain) video — otherwise the
     video filled 700px and overflowed into the next section. */
  #youtube {
    min-height: 0 !important;
  }
  /* Inset the video so the outline has room and doesn't hit / overflow the screen edge. */
  #youtube .elementor-widget-sf-scroll-video > .elementor-widget-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  /* On mobile the media fills the overlay (which clips), so ring the OVERLAY (the 16:9 frame):
     rounded like the other players (so the ring is round too) + static magenta, 3px outside. */
  #youtube .sfea-media {
    outline: none;
  }
  #youtube .sfea-overlay {
    border-radius: 50px;
    outline: 5px solid rgba(214, 0, 168, 0.5);
    outline-offset: 3px;
  }
}

/* Stop sideways page scroll (the full-bleed carousel / 100vw media can otherwise cause it).
   overflow-x: clip — no scroll container, so it doesn't break the sticky/fixed header & footer.
   Needs to be on BOTH html and body: html alone doesn't reliably stop the sideways scroll on real
   mobile devices, which then stretches the fixed header/footer across the over-wide page. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Page-wide horizontal edge fade (out-of-focus), desktop only (>=1140px).
   Applied to the single Elementor section wrapper (#52faf50) — NOT body/html — so the fixed
   header (.sfhu-header) and the fixed-revealed footer (.sffu-footer) are unaffected. mask-clip:
   no-clip prevents cropping the SF Scroll Video fill-window media and the carousel's overflow. */
@media (min-width: 1140px) {
  .elementor-element-52faf50 {
    /* Subtle, soft edge fade: outer ~8% only fades to ~85% visible (half as much as before). */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, #000 8%, #000 92%, rgba(0,0,0,0.85) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, #000 8%, #000 92%, rgba(0,0,0,0.85) 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-clip: no-clip;
            mask-clip: no-clip;
  }
}

/* ===== Site-wide custom cursor =====
   Dot + ring follow the pointer over the page sections. The colour is driven by --cursor-color,
   which the JS flips per section to the inverse of that section's background (cyan bg → magenta
   cursor, magenta bg → cyan cursor). Desktop pointers only; hidden on touch. */
.awtv-gcursor,
.awtv-gcursor2 {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.awtv-gcursor {
  width: 10px;
  height: 10px;
  background: var(--cursor-color, #d600a8);
  transition: opacity 0.25s ease, background 0.2s ease;
}
.awtv-gcursor2 {
  width: 46px;
  height: 46px;
  border: 2px solid var(--cursor-color, #d600a8);
  transition: transform 0.18s ease-out, opacity 0.25s ease, border-color 0.2s ease;
}
body.awtv-cursor-on .awtv-gcursor,
body.awtv-cursor-on .awtv-gcursor2 {
  opacity: 1;
}

/* Hide the native pointer over the page sections — the custom cursor replaces it. Header/footer keep
   their normal cursor. Desktop (fine pointer) only. */
@media (pointer: fine) {
  .elementor-12 section,
  .elementor-12 section * {
    cursor: none;
  }
  /* …but keep the text caret on form fields so typing in the search box still feels right. */
  .elementor-12 section input,
  .elementor-12 section textarea,
  .elementor-12 section select {
    cursor: auto;
  }
}
@media (pointer: coarse) {
  .awtv-gcursor,
  .awtv-gcursor2 {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .awtv-gcursor2 {
    transition: opacity 0.25s ease, border-color 0.2s ease;
  }
}