.elementor-kit-6{--e-global-color-primary:#F8FAFC;--e-global-color-secondary:#1D4F91;--e-global-color-text:#101820;--e-global-color-accent:#DA291C;--e-global-color-ec82e6a:#DDE5ED;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#F8FAFC;color:var( --e-global-color-text );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-accent );color:var( --e-global-color-primary );border-radius:100px 100px 100px 100px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:var(--space-md);}.elementor-element{--widgets-spacing:var(--space-md) var(--space-md);--widgets-spacing-row:var(--space-md);--widgets-spacing-column:var(--space-md);}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   SØRE OSEN IL – SITE CSS (Elementor → Site Settings → Custom CSS)
   Existing demo-site CSS merged with the new design.
   Version 3 · 2026-10-15 – includes the screen-review fixes,
   the compact phone scale and rounds 3–4 (FAQ, dropdown,
   anchors, header, alternating rows).

   Classes to add in Elementor (Advanced → CSS Classes)
   site-header / header-row / site-logo / site-nav   header
   has-hero                hero container (transparent header)
   section, card, grid-12, col-*, grid-split          layout
   alternate (+ alternate-bleed)   striped, flipped child rows
   link-list               list of links with 44px tap height
   member-form             form on a light card
   faq-plain / faq-inline  opt out of the FAQ styling
   chip-scroll             swipeable button row on phone/tablet
   hidden-script           HTML widget holding the header script

   Contents
   1.  Global variables
   2.  Base
   3.  Background image utility
   4.  Typography
   5.  Content / layout
   6.  Flex utilities
   7.  Gap utilities
   8.  12-column grid
   9.  Spacing utilities
   10. Hero
   11. Cards (card, feature-card, season-card, info-card)
   12. Themes
   13. Color utilities
   14. Border utilities
   15. General utilities
   16. Split section
   17. Buttons
   18. Header and navigation
   19. Footer
   20. Components (facts, info strip, chips, timeline, table,
       accordion, form, logo grid, Vipps box, layout dots)
   21. Hidden script
   22. Blog posts
   23. Accessibility (focus)
   24. Responsive
   25. Reduced motion
   ========================================================= */


/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {

    /* Spacing */
    --space-xs: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);
    --space-sm: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 0.6vw, 2.5rem);
    --space-lg: clamp(2rem, 1.5rem + 1vw, 4rem);
    --space-xl: clamp(3rem, 2rem + 1.5vw, 6rem);

    --padding-horizontal: clamp(1rem, 4vw, 4rem);

    /* Header height (logo 100px + 2 × 16px padding).
       Phones: 76px, set under 24. Responsive. Used by the hero
       padding and the spacer above pages without a hero. */
    --header-height: 132px;


    /* Typography */
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading-family: var(--font-family);

    --font-body-weight: 400;
    --font-heading-weight: 800;      /* H1, H2 */
    --font-subheading-weight: 700;   /* H3–H6 */

    --font-base: 1rem;                                          /* 16px root */
    --font-body: 1.125rem;                                      /* 18px */
    --font-lead: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);   /* 19 → 21px */
    --font-sm: 0.9375rem;                                       /* 15px */
    --font-xs: 0.8125rem;                                       /* 13px, eyebrow */

    /* Heading sizes (mobile → desktop) */
    --font-h1: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);     /* 40 → 60px */
    --font-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);  /* 30 → 40px */
    --font-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);/* 22 → 26px */
    --font-h4: 1.25rem;                                  /* 20px */
    --font-h5: 1.125rem;                                 /* 18px */
    --font-h6: 1rem;                                     /* 16px */

    --line-height-heading: 1.1;
    --line-height-body: 1.6;


    /* Colors – brand */
    --color-black: #000000;          /* Text */
    --color-white: #F8FAFC;          /* Primary */
    --color-blue: #2455A6;           /* Secondary – 7.2:1 with white */
    --color-accent: #D60E16;         /* Accent – 5.3:1 with white */

    /* Colors – support */
    --color-blue-dark: #173A75;      /* Footer */
    --color-blue-light: #EEF3FB;     /* Active menu item */
    --color-gray: #F3F6FB;           /* Light surface (sections, boxes) */
    --color-muted: #4B5563;          /* Secondary text – 7.5:1 on white */
    --color-line: #D6DEEB;           /* Dividers, table borders */
    --color-on-dark: #DBE4F3;        /* Body text on blue */
    --color-border-subtle: #C5CEDD;  /* Outline buttons */
    --color-field-border: #6B7280;   /* Form fields – 4.8:1 on white */

    /* Gray scale (kept from old stylesheet) */
    --color-gray-100: #f5f5f5;
    --color-gray-300: #d6d6d6;
    --color-gray-500: #888888;
    --color-gray-700: #555555;

    /* Kept for compatibility */
    --color-secondary: var(--color-blue);
    --color-transparent: transparent;
    --color-selected: var(--color-blue-light);
    --color-gold: #A68553;

    --color-text: var(--color-black);


    /* Layout */
    --site-content-width: 1200px;
    --grid-gap: 2rem;
    --grid-max-width: var(--site-content-width);


    /* Borders */
    --border-radius-sm: 8px;
    --border-radius-img: 12px;       /* All images */
    --border-radius-md: 16px;        /* Cards */
    --border-radius-lg: 24px;
    --border-radius-pill: 999px;


    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.14);


    /* Hero overlay: dark on the text side, lighter on the photo side */
    --hero-scrim: linear-gradient(90deg,
        rgba(10, 10, 70, 0.60) 0%,
        rgba(10, 10, 70, 0.30) 50%,
        rgba(10, 10, 70, 0.0) 100%);

    /* Season card overlay: dark at the bottom where the text is */
    --card-scrim: linear-gradient(180deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.78) 100%);


    /* Buttons */
    --btn-black: var(--color-black);
    --btn-white: var(--color-white);
    --btn-accent: var(--color-accent);

    --btn-radius: var(--border-radius-pill);
    --btn-border-width: 1px;
    --btn-transition: 0.2s ease;
    --btn-height: 48px;
    --btn-height-sm: 44px;

    --btn-black-hover: color-mix(in srgb, var(--btn-black) 85%, var(--btn-white));
    --btn-white-hover: color-mix(in srgb, var(--btn-white) 90%, var(--btn-black));
    --btn-accent-hover: #A50B11;


    /* Focus */
    --focus-color: var(--color-blue);


    /* Theme (switched by .theme-light / .theme-dark) */
    --theme-text: var(--color-text);
    --theme-text-muted: var(--color-muted);
    --theme-border: var(--color-line);
    --theme-link: var(--color-black);

    --icon-color: var(--color-black);
}


/* =========================================================
   2. BASE
   ========================================================= */

html {
    font-size: var(--font-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: var(--font-body-weight);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

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

/* Anchor targets: no scroll margin. The header script handles
   the offset (the header hides when you jump down and shows
   when you jump up), so a fixed margin left a gap. */
[id] {
    scroll-margin-top: 0;
}


/* =========================================================
   3. BACKGROUND IMAGE UTILITY
   ========================================================= */

.bg-cover,
.image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Light placeholder while lazy-loaded background images arrive */
.e-con.image,
.e-con.bg-cover {
    background-color: var(--color-line);
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.big-text,
.elementor-heading-title {
    margin-top: 0;
    font-family: var(--font-heading-family);
    line-height: var(--line-height-heading);
    color: var(--theme-text);
}

h1, .h1, .big-text,
h1.elementor-heading-title, .h1 .elementor-heading-title {
    font-size: var(--font-h1);
    font-weight: var(--font-heading-weight);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h2, .h2,
h2.elementor-heading-title, .h2 .elementor-heading-title {
    font-size: var(--font-h2);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

h3, .h3,
h3.elementor-heading-title, .h3 .elementor-heading-title {
    font-size: var(--font-h3);
    font-weight: var(--font-subheading-weight);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h4, .h4,
h4.elementor-heading-title, .h4 .elementor-heading-title {
    font-size: var(--font-h4);
    font-weight: var(--font-subheading-weight);
    line-height: 1.3;
}

h5, .h5,
h5.elementor-heading-title, .h5 .elementor-heading-title {
    font-size: var(--font-h5);
    font-weight: var(--font-subheading-weight);
    line-height: 1.3;
}

h6, .h6,
h6.elementor-heading-title, .h6 .elementor-heading-title {
    font-size: var(--font-h6);
    font-weight: var(--font-subheading-weight);
    line-height: 1.4;
}

a {
    color: inherit;
}

a:hover {
    cursor: pointer;
    color: var(--color-accent);
}

p {
    max-width: 62ch;   /* about 80 characters at 18px Inter */
    margin-top: 0;
    margin-bottom: calc(var(--space-sm) * 0.5);
    font-size: var(--font-body);
    line-height: var(--line-height-body);
    color: var(--theme-text);
}

p:last-child {
    margin-bottom: 0;
}

.elementor-widget-text-editor li {
    max-width: 62ch;
}

/* Centred text stays centred */
.text-center p,
.section-head.text-center p,
.elementor-widget-text-editor.text-center p {
    margin-inline: auto;
}

/* Headings inside a text widget: room above each new heading,
   so long texts (Om oss, history) read as clear sections.
   The first heading in a widget stays tight. */
.elementor-widget-text-editor :is(h2, h3, h4, h5) {
    margin-bottom: 0.5em;
}

.elementor-widget-text-editor :is(p, ul, ol) + h2,
.elementor-widget-text-editor :is(p, ul, ol) + h3 {
    margin-top: 1.75em;   /* H2 40px → 70px above; H3 26px → 46px */
}

.elementor-widget-text-editor :is(p, ul, ol) + :is(h4, h5) {
    margin-top: 1.5em;
}

.elementor-widget-text-editor :is(h2, h3) + :is(h3, h4) {
    margin-top: 0.75em;
}

.elementor-widget-text-editor p + p {
    margin-top: 0.75em;
}

p a {
    color: inherit;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    cursor: pointer;
}

p a:hover {
    color: var(--color-accent);
    text-decoration: underline !important;
}

li {
    margin-bottom: 0.5em;
}

ul {
    margin-top: 2em;
    margin-bottom: 2em;
}

/* Lists inside cards and text blocks: less air */
.card ul,
.feature-card ul,
.list-tight {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.25em;
}

::marker {
    color: var(--color-accent);
}

/* Small text */
.small,
.text-sm,
.small p,
.text-sm p {
    font-size: var(--font-sm);
    line-height: var(--line-height-body);
}

/* Lead / ingress (Text Editor widget) */
.lead,
.lead p {
    font-size: var(--font-lead);
    line-height: 1.55;
}

/* Eyebrow: small uppercase label above a heading (Heading widget) */
.eyebrow,
.eyebrow .elementor-heading-title,
.eyebrow p {
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}

/* Muted text (dates, captions, helper text) */
.text-muted,
.text-muted p,
.text-muted .elementor-heading-title {
    color: var(--theme-text-muted) !important;
}


/* =========================================================
   5. CONTENT / LAYOUT
   ========================================================= */

.full-width {
    width: 100%;
}

.content-width {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
}

.container {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: var(--padding-horizontal);
}

/* Section: 96px top/bottom on desktop */
.section {
    width: 100%;
    padding-block: var(--space-xl);
    padding-inline: var(--padding-horizontal);
    margin: 0 auto;
}

/* Section head: eyebrow + H2 + intro, max 760px wide */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 760px;
    margin-bottom: var(--space-md);
}

.section-head.no-margin,
.section-head:last-child {
    margin-bottom: 0;
}

.section-head.text-center {
    margin-inline: auto;
    align-items: center;
}

/* Text column: eyebrow, heading, paragraphs, buttons with even spacing */
.stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

/* Alternating rows: put "alternate" on the PARENT container.
   Every second child container gets the light grey background
   and its content swaps sides (from tablet up; phones keep
   image-first order). Add "alternate-bleed" to stretch the grey
   to both screen edges when the parent is boxed. */
.alternate > .e-con:nth-child(even of .e-con),
.alternate > .e-con-inner > .e-con:nth-child(even of .e-con) {
    background-color: var(--color-gray);
}

.alternate > .e-con:nth-child(n of .e-con),
.alternate > .e-con-inner > .e-con:nth-child(n of .e-con) {
    padding-block: var(--space-lg);
}

.alternate.alternate-bleed > .e-con:nth-child(even of .e-con),
.alternate.alternate-bleed > .e-con-inner > .e-con:nth-child(even of .e-con) {
    box-shadow: 0 0 0 100vmax var(--color-gray);
    clip-path: inset(0 -100vmax);
}

@media (min-width: 768px) {
    .alternate > .e-con:nth-child(even of .e-con) > :first-child:not(.e-con-inner),
    .alternate > .e-con:nth-child(even of .e-con) > .e-con-inner > :first-child,
    .alternate > .e-con-inner > .e-con:nth-child(even of .e-con) > :first-child:not(.e-con-inner),
    .alternate > .e-con-inner > .e-con:nth-child(even of .e-con) > .e-con-inner > :first-child {
        order: 2;
    }
}


/* =========================================================
   6. FLEX UTILITIES
   ========================================================= */

.flex { display: flex !important; }
.flex-inline { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }

.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }


/* =========================================================
   7. GAP UTILITIES
   ========================================================= */

.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }

.gap-x-xs { column-gap: var(--space-xs) !important; }
.gap-x-sm { column-gap: var(--space-sm) !important; }
.gap-x-md { column-gap: var(--space-md) !important; }
.gap-x-lg { column-gap: var(--space-lg) !important; }
.gap-x-xl { column-gap: var(--space-xl) !important; }

.gap-y-xs { row-gap: var(--space-xs) !important; }
.gap-y-sm { row-gap: var(--space-sm) !important; }
.gap-y-md { row-gap: var(--space-md) !important; }
.gap-y-lg { row-gap: var(--space-lg) !important; }
.gap-y-xl { row-gap: var(--space-xl) !important; }

/* Legacy spacing classes */
.space-xs { gap: var(--space-xs); }
.space-sm { gap: var(--space-sm); }
.space-md { gap: var(--space-md); }
.space-lg { gap: var(--space-lg); }
.space-xl { gap: var(--space-xl); }


/* =========================================================
   8. 12-COLUMN GRID
   ========================================================= */

.grid-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Text + image rows: wider gap, vertically centred */
.grid-split {
    column-gap: var(--space-xl) !important;
    align-items: center;
}

/* Fill last grid item */
.grid-fill-last > .col-6:last-child:nth-child(odd) { grid-column: span 12; }
.grid-fill-last > .col-4:last-child:nth-child(3n + 1) { grid-column: span 12; }
.grid-fill-last > .col-3:last-child:nth-child(4n + 1) { grid-column: span 12; }
.grid-fill-last > .col-2:last-child:nth-child(6n + 1) { grid-column: span 12; }


/* =========================================================
   9. SPACING UTILITIES
   ========================================================= */

.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.my-xs { margin-block: var(--space-xs) !important; }
.my-sm { margin-block: var(--space-sm) !important; }
.my-md { margin-block: var(--space-md) !important; }
.my-lg { margin-block: var(--space-lg) !important; }
.my-xl { margin-block: var(--space-xl) !important; }

.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }

.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }

.py-xs { padding-block: var(--space-xs) !important; }
.py-sm { padding-block: var(--space-sm) !important; }
.py-md { padding-block: var(--space-md) !important; }
.py-lg { padding-block: var(--space-lg) !important; }
.py-xl { padding-block: var(--space-xl) !important; }


/* =========================================================
   10. HERO
   Container classes: hero has-hero has-scrim theme-dark
   Set the photo as the container's background image in Elementor.
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    padding-block: var(--space-lg);
    padding-inline: var(--padding-horizontal);
    min-height: min(clamp(500px, 90svh, 800px), 100svh) !important;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--color-blue-dark);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Room for the fixed header above the hero text */
.hero.has-hero {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
}

/* Dark overlay so white text passes WCAG on any photo.
   Uses the same ::before layer Elementor uses for its own overlay. */
.hero.has-scrim::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--hero-scrim) !important;
    opacity: 0.75 !important;
    pointer-events: none;
}

.hero.has-scrim > * {
    position: relative;
    z-index: 1;
}

/* Phones: no card on the hero. White text straight on the photo
   over a dark fade at the bottom, so most of the photo shows.
   (Card sizes for phones are under 24. Responsive.) */
@media (max-width: 767px) {
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0.6) 55%,
            rgba(0, 0, 0, 0.85) 100%);
    }

    .hero > .e-con-inner {
        position: relative;
        z-index: 1;
    }

    .hero .card {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .hero .card :is(h1, h2, p, .elementor-heading-title) {
        color: var(--color-white) !important;
    }

    .hero .card .btn-outline .elementor-button {
        color: var(--color-white);
        border-color: rgba(255, 255, 255, 0.6);
    }
}

/* Hero text block: max 720px */
.hero-content {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

.hero h1,
.hero p,
.hero .eyebrow,
.hero .eyebrow .elementor-heading-title,
.hero .elementor-heading-title {
    color: var(--color-white);
}


/* =========================================================
   11. CARDS
   ========================================================= */

/* White card with padding (on gray sections) */
.card {
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Flat box without shadow (fact box, prices, help text) */
.card-flat {
    box-shadow: none;
}

.card.bg-gray {
    box-shadow: none;
}

/* Feature card: image on top, text below, no box */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.feature-card .button-container {
    margin-top: auto;
}

/* Season card (Vinter / Sommer on the front page)
   Container with Link + background image. Text sits at the bottom. */
.season-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 540px;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.875rem;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-blue-dark);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.season-card::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--card-scrim) !important;
    opacity: 1 !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.season-card > * {
    position: relative;
    z-index: 1;
}

.season-card h3,
.season-card .elementor-heading-title {
    font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
    color: var(--color-white);
}

.season-card p,
.season-card * {
    color: var(--color-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.season-card .elementor-button {
    text-shadow: none;
}

.season-card:hover .elementor-button {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: var(--color-white);
}

/* Info card (kept from the demo site: hover flip card) */
.info-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 400px;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.info-card__front {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: var(--space-sm);
    color: var(--color-white);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.info-card__front * {
    color: var(--color-black);
}

.info-card__hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    background: var(--color-white);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

@media (min-width: 768px) {
    .info-card:hover .info-card__front { opacity: 0; transform: translateY(-20px); }
    .info-card:hover .info-card__hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .info-card:hover::before { opacity: 0; }
}

@media (max-width: 767px) {
    .info-card.is-active .info-card__front { opacity: 0; transform: translateY(-20px); }
    .info-card.is-active .info-card__hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .info-card.is-active::before { opacity: 0; }
}

.info-card.overlay-dark::before { background: rgba(0, 0, 0, 0.45); }
.info-card.overlay-blue::before { background: rgba(36, 85, 166, 0.80); }
.info-card.overlay-strong::before { background: rgba(0, 0, 0, 0.65); }
.info-card.overlay-light::before { background: rgba(255, 255, 255, 0.35); }


/* =========================================================
   12. THEMES
   ========================================================= */

.theme-light {
    --theme-text: var(--color-black);
    --theme-text-muted: var(--color-muted);
    --theme-border: var(--color-line);
    --theme-link: var(--color-black);
    --icon-color: var(--color-black);
}

.theme-dark {
    --theme-text: var(--color-white);
    --theme-text-muted: var(--color-on-dark);
    --theme-border: rgba(255, 255, 255, 0.3);
    --theme-link: var(--color-white);
    --icon-color: var(--color-white);
    --focus-color: var(--color-white);
}

.theme-light h1, .theme-light h2, .theme-light h3,
.theme-light h4, .theme-light h5, .theme-light h6,
.theme-light p, .theme-light li,
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark h4, .theme-dark h5, .theme-dark h6,
.theme-dark p, .theme-dark li,
.theme-light .elementor-heading-title,
.theme-dark .elementor-heading-title {
    color: var(--theme-text);
}

.theme-dark .eyebrow,
.theme-dark .eyebrow .elementor-heading-title {
    color: var(--theme-text-muted);
}

.theme-light a:not(.elementor-button),
.theme-dark a:not(.elementor-button) {
    color: var(--theme-link);
}

.theme-light a:not(.elementor-button):hover {
    color: var(--color-accent);
}

/* Red text on blue fails contrast – keep links white and underline on hover */
.theme-dark a:not(.elementor-button):hover {
    color: var(--color-white);
    text-decoration: underline;
}

.theme-dark ::marker {
    color: var(--color-white);
}


/* =========================================================
   13. COLOR UTILITIES
   ========================================================= */

.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-gold { color: var(--color-gold) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-gray { color: var(--color-gray) !important; }

.bg-white { background-color: var(--color-white) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-gray { background-color: var(--color-gray) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-blue-dark { background-color: var(--color-blue-dark) !important; }
.bg-gold { background-color: var(--color-gold) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

.bg-dark * {
    color: var(--color-white);
}


/* =========================================================
   14. BORDER UTILITIES
   ========================================================= */

.border { border: 1px solid var(--theme-border) !important; }
.border-top { border-top: 1px solid var(--theme-border) !important; }
.border-bottom { border-bottom: 1px solid var(--theme-border) !important; }
.border-left { border-left: 1px solid var(--theme-border) !important; }
.border-right { border-right: 1px solid var(--theme-border) !important; }

.border-none { border: 0 !important; }
.border-top-none { border-top: 0 !important; }
.border-bottom-none { border-bottom: 0 !important; }
.border-left-none { border-left: 0 !important; }
.border-right-none { border-right: 0 !important; }


/* =========================================================
   15. GENERAL UTILITIES
   ========================================================= */

.radius-sm { border-radius: var(--border-radius-sm) !important; }
.radius-img { border-radius: var(--border-radius-img) !important; }
.radius-md { border-radius: var(--border-radius-md) !important; }
.radius-lg { border-radius: var(--border-radius-lg) !important; }
.radius-pill { border-radius: var(--border-radius-pill) !important; }
.radius-none,
.radius-none img { border-radius: 0 !important; }

.overflow-hidden { overflow: hidden !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

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

.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

.ratio-1-1 img, .ratio-3-2 img, .ratio-4-3 img, .ratio-16-9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full-height { min-height: 100svh; }

/* Rounded images everywhere (Image, Video, Gallery, Posts).
   Add .radius-none to an image that should stay square. */
.elementor-widget-image img,
.elementor-widget-video .elementor-wrapper,
.elementor-widget-gallery .e-gallery-image,
.elementor-widget-image-gallery img,
.elementor-widget-google_maps iframe,
.elementor-post__thumbnail,
.elementor-post__thumbnail img {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

/* Screen-reader-only text */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   16. SPLIT SECTION (kept from the demo site)
   ========================================================= */

.split-section {
    display: flex;
    width: 100%;
    padding: 0;
    gap: 0;
}

.split-left,
.split-right {
    width: 50%;
    padding: var(--space-md);
    box-sizing: border-box;
}

.split-left {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.split-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.split-left .split-content,
.split-right .split-content {
    width: 100%;
    max-width: calc(calc(var(--site-content-width) / 2) - var(--space-md));
}


/* =========================================================
   17. BUTTONS
   Put the class on the Button widget:
   btn-primary   red, main action (one per section)
   btn-outline   subtle outline, secondary action on white/gray
   btn-outline-white  outline on photos and blue sections
   btn-white / btn-black / btn-secondary / btn-ghost  kept
   btn-sm        44px high (header)
   btn-chip      small anchor chip ("Hopp til")
   ========================================================= */

.elementor-button,
.btn-primary .elementor-button,
.btn-secondary .elementor-button,
.btn-outline .elementor-button,
.btn-outline-white .elementor-button,
.btn-white .elementor-button,
.btn-black .elementor-button,
.btn-ghost .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0 1.625rem;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: solid;
    text-decoration: none;
    transition:
        background-color var(--btn-transition),
        border-color var(--btn-transition),
        color var(--btn-transition),
        transform var(--btn-transition),
        box-shadow var(--btn-transition);
}

/* Primary – red */
.btn-primary .elementor-button {
    background-color: var(--btn-accent);
    color: var(--btn-white);
    border-color: var(--btn-accent);
}

.btn-primary .elementor-button:hover {
    background-color: var(--btn-accent-hover);
    border-color: var(--btn-accent-hover);
    color: var(--btn-white);
    transform: translateY(-2px);
}

/* Secondary – black */
.btn-secondary .elementor-button {
    background-color: var(--btn-black);
    color: var(--btn-white);
    border-color: var(--btn-black);
}

.btn-secondary .elementor-button:hover {
    background-color: var(--btn-black-hover);
    border-color: var(--btn-black-hover);
    color: var(--btn-white);
    transform: translateY(-2px);
}

/* Outline – subtle */
.btn-outline .elementor-button {
    background-color: transparent;
    color: var(--btn-black);
    border-color: var(--color-border-subtle);
}

.btn-outline .elementor-button:hover {
    background-color: var(--color-gray);
    color: var(--btn-black);
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

/* Outline white – on photos and blue sections */
.btn-outline-white .elementor-button {
    background-color: transparent;
    color: var(--btn-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-white .elementor-button:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--btn-white);
    border-color: var(--btn-white);
    transform: translateY(-2px);
}

/* White */
.btn-white .elementor-button {
    background-color: var(--btn-white);
    color: var(--btn-black);
    border-color: var(--btn-white);
}

.btn-white .elementor-button * {
    color: var(--btn-black);
}

.btn-white .elementor-button:hover {
    background-color: var(--btn-white-hover);
    border-color: var(--btn-white-hover);
    color: var(--btn-black);
    transform: translateY(-2px);
}

/* Black */
.btn-black .elementor-button {
    background-color: var(--btn-black);
    color: var(--btn-white);
    border-color: var(--btn-black);
}

.btn-black .elementor-button:hover {
    background-color: var(--btn-white);
    color: var(--btn-black);
    border-color: var(--btn-white);
    transform: translateY(-2px);
}

/* Ghost */
.btn-ghost .elementor-button {
    background-color: transparent;
    color: var(--btn-black);
    border-color: transparent;
}

.btn-ghost .elementor-button:hover {
    color: var(--btn-accent);
}

/* Size: small (header) */
.btn-sm .elementor-button {
    min-height: var(--btn-height-sm);
    padding: 0 1.25rem;
    font-size: var(--font-sm);
}

/* Button rows (flex-row gap-xs) wrap instead of colliding;
   each pill keeps its text on one line. Add "flex-nowrap" to
   a row to opt out, or "chip-scroll" for a swipeable strip. */
.e-con.flex-row.gap-xs:not(.flex-nowrap):not(.chip-scroll) {
    flex-wrap: wrap !important;
}

.e-con.flex-row.gap-xs > .elementor-widget-button {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.e-con.flex-row.gap-xs .elementor-button {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .e-con.chip-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-inline: calc(var(--padding-horizontal) * -1);
        padding-inline: var(--padding-horizontal);
        scroll-snap-type: x proximity;
    }

    .e-con.chip-scroll::-webkit-scrollbar {
        display: none;
    }

    .e-con.chip-scroll > .elementor-widget-button {
        scroll-snap-align: start;
    }
}

/* Chip: anchor links at the top of the season pages */
.btn-chip .elementor-button {
    min-height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--color-gray);
    color: var(--color-black);
    border-color: var(--color-gray);
}

.btn-chip .elementor-button:hover {
    background-color: var(--color-blue-light);
    border-color: var(--color-blue-light);
    color: var(--color-black);
}

/* Static chip (not a link), e.g. Osensjøen activities */
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.875rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--color-gray);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black);
}

.bg-gray .chip {
    background-color: var(--color-white);
}

/* No underline on button hover */
.btn-primary .elementor-button:hover,
.btn-secondary .elementor-button:hover,
.btn-outline .elementor-button:hover,
.btn-outline-white .elementor-button:hover,
.btn-white .elementor-button:hover,
.btn-black .elementor-button:hover,
.btn-ghost .elementor-button:hover,
.btn-chip .elementor-button:hover {
    text-decoration: none;
}


/* =========================================================
   18. HEADER AND NAVIGATION
   Header container: site-header
   Inner row: header-row · Logo: site-logo · Menu pill: site-nav · Menu widget: main-menu
   Hero container on the page: has-hero (makes the header transparent)
   ========================================================= */

.site-header {
    position: relative;
    width: 100%;
    z-index: 9999;
    background-color: var(--color-white);
    padding-block: 1rem;
}

/* The header is fixed on every page. The header script hides
   it while scrolling down and shows it again on scroll up.
   Hero pages: transparent at the top.
   Other pages: light background at the top, and a spacer of
   the same height keeps the content below it. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

body:has(.has-hero) .site-header {
    background-color: transparent;
    box-shadow: none;
}

body:not(:has(.has-hero)) .elementor-location-header {
    min-height: var(--header-height);
}

body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* Hidden while scrolling down (set by the header script) */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Shown again after scrolling up: no bar, only the logo and the
   white menu pill (set by the header script) */
.site-header.is-scrolled,
body:has(.has-hero) .site-header.is-scrolled,
body:not(:has(.has-hero)) .site-header.is-scrolled {
    background-color: transparent !important;
    box-shadow: none !important;
}

.site-header.is-scrolled .site-logo img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

/* Header row: logo left, menu pill right – always one row, also on mobile.
   Put header-row on the inner container (with content-width). */
.header-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem;
}

/* Logo: no background, just the logo file */

/* Logo container */

.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 144px !important;
    max-width: none !important;
    height: 100px;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
}

/* Logo image */

.site-logo img {
    display: block;
    width: auto !important;
    height: 100px !important;
    min-width: 0;
    min-height: 0;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* White pill around the menu and the CTA button – never wraps */
.site-nav {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    flex: none;
    width: auto !important;
    gap: 2px;
    background: var(--color-white);
    border-radius: var(--border-radius-pill);
    padding: 5px 5px 5px 8px;
    box-shadow: var(--shadow-nav);
}

.site-nav > .elementor-widget,
.site-nav .elementor-widget-nav-menu {
    position: static;
    width: auto !important;
    flex: none;
}

/* Menu items: compact */
.main-menu .elementor-nav-menu--main .elementor-item,
.site-nav .elementor-nav-menu--main .elementor-item {
    padding: 10px 12px !important;
    border-radius: var(--border-radius-pill);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-black);
}

.main-menu .elementor-nav-menu--main .elementor-item:hover,
.site-nav .elementor-nav-menu--main .elementor-item:hover {
    background-color: var(--color-gray);
    color: var(--color-black);
}

.main-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.site-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
    font-weight: 600;
}

/* Hide Elementor's pointer lines – the pill is the indicator */
.site-nav .elementor-nav-menu--main .elementor-item::before,
.site-nav .elementor-nav-menu--main .elementor-item::after {
    display: none !important;
}

/* Hamburger toggle (shown from the Nav Menu breakpoint and down) */
.site-nav .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: var(--color-black) !important;
    border-radius: var(--border-radius-pill);
}

.site-nav .elementor-menu-toggle:hover {
    background: var(--color-gray) !important;
}

.site-nav .elementor-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: var(--color-black);
}

/* Dropdown: a white card below the pill, aligned right */
.site-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    width: 280px !important;
    max-width: calc(100vw - 2rem);
    margin: 0 !important;
    padding: 8px;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
}

.site-nav .elementor-nav-menu--dropdown .elementor-item {
    padding: 12px 16px !important;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black);
    background: transparent;
}

.site-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.site-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
}

/* Desktop dropdown: same white card as the phone menu, 8px
   below the pill. The submenu hangs from its menu item, which
   ends about 10.5px above the pill's bottom edge (10.5 + 8). */
.site-nav .elementor-nav-menu--main .sub-menu {
    min-width: 240px !important;
    margin-top: 18.5px !important;
    padding: 8px !important;
    background: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

/* Invisible bridge across the gap so the menu stays open */
.site-nav .elementor-nav-menu--main .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
}

.site-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
    padding: 12px 16px !important;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3;
    color: var(--color-black) !important;
    background: transparent !important;
    border: 0 !important;
}

.site-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.site-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible,
.site-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
    background: var(--color-blue-light) !important;
    color: var(--color-blue) !important;
}

/* Parent item stays highlighted while its menu is open */
.site-nav .elementor-nav-menu--main .menu-item-has-children > a.highlighted {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
}

/* Phone menu: submenu items readable and indented */
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    font-size: 1rem !important;
    font-weight: 400;
    color: var(--color-black) !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 2rem !important;
}

/* Phones: 56px logo and a slimmer pill (header 76px tall) */
@media (max-width: 767px) {
    .header-row {
        gap: 0.75rem;
    }

    .site-header {
        padding-block: 0.625rem !important;
    }

    .site-logo,
    .site-logo .elementor-widget-container {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .site-logo img {
        height: 56px !important;
        width: auto !important;
    }

    .site-nav {
        padding: 4px 4px 4px 6px;
    }

    .site-nav .elementor-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .site-nav .elementor-menu-toggle svg {
        width: 20px;
        height: 20px;
    }

    .site-header .elementor-button {
        min-height: 40px;
        padding: 0 1rem !important;
        font-size: 0.875rem !important;
    }
}


/* =========================================================
   19. FOOTER
   Footer container: site-footer theme-dark
   ========================================================= */

.site-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-on-dark);
    padding-top: 4.5rem;
    padding-inline: var(--padding-horizontal);
    font-size: 1rem;
    --theme-text: var(--color-on-dark);
    --theme-text-muted: var(--color-on-dark);
    --theme-link: var(--color-on-dark);
    --focus-color: var(--color-white);
}

.site-footer p,
.site-footer li,
.site-footer a:not(.elementor-button) {
    font-size: 1rem;
    color: var(--color-on-dark);
    text-decoration: none;
}

.site-footer a:not(.elementor-button):hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-title,
.footer-title .elementor-heading-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white) !important;
}

.footer-brand,
.footer-brand .elementor-heading-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white) !important;
}

.footer-bottom {
    margin-top: 3.5rem;
    padding-block: 1.25rem 1.5rem;
    border-top: 1px solid #3A5D99;
    font-size: 0.875rem;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 0.875rem !important;
}

/* Current footer template (bg-blue section + bg-dark bottom bar):
   bottom bar gets the site's side padding */
.elementor-location-footer > .e-con.bg-dark > .e-con-inner,
.elementor-location-footer > .e-con.bg-dark.e-con-full {
    padding-inline: var(--padding-horizontal);
    padding-block: 1rem;
    gap: 0.5rem 2rem;
    flex-wrap: wrap;
}

.elementor-location-footer > .e-con.bg-dark p {
    font-size: 0.875rem !important;
    margin: 0;
}

/* Footer menus: flat, no dropdown arrows */
.elementor-location-footer .elementor-nav-menu .sub-arrow,
.elementor-location-footer .elementor-nav-menu .sub-menu {
    display: none !important;
}

@media (max-width: 1024px) {
    /* 44px tap height replaces Elementor's 18px item spacing */
    .elementor-location-footer .elementor-nav-menu a.elementor-item {
        min-height: 44px;
        padding-block: 0 !important;
        display: flex;
        align-items: center;
    }

    .elementor-location-footer .elementor-nav-menu > li {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .elementor-location-footer .site-logo img,
    .elementor-location-footer .elementor-widget-theme-site-logo img,
    .elementor-location-footer .elementor-widget-image img {
        max-height: 56px;
        width: auto;
    }
}


/* =========================================================
   20. COMPONENTS
   ========================================================= */

/* --- Facts: small label above a 20px bold value ---------
   Container: fact-list
   Each fact: container fact, with two widgets fact__label + fact__value */

.fact-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}

.fact-list.justify-between {
    justify-content: space-between;
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fact__label,
.fact__label p,
.fact__label .elementor-heading-title {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--theme-text-muted);
    margin: 0;
}

.fact__value,
.fact__value p,
.fact__value .elementor-heading-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--theme-text);
    margin: 0;
}

/* Fact box (Diskgolf): label left, value right, line between rows */
.fact-box {
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-gray);
}

.fact-box .fact {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--color-line);
}

.fact-box .fact__value,
.fact-box .fact__value p {
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
}

/* --- Key info strip under race heroes --------------------- */

.info-strip {
    padding-block: 1.75rem;
    padding-inline: var(--padding-horizontal);
    border-bottom: 1px solid var(--color-line);
    background-color: var(--color-white);
}

/* --- Timeline (Text Editor widget with an <ol class="timeline">) --- */

.timeline,
.timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline li {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding-block: 1rem;
    border-bottom: 1px solid var(--theme-border);
}

.timeline li:last-child {
    border-bottom: 0;
}

.timeline li::marker {
    content: none;
}

.timeline strong {
    font-weight: 700;
    color: var(--theme-text);
}

/* --- Data table (Text Editor widget with a <table class="data-table">) --- */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--border-radius-md);
    background: var(--color-white);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-line);
}

.data-table th {
    font-weight: 600;
    background-color: var(--color-gray);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

/* --- Accordion / FAQ (Elementor nested Accordion) -------- */
/* Applies to every nested Accordion. Each question is a soft
   row; the open one becomes a card. The outline is an inset
   shadow, not a border: Elementor animates every item to the
   height of its question row, and a border made closed items
   shrink 2px and jump. Add "faq-plain" to keep Elementor's
   look, or "faq-inline" for the flat version inside cards. */

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 820px;
    overflow-anchor: none;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item {
    border: 0 !important;
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-line);
    transition: box-shadow 0.2s ease;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item[open] {
    box-shadow: var(--shadow-md);
}

.bg-gray .elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item:not([open]) {
    box-shadow: none;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 1rem;
    min-height: 60px;
    padding: 0.875rem 1rem 0.875rem 1.25rem !important;
    border: 0 !important;
    border-radius: 14px;
    background: transparent !important;
    cursor: pointer;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title-header {
    flex: 1 1 auto;
    order: 1;
    justify-content: flex-start !important;
    text-align: left;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title-text {
    font-family: var(--font-family);
    font-size: 1.0625rem !important;   /* 17px */
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--color-black) !important;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
    color: var(--color-blue) !important;
}

/* +/– in a round badge, filled when open */
.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title-icon {
    flex: none;
    order: 2;
    display: grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blue-light);
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    background: var(--color-blue);
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title-icon svg {
    width: 12px !important;
    height: 12px !important;
    fill: var(--color-blue) !important;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
    fill: var(--color-white) !important;
}

/* Answer */
.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item > [role="region"] {
    padding: 0 1.25rem 1.25rem !important;
    border: 0 !important;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item > [role="region"] > .e-con {
    padding: 0 !important;
    border: 0 !important;
}

.elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item > [role="region"] p {
    color: var(--color-muted);
    max-width: 62ch;
}

@media (max-width: 767px) {
    .elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title {
        padding: 0.75rem 0.75rem 0.75rem 1rem !important;
    }

    .elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item-title-text {
        font-size: 1rem !important;
    }

    .elementor-widget-n-accordion:not(.faq-plain):not(.faq-inline) .e-n-accordion-item > [role="region"] {
        padding: 0 1rem 1rem !important;
    }
}

/* Accordion inside a distance card: no white box */
.faq-inline {
    padding: 0;
    background: transparent;
    border-top: 1px solid var(--color-line);
}

/* --- Form (Elementor Form widget) ------------------------ */

.member-form {
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-gray);
}

.member-form .elementor-field-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.375rem;
}

.member-form .elementor-field-textual {
    min-height: 48px;
    padding: 0 0.875rem;
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid var(--color-field-border);
    border-radius: 10px;
}

.member-form textarea.elementor-field-textual {
    padding-block: 0.75rem;
}

.member-form .elementor-button {
    background-color: var(--btn-accent);
    border-color: var(--btn-accent);
    color: var(--btn-white);
}

.member-form .elementor-button:hover {
    background-color: var(--btn-accent-hover);
    border-color: var(--btn-accent-hover);
}

.member-form .elementor-message-danger,
.member-form .elementor-error .elementor-field {
    color: #B00C12;
    border-color: #B00C12;
}

/* Forms on blue/dark sections (Kontakt): white labels, white
   fields. Add "member-form" instead to put the form on a card. */
:is(.hero, .bg-blue, .bg-dark, .theme-dark) .elementor-widget-form:not(.member-form) .elementor-field-label {
    color: var(--color-white);
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: 0.375rem;
}

:is(.hero, .bg-blue, .bg-dark, .theme-dark) .elementor-widget-form:not(.member-form) .elementor-field-textual {
    min-height: 48px;
    padding-inline: 0.875rem;
    font-size: 1rem;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid transparent;
    border-radius: 10px;
}

:is(.hero, .bg-blue, .bg-dark, .theme-dark) .elementor-widget-form:not(.member-form) textarea.elementor-field-textual {
    padding-block: 0.75rem;
}

/* --- Link list (e.g. result years) ----------------------- */
/* Put "link-list" on the Text Editor widget: 44px tap height,
   columns from tablet up. */

.link-list p {
    margin: 0;
}

.link-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (min-width: 768px) {
    .link-list .elementor-widget-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        column-gap: 1.5rem;
    }
}

/* --- Logo grid (sponsors / partners) --------------------- */

.logo-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.logo-grid .elementor-widget-image,
.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 1rem;
    border-radius: var(--border-radius-img);
    background-color: var(--color-white);
}

.logo-grid img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    border-radius: 0 !important;
}

/* --- Vipps box ------------------------------------------- */

.vipps-box {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    --theme-text: var(--color-black);
    --theme-text-muted: var(--color-muted);
}

.vipps-box .vipps-number,
.vipps-box .vipps-number .elementor-heading-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-black) !important;
}

/* --- Disc golf layout dots (on the H3 in each layout card) --- */

.dot-white .elementor-heading-title::before,
.dot-red .elementor-heading-title::before,
.dot-blue .elementor-heading-title::before,
.dot-black .elementor-heading-title::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: 0.05em;
}

.dot-white .elementor-heading-title::before { background: #fff; box-shadow: inset 0 0 0 2px #000; }
.dot-red .elementor-heading-title::before { background: var(--color-accent); }
.dot-blue .elementor-heading-title::before { background: var(--color-blue); }
.dot-black .elementor-heading-title::before { background: #000; }

/* --- Thin top line above small columns (Bidra, footer) --- */

.rule-top {
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
}


/* =========================================================
   21. HIDDEN SCRIPT
   ========================================================= */

.hidden-script,
.hidden-script.elementor-widget,
.hidden-script.elementor-element {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* =========================================================
   22. BLOG POSTS
   ========================================================= */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-lg);
    width: 100%;
}

.post-card {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-radius: calc(var(--border-radius-md) + var(--space-xs));
    transition: transform 300ms ease;
}

.post-card:hover {
    transform: scale(1.01) translateY(-10px);
    cursor: pointer;
}

.post-card .post-date,
.post-card .post-date * {
    font-size: var(--font-sm);
    color: var(--color-muted);
}

/* Single posts without a Theme Builder template: content width,
   side padding and a readable comment form */
.single-post .site-main {
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: var(--padding-horizontal);
    padding-block: var(--space-lg);
}

.single-post .comments-area {
    max-width: 720px;
}

.single-post .comments-area input:not([type="checkbox"]),
.single-post .comments-area textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-field-border);
    border-radius: 10px;
    font: inherit;
}


/* =========================================================
   23. ACCESSIBILITY – VISIBLE FOCUS (WCAG 2.4.7)
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.e-n-accordion-item-title:focus-visible,
.elementor-menu-toggle:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}

/* Season card is a link container: show focus on the card itself */
.season-card:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 4px;
}


/* =========================================================
   24. RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --padding-horizontal: clamp(1.5rem, 4vw, 4rem);
    }

    .site-header {
        padding-inline: var(--padding-horizontal);
    }

    .card {
        padding: var(--space-sm);
    }
}


@media (max-width: 1024px) {

    .grid-12,
    .posts-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: span 6;
    }

    /* Text + image / text + side card rows stack on tablet */
    .grid-split > .col-4,
    .grid-split > .col-5,
    .grid-split > .col-6,
    .grid-split > .col-7,
    .grid-split > .col-8 {
        grid-column: span 6;
    }

    .posts-grid .post-card {
        grid-column: span 3;
    }

    .grid-fill-last > .col-6:last-child:nth-child(odd),
    .grid-fill-last > .col-4:last-child:nth-child(3n + 1),
    .grid-fill-last > .col-3:last-child:nth-child(4n + 1),
    .grid-fill-last > .col-2:last-child:nth-child(6n + 1) {
        grid-column: span 6;
    }

    .section {
        padding-block: var(--space-lg);
    }

    .hero {
        min-height: clamp(400px, 60vh, 600px);
    }

    .season-card {
        min-height: 440px;
    }

    .logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activity-card {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* Phones: compact scale. Body 16px, H1 32 / H2 26 / H3 20,
   44px buttons, 76px header, more space between sections and
   less inside cards. */
@media (max-width: 767px) {

    :root {
        --padding-horizontal: 1rem;
        --header-height: 76px;

        --font-body: 1rem;            /* 16px */
        --font-lead: 1.0625rem;       /* 17px */
        --font-sm: 0.875rem;          /* 14px */
        --font-h1: 2rem;              /* 32px */
        --font-h2: 1.625rem;          /* 26px */
        --font-h3: 1.25rem;           /* 20px */
        --font-h4: 1.125rem;          /* 18px */
        --line-height-body: 1.55;
        --line-height-heading: 1.15;

        --btn-height: 44px;
        --btn-height-sm: 40px;
    }

    /* Type */
    body,
    p,
    li {
        font-size: var(--font-body);
        line-height: var(--line-height-body);
    }

    h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--font-h1) !important; line-height: var(--line-height-heading); }
    h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--font-h2) !important; line-height: var(--line-height-heading); }
    h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--font-h3) !important; line-height: 1.2; }

    .elementor-button {
        min-height: var(--btn-height);
        padding: 0 1.125rem !important;
        font-size: 0.9375rem !important;   /* 15px */
    }

    /* Grid: one column */
    .grid-12,
    .posts-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem !important;
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: span 1;
    }

    .posts-grid .post-card {
        grid-column: span 1;
    }

    .grid-fill-last > * {
        grid-column: span 1 !important;
    }

    /* Rhythm: 40px between sections, tighter cards */
    .section {
        padding-block: 2.5rem !important;
    }

    .card {
        padding: 1.125rem;
        gap: 0.75rem;
    }

    /* Hero: card at the bottom, photo shows above it */
    .hero {
        min-height: min(88svh, 680px) !important;
    }

    .hero.has-hero,
    .hero.section {
        padding-block: calc(var(--header-height) + 1rem) 1rem !important;
    }

    .hero .card {
        padding: 1.125rem 1.125rem 1.25rem;
        gap: 0.625rem;
        margin-bottom: 0 !important;      /* card has mb-xl */
        border-radius: 14px;
    }

    .hero .card p {
        font-size: 0.9375rem;             /* 15px */
        line-height: 1.5;
    }

    .hero .card .elementor-widget-button .elementor-button {
        min-height: 40px;
    }

    .hero .card :is(.e-con, .elementor-widget-button) {
        gap: 0.5rem;
    }

    /* Season cards (Vinter/Sommer on the front page) */
    .split-section {
        min-height: 420px !important;
    }

    .split-section .card {
        padding: 1rem 1.125rem 1.125rem;
        gap: 0.5rem;
    }

    .split-left,
    .split-right {
        width: 100%;
        padding: var(--space-md);
    }

    .timeline li {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 1rem;
    }

    .fact-list.justify-between {
        justify-content: flex-start;
    }
}


@media (max-width: 480px) {

    .logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   25. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn-primary .elementor-button:hover,
    .btn-secondary .elementor-button:hover,
    .btn-outline .elementor-button:hover,
    .btn-outline-white .elementor-button:hover,
    .btn-white .elementor-button:hover,
    .btn-black .elementor-button:hover,
    .post-card:hover {
        transform: none;
    }
}/* End custom CSS */