/*
Theme Name: Hello Child
Template: hello-elementor
*/

/* CI - sidebar categories nav *////////////////////////////

//.elementor-shortcode ul li { font-size: 16px!important;}
/* Target only the specific category navigation inside .elementor-shortcode */
.elementor-shortcode ul {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
    line-height: 1.7em;
}

/* Parent category styles */
.elementor-shortcode ul > li > a {
    font-weight: bold; /* Bold for parent categories */
    font-size: 1rem; /* Adjust size if needed */
    text-decoration: none;
    text-transform: uppercase;
    color: #000; /* Black text */
    display: flex;
    align-items: center; /* Center the arrow and text vertically */
    padding-left: 20px!important; /* Add spacing between list items */
}

/* Remove underline on hover for parent categories */
.elementor-shortcode ul > li > a:hover {
    text-decoration: none;
}

/* Arrow for parent categories */
.elementor-shortcode ul > li > a:before {
    content: '›'!important; /* Arrow symbol */
    margin-right: 10px!important; /* Space between arrow and text */
    font-size: 1.2rem!important; /* Slightly larger arrow */
    font-weight: bold;
    color: #000; /* Black arrow */
    display: inline-block!important; /* Ensure it is always rendered */
    opacity: 1!important; /* Prevent hidden state */
    flex-shrink: 0; /* Prevent arrow from resizing */
    position: relative;
    left: 0px;
}

/* Subcategory styles */
.elementor-shortcode ul ul > li > a {
    font-weight: normal; /* Normal font for subcategories */
    font-size: 0.9rem; /* Slightly smaller size */
    text-decoration: none;
    color: #555; /* Dark gray text */
    display: flex;
    align-items: center; /* Align arrow and text */
}

/* Remove underline on hover for subcategories */
.elementor-shortcode ul ul > li > a:hover {
    text-decoration: none;
}

/* Arrow for subcategories */
.elementor-shortcode ul ul > li > a:before {
    content: '›'; /* Arrow symbol */
    margin-right: 8px; /* Space between arrow and text */
    font-size: 1rem; /* Arrow matches subcategory size */
    font-weight: normal;
    color: #555; /* Match text color */
}

/* Indentation for nested lists */
.elementor-shortcode ul ul {
    margin-left: 20px; /* Indent subcategories */
}

/* END CI - sidebar categories nav */


/* blockquote wouldn't cascade so is in the "site settings CSS" */
/* same with contact form7 settings */


/* Mobile responsiveness: Single-column layout */
@media (max-width: 768px) {
    form.wpcf7-form .wpcf7-inline-wrapper {
        grid-template-columns: 1fr !important; /* Switch to single column */
    }

    form.wpcf7-form .wpcf7-submit {
        grid-column: span 1 !important; /* Adjust for single column */
    }
}

/* deliverables sections of benchmarks pages */
/* Base container styles */
/* Deliverables Section Styles - Updated for Left Alignment */

/* Base container styles */
.deliverables-container {
    display: grid;
    gap: 30px; /* Add spacing between items */
    padding: 20px 0; /* Add vertical spacing */
}

/* Adjust grid layout for different column configurations */
.deliverables-container.one-column {
    grid-template-columns: 1fr; /* Single column */
}

.deliverables-container.two-columns {
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
}

.deliverables-container.three-columns {
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
}

.deliverables-container.four-columns {
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
}

/* Individual deliverable item styles */
.deliverable-item {
    text-align: left; /* Align text to the left */
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove internal padding */
}

/* Icon styling */
.deliverable-icon img {
    max-width: 80px; /* Match image size */
    margin-bottom: 15px; /* Space below the image */
}

/* Title styling */
.deliverable-title {
    font-size: 0.9rem!important; /* Smaller font size */
    font-weight: bold; /* Bold font */
    color: #000; /* Black text */
    margin-bottom: 5px; /* Space below the title */
}

/* Description styling */
.deliverable-description {
    font-size: 0.875rem; /* Slightly smaller font size */
    line-height: 1.5; /* Improve readability */
    color: #555; /* Dark gray text */
    margin: 0; /* No extra margin */
}

/* Add spacing between title and description */
.deliverable-title + .deliverable-description {
    margin-top: 5px; /* Space between title and description */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .deliverables-container.two-columns,
    .deliverables-container.three-columns,
    .deliverables-container.four-columns {
        grid-template-columns: 1fr; /* Switch to single column on smaller screens */
    }
}



/* trying to control the display of columns depending on whether they are populated with data or not this way if there are only two columns of info added they will span 50% each, if there are 4, they will span 25% each KWIM*/
/* Ensure specificity by including parent classes */
.dynamic-columns-container > .BM-column-1,
.dynamic-columns-container > .BM-column-2,
.dynamic-columns-container > .BM-column-3,
.dynamic-columns-container > .BM-column-4 {
    flex: 1 1 calc(100% - 10px); /* Default to full width minus spacing */
    margin: 5px; /* Optional spacing */
}

/* Two visible columns: 50% width */
.dynamic-columns-container > .BM-column-1:nth-of-type(1),
.dynamic-columns-container > .BM-column-2:nth-of-type(2) {
    flex: 1 1 calc(50% - 10px);
}

/* Three visible columns: 33.33% width */
.dynamic-columns-container > .BM-column-1:nth-of-type(1),
.dynamic-columns-container > .BM-column-2:nth-of-type(2),
.dynamic-columns-container > .BM-column-3:nth-of-type(3) {
    flex: 1 1 calc(33.33% - 10px);
}

/* Four visible columns: 25% width */
.dynamic-columns-container > .BM-column-1:nth-of-type(1),
.dynamic-columns-container > .BM-column-2:nth-of-type(2),
.dynamic-columns-container > .BM-column-3:nth-of-type(3),
.dynamic-columns-container > .BM-column-4:nth-of-type(4) {
    flex: 1 1 calc(25% - 10px);
}

/* One column: Full width */
.dynamic-columns-container > .BM-column-1:only-child {
    flex: 1 1 100%;
}

/* form adjustments */
.wpcf7-select {color: #1e1e1e; background-color: #fff; }

/*headings in mobile menu */
.CI-menu-heading a { font-size: 20px!important; border-bottom: 1px solid #666; margin: 15px 0 15px 0; }
.CI-menu-heading a:hover { color: #fff!important;}

/*last modified timestamp on blog posts */
.last-modified {
    font-size: 14px;
    color: #777;
    font-style: italic;
    margin-top: 0px;
}

.elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a {
    display: flex; 
    align-items: var(--icon-vertical-align, top)!important;
}
/* icon position in archives grid loop */
.elementor-icon-list-icon { padding-top: 4px;}