/*
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: 11.9
*/


html, body {max-width: 100vw; overflow-x: clip;}
@media (max-width: 600px) {
.has-global-padding {
--wp--style--root--padding-left: 10px;
--wp--style--root--padding-right: 10px;}
input, textarea, select {font-size: 16px;}
}

* {word-wrap: break-word; overflow-wrap: break-word;}


:where(.wp-site-blocks) > *, :root :where(.is-layout-constrained), footer *, .wm-header {margin-block-start: 0; margin-block-end: 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;}
/*---------- SEARCH GLASS -----------*/
.wm-search-wrap {position: relative;}
.wm-search-input {border: 1px solid var(--wp--preset--color--dark-1); position: absolute; right: 110%; top: 50%; transform: translateY(-50%); z-index: 9; width: 0; opacity: 0; transition: width .5s ease, opacity .3s ease; background: var(--wp--preset--color--light-2); padding: 2px 6px; height: 45px;}
.wm-search-input.open {width: 300px; opacity: 1;}
.wm-search-input:focus {outline: none;}


/*---------- SEARCH RESULTS -----------*/
.found-results li {display: flex; flex-direction: row; background-color: var(--wp--preset--color--light-1); color: var(--wp--preset--color--dark-1); border: 1px solid var(--wp--preset--color--dark-2); position: relative; padding: 2px; border-radius: 4px; margin-block-start: 2vh; transition: all 0.6s ease;}
.found-results li:hover {background-color: var(--wp--preset--color--dark-1); transform: scale(1.01);}

.found-results li:hover .found-result-content * {color: var(--wp--preset--color--light-1);}


.found-results li:hover mark {background: unset;}
.found-results figure {display: flex; width: 20%; flex-shrink: 0; margin: 0; position: unset !important;}
.found-results figure a::after {content: ''; position: absolute; inset: 0;}
.found-results figure img {aspect-ratio: 5/2; height: 100%; object-fit: cover;}
.found-result-content {display: flex; justify-content: center; flex-direction: column; padding: 10px;}
.found-results .wp-block-post-title {margin: 0;}
.found-results p {font-size: 15px; line-height: 1.4;}

@media (max-width: 600px) {
.found-results li {flex-direction: column;}
.found-results figure {width: 100%;}
.found-results figure img {aspect-ratio: 3/1;}
}



/*---------- LIGHTBOX -----------*/
.wm-lightbox-trigger {cursor: zoom-in; }
#wm-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
#wm-lightbox.active { display: flex; animation: lb-fade 0.3s ease; }
#wm-lightbox img { width: 95vw; height: 95vh; object-fit: contain; transform-origin: center center; animation: lb-zoom 0.7s ease; }

@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom { from { transform: scale(0.5); } to { transform: scale(1); } }



/*---------- PAGE LOGIN -----------*/
.page-login {display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background-size: cover; background-position: center; position: relative;}
.page-login::before {content: '';  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.page-login > * {position: relative; z-index: 1;}



/*---------- 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;}


/*---------- WP-BLOCK DOWNLOAD PDF-----------*/
.wp-block-file {display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; background: #f8f2f2; padding: 10px; margin-top: 16px;}
.wp-block-file a {font-size: 20px;}
.wp-block-file__button {font-size: 12px !important; margin-right: 10px;}





/*---------- 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--size-2);}

.liten-knapp, .accent-knapp, .kommentar-knappar a {font-size: var(--wp--preset--font-size--size-1); 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, .kommentar-knappar a { 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, .kommentar-knappar a:hover { 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, .kommentar-knappar a:hover { 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, .kommentar-knappar a { 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;}


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

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




/*---------- 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, .accent-knapp, .kommentar-knappar a {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, .has-background {box-sizing: border-box;}


/*---------- BORDERS -----------*/
.liten-knapp, .kommentar-knappar a {border-width: 1px; border-style: solid;}

/*---------- LÄNKAR och KNAPPAR -----------*/
.wp-element-button {width: fit-content;}

a, .wp-block-accordion-heading__toggle-title, .next a, .prev a {text-decoration: none !important;}
span a {text-decoration: underline;}
p a {text-decoration: underline!important;}

a:hover, .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, #booking-calendar td:hover {cursor: pointer;}

/*---------- ACCORDION-----------*/



/*---------- 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 {list-style: none; padding: 0; margin: 0!important; position: relative;}



.wp-block-comment-template .comment {background: #cbe5ff17; border: 0.7px solid; border-radius: 8px; padding: 10px; margin: 8px 0!important;}

.kommentar-knappar {margin-top: 12px;}


.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;}

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



/* 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);}



/*-------- ARCHIVE --------*/
.wm-archive-card {position: relative; background-color: var(--wp--preset--color--light-1); color: var(--wp--preset--color--dark-1); border: 1px solid; border-radius: 6px; transition: background-color 0.8s ease;}
.wm-archive-card:hover {background-color: var(--wp--preset--color--light-2);}
.wm-archive-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }


/*-------- TRANSITIONS --------*/
.wp-block-navigation li, .contact-us, .wp-block-site-logo, .wm-postlist a, .post-navigation a, .wm-row, #booking-calendar td {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, .wp-element-button, .wm-row, .kommentar-knappar a {transition: background 0.7s, background-color 0.7s;}