/*
Theme Name: Astra Child
Template: astra
*/

/* 1. BRAND VARIABLES */
:root {
    --brand-navy: #29446F;
    --brand-baltic: #3B638E;
    --brand-clay: #A95044;
    --brand-tangerine: #F08043;
    --brand-gold: #F8DB47;
    --brand-gold-dark: #C4A70E;
    --brand-carbon: #191D0D;
    --brand-white: #FFFFFF;
    --brand-shadow: #21202D;
    --brand-turquoise: #00C7C7;
    --brand-turquoise-dark: #009e9e;

    /* Astra Palette Overwrites */
    --ast-global-color-0: var(--brand-navy);
    --ast-global-color-1: var(--brand-baltic);
    --ast-global-color-2: var(--brand-carbon); 
    --ast-global-color-3: var(--brand-carbon); 
}

/* 2. GLOBAL RESET & TYPOGRAPHY */
body, p, span, li, h1, h2, h3, h4, h5, h6 {
    color: var(--brand-carbon);
}

.editor-styles-wrapper .wp-block.is-selected,
.editor-styles-wrapper .wp-block.is-focused {
    filter: none !important;
    outline: none !important;
}

/* 3. BASE BUTTON DESIGN */
.ast-button, 
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    min-width: 240px;          
    padding: 18px 30px !important; 
    background-color: var(--brand-navy) !important;
    color: var(--brand-white) !important;
    transition: all 0.2s ease-in-out !important;
    border: none !important;
}

/* 4. BLOCK STYLE VARIANTS */

/* PILL */
.is-style-fill .wp-block-button__link {
    border-radius: 500px !important;
    background-color: var(--brand-tangerine) !important;
    color: var(--brand-white) !important;
}

/* OUTLINE PILL */
.is-style-outline .wp-block-button__link {
    border-radius: 500px !important;
    background-color: transparent !important;
    border: 2px solid var(--brand-tangerine) !important;
    color: var(--brand-tangerine) !important;
}

/* 3D TURQUOISE */
.is-style-3d .wp-block-button__link {
    background-color: var(--brand-turquoise) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 5px 0 0 var(--brand-turquoise-dark) !important;
}
.is-style-3d .wp-block-button__link:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 var(--brand-turquoise-dark) !important;
}

/* YELLOW CARD SHADOW */
.is-style-card-yellow .wp-block-button__link {
    background-color: var(--brand-gold) !important;
    color: var(--brand-carbon) !important;
    box-shadow: 0 8px 0 0 var(--brand-gold-dark) !important;
}

/* DEEP SHADOW CLAY */
.is-style-shadow .wp-block-button__link {
    background-color: var(--brand-clay) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 10px 30px rgba(169, 80, 68, 0.3) !important;
}

/* 5. REFINED LIGHT CARD STYLE */
.wp-block-button.is-style-light-card {
    display: inline-block !important;
    width: auto !important;
    margin: 5px !important; 
    vertical-align: middle !important;
}

.is-style-light-card .wp-block-button__link,
.editor-styles-wrapper .is-style-light-card .wp-block-button__link {
    display: inline-flex !important;
    width: 280px !important; 
    height: 180px !important;
    padding: 0 !important; 
    background-color: var(--brand-white) !important;
    color: var(--brand-carbon) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.is-style-light-card .wp-block-button__link:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

/* 6. SEPARATORS (THE SMUSH FIX) */
.wp-block-separator.is-style-tribal,
.wp-block-separator.is-style-arrow-2 {
    border: none !important;
    background: none !important;
    height: auto !important;
    min-height: 80px !important; 
    width: 100% !important;
    max-width: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.wp-block-separator.is-style-tribal::before,
.wp-block-separator.is-style-arrow-2::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 12 / 1;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Tribal Pattern */
.wp-block-separator.is-style-tribal::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,50 L150,50 L180,10 L210,90 L240,50 L960,50 L990,10 L1020,90 L1050,50 L1200,50' stroke='black' stroke-width='6' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,50 L150,50 L180,10 L210,90 L240,50 L960,50 L990,10 L1020,90 L1050,50 L1200,50' stroke='black' stroke-width='6' fill='none'/%3E%3C/svg%3E");
}

/* Geometric but with Style: The Double-Stroke Arrow */
/* Symmetrical Double-Ended Architectural Arrow */
.wp-block-separator.is-style-arrow-2::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M80,40 H1120 V10 L1200,50 L1120,90 V60 H80 V90 L0,50 L80,10 Z M100,45 V30 L60,50 L100,70 V55 H1100 V70 L1140,50 L1100,30 V45 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M80,40 H1120 V10 L1200,50 L1120,90 V60 H80 V90 L0,50 L80,10 Z M100,45 V30 L60,50 L100,70 V55 H1100 V70 L1140,50 L1100,30 V45 Z' fill='black'/%3E%3C/svg%3E");
}