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


/** CSS CHANGES IN GUTENBERG **/
/* Space between columns */

.wp-block-columns.is-layout-flex {
 gap: 1em !important;
}



/** CSS FOR READING BAND TRANSITION **/

#brxe-cqrlym {
    width: 100%;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: #424242; /* Firefox fallback */
    transition: background 0.3s ease;
}

#brxe-cqrlym::-webkit-progress-bar {
    background: var(--progress-bg, #424242) !important; /* Webkit background */
    transition: background 0.2s ease;
}

#brxe-cqrlym::-webkit-progress-value {
    background: var(--bricks-color-primary); /* Filled portion for Webkit */
}

#brxe-cqrlym::-moz-progress-bar {
    background: var(--bricks-color-primary); /* Filled portion for Firefox */
}

/** CSS FOR GREY LINE UNDER BREADCRUMB TRANSITION **/

#acc-breadcrumb {
    background: #FFF; /* Set background to white */
    position: sticky; /* Reinforce sticky */
    top: 90px; /* Match Bricks’ offset */
}

/* White 3px background below the grey line */
#acc-breadcrumb::before {
    content: '';
    position: absolute;
    bottom: -3px; /* Position just below the 1px grey line */
    left: 0;
    width: 100%; /* Full width */
    height: 3px; /* 3px deep */
    background: #FFF; /* White */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Grey 1px line for .acc-breadcrumb-line and .acc-breadcrumb-line-no-hero */
.acc-breadcrumb-line::after,
.acc-breadcrumb-line-no-hero::after {
    content: '';
    position: absolute;
    bottom: 0; /* At the bottom */
    left: 0;
    width: 100%; /* Full width */
    height: 1px;
    background: var(--bricks-border-color); /* #dddedf */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show both when .show-line is active */
#acc-breadcrumb.show-line::before,
.acc-breadcrumb-line.show-line::after,
.acc-breadcrumb-line-no-hero.show-line::after {
    opacity: 1;
}

/* UNDERLINE LINKS */

.acc_link_underline_body_text a:not(.bricks-button) {
    position: relative;
    color: var(--e-global-color-primary);
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    padding-bottom: 0;
    background-image: linear-gradient(
        0deg, 
        var(--bricks-color-primary) 16px,
        transparent 16px
    );
    background-position: 0 calc(100% + 6px);
    background-repeat: repeat-x;
    background-size: 0 16px;
    transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.acc_link_underline_body_text a:not(.bricks-button):hover {
    color: #000;
    text-decoration-color: transparent;
    transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: 100% 16px; 
}

/* ICON BODY LINKS */

/* Base link styling with transition */
.acc_link_underline_body_text_link a:not(.bricks-button) {
    position: relative;
    color: var(--e-global-color-primary);
    text-decoration: none !important;
    background-image: none !important;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text span styling with animation - adjusted position */
.acc_link_underline_body_text_link a:not(.bricks-button) .text {
    position: relative;
    display: inline-block;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    padding-bottom: 0;
    background-image: linear-gradient(
        0deg, 
        var(--bricks-color-primary) 12px,
        transparent 12px
    );
    background-position: 0 calc(100% - 2px); /* Adjusted from 6px to 2px to move up */
    background-repeat: repeat-x;
    background-size: 0 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Hover effect on both the link and text span */
.acc_link_underline_body_text_link a:not(.bricks-button):hover {
    color: #000;
}

.acc_link_underline_body_text_link a:not(.bricks-button):hover .text {
    text-decoration-color: transparent;
    background-size: 100% 12px; 
}

/* Explicitly reset any styling on icon elements */
.acc_link_underline_body_text_link a .icon,
.acc_link_underline_body_text_link a .icon i {
    text-decoration: none !important;
    background-image: none !important;
    background-size: 0 !important;
}

/* BREADCRUMB LINKS */

/* Base styles for breadcrumb links */
.brxe-breadcrumbs a {
    position: relative;
    color: var(--e-global-color-primary); /* Default color */
    text-decoration-line: underline !important; /* Default underline */
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    padding-bottom: 0;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Underline effect for text links (excluding the icon) */
.brxe-breadcrumbs a:not(:first-child) {
    background-image: linear-gradient(
        0deg, 
        var(--bricks-color-primary) 16px, /* Matches previous size */
        transparent 16px
    );
    background-position: 0 calc(100% + 6px); /* Matches previous position */
    background-repeat: repeat-x;
    background-size: 0 16px; /* Start with no width */
    transition: background-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Hover effect for text links */
.brxe-breadcrumbs a:not(:first-child):hover {
    color: #000; /* Matches previous hover color */
    text-decoration-color: transparent; /* Removes underline on hover */
    background-size: 100% 16px; /* Full width on hover */
}

/* Style for the home icon link */
.brxe-breadcrumbs a:first-child {
    text-decoration-line: none !important; /* No underline for the icon */
    background-image: none; /* No background effect */
}

/* Icon-specific styles */
.brxe-breadcrumbs a:first-child i.fas.fa-house-chimney {
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect for the icon */
.brxe-breadcrumbs a:first-child:hover i.fas.fa-house-chimney {
    color: var(--e-global-color-primary); /* Icon color on hover */
}

/* Caption and Photo Credit Styling */
.wp-element-caption {
    font-size: 14px;
    color: #333;
}

.wp-element-caption .photo-credit {
    font-style: italic;
    color: #666;
    font-size: 12px;
}

.wp-element-caption .photo-credit::before {
    content: "Credit: ";
    font-style: normal; /* Keeps "Credit: " non-italicized, unlike the photo credit text */
    color: #666; /* Matches the photo credit color */
}