/*
Theme Name: Haus Child
Theme URI: 
Author: Haus Byrå AS
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.3.1
Requires PHP: 5.7
Version: 1.0.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: hausbyra
Text Domain: haus
Tags: full-site-editing, 
*/

/* pages */
:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
}

/* links */
a:-webkit-any-link:hover {
    text-decoration: none !important;
}

.rank-math-breadcrumb {
    font-size: 0.875rem !important;
}
.rank-math-breadcrumb p > :last-child {
    color: #10695A;
}

/* search */
.haus-search-link-input-wrapper.active {
    z-index: 2;
}
.wp-block-kadence-header-desktop .wp-block-haus-search-menu-link {
    position: relative;
}
.wp-block-kadence-header-desktop .haus-search-link-input-wrapper {
    right: calc(100% + 24px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20;
}

/* hamburger menu */
.wp-block-kadence-navigation.navigation-mobile-orientation-vertical .menu-container .menu .menu-item .sub-menu.sub-menu {
    margin-left: 0 !important;
}

/* category archive */
@media (max-width: 600px) {
    .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
        grid-template-columns: 1fr;
    }
}

.wp-block-post-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-block-kadence-posts .entry-taxonomies a {
    color: #10695A !important;
    text-decoration: underline;
    font-size: 1rem;
}
.wp-block-kadence-posts .entry-taxonomies a:hover {
    text-decoration: none !important;
}

.wp-block-kadence-posts .loop-entry .entry-header .entry-title {
    font-size: 1.75rem;
    margin-bottom: 25px;
}

.wp-block-post-excerpt__more-text {
    font-weight: 600;
}

/* posts block */
.kt-blocks-above-categories {
    margin-top: 15px;
    font-weight: 600;
}
.kt-blocks-post-grid-item .entry-title {
    text-decoration: underline;
}
.kt-blocks-post-grid-item .entry-title:hover {
    text-decoration: none !important;
}
.kt-blocks-post-top-meta {
    font-weight: 300;
}

/* sticky post: remove the default bottom margin on featured image */
figure.sticky-post {
    margin: 0 !important;
}

/* norgeskart */
.norgeskart img {
    width: 100%;
    height: auto;
}

@media (min-width: 1025px) {
    .wp-block-kadence-column:has(.norgeskart),
    .wp-block-kadence-column:has(.norgeskart) .kt-inside-inner-col {
        position: static !important;
    }

    .norgeskart {
        --norgeskart-width: 46%;   /* size, relative to the row width */
        --norgeskart-left: 50%;    /* distance from the left edge of the row */
        --norgeskart-lift: -47%;   /* how far up, relative to the map's own height */
        position: absolute !important;
        z-index: 2;
        top: 0;
        left: var(--norgeskart-left);
        width: var(--norgeskart-width);
        max-width: none !important;
        margin: 0 !important;
        transform: translateY(var(--norgeskart-lift));
    }
}

@media (max-width: 1024px) {
    .norgeskart {
        width: 240px;
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    .norgeskart {
        width: 310px;
        max-width: 100% !important;
        margin: -160px 0 0 auto !important;
    }
}

/* posts carousel on mobile */
@media (max-width: 767px) {
    .kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom {
        padding: 0 44px;
    }

    .kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom .splide__arrows {
        top: 50%;
        bottom: auto;
        left: 0;
        width: 100%;
    }

    .kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom .splide__arrow {
        width: 36px;
    }

    .kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom .splide__arrow--prev {
        left: 0;
    }

    .kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom .splide__arrow--next {
        right: 0;
    }
}

/* featured image with a fixed height (page template with hero image): lower on mobile so less of the image is cropped */
@media (max-width: 767px) {
    .wp-block-post-featured-image img[style*="height"] {
        height: 250px !important;
    }
}

/* image that fills its column: add the class "fyll-kolonne" to an image block in a two-column row.
   on desktop the image covers the full height of the column, so no gap appears under it when the
   other column is taller */
@media (min-width: 1025px) {
    .kt-inside-inner-col:has(> .fyll-kolonne) {
        position: relative;
    }

    .fyll-kolonne {
        position: absolute !important;
        inset: 0;
        margin: 0 !important;
    }

    .fyll-kolonne .kb-is-ratio-image {
        height: 100%;
        padding-bottom: 0 !important;
    }

    .fyll-kolonne img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }
}

/* "boks-til-hoyre": Row Layout whose background starts at the left edge of the text column and runs
   to the right edge of the screen, with its content kept within the text width.
   Add the class to a Row Layout placed directly in the page content (Advanced → Additional CSS class).
   The 24px matches the side padding of the text column. */
.entry-content > .boks-til-hoyre {
    max-width: none !important;
    width: auto !important;
    margin-left: max(var(--wp--style--root--padding-left, 0px), calc(50% - var(--wp--style--global--content-size) / 2 + 24px)) !important;
    margin-right: 0 !important;
}

.boks-til-hoyre > .kt-row-column-wrap {
    box-sizing: border-box !important;
    max-width: calc(var(--wp--style--global--content-size) - 48px) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 24px !important;
}

/* mobile: the box is full width, so the content lines up with the text */
@media (max-width: 767px) {
    .boks-til-hoyre > .kt-row-column-wrap {
        padding-left: 24px !important;
    }
}