/*
 Theme Name:   Terraforma - Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Custom child theme using Bricks by SeismIQ.
 Author:       SeismIQ
 Author URI:   https://seismiq.us
 Template:     bricks
 Version:      1.0
 Text Domain:  terraforma
*/

/* ===============================
   CSS CUSTOM PROPERTIES
   =============================== */
   :root {
    /* Screen widths */
    --min-screen-width: var(--sotw-min-screen-width);
    --max-screen-width: var(--sotw-max-screen-width);

    /* Primary brand colors */
    --sotw-primary: hsla(233, 51%, 18%, 1);
    --sotw-secondary: hsla(152.96, 64.55%, 43.14%, 1);
    --sotw-tertiary: hsla(216.32, 39.18%, 38.04%, 1);

    /* Brand color scales */
    --primary: var(--sotw-primary);
    --primary-5: var(--sotw-primary-5);
    --primary-10: var(--sotw-primary-10);
    --primary-20: var(--sotw-primary-20);
    --primary-30: var(--sotw-primary-30);
    --primary-40: var(--sotw-primary-40);
    --primary-50: var(--sotw-primary-50);
    --primary-60: var(--sotw-primary-60);
    --primary-70: var(--sotw-primary-70);
    --primary-80: var(--sotw-primary-80);
    --primary-90: var(--sotw-primary-90);
    --primary-d-1: var(--sotw-primary-d-1);
    --primary-d-2: var(--sotw-primary-d-2);
    --primary-d-3: var(--sotw-primary-d-3);
    --primary-d-4: var(--sotw-primary-d-4);
    --primary-l-1: var(--sotw-primary-l-1);
    --primary-l-2: var(--sotw-primary-l-2);
    --primary-l-3: var(--sotw-primary-l-3);
    --primary-l-4: var(--sotw-primary-l-4);

    --secondary: var(--sotw-secondary);
    --secondary-5: var(--sotw-secondary-5);
    --secondary-10: var(--sotw-secondary-10);
    --secondary-20: var(--sotw-secondary-20);
    --secondary-30: var(--sotw-secondary-30);
    --secondary-40: var(--sotw-secondary-40);
    --secondary-50: var(--sotw-secondary-50);
    --secondary-60: var(--sotw-secondary-60);
    --secondary-70: var(--sotw-secondary-70);
    --secondary-80: var(--sotw-secondary-80);
    --secondary-90: var(--sotw-secondary-90);
    --secondary-d-1: var(--sotw-secondary-d-1);
    --secondary-d-2: var(--sotw-secondary-d-2);
    --secondary-d-3: var(--sotw-secondary-d-3);
    --secondary-d-4: var(--sotw-secondary-d-4);
    --secondary-l-1: var(--sotw-secondary-l-1);
    --secondary-l-2: var(--sotw-secondary-l-2);
    --secondary-l-3: var(--sotw-secondary-l-3);
    --secondary-l-4: var(--sotw-secondary-l-4);

    --tertiary: var(--sotw-tertiary);
    --tertiary-5: var(--sotw-tertiary-5);
    --tertiary-10: var(--sotw-tertiary-10);
    --tertiary-20: var(--sotw-tertiary-20);
    --tertiary-30: var(--sotw-tertiary-30);
    --tertiary-40: var(--sotw-tertiary-40);
    --tertiary-50: var(--sotw-tertiary-50);
    --tertiary-60: var(--sotw-tertiary-60);
    --tertiary-70: var(--sotw-tertiary-70);
    --tertiary-80: var(--sotw-tertiary-80);
    --tertiary-90: var(--sotw-tertiary-90);
    --tertiary-d-1: var(--sotw-tertiary-d-1);
    --tertiary-d-2: var(--sotw-tertiary-d-2);
    --tertiary-d-3: var(--sotw-tertiary-d-3);
    --tertiary-d-4: var(--sotw-tertiary-d-4);
    --tertiary-l-1: var(--sotw-tertiary-l-1);
    --tertiary-l-2: var(--sotw-tertiary-l-2);
    --tertiary-l-3: var(--sotw-tertiary-l-3);
    --tertiary-l-4: var(--sotw-tertiary-l-4);

    /* Semantic surfaces and typography */
    --bg-body: var(--sotw-bg-body);
    --bg-surface: var(--sotw-bg-surface);
    --text-body: var(--sotw-text-body);
    --text-title: var(--sotw-text-title);
    --border-primary: var(--sotw-border-primary);
    --shadow-primary: var(--sotw-shadow-primary);

    /* Neutral color scales */
    --light: var(--sotw-light);
    --light-5: var(--sotw-light-5);
    --light-10: var(--sotw-light-10);
    --light-20: var(--sotw-light-20);
    --light-30: var(--sotw-light-30);
    --light-40: var(--sotw-light-40);
    --light-50: var(--sotw-light-50);
    --light-60: var(--sotw-light-60);
    --light-70: var(--sotw-light-70);
    --light-80: var(--sotw-light-80);
    --light-90: var(--sotw-light-90);

    --dark: var(--sotw-dark);
    --dark-5: var(--sotw-dark-5);
    --dark-10: var(--sotw-dark-10);
    --dark-20: var(--sotw-dark-20);
    --dark-30: var(--sotw-dark-30);
    --dark-40: var(--sotw-dark-40);
    --dark-50: var(--sotw-dark-50);
    --dark-60: var(--sotw-dark-60);
    --dark-70: var(--sotw-dark-70);
    --dark-80: var(--sotw-dark-80);
    --dark-90: var(--sotw-dark-90);

    /* State colors */
    --success: var(--sotw-success);
    --success-5: var(--sotw-success-5);
    --success-10: var(--sotw-success-10);
    --success-20: var(--sotw-success-20);
    --success-30: var(--sotw-success-30);
    --success-40: var(--sotw-success-40);
    --success-50: var(--sotw-success-50);
    --success-60: var(--sotw-success-60);
    --success-70: var(--sotw-success-70);
    --success-80: var(--sotw-success-80);
    --success-90: var(--sotw-success-90);

    --error: var(--sotw-error);
    --error-5: var(--sotw-error-5);
    --error-10: var(--sotw-error-10);
    --error-20: var(--sotw-error-20);
    --error-30: var(--sotw-error-30);
    --error-40: var(--sotw-error-40);
    --error-50: var(--sotw-error-50);
    --error-60: var(--sotw-error-60);
    --error-70: var(--sotw-error-70);
    --error-80: var(--sotw-error-80);
    --error-90: var(--sotw-error-90);

    /* Spacing scale */
    --space-4xs: var(--sotw-space-4xs);
    --space-3xs: var(--sotw-space-3xs);
    --space-2xs: var(--sotw-space-2xs);
    --space-xs: var(--sotw-space-xs);
    --space-s: var(--sotw-space-s);
    --space-m: var(--sotw-space-m);
    --space-l: var(--sotw-space-l);
    --space-xl: var(--sotw-space-xl);
    --space-2xl: var(--sotw-space-2xl);
    --space-3xl: var(--sotw-space-3xl);
    --space-4xl: var(--sotw-space-4xl);

    /* Typography scale */
    --text-xs: var(--sotw-text-xs);
    --text-s: var(--sotw-text-s);
    --text-m: var(--sotw-text-m);
    --text-l: var(--sotw-text-l);
    --text-xl: var(--sotw-text-xl);
    --text-2xl: var(--sotw-text-2xl);
    --text-3xl: var(--sotw-text-3xl);
    --text-4xl: var(--sotw-text-4xl);

    /* Contextual size variables for components */
    --hero-title-size: var(--sotw-hero-title-size);
    --post-title-size: var(--sotw-post-title-size);
    --nav-link-size: var(--sotw-nav-link-size);
    --header-space: var(--sotw-header-space);
    --btn-space: var(--sotw-btn-space);
    --card-space: var(--sotw-card-space);
    --footer-space: var(--sotw-footer-space);

    /* Grid helper variables */
    --columns-1: var(--sotw-columns-1);
    --columns-2: var(--sotw-columns-2);
    --columns-3: var(--sotw-columns-3);
    --columns-4: var(--sotw-columns-4);
    --columns-5: var(--sotw-columns-5);
    --columns-6: var(--sotw-columns-6);
    --columns-7: var(--sotw-columns-7);
    --columns-8: var(--sotw-columns-8);

    /* Border radius scale */
    --radius-xs: var(--sotw-radius-xs);
    --radius-s: var(--sotw-radius-s);
    --radius-m: var(--sotw-radius-m);
    --radius-l: var(--sotw-radius-l);
    --radius-xl: var(--sotw-radius-xl);
    --radius-full: var(--sotw-radius-full);

    /* Shadow scale */
    --shadow-xs: var(--sotw-shadow-xs);
    --shadow-s: var(--sotw-shadow-s);
    --shadow-m: var(--sotw-shadow-m);
    --shadow-l: var(--sotw-shadow-l);
    --shadow-xl: var(--sotw-shadow-xl);

    /* Font families */
    --font-family-body: var(--cf-font-family--raleway, 'Raleway');
    --font-family-heading: var(--cf-font-family--raleway, 'Raleway');
}

/* ===============================
   BASE STYLES
   =============================== */
*,
::after,
::before {
    box-sizing: border-box;
}

::after,
::before {
    outline: 0;
}

.inherited-styles-for-exported-element {
    line-height: 1.7;
}

/* ===============================
   LAYOUT COMPONENTS
   =============================== */
#brx-content #brxe-gsffou .repeater-item [data-field-id="mfvqli"] {
    width: 100% !important;
}

#brx-content .brxe-posts {
    overflow: visible;
}

#brx-content .bricks-layout-item .dynamic {
    width: 100%;
}

/* ===============================
   BADGE COMPONENT
   =============================== */
.ba-card-badge {
    position: absolute;
}

#brx-content div.ba-card-badge.ba-card-badge-top-right-desktop {
    background-color: var(--sotw-primary);
    border-radius: 50px;
    color: var(--sotw-secondary);
    font-family: Raleway;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 15px;
}

#brx-content .brxe-ba-card .ba-card-title {
    font-size: var(--at-text--m);
}

/* ===============================
   TYPOGRAPHY & SPACING
   =============================== */
#brx-content .brxe-text,
#brx-content .brxe-text-basic p,
#brx-content .brxe-text p,
#brx-content .brxe-text-basic {
    line-height: 1.4;
}

#brx-content .brxe-text-basic p,
#brx-content .brxe-text p {
    line-height: 1.4;
}

.brxe-text {
    display: block;
    width: 100%;
}

.sotw-text-center {
    width: 100%;
    display: block;
    text-align: center;
}

.has-text-align-center {
    text-align: center;
}

/* Theme spacing rules */
.sotw-guest-quote {
    margin-bottom: 60px;
}

.sotw-heading + .sotw-heading {
    margin-top: 30px;
}

.sotw-heading + .sotw-text {
    margin-top: 15px;
}

.sotw-text + .sotw-heading {
    margin-top: 30px;
}

.sotw-text + .sotw-text {
    margin-top: 15px;
}

#brx-content .sotw-text div + div {
    margin-top: 1.2em;
}

#brx-content .brxe-container.sotw-text {
    padding-left: 30px;
    padding-right: 30px;
}

#brx-content .brxe-container.sotw-heading {
    padding-left: 30px;
    padding-right: 30px;
}

#brx-content .brxe-container + section.brxe-container {
    margin-top: 60px;
}

/* ===============================
   IMAGE & GALLERY STYLES
   =============================== */
#brx-content .sotw-image-grid {
    padding-bottom: 30px;
}

#brx-content .sotw-image-grid + .sotw-image-grid {
    padding-top: 0;
}

#brx-content .sotw-image-grid:last-child,
#brx-content .sotw-image-grid:not(.sotw-image-grid + .sotw-image-grid):not(:has(+ .sotw-image-grid)) {
    padding-bottom: var(--at-section-padding-block);
}

#brx-content .brxe-image-gallery .bricks-layout-item {
    width: 100%;
    display: block;
    max-width: 100%;
    height: auto;
}

#brx-content .brxe-image-gallery .bricks-layout-item figure img {
    width: 100%;
    display: block;
    max-width: 100%;
    height: auto;
}

#brx-content .sotw-aspect-16-9 figure {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    margin: 0;
    position: relative;
}

#brx-content .sotw-aspect-16-9 figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Image captions */
#brx-content figure figcaption.bricks-image-caption {
    background: var(--sotw-bg-surface);
    color: var(--sotw-primary);
    font-size: var(--sotw-text-xs);
    font-style: italic;
    padding: 15px 30px;
    text-align: left;
    width: calc(100% - 30px);
    line-height: 1.2em;
    bottom: calc(1rem + 70px);
    max-width: 90%;
}

/* ===============================
   BLOG & EPISODE STYLES
   =============================== */
#brx-header .sotw-episode-title-block-single {
    margin-bottom: 0;
}

#brx-header .sotw-episode-title-block-single a {
    color: var(--sotw-primary);
}

#brx-content .bricks-post-meta-wrapper {
    justify-content: center;
    margin: 30px 0 100px 0;
}

/* Social sharing buttons */
#brx-content .brxe-post-sharing .facebook,
#brx-content .brxe-post-sharing .twitter,
#brx-content .brxe-post-sharing .linkedin,
#brx-content .brxe-post-sharing .pinterest,
#brx-content .brxe-post-sharing .email {
    background-color: var(--sotw-primary);
}

/* ===============================
   BUTTON STYLES
   =============================== */
#brx-content a.brxe-button {
    text-decoration: none;
}

.mc4wp-form .brxe-button {
    font-size: var(--sotw-text-s);
    padding: var(--sotw-space-xs) var(--sotw-space-xl);
    font-weight: 800;
}

#brx-footer .mc4wp-form .mc4wp-form-fields .brxe-button:hover {
    background: #171c45;
}

/* ===============================
   FORM STYLES
   =============================== */
#brx-content .wpcf7-submit {
    padding: var(--sotw-space-xs) var(--sotw-space-2xl);
    font-family: var(--cf-font-family--raleway);
    font-size: var(--at-text--xs) !important;
}

/* MailChimp form styles */
#brx-footer .mc4wp-form .mc4wp-form-fields {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    margin-right: auto;
}

#brx-footer .mc4wp-form .mc4wp-form-fields .input {
    padding: var(--sotw-space-2xs);
    border-radius: var(--sotw-radius-xl);
    color: var(--sotw-primary);
}

#brx-footer .mc4wp-form h3 {
    color: var(--sotw-primary);
    min-width: 400px;
    margin-right: 100px;
}

/* Form input placeholders */
input::placeholder,
textarea::placeholder,
textarea,
#brx-content textarea.sotw-input {
    color: #999999 !important;
    opacity: 1;
}

/* ===============================
   POWERPRESS AUDIO PLAYER
   =============================== */
#brx-content .powerpress_player .mejs-container,
#brx-header .powerpress_player .mejs-container {
    background-color: transparent !important;
    width: 100% !important;
    border-radius: 0 !important;
    height: 50px !important;
}

#brx-content .powerpress_player .mejs-controls,
#brx-header .powerpress_player .mejs-controls {
    background: none !important;
    height: 50px !important;
}

/* Audio player button controls */
#brx-content .powerpress_player .mejs-volume-button button,
#brx-content .powerpress_player .mejs-button button {
    background: none !important;
    height: 50px !important;
    width: 50px !important;
    margin: 0 !important;
}

#brx-content .powerpress_player .mejs-volume-button button:hover,
#brx-content .powerpress_player .mejs-button button:hover {
    color: #4CAF50 !important;
    z-index: 1000 !important;
}

/* Play/Pause button icons */
#brx-content .powerpress_player .mejs-controls .mejs-button.mejs-play button:before {
    content: "";
    background-image: url('assets/img/play.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 0;
}

#brx-content .powerpress_player .mejs-controls .mejs-button.mejs-pause button:before {
    content: "";
    background-image: url('assets/img/pause.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 0;
}

/* Audio player time display */
#brx-content .powerpress_player .mejs-time {
    color: #cccccc !important;
    font-size: 14px !important;
    padding: 19px 6px 0;
    height: 50px;
}

#brx-content .powerpress_player .mejs-time-rail {
    padding-top: 17px !important;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-total {
    background-color: #c9d3df !important;
    height: 6px !important;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-loaded {
    background-color: #8affd2 !important;
    height: 7px !important;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-current {
    background-color: #171D47 !important;
    height: 7px !important;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-handle {
    border: 6px solid #ffffff !important;
    height: 100%;
    top: -3px;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-float {
    background-color: #171D47 !important;
    border-color: #171D47 !important;
}

#brx-content .powerpress_player .mejs-time-rail .mejs-time-float-current {
    color: #ffffff !important;
}

#brx-content .powerpress_player .mejs-time-rail:hover .mejs-time-total {
    background-color: rgba(23, 29, 71, 0.2) !important;
}

#brx-content .powerpress_player .mejs-time .mejs-currenttime {
    font-size: 14px !important;
    color: #171D47 !important;
    font-weight: 600 !important;
}

#brx-content .powerpress_player .mejs-time span.mejs-duration {
    font-size: 14px !important;
    color: #171D47 !important;
    font-weight: 600 !important;
}

/* Audio player volume slider */
#brx-content .powerpress_player .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background-color: rgba(241, 241, 241, 0.2) !important;
    height: 7px !important;
}

#brx-content .powerpress_player .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background-color: #171D47 !important;
}

#brx-content .powerpress_player .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    background-color: #4CAF50 !important;
    border: 2px solid #ffffff !important;
    display: none !important;
}

/* Hide volume controls */
#brx-content .powerpress_player .mejs-controls .mejs-horizontal-volume-slider,
#brx-content .powerpress_player .mejs-controls .mejs-button.mejs-volume-button.mejs-mute,
#brx-content .powerpress_player .mejs-controls .mejs-button.mejs-volume-button.mejs-unmute {
    display: none !important;
}

/* Buffering animation */
#brx-content .powerpress_player .mejs-time-rail .mejs-time-buffering {
    background: linear-gradient(to right, rgba(76, 175, 80, 0.4) 25%, transparent 25%, transparent 50%, rgba(76, 175, 80, 0.4) 50%, rgba(76, 175, 80, 0.4) 75%, transparent 75%, transparent) !important;
    background-size: 15px 15px !important;
    animation: buffering-animation 2s linear infinite !important;
}

@keyframes buffering-animation {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 30px 0;
    }
}

/* Hide PowerPress elements */
#brx-header .powerpress_player {
    /* margin-bottom: 30px; */
}

#brx-content .powerpress_links.powerpress_subscribe_links,
#brx-header .powerpress_links.powerpress_subscribe_links {
    display: none !important;
}

#playerv2-container {
    display: none !important;
}

/* ===============================
   LAYOUT SECTIONS
   =============================== */
.brxe-section-two-column {
    
}

/* ===============================
   MEDIA QUERIES
   =============================== */
@media only screen and (min-width: 991px) {
    #brx-content [data-columns="1"] figure figcaption.bricks-image-caption {
        width: 100%;
    }
}

@media only screen and (max-width: 991px) {
    #brx-footer .mc4wp-form .mc4wp-form-fields {
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    
    #brx-footer .mc4wp-form .mc4wp-form-fields h3 {
        margin-right: initial;
    }
}

@media only screen and (max-width: 776px) {
    #brx-content .brxe-image-gallery {
        --columns: 1 !important;
    }
}