/* MDH Custom Component Utilities and Dynamic Atmosphere */
:root {
    --bg-primary: #DCE7E0;
    --surface-card: rgba(242, 248, 244, 0.90);
    --surface-well: rgba(202, 220, 209, 0.55);
    --accent-primary: #5B8C7A;
    --mesh-1: rgba(184, 216, 200, 0.75);
    --mesh-2: rgba(134, 157, 138, 0.45);
    --mesh-3: rgba(220, 236, 227, 0.80);
    --mesh-4: rgba(210, 230, 220, 0.65);
}

.ambient-mesh {
    background: 
        radial-gradient(circle at 12% 18%, var(--mesh-1) 0%, transparent 42%),
        radial-gradient(circle at 86% 12%, var(--mesh-2) 0%, transparent 45%),
        radial-gradient(circle at 78% 82%, var(--mesh-3) 0%, transparent 48%),
        radial-gradient(circle at 22% 75%, var(--mesh-4) 0%, transparent 40%),
        var(--bg-primary);
    background-attachment: fixed;
    transition: background 0.5s ease;
}

/* Page View Entrance Animation */
.spa-view-enter {
    animation: viewEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes viewEnter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* WordPress Comments Styling */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.comment-list .children {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1rem;
    border-left: 2px solid rgba(91, 140, 122, 0.2);
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   FluentComments Tactile Styling & Parity with MDH Master Design
   ========================================================================== */

/* Outer Card Container */
.fluent-comments-block {
    background: var(--surface-card, rgba(242, 248, 244, 0.90)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 14px 32px -8px rgba(42, 50, 46, 0.06), 0 4px 12px -2px rgba(42, 50, 46, 0.03), inset 0 2px 0 0 rgba(255, 255, 255, 0.9) !important;
    border-radius: 28px !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .fluent-comments-block {
        padding: 1.25rem !important;
        border-radius: 22px !important;
    }
}

/* Re-order elements: Title (1) -> Comment List (2) -> Load More (3) -> Form (4) */
.fluent_comments_wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Header Title & wp_list_comments() Badge */
.flc_comments-title {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #19283a !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(42, 50, 46, 0.06) !important;
    letter-spacing: -0.01em !important;
}

.flc_comments-title::after {
    content: "wp_list_comments()";
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #7d8e82 !important;
    opacity: 0.75 !important;
    letter-spacing: normal !important;
}

/* Comment List */
.flc_comment-list {
    order: 2 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flc_comment-list .flc_comment {
    list-style: none !important;
    display: block !important;
    margin-bottom: 1rem !important;
}

/* Tactile Recessed Well Comment Card */
.flc_comment-list .flc_comment > article.flc_body {
    background: var(--surface-well, rgba(202, 220, 209, 0.55)) !important;
    box-shadow: inset 0 2px 5px rgba(42, 50, 46, 0.04), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(42, 50, 46, 0.04) !important;
    padding: 1.25rem 1.5rem !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    column-gap: 0.875rem !important;
    row-gap: 0.65rem !important;
    align-items: start !important;
    transition: background 0.35s ease !important;
}

@media (max-width: 640px) {
    .flc_comment-list .flc_comment > article.flc_body {
        padding: 1rem 1.15rem !important;
        border-radius: 18px !important;
    }
}

/* Avatar Styling */
.flc_body .flc_avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

.flc_body .flc_comment_author,
.flc_body .flc_comment_author img,
.flc_body .flc_avatar img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    object-fit: cover !important;
    display: block !important;
}

/* Flatten wrappers inside flc_body to permit CSS Grid layout */
.flc_body .flc_comment__details {
    display: contents !important;
}

.flc_body .crayons-card {
    display: contents !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Comment Header: Author Name & Time */
.flc_body .comment__header {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 38px !important;
    line-height: 1.25 !important;
}

.flc_body .comment__header .fn {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #19283a !important;
}

.flc_body .comment__header .fn a {
    color: inherit !important;
    text-decoration: none !important;
}

.flc_body .comment__header .flc_dot {
    display: none !important;
}

.flc_body .comment__header time {
    font-size: 0.75rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    color: #7d8e82 !important;
    margin-top: 0.15rem !important;
}

/* Comment Text */
.flc_body .flc_comment-content {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 0.875rem !important;
    color: #334139 !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flc_body .flc_comment-content p {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    color: inherit !important;
}

.flc_body .flc_comment-content p:last-child {
    margin-bottom: 0 !important;
}

/* Reply Link */
.flc_body .comment_footer {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 0.25rem !important;
}

.flc_body .comment_footer a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #4c7760 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(42, 50, 46, 0.08) !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.flc_body .comment_footer a:hover {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    color: #2d4a3b !important;
}

/* Child / Nested Comment Indentation */
.flc_comment-list.flc_child_comments {
    margin-left: 2rem !important;
    margin-top: 0.75rem !important;
    padding-left: 1rem !important;
    border-left: 2px solid rgba(91, 140, 122, 0.25) !important;
}

@media (max-width: 640px) {
    .flc_comment-list.flc_child_comments {
        margin-left: 0.75rem !important;
        padding-left: 0.5rem !important;
    }
}

/* Comment Form Container */
.fluent_comments_form,
.flc_respond {
    order: 4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.flc_respond::before {
    content: "Leave a Reflection";
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #19283a;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

/* Hide "Leave a Reflection" title on nested child reply forms */
.flc_child_form,
.flc_child_form .fluent_comments_form,
.flc_child_form .flc_respond {
    order: unset !important;
    margin-top: 0.75rem !important;
}

.flc_child_form .flc_respond::before,
.flc_child_form .fluent_comments_form::before {
    display: none !important;
}

/* Hide avatar placeholder beside textarea so textarea is full-width */
.flc_author_placeholder {
    display: none !important;
}

.flc_comment_wrap {
    display: block !important;
    width: 100% !important;
}

.flc_comment_form {
    width: 100% !important;
}

.flc_form_field.flc_textarea,
.flc_form_field.flc_textarea .flc_comment {
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* Tactile Well Textarea */
.flc_content_textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--surface-well, rgba(202, 220, 209, 0.55)) !important;
    box-shadow: inset 0 2px 5px rgba(42, 50, 46, 0.04), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(42, 50, 46, 0.04) !important;
    border-radius: 20px !important;
    padding: 1.15rem 1.25rem !important;
    font-size: 0.875rem !important;
    color: #19283a !important;
    min-height: 110px !important;
    outline: none !important;
    resize: vertical !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}

.flc_content_textarea:focus {
    border-color: rgba(91, 140, 122, 0.4) !important;
    box-shadow: inset 0 2px 5px rgba(42, 50, 46, 0.04), 0 0 0 3px rgba(91, 140, 122, 0.15) !important;
}

.flc_content_textarea::placeholder {
    color: #7d8e82 !important;
    font-size: 0.875rem !important;
}

/* Guest Author & Email Fields */
.flc_row.flc_person_form_fields {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

@media (max-width: 640px) {
    .flc_row.flc_person_form_fields {
        flex-direction: column !important;
    }
}

.flc_row.flc_person_form_fields .flc_form_field {
    flex: 1 !important;
}

.flc_row.flc_person_form_fields input.flc_input_text {
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--surface-well, rgba(202, 220, 209, 0.55)) !important;
    box-shadow: inset 0 1px 3px rgba(42, 50, 46, 0.04), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(42, 50, 46, 0.04) !important;
    border-radius: 14px !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.8125rem !important;
    color: #19283a !important;
    outline: none !important;
    font-family: inherit !important;
}

.flc_row.flc_person_form_fields input.flc_input_text:focus {
    border-color: rgba(91, 140, 122, 0.4) !important;
    box-shadow: inset 0 1px 3px rgba(42, 50, 46, 0.04), 0 0 0 3px rgba(91, 140, 122, 0.15) !important;
}

/* Submit Button ("Post Comment") */
.flc_submit {
    margin-top: 1rem !important;
}

button.flc_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #689B88 0%, #4E7D6B 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 0.65rem 1.6rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    box-shadow: 0 8px 20px -4px rgba(91, 140, 122, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

button.flc_button:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 12px 24px -4px rgba(91, 140, 122, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.45) !important;
    filter: brightness(1.03) !important;
    opacity: 1 !important;
}

button.flc_button:active {
    transform: translateY(0.5px) !important;
    box-shadow: inset 0 2px 4px rgba(42, 50, 46, 0.15) !important;
}

/* Load More Button */
.flc_load_more {
    order: 3 !important;
    margin-top: 1rem !important;
    display: flex !important;
    justify-content: center !important;
}

.flc_load_more button.flc_button {
    background: var(--surface-well, rgba(202, 220, 209, 0.55)) !important;
    color: #19283a !important;
    border: 1px solid rgba(42, 50, 46, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Notices, Errors & Moderation */
.flc_notice {
    background: var(--surface-well, rgba(202, 220, 209, 0.55)) !important;
    border-radius: 14px !important;
    color: #19283a !important;
    font-size: 0.8125rem !important;
    border: 1px solid rgba(91, 140, 122, 0.2) !important;
    padding: 0.75rem 1rem !important;
    margin: 0.75rem 0 !important;
}

.flc_error {
    background: #fdf2f2 !important;
    border-radius: 14px !important;
    color: #9b2c2c !important;
    font-size: 0.8125rem !important;
    border: 1px solid rgba(229, 62, 62, 0.2) !important;
    padding: 0.75rem 1rem !important;
    margin: 0.75rem 0 !important;
}

p.comment-awaiting-moderation {
    color: #926010 !important;
    font-style: italic !important;
    font-size: 0.75rem !important;
    margin-top: 0.35rem !important;
}

/* ==========================================================================
   Primary Navigation Dynamic Menu & Active Highlighting
   ========================================================================== */
/* Hide scrollbars for any element with .no-scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Fallback active styling before JS loads */
html:not(.js-nav-ready) .primary-nav-item.active-nav-item {
    background: var(--surface-card, #FAF7F2) !important;
    box-shadow: 0 4px 12px rgba(42, 50, 46, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    color: var(--ink-900, #2A322E) !important;
    font-weight: 600 !important;
}

/* Once JS is ready, the sliding pill indicator provides the animated tactile background */
#nav-pill-indicator {
    background: var(--surface-card, #FAF7F2) !important;
    box-shadow: 0 4px 12px rgba(42, 50, 46, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 1rem !important;
    z-index: 1 !important;
    transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.3s ease !important;
}

.primary-nav-item.active-nav-item i {
    color: var(--accent-primary, #5B8C7A) !important;
}

/* Dropdown Submenus & Mobile Accordion */
.site-navigation .menu-item-has-children,
.main-navigation .menu-item-has-children {
    position: relative;
}

.site-navigation .sub-menu,
.main-navigation .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--surface-card, rgba(245, 239, 230, 0.96)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(42, 48, 45, 0.08) !important;
    box-shadow: 0 16px 32px -8px rgba(42, 48, 45, 0.12) !important;
    border-radius: 1.25rem !important;
    padding: 0.75rem !important;
    min-width: 220px !important;
    opacity: 0;
    visibility: hidden;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0.5rem !important;
    transform: translateY(6px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease !important;
    z-index: 100 !important;
}

.site-navigation .menu-item-has-children:hover > .sub-menu,
.site-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.site-navigation .sub-menu a,
.main-navigation .sub-menu a {
    padding: 0.5rem 0.875rem !important;
    border-radius: 0.875rem !important;
    font-size: 0.875rem !important;
    color: #4A524E !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.site-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:hover {
    background: var(--surface-well, rgba(91, 140, 122, 0.15)) !important;
    color: var(--accent-primary, #5B8C7A) !important;
}

/* Atmosphere-specific active item highlights within dropdown */
[data-atmosphere="lavender"] .site-navigation .sub-menu a:hover {
    background: rgba(184, 169, 219, 0.25) !important;
    color: #6B4E9B !important;
}
[data-atmosphere="sage"] .site-navigation .sub-menu a:hover {
    background: rgba(91, 140, 122, 0.18) !important;
    color: #386756 !important;
}
[data-atmosphere="oat"] .site-navigation .sub-menu a:hover {
    background: rgba(220, 206, 185, 0.35) !important;
    color: #7A5B35 !important;
}

/* Nested Sub-sub-menus (Level 3+) */
.site-navigation .sub-menu .menu-item-has-children > .sub-menu,
.main-navigation .sub-menu .menu-item-has-children > .sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 0.5rem !important;
}

/* Mobile Drawer Accordion Styles */
#mobile-drawer .sub-menu {
    display: none !important;
    padding-left: 1rem !important;
    margin-top: 0.5rem !important;
    border-left: 2px solid rgba(91, 140, 122, 0.2) !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
}

#mobile-drawer .menu-item-has-children.active-accordion > .sub-menu {
    display: flex !important;
}

#mobile-drawer .menu-item-has-children.active-accordion > div .accordion-arrow,
#mobile-drawer .menu-item-has-children.active-accordion > a .accordion-arrow {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   Center Content Column Independent Scrollport (Desktop)
   Sidebars scroll naturally with the page
   ========================================================================== */
@media screen and (min-width: 1024px) {
    #secondary-left,
    #secondary-right {
        position: sticky !important;
        top: var(--sidebar-sticky-top, 144px) !important;
        height: calc(100vh - var(--sidebar-sticky-top, 144px) - 1.5rem) !important;
        max-height: calc(100vh - var(--sidebar-sticky-top, 144px) - 1.5rem) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        box-sizing: border-box !important;
        padding-bottom: 2rem !important;
    }

    #secondary-left::-webkit-scrollbar,
    #secondary-right::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #primary {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 6px !important;
        padding-bottom: 48px !important;
        box-sizing: border-box !important;
    }
}