/**
 * Frontend Styles
 * 
 * @package SiderMaker
 * @since 1.0.0
 */

/* Reset & Base */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* Custom frontend topbar */
#sider-maker-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #23282d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

body.logged-in {
    padding-top: 40px !important;
}

#sider-maker-topbar .sm-topbar-left,
#sider-maker-topbar .sm-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

#sider-maker-topbar .sm-topbar-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

#sider-maker-topbar .sm-topbar-btn:hover {
    opacity: 0.85;
}

#sider-maker-topbar .sm-topbar-edit {
    background: #0073aa;
    color: #fff;
    font-weight: 600;
}

#sider-maker-topbar .sm-topbar-backend {
    background: transparent;
    color: #ccc;
    border: 1px solid #555;
}

#sider-maker-topbar .sm-topbar-backend:hover {
    color: #fff;
    border-color: #888;
}

#sider-maker-topbar .sm-topbar-logout {
    background: transparent;
    color: #ccc;
}

#sider-maker-topbar .sm-topbar-logout:hover {
    color: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

/* Heading margins */
h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0.25em;
    margin-block-end: 0em;
}

h3.wp-block-heading {
    margin-block-end: .50em;
}


/* Header home links */
a.header-home-link,
a.header-home-link:hover,
a.header-home-link:focus,
a.header-home-link:active,
a.header-home-link:visited {
    text-decoration: none !important;
    color: inherit !important;
}

h1.header-title,
p.header-tagline,
a.header-home-link h1,
a.header-home-link p {
    text-decoration: none !important;
}

/* Header & Navigation */
.site-header {
    position: relative;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: none;
}

/* When nav is inside a section, ensure it sits above overlay but in flow */
.site-header-in-section {
    position: relative;
    z-index: 10;
}

/* When header has a solid background color set by user, it will override via inline styles */

.site-custom-header .sm-container {
    max-width: none;
}

/* Header alignment: left/right — logo på den ene side, titel+tagline stacked på den anden, lodret centreret */
.site-custom-header.sm-header-align-left .sm-container,
.site-custom-header.sm-header-align-right .sm-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
}
.site-custom-header.sm-header-align-right .sm-container {
    grid-template-columns: minmax(0, 1fr) auto;
}
.site-custom-header.sm-header-align-left .sm-container > a:has(.header-logo) {
    grid-column: 1; grid-row: 1 / span 2; align-self: center;
}
.site-custom-header.sm-header-align-left .sm-container > a:has(.header-title) {
    grid-column: 2; grid-row: 1; align-self: end;
}
.site-custom-header.sm-header-align-left .sm-container > a:has(.header-tagline) {
    grid-column: 2; grid-row: 2; align-self: start;
}
.site-custom-header.sm-header-align-right .sm-container > a:has(.header-logo) {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
}
.site-custom-header.sm-header-align-right .sm-container > a:has(.header-title) {
    grid-column: 1; grid-row: 1; align-self: end;
}
.site-custom-header.sm-header-align-right .sm-container > a:has(.header-tagline) {
    grid-column: 1; grid-row: 2; align-self: start;
}
.site-custom-header.sm-header-align-left .sm-container > a .header-title,
.site-custom-header.sm-header-align-left .sm-container > a .header-tagline,
.site-custom-header.sm-header-align-right .sm-container > a .header-title,
.site-custom-header.sm-header-align-right .sm-container > a .header-tagline {
    margin: 0;
}
/* Hvis logo mangler: stack alligevel titel og tagline lodret */
.site-custom-header.sm-header-align-left .sm-container:not(:has(.header-logo)),
.site-custom-header.sm-header-align-right .sm-container:not(:has(.header-logo)) {
    display: block;
}

.main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

h1.header-title {
    font-family: var(--sm-heading-font);
    margin: 0 0 10px 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

p.header-tagline {
    font-family: var(--sm-heading-font);
    line-height: 1;
    margin: 0px;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

html, body { overflow-x: clip; }

.site-custom-header { overflow-x: hidden; max-width: 100%; }
.site-custom-header .sm-container { max-width: 100%; min-width: 0; }

.nav-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: 30px;
}

/* Menu alignment (kun vandret/top-layout) */
.sm-menu-align-left .nav-menu { margin: 0 auto 0 0; justify-content: flex-start; }
.sm-menu-align-center .nav-menu { margin: 0 auto; justify-content: center; }
.sm-menu-align-right .nav-menu { margin: 0 0 0 auto; justify-content: flex-end; }

/* Flugt første/sidste menupunkt med kant så tekst aligner med logo/titel */
.sm-menu-align-left .main-navigation { max-width: none; margin: 0; padding: 0 0 0 15px; }
.sm-menu-align-right .main-navigation { max-width: none; margin: 0; padding: 0 15px 0 0; }
.sm-menu-align-left .nav-menu > li:first-child > a { padding-left: 0; }
.sm-menu-align-right .nav-menu > li:last-child > a { padding-right: 0; }

/* "Mere" overflow dropdown */
.menu-item-more {
    position: relative;
    white-space: nowrap;
}

.menu-item-more > a {
    cursor: pointer;
}

.menu-item-more .sub-menu-more {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    max-width: calc(100vw - 20px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: auto;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    z-index: 100;
}

.menu-item-more:hover > .sub-menu-more {
    display: block;
}

.menu-item-more .sub-menu-more li {
    width: auto;
}

.menu-item-more .sub-menu-more a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
}

.nav-menu li {
    position: relative;
}

.nav-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.nav-menu li a:hover {
    color: #0066cc;
    text-decoration: underline;
}

/* Indikator for menupunkter med undersider */
.nav-menu .menu-item-has-children > a::after {
    content: '+';
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* Roter indikator når hoveret */
.nav-menu .menu-item-has-children:hover > a::after {
    transform: rotate(45deg);
}

/* Mobile version - fjern rotation */
@media (max-width: 767px) {
    .nav-menu .menu-item-has-children:hover > a::after {
        transform: none;
    }

    /* Disable hover-based submenu on mobile — let JS handle it exclusively */
    .nav-menu li:hover > .sub-menu {
        display: none !important;
    }
    .nav-menu li > .sub-menu[style*="block"] {
        display: block !important;
    }
}

/* Submenu */
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: auto;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    z-index: 100;
}

.nav-menu li:hover > .sub-menu {
    display: block;
}

.nav-menu .sub-menu li {
    width: auto;
}

.nav-menu .sub-menu a {
    padding: 10px 20px;
}

/* Sub-sub menus: appear to the right of their parent sub-menu */
.nav-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    right: auto;
}

/* Last top-level item: align submenus to the right */
.nav-menu > li:last-child > .sub-menu,
.nav-menu > .menu-item-more > .sub-menu-more {
    left: auto;
    right: 0;
}

/* Last top-level: sub-sub menus appear to the left */
.nav-menu > li:last-child .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}


.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background: #333;
    position: relative;
    margin: 10px;
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: #333;
    position: absolute;
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

@media (max-width: 767px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
        margin-left: auto;
        margin-top: 0;
        margin-right: 10px;
        align-self: center;
        background-color: var(--sm-menu-bg, rgba(255,255,255,0.9));
        border-radius: 8px;
    }

    .hamburger,
    .hamburger::before,
    .hamburger::after {
        background: var(--sm-menu-text, #333) !important;
    }

    .main-navigation {
        flex-wrap: wrap;
        background: transparent;
    }

    .site-header {
        background: transparent !important;
    }
    
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        padding: 20px;
        gap: 0;
    }
    
    .nav-menu.is-active {
        display: flex;
    }

    /* Portal mode: menu is appended to <body>, fixed position under header */
    .nav-menu.is-mobile-portal {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100001;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Border separators between menu items */
    .nav-menu.is-mobile-portal > li {
        border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    }
    .nav-menu.is-mobile-portal > li:last-child {
        border-bottom: none;
    }
    .nav-menu.is-mobile-portal .sub-menu li {
        border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    }
    .nav-menu.is-mobile-portal .sub-menu li:last-child {
        border-bottom: none;
    }

    /* Flex layout for items with children: link left, toggle right */
    .nav-menu .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .nav-menu .menu-item-has-children > a {
        flex: 1;
    }
    /* Hide CSS ::after plus on mobile — replaced by .submenu-toggle button */
    .nav-menu .menu-item-has-children > a::after {
        display: none !important;
    }

    /* Submenu toggle button: 44x44px tap target, right-aligned */
    .submenu-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        border: none;
        background: transparent;
        color: var(--sm-menu-text, #333333) !important;
        -webkit-text-fill-color: var(--sm-menu-text, #333333) !important;
        margin-left: auto;
        flex-shrink: 0;
    }
    
    .nav-menu li {
        width: 100%;
    }
    
    .nav-menu .sub-menu {
        position: static;
        box-shadow: none;
        padding-left: 20px;
        width: 100%;
    }

    .menu-item-more {
        display: none !important;
    }
}

/* Sections */
.sm-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Section containing nav needs higher z-index so submenu is not hidden behind next section */
.sm-section:has(.site-header-in-section),
.sm-section-has-nav {
    z-index: 100;
}

/* ── Submenu clone layer (body-level, escapes overflow:hidden) ── */
.sm-submenu-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    pointer-events: none;
}

.sm-submenu-layer > .sub-menu,
.sm-submenu-layer > .sub-menu-more {
    position: absolute !important;
    display: block !important;
    pointer-events: auto;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    width: max-content;
    max-width: 300px;
    white-space: normal;
    min-width: 120px;
    font-family: var(--sm-body-font, inherit);
}

/* Links inside clone layer inherit menu styling */
.sm-submenu-layer a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-family: var(--sm-body-font, inherit);
    white-space: normal;
    word-wrap: break-word;
}

.sm-submenu-layer a:hover {
    color: #0066cc;
    text-decoration: underline;
}

.sm-submenu-layer li {
    list-style: none;
    position: relative;
    width: 100%;
}

/* Indikator for submenu-items med yderligere children i layer */
.sm-submenu-layer .menu-item-has-children > a::after {
    content: '+';
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.2s ease;
    display: inline-block;
}

.sm-submenu-layer .menu-item-has-children:hover > a::after {
    transform: rotate(45deg);
}

/* Hide nested sub-menus inside clone by default — only show on hover */
.sm-submenu-layer .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    width: max-content;
    max-width: 300px;
    white-space: normal;
    min-width: 120px;
}

.sm-submenu-layer li:hover > .sub-menu {
    display: block;
}

/* Flip nested submenu to left when no space */
.sm-submenu-layer .sub-menu--flip-left {
    left: auto !important;
    right: 100% !important;
}

.sm-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sm-section-inner {
    position: relative;
    z-index: 2;
}

/* Elements */
.sm-element {
    margin-bottom: 30px;
}
/* Block Spacing */
.wp-block-image img {
    border-radius: 4px;
}

/* WordPress Image Alignment Styles */
.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* Ensure figure elements work with alignment */
figure.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

figure.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

figure.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* Clearfix for containers with floated content */
.wp-block-sider-maker-text-image::after,
.sm-text-image-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure aligned images don't overflow */
.alignleft img,
.alignright img,
.aligncenter img,
figure.alignleft img,
figure.alignright img,
figure.aligncenter img {
    max-width: 100%;
    height: auto;
}

/* Responsive: Remove float on mobile devices */
@media (max-width: 767px) {
    .alignleft,
    .alignright,
    figure.alignleft,
    figure.alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }
}

.wp-block-sider-maker-text-image {
    margin-bottom: 40px;
}

.wp-block-sider-maker-heading {
    margin-bottom: 0;
}

.wp-block-sider-maker-photo-album {
    margin-bottom: 40px;
}

.sm-video {
    margin-bottom: 40px;
    border-radius: 4px;
    overflow: hidden;
}

.sm-slider {
    margin-bottom: 40px;
}

.sm-map {
    margin-bottom: 40px;
}

.sm-contact-form {
    margin-bottom: 40px;
}

.sm-blog {
    margin-bottom: 40px;
}

.wp-block-sider-maker-pdf {
    margin-bottom: 40px;
}

.sm-html {
    margin-bottom: 40px;
}

.sm-link-list {
    margin-bottom: 40px;
}

.wp-block-sider-maker-hr {
    margin-bottom: 40px;
}

.sm-guestbook {
    margin-bottom: 40px;
}

.sm-button {
    margin-bottom: 0;
}

.sm-element-heading h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #222;
}
/* Text & Image */
.sm-text-image {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 20px;
}

.sm-text-image.image-left {
    flex-direction: row-reverse;
}

.sm-text-image.image-right {
    flex-direction: row;
}

.sm-text-image.image-top {
    flex-direction: column-reverse;
}

.sm-text-image.image-bottom {
    flex-direction: column;
}

.sm-text-image-content {
    flex: 1;
}

.sm-text-image-image {
    flex: 0 0 auto;
    max-width: 50%;
}

.sm-text-image-image img {
    width: 100%;
    height: auto;
}

/* Full width images when positioned top/bottom */
.sm-text-image.image-top .sm-text-image-image,
.sm-text-image.image-bottom .sm-text-image-image {
    max-width: 100%;
    width: 100%;
}

@media (max-width: 767px) {
    .sm-text-image {
        flex-direction: column;
    }
    
    .sm-text-image-image {
        max-width: 100%;
    }
}

/* Photo Album — base */
.sm-photo-album {
    gap: 15px;
}
.sm-photo-album-item {
    cursor: pointer;
    overflow: hidden;
    margin: 0; /* reset figure default */
    display: block;
}
.sm-photo-album-item img {
    display: block;
    transition: transform 0.3s ease;
    border-radius: 4px;
}
.sm-photo-album-item:hover img {
    transform: scale(1.03);
}
.sm-photo-album-caption {
    font-size: 0.85em;
    color: #555;
    padding: 6px 2px 0;
    line-height: 1.35;
    text-align: center;
}

/* --- Layout: Cropped (legacy default) ---
   Falder også tilbage til cropped når album mangler en sm-photo-album--* modifier,
   så gamle albums uden layout-klasse straks ser korrekte ud på frontend. */
.sm-photo-album--cropped,
.sm-photo-album:not([class*="sm-photo-album--"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sm-photo-album--cropped .sm-photo-album-item img,
.sm-photo-album:not([class*="sm-photo-album--"]) .sm-photo-album-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* --- Layout: Justified rows --- */
.sm-photo-album--justified {
    display: flex;
    flex-wrap: wrap;
}
.sm-photo-album--justified .sm-photo-album-item {
    flex-grow: 1;
    height: 220px;
    /* fallback if no width attr — items still fill */
    min-width: 120px;
}
.sm-photo-album--justified .sm-photo-album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the row height while preserving aspect via flex-basis */
}
/* Use intrinsic aspect ratio: flex-basis ~ width/height * row-height */
.sm-photo-album--justified .sm-photo-album-item[style*="--ratio"] {
    flex-basis: calc(220px * var(--ratio));
}
@media (max-width: 640px) {
    .sm-photo-album--justified .sm-photo-album-item {
        height: 140px;
    }
    .sm-photo-album--justified .sm-photo-album-item[style*="--ratio"] {
        flex-basis: calc(140px * var(--ratio));
    }
}

/* --- Layout: Masonry --- */
.sm-photo-album--masonry {
    column-count: 3;
    column-gap: 15px;
}
@media (max-width: 1024px) { .sm-photo-album--masonry { column-count: 2; } }
@media (max-width: 480px)  { .sm-photo-album--masonry { column-count: 1; } }
.sm-photo-album--masonry .sm-photo-album-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 15px;
}
.sm-photo-album--masonry .sm-photo-album-item img {
    width: 100%;
    height: auto;
}

/* --- Layout: Mosaic (featured + grid) --- */
.sm-photo-album--mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 160px;
}
.sm-photo-album--mosaic .sm-photo-album-item {
    grid-column: span 1;
}
.sm-photo-album--mosaic .sm-photo-album-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.sm-photo-album--mosaic .sm-photo-album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 640px) {
    .sm-photo-album--mosaic {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 130px;
    }
    .sm-photo-album--mosaic .sm-photo-album-item:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* --- Layout: Uncropped (4-up, original heights) --- */
.sm-photo-album--uncropped {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: start;
}
.sm-photo-album--uncropped .sm-photo-album-item img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1024px) { .sm-photo-album--uncropped { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sm-photo-album--uncropped { grid-template-columns: 1fr; } }

/* Slider */
.sm-slider {
    position: relative;
    overflow: hidden;
}

.sm-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.sm-slider-slide {
    flex: 0 0 100%;
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.sm-slider-slide::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background-image: var(--slide-bg);
    background-size: cover;
    background-position: center;
    filter: blur(100px);
    opacity: 0.3;
    z-index: 0;
}

.sm-slider-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.sm-slider-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 40px 15px 15px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}


.sm-slider-prev,
.sm-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 40px;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.sm-slider-prev {
    left: 20px;
}

.sm-slider-next {
    right: 20px;
}

.sm-slider-prev:hover,
.sm-slider-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

/* Button */
.sm-button {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    /* Colors, padding, border-radius come from inline styles (global settings) */
}

.sm-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    text-decoration: none;
    /* hover background-color is set per-instance via inline <style> from PHP */
}

.sm-link {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sm-link:hover {
    opacity: 0.8;
}

/* Horizontal Rule */
.sm-hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 30px 0;
}

/* PDF Download */
.sm-pdf {
    text-align: center;
    padding: 20px;
}

.sm-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Google Maps */
.sm-map {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 4px;
}

.sm-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sm-pdf-link:hover {
    text-decoration: none;
}

/* Contact Form */
.sm-contact-form {
    max-width: 600px;
}

.sm-form-group {
    margin-bottom: 20px;
}

.sm-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.sm-form-input,
.sm-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.sm-form-input:focus,
.sm-form-textarea:focus {
    outline: none;
    border-color: var(--sm-primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.sm-form-textarea {
    min-height: 150px;
    resize: vertical;
}

.sm-form-submit {
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    /* All styling comes from inline styles (global settings) */
}

.sm-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0.85;
}

.sm-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Math Challenge styling */
.sm-math-challenge {
    background: rgb(255 255 255 / 50%);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.sm-math-challenge .sm-form-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.sm-math-challenge input[type="number"] {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.sm-form-help {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #6c757d;
}

/* Blog/Nyheder Element */
.sm-blog-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.sm-blog-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.sm-blog-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sm-blog-image {
    flex: 0 0 50%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
}

.sm-blog-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.sm-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sm-blog-image a:hover img {
    transform: scale(1.05);
}

.sm-blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sm-blog-title {
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.sm-blog-title a {
    color: inherit !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sm-blog-title a:hover {
    opacity: 0.8;
}

.sm-blog-date {
    margin: 0 0 8px 0;
    font-size: 0.875em;
    line-height: 1.4;
    opacity: 0.7;
    font-weight: 400;
}

.sm-blog-excerpt {
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.sm-blog-readmore {
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.sm-blog-readmore:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Responsive - Tablet */
@media (max-width: 767px) {
    .sm-blog-item {
        flex-direction: column;
    }
    
    .sm-blog-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .sm-blog-list {
        gap: 20px;
    }
    
    .sm-blog-item {
        padding-bottom: 20px;
    }
    
    .sm-blog-title {
        font-size: 18px;
    }
    
    .sm-blog-excerpt {
        font-size: 14px;
    }
}

/* Blog Load More */
.sm-blog-load-more-wrapper {
    margin-top: 30px;
    margin-bottom: 40px;
    text-align: center;
}

.sm-blog-load-more {
    transition: all 0.3s ease;
}

.sm-blog-load-more:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-2px);
}

.sm-blog-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sm-blog-load-more .sm-load-more-spinner {
    display: inline-block;
}

@media (max-width: 480px) {
    .sm-blog-load-more {
        width: 100%;
    }
}

/* Footer */
.site-footer {
    background: #f8f8f8;
    padding: 40px 0;
    
    border-top: 1px solid #e0e0e0;
}

.footer-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.footer-menu a {
    color: #666;
}

.footer-menu a:hover {
    color: #333;
}


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

/* Header Edit Modal */
.header-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.header-modal-content {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2;
}

.header-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.header-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.header-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.header-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.header-modal-body {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #374151;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="color"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}

.form-group input[type="color"] {
    width: 80px;
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.form-group small {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 13px;
}

.form-group .button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 8px;
}

.form-group .button:hover {
    background: #2563eb;
}

.padding-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.padding-grid > div label {
    font-size: 13px;
    font-weight: normal;
    color: #6b7280;
}

.logo-preview-container {
    margin-bottom: 12px;
}

.header-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.header-modal-footer .button {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.header-modal-footer .button-secondary {
    background: #f3f4f6;
    color: #374151;
}

.header-modal-footer .button-secondary:hover {
    background: #e5e7eb;
}

.header-modal-footer .button-primary {
    background: #3b82f6;
    color: white;
}

.header-modal-footer .button-primary:hover {
    background: #2563eb;
}

.header-modal-footer .button-primary:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

/* Lightbox */
.sm-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.sm-lightbox.active {
    display: flex;
}

.sm-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sm-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 1;
    transition: opacity 0.2s;
}

.sm-lightbox-close:hover {
    opacity: 0.7;
}

.sm-lightbox img {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    object-fit: contain;
}

.sm-lightbox-caption {
    display: block;
    color: white;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.sm-lightbox-caption-hidden {
    display: none !important;
}

.sm-lightbox-prev,
.sm-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 48px;
    cursor: pointer;
    padding: 20px 15px;
    line-height: 1;
    transition: background 0.2s;
    z-index: 10;
}

.sm-lightbox-prev:hover,
.sm-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sm-lightbox-prev {
    left: 20px;
}

.sm-lightbox-next {
    right: 20px;
}

@media (max-width: 768px) {
    .sm-lightbox-prev,
    .sm-lightbox-next {
        font-size: 32px;
        padding: 15px 10px;
    }
    
    .sm-lightbox-prev {
        left: 10px;
    }
    
    .sm-lightbox-next {
        right: 10px;
    }
}

/* Photo album items should have cursor pointer */
.sm-photo-album-item {
    cursor: pointer;
}

/* Section Wrapper & Editing Controls */
.section-wrapper {
    position: relative;
    z-index: 1;
}

.section-edit-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    gap: 8px;
    opacity: 1;
}

.section-edit-btn,
.section-delete-btn,
.section-move-up-btn,
.section-move-down-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-move-up-btn,
.section-move-down-btn {
    padding: 8px;
}

.section-move-up-btn:disabled,
.section-move-down-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.section-edit-btn:hover:not(:disabled) {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.section-delete-btn:hover:not(:disabled) {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.section-move-up-btn:hover:not(:disabled) {
    background: #10b981;
    color: white;
    border-color: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.section-move-down-btn:hover:not(:disabled) {
    background: #10b981;
    color: white;
    border-color: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.section-edit-btn .dashicons,
.section-delete-btn .dashicons,
.section-move-up-btn .dashicons,
.section-move-down-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Add Content Button (Centered in Section) */
.add-content-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9998;
    pointer-events: none;
}

.section-wrapper {
    position: relative;
    min-height: 200px;
}

.add-content-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #ffffff;
    color: #374151;
    border: 2px dashed #3b82f6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    pointer-events: all;
    min-width: 160px;
    text-align: center;
}

.add-content-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    border-style: solid;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.add-content-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Section Hover Effects (Only in editing mode) */
body.editing-mode .section-wrapper .sm-section {
    position: relative;
    transition: all 0.3s ease;
}

body.editing-mode .section-wrapper .sm-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
    border-radius: 4px;
}

body.editing-mode .section-wrapper:hover .sm-section::before {
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.3);
}

body.editing-mode .section-wrapper:hover .sm-section {
    transform: translateY(-2px);
}

/* Add Section Buttons */
.add-section-trigger {
    position: relative;
    height: 0;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 10000;
}

.add-section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
}

.add-section-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translate(-50%, -50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-section-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Empty page add section button */
.add-section-trigger[data-position="0"]:only-child {
    min-height: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.add-section-trigger[data-position="0"]:only-child .add-section-btn {
    padding: 20px 40px;
    font-size: 16px;
    position: static;
    transform: none;
}

/* Section Modal */
.section-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.section-modal-content {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2;
}

.section-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.section-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.section-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.section-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.section-modal-body {
    padding: 24px;
}

.section-modal-body > p {
    margin-top: 0;
    color: #6b7280;
}

/* Content Blocks Grid */
.content-blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.content-block-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-align: center;
}

.content-block-option:hover {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.content-block-option .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

#add-content-modal .section-modal-content {
    max-width: 600px;

    color:#6b7280;
    font-size:14px;
}

.section-options {
    margin: 20px 0;
}

.section-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.section-modal-footer .button {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.section-modal-footer .button:not(.button-primary) {
    background: #f3f4f6;
    color: #374151;
}

.section-modal-footer .button:not(.button-primary):hover {
    background: #e5e7eb;
}

.section-modal-footer .button-primary {
    background: #3b82f6;
    color: white;
}

.section-modal-footer .button-primary:hover {
    background: #2563eb;
}

.section-modal-footer .button-primary:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

/* Link List Element */
.sm-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sm-link-list-item {
    margin-bottom: 1.5em;
}

.sm-link-list-link {
    font-weight: 600;
    font-size: 1.1em;
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sm-link-list-link:hover {
    color: #004499;
    text-decoration: underline;
}

.sm-link-list-description {
    display: inline-block;
    margin-top: 0.25em;
    color: #666;
    font-size: 0.95em;
    line-height: 1.5;
}

/* ── Ensure site-main content is below the navigation ── */
.site-main {
    position: relative;
    z-index: 1;
}

/* ── Handelsbetingelser (Terms) page styling ── */
.sm-terms-page .site-main {
    background: #fff;
    padding: 24px 20px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sm-terms-page .site-main h1,
.sm-terms-page .site-main h2,
.sm-terms-page .site-main h3,
.sm-terms-page .site-main h4,
.sm-terms-page .site-main h5,
.sm-terms-page .site-main h6,
.sm-terms-page .site-main p,
.sm-terms-page .site-main li,
.sm-terms-page .site-main td,
.sm-terms-page .site-main th,
.sm-terms-page .site-main span,
.sm-terms-page .site-main a {
    color: #000 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.sm-terms-page .site-main a {
    text-decoration: underline !important;
}


.sm-sub-iframe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: smSubFadeIn 0.2s ease;
}

@keyframes smSubFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sm-sub-iframe-modal {
    background: #fff;
    border-radius: 12px;
    width: 90vw;
    max-width: 900px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.sm-sub-iframe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.sm-sub-iframe-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e1e1e;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sm-sub-iframe-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
    transition: color 0.15s;
}

.sm-sub-iframe-close:hover {
    color: #000;
}

.sm-sub-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

@media (max-width: 600px) {
    .sm-sub-iframe-modal {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ============================================================
   SIDEBAR LAYOUT (eksperimentelt — kun aktivt når body[data-sm-layout="sidebar"])
   Desktop ≥769px: lodret venstre menu, content i højre kolonne
   Mobil ≤768px: uændret (samme burger-menu som top-mode)
   ============================================================ */

@media (min-width: 769px) {
    body[data-sm-layout="sidebar"] .sm-layout-grid {
        display: grid;
        grid-template-columns: 240px 1fr;
        align-items: start;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot {
        position: sticky;
        top: 0;
        align-self: start;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        /* Sidebar-baggrund = 10% lysere end menufarven, så menu-items (i menufarven) træder frem som knapper */
        background: var(--sm-menu-bg, #ffffff);
        background: color-mix(in srgb, var(--sm-menu-bg, #ffffff) 90%, #ffffff);
        /* Slank scrollbar uden pile/track — bruger menutekstfarven, som per definition har god kontrast til menubaggrunden */
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--sm-menu-text, #000000) 35%, transparent) transparent;
    }

    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot::-webkit-scrollbar-track {
        background: transparent;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--sm-menu-text, #000000) 35%, transparent);
        border-radius: 3px;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot:hover::-webkit-scrollbar-thumb,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in srgb, var(--sm-menu-text, #000000) 60%, transparent);
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    body[data-sm-layout="sidebar"] .sm-layout-main {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        min-width: 0; /* tillad sektioner at krympe inde i grid */
    }

    body[data-sm-layout="sidebar"] .sm-layout-main-content {
        flex: 1 0 auto;
    }

    /* Sektioner inde i højre kolonne — baggrunde stopper ved sidebar-kanten */
    body[data-sm-layout="sidebar"] .sm-layout-main .sm-section {
        width: 100%;
    }

    /* Sidebar-menu container */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .site-header {
        padding: 0;
        background: transparent !important;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .main-navigation {
        display: block;
        width: 100%;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .menu-toggle {
        display: none !important; /* ingen burger på desktop sidebar */
    }

    /* Lodret menu — alle niveauer */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu {
        display: block !important;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-direction: column !important;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li {
        display: block !important;
        position: relative;
        margin: 0;
        padding: 0;
        float: none !important;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        /* Knappen tager menufarven, så den står frem mod den 10% lysere sidebar-baggrund */
        background: var(--sm-menu-bg, #ffffff);
    }

    /* Niveau 2 og 3: vis altid som indrykkede sub-uls (ikke dropdown) */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu {
        position: static !important;
        display: none; /* skjult som default — accordion åbner via JS */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        list-style: none;
        margin: 0;
        padding: 0;
        min-width: 0;
        width: 100%;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.sm-open > .sub-menu {
        display: block;
    }
    /* Aktiv side + forfædre: åbn automatisk */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.current-menu-ancestor > .sub-menu,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.current-menu-parent > .sub-menu,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.current-menu-item > .sub-menu {
        display: block;
    }

    /* Indrykning niveau 2 og 3 */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu li a {
        padding-left: 32px;
        font-size: 0.95em;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu .sub-menu li a {
        padding-left: 48px;
        font-size: 0.9em;
    }

    /* Skjul standard chevron — erstattes af .sm-sidebar-toggle knappen */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.menu-item-has-children > a::after {
        content: none !important;
    }

    /* Forælder-li: flex så <a> og toggle-knap ligger side om side */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.menu-item-has-children {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.menu-item-has-children > a {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu li.menu-item-has-children > .sub-menu {
        flex: 1 0 100% !important;
    }

    /* Niveau 2: 10% skift fra forælder-baggrund (mørkere på lyse menuer, lysere på mørke) */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu > li > a,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu > li.menu-item-has-children > .sm-sidebar-toggle {
        background: color-mix(in srgb, var(--sm-menu-bg, #ffffff) 90%, var(--sm-submenu-mix, #000000)) !important;
    }
    /* Niveau 3: yderligere 10% skift */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu .sub-menu > li > a,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .nav-menu .sub-menu .sub-menu > li.menu-item-has-children > .sm-sidebar-toggle {
        background: color-mix(in srgb, var(--sm-menu-bg, #ffffff) 80%, var(--sm-submenu-mix, #000000)) !important;
    }

    /* +/− knap: arver menutekstens farve, font og størrelse */
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .sm-sidebar-toggle {
        appearance: none;
        -webkit-appearance: none;
        background: var(--sm-menu-bg, #ffffff);
        flex: 0 0 auto !important;
        border: 0;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        color: inherit;
        font: inherit;
        font-weight: inherit;
        line-height: 1;
        cursor: pointer;
        padding: 0 14px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.65;
        transition: opacity 0.15s ease;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .sm-sidebar-toggle:hover,
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot .sm-sidebar-toggle:focus-visible {
        opacity: 1;
        outline: none;
    }

    /* Skjul den almindelige fallback-slot når sidebar er aktivt */
    body[data-sm-layout="sidebar"] #sm-nav-fallback-slot {
        display: none;
    }
}

/* Mobil: sidebar-slot fungerer som almindelig top-menu (uændret oplevelse) */
@media (max-width: 768px) {
    body[data-sm-layout="sidebar"] .sm-layout-grid {
        display: block;
    }
    body[data-sm-layout="sidebar"] .sm-sidebar-nav-slot {
        display: block;
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Slider links — neutraliser default <a>-styling for billed/caption */
.sm-slider-slide-link,
.sm-slider-caption-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.sm-slider-slide-link img { display: block; }

/* Menu overflow "Mere" — hamburger icon variant */
.nav-menu .menu-item-more.is-hamburger > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    line-height: 1;
}
.nav-menu .menu-item-more.is-hamburger > a .menu-more-hamburger {
    display: block;
    width: 22px;
    height: 22px;
    color: currentColor;
}

/* ============================================================
   Compact header layout (logo · titel/tagline · menu)
   ============================================================ */
.site-custom-header.is-compact {
    display: block;
    text-align: left;
}
.site-custom-header.is-compact .sm-compact-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.site-custom-header.is-compact .sm-compact-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.site-custom-header.is-compact .sm-compact-title-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    min-width: 0;
}
.site-custom-header.is-compact .sm-compact-title-block .header-title,
.site-custom-header.is-compact .sm-compact-title-block .header-tagline {
    display: block;
    margin: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-custom-header.is-compact .sm-compact-title-block .header-tagline {
    margin-top: 4px;
    line-height: 1.25;
}
.site-custom-header.is-compact .sm-compact-nav {
    flex: 0 1 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 0 4px;
}
.site-custom-header.is-compact .sm-compact-nav .nav-menu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Editor edit-buttons: vis kun ved hover/klik i compact mode */
.site-custom-header.is-compact [data-sm-compact-target] {
    position: relative;
}

@media (max-width: 900px) {
    .site-custom-header.is-compact .sm-compact-header-inner {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* Mobile: logo + hamburger inline, title/tagline wraps below */
@media (max-width: 767px) {
    .site-custom-header.is-compact .sm-compact-header-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .site-custom-header.is-compact .sm-compact-logo {
        order: 1;
        flex: 0 1 auto;
        max-width: 70%;
    }
    .site-custom-header.is-compact .sm-compact-logo img {
        max-width: 100%;
        height: auto;
    }
    .site-custom-header.is-compact .sm-compact-nav {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        background: transparent !important;
        padding: 0;
    }
    .site-custom-header.is-compact .sm-compact-title-block {
        order: 3;
        flex: 1 1 100%;
        align-items: flex-start;
        text-align: left;
    }
    /* Hamburger styling: menu bg + menu text color */
    .site-custom-header.is-compact .sm-compact-nav .menu-toggle {
        display: flex;
        margin: 0;
        background-color: var(--sm-menu-bg, rgba(255,255,255,0.9)) !important;
        border-radius: 8px;
        padding: 8px 10px;
    }
    .site-custom-header.is-compact .sm-compact-nav .menu-toggle .hamburger,
    .site-custom-header.is-compact .sm-compact-nav .menu-toggle .hamburger::before,
    .site-custom-header.is-compact .sm-compact-nav .menu-toggle .hamburger::after {
        background: var(--sm-menu-text, #333) !important;
    }
    /* Skjul inline nav-menu i compact på mobil — hamburger åbner portal-menuen */
    .site-custom-header.is-compact .sm-compact-nav .nav-menu {
        display: none !important;
    }
    .site-custom-header.is-compact .sm-compact-nav .nav-menu.is-active,
    .site-custom-header.is-compact .sm-compact-nav .nav-menu.is-mobile-portal {
        display: block !important;
    }
}

/* ===== Password-protected page form =====
   Section wrapper inherits .sm-section padding/header-clearance from the
   normal section system; no extra padding needed here. */
.sm-password-form-wrap {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--sm-body-font, system-ui, -apple-system, sans-serif);
}
.sm-password-form {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sm-password-form-title {
    font-family: var(--sm-heading-font, inherit);
    font-size: 26px;
    margin: 0;
    text-align: center;
    color: #1a1a1a;
}
.sm-password-form-subtitle {
    margin: 0 0 4px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
.sm-password-form-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: -8px;
}
.sm-password-form-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
    font-family: inherit;
}
.sm-password-form-input:focus {
    border-color: var(--sm-primary-color, #0066cc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sm-primary-color, #0066cc) 20%, transparent);
}
.sm-password-form-submit {
    align-self: center;
    min-width: 160px;
    background: var(--sm-primary-color, #0066cc);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter .2s ease, transform .05s ease;
    font-family: inherit;
}
.sm-password-form-submit:hover { filter: brightness(0.92); }
.sm-password-form-submit:active { transform: translateY(1px); }
.sm-password-error {
    background: #fef2f2;
    border-left: 4px solid #d63638;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #9b1c1c;
}

/* Menu items marked as "no link" (parent acting as label/toggle only) */
.menu-item.sm-no-link > a,
.sm-nav-link.sm-no-link {
    cursor: default;
}
.menu-item.sm-no-link > a {
    pointer-events: none;
}
/* Allow submenu toggles inside the item to still receive clicks if present */
.menu-item.sm-no-link .sub-menu,
.menu-item.sm-no-link .sub-menu * {
    pointer-events: auto;
}