/* ==================================================================
   GLOBAL — loaded on every page
   Layout, header, footer, sidebar lists, roulette, YouTube facade.
   ================================================================== */

/* ============================
   MOBILE OVERFLOW FIX
   ============================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Modern browsers: clip instead of hide. Stops Android sideways scrolling
   without turning <body> into a scroll container (keeps the sticky header working) */
@supports (overflow-x: clip) {
    html, body {
        overflow-x: clip;
    }
}

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

img, iframe, video, embed, object, table {
    max-width: 100%;
    height: auto;
}

/* Any grid layout gets shrink protection (restored to real columns below) */
[style*="display: grid"],
.js-song-grid,
.jsdk-song-layout,
.jsdk-song-content-row,
.jsdk-syng-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 901px) {
    .jsdk-song-layout {
        grid-template-columns: 3fr 1fr !important;
    }
    .jsdk-song-content-row {
        grid-template-columns: 1.5fr 1.5fr !important;
    }
    .js-song-grid,
    .jsdk-syng-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ============================
   PAGE WIDTH
   ============================ */
.site .site-content #primary {
    width: 1240px;
}

@media (max-width: 921px) {
    .site .site-content #primary {
        width: 100%;
    }
}

/* Featured image hidden on song posts (blog keeps it) */
article:not(.category-blog) .entry-header .post-thumb {
    display: none !important;
}

/* ============================
   HEADER
   ============================ */
.site-header .site-description {
    line-height: 0;
    text-align: right;
}

.ast-site-identity {
    padding: 0.5em 0 1em 0 !important;
}

/* ============================
   BLOCKS / PLUGINS
   ============================ */
.wp-block-post-excerpt,
.wp-block-post-date {
    display: none;
}

:root :where(.is-layout-grid) {
    gap: 0px !important;
}

.hfe-search-form__container {
    min-height: 10px !important;
}

.wpp-list li {
    margin-bottom: 0;
}

/*
 * NOTE: the two rules below end in ", ul", which targets EVERY <ul> on the
 * site, not just these plugin lists. Probably a typo originally, but the
 * site's spacing now relies on it, so it's kept as-is. To scope it later,
 * change "ul" to ".wpp-list ul" / ".crp_related ul" and check lists in
 * song texts, blog posts and menus afterwards.
 */
.wpp-list ol, ul {
    margin: 0 0 1em 1em;
}

h5, .entry-content h5 {
    line-height: 2.5em !important;
}

.crp_related .crp_related_widget .crp-text-only ol, ul {
    margin: 0 0 1em 1em;
    line-height: 30px;
    list-style: none;
}

/* ============================
   SIDEBAR LISTS (Mest populære / Relaterede sange)
   ============================ */
.mpj-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mpj-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid #ece4d6;
    min-width: 0;
}

.mpj-list li:last-child {
    border-bottom: none;
}

.mpj-rank {
    flex: 0 0 5px;
    font-size: 12px;
    font-weight: 500;
    color: #a92b27;
    text-align: center;
}

.mpj-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 5px;
    overflow: hidden;
    background: #fffbfb;
}

.mpj-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.mpj-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.mpj-thumb a:hover img {
    transform: translateX(4px);
}

.mpj-text {
    flex: 1;
    min-width: 0;
}

.mpj-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #2b2b2b;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpj-title,
.mpj-artist {
    max-width: 100%;
}

.mpj-title:hover {
    text-decoration: none;
}

.mpj-artist {
    display: block;
    font-size: 13px;
    color: #5c5650; /* darker warm gray, passes 4.5:1 on cream */
    margin-top: 2px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpj-artist:hover {
    text-decoration: none;
}

.mpj-arrow {
    flex: 0 0 auto;
    color: #b9b2a2;
    font-size: 18px;
    line-height: 1;
}

/* Sidebar card heading + the list below it */
.jsdk-sidebar-heading {
    background: #e6ece5;
    color: #730b09;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    margin-bottom: 0 !important;
    padding: 10px 10px;
    border: 0;
    border-radius: 10px 10px 0 0;
}

.jsdk-sidebar-heading + .mpj-list {
    border: 1px solid #f0ebe7;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin: 0 0 25px 0;
    padding: 10px 10px;
}

/* ============================
   BACKGROUND
   ============================ */
.ast-separate-container {
    background-color: #f4efe4; /* fallback + fills the middle where no image is */
    background-image:
        url(/wp-content/uploads/2026/10/xmas-baggrund.webp),
        url(/wp-content/uploads/2026/10/xmas-baggrund.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 100% 950px, 100% 260px; /* control the height here */
    background-attachment: fixed, fixed;
}

/* ============================
   HEADER SEARCH + ROULETTE BUTTON
   ============================ */
.header-search-form {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 10px;
    background: #fff;
    overflow: visible !important;
}

.header-search-form input {
    border: none;
    outline: none;
    font-size: 13px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 140px !important;
    min-width: 100px !important;
}

.header-search-form button {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

.random-song-btn {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background-color: #730b09;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.random-song-btn:hover {
    background-color: #942f24;
    color: #fff;
}

/* ============================
   STICKY HEADER
   ============================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    border-bottom: 0;
}

.site-header .ast-main-header-wrap {
    max-width: 1260px;
    margin: 0 auto;
    border-bottom: 2px solid #e5e5e5;
}

@media (min-width: 922px) {
    .blog .site-content > .ast-container,
    .archive .site-content > .ast-container,
    .search .site-content > .ast-container {
        max-width: 1260px;
        background: #faf7f2;
    }
}

@media (max-width: 992px) {
    .ast-separate-container #primary,
    .ast-separate-container.ast-left-sidebar #primary,
    .ast-separate-container.ast-right-sidebar #primary {
        background: #faf7f2;
    }
}

@media (max-width: 921px) {
    .site-header .ast-main-header-wrap {
        max-width: 100%;
        padding: 0 20px;
    }
}

/* Mobile: one consistent side margin for the whole site */
@media (max-width: 767px) {
    :root {
        --jsdk-gutter: 20px; /* change this one number to adjust all mobile margins */
    }

        /* Header: no padding on the transparent wrapper... */
    .site-header .ast-main-header-wrap,
    .ast-mobile-header-wrap .ast-main-header-wrap {
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* ...but on the bar that has the background */
    .ast-mobile-header-wrap .ast-primary-header-bar {
        padding-left: var(--jsdk-gutter) !important;
        padding-right: var(--jsdk-gutter) !important;
    }

    /* Page content: the container gives the margin... */
    .ast-separate-container #content .ast-container {
        padding-left: var(--jsdk-gutter) !important;
        padding-right: var(--jsdk-gutter) !important;
    }

    /* ...so the boxes inside don't add their own on top */
    .ast-separate-container .ast-article-single,
    .ast-separate-container .ast-article-post,
    .ast-separate-container .ast-article-inner,
    .ast-separate-container .ast-archive-description,
    .ast-separate-container .comment-respond,
    .post-navigation .nav-links {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Footer */
    .jsdk-footer-grid,
    .jsdk-footer-bottom {
        padding-left: var(--jsdk-gutter) !important;
        padding-right: var(--jsdk-gutter) !important;
    }
}

/* Query Loop items (pages, archives) */
.wp-block-post {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================
   ASTRA FOOTER (hidden, replaced by .jsdk-footer)
   ============================ */
.site-footer {
    width: 1260px;
    margin: 0 auto;
}

.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
    padding-left: 20px;
    padding-right: 20px;
}

#colophon.site-footer {
    display: none;
}

/* Song posts: Astra's title is replaced by the template's own <h1> */
article.type-post:not(.category-blog) .entry-header .entry-title {
    display: none;
}

/* ============================
   ROULETTE PAGE (overrides for the Jule-Sange Roulette plugin)
   ============================ */
.jsr__hero-panel {
    position: relative;
    overflow: hidden;
    margin-top: -25px !important;
    padding: 52px 24px 60px;
    border-radius: 0px !important;
    background: none !important;
    background-image: url('/wp-content/uploads/2026/10/roullete-image.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Dark overlay — adjust the two rgba alpha values to make it lighter or darker */
.jsr__hero-panel::after {
    background: linear-gradient(180deg, rgba(18,10,8,.60), rgba(14,8,6,.7)) !important;
}

.jsr__hero h1 em {
    color: #fdf3e2 !important;
}

.jsr__badge-icon {
    color: var(--jsr-red) !important;
}

.jsr__spin {
    font-weight: 600 !important;
    font-size: 23px !important;
}

.jsr__spin small {
    margin-top: 10px !important;
    font-size: 2rem !important;
}

.jsr::before {
    background: #faf7f2 !important;
}

.jsr__recent {
    margin: 30px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    background: #fbf3e9;
}

.jsr__popular {
    margin: 30px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    background: var(--jsr-green-light);
}

.jsr__banner {
    margin-top: 0px !important;
    margin-bottom: -100px !important;
    padding: 10px 10px !important;
    border-radius: 0px !important;
    color: #fff8ec;
    text-align: center;
}

.jsr__song-card-link {
    margin: 0 0 3px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.jsr__song-card > img {
    display: block;
    width: 100%;
    height: 85px !important;
    object-fit: cover;
}

.jsr__hero-decor {
    display: none !important;
}

.jsr__filter:hover,
.jsr__filter:focus-visible {
    color: #ffffff !important;
}

.jsr__banner-link {
    text-decoration: none !important;
}

.jsr__banner-link:hover {
    color: #ffffff !important;
}

/* "Hvad skal vi synge nu?" random song card */
.jsr-random-card__button {
    gap: 0px !important;
    padding: 5px 10px !important;
}

.jsr-random-card__title,
.jsr-random-card__subtitle {
    position: relative !important;
}

.jsr-random-card::before {
    background-size: 100% auto !important;
}

.jsr-random-card {
    padding: 10px 10px !important;
    border-radius: 10px !important;
    background: linear-gradient(150deg, #e8f0e4, #e8f0e4) !important;
}

/* ============================
   BLOG / ARCHIVES
   ============================ */
article.category-blog ~ .post-navigation {
    display: none;
}

.ast-pagination .prev.page-numbers,
.ast-pagination .next.page-numbers {
    display: none;
}

article.category-julesangtekster .post-thumbnail,
article.category-julesangtekster .post-thumb-img-content.post-thumb {
    display: none;
}

/* ============================
   FOOTER (.jsdk-footer)
   ============================ */
.jsdk-footer {
    max-width: 1260px;
    margin: 0 auto;
    background: #FFF;
    border-top: 1px solid #e7e1d8;
    padding: 50px 0 0;
    color: #333;
}

/* Desktop: Brand | Julesange | Om siden | Roulette box */
.jsdk-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 40px;
}

.jsdk-footer-brand img {
    height: 32px;
    width: auto;
    margin-bottom: 12px;
}

.jsdk-footer-brand p {
    font-size: 13px;
    color: #707070;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 260px;
}

.jsdk-footer-social {
    display: flex;
    gap: 10px;
}

.jsdk-footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #124734;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
}

.jsdk-footer-social a:hover {
    background: #0b3828;
}

.jsdk-footer h4 {
    font-family: Georgia, "Times New Roman", serif;
    color: #990000;
    font-size: 15px;
    margin: 0 0 16px;
}

.jsdk-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jsdk-footer ul li {
    margin-bottom: 10px;
}

.jsdk-footer ul li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.jsdk-footer ul li a:hover {
    color: #990000;
}

.jsdk-footer-cta {
    border: 1px solid #e7e1d8;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    background: #fff url('/wp-content/uploads/2026/10/footer-cta.webp') top / cover;
}

.jsdk-footer-cta p {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0 0 14px;
    line-height: 1.5;
}

.jsdk-footer-cta a {
    display: inline-block;
    background: #124734;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.jsdk-footer-cta a:hover {
    background: #0b3828;
}

.jsdk-footer-bottom {
    border-top: 1px solid #e7e1d8;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #999;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
    .jsdk-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile: brand and roulette box full width, the two link columns side by side */
@media (max-width: 767px) {
    .jsdk-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 24px !important;
    }
    .jsdk-footer-grid > .jsdk-footer-brand,
    .jsdk-footer-grid > .jsdk-footer-cta {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 560px) {
    .jsdk-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================
   BREADCRUMBS
   ============================ */
.jsdk-breadcrumbs {
    margin: -70px 0 15px -7px;
    padding-top: 10px;
}

@media (max-width: 544px) {
    .jsdk-breadcrumbs {
        margin-top: -20px;
    }
}

#breadcrumbs {
    font-size: 12px;
    color: #999;
    margin: 0 0 5px;
}

#breadcrumbs a {
    color: #999;
    text-decoration: none;
}

#breadcrumbs a:hover {
    color: #990000;
}

#breadcrumbs .breadcrumb_last {
    color: #333;
}

.ast-breadcrumbs .trail-items {
    display: none;
}

/* ============================
   PAGE SHELL (footer at bottom + content width)
   ============================ */
#page.hfeed.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content.site-content {
    flex: 1 0 auto;
    background: #FFF;
    max-width: 1260px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    #content.site-content {
        max-width: 100% !important;
    }
}

/* ============================
   YOUTUBE FACADE (thumbnail → player on click)
   ============================ */
.yt-facade {
    position: relative;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    padding: 0;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sitewide button reset (square corners, no shadow) */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border-radius: 0px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

/* ==================================================================
   LEGACY — not used by the theme's PHP. Kept because older posts or
   pages may contain these classes in their content. If a search of
   your posts/pages finds none of them, this whole section can go.
   ================================================================== */
#grad1 {
    background-image: linear-gradient(to top, #96000e, #a7290c85);
}

.elementor-post__title a {
    line-height: 18px !important;
}

.btn-primary {
    color: #fff !important;
    box-shadow: 0px 3px #ccc;
}

.btn-primary:hover {
    color: #fff;
    box-shadow: 0px 3px #ccc;
}

.btn-green {
    border-radius: 50px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    margin-top: 20px;
    font-size: 20px !important;
    font-weight: 600 !important;
    width: 30%;
    line-height: 1.42857143;
    text-align: center;
    white-space: normal !important;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 0 solid transparent;
}

.song-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.song-sidebar .sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* Mobile/tablet: slimmer header */
@media (max-width: 921px) {
    .ast-site-identity {
        padding: 8px 0 !important;
    }
    .ast-mobile-header-wrap .ast-primary-header-bar .site-primary-header-wrap {
        min-height: 56px !important;
    }
    .site-header .custom-logo-link img {
        max-height: 34px;
        width: auto;
    }
}

/* Tablet/mobile: center the "Hvad skal vi synge nu?" card */
@media (max-width: 900px) {
    .jsr-random-card {
        text-align: center;
    }
    .jsr-random-card__button {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center;
    }
    .jsr-random-card::before {
        background-position: center !important;
    }
}

.entry-content p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mpj-title,
.mpj-artist {
    display: inline-block;
    min-height: 20px;
    line-height: 20px;
}

.jsdk-footer h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color:#124734;
}

.jsdk-footer-bottom {
    opacity: 1;
    color: #5c5650;
}

.site-header .site-description {
    line-height: 1 !important;
}