/* ==========================================================================
   DARK THEME LAYER
   Loaded by partials/head.php only when Admin > Portfolio Settings >
   "Dark Mode Default" is Yes. Every rule is scoped to body:not(.white-version),
   so it can never touch the light theme.

   1. Premium bordered, 3-D cards (same border colour + size as the social icons)
   2. Parts that were still white in dark mode
   3. Contact form fields with a primary-colour border
   ========================================================================== */

body:not(.white-version) {
    /* Same edge colour and thickness as the "Find with me" social icons: 1px, primary at ~53% */
    --rn-edge: rgba(255, 1, 79, 0.5294117647);
    --rn-edge-hover: rgba(255, 1, 79, 0.85);

    /* Bold / 3-D look: primary halo ring + top bevel highlight + bottom bevel shade + deep drop shadow
       + soft top-left light + a primary glow under the card */
    --rn-card-shadow:
        0 0 0 1px rgba(255, 1, 79, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        inset 0 -3px 6px rgba(0, 0, 0, 0.34),
        12px 14px 28px rgba(0, 0, 0, 0.6),
        -7px -7px 18px rgba(255, 255, 255, 0.04),
        0 18px 30px -18px rgba(255, 1, 79, 0.45);
    --rn-card-shadow-hover:
        0 0 0 1px rgba(255, 1, 79, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -3px 6px rgba(0, 0, 0, 0.38),
        14px 18px 34px rgba(0, 0, 0, 0.66),
        -7px -7px 20px rgba(255, 255, 255, 0.05),
        0 22px 36px -16px rgba(255, 1, 79, 0.62);
}

/* --------------------------------------------------------------------------
   1. CARD BOXES
   -------------------------------------------------------------------------- */
body:not(.white-version) .rn-portfolio,
body:not(.white-version) .portfolio-static,
body:not(.white-version) .rn-blog,
body:not(.white-version) .blog-post-card,
body:not(.white-version) .about-highlight-card,
body:not(.white-version) .video-presentation-card,
body:not(.white-version) .resume-single-list,
body:not(.white-version) .rn-code-card,
body:not(.white-version) .github-repo-card,
body:not(.white-version) .best-skill-badge,
body:not(.white-version) .rn-client-area .inner.text-center,
body:not(.white-version) .rn-testimonial-area .card-info,
body:not(.white-version) .rn-testimonial-area .card-description,
body:not(.white-version) .contact-about-area,
body:not(.white-version) .contact-form-wrapper,
body:not(.white-version) .rn-popup-modal .modal-content,
body:not(.white-version) .modal .modal-content,
body:not(.white-version) .rn-nav-list,
body:not(.white-version) .portfolio-tab-list,
body:not(.white-version) .gallery-filter-tabs,
body:not(.white-version) ul.tab-navigation-button {
    border: 1px solid var(--rn-edge);
    box-shadow: var(--rn-card-shadow);
}

body:not(.white-version) .rn-portfolio:hover,
body:not(.white-version) .portfolio-static:hover,
body:not(.white-version) .rn-blog:hover,
body:not(.white-version) .blog-post-card:hover,
body:not(.white-version) .about-highlight-card:hover,
body:not(.white-version) .video-presentation-card:hover,
body:not(.white-version) .resume-single-list:hover,
body:not(.white-version) .rn-code-card:hover,
body:not(.white-version) .github-repo-card:hover,
body:not(.white-version) .best-skill-badge:hover,
body:not(.white-version) .rn-client-area .inner.text-center:hover,
body:not(.white-version) .rn-testimonial-area .card-info:hover,
body:not(.white-version) .rn-testimonial-area .card-description:hover {
    border-color: var(--rn-edge-hover);
    box-shadow: var(--rn-card-shadow-hover);
}

/* the big containers should not "lift" their glow when a child is hovered */
body:not(.white-version) .contact-about-area:hover,
body:not(.white-version) .contact-form-wrapper:hover,
body:not(.white-version) .modal .modal-content:hover { border-color: var(--rn-edge); }

/* the currently selected tab pill keeps its own inset look, but gets the same edge */
body:not(.white-version) .rn-nav-list .nav-link.active,
body:not(.white-version) ul.tab-navigation-button .nav-link.active,
body:not(.white-version) .portfolio-tab-list .nav-link.active {
    border: 1px solid var(--rn-edge);
}

/* --------------------------------------------------------------------------
   2. WHITE PARTS -> DARK
   -------------------------------------------------------------------------- */
/* Personal Portfolio: "From My GitHub" title + repo cards + coding project cards */
body:not(.white-version) .github-widget-title { color: var(--color-heading); }
body:not(.white-version) .github-repo-card,
body:not(.white-version) .rn-code-card { background: var(--background-color-1); }
body:not(.white-version) .github-repo-card-name { color: var(--color-heading); }
body:not(.white-version) .github-repo-card-desc { color: var(--color-body); }

body:not(.white-version) .code-card-titlebar {
    background: #191b1f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body:not(.white-version) .code-card-titlebar .filename { color: #8b93a1; }
body:not(.white-version) .code-card-body .title { color: var(--color-heading); }
body:not(.white-version) .tech-tags .tag {
    background: #1a1d21;
    border: 1px solid rgba(255, 1, 79, 0.28);
    color: #c2cad6;
}
body:not(.white-version) .gh-stat { color: #8b93a1; }
body:not(.white-version) .gh-stat em { color: var(--color-heading); }
body:not(.white-version) .code-card-links { border-top: 1px solid rgba(255, 255, 255, 0.08); }
body:not(.white-version) .code-link { color: var(--color-heading); }
body:not(.white-version) .code-link:hover { color: var(--color-primary); }

/* Education / Experience: the "Result: …" pill was solid white */
body:not(.white-version) .Result {
    background: var(--background-color-1);
    color: var(--color-primary);
    border: 1px solid var(--rn-edge);
    box-shadow: var(--shadow-1);
}
body:not(.white-version) .Result:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. CONTACT FORM — primary-colour borders on every field
   -------------------------------------------------------------------------- */
body:not(.white-version) .rnt-contact-form .form-control,
body:not(.white-version) .rnt-contact-form input,
body:not(.white-version) .rnt-contact-form textarea,
body:not(.white-version) .contact-form-wrapper .form-control {
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body:not(.white-version) .rnt-contact-form .form-control:focus,
body:not(.white-version) .rnt-contact-form textarea:focus,
body:not(.white-version) .contact-form-wrapper .form-control:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 1, 79, 0.28), inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
/* the "I am not a robot" box: white before, dark + primary border now */
body:not(.white-version) .rn-robot-check {
    background: #1a1c20;
    border: 1px solid var(--color-primary);
}
body:not(.white-version) .rn-robot-check .box { border-color: rgba(255, 1, 79, 0.55); background: #121417; }
body:not(.white-version) .rn-robot-check .text { color: var(--color-heading); }

/* --------------------------------------------------------------------------
   Logos: the built-in logo has dark lettering, so it sits on a light pill in the dark theme.
   (Logos you upload for the dark theme in Portfolio Settings get no pill.)
   -------------------------------------------------------------------------- */
body:not(.white-version) .rn-header .logo img.rn-default-logo,
body:not(.white-version) .popup-mobile-menu .logo img.rn-default-logo,
body:not(.white-version) .rn-footer-area .logo img.rn-default-logo {
    background: #ECF0F3;
    border-radius: 60px;
    padding: 3px 12px 3px 3px;
    box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   Blog post page: the "Share" button had no styling of its own (plain white-outlined browser button)
   -------------------------------------------------------------------------- */
body:not(.white-version) .rich-body ~ .blog-share-row { border-top: 0; padding: 0; }
body:not(.white-version) .rich-body ~ .blog-share-row .blog-share-btn {
    display: inline-flex;
    width: auto !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 8px;
    border: 1px solid var(--rn-edge);
    background: var(--background-color-1);
    color: var(--color-heading);
    box-shadow: var(--rn-card-shadow);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body:not(.white-version) .rich-body ~ .blog-share-row .blog-share-btn:hover {
    border-color: var(--rn-edge-hover);
    color: var(--color-primary);
    box-shadow: var(--rn-card-shadow-hover);
    transform: translateY(-2px);
}