/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://mindlabneuroscience.com
 Description:  Child theme for Hello Elementor — MindLAB Neuroscience
 Author:       Premier Business Systems
 Author URI:   https://mindlabneuroscience.com
 Template:     hello-elementor
 Version:      1.9.5
 Text Domain:  hello-elementor-child
*/

/* All visual styles are handled by Elementor and the CSS Engine
   in Appearance → Customize → Additional CSS.
   This file exists only to register the child theme. */

/* ═══════════════════════════════════════════════════════════════
   Fix: Center success stories carousel arrows on homepage
   2026-03-12 — "View All Success Stories" link was removed but
   arrow positions were never recentered. Override Elementor
   custom positioning variables to center the pair.
   Resolves task registry item F1.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop */
.elementor-element.elementor-element-1e39e96a {
    --arrow-prev-left-position: 44%;
    --arrow-next-right-position: 44%;
}

/* Laptop (1366px) */
@media (max-width: 1366px) {
    .elementor-element.elementor-element-1e39e96a {
        --arrow-prev-left-position: 43%;
        --arrow-next-right-position: 43%;
    }
}

/* Tablet Extra (1200px) */
@media (max-width: 1200px) {
    .elementor-element.elementor-element-1e39e96a {
        --arrow-prev-left-position: 42%;
        --arrow-next-right-position: 42%;
    }
}

/* Tablet (768px) */
@media (max-width: 768px) {
    .elementor-element.elementor-element-1e39e96a {
        --arrow-prev-left-position: 40%;
        --arrow-next-right-position: 40%;
    }
}

/* Mobile (450px) */
@media (max-width: 450px) {
    .elementor-element.elementor-element-1e39e96a {
        --arrow-prev-left-position: 36%;
        --arrow-next-right-position: 36%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Fix: Author byline link hover font-size jump
   2026-03-15 — Global kit (92454) sets a:hover to accent
   typography (19px/1.7em), overriding the post-info widget's
   12px. Lock font-size and line-height to inherit on hover.
   Scoped to single post template 161493 post-info widget.
   ═══════════════════════════════════════════════════════════════ */
.elementor-161493 .elementor-widget-post-info a,
.elementor-161493 .elementor-widget-post-info a:hover,
.elementor-161493 .elementor-widget-post-info a:focus,
.elementor-161493 .elementor-widget-post-info a:visited {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════
   Fix: Hero container title padding — edge-to-edge override
   2026-03-15 — Hero child container (7c604068) has padding
   zeroed out in Elementor at all breakpoints. Both CSS custom
   properties AND direct padding properties set as belt-and-
   suspenders fix (custom properties alone were not applying
   at 1440px viewport — right side collapsed to ~5px).
   Scoped to single post template 161493 hero child container.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop (>1366px) */
.elementor-161493 .elementor-element.elementor-element-7c604068 {
    --padding-left: 40px !important;
    --padding-right: 40px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Laptop + Tablet Landscape (769px–1366px) */
@media (max-width: 1366px) and (min-width: 769px) {
    .elementor-161493 .elementor-element.elementor-element-7c604068 {
        --padding-left: 30px !important;
        --padding-right: 30px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* Tablet Portrait + Mobile (≤768px) */
@media (max-width: 768px) {
    .elementor-161493 .elementor-element.elementor-element-7c604068 {
        --padding-left: 20px !important;
        --padding-right: 20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Top spacing rule REMOVED — Mr. Marc fixed at Elementor template level (set to 0px).
   Previous rounds had margin-top: 0 → -8px → 20px. All now redundant. */

/* ═══════════════════════════════════════════════════════════════
   Feature: Key Takeaways styled box
   2026-03-15 — Wraps Key Takeaways heading + bullet list in a
   visually distinct container using Blue Light Accent (#8BADC4)
   at 25% opacity for a visible light blue tint. Shadow via
   .light-bg class. Applied via .key-takeaways-box class added
   by apply-to-staging.py during markdown→HTML conversion.
   Applies to all articles using template 161493.
   ═══════════════════════════════════════════════════════════════ */
.key-takeaways-box {
    background: rgba(139, 173, 196, 0.25);
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}
.key-takeaways-box h3,
.key-takeaways-box p strong {
    margin-top: 0;
    font-size: 1.25rem;
}
.key-takeaways-box ul {
    margin-bottom: 0;
}

/* Light background shadow — reusable utility class */
.light-bg {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   Feature: Article table striping — blue accent
   2026-03-15 — Unified blue informational color across tables
   and Key Takeaways. Thead matches KT box (25%). Even rows
   get lighter wash (12%). Applies to all article tables.
   ═══════════════════════════════════════════════════════════════ */
.elementor-widget-theme-post-content table thead {
    background: rgba(139, 173, 196, 0.25);
}
.elementor-widget-theme-post-content table tbody tr:nth-child(even) {
    background: rgba(139, 173, 196, 0.12);
}
.elementor-widget-theme-post-content table tbody tr:nth-child(odd) {
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Fix: TOC sidebar — font size, line height, marker alignment
   2026-03-15 — Global kit a:hover sets font-size to accent
   typography (larger), overriding the Legal preset (12px) on
   TOC links. Same root cause as Session 13 author byline fix.
   Also: tighten line-height for sidebar, top-align markers,
   reduce inter-item spacing.
   Scoped to #left-sidebar TOC widget only.
   ═══════════════════════════════════════════════════════════════ */

/* Lock font-size to inherit (resolves to Legal 12px from widget) */
#left-sidebar .elementor-toc__list-item-text,
#left-sidebar .elementor-toc__list-item-text:hover,
#left-sidebar .elementor-toc__list-item-text:focus,
#left-sidebar .elementor-toc__list-item-text:visited {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* Active state — gunmetal. Widget CSS uses .elementor-toc__list-item--active
   but Elementor base applies via .elementor-item-active. Cover both. */
#left-sidebar .elementor-toc__list-item-text.elementor-item-active,
#left-sidebar .elementor-toc__list-item--active > .elementor-toc__list-item-text-wrapper .elementor-toc__list-item-text {
    color: #2C3539 !important;
}

/* Tighter line-height for sidebar readability */
#left-sidebar .elementor-toc__list-item,
#left-sidebar .elementor-toc__list-item-text {
    line-height: 1.3 !important;
}

/* Reduce spacing between TOC items */
#left-sidebar .elementor-toc__list-item {
    margin-bottom: 6px;
}

/* Top-align numbered markers (Elementor uses flex with align-items: center) */
#left-sidebar .elementor-toc__list-item-text-wrapper {
    align-items: flex-start;
}





/* ═══════════════════════════════════════════════════════════════
   Feature: Pull Quote component — .ml-pull-quote
   2026-03-16 — Replicates Elementor saved template "2026
   Template - Pull Quote" (ID 162883) as plain HTML/CSS for
   injection into post_content. Outer wrapper (solid navy),
   inner card (glass-dk), content (icon + quote + attribution).
   Applies inside .elementor-widget-theme-post-content.
   v4 — Transparent wrapper, light-bg shadow on card.
   ═══════════════════════════════════════════════════════════════ */

/* --- Outer wrapper: transparent layout container --- */
.ml-pull-quote {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0;
}

/* --- Inner card: glass-dk + copper left border --- */
.ml-pull-quote__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 30px 30px 20px 30px;
    background: #05141B;
    border-left: 4px solid var(--ml-copper);
    border-top: 1px solid var(--ml-etch-dk);
    border-right: 1px solid var(--ml-etch-dk);
    border-bottom: 1px solid var(--ml-etch-dk);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0px 15px 40px -5px var(--ml-shadow-dk);
    transition: border-color 0.3s ease;
}

.ml-pull-quote__card:hover {
    border-top-color: rgba(255, 255, 255, 0.18);
    border-right-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* --- Quote icon --- */
.ml-pull-quote__icon {
    font-size: 40px;
    color: var(--ml-copper) !important;
    line-height: 1;
    margin-bottom: 8px;
}

/* --- Quote text — !important needed to override post_content
   ancestor color set by Elementor theme-post-content widget --- */
.ml-pull-quote__text {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-style: italic !important;
    font-size: 24px !important;
    line-height: 1.3em !important;
    color: #FFFFFFDE !important;
    margin: 0 0 16px 0;
    padding: 0;
}

/* --- Attribution --- */
.ml-pull-quote__attribution {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1.3em;
    color: var(--ml-copper) !important;
    margin: 0;
    padding: 0;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Laptop (≤1366px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
    .ml-pull-quote {
        padding: 30px;
    }
    .ml-pull-quote__card {
        border-width: 0;
        border-left: 4px solid var(--ml-copper);
    }
    .ml-pull-quote__text {
        font-size: 22px !important;
    }
    .ml-pull-quote__attribution {
        font-size: 17px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Tablet (≤768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ml-pull-quote {
        padding: 20px;
    }
    .ml-pull-quote__card {
        padding: 20px 20px 10px 20px;
    }
    .ml-pull-quote__icon {
        font-size: 32px;
    }
    .ml-pull-quote__text {
        font-size: 20px !important;
    }
    .ml-pull-quote__attribution {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Mobile (≤767px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .ml-pull-quote {
        padding: 16px;
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .ml-pull-quote__card {
        padding: 20px 20px 10px 20px;
    }
    .ml-pull-quote__icon {
        font-size: 28px;
    }
    .ml-pull-quote__text {
        font-size: 18px !important;
    }
    .ml-pull-quote__attribution {
        font-size: 15px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Widescreen (≥1601px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1601px) {
    .ml-pull-quote {
        padding: 48px;
    }
    .ml-pull-quote__card {
        padding: 40px;
        border-radius: 10px;
    }
    .ml-pull-quote__icon {
        font-size: 48px;
    }
}