/*
Theme Name: Sjælsrejser Child
Theme URI: https://sjaelsrejser.com/
Description: Sjælsrejser brand child theme on Kadence — Webnode-faithful palette, full-bleed photo hero + cream content blocks, per-section poetic colors, PT Serif + Metropolis.
Author: Flashcloud
Author URI: https://flashcloud.com/
Template: kadence
Version: 2.7.0
License: GNU General Public License v2 or later
Text Domain: sjaelsrejser-child
*/

/* =========================================================================
   1. Brand tokens (lifted from live source via getComputedStyle)
   ========================================================================= */
:root {
    /* Yellows */
    --sj-yellow: #fff176;
    --sj-gold: #f6e466;

    /* Per-section accent palette (poetic) */
    --sj-navy: #2e4567;
    --sj-wine: #7f2e2d;
    --sj-teal: #00696f;
    --sj-forest: #2c5b2d;
    --sj-deep-teal: #065d4d;
    --sj-muted-green: #5e7b61;
    --sj-pale-sage: #b4c1aa;
    --sj-light-green: #6fb26f;
    --sj-photo-text: #e6efec;

    /* Surface */
    --sj-page-bg: #ffffff;
    --sj-near-black: #222222;
    --sj-photo-overlay-light: rgba(0, 0, 0, 0.18);

    /* Typography */
    --sj-font-sans: "Metropolis", "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sj-font-serif: "PT Serif", Georgia, "Times New Roman", serif;

    /* Sizing */
    --sj-section-pad-block: 5rem;
    --sj-container: 1100px;
    --sj-container-narrow: 800px;
    --sj-container-wider: 1280px;

    /* Buttons */
    --sj-btn-radius: 5px;
}

/* =========================================================================
   2. Base / frame killers
   ========================================================================= */
html, body {
    background: var(--sj-page-bg);
    color: var(--sj-near-black);
    font-family: var(--sj-font-sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

.wp-site-blocks,
.entry-content,
.content-container,
.content-area,
.site-content {
    background: var(--sj-page-bg) !important;
}

/* Only style .site-container in the body content, NOT inside the header */
main#inner-wrap .site-container,
.content-area .site-container {
    background: var(--sj-page-bg) !important;
}

/* Header-internal site-container should remain transparent so the dark
   header bg shows through. */
.site-header .site-container,
#masthead .site-container {
    background: transparent !important;
}

.content-area { margin: 0 !important; padding: 0 !important; }

.entry-hero, .entry-hero.page-hero-section, .entry-header { display: none !important; }
.page .entry-title, .single .entry-title { display: none; }
.wp-site-blocks > main { flex: 0 0 auto !important; }

.entry-content > .wp-block-group { margin-block: 0 !important; }
/* Allow our full-bleed sections to escape the content container, but DO NOT
   touch the .site-container instances inside the header/footer (those constrain
   the logo + nav). */
.content-container, main#inner-wrap, .site-main {
    overflow: visible !important;
    max-width: none !important;
    padding: 0 !important;
}
.content-area > .site-container,
main#inner-wrap > .site-container,
.site-main .site-container {
    max-width: none !important;
    padding: 0 !important;
}

/* =========================================================================
   3. Header
   ========================================================================= */
.site-header,
#masthead {
    background: rgba(34, 34, 34, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky; top: 0; z-index: 100;
}

.site-branding .site-title,
.site-branding .site-title-wrap,
.site-branding .site-description,
.site-branding p.site-title { display: none !important; }

.site-branding,
.site-branding .brand,
.site-branding .brand.has-logo-image {
    width: auto !important;
    min-width: 360px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}

.site-branding .custom-logo,
.site-header .custom-logo {
    width: 360px !important;
    max-width: 400px !important;
    height: auto !important;
    max-height: 40px !important;
    display: block !important;
}

html body .main-navigation .menu-container > ul > li > a,
html body .header-navigation a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sj-font-sans);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    font-weight: 300;
    padding: 0 1rem;
}

html body .main-navigation .menu-container > ul > li > a:hover,
html body .main-navigation .menu-container > ul > li.current-menu-item > a {
    color: var(--sj-yellow) !important;
}
html body .main-navigation .menu-container > ul > li.current-menu-item > a {
    border-bottom: 2px solid var(--sj-yellow);
}

/* =========================================================================
   4. Section primitives — every section breaks out to viewport width
   ========================================================================= */
.sj-section,
.sj-hero,
.sj-section-photo,
.sj-section-cream,
.sj-section-other {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-block: var(--sj-section-pad-block) !important;
    padding-inline: 1.5rem !important;
    box-sizing: border-box !important;
    position: relative;
}

.sj-section > .sj-inner,
.sj-hero > .sj-inner,
.sj-section-photo > .sj-inner,
.sj-section-cream > .sj-inner,
.sj-section-other > .sj-inner {
    max-width: var(--sj-container);
    margin-inline: auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.sj-section--narrow > .sj-inner { max-width: var(--sj-container-narrow); }
.sj-section--wider > .sj-inner { max-width: var(--sj-container-wider); }
.sj-section--full > .sj-inner { max-width: 100%; padding-inline: 4vw; }

/* =========================================================================
   5. Hero (header-merged photo)
   ========================================================================= */
.sj-hero {
    min-height: 100vh;
    background-color: #1a1a1a;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    color: var(--sj-photo-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 6rem !important;
}

.sj-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sj-photo-overlay-light);
    pointer-events: none;
}

.sj-hero h1, .sj-hero h2 {
    font-family: var(--sj-font-sans);
    font-weight: 300;
    color: var(--sj-gold);
    margin: 0;
    line-height: 1.2;
}

.sj-hero h1.sj-hero-title,
.sj-hero h2.sj-hero-title {
    font-size: clamp(2.4rem, 3.5vw, 3.1rem);
    margin-bottom: 1.5rem;
}

.sj-hero h2.sj-hero-subtitle,
.sj-hero h3.sj-hero-subtitle {
    font-size: clamp(1.3rem, 1.85vw, 1.65rem);
    line-height: 1.6;
    font-weight: 300;
}

/* =========================================================================
   6. Photo section
   ========================================================================= */
.sj-section-photo {
    background-color: #1a1a1a;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--sj-photo-text);
    text-align: center;
    min-height: 400px;
}

.sj-section-photo--bottom { background-position: bottom center; }
.sj-section-photo--top { background-position: top center; }
.sj-section-photo--center { background-position: center center; }

.sj-section-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sj-photo-overlay-light);
    pointer-events: none;
}

.sj-section-photo h1, .sj-section-photo h2, .sj-section-photo h3 {
    font-family: var(--sj-font-sans);
    font-weight: 300;
    margin: 0 auto 1rem;
    line-height: 1.3;
    text-align: center;
}

.sj-section-photo h1.sj-photo-title-serif {
    font-family: var(--sj-font-serif);
    font-weight: 400;
    color: var(--sj-gold);
    font-size: clamp(2rem, 2.6vw, 2.5rem);
}

.sj-section-photo h2.sj-photo-title {
    color: var(--sj-yellow);
    font-size: clamp(1.4rem, 2vw, 2rem);
}

.sj-section-photo h2.sj-photo-title--gold {
    color: var(--sj-gold);
}

.sj-section-photo h3.sj-photo-subtitle,
.sj-section-photo h2.sj-photo-subtitle,
.sj-section-photo .sj-photo-poem {
    color: var(--sj-gold);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    max-width: 720px;
    margin-inline: auto;
}

.sj-section-photo .sj-photo-poem--white { color: #fff; }
.sj-section-photo .sj-photo-poem--sage { color: var(--sj-pale-sage); }

.sj-section-photo p,
.sj-section-photo li {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

/* =========================================================================
   7. Cream sections (color-aware)
   ========================================================================= */
.sj-section-cream,
.sj-section-other {
    background: var(--sj-page-bg);
    text-align: center;
}

/* Default heading family on cream */
.sj-section-cream h1,
.sj-section-cream h2,
.sj-section-cream h3,
.sj-section-other h1,
.sj-section-other h2,
.sj-section-other h3 {
    font-family: var(--sj-font-sans);
    font-weight: 300;
    line-height: 1.3;
    margin: 0 auto 1rem;
    text-align: center;
}

/* Serif title (PT Serif 400) for primary cream headlines */
.sj-section-cream h1.sj-serif,
.sj-section-other h1.sj-serif,
.sj-serif {
    font-family: var(--sj-font-serif) !important;
    font-weight: 400 !important;
}

/* Color variants — applied via section class */
.sj--navy h1, .sj--navy h2, .sj--navy h3,
.sj--navy p, .sj--navy li { color: var(--sj-navy); }
.sj--wine h1, .sj--wine h2, .sj--wine h3,
.sj--wine p, .sj--wine li { color: var(--sj-wine); }
.sj--teal h1, .sj--teal h2, .sj--teal h3,
.sj--teal p, .sj--teal li { color: var(--sj-teal); }
.sj--forest h1, .sj--forest h2, .sj--forest h3,
.sj--forest p, .sj--forest li { color: var(--sj-forest); }
.sj--deep-teal h1, .sj--deep-teal h2, .sj--deep-teal h3,
.sj--deep-teal p, .sj--deep-teal li { color: var(--sj-deep-teal); }

/* Sub-headlines on cream are smaller, same family */
.sj-section-cream h2.sj-cream-sub,
.sj-section-cream h3.sj-cream-body,
.sj-cream-body {
    font-size: 1.15rem;
    font-weight: 300;
    max-width: 760px;
    margin-inline: auto;
}

.sj-section-cream h2.sj-cream-title,
.sj-cream-title {
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
}

.sj-section-cream p,
.sj-section-other p {
    color: var(--sj-muted-green);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

/* Body text sometimes inherits the section color */
.sj--navy p.sj-body-color,
.sj--wine p.sj-body-color,
.sj--teal p.sj-body-color,
.sj--forest p.sj-body-color,
.sj--deep-teal p.sj-body-color { color: inherit; }

/* =========================================================================
   8. Buttons (rounded rect — NOT pill — per source)
   ========================================================================= */
.wp-block-button.sj-btn .wp-block-button__link,
.sj-btn-link {
    background: var(--sj-yellow);
    color: var(--sj-near-black);
    border: 1px solid var(--sj-yellow);
    border-radius: var(--sj-btn-radius);
    padding: 12px 32px;
    font-family: var(--sj-font-sans);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease, color 0.15s ease;
}

.wp-block-button.sj-btn .wp-block-button__link:hover,
.sj-btn-link:hover {
    background: #ffe94d;
    border-color: #ffe94d;
}

.wp-block-buttons.is-content-justification-center,
.sj-btn-wrap {
    justify-content: center;
    text-align: center;
    margin-top: 1.5rem;
}

/* =========================================================================
   9. Two-column bio (Connect)
   ========================================================================= */
.sj-bio-row .wp-block-columns { gap: 3rem !important; align-items: center !important; }
.sj-bio-row .wp-block-column:first-child { flex-basis: 38% !important; }
.sj-bio-row .wp-block-column:last-child { flex-basis: 58% !important; }

.sj-bio-row figure.wp-block-image img {
    width: 100%; height: auto;
    border-radius: 6px;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

.sj-bio-row h2 { text-align: left !important; }
.sj-bio-row .sj-bio-role { text-align: left !important; opacity: 0.9; margin-bottom: 1.5rem; }
.sj-bio-row p { text-align: left !important; line-height: 1.75; max-width: none; }

/* =========================================================================
   10. Word/poetry list (Vi vender tilbage / Open source / poem stanzas)
   ========================================================================= */
.sj-poem-list {
    text-align: center;
    line-height: 2.2;
    font-family: var(--sj-font-sans);
    font-size: 1rem;
    font-weight: 300;
    max-width: 480px;
    margin: 1rem auto;
}
.sj-poem-list--photo p { color: var(--sj-gold); }
.sj-poem-list p { margin: 0; }

/* =========================================================================
   11. Footer
   ========================================================================= */
.site-footer {
    background: #1a1a1a !important;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--sj-font-sans);
    font-size: 0.85rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none; }
.site-footer a:hover { color: var(--sj-yellow) !important; }
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner { padding: 1.25rem 0 !important; }

/* =========================================================================
   12. WPForms
   ========================================================================= */
.wpforms-form {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(127, 46, 45, 0.18);
    border-radius: 6px;
    padding: 2rem !important;
    max-width: 640px;
    margin: 1.5rem auto 0;
    text-align: left;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    background: #fff !important;
    border: 1px solid rgba(127, 46, 45, 0.22) !important;
    color: var(--sj-near-black) !important;
    font-family: var(--sj-font-sans) !important;
    font-size: 1rem !important;
    border-radius: 4px !important;
    padding: 0.75rem !important;
}
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
    background: var(--sj-yellow) !important;
    color: var(--sj-near-black) !important;
    border: 1px solid var(--sj-yellow) !important;
    border-radius: var(--sj-btn-radius) !important;
    padding: 12px 32px !important;
    font-family: var(--sj-font-sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.wpforms-form button[type="submit"]:hover { background: #ffe94d !important; }
.wpforms-form .wpforms-field-label {
    color: var(--sj-wine) !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
}

/* =========================================================================
   13. Product card (rejse / retreatet / retreat-maend)
   ========================================================================= */
.sj-product-card {
    background: rgba(255, 255, 255, 0.96);
    color: var(--sj-near-black);
    border-radius: 8px;
    padding: 1.5rem !important;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
}
.sj-product-card figure.wp-block-image { margin: 0 0 1rem 0; }
.sj-product-card figure.wp-block-image img {
    width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: 4px;
}
.sj-product-card .sj-product-name {
    font-size: 1.1rem; font-weight: 400; color: var(--sj-near-black);
    margin: 0.25rem 0 0.5rem 0; line-height: 1.3;
}
.sj-product-card .sj-product-price {
    font-size: 1.4rem; font-weight: 500; color: var(--sj-near-black);
}
.sj-product-card .sj-product-compare {
    text-decoration: line-through; opacity: 0.55;
    font-size: 1rem; margin-left: 0.4rem;
}
.sj-product-card .sj-product-label {
    display: inline-block;
    background: var(--sj-yellow);
    color: var(--sj-near-black);
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

/* =========================================================================
   14. Responsive
   ========================================================================= */
@media (max-width: 782px) {
    :root { --sj-section-pad-block: 3rem; }
    .sj-section, .sj-hero, .sj-section-photo, .sj-section-cream, .sj-section-other {
        padding-inline: 1rem !important;
    }
    .sj-bio-row .wp-block-columns {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .sj-bio-row .wp-block-column:first-child,
    .sj-bio-row .wp-block-column:last-child {
        flex-basis: 100% !important;
    }
    .sj-bio-row h2, .sj-bio-row .sj-bio-role, .sj-bio-row p { text-align: center !important; }
    .sj-hero { min-height: 500px; padding-block: 5rem !important; }
}

/* =========================================================================
   15. Per-page tweaks
   ========================================================================= */
/* Vilkår sec 1 — h1 + h2 sit tight in source (zero gap). Override Kadence's
   default heading margin and the Elementor widget margin between them. */
.page-id-35 .elementor-element:first-child .elementor-widget-heading h1 {
    margin-bottom: 0 !important;
}
.page-id-35 .elementor-element:first-child .elementor-widget-heading + .elementor-widget-heading {
    margin-top: 0 !important;
}
.page-id-35 .elementor-element:first-child .elementor-widget-heading:first-child {
    margin-bottom: 0 !important;
}

/* Connect bios — source has p { margin:0; padding-bottom:12px } per
   paragraph, giving a one-line gap between blocks while keeping spacing
   precise. */
.sj-bio-prose p { margin: 0; padding: 0 0 12px 0; }
.sj-bio-prose p:last-child { padding-bottom: 0; }

/* Connect — kill Elementor's default widget bottom margin sitewide on this
   page so widget _margin values control vertical rhythm. */
.page-id-36 .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}

/* Connect bio photos — source wraps in .b-img-c with 15px radius + overflow
   hidden. Mirror via the Elementor image widget on this page. Stretch to
   full column width so size matches source (~415-430px wide). */
.page-id-36 .elementor-widget-image img {
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    max-width: 415px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.page-id-36 .elementor-widget-image .elementor-image,
.page-id-36 .elementor-widget-image figure {
    width: 100%;
    text-align: center;
}

/* Rejse — Page ID 38 */
/* Hero product carousel — match source: prev/next arrows, dot indicators,
   one slide visible at a time. Each slide is a horizontal product card
   (image-left, text-right). */
.sj-rejse-carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 60px;
}
.sj-rejse-track {
    position: relative;
    overflow: hidden;
}
.sj-rejse-slide {
    display: none;
}
.sj-rejse-slide.active {
    display: block;
}
.sj-rejse-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.sj-rejse-arrow:hover { background: rgba(0,0,0,0.7); }
.sj-rejse-prev { left: 0; }
.sj-rejse-next { right: 0; }
.sj-rejse-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.sj-rejse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    padding: 0;
}
.sj-rejse-dot.active { background: #fff; }

/* Per-card layout */
.sj-rejse-cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1060px;
    margin: 0 auto;
}
.sj-rejse-card {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 0;
    background: rgba(255,255,255,0.0);
    align-items: center;
    height: 530px;
}
.sj-rejse-card-img {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    width: 530px;
    height: 530px;
}
.sj-rejse-card-img img {
    width: 530px;
    height: 530px;
    object-fit: cover;
    display: block;
}
.sj-rejse-firstmover {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff176;
    color: #222;
    font-family: Metropolis, sans-serif;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 3px;
    z-index: 2;
}
.sj-rejse-card-body {
    padding: 0 0 0 48px;
    color: #fff;
    font-family: Metropolis, sans-serif;
}
.sj-rejse-card-title {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 32px;
    color: #fff176;
    margin: 0 0 16px 0;
    line-height: 1.2;
}
.sj-rejse-card-text {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    margin: 0 0 20px 0;
}
.sj-rejse-card-price {
    font-weight: 500;
    font-size: 24px;
    color: #fff;
    margin: 0 0 20px 0;
}
.sj-rejse-card-price span {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 18px;
    margin-left: 12px;
}
.sj-rejse-card-cta {
    display: inline-block;
    background: #fff176;
    color: #222 !important;
    padding: 10px 28px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 400;
    font-size: 18px;
}

/* Det fulde overblik 2-column block */
.sj-overblik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}
.sj-overblik-col p {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: #5e7b61;
    margin: 0 0 18px 0;
}
.sj-overblik-eyebrow {
    color: #5a7b5e !important;
    font-weight: 400 !important;
    font-size: 21px !important;
    text-transform: none;
    margin-bottom: 24px !important;
}
.sj-overblik-eyebrow strong {
    font-weight: 700;
    color: inherit;
}
.sj-overblik-col p strong {
    color: #6fb26f;
    font-weight: 400;
}

/* 3 vigtige punkter — 3-col on photo bg */
.sj-3punkter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    color: #fff;
    font-family: Metropolis, sans-serif;
    text-align: left;
}
.sj-3punkter h3 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: #f6e466;
    margin: 0 0 12px 0;
}
.sj-3punkter p {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: #f6e466;
    margin: 0 0 14px 0;
}
.sj-3punkter a {
    color: #fff176;
}

/* Pyramiderne — Page ID 37 */
/* Prose blocks: paragraphs butt with 12px padding-bottom, like vilkar/connect bios. */
.sj-pyr-prose p { margin: 0; padding: 0 0 12px 0; }
.sj-pyr-prose p:last-child { padding-bottom: 0; }
.sj-pyr-prose strong { font-weight: 700; color: inherit; }

/* NU :: CONNECT contact 2-col block */
.sj-pyr-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: #065d4d;
}
.sj-pyr-contact h3 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: #065d4d;
    margin: 0 0 8px 0;
}
.sj-pyr-contact p {
    font-family: Metropolis, sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #065d4d;
    margin: 0;
    line-height: 1.5;
}
.sj-pyr-contact a {
    color: #065d4d;
}
.sj-pyr-contact strong { font-weight: 700; }

/* Pyramiderne page-scoped image defaults */
.page-id-37 .elementor-widget-image img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
}
.page-id-37 .elementor-widget-image .elementor-image,
.page-id-37 .elementor-widget-image figure {
    width: 100%;
}
/* Per-section image sizing matching source. Source uses absolute-positioned
   images that overflow LEFT of their column. We replicate by giving the
   widget a negative left margin to push image past column boundary. */
.page-id-37 .sj-pyr3-img img { aspect-ratio: 464/440; width: 100%; height: auto; object-fit: cover; }

.page-id-37 .sj-pyr5-img { width: calc(100% + 150px) !important; margin-left: -150px !important; }
.page-id-37 .sj-pyr5-img img { aspect-ratio: 637/399; width: 100%; height: auto; object-fit: cover; }

.page-id-37 .sj-pyr6-img { width: calc(100% + 230px) !important; margin-left: -230px !important; overflow: hidden; }
.page-id-37 .sj-pyr6-img img { aspect-ratio: 890/593; width: 100%; height: auto; object-fit: cover; }

.page-id-37 .sj-pyr7-img { width: calc(100% + 175px) !important; margin-left: -175px !important; }
.page-id-37 .sj-pyr7-img img { aspect-ratio: 617/407; width: 100%; height: auto; object-fit: cover; }
/* Sec 6 Ravnetunnellerne — pattern bg + add form CSS */
.page-id-37 .sj-pyr-ravnetunnel {
    background-color: #272727 !important;
    background-image: url('/wp-content/themes/sjaelsrejser-child/img/ravnetunnel-pattern.png') !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    background-blend-mode: normal !important;
}

/* Kill default widget margin on this page */
.page-id-37 .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}

/* WPForms compact for pyramiderne too */
.page-id-37 .wpforms-field { padding: 4px 0 !important; }
.page-id-37 .wpforms-field-container { margin-bottom: 0 !important; }
.page-id-37 .wpforms-field textarea {
    min-height: 70px !important;
    height: 70px !important;
}
.page-id-37 .wpforms-field input,
.page-id-37 .wpforms-field textarea { padding: 6px 8px; }
.page-id-37 .wpforms-field label { margin-bottom: 2px; }
.page-id-37 .wpforms-submit-container { margin-top: 8px; }

/* Connect form — source is much tighter than WPForms defaults. Compact the
   field padding and shrink the textarea to match. Applies to /connect/ and
   /rejse/ both. */
.page-id-36 .wpforms-field, .page-id-38 .wpforms-field { padding: 4px 0 !important; }
.page-id-36 .wpforms-field-container, .page-id-38 .wpforms-field-container { margin-bottom: 0 !important; }
.page-id-36 .wpforms-field textarea, .page-id-38 .wpforms-field textarea {
    min-height: 70px !important;
    height: 70px !important;
}
.page-id-36 .wpforms-field input, .page-id-36 .wpforms-field textarea,
.page-id-38 .wpforms-field input, .page-id-38 .wpforms-field textarea { padding: 6px 8px; }
.page-id-36 .wpforms-field label, .page-id-38 .wpforms-field label { margin-bottom: 2px; }
.page-id-36 .wpforms-submit-container, .page-id-38 .wpforms-submit-container { margin-top: 8px; }

/* Vilkår — long-form terms. Whole prose lives inside a single text-editor
   widget styled here so paragraph rhythm is predictable. */
.sj-vilkar-body p {
    margin: 0 0 1rem 0;
}
.sj-vilkar-body p + p {
    margin-top: 0;
}
.sj-vilkar-body h4 {
    color: var(--sj-wine);
    font-family: Metropolis, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    margin: 1.75rem 0 0.5rem 0;
}
.sj-vilkar-body h4:first-child {
    margin-top: 0;
}

/* Center text-editor widgets when align is center but widget is constrained.
   Elementor's text-editor with _element_custom_width shrinks to that width
   but doesn't center the box. Force margin auto when widget has center align. */
.elementor-widget-text-editor.elementor-align-center,
.elementor-widget-text-editor[class*="elementor-widget__width-"]:has(.elementor-widget-container[style*="text-align:center"]) {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Specifically for retreatet centered text widgets that use max_width_px */
.page-id-39 .elementor-widget-text-editor {
    margin-left: auto;
    margin-right: auto;
}

/* Retreatet — Page ID 39 */
.page-id-39 .sj-retr2a-img img,
.page-id-39 .sj-retr2b-img img {
    aspect-ratio: 1/0.7119;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}
.page-id-39 .sj-retr2b-img img { aspect-ratio: 1/0.5912; }

/* DNA 3-col on photo */
.sj-retr-dna {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    color: #f6e466;
    text-align: left;
    font-family: Metropolis, sans-serif;
}
.sj-retr-dna h4 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: #f6e466;
    margin: 0 0 16px 0;
}
.sj-retr-dna h4 strong { font-weight: 700; }
.sj-retr-dna p {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: #f6e466;
    margin: 0 0 14px 0;
}
.sj-retr-dna p:last-child { margin-bottom: 0; }

/* dit indre / dit udtryk mirror layout */
.sj-retr-mirror {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
    color: #2e4567;
    font-family: Metropolis, sans-serif;
}
.sj-retr-mirror-l { text-align: right; }
.sj-retr-mirror-r { text-align: left; }
.sj-retr-mirror h2 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 44px;
    color: #2e4567;
    margin: 0 0 4px 0;
    line-height: 1.1;
}
.sj-retr-mirror h2 strong { font-weight: 700; }
.sj-retr-mirror h3 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #2e4567;
    margin: 0 0 24px 0;
}
.sj-retr-mirror p {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #2e4567;
    line-height: 1.6;
    margin: 0 0 14px 0;
}

/* Page-scoped image: rounded, full-width */
.page-id-39 .elementor-widget-image img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
}
/* Kill default widget margin on retreatet */
.page-id-39 .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}
/* Index — Page ID 41 */
/* Image rounded corners */
.page-id-41 .elementor-widget-image img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
}
.page-id-41 .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}
.page-id-41 .elementor-widget-text-editor {
    margin-left: auto;
    margin-right: auto;
}

/* Per-section image aspect ratios */
.page-id-41 .sj-idx3-img img { aspect-ratio: 1/0.6901; object-fit: cover; }
.page-id-41 .sj-idx4-img img { aspect-ratio: 1/1.4172; object-fit: cover; }
.page-id-41 .sj-idx5-img img { aspect-ratio: 1/1.2419; object-fit: cover; max-width: 380px; margin: 0 auto; }
.page-id-41 .sj-idx6-img img { aspect-ratio: 1/0.7678; object-fit: cover; }
.page-id-41 .sj-idx10-img img { aspect-ratio: 1/1.121; object-fit: cover; }

/* Sec 2 inline forest spans for partial coloring */
.sj-idx2-forest { color: #2c5b2d; }

/* Sec 5 first two lines smaller (source uses wnd-font-size-90 inline) */
.sj-idx5-small { font-size: 0.78em; }

/* GARANTI 3-col block */
.sj-idx-garanti {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    color: #2e4567;
    text-align: left;
    font-family: Metropolis, sans-serif;
}
.sj-idx-garanti h3 {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 32px;
    color: #2e4567;
    margin: 0 0 16px 0;
    line-height: 1.2;
}
.sj-idx-garanti h3 strong { font-weight: 700; }
.sj-idx-garanti p {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: #2e4567;
    margin: 0;
}

/* WPForms compact for index */
.page-id-41 .wpforms-field { padding: 4px 0 !important; }
.page-id-41 .wpforms-field-container { margin-bottom: 0 !important; }
.page-id-41 .wpforms-field textarea {
    min-height: 70px !important;
    height: 70px !important;
}
.page-id-41 .wpforms-field input,
.page-id-41 .wpforms-field textarea { padding: 6px 8px; }
.page-id-41 .wpforms-field label { margin-bottom: 2px; }
.page-id-41 .wpforms-submit-container { margin-top: 8px; }

/* Retreat-mænd — Page ID 40 */
/* MEDICINEN 3-col on cream — teal text */
.sj-retr-mand-medicin {
    color: #00696f !important;
}
.sj-retr-mand-medicin h4 {
    color: #00696f !important;
}
.sj-retr-mand-medicin p {
    color: #00696f !important;
}

/* Testimonials 3-col */
.sj-retr-mand-test {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}
.sj-retr-mand-test p {
    font-family: Metropolis, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: #00696f;
    margin: 0;
    font-style: italic;
}

/* Page-scoped image rounded */
.page-id-40 .elementor-widget-image img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
}
.page-id-40 .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}
.page-id-40 .elementor-widget-text-editor {
    margin-left: auto;
    margin-right: auto;
}

/* WPForms compact for retreat-maend */
.page-id-40 .wpforms-field { padding: 4px 0 !important; }
.page-id-40 .wpforms-field-container { margin-bottom: 0 !important; }
.page-id-40 .wpforms-field textarea {
    min-height: 70px !important;
    height: 70px !important;
}
.page-id-40 .wpforms-field input,
.page-id-40 .wpforms-field textarea { padding: 6px 8px; }
.page-id-40 .wpforms-field label { margin-bottom: 2px; }
.page-id-40 .wpforms-submit-container { margin-top: 8px; }
.page-id-40 .elementor-widget-shortcode {
    max-width: 540px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-id-40 .elementor-widget-shortcode .wpforms-submit-container {
    text-align: center;
}

/* WPForms compact for retreatet */
.page-id-39 .wpforms-field { padding: 4px 0 !important; }
.page-id-39 .wpforms-field-container { margin-bottom: 0 !important; }
.page-id-39 .wpforms-field textarea {
    min-height: 70px !important;
    height: 70px !important;
}
.page-id-39 .wpforms-field input,
.page-id-39 .wpforms-field textarea { padding: 6px 8px; }
.page-id-39 .wpforms-field label { margin-bottom: 2px; }
.page-id-39 .wpforms-submit-container { margin-top: 8px; }

/* Center connect form on retreatet — source has it centered, narrow */
.page-id-39 .elementor-widget-shortcode {
    max-width: 540px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-id-39 .elementor-widget-shortcode .wpforms-submit-container {
    text-align: center;
}

/* =========================================================================
   16. Section overlays — mirror source's overlay-X pseudo-element treatment
   ========================================================================= */
/* Source uses ::before on .s-bg-l to tint photo bgs. We add an ::after on
   the Elementor section to do the same — keeps content above the tint. */
.sj-overlay-black-light,
.sj-overlay-black,
.sj-overlay-black-strong,
.sj-overlay-slate,
.sj-overlay-green,
.sj-overlay-green-strong {
    position: relative;
}
.sj-overlay-black-light::before,
.sj-overlay-black::before,
.sj-overlay-black-strong::before,
.sj-overlay-slate::before,
.sj-overlay-green::before,
.sj-overlay-green-strong::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sj-overlay-black-light::before { background-color: rgba(0, 0, 0, 0.3); }
.sj-overlay-black::before { background-color: rgba(0, 0, 0, 0.6); }
.sj-overlay-black-strong::before { background-color: rgba(0, 0, 0, 0.85); }
.sj-overlay-slate::before { background-color: rgba(38, 42, 45, 0.5); }
.sj-overlay-green::before { background-color: rgba(38, 55, 47, 0.6); }
.sj-overlay-green-strong::before { background-color: rgba(38, 55, 47, 0.8); }

/* Make sure section content sits ABOVE the overlay */
.sj-overlay-black-light > .elementor-container,
.sj-overlay-black > .elementor-container,
.sj-overlay-black-strong > .elementor-container,
.sj-overlay-slate > .elementor-container,
.sj-overlay-green > .elementor-container,
.sj-overlay-green-strong > .elementor-container {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   17. Header — text wordmark, transparent over hero, sticky on scroll
   ========================================================================= */

/* Hide Kadence's empty page-hero-section + content-area top margin gap */
.entry-hero.page-hero-section { display: none !important; }
.content-area { margin: 0 !important; }
.content-wrap { margin-top: 0 !important; padding-top: 0 !important; }
#main { padding: 0 !important; }
.entry { background: transparent !important; }

/* Header overlays the page AND sticks on scroll (fixed). Transparent
   until scroll; turns dark via .sj-scrolled body class set by tiny JS. */
#masthead {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent !important;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-header-row-container,
.site-main-header-wrap,
.site-main-header-inner-wrap {
    background: transparent !important;
}
body.sj-scrolled #masthead {
    background: rgba(34, 34, 34, 0.92) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* When transparent (NOT scrolled), dim the header band with a darker
   gradient so text reads against varied photo bg. */
body:not(.sj-scrolled) #masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
    pointer-events: none;
    z-index: -1;
}

/* Wordmark: hide the SVG image and the duplicate site-title <p>; replace
   with a CSS-rendered text wordmark in WHITE Josefin Sans 300/25px. */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.site-branding .brand img.custom-logo,
.site-branding .brand .site-title-wrap {
    display: none !important;
}
.site-branding .brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-height: 32px;
}
.site-branding .brand::after {
    content: "S J Æ L S R E J S E R";
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-size: 25px;
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1;
}
.site-branding .brand:hover::after { color: #fff176; }

/* Header transparent by default; turns dark on scroll. */
#masthead,
.site-header-row-container .site-main-header-wrap,
.site-main-header-inner-wrap,
.site-header-row.site-header-focus-item {
    background: transparent !important;
}

/* (Sticky now handled via #masthead position:fixed above) */

/* Menu items: Metropolis 14px weight 500, white. Active = yellow underline,
   text stays white. */
.site-header-item .menu > li > a,
.site-header-item .menu > li > a > span {
    color: #ffffff !important;
    font-family: Metropolis, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.site-header-item .menu > li > a {
    position: relative;
    padding-bottom: 4px !important;
}
.site-header-item .menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #fff176;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.site-header-item .menu > li > a:hover::after,
.site-header-item .menu > li.current-menu-item > a::after,
.site-header-item .menu > li.current-page-ancestor > a::after {
    transform: scaleX(1);
}
/* keep text white on hover/current — underline does the highlight */
.site-header-item .menu > li > a:hover,
.site-header-item .menu > li > a:hover > span,
.site-header-item .menu > li.current-menu-item > a,
.site-header-item .menu > li.current-menu-item > a > span,
.site-header-item .menu > li.current-page-ancestor > a,
.site-header-item .menu > li.current-page-ancestor > a > span {
    color: #ffffff !important;
}

/* Push branding far left, navigation far right. Override Kadence's inner
   .site-container max-width so header content fills viewport edge-to-edge
   (with a small gutter). Trim header height to ~80px. */
#masthead .site-container,
#masthead .site-header-row-container-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
.site-header-row {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.site-main-header-inner-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.site-branding { margin-right: auto; }

/* Header is position:fixed and ~80px tall; the first elementor-top-section
   on every page slides under it. Add a baseline padding-top so hero content
   clears the header on every viewport. Tall hero sections (home, connect)
   re-center their content vertically via the existing min-height + middle
   alignment, so this padding shifts them down a touch but keeps content
   visually balanced. Short hero sections (pyramiderne, retreatet,
   retreat-maend, rejse, vilkar) get the clearance they were missing. */
.elementor > .elementor-section.elementor-top-section:first-child {
    padding-top: calc(80px + 1rem) !important;
}

/* Footer: silver-gray bg, muted-green text, ONE compact row (~50px tall). */
.site-footer,
.site-footer-row-container,
.site-footer-row-container-inner {
    background: #ececec !important;
    color: #5a7b5e !important;
}
.site-footer, .site-footer * { color: #5a7b5e !important; }
.site-footer a { color: #5a7b5e !important; text-decoration: underline; }
.site-footer a:hover { color: #2c5b2d !important; }
/* Hide empty footer rows (top, middle), show only bottom */
.site-footer .site-top-footer-wrap,
.site-footer .site-middle-footer-wrap { display: none !important; }
/* Crush ALL the wrapper paddings down to a single ~14px block */
.site-footer .site-bottom-footer-wrap,
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner,
.site-footer .site-bottom-footer-wrap .site-container,
.site-footer .site-bottom-footer-inner-wrap,
.site-footer .site-footer-bottom-section-1,
.site-footer .footer-widget-area,
.site-footer .footer-widget-area-inner {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
    padding: 12px 32px !important;
}
.site-footer .site-info,
.site-footer .footer-html {
    font-family: Metropolis, sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
}

/* =========================================================================
   18. Mobile (≤ 600px) — fix header overflow + photo-hero heading wraps.
   The hero captions use literal spaces ("S A C R E D  S I T E S |  P Y R..."),
   so browser sees each letter as a word and wraps mid-token. Solution:
   shrink font-size on mobile so the line fits, with overflow-wrap allowing
   sane breaks at the literal " | " or " :: " separators.
   ========================================================================= */
@media (max-width: 600px) {
    /* --- Header: wordmark + hamburger fit on a 390px viewport --- */
    .site-branding,
    .site-branding .brand,
    .site-branding .brand.has-logo-image {
        min-width: 0 !important;
        max-width: calc(100vw - 80px) !important;
    }
    .site-branding .brand::after {
        font-size: 16px !important;
        letter-spacing: -0.5px !important;
    }
    #masthead .site-container,
    #masthead .site-header-row-container-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .site-branding .custom-logo,
    .site-header .custom-logo {
        width: auto !important;
        max-width: calc(100vw - 80px) !important;
    }

    /* --- Mobile drawer styling --- */
    .drawer-toggle .menu-toggle-icon { color: #ffffff !important; }
    .mobile-navigation .menu > li > a,
    .mobile-toggle-active .mobile-navigation .menu > li > a {
        font-family: Metropolis, sans-serif !important;
        font-weight: 500 !important;
        font-size: 18px !important;
        color: #ffffff !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        padding: 14px 24px !important;
    }

    /* --- Photo-hero headline: tracked-out caps wrap mid-letter on mobile
           because each letter is treated as a separate word. The fix is a
           font-size cap so a normal-width line of "S A C R E D  S I T E S"
           fits at 390px. We scope by:
           - sj-overlay-* (sections with image overlays)
           - first .elementor-top-section of the page (.elementor :first-child)
           - any heading that has more than 18 chars and visually-tracked text
             (we can't detect tracking in CSS, so we cover all hero h2s).
           Plus: the homepage hero, which has no overlay class but always sits
           inside the first top-section. --- */
    [class*="sj-overlay-"] .elementor-heading-title,
    .elementor > .elementor-section.elementor-top-section:first-child
        .elementor-heading-title,
    .elementor-section-height-min-height .elementor-heading-title {
        font-size: clamp(0.95rem, 4.6vw, 1.4rem) !important;
        line-height: 1.35 !important;
    }
    /* Sub-line of photo hero — slightly smaller still */
    [class*="sj-overlay-"] h3.elementor-heading-title,
    [class*="sj-overlay-"] h4.elementor-heading-title,
    .elementor > .elementor-section.elementor-top-section:first-child
        h3.elementor-heading-title,
    .elementor-section-height-min-height h3.elementor-heading-title {
        font-size: clamp(0.85rem, 3.8vw, 1rem) !important;
    }

    /* Photo-hero sections: shorter on mobile (~280px) so the headline isn't
       lost in a tall empty band. Center content vertically with flex so the
       title sits in the middle of the visible photo, not at the top. */
    [class*="sj-overlay-"].elementor-top-section,
    .elementor-section-height-min-height.elementor-top-section,
    .elementor > .elementor-section.elementor-top-section:first-child {
        min-height: 280px !important;
        padding-top: 80px !important;  /* clear of fixed header */
        padding-bottom: 32px !important;
    }
    [class*="sj-overlay-"].elementor-top-section > .elementor-container,
    .elementor-section-height-min-height.elementor-top-section > .elementor-container,
    .elementor > .elementor-section.elementor-top-section:first-child > .elementor-container {
        min-height: inherit !important;
        align-items: center !important;
    }

    /* --- Tracked-out caps (literal-space typesetting like "K I M  S K O V G A A R D",
           "D E T  N Y E  P A R A D I G M E") wrap mid-letter on mobile when set
           at 32-46px. Cap ALL H2 widget headings to ~22px on mobile so wide
           horizontal text fits. Body H1 (PT Serif quoted) stays larger because
           it's set in regular not tracked-out caps. --- */
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
        line-height: 1.35 !important;
    }
    /* Allow PT-Serif body H1 to stay readable but proportional */
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    /* --- General hero heading typography on mobile: cap to fit 390 --- */
    .elementor-top-section:first-of-type .elementor-heading-title {
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* ================================================================
       Stack all multi-column grid layouts on mobile. Each of these uses
       a desktop-only fixed-or-2/3-col grid that overflows at 390px.
       Listing them by class so we can keep the desktop layout intact.
       ================================================================ */
    .sj-idx-garanti,
    .sj-retr-dna,
    .sj-3punkter,
    .sj-retr-mand-test {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .sj-overblik,
    .sj-pyr-contact,
    .sj-retr-mirror {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Pyramiderne photo bleeds (Solpyramiden / Ravnetunnel / Energiparken):
       desktop uses negative margin-left to bleed the photo off the column
       toward the viewport edge. On mobile that pulls the image off-screen
       to the left, leaving a gap on the right. Reset to flush 100%. */
    .page-id-37 .sj-pyr5-img,
    .page-id-37 .sj-pyr6-img,
    .page-id-37 .sj-pyr7-img,
    .page-id-37 .sj-pyr3-img {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Rejse product card (used on retreatet + retreat-maend + rejse pages):
       desktop has fixed 530px image left, body right. On mobile stack:
       image on top full-width, body below. */
    .sj-rejse-card {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 16px !important;
    }
    .sj-rejse-card-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    .sj-rejse-card-img img {
        width: 100% !important;
        height: 100% !important;
    }
    .sj-rejse-card-body {
        padding: 0 !important;
    }
    .sj-rejse-card-title {
        font-size: 22px !important;
    }
    .sj-rejse-card-text {
        font-size: 15px !important;
    }
    .sj-rejse-card-price {
        font-size: 20px !important;
    }
}