/*
Theme Name: Bäckerei Dreimann
Author: Agentur Herzstück GmbH
Author URI: https://www.agentur-herzstueck.de
Description: Ein individuelles Block-Theme mit Full-Site-Editing Features für die Bäckerei Dreimann | Translation-ready | Handgemacht in Bad Salzuflen
Version: 1.0
Text Domain: dreimann
*/
/* --------------------
** FONT FACE
** -------------------- */
@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/faustina-v23-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/faustina-v23-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/faustina-v23-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/faustina-v23-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/faustina-v23-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Faustina';
    font-style: normal;
    font-weight: 800;
    src: url('assets/fonts/faustina-v23-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'FF Prater Script Pro';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/FFPraterScriptProRegular.woff2') format('woff2');
}

.has-script-font-family {
    letter-spacing: 2px;
    font-weight: 400;
}

.has-xx-large-font-size,
.has-x-large-font-size,
.has-large-font-size {
    line-height: 1.3
}

/* --------------------
** GENERAL SETTINGS
** -------------------- */
*,
::after,
::before {
    box-sizing: border-box;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 2px;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
    text-wrap: balance;
}

html,
body {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    font-family: var(--wp--preset--font-family--faustina);
    overflow-x: hidden;
}

a,
button,
.kb-button {
    -webkit-transition: .35s ease;
    -moz-transition: .35s ease;
    -o-transition: .35s ease;
    transition: .35s ease;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------
** SKIP LINK
** -------------------- */
.skip-link.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 999999;
    display: block;
    padding: 1rem 1.5rem;
    background-color: var(--wp--preset--color--marine);
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.skip-link.screen-reader-text:focus {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    clip: auto;
    height: auto;
    width: auto;
    overflow: visible;
    outline: 3px solid var(--wp--preset--color--orange);
    outline-offset: 3px;
}

/* --------------------
** NAVIGATIONS
** -------------------- */

.wp-block-kadence-navigation .current-menu-item,
.wp-block-navigation .current-menu-item {
    font-weight: 700;
}

.kb-off-canvas-inner .menu-container,
.kb-off-canvas-inner .wp-block-kadence-navigation .menu li {
    width: 100%;
}

.kb-off-canvas-inner .wp-block-kadence-navigation .menu {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
}


/* --------------------
** CONTAINERS
** -------------------- */

@media (max-width: calc(1280px + 10vw)) {
    .wp-block-kadence-rowlayout .kt-row-column-wrap.kb-theme-content-width {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0%;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .wp-block-kadence-rowlayout .kt-row-column-wrap.kb-theme-content-width .full-width {
        margin-left: -5vw;
        margin-right: -5vw;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .col-right-full-width.wp-block-kadence-rowlayout .wp-block-kadence-column:nth-child(2) {
        margin-inline-end: -5vw !important;
    }

    .col-left-full-width.wp-block-kadence-rowlayout .wp-block-kadence-column:first-child {
        margin-inline-start: -5vw !important;
    }
}

@media screen and (max-width: 1024px) {
    .kt-inner-column-height-full {
        grid-template-rows: auto auto;
        grid-auto-rows: auto;
    }
}

#colophon {
    position: relative;
}

#colophon::before {
    content: '';
    display: block;
    position: absolute;
    top: -27px;
    left: 0;
    width: 100%;
    height: 27px;
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='26' viewBox='0 0 1920 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1920 0C1905.45 0 1905.45 18 1890.9 18C1876.35 18 1876.35 0 1861.8 0C1847.25 0 1847.25 18 1832.7 18C1818.15 18 1818.15 0 1803.6 0C1789.05 0 1789.05 18 1774.5 18C1759.95 18 1759.95 0 1745.4 0C1730.85 0 1730.85 18 1716.31 18C1701.77 18 1701.76 0 1687.22 0C1672.68 0 1672.68 18 1658.13 18C1643.58 18 1643.58 0 1629.04 0C1614.5 0 1614.49 18 1599.95 18C1585.41 18 1585.4 0 1570.86 0C1556.32 0 1556.31 18 1541.77 18C1527.23 18 1527.22 0 1512.68 0C1498.14 0 1498.13 18 1483.59 18C1469.05 18 1469.04 0 1454.5 0C1439.96 0 1439.95 18 1425.41 18C1410.87 18 1410.86 0 1396.32 0C1381.78 0 1381.78 18 1367.23 18C1352.68 18 1352.69 0 1338.14 0C1323.59 0 1323.59 18 1309.05 18C1294.51 18 1294.5 0 1279.96 0C1265.42 0 1265.42 18 1250.87 18C1236.32 18 1236.33 0 1221.78 0C1207.23 0 1207.24 18 1192.69 18C1178.14 18 1178.15 0 1163.6 0C1149.05 0 1149.06 18 1134.51 18C1119.96 18 1119.96 0 1105.42 0C1090.88 0 1090.87 18 1076.33 18C1061.79 18 1061.78 0 1047.24 0C1032.7 0 1032.69 18 1018.15 18C1003.61 18 1003.6 0 989.06 0C974.52 0 974.51 18 959.97 18C945.43 18 945.42 0 930.88 0C916.34 0 916.33 18 901.79 18C887.25 18 887.24 0 872.7 0C858.16 0 858.15 18 843.61 18C829.07 18 829.07 0 814.52 0C799.97 0 799.97 18 785.43 18C770.89 18 770.89 0 756.34 0C741.79 0 741.8 18 727.25 18C712.7 18 712.7 0 698.16 0C683.62 0 683.62 18 669.07 18C654.52 18 654.52 0 639.98 0C625.44 0 625.44 18 610.89 18C596.34 18 596.34 0 581.8 0C567.26 0 567.26 18 552.71 18C538.16 18 538.16 0 523.62 0C509.08 0 509.08 18 494.53 18C479.98 18 479.96 0 465.41 0C450.86 0 450.87 18 436.32 18C421.77 18 421.78 0 407.24 0C392.7 0 392.7 18 378.15 18C363.6 18 363.6 0 349.06 0C334.52 0 334.51 18 319.97 18C305.43 18 305.42 0 290.88 0C276.34 0 276.34 18 261.79 18C247.24 18 247.25 0 232.7 0C218.15 0 218.16 18 203.61 18C189.06 18 189.07 0 174.53 0C159.99 0 159.99 18 145.44 18C130.89 18 130.89 0 116.35 0C101.81 0 101.81 18 87.26 18C72.71 18 72.72 0 58.17 0C43.62 0 43.63 18 29.08 18C14.53 18 14.54 0 0 0V27H1920V0Z' fill='%23B84023'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1920px 27px;
    pointer-events: none;
    z-index: 2;
}

.image-fill .kt-inside-inner-col {
    height: 100%;
    padding: 0;
}

.image-fill .kt-inside-inner-col figure {
    height: 100%;
    margin: 0;
}

.image-fill .kt-inside-inner-col figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poster-image .poster-headline {
    text-shadow: 0 0 24px rgba(0, 0, 0, .85);
    margin: 0;
    max-width: 100%;
    font-size: var(--wp--preset--font-size--large)!important;
}

.poster-image {
    position: relative;
}

.poster-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  height: 100%;
}

@media (min-width: 768px) {
    .poster-image .poster-headline {
        max-width: 70vw;
        font-size: var(--wp--preset--font-size--xx-large)!important;
    }
}

@media (min-width: 1024px) {
    .poster-image::after {
        display: none;
    }
}

@media (min-width: 1199px) {
    .poster-image .poster-headline {
        max-width: 55vw;  
    }
}

/* --------------------
** TABLES
** -------------------- */

.aligncenter table,
table.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

table tr td p {
    margin: 0 !important;
}

/* --------------------
** MAPS
** -------------------- */

.kt-inner-column-height-full .kb-google-maps-container {
    height: 100%;
    width: 100% !important;
}

@media (max-width: 767px) {
    .kt-inner-column-height-full .kb-google-maps-container {
        height: 320px;
    }
}

/* --------------------
** CAROUSEL
** -------------------- */
.wp-block-splide-carousel .splide__arrows .splide__arrow {
    clip-path: url(#scallop);
    background-color: #fff;
    opacity: 1;
}

.wp-block-splide-carousel .splide__arrows .splide__arrow:focus-visible,
.wp-block-splide-carousel .splide__arrows .splide__arrow:focus {
    outline: 2px solid black;
    outline-offset: -4px;
}

@media (max-width: 1024px) {
    .wp-block-splide-carousel .splide__arrow--prev {
        left: -1rem;
    }
    .wp-block-splide-carousel .splide__arrow--next {
        right: -1rem;
    }
}

/* --------------------
** TEXT / HEADINGS / LISTS
** -------------------- */

#jumbo-headline {
    font-size: clamp(5rem, 7.805vw + 3.146rem, 8rem);
    text-shadow: 0 0 50px rgba(0, 0, 0, .75);
}

#jumbo-headline span:nth-child(2) {
    display: block;
    text-align: right;
}

/* --------------------
** IMAGES / DECORATIONS
** -------------------- */

#badge-jeden-tag {
    max-width: 120px;
    height: auto;
    position: absolute;
    display: block;
    width: 100%;
    right: -8%;
    bottom: 8%;
    margin: 0;
}

@media (max-width: 1024px) {
    #badge-jeden-tag {
        max-width: 80px;
        right: -12%;
        bottom: unset;
        top: 5%;
    }
}

@media (max-width:800px) {
    #badge-jeden-tag {
        position: relative;
        top: unset;
        right: unset;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--wp--preset--spacing--small)
    }
}

.product-grid .product-image-wrapper {
    position: relative;
}

.product-grid .badge-daily {
    max-width: 80px;
    height: auto;
    display: block;
    width: 100%;
    position: absolute;
    right: -5%;
    bottom: 5%;
}

/* --------------------
** TABS – PILL STYLE
** -------------------- */

.kt-tabs-title-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.kt-tabs-title-list .kt-title-item {
    margin: 0;
}

.kt-tabs-title-list .kt-tab-title {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 1.2em;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.35rem 1.5rem !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.kt-tabs-title-list .kt-tab-title-active .kt-tab-title,
.kt-tabs-title-list .kt-title-item .kt-tab-title[aria-selected="true"] {
    background-color: var(--wp--preset--color--beige, #F5EDE3);
    color: var(--wp--preset--color--terracotta, #CA4829);
    border-color: var(--wp--preset--color--beige, #F5EDE3);
}

/* --------------------
** BUTTONS
** -------------------- */

.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:focus {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--terracotta) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-terracotta-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-terracotta-color:focus {
    background-color: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--white) !important;
}