/*
 Theme Name:   Kolping
 Theme URI:    
 Description:  Kolping Theme
 Author:       Erich Schweizer-Ferrari
 Author URI:   
 Template:     twentytwentyone
 Version:      0.0.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  kolping
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /*
     * colors
    */
    --kolping--black: #444444; /* rgba(68, 68, 68, 1) */
    --kolping--orange: #F5821F; /* rgba(245, 130, 31, 1) */
    --kolping--white: #FFFFFF; /* rgba(255, 255, 255, 1) */

    --global--color-background: var(--kolping--white) !important;
    --global--color-primary: var(--kolping--black) !important;
    --global--color-secondary: var(--kolping--orange) !important;

    /*
     * fonts
    */
    --kolping--font-family: 'Open Sans', sans-serif;

    --global--font-primary: var(--kolping--font-family) !important;
    --global--font-secondary: var(--kolping--font-family) !important;
    --global--font-size-base: 1.25rem !important;

    --global--font-size-page-title: var(--global--font-size-xxl);
    --global--letter-spacing: normal;
    --global--line-height-body: 1.4;
    --global--line-height-heading: 1.3;
    --global--line-height-page-title: 1.1;

    --heading--font-family: var(--kolping--font-family) !important;
   
    --heading--font-size-h1: 3rem !important;
    --heading--font-size-h2: 2rem !important;
    --heading--font-size-h3: 1.5rem !important;
    --heading--font-weight: 700 !important;


    /*
     * others
    */
    --responsive--aligndefault-width: 90% !important;
    --responsive--alignwide-width: 90% !important;
/*
     --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);

     --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
     --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
     --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));

     --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
     --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
     --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
     --responsive--alignfull-width: 100%;
     --responsive--alignright-margin: var(--global--spacing-horizontal);
     --responsive--alignleft-margin: var(--global--spacing-horizontal);

     --global--font-size-xl: 2.5rem;
     --global--font-size-xxl: 6rem;
     --global--font-size-xxxl: 9rem;
     --heading--font-size-h3: 2rem;
     --heading--font-size-h2: 3rem;

     --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     --global--font-size-base: 1.25rem;
     --global--font-size-xs: 1rem;
     --global--font-size-sm: 1.125rem;
     --global--font-size-md: 1.25rem;
     --global--font-size-lg: 1.5rem;
     --global--font-size-xl: 2.25rem;
     --global--font-size-xxl: 4rem;
     --global--font-size-xxxl: 5rem;
     --global--font-size-page-title: var(--global--font-size-xxl);
     --global--letter-spacing: normal;
     --global--line-height-body: 1.7;
     --global--line-height-heading: 1.3;
     --global--line-height-page-title: 1.1;
     --heading--font-family: var(--global--font-primary);
     --heading--font-size-h6: var(--global--font-size-xs);
     --heading--font-size-h5: var(--global--font-size-sm);
     --heading--font-size-h4: var(--global--font-size-lg);
     --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
     --heading--font-size-h2: var(--global--font-size-xl);
     --heading--font-size-h1: var(--global--font-size-page-title);
     --heading--letter-spacing-h6: 0.05em;
     --heading--letter-spacing-h5: 0.05em;
     --heading--letter-spacing-h4: var(--global--letter-spacing);
     --heading--letter-spacing-h3: var(--global--letter-spacing);
     --heading--letter-spacing-h2: var(--global--letter-spacing);
     --heading--letter-spacing-h1: var(--global--letter-spacing);
     --heading--line-height-h6: var(--global--line-height-heading);
     --heading--line-height-h5: var(--global--line-height-heading);
     --heading--line-height-h4: var(--global--line-height-heading);
     --heading--line-height-h3: var(--global--line-height-heading);
     --heading--line-height-h2: var(--global--line-height-heading);
     --heading--line-height-h1: var(--global--line-height-page-title);
     --heading--font-weight: normal;
     --heading--font-weight-page-title: 300;
     --heading--font-weight-strong: 600;
     --latest-posts--title-font-family: var(--heading--font-family);
     --latest-posts--title-font-size: var(--heading--font-size-h3);
     --latest-posts--description-font-family: var(--global--font-secondary);
     --latest-posts--description-font-size: var(--global--font-size-sm);
     --list--font-family: var(--global--font-secondary);
     --definition-term--font-family: var(--global--font-primary);
     --global--color-black: #000;
     --global--color-dark-gray: #28303d;
     --global--color-gray: #39414d;
     --global--color-light-gray: #f0f0f0;
     --global--color-green: #d1e4dd;
     --global--color-blue: #d1dfe4;
     --global--color-purple: #d1d1e4;
     --global--color-red: #e4d1d1;
     --global--color-orange: #e4dad1;
     --global--color-yellow: #eeeadd;
     --global--color-white: #fff;
     --global--color-white-50: rgba(255, 255, 255, 0.5);
     --global--color-white-90: rgba(255, 255, 255, 0.9);
     --global--color-primary: var(--global--color-dark-gray);
     --global--color-secondary: var(--global--color-gray);
     --global--color-primary-hover: var(--global--color-primary);
     --global--color-background: var(--global--color-green);
     --global--color-border: var(--global--color-primary);
     --global--spacing-unit: 20px;
     --global--spacing-measure: unset;
     --global--spacing-horizontal: 25px;
     --global--spacing-vertical: 30px;
     --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
     --form--font-family: var(--global--font-secondary);
     --form--font-size: var(--global--font-size-sm);
     --form--line-height: var(--global--line-height-body);
     --form--color-text: var(--global--color-dark-gray);
     --form--color-ranged: var(--global--color-secondary);
     --form--label-weight: 500;
     --form--border-color: var(--global--color-secondary);
     --form--border-width: 3px;
     --form--border-radius: 0;
     --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
     --cover--height: calc(15 * var(--global--spacing-vertical));
     --cover--color-foreground: var(--global--color-white);
     --cover--color-background: var(--global--color-black);
     --button--color-text: var(--global--color-background);
     --button--color-text-hover: var(--global--color-secondary);
     --button--color-text-active: var(--global--color-secondary);
     --button--color-background: var(--global--color-secondary);
     --button--color-background-active: var(--global--color-background);
     --button--font-family: var(--global--font-primary);
     --button--font-size: var(--global--font-size-base);
     --button--font-weight: 500;
     --button--line-height: 1.5;
     --button--border-width: 3px;
     --button--border-radius: 0;
     --button--padding-vertical: 15px;
     --button--padding-horizontal: calc(2 * var(--button--padding-vertical));
     --entry-header--color: var(--global--color-primary);
     --entry-header--color-link: currentColor;
     --entry-header--color-hover: var(--global--color-primary-hover);
     --entry-header--color-focus: var(--global--color-secondary);
     --entry-header--font-size: var(--heading--font-size-h2);
     --entry-content--font-family: var(--global--font-secondary);
     --entry-author-bio--font-family: var(--heading--font-family);
     --entry-author-bio--font-size: var(--heading--font-size-h4);
     --branding--color-text: var(--global--color-primary);
     --branding--color-link: var(--global--color-primary);
     --branding--color-link-hover: var(--global--color-secondary);
     --branding--title--font-family: var(--global--font-primary);
     --branding--title--font-size: var(--global--font-size-lg);
     --branding--title--font-size-mobile: var(--heading--font-size-h4);
     --branding--title--font-weight: normal;
     --branding--title--text-transform: uppercase;
     --branding--description--font-family: var(--global--font-secondary);
     --branding--description--font-size: var(--global--font-size-sm);
     --branding--description--font-family: var(--global--font-secondary);
     --branding--logo--max-width: 300px;
     --branding--logo--max-height: 100px;
     --branding--logo--max-width-mobile: 96px;
     --branding--logo--max-height-mobile: 96px;
     --primary-nav--font-family: var(--global--font-secondary);
     --primary-nav--font-family-mobile: var(--global--font-primary);
     --primary-nav--font-size: var(--global--font-size-md);
     --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
     --primary-nav--font-size-mobile: var(--global--font-size-sm);
     --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
     --primary-nav--font-size-button: var(--global--font-size-xs);
     --primary-nav--font-style: normal;
     --primary-nav--font-style-sub-menu-mobile: normal;
     --primary-nav--font-weight: normal;
     --primary-nav--font-weight-button: 500;
     --primary-nav--color-link: var(--global--color-primary);
     --primary-nav--color-link-hover: var(--global--color-primary-hover);
     --primary-nav--color-text: var(--global--color-primary);
     --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     --primary-nav--border-color: var(--global--color-primary);
     --pagination--color-text: var(--global--color-primary);
     --pagination--color-link-hover: var(--global--color-primary-hover);
     --pagination--font-family: var(--global--font-secondary);
     --pagination--font-size: var(--global--font-size-lg);
     --pagination--font-weight: normal;
     --pagination--font-weight-strong: 600;
     --footer--color-text: var(--global--color-primary);
     --footer--color-link: var(--global--color-primary);
     --footer--color-link-hover: var(--global--color-primary-hover);
     --footer--font-family: var(--global--font-primary);
     --footer--font-size: var(--global--font-size-sm);
     --pullquote--font-family: var(--global--font-primary);
     --pullquote--font-size: var(--heading--font-size-h3);
     --pullquote--font-style: normal;
     --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
     --pullquote--line-height: var(--global--line-height-heading);
     --pullquote--border-width: 3px;
     --pullquote--border-color: var(--global--color-primary);
     --pullquote--color-foreground: var(--global--color-primary);
     --pullquote--color-background: var(--global--color-background);
     --quote--font-family: var(--global--font-secondary);
     --quote--font-size: var(--global--font-size-md);
     --quote--font-size-large: var(--global--font-size-xl);
     --quote--font-style: normal;
     --quote--font-weight: 700;
     --quote--font-weight-strong: bolder;
     --quote--font-style-large: normal;
     --quote--font-style-cite: normal;
     --quote--line-height: var(--global--line-height-body);
     --quote--line-height-large: 1.35;
     --separator--border-color: var(--global--color-border);
     --separator--height: 1px;
     --table--stripes-border-color: var(--global--color-light-gray);
     --table--stripes-background-color: var(--global--color-light-gray);
     --table--has-background-text-color: var(--global--color-dark-gray);
     --widget--line-height-list: 1.9;
     --widget--line-height-title: 1.4;
     --widget--font-weight-title: 700;
     --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
     --global--admin-bar--height: 0px;
     --kolping--black: #444444;
     --kolping--orange: #FF8C00;
     --kolping--white: #FFFFFF;
     --kolping--font-family: 'Open Sans', sans-serif;
     --heading--font-family: var(--kolping--font-family) !important;
     --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px) !important;
     --wp--preset--font-size--normal: 16px;
     --wp--preset--font-size--huge: 42px;
*/

}

html {
    height: 100%;
    overflow-y: scroll;
}

body {
    color: var(--kolping--black);
    height: 100%;
}

a {
    font-weight: normal !important;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.entry-content .wp-block-columns.shortcode .wp-block-column a, .entry-content .wp-block-columns.shortcode .wp-block-column a:hover {
    color: var(--kolping--black) !important;
    font-weight: normal;
    text-decoration: none;
}
header#masthead {
    padding-top: 0 !important;
}

.entry-header.alignwide {
    background-color: var(--kolping--orange);
    max-width: 100% !important;
}
.entry-header.alignwide .entry-title, .entry-header.alignwide .entry-excerpt {
    max-width: var(--responsive--aligndefault-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.singular .entry-header {
    border-bottom: none !important;
    color: var(--kolping--white);
    padding-top: 2rem;
}
.widget-area {
    grid-template-columns: repeat(4, 1fr);
}
.widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width {
    max-width: var(--responsive--aligndefault-width) !important;
}

.site-header {
    display: block !important;
}

.cat-links a, .cat-links a:hover, .entry-content a, .entry-content a:hover {
    color: var(--kolping--orange) !important;
    font-weight: 700;
}

h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
}
.singular .entry-header h1 {
    color: var(--kolping--white);
}

h2 {
    color: var(--kolping--black);
    /* margin-top: calc(var(--global--spacing-vertical) * 1.5) !important; */
}
h3 {
    padding-bottom: 1rem !important;
}
.entry-content h3 {
    padding-bottom: 0 !important;
    padding-top: var(--global--spacing-vertical);
} 
.carousel-item h2, .carousel-item p {
    color: var(--kolping--white);
}
.carousel-item p {
    font-weight: normal;
    margin-top: 15px;
}

.primary-navigation > div > .menu-wrapper {
    justify-content: right !important;
}

.current_page_item a {
    background-color: var(--kolping--orange);
    color: var(--kolping--white) !important;
}
.menu-button-container #primary-mobile-menu .dropdown-icon {
    margin-top: -0.5rem;
}

.entry-content, .entry-summary {
    font-weight: 400 !important;
}

.wp-block-image {
    margin-top: 0.7rem !important;
    position: relative;
    text-align: left !important;
}
.image-container {
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16 : 9 */
    padding-top: 0px;
    position: relative;
}
.image-container > span {
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.kolping-documents {
    max-width: var(--responsive--aligndefault-width);
}
.kolping-documents img {
    border: 1px solid rgba(245, 130, 31, 0.5);
    margin-bottom: 0 !important;
}
.kolping-documents .kolping-caption {
    margin-top: 0 !important;
}

.wp-block-columns.documents .wp-block-column {
    padding: 0 1rem 0 1rem;
}
.wp-block-columns.documents .wp-block-column:first-child {
    padding-left: 0;
}
.wp-block-columns.documents .wp-block-column:last-child {
    padding-right: 0;
}

.kolping-image.not-carousel {
    position: relative;
}
.kolping-image-caption, figcaption {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    display: block;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: 56%;
    padding: 0.4rem !important;
    overflow: auto;
    position: absolute;
    right: 1.5rem !important;
    top: 0 !important;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: right top;
    white-space: nowrap;
    z-index: 1000;
}
.kolping-image-caption a {
    color: var(--kolping--orange) !important;
}

.bg-color-kolping-orange {
    background-color: var(--kolping--orange);
    color: var(--kolping--white);
}

.site .button, .site .wp-block-button, button, input[type="submit"], input[type="reset"], .wp-block-search .wp-block-search__button, .wp-block-button .wp-block-button__link, .wp-block-file a.wp-block-file__button {
    background-color: var(--kolping--white) !important;
    color: var(--global--color-secondary) !important;
}
.site .button:not(:hover):not(:active):not(.has-background), button:not(:hover):not(:active):not(.has-background), input[type="submit"]:not(:hover):not(:active):not(.has-background), input[type="reset"]:not(:hover):not(:active):not(.has-background), .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
    background-color: var(--global--color-secondary) !important;
    color: var(--kolping--white) !important;
}

button.sub-menu-toggle {
    display: none !important;
}

.carousel-indicators {
    display: none;
}

.carousel-item .container {
    max-width: none !important;
    padding: 0;
    width: 100%;
}

.carousel-item .kolping-text {
    padding-bottom: 31px;
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
    padding-top: 31px;
    max-width: 100%;
}

.kolping-footer-widget-area {
    background-color: #000000;
}
.kolping-footer-widget-area p {
    margin: 1rem 0 1rem 0 !important;
}
.kolping-footer-widget-area p a, .kolping-footer-widget-area h2, .kolping-footer-widget-area p {
    color: white !important;
}

::placeholder {
    color: #999999;
    font-style: italic !important;
}

/**
 * OpenStreetMap
 */
/* responsive OpenStreetMap */
.kolping-osm-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0px;
    position: relative;
}
.kolping-osm-container > iframe,
.kolping-osm-container > object,
.kolping-osm-container > embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe body {
    margin: 0 !important;
}

.liste-kolpingsfamilien {
    column-count: 2;
    column-gap: 1rem;
}

#kolping-spenden-button {
    left: calc(50% - 5rem);
    position: absolute;
    rotate: -19deg;
    margin-top: -3rem;
    width: 10rem;
}
#kolping-search-form {
    margin-left: auto;
    text-align: right;
    width: 27rem;
}
#kolping-search-form .search-field, #kolping-search-form .search-submit {
    font-size: 1rem;
    padding: 0 0.5rem 0 0.5rem;
}
/**
 * Contact Form 7
 */

.wpcf7-form table td, .wpcf7-form table th, .wpcf7-form .wp-block-table td, .wpcf7-form .wp-block-table th {
    border-color: #E8E8E8;
}

@media only screen and (max-width: 481px) {
    .primary-navigation .sub-menu {
        border: none !important;
    }
    #kolping-search-form {
        margin-top: 3rem;
    }
}

@media only screen and (min-width: 482px) {
    header#masthead {
        padding-bottom: 0 !important;
    }
    main#main {
        padding-top: 0 !important;
    }
    aside {
        margin-top: 0!important;
    }
    .carousel-indicators {
        display: flex;
    }
    #kolping-spenden-button {
        left: auto;
        margin-top: 0;
        right: 1rem;
        top: 1rem;
    }
}

@media only screen and (min-width: 1024px) {
    .liste-kolpingsfamilien {
        column-count: 3;
        column-gap: 1rem;
    }
    .widget-area {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    #kolping-spenden-button {
        left: calc(75% - 5rem);
        right: auto;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px) !important;
    }
    .liste-kolpingsfamilien {
        column-count: 4;
        column-gap: 1rem;
    }
}

@media only screen and (min-width: 1500px) {
    :root {
        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1500px) !important;
    }
}

/*
* Bootstrap 5
*/

@media only screen and (min-width: 576px) {
}

@media only screen and (min-width: 768px) {
    .carousel-item .kolping-text {
        margin-left: auto;
        max-width: calc(var(--responsive--aligndefault-width) / 2);
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (min-width: 1400px) {
}