/*
Theme Name: WM Designer
Description: Performance-optimized theme with minimal codebase for maximum speed. Easy customization, clean architecture, and professional maintenance. Designed for those who value speed, simplicity and full control.
Author: Widescreen Media AB
Author URI: https://widescreen.media/design-start/
Version: 8.5
*/

body {max-width: 100vw; overflow-x: hidden;}
* {word-wrap: break-word; overflow-wrap: break-word;}


:where(.wp-site-blocks) > *, :root :where(.is-layout-constrained) {margin-block-start: 0;}
:where(.wp-site-blocks *:focus) {outline-width: 0!important;}


:root {
--size-headerheight1: clamp(340px, calc(18vw + 18vh), 550px);
--size-headerheight2: clamp(370px, calc(22vw + 22vh), 550px);
}


.is-vertical {flex-direction: column;}



/*---------- LOGO -----------*/
.menyn .wp-block-site-logo {transition: filter 0.7s;}
.menyn .wp-block-site-logo:hover {filter: drop-shadow(0 0 5px var(--wp--preset--color--light-1)) hue-rotate(-5deg) saturate(1.5);}


/*---------- CONTACT -----------*/
.contact-us {display: flex; flex-direction: column; align-items: center;}


/*---------- COVER PARALLAX -----------*/
.wp-block-cover.has-parallax {overflow: hidden;}
.wp-block-cover.has-parallax .wp-block-cover__image-background,
.wp-block-cover.has-parallax .wp-block-cover__video-background {will-change: transform; height: 120% !important; top: -10%;}
.xxxpage-header #herotext h2 {margin-top: 0vh;}







/*---------- LOGIN-BOXEN -----------*/
.wm-login {display: flex; flex-direction: column; width: 260px; gap: 10px; background: var(--wp--preset--color--light-2); padding: 20px; border-radius: 8px; box-shadow: 0px 0px 18px var(--wp--preset--color--dark-1);}
.wm-login input {padding: 10px; border-radius: 8px; border: 1px solid; text-align: center;}



/*---------- IMAGE FADER -----------*/
.image-fader {mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);}

/*---------- GALLERY -----------*/
.wp-block-gallery.has-nested-images figure.wp-block-image {flex-grow: 0 !important;}
.scrim {background-color: rgba(0, 0, 0, 0.9) !important;}

/*---------- DARKEN text-background blur -----------*/
.darken {filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.9)); max-width: 90%;}

/*---------- MARGIN 0-------------*/
.xxxhamburger-lines {margin: 0;}


/*---------- MARGIN updown small -------------*/
.wm-responsible-wrapper {padding: var(--wp--preset--spacing--space-sm) 0;}



/*---------- HERO-HEADER -------------*/
.hero-header .wp-block-heading {margin: var(--wp--preset--spacing--none);}
.hero-header .is-content-justification-right .wp-block-group {margin-right: 14vw!important;}


/*---------- POST i SINGLE -------------*/
.xxxwp-block-cover .wp-block-cover__inner-container, .wxxxp-block-cover-image .wp-block-cover__inner-container {width: unset!important;}

#postheader {min-height: calc(14vw + 14vh) !important;}

#postheader .post-info {gap: 1px!important;}


/*---------- TYPOGRAFI -------------*/
/*--------- Tiny font-size -----------*/
.wm-category-label, .wm-filter-category-label, small, .small {font-size: var(--wp--preset--font-size--size-1);}

label, select {font-size: var(--wp--preset--font-size--paragraph);}

.liten-knapp, .accent-knapp {display: inline-flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; line-height: 1;}

/*--------- Avstavning -----------*/
.rakmarginal * {overflow-wrap: break-word; hyphens: auto;}



/*---------- FÄRGER -------------*/
.light-1, .dark-knapp, .accent-knapp:hover { color: var(--wp--preset--color--light-1); }
.light-2 { color: var(--wp--preset--color--light-2); }
.light-3 { color: var(--wp--preset--color--light-3); }
.dark-1, .dark-knapp:hover { color: var(--wp--preset--color--dark-1); }
.dark-2 { color: var(--wp--preset--color--dark-2); }
.dark-3 { color: var(--wp--preset--color--dark-3); }
.white, #calculator table, #calculator select { color: var(--wp--preset--color--white); }
.black { color: var(--wp--preset--color--black); }

.bg-light-1, .dark-knapp:hover {background-color: var(--wp--preset--color--light-1);}
.bg-light-2, .kontaktraden a { background-color: var(--wp--preset--color--light-2); }
.bg-light-3, .kontaktraden a:hover { background-color: var(--wp--preset--color--light-3); }
.bg-dark-1, .dark-knapp, .accent-knapp:hover { background-color: var(--wp--preset--color--dark-1); }
.bg-dark-2 { background-color: var(--wp--preset--color--dark-2); }
.bg-dark-3 { background-color: var(--wp--preset--color--dark-3); }
.bg-white { background-color: var(--wp--preset--color--white); }
.bg-black { background-color: var(--wp--preset--color--black); }


.wp-block-media-text a {color: inherit;}


/*-------- Svart 3d-soft text-shadow --------*/
.xxx {text-shadow: 2px 2px 4px var(--black), -1px -1px 3px #895700;}


/*---- SPACING -----*/

/*---- Padding (knapp) -----*/
.accent-knapp, .liten-knapp {padding: var(--wp--preset--spacing--space-xs);}
.kontaktraden .liten-knapp {display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 11px; text-align: center; padding: 3px;}




/*---------- BORDER -----------*/
.stegen, .feature {border-width: 3px; border-style: solid;}

/*---------- Border-radius -----------*/
.feature, .child-pages-links a {border-radius: 12px;}
.feature #oneblock .kostnad, .child-pages-links p, .liten-knapp, .footer-content .contact-us, .accent-knapp {border-radius: 6px;}

.feature #moreblocks .webbhotellen {border-top-left-radius: 8px; border-top-right-radius: 6px;}
.feature #moreblocks .webbhotellen {border-top-right-radius: 8px; border-top-right-radius: 6px;}

.feature #moreblocks .kostnad {border-bottom-left-radius: 8px; border-bottom-right-radius: 6px;}
.feature #moreblocks .kostnad {border-bottom-right-radius: 8px; border-bottom-right-radius: 6px;}



/*--------- Border-box -----------*/
.wp-block-nk-awb {box-sizing: border-box;}


/*---------- BORDERS -----------*/
.liten-knapp, .footer-content .contact-us {border-width: 1px; border-style: solid;}

/*---------- LÄNKAR och KNAPPAR -----------*/
a {text-decoration: none;}
p a {text-decoration: underline;}
a, .close-popup, button:hover, #filter-my-posts:hover, .accordion-header:hover, .approved-icons .approved:hover, .admin-submenu.onclick-item:hover, .sub-menu li span:hover {cursor: pointer;}



/*---------- Ikonknapp med fill på icon -----------*/
.ikonknapp a {display: flex!important; align-items: center; flex-direction: row; background-color: #ffffff3d; border: 1px solid; border-color: var(--wp--preset--color--dark-3); border-radius: 4px; padding: 2px 6px; min-width: 130px; justify-content: space-between; transition: background-color 0.7s ease, color 0.7s ease, fill 0.7s ease;}
.ikonknapp a svg {width: 32px; height: 32px; margin-right: 12px; fill: none;}
.ikonknapp a:hover {background-color: var(--wp--preset--color--light-1); border-color: var(--wp--preset--color--dark-1); color: black;}
.ikonknapp a:hover svg {fill: var(--wp--preset--color--light-2)!important;}


/**** Adress_karta-knappen ****/
.accent-knapp {background-color: var(--wp--preset--color--light-2); color: var(--wp--preset--color--dark-1); }


.small-icon-button {border: unset; background: unset;}
.small-icon-button svg {height: 20px; width: 20px; fill: var(--wp--preset--color--dark-1);}
.small-icon-button:hover svg {fill: red;}


/*---------- HEIGHT 100%-----------*/
.height100, .height100 video {max-height: 100vh;}


/* ==================== KOMMENTARER ==================== */
.wp-block-comments #comments, .comment-reply-title {font-size: var(--wp--preset--font-size--size-4)!important; margin: 20px 0 0;}
.logged-in-as, .comment-form-comment label {display: none;}
.comment-form-comment textarea {height: 90px;}

.wp-block-comment-template {margin: 0!important; position: relative;}
.wp-block-comment-template .comment {border: 1px solid; border-radius: 8px; padding: 10px; margin: 8px 0!important;}
.wp-block-comment-author-name {margin: 0!important; line-height: 0.8!important;}
.wp-block-comment-author-name a {pointer-events: none!important; }
.wp-block-comment-content {margin: 0; position: absolute; left: 12px; margin: 12px 0;}

.form-submit #submit {margin-top: 8px; padding: 2px 10px; font-size: var(--wp--preset--font-size--size-2);}
































/**** LOOKS - GENERELL CSS ****/
.wm-event-list, .wm-blogger-container {margin: 20px 0;}


/****** LOOK: POSTER  *******/
.poster.wm-event-list {display: grid;  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px;}

/**** POSTER Månadsrubrik avdelare ****/
.poster .event-month {font-size: 25px!important;}

.poster .event-item {background: var(--wp--preset--color--dark-1); border: 3px solid var(--wp--preset--color--light-1); border-radius: 8px;  box-shadow: 0 0 15px var(--wp--preset--color--white);  padding: 10px; display: flex;  flex-direction: column;}

/**** POSTER Artist images ****/
.poster.wm-event-list .event-artists-images {display: flex; flex-direction: row;  flex-wrap: wrap; gap: 8px;}
.poster.wm-event-list .event-artists-images img {border-radius: 8px; width: 30%!important;  object-fit: cover; flex-grow: 1; height: auto;}
.poster h4 {color: var(--wp--preset--color--light-2); margin: 0;}
.poster .event-excerpt {margin: 15px 0; line-height: 1.6;}


/**** POSTER event-content - All text under bilder ****/
.poster .event-content {display: flex;  flex-direction: column;  justify-content: space-between; height: 100%;}

/** POSTER event-content All rows **/
.poster .event-date-row, .poster .event-info-row {display: flex; flex-direction: row;  align-items: center;}

/** POSTER event-date-row ROW 1 **/
.poster .event-date-row {justify-content: center;  padding: 14px 0;}
.poster .event-date-block {display: flex; flex-direction: column; align-items: center; font-weight: 900; margin-right: 24px;}

.poster .event-day {font-size: 50px!important; line-height: 36px;}

/** POSTER event-info-row ROW 2 **/
.poster .event-info-row {justify-content: space-between; font-size: 14px; gap: 14px; background: #ffffff2b; padding: 12px; border-radius: 10px;}
.poster .location-address, .poster .event-time {display: flex;  flex-direction: row;  align-items: center; gap: 4px;}

/** POSTER ROW 3 knapparna **/
.poster .event-booking {display: flex; flex-direction: row; justify-content: space-between; margin-top: 15px;}







/****** LOOK: LIST ******/
.wm-role-list.list  {display: flex; flex-direction: column;}
.list .wm-role-list-item { margin: clamp(5px, 1vw, 10px) 0; }

.list .wm-role-list-item {padding: 1vw; border-radius: 8px;}

.wm-blogger-container.list .blog-post {display: grid; grid-template-columns: 150px 1fr;}
.list .wm-role-list-item {display: flex; align-items: center; gap: 15px;}
.wm-role-list-item {background: var(--wp--preset--color--light-2);}

    
.wm-blogger-container.list .blog-date {grid-column: 1;}
.wm-blogger-container.list .blog-title, .wm-role-list-item .wm-role-list-name, .list .wm-role-list-special {display: block; margin: 0;}

/* Med bild i listan */
.wm-blogger-container.list .blog-thumbnail {grid-row: 1 / 3;}
.wm-blogger-container.list .blog-thumbnail img {width: %; height: auto; object-fit: cover;}
.list .wm-role-list-item img {width: clamp(50px, 14vw, 100px); border-radius: 8px; height: auto; object-fit: cover;}



/* Utan bild i listan */
.wm-blogger-container.list .blog-post:not(:has(.blog-thumbnail)) {grid-template-columns: 1fr;}

.list article .blog-excerpt {margin-bottom: 6vh!important;}

.list .wm-list-header, .list .wm-role-list-name {font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--space-sm) auto var(--wp--preset--spacing--space-xs);}

.list .wm-role-list-name {margin: 0!important; font-weight: 600;}

/* LIST date och title får samma storlek */
.wm-blogger-container.list .blog-date, .wm-blogger-container.list.underhall .blog-title {font-family: inherit; font-weight: 400; font-size: var(--wp--preset--font-size--paragraph);}





/****** Lista bara bild och title ARCHIVE *******/
.artist-archive .artist-card {align-items: center; background: #ffffff38; color: var(--wp--preset--color--light-1); padding: 8px; box-sizing: border-box; border-radius: 10px; display: flex; flex-direction: row; margin: 12px auto; transition: box-shadow 0.9s ease, background 0.5s ease, color 0.5s ease;}

.artist-archive .artist-card img {margin-right: 3vw; width: clamp(80px, 25vw, 95px); border-radius: 8px; height: auto;}
.artist-archive .artist-card h4 {font-size: 22px; margin: 0;}

.artist-archive .artist-card:hover {box-shadow: 0px 0px 8px var(--wp--preset--color--light-1); color: white; background: color: var(--wp--preset--color--dark-1)}









/* LIST kontaktknappar .ikonknapp */
.list .ikonknapp a svg {width: 24px; height: 24px;}
.list .wm-role-list-contact {display: flex; flex-direction: row; gap: 15px;}
.list .wm-role-list-email, .list .wm-role-list-phone {margin: 3px 0;}







/* CUSTOM FIELD-SUBHEADING används exv på Stadgar */
.list .wm-subheading-header {font-size: var(--wp--preset--font-size--paragraph); font-weight: 800; margin: var(--wp--preset--spacing--space-sm) auto var(--wp--preset--spacing--space-xs);}


:is(.wm-event-list, .wm-blogger-container).list .event-thumbnail {
    flex: 0 0 200px;
}

:is(.wm-event-list, .wm-blogger-container).list .event-content {
    flex: 1;
}





/****** LOOK: Grid ******/
:is(.wm-event-list, .wm-blogger-container).grid {
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  
    gap: 20px;
}

:is(.wm-event-list, .wm-blogger-container).grid .event-item,
:is(.wm-event-list, .wm-blogger-container).grid .blog-post {
    text-align: center;  
    margin-bottom: 0;
}

:is(.wm-event-list, .wm-blogger-container).grid .event-title {
    font-size: 18px;
}


/****** LOOK: Compact ******/
:is(.wm-event-list, .wm-blogger-container).compact .event-item,
:is(.wm-event-list, .wm-blogger-container).compact .blog-post {
    padding: 15px;
}

:is(.wm-event-list, .wm-blogger-container).compact .event-thumbnail {
    display: none;
}

:is(.wm-event-list, .wm-blogger-container).compact .event-title {
    font-size: 18px;  
    margin: 0 0 8px 0;
}

:is(.wm-event-list, .wm-blogger-container).compact .event-excerpt {
    display: none;
}




































/*-------- TRANSITIONS --------*/
.wp-block-navigation li, .contact-us, .wp-block-site-logo {transition: color 0.7s, background-color 0.5s;}

.contact-us svg {transition: stroke 0.7s;}
.small-icon-button svg {transition: fill 0.5s;}

/*-------- Transitions FILTER --------*/
.menyn * li, .kontaktraden a, .liten-knapp, .accent-knapp, .footer-content .contact-us, .wp-element-button, .wm-row {transition: background 0.7s, background-color 0.7s;}


/*-------- FOOTER --------*/
.footer-content {gap: 0!important; margin-bottom: 0 !important;}
.businessraden {align-items: center;}
.adressraden {display: flex; flex-direction: column; gap:0;}
.adressraden .wp-block-site-title {font-size: 20px!important;}

.adressraden {padding-bottom: var(--wp--preset--spacing--space-md);}
.kontaktraden .liten-knapp {min-width: 100px;}
.kontaktraden *, .contact-us span {font-size: 11px;}
.kontaktraden svg {height: 35px; width: 35px;}
.credraden  {padding-top: var(--wp--preset--spacing--space-xl);}

/*-------- RESPONSIVITET --------*/
@media (max-width: 750px) {
.hero-header .is-content-justification-right .wp-block-group {margin-right:0!important;}
.kontaktraden {gap: 8px!important;}
}

@media (max-width: 600px) {
.wp-block-media-text__media {padding: 5px;}
.wp-block-media-text__media img:not(.citat img) {height: 200px!important; object-fit: cover; margin: unset!important;}
.kontaktraden svg {height: 26px; width: 26px;}
}


@media (max-width: 400px) {
.kontaktraden {gap: 6px!important; margin-top: 25px!important;}
.kontaktraden .liten-knapp {min-width: 94px; font-size: 10px; padding: 1px!important;}
}