/*
Theme Name: DSP Bootstrop Theme
Theme URI: https://github.com/google-deepmind/antigravity
Description: A blank WordPress theme built with the latest Bootstrap version.
Version: 1.0.0
Author: Antigravity
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dsp-bootstrop-theme
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bitcount+Grid+Double:wght@100..900&family=Bitcount+Ink:wght@100..900&family=Bitcount+Single:wght@100..900&family=Cinzel:wght@400..900&family=Gruppo&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Barcode+39&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poiret+One&family=Press+Start+2P&family=VT323&display=swap');

/* Add any custom theme styles below this line */
:root {

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Theme adaptive variables - Light theme defaults (Option 5: Lavender BG) */
    --bg-main: #f5f3ff;
    --text-main: #0f172a;
    --bg-glass: rgba(255, 255, 255, 0.45);
    --border-glass: rgba(15, 23, 42, 0.08);
    --manchester-purple: #7f00ff;

    /* Logo backdrop stops - Light Mode */
    --logo-bg-stop-1: rgba(127, 0, 255, 0.12);
    --logo-bg-stop-2: rgba(0, 240, 255, 0.06);
    --logo-bg-stop-3: rgba(245, 243, 255, 0);
    --logo-chip-fill: #e2e8f0;
    --logo-starburst: rgba(15, 23, 42, 0.08);

    /* Text & Nav Brand Gradient - Light Mode Two-Tone Cyberpunk */
    --rainbow-gradient: linear-gradient(to right, #ff007f 0%, #cc00bf 20%, #9900ff 40%, #4d77ff 60%, #00f0ff 80%, #ff007f 100%);
}

[data-bs-theme="dark"] {
    --bg-main: #141026;
    --bs-dark: #141026;
    --bs-dark-rgb: rgb(20, 16, 38);
    --text-main: #f1f5f9;
    --bg-glass: rgba(15, 23, 42, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);

    /* Logo backdrop stops - Dark Mode */
    --logo-bg-stop-1: #140b3c;
    --logo-bg-stop-2: #08041a;
    --logo-bg-stop-3: rgba(20, 16, 38, 0);
    --logo-chip-fill: #0c0728;
    --logo-starburst: rgba(168, 85, 247, 0.35);

    /* Text & Nav Brand Gradient - Dark Mode Original 80s Neon */
    --rainbow-gradient: linear-gradient(to right, #ff007f 0%, #ff00ff 16.6%, #7f00ff 33.3%, #00f0ff 50%, #00ff00 66.6%, #ffea00 83.3%, #ff5f00 100%);
}

body {
    padding-top: 56px;
    /* Space for fixed navbar if used */
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
}

/* Fix for WordPress Admin Bar overlapping fixed navbar */
body.admin-bar .navbar.fixed-top {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .navbar.fixed-top {
        top: 46px;
    }
}

/* ==========================================
   Fonts
   ========================================== */
.audiowide-regular {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ==========================================
   Fonts
   ========================================== */

.navbar-brand {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.navbar-dsp-logo .nav-logo-stroke {
    stroke: url(#nav-grad-light);
}

[data-bs-theme="dark"] .navbar-dsp-logo .nav-logo-stroke {
    stroke: url(#nav-grad-dark);
}

/* Sun/Moon Toggle Icons (Adapts to Active Theme) */
.theme-toggle-icon {
    filter: drop-shadow(0 0 1px currentColor);
    transition: filter 0.3s ease;
}

.theme-toggle-icon * {
    transition: stroke 0.3s ease;
}

#theme-toggle:hover .theme-toggle-icon {
    filter: drop-shadow(0 0 3px currentColor);
}

#theme-toggle:hover .theme-toggle-icon.sun-icon * {
    stroke: url(#toggle-grad-dark);
}

#theme-toggle:hover .theme-toggle-icon.moon-icon * {
    stroke: url(#toggle-grad-light);
}

[data-bs-theme="light"] .theme-toggle-icon.sun-icon {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle-icon.moon-icon {
    display: none;
}

/* ==========================================
   Glassmorphism Core Utilities
   ========================================== */

/* Base glassmorphic panel (automatically adapts via variables) */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(4px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

/* ==========================================
   Modifiers (Sizes & Strengths)
   ========================================== */

/* Light blur (great for overlays or nested elements) */
.glass-sm {
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* Deep blur (great for navigation bars or headers over busy content) */
.glass-lg {
    backdrop-filter: blur(4px) saturate(200%);
    -webkit-backdrop-filter: blur(4px) saturate(200%);
}

/* ==========================================
   Interactive Modifiers (For Cards/Buttons)
   ========================================== */

/* Apply this class alongside .glass to make an element hoverable */
.glass-interactive {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.glass-interactive:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
}

[data-bs-theme="dark"] .glass-interactive:hover {
    background: rgba(15, 10, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);
}

/* ==========================================
   Hero Section & Custom Layouts
   ========================================== */

.min-vh-75 {
    min-height: 75vh;
}

.min-vh-50 {
    min-height: 50vh;
}

.hero-section {
    position: relative;
    background: radial-gradient(circle at 90% 10%, rgb(99 102 241 / 20%) 0%, #00000000 40%), radial-gradient(circle at 10% 80%, rgb(168 85 247 / 2%) 0%, #00000040 40%);
    border-image: var(--rainbow-gradient) 100% 1;
    border-style: solid;
    border-width: 1px 0;
    box-shadow: white;
    box-shadow: 1px 1px 5px 0px var(--text-main);
}

/* Limit maximum height/size of hero graphics and SVGs */
.large-header,
.hero-image {
    max-width: 100%;
    max-height: 260px;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto 2rem auto;
    filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.08));
}

/* Bolder SVG strokes in Light Mode for high visibility */
[data-bs-theme="light"] .dsp-logo .hexagon-white,
[data-bs-theme="light"] .dsp-logo .hexagon-glow {
    stroke-width: 0.12px !important;
}

[data-bs-theme="light"] .dsp-logo .pcb-group {
    stroke-width: 0.15px !important;
    opacity: 0.8 !important;
}

/* For Atrium Logo */
[data-bs-theme="light"] .atrium-logo [stroke-width="0.6px"] {
    stroke-width: 0.8px !important;
}

[data-bs-theme="light"] .atrium-logo [stroke-width="0.2px"] {
    stroke-width: 0.55px !important;
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-brand,
.rainbow-text-80s {
    background: var(--rainbow-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

.txt-manchester-purple {
    color: var(--manchester-purple);
}

/* ==========================================
   Hero Card Section Overrides
   ========================================== */
.hero-section .card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: 100%;
}

/* Add right border to cards except the last one when side-by-side */
@media (min-width: 768px) {

    .hero-section .row>.col:not(:last-child) .card,
    .hero-section .wp-block-columns>.wp-block-column:not(:last-child) .card {
        border-right: 1px solid var(--border-glass) !important;
    }

    /* Force all columns inside the hero to occupy an equal portion of width */
    .hero-section .row>.col,
    .hero-section .wp-block-columns>.wp-block-column {
        flex: 1 1 0% !important;
        max-width: 100% !important;
    }

    /* Remove gutters/gaps between columns inside the hero to merge borders */
    .hero-section .row {
        --bs-gutter-x: 0 !important;
    }

    .hero-section .wp-block-columns {
        gap: 0 !important;
    }

    .hero-section .wp-block-column {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================
   Logo SVG Gradient Stops overrides (Light Mode Two-Tone)
   ========================================== */
#rainbow-grad-80s stop:nth-child(1),
#rainbow-grad-80s-2 stop:nth-child(1) {
    stop-color: #ff007f;
}

#rainbow-grad-80s stop:nth-child(2),
#rainbow-grad-80s-2 stop:nth-child(2) {
    stop-color: #cc00bf;
}

#rainbow-grad-80s stop:nth-child(3),
#rainbow-grad-80s-2 stop:nth-child(3) {
    stop-color: #9900ff;
}

#rainbow-grad-80s stop:nth-child(4),
#rainbow-grad-80s-2 stop:nth-child(4) {
    stop-color: #4d77ff;
}

#rainbow-grad-80s stop:nth-child(5),
#rainbow-grad-80s-2 stop:nth-child(5) {
    stop-color: #00f0ff;
}

#rainbow-grad-80s stop:nth-child(6),
#rainbow-grad-80s-2 stop:nth-child(6) {
    stop-color: #4d77ff;
}

#rainbow-grad-80s stop:nth-child(7),
#rainbow-grad-80s-2 stop:nth-child(7) {
    stop-color: #9900ff;
}

#rainbow-grad-80s stop:nth-child(8),
#rainbow-grad-80s-2 stop:nth-child(8) {
    stop-color: #ff007f;
}

/* ==========================================
   Logo SVG Gradient Stops overrides (Dark Mode Original Neon)
   ========================================== */
[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(1),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(1) {
    stop-color: #ff007f;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(2),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(2) {
    stop-color: #ff00ff;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(3),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(3) {
    stop-color: #7f00ff;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(4),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(4) {
    stop-color: #00f0ff;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(5),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(5) {
    stop-color: #00ff00;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(6),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(6) {
    stop-color: #ffea00;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(7),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(7) {
    stop-color: #ff5f00;
}

[data-bs-theme="dark"] #rainbow-grad-80s stop:nth-child(8),
[data-bs-theme="dark"] #rainbow-grad-80s-2 stop:nth-child(8) {
    stop-color: #ff007f;
}

/* DSP Logo Core Sharpness Overrides (Dark Mode default is 0.04px) */
.dsp-logo .hexagon-white {
    stroke-width: 0.08px !important;
}

/* Atrium Logo Core Sharpness Overrides */
.atrium-logo .atrium-white-core {
    stroke-width: 0.14px !important;
}

[data-bs-theme="light"] .atrium-logo .atrium-white-core {
    stroke-width: 0.32px !important;
}
/* Branded content lists: gradient hexagon markers instead of standard bullets */
ul.wp-block-list {
    list-style: none;
    padding-left: 0.25rem;
}

ul.wp-block-list > li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 0.65rem;
}

ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.6rem;
    height: 0.68rem;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 88"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23ff007f"/><stop offset="1" stop-color="%239900ff"/></linearGradient></defs><polygon points="38,6 70,25 70,63 38,82 6,63 6,25" fill="none" stroke="url(%23g)" stroke-width="12" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

ul.wp-block-list ul.wp-block-list {
    margin-top: 0.6rem;
    margin-bottom: 0;
    padding-left: 0.75rem;
}

ul.wp-block-list ul.wp-block-list > li {
    padding-left: 1.5rem;
    margin-bottom: 0.45rem;
}

ul.wp-block-list ul.wp-block-list > li::before {
    width: 0.44rem;
    height: 0.5rem;
    top: 0.48em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 88"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%234d77ff"/><stop offset="1" stop-color="%2300f0ff"/></linearGradient></defs><polygon points="38,6 70,25 70,63 38,82 6,63 6,25" fill="none" stroke="url(%23g)" stroke-width="12" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

[data-bs-theme="dark"] ul.wp-block-list > li::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 88"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23ff007f"/><stop offset="1" stop-color="%237f00ff"/></linearGradient></defs><polygon points="38,6 70,25 70,63 38,82 6,63 6,25" fill="none" stroke="url(%23g)" stroke-width="12" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

[data-bs-theme="dark"] ul.wp-block-list ul.wp-block-list > li::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 88"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%2300f0ff"/><stop offset="1" stop-color="%2300ff00"/></linearGradient></defs><polygon points="38,6 70,25 70,63 38,82 6,63 6,25" fill="none" stroke="url(%23g)" stroke-width="12" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}