/* Layout and details that theme.json cannot express. Breakpoints follow the old Elementor kit: desktop from 1025px, mobile below 768px. */

/* ---------- Visibility per device (Elementor "hide on desktop / tablet / mobile") ---------- */
@media (min-width: 1025px) {
    .bk-hide-desktop { display: none !important; }
}
@media (max-width: 1024px) {
    .bk-hide-tablet-mobile { display: none !important; }
}

/* ---------- Page canvas ---------- */
.site-main.bk-full > .wp-block-post-content > * { margin-block-start: 0; }
.site-main.bk-full { padding-bottom: 0; }
.wp-block-post-title.entry-title { margin: 32px 0 24px; }

/* Vertical rhythm: the block gap separates paragraphs; a heading that follows other content gets more room above it. */
:where(.wp-block-post-content, .bk-section, .bk-products, .wp-block-column) > * + :is(h2, h3, h4) { margin-block-start: 1.6em; }
:where(.wp-block-post-content, .bk-section, .bk-products, .wp-block-column) > :is(h1, h2, h3, h4) + * { margin-block-start: 16px; }
:where(.bk-section, .bk-products, .wp-block-column) > * + .wp-block-buttons { margin-block-start: 28px; }

/* ---------- Header ---------- */
.bk-header { padding-top: 20px; padding-bottom: 20px; }
.bk-header__logo { margin: 0; max-width: 228px; flex: 0 1 20%; }
.bk-header__logo img { display: block; width: 100%; height: auto; }
.bk-header__nav .wp-block-navigation-item__content { padding: 8px 12px; white-space: nowrap; }
.bk-header__nav .wp-block-navigation-item__content:hover,
.bk-header__nav .wp-block-navigation-item__content:focus,
.bk-header__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--yellow); }
.bk-header__nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--offwhite); }
.bk-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 22px; }
@media (max-width: 1024px) {
    .bk-header__logo { flex-basis: 30%; }
    .bk-header__nav .wp-block-navigation__container { gap: 0; }
    .bk-header__nav .wp-block-navigation-item__content { padding: 8px; }
}
@media (max-width: 767px) {
    .bk-header__logo { flex-basis: 70%; }
}

/* ---------- Footer ---------- */
.bk-footer { min-height: 300px; padding-top: 48px; padding-bottom: 48px; font-size: 16px; }
.bk-footer h5 { font-size: 18px; margin: 0 0 12px; }
.bk-footer p { margin: 0 0 8px; }
.bk-footer__logo { max-width: 200px; margin: 0 0 16px; }
.footer--links a { text-decoration: none; }
.footer--links a:hover { color: var(--wp--preset--color--green); }

/* ---------- Sections ---------- */
.bk-section { padding-top: 64px; padding-bottom: 64px; }
.bk-section > :first-child { margin-block-start: 0; }
.bk-section .wp-block-columns { margin-bottom: 0; }
/* Two plain sections in a row share one gap instead of two paddings. */
.bk-section:not(.has-background) + .bk-section:not(.has-background) { padding-top: 0; }
/* Narrower measure for running text: long reads and centred intros. */
.bk-narrow { --wp--style--global--content-size: 760px; }
@media (max-width: 1024px) {
    .bk-section { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 767px) {
    .bk-section { padding-top: 40px; padding-bottom: 40px; }
}

/* Hero: text on the left, picture on the right on desktop; beige with the tablet picture below the text on smaller screens. */
.bk-hero { min-height: 550px; display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }
.bk-hero > .wp-block-columns { margin: 0; width: 100%; align-items: center; }
.bk-hero h1 { margin-top: 0; }
.bk-hero > .wp-block-columns > .wp-block-column:first-child { padding-block: 56px; }
.bk-hero__image { margin: 0; text-align: right; }
.bk-hero__image img { max-height: 550px; width: auto; }
.bk-hero__mobile-image { margin: 24px 0 0; }
.bk-hero__mobile-image img { width: 100%; height: auto; }
@media (max-width: 1024px) {
    .bk-hero { min-height: 0; padding-top: 48px; }
    .bk-hero > .wp-block-columns > .wp-block-column:first-child { padding-block: 0; }
    .bk-hero > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
    .bk-hero .wp-block-buttons { justify-content: center; }
}

/* Two columns with text and a picture. Elementor stacked them from tablet down; block columns only stack below 782px. */
.bk-split { align-items: center; }
.bk-split .wp-block-image { margin: 0; }
.bk-split .wp-block-image img { max-width: 100%; height: auto; }
.bk-image-right { text-align: right; }
@media (max-width: 1024px) {
    .bk-split { flex-direction: column; align-items: stretch; }
    .bk-split > .wp-block-column { flex-basis: auto !important; }
    .bk-image-right { text-align: center; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .bk-split--text-first-tablet { flex-direction: column-reverse; }
}
@media (max-width: 767px) {
    .bk-split--image-first-mobile { flex-direction: column-reverse; }
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-beige .wp-block-button__link {
    background-color: var(--wp--preset--color--beige);
    color: var(--wp--preset--color--green);
}
.wp-block-button.is-style-beige .wp-block-button__link:hover,
.wp-block-button.is-style-beige .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--green);
    color: var(--wp--preset--color--beige);
}

/* ---------- "Så här enkelt funkar det": four green boxes ---------- */
/* From the Elementor kit's custom CSS: green box with a grey band at the top. */
.gradient--box {
    min-height: 240px;
    padding: 20px 20px 24px;
    color: var(--wp--preset--color--beige);
    background: linear-gradient(to top, var(--wp--preset--color--green) 80%, var(--wp--preset--color--offwhite) 80%);
    font-size: 16px;
}
.gradient--box .wp-block-image { margin: 0 0 16px; }
.bk-boxes .wp-block-columns { gap: 20px; margin-bottom: 20px; }
.bk-boxes .wp-block-columns:last-child { margin-bottom: 0; }
.gradient--box > * + * { margin-block-start: 12px; }
@media (max-width: 1024px) {
    .gradient--box { min-height: 0; }
}

/* ---------- Steps on "Så funkar det" ---------- */
.bk-steps > .wp-block-columns { align-items: center; margin-bottom: 48px; }
.bk-steps > .wp-block-columns:last-child { margin-bottom: 0; }
.bk-steps .bk-steps__row--reverse { flex-direction: row-reverse; }
.bk-step-arrow {
    width: 48px;
    height: 120px;
    margin-left: auto;
    background-color: var(--wp--preset--color--green);
    -webkit-mask: url('../icons/arrow-down.svg') center / contain no-repeat;
    mask: url('../icons/arrow-down.svg') center / contain no-repeat;
}

/* ---------- Contact page ---------- */
.bk-contact { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
/* The section is a flex column, so auto margins would shrink the cards to their content; give them a fixed measure. */
.bk-contact > .wp-block-columns { width: 100%; max-width: 760px; margin-block-start: 40px; }
.bk-contact__card { padding: 40px 24px; text-align: center; color: var(--wp--preset--color--beige); }
.bk-contact__card h2 { margin-block-start: 20px; }
.bk-contact__card h2 { color: var(--wp--preset--color--beige); }
.bk-contact__card p { font-size: clamp(18px, 1.5vw, 22px); }
.bk-contact__card a { color: var(--wp--preset--color--beige); overflow-wrap: anywhere; }
.bk-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--bk-icon) center / contain no-repeat;
    mask: var(--bk-icon) center / contain no-repeat;
}
.bk-icon--phone { --bk-icon: url('../icons/phone.svg'); }
.bk-icon--mail { --bk-icon: url('../icons/mail.svg'); }
@media (max-width: 1024px) {
    .bk-contact { background-color: var(--wp--preset--color--beige) !important; }
}

/* ---------- Product grid on the start page ([products] shortcode) ---------- */
.bk-products { padding-top: 64px; padding-bottom: 64px; }
.bk-products > h2 + * { margin-block-start: 40px; }
.bk-products .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bk-products .woocommerce ul.products::before,
.bk-products .woocommerce ul.products::after { display: none; }
.bk-products .woocommerce ul.products li.product { width: auto; margin: 0; float: none; }
.bk-products ul.products li.product a { text-decoration: none; }
.bk-products ul.products li.product img { width: 100%; height: auto; transition: transform .3s; }
.bk-products ul.products li.product a:hover img { transform: scale(1.05); }
.bk-products ul.products li.product .woocommerce-loop-product__title {
    margin: 16px 0 8px;
    padding: 0;
    color: var(--wp--preset--color--green);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.bk-products ul.products li.product .price { color: var(--wp--preset--color--text); }
.bk-products ul.products li.product .button { display: none; }
@media (max-width: 1024px) {
    .bk-products { padding-top: 48px; padding-bottom: 48px; }
    .bk-products .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .bk-products { padding-top: 40px; padding-bottom: 40px; }
    .bk-products .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .bk-products ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
}
@media (max-width: 480px) {
    /* "Blomsterkantscertifikat" is one long word; at 14px it fits a half-width phone column without breaking. */
    .bk-products ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
}

/* ---------- Product page ---------- */
/* The hover zoom image is wider than the gallery; keep it inside. */
.woocommerce div.product div.images { overflow: hidden; }