/*
 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
*/

/* ==========================================================================
   WordPress Core Blocks - Layout Fixes
   ========================================================================== */

/* Fix columns flex direction on frontend */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex {
    flex-direction: row;
}

/* ==========================================================================
   Issue #37: Contact Us — Submit Button Visibility Fix
   ========================================================================== */

/* Ensure the WS Form submit button is visible on the contact page */
.wsf-form button.wsf-button[type="submit"] {
    background-color: var(--primary, #069dae);
    color: var(--white, #fff);
    border: none;
    padding: var(--space-xs, 0.75rem) var(--space-m, 1.5rem);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: var(--text-s, 1rem);
    border-radius: var(--radius-s, 0.375rem);
    cursor: pointer;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    position: relative;
}

.wsf-form button.wsf-button[type="submit"]:hover {
    background-color: var(--primary-dark, #058a99);
}

/* ==========================================================================
   Issue #29: LearnDash Course Topics — Replace Arrows with Bullets
   ========================================================================== */

/* Hide the arrow icon inside the compact expand buttons on lesson rows */
.learndash-wrapper .ld-expand-button.ld-compact .ld-icon {
    visibility: hidden;
}

/* Replace the arrow with a simple bullet dot */
.learndash-wrapper .ld-expand-button.ld-compact .ld-icon::before {
    content: "";
    visibility: visible;
    display: block;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

/* ==========================================================================
   Issue #29: WooCommerce Error Banner — Clean Up Formatting
   ========================================================================== */

/* Style the red error banner during account creation / checkout */
.woocommerce-error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-s, 0.375rem);
    color: #991b1b;
    padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
    margin-bottom: var(--space-m, 1.5rem);
    list-style: none;
    font-family: "Sora", sans-serif;
    font-size: var(--text-s, 1rem);
    line-height: 1.5;
}

.woocommerce-error li {
    margin-bottom: 0.5rem;
    padding: 0;
}

.woocommerce-error li:last-child {
    margin-bottom: 0;
}

/* Remove default WooCommerce error styling overrides */
.woocommerce-error::before {
    display: none;
}

/* Also handle the .woocommerce-notices-wrapper error display */
.woocommerce-notices-wrapper .woocommerce-error {
    padding-left: var(--space-m, 1.5rem);
}

/* ==========================================================================
   LearnDash Course Enrollment — Button Styling
   ========================================================================== */

.ld-enrollment__join {
    display: flex !important;
    align-items: center;
    gap: 1rem !important;
    padding-top: 0;
}

/* Hide course details and "Free" label for logged-out users */
body:not(.logged-in) .ld-details {
    display: none;
}

body:not(.logged-in) .ld-enrollment__pricing-price {
    display: none;
}

.ld-enrollment__join .ld-enrollment__join-button {
    background-color: var(--primary, #069dae);
    color: var(--white, #fff);
    padding: var(--space-xs, 0.75rem) var(--space-m, 1.5rem);
    border-radius: var(--radius-s, 0.375rem);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: var(--text-s, 1rem);
    text-align: center;
    text-decoration: none;
    flex: 1;
    transition: background-color 0.2s ease;
}

.ld-enrollment__join .ld-enrollment__join-button:hover {
    background-color: var(--primary-dark, #058a99);
    color: var(--white, #fff);
}

.ld-enrollment__login {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
}

.ld-enrollment__login .ld-enrollment__login-text {
    flex-shrink: 0;
}

.ld-enrollment__login-link {
    background-color: var(--secondary, #14746F);
    color: var(--white, #fff);
    padding: var(--space-xs, 0.75rem) var(--space-m, 1.5rem);
    border-radius: var(--radius-s, 0.375rem);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: var(--text-s, 1rem);
    text-decoration: none;
    flex: 1;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ld-enrollment__login-link:hover {
    background-color: var(--secondary-dark, #0f5f5b);
    color: var(--white, #fff);
}

/* ==========================================================================
   Single Product — Price + Add to Cart inline
   ========================================================================== */

#brxe-sgjaop .sp-sidebar__price-row .price,
#brxe-sgjaop .sp-sidebar__price-row .woocommerce-Price-amount {
    display: inline !important;
}

.est-atc-inline .sp-sidebar__price-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-s, 1rem);
}

.est-atc-inline .sp-sidebar__price-row .est-atc-clone {
    margin-left: auto;
    white-space: nowrap;
}

/* ==========================================================================
   Header — Fix nav items overlapping logo
   The inner container (#brxe-rltglw) uses a 3-column grid: 1fr auto 1fr.
   At 105ch content-width (~945px), each 1fr column gets ~440px. But the
   4 nav items + 30px gaps need ~498px, so "The Toolbox" overflows into
   the logo by ~10px. Fix: widen the header content area so the nav column
   has enough room.
   ========================================================================== */

header#brx-header {
    --content-width: 1200px !important;
}

/* ==========================================================================
   Issue #130: Hide Share + Gift links on product price card (EN + ES)
   The Share link points to #share and Gift link to #gift; neither has a
   working target and social sharing is already covered by the social icons.
   ========================================================================== */

.product-header__share-link,
.product-header__gift-link {
    display: none !important;
}

/* ==========================================================================
   Issue #127: Safari browser-compatibility notice on course pages
   Rendered via wp-content/mu-plugins/est-browser-notice.php
   ========================================================================== */

.est-browser-notice {
    background: var(--warning);
    font-size: var(--text-s);
    text-align: center;
    text-wrap: balance;
    padding-block: .5rem;
    font-weight: 600;
    color: var(--warning-dark);
}

/* ==========================================================================
   LearnDash enroll-or-login block for logged-out users on course pages
   Stacks the button, "or", and "Log In" link vertically and centered.
   ========================================================================== */

body.single-sfwd-courses section.ld-enrollment__join {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.single-sfwd-courses .ld-enrollment__login {
    display: flex;
    flex-direction: column;
}

body.single-sfwd-courses .ld-enrollment__login a {
    font-size: var(--text-l) !important;
}