/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* DEFINE TYPOGRAPHY FRAMEWORK VARIABLES */
:root {
    /* TYPOGRAPHY: TEXT SIZE SCALE */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);

    /* TYPOGRAPHY: HEADING SIZE SCALE */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
}


/* TEXT SIZE UTILITY CLASSES */

/* Do not set 'body' typography in Theme Styles.
REMOVE any previous font size and line height in Theme Styles > Typography > Body */

.text-xl {
    font-size: var(--text-xl);
    line-height: 1.4;
}

.text-l {
    font-size: var(--text-l);
    line-height: 1.5;
}

body, .text-m {
    font-size: var(--text-m);
    line-height: 1.5;
}

.text-s {
    font-size: var(--text-s);
    line-height: 1.6;
}

.text-xs {
    font-size: var(--text-xs);
    line-height: 1.7;
}

/* HEADING SIZE UTILITY CLASSES */

/*  Do not set any headings typography in Theme Styles. 
REMOVE any font sizes or line heights on all heading levels in Theme Styles > Typography. */

.h-title {
    font-size: var(--h-title);
    line-height: 1.05;
}

h1, .h1 {
    font-size: var(--h1);
    line-height: 1.1;
}

h2, .h2 {
    font-size: var(--h2);
    line-height: 1.2;
}

h3, .h3 {
    font-size: var(--h3);
    line-height: 1.3;
}

h4, .h4 {
    font-size: var(--h4);
    line-height: 1.4;
}

h5, .h5 {
    font-size: var(--h5);
    line-height: 1.5;
}

h6, .h6 {
    font-size: var(--h6);
    line-height: 1.6;
}

/* override brickt - h4 to small */
h4 {
    font-size: var(--h4) !important;
}




/* TYPOGRAPHICAL SPACING - IF *NOT* USING FLEX ROW GAP IN EXTRAS LESSON */

/* Reset all margins */
body :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
    margin: 0;
}

/* Responsive bottom margin PARAGRAPHS & LISTS */
body :is(p, ul, ol) {
    margin-block-end: 1em;
}

/* Responsive bottom margin HEADINGS */
body :is(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0.5em;
}

/* Adds responsive top margin on HEADINGS within Rich Text and Posts */
body .brxe-text *+ :is(h1, h2, h3, h4, h5, h6),
body .brxe-post-content:not([data-source="bricks"]) *+ :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 1em;
}

/* Responsive bottom margin LIST ITEMS */
body .brxe-text * li,
body .brxe-post-content:not([data-source="bricks"]) * li {
    margin-block-end: 0.5em;
}

/* Unindents lists within Rich Text and Posts */
body .brxe-text *+ :is(ul, ol),
body .brxe-post-content:not([data-source="bricks"]) *+ :is(ul, ol) {
    padding-left: 16px;
    margin-top: 0;
}

/* Makes H2s within Rich Text and blog posts one size smaller */
.brxe-text h2,
.brxe-post-content h2 {
    font-size: var(--h3);
}

/* DEFINE SPACING FRAMEWORK VARIABLES */
:root {
    /* GAP SCALE */
    /* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --gap-xxxs: clamp(0.25rem, 0.15rem + 0.52vw, 0.56rem);
    --gap-xxs: clamp(0.5rem, 0.38rem + 0.63vw, 0.88rem);
    --gap-xs: clamp(0.75rem, 0.63rem + 0.63vw, 1.13rem);
    --gap-s: clamp(1rem, 0.77rem + 1.15vw, 1.69rem);
    --gap-m: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
    --gap-l: clamp(2rem, 1.54rem + 2.29vw, 3.38rem);
    --gap-xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
    --gap-xxl: clamp(4rem, 3.08rem + 4.58vw, 6.75rem);

    /* SECTION TOP AND BOTTOM PADDING SCALE */
    /* https://utopia.fyi/space/calculator?c=320,24,1.2,1280,40,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --section-xxxs: clamp(0.38rem, 0.08rem + 1.46vw, 1.25rem);
    --section-xxs: clamp(0.75rem, 0.38rem + 1.88vw, 1.88rem);
    --section-xs: clamp(1.13rem, 0.67rem + 2.29vw, 2.5rem);
    --section-s: clamp(1.5rem, 0.75rem + 3.75vw, 3.75rem);
    --section-m: clamp(2.25rem, 1.33rem + 4.58vw, 5rem);
    --section-l: clamp(3rem, 1.5rem + 7.5vw, 7.5rem);
    --section-xl: clamp(4.5rem, 2.67rem + 9.17vw, 10rem);

    /* CONTEXTUAL GAP VARIABLES */
    --grid-gap: var(--gap-m);
    /* Gap between columns */
    --content-gap: var(--gap-s);
    /* Gap between content elements */
    --container-gap: var(--gap-m);
    /* Gap between multiple containers in sections */
}

/* SECTION HEIGHT UTILITY CLASSES */
/* Do NOT set any section styles in Theme Styles. */
/* 'padding-block' is top and bottom. 'padding-inline' is left and right */

.section-xl {
    padding-block: var(--section-xl);
}

.section-l {
    padding-block: var(--section-l);
}

section, .section-m {
    /* Default section padding, all sections */
    padding-block: var(--section-m);
    /* Top and bottom padding */
    padding-inline: var(--gap-m);
    /* Left and right padding */
    row-gap: var(--container-gap);
    /* Vertical gap between containers inside sections */
}

.section-s {
    padding-block: var(--section-s);
}

.section-xs {
    padding-block: var(--section-xs);
}

.section-xxs {
    padding-block: var(--section-xxs);
}

.section-xxxs {
    padding-block: var(--section-xxxs);
}


/* GAP UTILITY CLASSES */
/* Set on a parent element to affect its direct children */

/* Gap between grid columns. Set in addition to a grid class.  */
.grid-gap {
    gap: var(--grid-gap);
}

/* Vertical spacing between content elements. Set on parent of the elements you want the gap between. */
.content-gap {
    gap: var(--content-gap);
}

/* If you want smaller vertical spacing between content elements. As above. */
.content-gap-s {
    gap: calc(var(--content-gap)/1.5);
}

/* Vertical gap between containers inside a section. 
You don't usually have to set this, because we already have a default row gap set for sections, above */
.container-gap {
    gap: var(--container-gap);
}

/* Custom CSS */

.wc-block-components-button {
    background: #b02019;
    color: #fff;
    font-weight: 700;
    border-radius: 1rem;
    border: 1px solid #b02019;
}

.wc-block-components-button:hover {
    background: #fff;
    color: #b02019;
}

#update_all_subscriptions_payment_method_field #update_all_subscriptions_payment_method {
    display: none;
}

#billing_company_field .optional {
    display: none;
}

#billing_company_field label .required {
    display: inline !important;
}

.woocommerce-address-fields p#my_order_number_field {
    opacity: 0;
    height: 0px;
    padding: 0px;
    margin: 0px;
}



/* my-account/edit-address/ */
body.woocommerce-edit-address .woocommerce-Addresses {
    margin-bottom: 20px;
}

body.woocommerce-edit-address #add_button_ref {
    min-height: 40px;
    margin-bottom: 20px !important;
}

body.woocommerce-edit-address .action_buttons_style {
    background: #b02019 !important;
    color: white;
}

body.woocommerce-edit-address .woocommerce-order-details h4 {
    font-size: 20px !important;
}

body.woocommerce-edit-address #debitorennummer {
    pointer-events: none;
    color: #888;
    background-color: #f0f0f0;
}



/* my-account/view-order/xxx */
body.woocommerce-view-order header h2 {
    margin-top: 30px !important;
}

body.woocommerce-view-order section.woocommerce-order-details {
    padding-top: 10px;
}

body.woocommerce-view-order section.woocommerce-customer-details {
    padding-top: 0px;
}

/* checkout - versandadresse verstecken */
.woocommerce-shipping-fields,
#ship-to-different-address {
    display: none !important;
}


/* checkout - debitorennummer verstecken */
#billing_debitorennummer_field {
    display: none !important;
}








/* My Account - Dashboard Boxen */
.ankoe-account-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.ankoe-account-boxes .account-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border: 2px solid #b02019;
    /* Rot */
    text-decoration: none;
    transition: all 0.3s ease;
    background: #fff;
}

.ankoe-account-boxes .account-box span {
    font-size: 34px;
    font-weight: 600;
    color: #333;
}

.ankoe-account-boxes .account-box:hover {
    background: #b02019;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

.ankoe-account-boxes .account-box:hover span {
    color: #fff;
}

p.order-again {
    display: none !important;
}

.subscription_details a.woocommerce-button.button.subscription_renewal_early {
    display: none !important;
}


/* FIX - Checkout  */
form.woocommerce-checkout.bricks-default-checkout {
    grid-template-columns: 56% auto;
    grid-template-rows: auto 1fr;
}

form.woocommerce-checkout.bricks-default-checkout .woocommerce-NoticeGroup-checkout {
    grid-column: 1 / -1;
    grid-row: 1;
}





/* Tablet & Mobile: Boxen untereinander ab 768px */
@media (max-width: 768px) {

    .ankoe-account-boxes {
        padding: 0 28px;
        margin-top: 40px !important;
    }

    .ankoe-account-boxes {
        grid-template-columns: 1fr;
        /* 1 Spalte */
        gap: 15px;
    }

    .account-box {
        min-height: 200px;
    }

    .account-box span {
        font-size: 20px;
    }

    .ankoe-account-boxes {
        padding: 0 28px;
    }

    .ankoe-account-boxes .account-box {
        margin-bottom: 10px;
    }

    p.ankoe-account-hello {
        padding-left: 28px;
    }

}

/* Kleine Mobile Geräte */
@media (max-width: 480px) {
    .account-box {
        min-height: 150px;
    }

    .account-box span {
        font-size: 18px;
    }
}