/* Theme style */

@media (max-width: 670px) {
    :root {
        --wp--custom--header-height--top: 70px;
    }
}

/* ==========================================================================
Base styles
========================================================================== */

.qt-section.has-background {
    padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--m);
}

.qt-container.has-background {
    border-radius: 8px;
}

@media (max-width: 670px) {
    .qt-section {
        padding-right: var(--wp--preset--spacing--xs);
        padding-left: var(--wp--preset--spacing--xs);
    }

    .qt-section__inner.grid.grid-col-1 {
        row-gap: var(--wp--preset--spacing--l);
    }
}

/* Headings
========================================================================== */

.wp-block-heading {
    text-wrap: balance;
}

.wp-block-heading.has-heading-display-font-family.has-display-font-size {
	margin-bottom: 0.5em;
}

@media screen and (max-width: 670px) {
    h1,
    h2,
    h3 {
        line-height: 1.2;
    }
}

/* Paragraphs
========================================================================== */

p {
    text-wrap: pretty;
}

/* Typography
========================================================================== */

/* Eyebrow */

.is-style-eyebrow {
    display: flex;
    gap: var(--wp--preset--spacing--xxs);
    color: var(--wp--preset--color--orange);
    font-size: var(--wp--preset--font-size--m);
    width: fit-content;
    align-items: center;
    margin-bottom: 0;
}

.qt-container.is-horizontally-aligned-center .is-style-eyebrow {
    justify-self: center;
	margin: 0 auto;
}

.is-style-eyebrow:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='45' height='43' viewBox='0 0 45 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' fill='%23FF603A'/%3E%3Crect x='29' width='16' height='16' fill='%23FF603A'/%3E%3Crect y='27' width='16' height='16' fill='%23FF603A'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.is-style-eyebrow + .wp-block-heading {
    margin-top: var(--wp--preset--spacing--xs);
}

@media screen and (max-width: 670px) {
    .is-style-eyebrow {
        font-size: var(--wp--preset--font-size--s);
    }
}

/* Links
========================================================================== */

a:where(:not(.wp-element-button)) {
    color: inherit;
    text-decoration: none;
}

a:where(:not(.wp-element-button)):hover {
    color: inherit;
    text-decoration: none;
}

/* Lists
========================================================================== */

:is(ul, ol),
.wp-block-list {
    margin-left: 0;
    list-style: none;
}

.wp-block-list li:not(.menu-item) {
    display: flex;
    align-items: flex-start;
}

.wp-block-list li:not(.menu-item):before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' fill='%23FF603A'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: var(--wp--preset--spacing--xs);
	flex-shrink: 0;
	margin-top: var(--wp--preset--spacing--xxs);
}

.wp-block-list.is-style-checkmark-list {
    padding-top: var(--wp--preset--spacing--m);
    display: flex;
    gap: var(--wp--preset--spacing--xs);
    justify-content: space-between;
}

.wp-block-list.is-style-checkmark-list li {
    position: relative;
    padding-left: var(--wp--preset--spacing--m);
    font-weight: 500;
}

.wp-block-list.is-style-checkmark-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_46_10' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_46_10)'%3E%3Cpath d='M19.1 36.0002L7.69995 24.6002L10.55 21.7502L19.1 30.3002L37.45 11.9502L40.3 14.8002L19.1 36.0002Z' fill='%23022E64'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 670px) {
    .wp-block-list.is-style-checkmark-list {
        flex-direction: column;
        align-items: center;
    }
}

/* Buttons
========================================================================== */

/* Inputs
========================================================================== */

/* Label */

/* Input fields */

input,
textarea {
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--orange);
    border-radius: 10px;
}

/* Select */

/* Checkbox & radio button */

/* Focus and active statements */

/* Acceptance */

/* Submit */
[type="submit"] {
    padding: 12px var(--wp--preset--spacing--s);
    border-radius: 30px;
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--button);
    font-size: var(--wp--preset--font-size--s);
}

/* Contact form 7
========================================================================== */

.wpcf7-form-control-wrap {
    margin-top: var(--wp--preset--spacing--xxs);
}

.wpcf7-form {
    grid-gap: var(--wp--preset--spacing--xs);
}

* .acceptance [type="checkbox"] {
    border-color: var(--wp--preset--color--orange);
}

.wpcf7-list-item-label {
	font-size: var(--wp--preset--font-size--xs);
}

.wpcf7-list-item-label a{
	text-decoration: underline;
}

.wpcf7-radio label,
.wpcf7-checkbox label,
.wpcf7-acceptance label {
    align-items: flex-start;
}

.wpcf7-form-control-wrap:has(.wpcf7-checkbox) {
    margin-top: 0.75em;
}

.submit [type="submit"] {
    width: 100%;
    min-height: 65px;
}

.is-style-contact-form .qt-container.is-style-has-border {
    padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

.is-style-contact-form .qt-section__inner.grid-col-2 {
    column-gap: var(--wp--preset--spacing--l);
}

.qt-section.has-background.is-style-contact-form {
    padding-top: var(--wp--preset--spacing--xxl);
}

.is-style-contact-form .qt-section__inner > .qt-container:first-child {
    padding-right: var(--wp--preset--spacing--xs);
}

@media screen and (max-width: 1201px) {
    .qt-section.is-style-contact-form .qt-container:has(.wpcf7) {
        padding: var(--wp--preset--spacing--m);
    }
}

/* Media
========================================================================== */

/* Images */
.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-cover.is-style-stretch {
    padding-right: var(--wp--preset--spacing--m);
    padding-left: var(--wp--preset--spacing--m);
    min-height: 44rem;
}

@media screen and (max-width: 670px) {
    .wp-block-cover.is-style-stretch {
        min-height: 40rem;
    }
}

/* .wp-block-image .aligncenter,
.wp-block-image .alignleft,
.wp-block-image .alignright,
.wp-block-image.aligncenter,
.wp-block-image.alignleft,
.wp-block-image.alignright {
    display: block;
} */

/* Video */

/* Iframe & embedded */

/* Files */
/* .wp-block-file:not(.wp-element-button) {
    font-size: inherit;
}

.wp-block-file:not(:last-child) {
    margin-bottom: var(--wp--preset--spacing--s);
} */

/* ==========================================================================
Layout
========================================================================== */

/* Paddings and margins
========================================================================== */

/* Max widths
========================================================================== */

/* Grids
========================================================================== */

/* .grid-col-1 {
    grid-gap: calc(3 * var(--wp--style--block-gap));
}

.grid-col-2:not(.has-background) {
    grid-gap: calc(2 * var(--wp--style--block-gap));
}

@media (max-width: 768px) {
    .grid-col-1 {
        grid-gap: calc(2 * var(--wp--style--block-gap));
    }

    .grid-col-2 {
        grid-gap: var(--wp--style--block-gap);
    }
} */

/* ==========================================================================
Announcement bar
========================================================================== */

/* ==========================================================================
Top bar
========================================================================== */

/* ==========================================================================
Header
========================================================================== */

header.wp-block-template-part {
    background-color: var(--wp--preset--color--dark-blue);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

.is-style-header-top {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

header .menu .menu-item:not(.mega-menu-item) > :is(a, span):hover + .sub-menu,
header .menu .menu-item:not(.mega-menu-item):hover > :is(a, span) + .sub-menu {
    top: calc(var(--wp--custom--header-height--total));
}

.menu {
    column-gap: var(--wp--preset--spacing--m);
}

header .menu-item {
    color: var(--wp--preset--color--white);
}

.is-style-header-top .grid {
    gap: var(--wp--preset--spacing--s);
}

.is-style-header-top .qt-container:has(.mega-menu:not(.mega-menu-mobile)) {
    justify-content: flex-end;
}

.sub-menu .menu-item a:hover {
    text-decoration: none;
}

.qt-container:has(.hamburger) .wp-block-buttons {
    margin-right: var(--wp--preset--spacing--s);
    margin-left: var(--wp--preset--spacing--m);
}

.mega-menu-mobile span,
.mega-menu-mobile li {
    color: var(--wp--preset--color--black);
}

header .menu > .menu-item:not(.mega-menu-item) {
    height: fit-content;
}

.mega-menu-mobile .mega-menu-header-m img.custom-logo {
    content: url("https://ockelbolegomek.se/wp-content/uploads/2026/05/logo_ockelbo_utstans-scaled.webp");
}

@media (min-width: 1201px) {
    header .menu > .menu-item:not(.mega-menu-item) {
        height: var(--wp--custom--header-height--top);
    }

    .qt-container:has(.hamburger) .wp-block-buttons {
        margin-right: 0;
        margin-left: var(--wp--preset--spacing--s);
    }
    header .menu .menu-item:not(.mega-menu-item) > :is(a, span) + .sub-menu {
        padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xs);
        border-top: 0;
    }

    header .menu > .menu-item > :is(a, span) {
        display: inline-block;
        height: auto;
        text-decoration: none;
    }

    header .menu > .menu-item > :is(a, span) img {
        vertical-align: middle;
    }

    .mega-menu .mega-menu-item-parent .chevron {
        margin-left: var(--wp--preset--spacing--xxs);
    }

    .menu-item a {
        border-bottom: 2px solid transparent;
        transition: border-color 150ms linear;
    }

    header .menu-item a:hover {
        color: var(--wp--preset--color--light-blue);
        opacity: 0.8;
    }

    .chevron {
        filter: invert(0.9) sepia(1) grayscale(1) brightness(1.2);
    }
}

/* Desktop menu
========================================================================== */

/* Hamburger icon
========================================================================== */

.hamburger-icon,
.hamburger-icon:before,
.hamburger-icon:after {
    background-color: var(--wp--preset--color--white);
}
/* User toolbar
========================================================================== */

/* Search bar
========================================================================== */

/* Language switcher
========================================================================== */

/* ==========================================================================
Footer
========================================================================== */

.footer-menu .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xxs);
}

.footer-menu .menu-item a {
    text-decoration: none;
    font-size: var(--wp--preset--font-size--s);
}

/* Footer Top */

.qt-section.is-style-footer-top {
    padding-top: var(--wp--preset--spacing--xl);
    margin-bottom: 0;
}

.is-style-footer-top .qt-section__inner.grid-col-3 {
    grid-template-columns: 2fr 1fr 1fr;
    color: var(--wp--preset--color--white);
    gap: var(--wp--preset--spacing--xxl);
}

.is-style-footer-top .is-style-footer-heading,
.is-style-footer-top .footer-heading {
    font-weight: 500;
    margin-bottom: var(--wp--preset--spacing--xxs);
    color: var(--wp--preset--color--light-blue);
    font-size: var(--wp--preset--font-size--xs);
}

/* Footer Bottom */

.qt-section.is-style-footer-bottom {
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m)
        var(--wp--preset--spacing--l);
}

.is-style-footer-bottom .qt-container:last-of-type p {
    text-align: right;
}

/* Mobile specific */

@media screen and (max-width: 670px) {
    .qt-section.is-style-footer-top {
        padding-bottom: var(--wp--preset--spacing--l);
    }

    .is-style-footer-top .qt-section__inner.grid-col-3 {
        grid-template-columns: 1fr;
        gap: var(--wp--style--block-gap);
    }

    .is-style-footer-bottom .qt-section__inner.grid {
        gap: var(--wp--preset--spacing--xs);
    }

    .is-style-footer-bottom .qt-container:last-of-type {
        order: -1;
    }

    .is-style-footer-bottom .qt-container:last-of-type p {
        text-align: left;
    }
}

/* Navigation
========================================================================== */

header .menu .menu-item:not(.mega-menu-item) > :is(a, span) + .sub-menu {
    background-color: var(--wp--preset--color--dark-blue);
}

.mega-menu-item-parent > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Accordion
========================================================================== */

.qt-accordion .qt-section__inner.grid.grid-col-1 {
    row-gap: var(--wp--preset--spacing--m);
}

button[data-accordion="accordion-trigger"] {
    background-color: transparent;
    border: 1px solid transparent;
	color: var(--wp--preset--color--black) !important;
}

.accordion-item {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    border: 1px solid transparent;
}

.accordion-content__inner {
    padding-top: 0;
}

@media screen and (max-width: 670px) {
    .qt-section__inner:has(.qt-accordion) {
        row-gap: var(--wp--preset--spacing--s);
    }
}

/* Section: Hero
========================================================================== */

.is-style-hero .wp-block-cover {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
    height: calc(100vh - var(--wp--custom--header-height--total));
    max-height: 1080px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media screen and (max-width: 670px) {
    .is-style-hero .wp-block-cover {
        height: 65vh;
		padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--m);
    }
}

/* Section: Subhero
========================================================================== */

.is-style-subhero .wp-block-cover {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--wp--preset--spacing--xl);
    justify-content: flex-end;
    min-height: 26rem;
}

.qt-section.is-style-subhero:has(+ .is-style-contact-form) {
    margin-bottom: 0;
}

@media screen and (max-width: 670px) {
    .is-style-subhero .wp-block-cover {
        max-height: 20rem;
    }
}

/* Container with text and image columns
========================================================================== */

.qt-container.is-style-text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: auto;
}

.qt-container.is-style-image-column .wp-block-image {
    height: 100%;
}

@media screen and (max-width: 670px) {
    .qt-container.is-style-text-column {
        padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
    }

    .qt-section:has(.qt-container.is-style-text-column)
        .qt-container.is-style-image-column {
        order: -1;
    }

    .qt-section__inner.grid-col-2:has(
            .qt-container.has-background.is-style-text-column
        ) {
        row-gap: var(--wp--preset--spacing--s);
    }
}

/* Custom Container Styles
========================================================================== */

/* Narrow Content Left */

.qt-container.is-style-narrow-content-left {
    max-width: var(--wp--custom--maxwidth--m);
    margin-left: 0;
}

/* Container with border */

.qt-container.is-style-has-border {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--s);
}

.qt-section__inner:has(.qt-container.is-style-has-border) {
    column-gap: var(--wp--preset--spacing--xs);
}

.qt-container.is-style-has-border figure {
    margin-bottom: var(--wp--preset--spacing--m);
}

/* Clickable container */

.qt-container.is-style-clickable-card {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    position: relative;
}

.qt-container.is-style-clickable-card a {
    position: relative;
    z-index: 1;
}

.qt-container.is-style-clickable-card a > * {
    padding-right: var(--wp--preset--spacing--m);
    padding-left: var(--wp--preset--spacing--m);
}

.qt-container.is-style-clickable-card a > *:first-child {
    padding-top: var(--wp--preset--spacing--xxl);
}

.qt-container.is-style-clickable-card a > *:last-child {
    padding-bottom: var(--wp--preset--spacing--m);
}

.qt-container.is-style-clickable-card:after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_43_27' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='56' height='56'%3E%3Crect width='56' height='56' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_43_27)'%3E%3Cpath d='M37.7417 30.3333H9.33337V25.6666H37.7417L24.675 12.5999L28 9.33325L46.6667 27.9999L28 46.6666L24.675 43.3999L37.7417 30.3333Z' fill='%23FF603A'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    top: var(--wp--preset--spacing--m);
    right: var(--wp--preset--spacing--m);
    z-index: 0;
}

/* Contact details block
========================================================================== */

.contact-details {
    margin-top: var(--wp--preset--spacing--l);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--m);
}

.contact-details__item {
    position: relative;
    display: flex;
    align-items: center;
}

.contact-details__item a {
    margin-left: var(--wp--preset--spacing--l);
    color: var(--wp--preset--color--dark-blue);
}

.contact-details__phone:before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='87' height='87' viewBox='0 0 87 87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='87' height='87' rx='20' fill='%23022E64'/%3E%3Cmask id='mask0_42_10' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='19' y='20' width='48' height='48'%3E%3Crect x='19' y='20' width='48' height='48' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_42_10)'%3E%3Cpath d='M58.9 62C54.7333 62 50.6167 61.0917 46.55 59.275C42.4833 57.4583 38.7833 54.8833 35.45 51.55C32.1167 48.2167 29.5417 44.5167 27.725 40.45C25.9083 36.3833 25 32.2667 25 28.1C25 27.5 25.2 27 25.6 26.6C26 26.2 26.5 26 27.1 26H35.2C35.6667 26 36.0833 26.1583 36.45 26.475C36.8167 26.7917 37.0333 27.1667 37.1 27.6L38.4 34.6C38.4667 35.1333 38.45 35.5833 38.35 35.95C38.25 36.3167 38.0667 36.6333 37.8 36.9L32.95 41.8C33.6167 43.0333 34.4083 44.225 35.325 45.375C36.2417 46.525 37.25 47.6333 38.35 48.7C39.3833 49.7333 40.4667 50.6917 41.6 51.575C42.7333 52.4583 43.9333 53.2667 45.2 54L49.9 49.3C50.2 49 50.5917 48.775 51.075 48.625C51.5583 48.475 52.0333 48.4333 52.5 48.5L59.4 49.9C59.8667 50.0333 60.25 50.275 60.55 50.625C60.85 50.975 61 51.3667 61 51.8V59.9C61 60.5 60.8 61 60.4 61.4C60 61.8 59.5 62 58.9 62ZM31.05 38L34.35 34.7L33.5 30H29.05C29.2167 31.3667 29.45 32.7167 29.75 34.05C30.05 35.3833 30.4833 36.7 31.05 38ZM48.95 55.9C50.25 56.4667 51.575 56.9167 52.925 57.25C54.275 57.5833 55.6333 57.8 57 57.9V53.5L52.3 52.55L48.95 55.9Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.contact-details__email:before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='87' height='87' viewBox='0 0 87 87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='87' height='87' rx='20' fill='%23022E64'/%3E%3Cmask id='mask0_39_103' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='19' y='20' width='48' height='48'%3E%3Crect x='19' y='20' width='48' height='48' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_39_103)'%3E%3Cpath d='M63 64L55 56H27C25.9 56 24.9583 55.6083 24.175 54.825C23.3917 54.0417 23 53.1 23 52V28C23 26.9 23.3917 25.9583 24.175 25.175C24.9583 24.3917 25.9 24 27 24H59C60.1 24 61.0417 24.3917 61.825 25.175C62.6083 25.9583 63 26.9 63 28V64ZM27 52H56.7L59 54.25V28H27V52Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
