/**
 * PosInTech Core Baseline Structural Layout Reset Engine
 */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 
     * CRITICAL FIX: Changed from height: 100% to min-height.
     * This allows the document container to grow infinitely as you scroll down.
     */
    min-height: 100%;
    background-color: var(--pos-bg-main);
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 
     * CRITICAL FIX: Removes absolute height boundaries so the background 
     * stretches all the way to the end of your long post loop grids.
     */
    min-height: 100vh;
    height: auto !important; 
    background-color: var(--pos-bg-main);
    color: var(--pos-text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Ensure the layout wrapper elements don't cap their height structural boundaries either */
.site, 
.site-content, 
#content, 
#primary, 
#main {
    min-height: 100vh;
    height: auto !important;
    background-color: var(--pos-bg-main);
}

/* Accessible hidden utilities */
.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;
    width: 1px;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}







/* ==========================================================================
   PosInTech Theme Architecture: Migrated Switcher Button Styles
   ========================================================================== */
.pos-framework-switcher-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pos-inline-switcher-btn {
    background-color: var(--pos-search-bg) !important; /* Matches your theme input layout fields */
    border: 1px solid var(--pos-search-border) !important;
    color: var(--pos-text-nav) !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 30% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.pos-inline-switcher-btn:hover {
    border-color: #a855f7 !important;
    color: #a855f7 !important;
    transform: scale(1.05) !important;
}

/* --- DYNAMIC VECTOR STATE VISIBILITY ENGINE --- */
.pos-sun-svg { 
    display: none !important; 
}
.pos-moon-svg { 
    display: block !important; 
}

/* Vector changes based on the data-theme attribute */
html[data-theme="light"] .pos-sun-svg { 
    display: block !important; 
    color: #eab308 !important; 
}
html[data-theme="light"] .pos-moon-svg { 
    display: none !important; 
}






/* ==========================================================================
   PosInTech Theme Architecture: Refined Solid Purplish Theme
   ========================================================================== */

/* --- 1. THEME MATRIX VARIABLES --- */

/* DARK VERSION */
html, body {
    --pos-header-solid-bg: #0b0714; 
    --pos-dropdown-bg: #120e20;
    --pos-search-bg: #1a142e;
    --pos-search-border: rgba(168, 85, 247, 0.25);
    --pos-text-nav: #e9e3ff; 
    --pos-nav-hover-bg: rgba(168, 85, 247, 0.15);
    --pos-hamburger-color: #e9e3ff;
    /* Brand gradient alignment for hover states */
    --pos-brand-gradient: linear-gradient(90deg, #a855f7, #6366f1, #a855f7);
}

/* LIGHT VERSION (Purplish-White) */
html.light-theme, body.light-theme {
    --pos-header-solid-bg: #f5f3ff;
    --pos-dropdown-bg: #ffffff;
    --pos-search-bg: #ede9fe;
    --pos-search-border: #d8b4fe;
    --pos-text-nav: #4c1d95;
    --pos-nav-hover-bg: #f3e8ff;
    --pos-hamburger-color: #4c1d95;
    --pos-brand-gradient: linear-gradient(90deg, #7c3aed, #4f46e5, #7c3aed);
}

/* --- 2. STRUCTURAL HEADER WRAPPER (SHADOW & HEIGHT FIXES) --- */
.site-header {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background-color: var(--pos-header-solid-bg) !important;
    border-bottom: none !important; 
    
    /* 1. BOTTOM DROP SHADOW ENHANCEMENT */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(124, 58, 237, 0.08) !important;
    
    position: relative !important; 
    top: auto !important;
    z-index: 999999 !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.pos-master-nav-container {
    max-width: var(--pos-container-width);
    margin: 0 auto;
    
    /* Incremented to 14px top/bottom to make the header taller and spacious */
    padding: 14px 24px !important; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pos-header-left-tray, 
.pos-header-right-tray {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* --- 3. DESKTOP MENU ENGINE & GRADIENT HOVER UNDERLINE --- */
.pos-primary-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 28px;
}

.pos-primary-nav-menu li {
    position: relative !important;
    padding: 6px 0; /* Snug vertical alignment padding */
}

.pos-primary-nav-menu li a {
    color: var(--pos-text-nav) !important; 
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-bottom: 6px;
    transition: color 0.3s ease;
}

.pos-primary-nav-menu li:hover > a {
    color: #a855f7 !important;
}

/* 5. BRAND GRADIENT HOVER UNDERLINE EFFECT (CENTER-OUT) */
.pos-primary-nav-menu > li > a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--pos-brand-gradient);
    transform: scaleX(0); 
    transform-origin: 50%; /* Scales outward symmetrically from the absolute center */
    transition: transform 0.3s ease;
}

.pos-primary-nav-menu > li:hover > a::before {
    transform: scaleX(1); 
}

/* Arrow Vector Animations */
.pos-menu-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s all;
}

.pos-primary-nav-menu li:hover .pos-menu-arrow {
    transform: rotate(180deg);
    color: #a855f7 !important;
}

/* 4. BALANCED CENTERING FOR DROPDOWN PANEL */
.pos-primary-nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    
    /* Centering calculation alignment */
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) scale(0.97) !important;
    
    background-color: var(--pos-dropdown-bg) !important;
    border: 1px solid var(--pos-search-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
    min-width: 180px !important;
    padding: 8px !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center; /* Centers inside link strings */
    
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                visibility 0.2s !important;
    z-index: 1000 !important;
}

/* Invisible Hover Bridge Padding Target */
.pos-primary-nav-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent !important;
    display: block !important;
}

.pos-primary-nav-menu .sub-menu li a {
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--pos-text-nav) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pos-primary-nav-menu .sub-menu li a::before {
    display: none !important; /* Disables underline engine inside secondary layers */
}

.pos-primary-nav-menu .sub-menu li a:hover {
    background-color: var(--pos-nav-hover-bg) !important; 
    color: #a855f7 !important;
}

/* Active Hover Dropdown State Placement */
.pos-primary-nav-menu li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(2px) scale(1) !important;
    pointer-events: auto !important;
}

/* --- 4. OPTIMIZED SEARCH FIELD ARCHITECTURE --- */
.pos-header-search-form {
    margin: 0 !important;
    padding: 0 !important;
}

.pos-search-field-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* --- SEARCH BAR BORDER RADIUS ENFORCEMENT --- */
.pos-search-field-input {
    background-color: var(--pos-search-bg) !important;
    border: 1px solid var(--pos-search-border) !important;
    color: var(--pos-text-nav) !important;
    padding: 8px 38px 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    
    /* Enforced with !important to evict page builder form defaults */
    border-radius: 8px !important; 
    
    outline: none !important;
    width: 210px !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pos-search-field-input:focus {
    border-color: #a855f7 !important;
    width: 260px !important;
    background-color: var(--pos-dropdown-bg) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15) !important;
    border-radius: 8px !important; /* Locks structural bounds on active focus states */
}
.pos-search-submit-btn {
    position: absolute !important;
    right: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #a855f7 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.pos-header-search-form input[type="submit"] {
    display: none !important;
}

/* --- 5. MOBILE SYSTEM COMPONENT WRAPPERS --- */
.pos-mobile-hamburger-btn {
    display: none !important;
    background: transparent !important;
    border: none !important;
    width: 26px !important;
    height: 20px !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.hamburger-line {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    background-color: var(--pos-hamburger-color) !important;
    border-radius: 4px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
}

.pos-mobile-drawer {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    width: 100%;
    background-color: var(--pos-dropdown-bg);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
}

.pos-mobile-drawer.is-visible {
    display: block !important;
    max-height: 100vh !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 968px) {
    .desktop-nav { display: none !important; }
    .pos-master-nav-container { padding: 10px 20px !important; flex-wrap: nowrap !important; justify-content: space-between !important; }
    .pos-header-left-tray { flex: 1 !important; }
    .pos-header-right-tray { display: flex !important; align-items: center !important; gap: 20px !important; }
    .pos-header-search-form { display: none !important; }
    .pos-mobile-hamburger-btn { display: flex !important; }
    .pos-mobile-search-container { padding: 4px 0 16px 0; width: 100%; }
    .pos-mobile-search-container .pos-header-search-form { display: block !important; }
    .pos-mobile-search-container .pos-search-field-input { width: 100% !important; }
    .pos-mobile-drawer { border-top: 1px solid var(--pos-search-border) !important; }
    .mobile-nav-menu-wrapper { padding: 20px !important; display: flex; flex-direction: column; gap: 16px; }
    .pos-mobile-nav-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 16px; }
    .pos-mobile-nav-menu li a { color: var(--pos-text-nav); text-decoration: none; font-size: 16px; font-weight: 700; display: block; padding: 8px 0; }
    .pos-mobile-nav-menu li a::before { display: none !important; }
    .pos-mobile-nav-menu .sub-menu { list-style: none !important; padding-left: 16px !important; margin-top: 8px !important; border-left: 2px solid var(--pos-search-border); }
    .pos-mobile-nav-menu .sub-menu li a { font-size: 14.5px; color: #a855f7; font-weight: 600; }
}





/* ==========================================================================
   PosInTech Theme Architecture: Premium High-Contrast Solid Footer Overhaul
   ========================================================================== */

/* --- 1. THEME MATRIX FOOTER VARIABLES --- */

/* DARK MODE OVERRIDES: Crisp high-contrast lavender-white elements */
html, body {
    --pos-footer-main-bg: #0b0714;
    --pos-footer-socket-bg: #110c1c;
    --pos-footer-text: #a29db7; /* Brightened for readability */
    --pos-footer-heading: #e9e3ff;
    --pos-footer-links: #d1cbe5; /* High contrast link state explicitly forced */
    --pos-footer-hover: #a855f7;
}

/* LIGHT MODE OVERRIDES: Deep rich purple elements */
html.light-theme, body.light-theme {
    --pos-footer-main-bg: #ffffff;
    --pos-footer-socket-bg: #f5f3ff;
    --pos-footer-text: #4b5563;
    --pos-footer-heading: #4c1d95;
    --pos-footer-links: #4c1d95;
    --pos-footer-hover: #7c3aed;
}

.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--pos-footer-main-bg) !important;
    margin-top: 40px !important;
    display: block !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.25s ease !important;
}

/* --- 2. GRID CONTAINERS --- */
.pos-footer-master-container {
    max-width: var(--pos-container-width);
    margin: 0 auto;
    padding: 60px 24px 48px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 80px !important;
}

.pos-footer-brand-column {
    flex: 1.3 !important;
    max-width: 620px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.pos-footer-bio {
    color: var(--pos-footer-text) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Social Tray Layout Layer */
.pos-footer-social-tray {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    color: var(--pos-footer-text) !important;
}

.pos-tray-label {
    color: var(--pos-footer-heading) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}

.pos-social-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--pos-footer-links) !important; /* Explicit variable enforcement */
    text-decoration: none !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.pos-social-link svg {
    fill: currentColor !important; /* Forces vector to match text visibility tokens */
    transition: transform 0.2s ease !important;
}

.pos-tray-divider, 
.pos-socket-divider {
    color: var(--pos-footer-text) !important;
    opacity: 0.4 !important;
}

/* --- 3. EXPLORE MORE LINKS LAYOUT ENGINE --- */
.pos-footer-links-column {
    flex: 0.7 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 240px !important;
}

.pos-links-header {
    color: var(--pos-footer-heading) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* CRITICAL FIX: Explicit flex layout forcing list array below the heading element block */
.pos-footer-navigation {
    display: block !important;
    width: 100% !important;
}

.pos-footer-links-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important; /* Tidy spatial separation tracking vertically */
}

.pos-footer-links-list li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.pos-footer-links-list li::before {
    display: none !important;
}

.pos-footer-links-list li a {
    color: var(--pos-footer-links) !important; /* Overwrites generic browser fallback colors */
    text-decoration: none !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    display: inline-block !important;
}

.pos-footer-links-list li a:hover {
    color: var(--pos-footer-hover) !important;
    padding-left: 4px !important;
}

/* --- 4. BOTTOM BAR SOCKET DESIGNS --- */
.pos-footer-socket-bar {
    background-color: var(--pos-footer-socket-bg) !important;
    border-top: 0px solid rgba(168, 85, 247, 0.08) !important;
    transition: background-color 0.25s ease !important;
}

.pos-socket-container {
    max-width: var(--pos-container-width);
    margin: 0 auto;
    padding: 20px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.pos-socket-copyright {
    color: var(--pos-footer-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.pos-socket-legal-links {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.pos-socket-legal-links a {
    color: var(--pos-footer-links) !important; /* Kills dark/black text bug entirely */
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.pos-socket-legal-links a:hover {
    color: var(--pos-footer-hover) !important;
}

/* --- 5. COMPACT MOBILE DRAW BREAKPOINTS --- */
@media (max-width: 768px) {
    .pos-footer-master-container {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }
    
    .pos-footer-brand-column, 
    .pos-footer-links-column {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .pos-socket-container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px 20px !important;
    }
    
    .pos-socket-legal-links {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px 16px !important;
    }
    
    .pos-socket-divider {
        display: none !important;
    }
}