/* ═══════════════════════════════════════════════════════════
   02-RESETS.CSS — Global Resets, Geometry, Anti-Ribbons & Pure B/W
   ══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   GLOBAL RESETS — override Appyn defaults
══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* WordPress Header & Ticker Alignment Fix - Seamless Top Positioning */
#site-header {
    top: 0 !important;
}
body.admin-bar #site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar #site-header {
        top: 46px !important;
    }
}

.news-ticker-wrapper {
    top: 64px !important;
}
body.admin-bar .news-ticker-wrapper {
    top: 96px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar .news-ticker-wrapper {
        top: 110px !important;
    }
}

body {
    font-family: var(--font-ui) !important;
    background-color: var(--c-bg) !important;
    color: var(--c-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Eradicate WordPress Core #error-page / install.css 700px max-width constraint */
html, body, body#error-page, #error-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════
   SUPPRESS APPYN PARENT HEADER/FOOTER
   (our child theme header.php / footer.php take over)
══════════════════════════════════════════════════════════ */
/* Hide parent theme header elements if they bleed through */
.site-header:not(#site-header),
.main-navigation:not(#site-header nav),
.box-header:not(#site-header),
.nv-navbar:not(#site-header),
.header-main:not(#site-header) {
    display: none !important;
}

/* Hide parent theme footer if it bleeds through */
.site-footer:not(#site-footer),
.footer-widget-area:not(#site-footer),
.box-footer:not(#site-footer) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui) !important;
    color: var(--c-text) !important;
    line-height: 1.25;
}

p, li, td, th, span, label {
    font-family: var(--font-ui) !important;
}

code, pre, kbd, .font-mono {
    font-family: var(--font-mono) !important;
}

a {
    text-decoration: none;
    transition: color 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════════════════════════ */

/* Extra top spacing for fixed header on mobile */
main, #main-content {
    padding-top: 64px !important;
}

/* Appyn sidebar — suppress on mobile */
@media (max-width: 767px) {
    #sidebar,
    .sidebar,
    .widget-area,
    aside.widget-area {
        display: none !important;
    }

    /* Full-width content on mobile */
    #content, .content-area, .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Smaller headings on mobile */
    h1 { font-size: 26px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 16px !important; }

    /* Tighter padding on mobile */
    .max-w-container-max {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    h1 { font-size: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════
   APPYN — DOWNLOAD PAGE OVERRIDES
══════════════════════════════════════════════════════════ */
/* Kill Appyn's sidebar on single post pages */
.single #sidebar,
.single .widget-area,
.single aside {
    display: none !important;
}

/* Appyn's box_single_app container */
.box_single_app,
#box_single_app {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   STRICT DEDUPLICATION — HIDE PARENT THEME #backtotop & FLOATING BUTTONS
══════════════════════════════════════════════════════ */
#backtotop,
#back-to-top,
.btt,
.scroll-top,
.btt-btn,
div[id*="backtotop"],
button[id*="backtotop"]:not(#cyber-back-to-top),
a[id*="backtotop"],
a[href="#top"]:not(#cyber-back-to-top),
.fa-angle-up:not(#cyber-back-to-top *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   STRICT DEDUPLICATION — HIDE PARENT THEME .bloque-status CORNER RIBBONS & LAZYLOAD GREEN PLACEHOLDERS
══════════════════════════════════════════════════════ */
img[src*="image-palceholder.png"],
img[data-speedycache-original-src],
.item-app img,
.app-card-premium img {
    background-color: transparent !important;
    background-image: none !important;
}

.bloque-status,
.bloque-status.bs-new,
.bloque-status.bs-update,
.b-type,
.b-mod,
.b-app,
.datatype,
.mod-badge,
.bloq-des,
span.datatype,
span.b-mod,
span.b-app,
div.datatype,
div.b-mod,
.item-app .bloque-status,
.app-card-premium .bloque-status,
.item-box .bloque-status {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    clip: rect(0, 0, 0, 0) !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

background-color: /* ═══════════════════════════════════════════════════════════
   3. PURE BLACK & WHITE DARK MODE SYSTEM (ZERO GREY)
   ══════════════════════════════════════════════════════════ */
html.dark,
html.dark body,
body:not(.light-mode) {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.dark body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Dark Mode Typography (Pure White & High-Vibrancy Accents) */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
body:not(.light-mode) h1, body:not(.light-mode) h2, body:not(.light-mode) h3, body:not(.light-mode) h4, body:not(.light-mode) h5, body:not(.light-mode) h6 {
    color: #ffffff !important;
}

html.dark p, html.dark li, html.dark span, html.dark label, html.dark strong, html.dark em, html.dark b, html.dark div,
body:not(.light-mode) p, body:not(.light-mode) li, body:not(.light-mode) span, body:not(.light-mode) label, body:not(.light-mode) strong, body:not(.light-mode) em, body:not(.light-mode) b {
    color: #ffffff !important;
}

/* Override all muted slate/grey classes to crisp white in Dark Mode */
html.dark .text-slate-100, html.dark .text-slate-200, html.dark .text-slate-300, html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-slate-600, html.dark .text-slate-700,
html.dark .text-gray-100, html.dark .text-gray-200, html.dark .text-gray-300, html.dark .text-gray-400, html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-gray-700,
body:not(.light-mode) .text-slate-100, body:not(.light-mode) .text-slate-200, body:not(.light-mode) .text-slate-300, body:not(.light-mode) .text-slate-400, body:not(.light-mode) .text-slate-500,
body:not(.light-mode) .text-gray-100, body:not(.light-mode) .text-gray-200, body:not(.light-mode) .text-gray-300, body:not(.light-mode) .text-gray-400, body:not(.light-mode) .text-gray-500 {
    color: #ffffff !important;
}

/* Dark Mode Pitch Black Glass & Surfaces */
html.dark .glass-level-1,
html.dark .glass-level-2,
html.dark .glass-level-3,
html.dark .sci-fi-glass,
html.dark .app-content-body,
html.dark .app-s .box,
html.dark .app-p .box,
html.dark .box_single_app,
html.dark .entry.bx-info-install,
body:not(.light-mode) .glass-level-1,
body:not(.light-mode) .glass-level-2,
body:not(.light-mode) .glass-level-3,
body:not(.light-mode) .sci-fi-glass,
body:not(.light-mode) .app-content-body,
body:not(.light-mode) .app-s .box,
body:not(.light-mode) .app-p .box,
body:not(.light-mode) .box_single_app,
body:not(.light-mode) .entry.bx-info-install {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.dark .border-white\/10,
html.dark .border-white\/20,
html.dark .border-slate-800,
html.dark .border-slate-700,
body:not(.light-mode) .border-white\/10,
body:not(.light-mode) .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. PURE BLACK & WHITE LIGHT MODE SYSTEM (ZERO GREY)
   ══════════════════════════════════════════════════════════ */
html.light,
html:not(.dark),
body.light-mode,
html.light body,
html:not(.dark) body {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Light Mode Typography (Pure Solid Black) */
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6,
html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6,
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 {
    color: #000000 !important;
}

body.light-mode p, body.light-mode li, body.light-mode span, body.light-mode label, body.light-mode strong, body.light-mode em, body.light-mode b, body.light-mode div,
html.light p, html.light li, html.light span, html.light label, html.light strong, html.light em, html.light b,
html:not(.dark) p, html:not(.dark) li, html:not(.dark) span, html:not(.dark) label, html:not(.dark) strong, html:not(.dark) em, html:not(.dark) b {
    color: #000000 !important;
}

/* Override all muted slate/grey classes to solid black in Light Mode */
body.light-mode .text-slate-400, body.light-mode .text-slate-300, body.light-mode .text-slate-500, body.light-mode .text-slate-600, body.light-mode .text-slate-700,
html.light .text-slate-400, html.light .text-slate-300, html.light .text-slate-500, html.light .text-slate-600, html.light .text-slate-700,
html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-300, html:not(.dark) .text-slate-500, html:not(.dark) .text-slate-600, html:not(.dark) .text-slate-700,
body.light-mode .text-gray-400, body.light-mode .text-gray-500, body.light-mode .text-gray-600, body.light-mode .text-gray-700,
html.light .text-gray-400, html.light .text-gray-500, html.light .text-gray-600, html.light .text-gray-700,
html:not(.dark) .text-gray-400, html:not(.dark) .text-gray-500, html:not(.dark) .text-gray-600, html:not(.dark) .text-gray-700 {
    color: #000000 !important;
}

/* Light Mode Solid White Surfaces with Crisp Borders */
body.light-mode .glass-level-1,
body.light-mode .glass-level-2,
body.light-mode .glass-level-3,
body.light-mode .sci-fi-glass,
body.light-mode .app-content-body,
body.light-mode .app-s .box,
body.light-mode .app-p .box,
body.light-mode .box_single_app,
body.light-mode .entry.bx-info-install,
html.light .glass-level-1,
html.light .glass-level-2,
html.light .glass-level-3,
html.light .sci-fi-glass,
html.light .app-content-body,
html.light .app-s .box,
html.light .app-p .box,
html.light .box_single_app,
html.light .entry.bx-info-install,
html:not(.dark) .glass-level-1,
html:not(.dark) .glass-level-2,
html:not(.dark) .glass-level-3,
html:not(.dark) .sci-fi-glass {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
}

body.light-mode .border-white\/10,
body.light-mode .border-white\/20,
body.light-mode .border-slate-200,
body.light-mode .border-slate-300,
html.light .border-white\/10,
html.light .border-white\/20,
html.light .border-slate-200,
html.light .border-slate-300,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20,
html:not(.dark) .border-slate-200,
html:not(.dark) .border-slate-300 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .bg-slate-900\/80,
body.light-mode .bg-slate-900,
body.light-mode .bg-slate-800,
body.light-mode .bg-slate-100,
body.light-mode .bg-slate-50,
body.light-mode .bg-\[\#0b1326\],
body.light-mode .bg-\[\#080e1a\],
html.light .bg-slate-900\/80,
html.light .bg-slate-900,
html.light .bg-slate-800,
html.light .bg-slate-100,
html.light .bg-slate-50,
html.light .bg-\[\#0b1326\],
html.light .bg-\[\#080e1a\],
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-100,
html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-\[\#0b1326\],
html:not(.dark) .bg-\[\#080e1a\] {
    background-color: #ffffff !important;
}

/* Headers & Footers */
body.light-mode #site-header,
html.light #site-header,
html:not(.dark) #site-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode #site-header a,
html.light #site-header a,
html:not(.dark) #site-header a {
    color: #000000 !important;
}

body.light-mode #site-header a:hover,
html.light #site-header a:hover,
html:not(.dark) #site-header a:hover {
    color: #059669 !important;
}

body.light-mode #site-search-input,
html.light #site-search-input,
html:not(.dark) #site-search-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
}

body.light-mode footer,
html.light footer,
html:not(.dark) footer,
body.light-mode #site-footer,
html.light #site-footer,
html:not(.dark) #site-footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
}

html.dark footer,
html.dark #site-footer,
body:not(.light-mode) footer,
body:not(.light-mode) #site-footer {
    background-color: #000000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}