/*
Theme Name: Virtarix
Theme URI: https://virtarix.com
Author: Byron Jacobs
Description: Virtarix VPS & Cloud Hosting — Tailwind CSS theme
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: virtarix
Requires at least: 6.0
Requires PHP: 8.0
*/

* {
    text-rendering: unset;
    -webkit-font-smoothing: auto;
}

.icon {
    /* filter: saturate(0.5); */
}

.icon-heading {color: #040b4c}

/* ─── Font Faces (Poppins) ─────────────────────────────────── */

/* ─── Self-hosted Fonts (Poppins + Rubik) ──────────────────── */

/* Poppins 300 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-300-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 400 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 500 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-500-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 600 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 700 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/fonts/poppins/poppins-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik 400–700 (variable font — single file per subset) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/fonts/rubik/rubik-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ─── Base Styles ──────────────────────────────────────────── */

html.overflow-y-hidden {
    overflow-y: hidden !important;
}

body {
    color: #252525;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;

}

strong {
    font-weight: 600 !important;
}

.text-nav-link {
    letter-spacing: 1.25px;
}

/* ─── Top Bar Dropdowns ─── */
.vx-dropdown {
    position: relative;
}

.vx-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 4px 0;
    margin-top: 6px;
}

/* Invisible bridge so hover doesn't break crossing the gap */
.vx-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
    display: none;
}

.vx-dropdown:hover::after {
    display: block;
}

.vx-dropdown:hover .vx-dropdown-menu {
    display: block;
}

.vx-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: #374151;
    transition: 0.15s;
    white-space: nowrap;
    border-radius: 6px;
    margin: 0 4px;
}

.vx-dropdown-menu a:hover {
    background: #f9fafb;
    color: #020281;
}

/* ─── Custom Shadows (use .shadow-card to avoid Tailwind .shadow conflict) ─── */

.shadow-card {
    box-shadow: 0 4px 8px rgba(5, 2, 129, 0.08);
}

/* ─── Proof Cards (features-grid proof-cards layout) ─────── */
.proof-card {
    border: 1px solid #dbe2ea;
    background: #fff;
    box-shadow: 0 16px 30px -28px rgba(15, 23, 42, 0.55);
}

.proof-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #eaf1ff;
    color: #1d4ed8;
}

/* ─── Value Cards (features-grid cards layout) ───────────── */
.value-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.value-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 35px -30px rgba(2, 2, 129, 0.5);
}

/* ─── Content-block: trust-card, timeline, link-card ─────── */
.trust-card {
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 18px 40px -35px rgba(15, 23, 42, 0.45);
}

.timeline-item {
    position: relative;
    border-left: 2px solid #dbeafe;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #2646c4;
}

.link-card {
    background: #fff;
    border: 1px solid #e2e8f0;
}

/* ─── Products Carousel Fallback Sizing ────────────────────── */
/* Keeps max 4 product cards visible on desktop before JS carousel init */
.products-carousel-section .pricing-track {
    gap: 30px;
}

.products-carousel-section .pricing-card {
    width: 100%;
}

@media (min-width: 768px) {
    .products-carousel-section .pricing-card {
        width: calc((100% - 30px) / 2);
    }
}

@media (min-width: 1024px) {
    .products-carousel-section .pricing-card {
        width: calc((100% - 90px) / 4);
    }
}

/* ─── Alternating Section Backgrounds ──────────────────────── */
/* nth-of-type counts only <section> elements — immune to injected <style>/<script>/etc. */

main>section:nth-of-type(odd):not([class*="bg-"]):not(#footer-frosted-with-card) {
    background-color: #f9fafe;
    /* grey */
}

main>section:nth-of-type(even):not([class*="bg-"]):not(#footer-frosted-with-card) {
    background-color: #ffffff;
    /* white */
}

/* ─── Footer: Frosted Blocks with Floating Card ───────────── */
.footer-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.footer-pattern-grid {
    background-image: linear-gradient(rgba(2, 2, 129, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 2, 129, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, transparent, transparent 10%, black 20%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, transparent 10%, black 20%);
}

.footer-soft-shadow {
    box-shadow: 0 25px 80px rgb(0 68 180 / 28%);
}

.floating-card-shadow {
    box-shadow: 0 25px 80px rgb(0 68 180 / 28%);
}

/* ─── Footer: Missing Tailwind Utilities (not in build-time CSS) ──── */
/* z-index */
.z-20 {
    z-index: 20;
}

/* Negative margin */
.mb-\[-60px\] {
    margin-bottom: -60px;
}

/* Important transparent bg */
.\!bg-transparent {
    background-color: transparent !important;
}

/* Rounded 3xl */
.rounded-3xl {
    border-radius: 1.5rem;
}

/* Leading tight */
.leading-tight {
    line-height: 1.25;
}

/* Not italic */
.not-italic {
    font-style: normal;
}

/* py-10 */
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Gradient: bottom-left */
.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.from-slate-50 {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-white {
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-indigo-50 {
    --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}



/* Gradient text (primary → accent) */
.headings-gradient-text {
    background: linear-gradient(135deg, #020281, #fc5186);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.headings-gradient-text-green {
    background: linear-gradient(135deg, #020281, #007a68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-clamp-medium {
    font-size: clamp(48px, 7vw, 68px);
    font-weight: unset;
}

/* Text colors */
.text-slate-900 {
    color: #0f172a;
}

.text-slate-600 {
    color: #475569;
}

.text-indigo-200 {
    color: #c7d2fe;
}

.text-indigo-100 {
    color: #e0e7ff;
}

/* Background with alpha */
.bg-white\/85 {
    background-color: rgba(255, 255, 255, 0.85);
}

.bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Border with alpha */
.border-primary\/15 {
    border-color: rgba(2, 2, 129, 0.15);
}

/* Backdrop blur */
.backdrop-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Hover states */
.hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hover\:bg-\[\#fc5186\]\/90:hover {
    background-color: rgba(252, 81, 134, 0.9);
}

/* Spotlight row — mobile-first (stacked) */
.vx-spot-row {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    align-items: center;
}
.vx-spot-col {
    width: 100%;
}
/* Spotlight card row — grey by default, white when section already has grey bg */
.vx-spot-row-card {
    background-color: #f7f8fa;
}
main>section:nth-of-type(odd):not([class*="bg-"]):not(#footer-frosted-with-card) .vx-spot-row-card {
    background-color: #ffffff;
}

/* Responsive: sm (640px) */
@media (min-width: 640px) {
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* Responsive: lg (1024px) — override sm:col-span-2 cascade */
@media (min-width: 1024px) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    /* Content Block: JSON-driven desktop grid template (build-time Tailwind-safe) */
    .virtarix-content-block-grid {
        grid-template-columns: var(--virtarix-content-block-cols, 1fr);
    }

    /* Spotlight: JSON-driven per-row flex columns */
    .vx-spot-row {
        flex-direction: row;
    }
    .vx-spot-col {
        flex: var(--col-flex, 1) 1 0%;
        min-width: 0;
    }
}

/* Responsive: md (768px) — footer supplements */
@media (min-width: 768px) {
    .md\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .md\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .md\:p-10 {
        padding: 2.5rem;
    }

    .md\:p-8 {
        padding: 2rem;
    }

    .md\:p-6 {
        padding: 1.5rem;
    }

    .md\:p-5 {
        padding: 1.25rem;
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .md\:pt-7 {
        padding-top: 1.75rem;
    }

    .md\:mb-4 {
        margin-bottom: 1rem;
    }

    .md\:gap-8 {
        gap: 2rem;
    }

    .md\:gap-5 {
        gap: 1.25rem;
    }

    .md\:space-y-10> :not([hidden])~ :not([hidden]) {
        margin-top: 2.5rem;
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:w-auto {
        width: auto;
    }
}

/* Responsive: xl (1280px) */
@media (min-width: 1280px) {
    .xl\:grid-cols-\[320px_1fr\] {
        grid-template-columns: 320px 1fr;
    }
}

/* FAQ accordion items: opposite bg to parent section */
main>section:nth-of-type(odd) .faq-item {
    background-color: #ffffff;
}

main>section:nth-of-type(even) .faq-item {
    background-color: #f9fafe;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* margin: unset !important; */
    line-height: 1.15 !important;
}

/* ─── Responsive typography (CDN doesn't support @screen in config) ─── */
@media (min-width: 768px) {
    .text-h2 {
        font-size: 2.25rem !important;
    }

    .text-h3 {
        font-size: 1.75rem !important;
    }

    .text-h4 {
        font-size: 1.25rem !important;
    }

    .text-h5 {
        font-size: 1.15rem !important;
    }

    .text-h6 {
        font-size: 0.875rem !important;
    }

    .text-body {
        font-size: 1rem !important;
    }

    .text-paragraph {
        font-size: 1rem !important;
    }

    .text-cta {
        font-size: 1rem !important;
    }

    /* Content-block richtext — responsive size upgrade
       (base styles set via Tailwind arbitrary variants on wrapper) */
    .virtarix-content-block-richtext h2 {
        font-size: 1.25rem !important;
    }

    .virtarix-content-block-richtext h3 {
        font-size: 1.1rem !important;
    }

    .virtarix-content-block-richtext h4 {
        font-size: 1rem !important;
    }

    .virtarix-content-block-richtext h5 {
        font-size: 0.95rem !important;
    }

    .virtarix-content-block-richtext h6 {
        font-size: 0.875rem !important;
    }

    .virtarix-content-block-richtext p {
        font-size: 0.95rem !important;
    }

    .hero-minimal .text-h1 {
        font-size: 2.5rem !important;
    }
}


.section-align-bottom {
    position: relative;
    float: left;
    height: 100%;
}

.section-align-bottom-image {
    bottom: 0px;
    position: absolute;
}