/* =============================================================================
   Template Name : The Vault — Escape Room HTML Template
   File          : assets/css/style.css
   Author        : VaultStudio
   Version       : 1.0.0
   Description   : Global structural styles, dark/light mode overrides,
                   UI widget styles, and extracted gradient utility classes.
   =============================================================================

   TABLE OF CONTENTS
   -----------------
    1.  Base Layout Utilities
    2.  Navigation — Solid Bar & Active Link
    3.  Page Hero Banner
    4.  Dashboard — Cursor Override
    5.  Light Mode — Body & Background Reset
    6.  Light Mode — Mobile Menu
    7.  Light Mode — Page Hero
    8.  Light Mode — Stats Bar (Homepage)
    9.  Light Mode — Section Backgrounds (Rooms, FAQ, How It Works)
   10.  Light Mode — Testimonials Section
   11.  Light Mode — Grid Overlay
   12.  Light Mode — Floating Controls Widget
   13.  Light Mode — Form Inputs
   14.  Light Mode — Footer & Navigation Text
   15.  Light Mode — Comparison Table & Difficulty Bars
   16.  Light Mode — General Border / Background Overrides
   17.  Light Mode — General Text Color Overrides
   18.  Light Mode — Blog Cards, Gallery, Section Label, Divider
   19.  Light Mode — Booking & Dashboard Stat Boxes
   20.  Light Mode — What Is Escape Room Section
   21.  Light Mode — Override Protocol Section (Services Page)
   22.  Floating Controls Widget (Dark Default Styles)
   23.  Gradient Utility Classes

   ============================================================================= */


/* =============================================================================
   1. BASE LAYOUT UTILITIES
   ============================================================================= */

/* Scrollable page wrapper — prevents horizontal overflow on all pages. */
/* TODO: If you are adding a horizontal scroll/parallax effect, remove overflow-x: hidden here. */
.scrollable-page {
    overflow-y: auto;
    overflow-x: hidden;
}


/* =============================================================================
   2. NAVIGATION — SOLID BAR & ACTIVE LINK
   ============================================================================= */

/* Frosted-glass navbar style applied when the nav is in its default "solid" state. */
/* TODO: To make the navbar fully transparent by default, remove the background-color
         and border-bottom rules from .nav-solid and rely only on backdrop-filter. */
.nav-solid {
    background-color: rgba(5, 5, 5, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

/* Underline indicator for the currently active nav link (set by main.js). */
/* TODO: To switch to a dot indicator instead of an underline, add a ::after pseudo-element
         with a small circle and remove the border-bottom rule below. */
/* TODO: To change the active underline color, replace #E63946 with your brand color. */
.tx-nav-active {
    color: #fff !important;
    border-bottom: 1px solid #E63946; /* TODO: Replace with your brand accent color */
    padding-bottom: 2px;
}


/* =============================================================================
   3. PAGE HERO BANNER
   Inner-page hero panel used on About, Services, Gallery, Blog, Contact etc.
   ============================================================================= */

/* TODO: To make the hero taller, increase the min-height value (e.g., 60vh or 50vh). */
/* TODO: To add a background image to the inner-page hero, add a background-image
         rule here and set background-size: cover; background-position: center; */
.page-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5rem 3rem;
    min-height: 40vh;                                       /* TODO: Increase for taller hero banners */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Horizontal decorative divider line used between sections. */
/* TODO: To change the divider color, replace #E63946 with your brand accent color. */
/* TODO: To make the divider longer, increase the width value (e.g., 80px or 100%). */
.tx-vault-divider {
    width: 48px;
    height: 1px;
    background-color: #E63946; /* TODO: Replace with your brand accent color */
    margin: 1.5rem 0;
}


/* =============================================================================
   4. DASHBOARD PAGE — CURSOR OVERRIDE
   Hides the custom branded cursor on the Dashboard page, which has dense
   interactive widgets that work better with the default OS cursor.
   ============================================================================= */

/* TODO: To re-enable the custom cursor on the dashboard, delete these three rules. */
.dashboard-page {
    cursor: default;
}

.dashboard-page #tx-cursor,
.dashboard-page #tx-cursor-dot {
    display: none;
}


/* =============================================================================
   5. LIGHT MODE — BODY & BACKGROUND RESET
   Applied when the <html> element has the .tx-light-mode class (toggled by main.js).
   ============================================================================= */

/* TODO: To change the light mode page background, update #f7f7f7 to your preferred color. */
/* TODO: To change the light mode default text color, update #1a1a1a below. */
html.tx-light-mode body {
    background-color: #f7f7f7 !important; /* TODO: Replace with your light background color */
    color: #1a1a1a !important;            /* TODO: Replace with your light text color */
}


/* =============================================================================
   6. LIGHT MODE — MOBILE MENU
   ============================================================================= */

/* TODO: To change the light-mode mobile menu background, update rgba(255,255,255,0.98). */
html.tx-light-mode #tx-mobile-menu {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

/* Force hero section visibility — prevents text from turning dark on dark background */
html.tx-light-mode .hero-section .text-white,
html.tx-light-mode .hero-section .text-gray-300,
html.tx-light-mode .hero-section h1,
html.tx-light-mode .hero-section p,
html.tx-light-mode .hero-section .tx-btn-primary,
html.tx-light-mode .hero-section .tx-btn-outline {
    color: #ffffff !important;
}

html.tx-light-mode .hero-section .tx-btn-outline {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

html.tx-light-mode #tx-mobile-menu a {
    color: #111111 !important;
}

html.tx-light-mode #tx-mobile-menu a:hover,
html.tx-light-mode #tx-mobile-menu a.text-brand-red {
    color: #E63946 !important; /* TODO: Replace with your brand accent color */
}

html.tx-light-mode #tx-menu-close {
    color: #666666 !important;
}

html.tx-light-mode #tx-mobile-menu .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.tx-light-mode #tx-mobile-menu #theme-toggle-mobile,
html.tx-light-mode #tx-mobile-menu #rtl-toggle-mobile {
    color: #333333 !important;
}


/* =============================================================================
   7. LIGHT MODE — PAGE HERO BANNER
   ============================================================================= */

/* TODO: To change the inner-page hero background in light mode, update #f4f4f5. */
html.tx-light-mode .page-hero {
    background-color: #f4f4f5 !important; /* TODO: Replace with your light hero background */
}

html.tx-light-mode .page-hero h1,
html.tx-light-mode .page-hero h2 {
    color: #111111 !important;
}

html.tx-light-mode .page-hero .text-stroke-heavy {
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.6) !important;
}

html.tx-light-mode .page-hero .text-gray-400 {
    color: #4b5563 !important;
}


/* =============================================================================
   8. LIGHT MODE — STATS BAR (HOMEPAGE)
   The 4-column counter bar (Rooms | Minutes | Escape Rate | Rating).
   ============================================================================= */

html.tx-light-mode #tx-stats-bar {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.tx-light-mode .tx-stat-cell {
    background-color: #ffffff !important;
}

html.tx-light-mode .tx-stat-num {
    color: #111111 !important;
}


/* =============================================================================
   9. LIGHT MODE — SECTION BACKGROUNDS (ROOMS, HOW IT WORKS, ESCAPE ROOM)
   ============================================================================= */

/* Targets the room cards section which uses an inline Tailwind bg class. */
/* TODO: If you change bg-[#080808] to a named class, update the selector here. */
html.tx-light-mode .bg-\[\#080808\]:not(.tx-preserve-dark .bg-\[\#080808\]),
html.tx-light-mode .bg-black:not(.tx-preserve-dark .bg-black),
html.tx-light-mode .bg-deep-black:not(.tx-preserve-dark .bg-deep-black),
html.tx-light-mode .bg-\[\#050505\]:not(.tx-preserve-dark .bg-\[\#050505\]),
html.tx-light-mode .bg-\[\#060606\]:not(.tx-preserve-dark .bg-\[\#060606\]) {
    background-color: #f4f4f5 !important; /* TODO: Replace with your light section background */
}

/* Fix for white backgrounds/elements in light mode (e.g. hamburger spans) */
html.tx-light-mode .bg-white:not(.tx-preserve-dark .bg-white):not(.tx-btn-primary:hover):not(.tx-btn-outline:hover) {
    background-color: #111111 !important;
}

html.tx-light-mode .bg-white\/20:not(.tx-preserve-dark .bg-white\/20) {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode .bg-white\/10:not(.tx-preserve-dark .bg-white\/10) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

html.tx-light-mode .bg-white\/5:not(.tx-preserve-dark .bg-white\/5) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Fix for white borders in light mode */
html.tx-light-mode .border-white:not(.tx-preserve-dark .border-white) {
    border-color: #111111 !important;
}

html.tx-light-mode .border-white\/20:not(.tx-preserve-dark .border-white\/20) {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.tx-light-mode .border-white\/10:not(.tx-preserve-dark .border-white\/10) {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode .border-white\/8:not(.tx-preserve-dark .border-white\/8) {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.tx-light-mode .border-white\/5:not(.tx-preserve-dark .border-white\/5) {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* "How It Works" section */
html.tx-light-mode #how-it-works {
    background-color: #f4f4f5 !important;
}

html.tx-light-mode #how-it-works h2,
html.tx-light-mode #how-it-works h3 {
    color: #111111 !important;
}

html.tx-light-mode #how-it-works .text-white\/10 {
    color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode #how-it-works .text-brand-red\/20 {
    color: rgba(230, 57, 70, 0.3) !important;
}

/* "Corporate/Agency" section */
html.tx-light-mode #tx-corporate-section {
    background-color: #ffffff !important;
}

html.tx-light-mode #tx-corporate-section h2,
html.tx-light-mode #tx-corporate-section h3 {
    color: #111111 !important;
}

html.tx-light-mode #tx-corporate-section .text-white {
    color: #111111 !important;
}

html.tx-light-mode #tx-corporate-section .text-gray-300,
html.tx-light-mode #tx-corporate-section .text-gray-400 {
    color: #4b5563 !important;
}

html.tx-light-mode #tx-corporate-section .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* "What Is An Escape Room" section */
/* TODO: To change this section's light mode background, update #f4f4f5 below. */
html.tx-light-mode #what-is-escape-room {
    background-color: #f4f4f5 !important;
}

html.tx-light-mode #what-is-escape-room h2,
html.tx-light-mode #what-is-escape-room h3 {
    color: #111111 !important;
}

html.tx-light-mode #what-is-escape-room .text-gray-200,
html.tx-light-mode #what-is-escape-room .text-gray-300 {
    color: #374151 !important;
}

html.tx-light-mode #what-is-escape-room .text-white {
    color: #111111 !important;
}

html.tx-light-mode #what-is-escape-room .text-white\/50 {
    color: rgba(0, 0, 0, 0.4) !important;
}

html.tx-light-mode #what-is-escape-room .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.tx-light-mode #what-is-escape-room .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

html.tx-light-mode #what-is-escape-room .bg-white\/\[0\.02\] {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Keep text readable over the dark image cards inside this section. */
html.tx-light-mode #what-is-escape-room .relative.overflow-hidden .text-white,
html.tx-light-mode #what-is-escape-room .relative.overflow-hidden h3 {
    color: #ffffff !important;
}

html.tx-light-mode #what-is-escape-room .relative.overflow-hidden p {
    color: #d1d5db !important;
}


/* =============================================================================
   10. LIGHT MODE — TESTIMONIALS SECTION
   ============================================================================= */

html.tx-light-mode #testimonials {
    background-color: #ffffff !important; /* TODO: Replace with your preferred testimonials background */
}

html.tx-light-mode #testimonials h2 {
    color: #111111 !important;
}

html.tx-light-mode #testimonials .text-gray-300 {
    color: #374151 !important;
}

html.tx-light-mode #testimonials .text-gray-400 {
    color: #4b5563 !important;
}

html.tx-light-mode #testimonials .text-white {
    color: #111111 !important;
}

html.tx-light-mode #testimonials .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode #testimonials .border-white\/8 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.tx-light-mode #testimonials .testimonial-card {
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}


/* =============================================================================
   11. LIGHT MODE — BACKGROUND GRID OVERLAY
   ============================================================================= */

html.tx-light-mode .bg-grid {
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
}


/* =============================================================================
   12. FLOATING CONTROLS WIDGET (DARK DEFAULT STYLES)
   The fixed bottom-right widget containing the Theme and RTL toggle buttons.
   ============================================================================= */

/* TODO: To reposition the widget, change the bottom/right values below. */
/* TODO: To hide the widget entirely, set display: none on #site-controls. */
#site-controls {
    position: fixed;
    bottom: 24px; /* TODO: Adjust if you need the widget higher up */
    right: 24px;  /* TODO: Adjust for left-side positioning */
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: all;
}

/* Individual toggle button styling. */
/* TODO: To change button size, update width/height values (currently 40×40px). */
/* TODO: To change the hover accent color, replace #E63946 with your brand color. */
.site-ctrl-btn {
    width: 40px;                                   /* TODO: Increase for a larger button (e.g., 48px) */
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Space Mono', monospace;          /* TODO: Update if you change the mono font */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    line-height: 1;
}

.site-ctrl-btn:hover {
    border-color: #E63946; /* TODO: Replace with your brand accent color */
    color: #fff;
}

.site-ctrl-btn.active {
    border-color: #E63946;                         /* TODO: Replace with your brand accent color */
    background: rgba(230, 57, 70, 0.15);           /* TODO: Use rgba version of your brand color */
    color: #E63946;                                /* TODO: Replace with your brand accent color */
}


/* =============================================================================
   13. LIGHT MODE — FORM INPUTS
   Applies light-mode styling to all input, select, and textarea elements.
   ============================================================================= */

/* TODO: To change the light mode input background, update rgba(0,0,0,0.05). */
/* TODO: To change the input focus ring color, update rgba(230,57,70,0.5) to your brand color. */
html.tx-light-mode .form-input,
html.tx-light-mode input[type="text"],
html.tx-light-mode input[type="email"],
html.tx-light-mode input[type="tel"],
html.tx-light-mode input[type="number"],
html.tx-light-mode input[type="password"],
html.tx-light-mode input[type="date"],
html.tx-light-mode select,
html.tx-light-mode textarea {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #111111 !important;
}

html.tx-light-mode .form-input::placeholder,
html.tx-light-mode input::placeholder,
html.tx-light-mode textarea::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}

html.tx-light-mode .form-input:focus,
html.tx-light-mode input:focus,
html.tx-light-mode textarea:focus {
    border-color: rgba(230, 57, 70, 0.5) !important; /* TODO: Replace with rgba of your brand accent color */
}

html.tx-light-mode select option {
    background-color: #ffffff;
    color: #111111;
}


/* =============================================================================
   14. LIGHT MODE — FOOTER & NAVIGATION TEXT
   ============================================================================= */

/* TODO: To change the light mode footer background, update #f0f0f0 below. */
html.tx-light-mode footer {
    background-color: #f0f0f0 !important; /* TODO: Replace with your light footer background */
    border-top-color: rgba(0, 0, 0, 0.1) !important;
    color: #555555 !important;
}

html.tx-light-mode nav .text-gray-400 {
    color: #555555 !important;
}

html.tx-light-mode nav a:hover {
    color: #111111 !important;
}

html.tx-light-mode nav .text-white {
    color: #111111 !important;
}

html.tx-light-mode .nav-solid {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode .nav-solid a:not(.tx-btn-primary):not(.tx-btn-outline) {
    color: #111111 !important;
}

html.tx-light-mode .tx-nav-active {
    color: #111111 !important;
    border-bottom-color: #E63946 !important;
}

html.tx-light-mode .bg-black\/50:not(.tx-preserve-dark .bg-black\/50) {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

html.tx-light-mode .bg-black\/60:not(.tx-preserve-dark .bg-black\/60) {
    background-color: rgba(255, 255, 255, 0.6) !important;
}


/* =============================================================================
   15. LIGHT MODE — COMPARISON TABLE & DIFFICULTY BARS (SERVICES PAGE)
   ============================================================================= */

html.tx-light-mode table .text-white {
    color: #111111 !important;
}

html.tx-light-mode table .border-white\/5,
html.tx-light-mode table .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Difficulty bar track background (the unfilled portion). */
/* TODO: To increase the difficulty bar contrast in light mode, lower the opacity value. */
html.tx-light-mode .tx-difficulty-bar,
html.tx-light-mode .difficulty-bar {
    background: rgba(0, 0, 0, 0.08) !important;
}


/* =============================================================================
   16. LIGHT MODE — GENERAL BORDER & BACKGROUND OVERRIDES
   Converts dark Tailwind transparent-white borders and backgrounds to
   dark-on-light equivalents for the light mode.
   ============================================================================= */

html.tx-light-mode .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.tx-light-mode .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.18) !important;
}

html.tx-light-mode .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.tx-light-mode .bg-white\/\[0\.02\] {
    background: rgba(0, 0, 0, 0.03) !important;
}

html.tx-light-mode .bg-white\/5 {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.tx-light-mode .bg-white\/10 {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.tx-light-mode .bg-white\/\[0\.03\] {
    background: rgba(0, 0, 0, 0.03) !important;
}

html.tx-light-mode .bg-white\/\[0\.05\] {
    background: rgba(0, 0, 0, 0.05) !important;
}

html.tx-light-mode .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode .bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

html.tx-light-mode .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

html.tx-light-mode .bg-white.text-black:not(.tx-preserve-dark .bg-white.text-black) {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html.tx-light-mode .bg-white.text-black:not(.tx-preserve-dark .bg-white.text-black):hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}


/* =============================================================================
   17. LIGHT MODE — GENERAL TEXT COLOR OVERRIDES
   Converts Tailwind gray text classes to dark equivalents in light mode.
   The :not() guards prevent these overrides from affecting sections that must
   remain dark (image overlays, hero sections, and .tx-preserve-dark regions).
   ============================================================================= */

/* TODO: To change light mode body text contrast, adjust the color values below.
         Lower hex values (e.g., #0f0f0f) create stronger contrast;
         higher values (e.g., #4b5563) are softer and easier on the eyes. */

html.tx-light-mode .text-gray-100:not(.tx-preserve-dark .text-gray-100):not(section:has(.absolute img) .text-gray-100):not(.tx-hero-section .text-gray-100) {
    color: #1a1a1a !important;
}

html.tx-light-mode .text-gray-200:not(.tx-preserve-dark .text-gray-200):not(section:has(.absolute img) .text-gray-200):not(.tx-hero-section .text-gray-200):not(.hero-section .text-gray-200) {
    color: #333333 !important;
}

html.tx-light-mode .text-gray-300:not(.tx-preserve-dark .text-gray-300):not(section:has(.absolute img) .text-gray-300):not(.tx-hero-section .text-gray-300):not(.hero-section .text-gray-300) {
    color: #4b5563 !important;
}

html.tx-light-mode .text-gray-400:not(.tx-preserve-dark .text-gray-400):not(section:has(.absolute img) .text-gray-400):not(.tx-hero-section .text-gray-400):not(.hero-section .text-gray-400) {
    color: #555555 !important;
}

html.tx-light-mode .text-gray-500:not(.tx-preserve-dark .text-gray-500):not(section:has(.absolute img) .text-gray-500):not(.tx-hero-section .text-gray-500):not(.hero-section .text-gray-500) {
    color: #6b7280 !important;
}

html.tx-light-mode .text-gray-700:not(.tx-preserve-dark .text-gray-700):not(section:has(.absolute img) .text-gray-700):not(.tx-hero-section .text-gray-700):not(.hero-section .text-gray-700) {
    color: #374151 !important;
}

html.tx-light-mode .text-white:not(.tx-btn-primary):not(.tx-btn-outline):not(.tx-preserve-dark .text-white):not(.tx-room-card-content .text-white):not(.hero-section .text-white) {
    color: #111111 !important;
}

html.tx-light-mode .text-white\/70:not(.tx-preserve-dark .text-white\/70):not(.hero-section .text-white\/70) {
    color: rgba(0, 0, 0, 0.7) !important;
}

html.tx-light-mode .text-white\/50:not(.tx-preserve-dark .text-white\/50):not(.hero-section .text-white\/50) {
    color: rgba(0, 0, 0, 0.5) !important;
}

html.tx-light-mode .text-white\/80:not(.tx-preserve-dark .text-white\/80):not(.hero-section .text-white\/80) {
    color: rgba(0, 0, 0, 0.8) !important;
}

html.tx-light-mode .text-white\/40:not(.tx-preserve-dark .text-white\/40):not(.hero-section .text-white\/40) {
    color: rgba(0, 0, 0, 0.4) !important;
}

html.tx-light-mode .text-white\/10:not(.tx-preserve-dark .text-white\/10):not(.hero-section .text-white\/10) {
    color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode .text-gray-100\/70 {
    color: rgba(0, 0, 0, 0.6) !important;
}

html.tx-light-mode .text-stroke {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5) !important;
}

html.tx-light-mode .text-stroke-heavy {
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.6) !important;
}


/* =============================================================================
   18. LIGHT MODE — BLOG CARDS, GALLERY, SECTION LABEL, DIVIDER
   ============================================================================= */

/* Blog cards and <article> elements */
html.tx-light-mode .tx-blog-card,
html.tx-light-mode article {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Gallery image opacity adjustments in light mode */
html.tx-light-mode .tx-gallery-item img {
    opacity: 1 !important;
}

html.tx-light-mode .tx-gallery-item:hover img {
    opacity: 0.85 !important;
}

/* Section label ("// Active Operations", "// The Experience", etc.) */
/* TODO: To change the section label color in light mode, update #E63946 below. */
html.tx-light-mode .tx-section-label {
    color: #E63946 !important; /* TODO: Replace with your brand accent color */
}

/* Horizontal red divider line */
html.tx-light-mode .tx-vault-divider {
    background-color: #E63946 !important; /* TODO: Replace with your brand accent color */
}


/* =============================================================================
   19. LIGHT MODE — BUTTONS (PRIMARY & OUTLINE)
   ============================================================================= */

/* Outline buttons — dark border and text for light backgrounds */
html.tx-light-mode .tx-btn-outline:not(.hero-section .tx-btn-outline):not(.tx-preserve-dark .tx-btn-outline),
html.tx-light-mode .tx-btn-outline-sm:not(.hero-section .tx-btn-outline-sm):not(.tx-preserve-dark .tx-btn-outline-sm) {
    border-color: rgba(0, 0, 0, 0.4) !important;
    color: #111111 !important;
}

/* Primary buttons hover state — swap to dark hover for light backgrounds */
html.tx-light-mode .tx-btn-primary:not(.hero-section .tx-btn-primary):not(.tx-preserve-dark .tx-btn-primary):hover,
html.tx-light-mode .tx-btn-primary-desktop:not(.hero-section .tx-btn-primary-desktop):not(.tx-preserve-dark .tx-btn-primary-desktop):hover,
html.tx-light-mode .tx-btn-primary-sm:not(.hero-section .tx-btn-primary-sm):not(.tx-preserve-dark .tx-btn-primary-sm):hover {
    background-color: #050505 !important;
    color: #ffffff !important;
}


/* =============================================================================
   19. LIGHT MODE — OVERRIDE PROTOCOL SECTION (SERVICES PAGE)
   ============================================================================= */

html.tx-light-mode #override-protocol-section {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.tx-light-mode #override-protocol-section .explainer-header .text-white,
html.tx-light-mode #override-protocol-section .explainer-header h2 {
    color: #111111 !important;
}

html.tx-light-mode #override-protocol-section .explainer-header .text-gray-400,
html.tx-light-mode #override-protocol-section .explainer-header p {
    color: #4b5563 !important;
}


/* =============================================================================
   20. GRADIENT UTILITY CLASSES
   Pre-built gradient helpers applied via class on <div> elements in the HTML.
   All gradients use the deep-black (#050505) and brand-red (#E63946) palette.
   TODO: To change gradient colors, update the rgba(5,5,5,...) and rgba(230,57,70,...)
         values below to match your new brand palette.
   TODO: To adjust gradient intensity, change the opacity values in each rgba().
   ============================================================================= */

/* Standard fade from solid black at bottom to transparent at top. Used on room cards. */
.tx-bg-gradient-fade-bottom         { background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.4) 55%, transparent 100%); }

/* Lighter version — slightly more of the image shows through. */
.tx-bg-gradient-fade-bottom-light   { background: linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.4) 55%, transparent 100%); }

/* Diagonal overlay for the hero section — darkens corners to frame content. */
.tx-bg-gradient-hero                { background: linear-gradient(135deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.4) 40%, rgba(5,5,5,0.95) 100%); }

/* Subtle top-and-bottom vignette overlay. Used on full-bleed sections. */
.tx-bg-gradient-overlay             { background: linear-gradient(to bottom, rgba(5,5,5,0.15) 0%, rgba(5,5,5,0.0) 30%, rgba(5,5,5,0.0) 70%, rgba(5,5,5,0.5) 100%); }

/* Repeating scan-line texture — a subtle CRT / terminal aesthetic. */
/* TODO: To remove scan lines, delete this class and remove all uses from the HTML. */
.tx-bg-scanlines                    { background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,1) 2px, rgba(0,0,0,1) 4px); }

/* Red corner glow — used on image cards to add brand-color warmth. */
.tx-bg-gradient-red-corner          { background: linear-gradient(135deg, rgba(230,57,70,0.12) 0%, transparent 60%); }

/* Stronger red corner — used on the agency/corporate section image. */
.tx-bg-gradient-red-corner-strong   { background: linear-gradient(135deg, rgba(230,57,70,0.15) 0%, transparent 60%); }

/* Horizontal center glow — red pulse in the middle of a dark band. Used on CTA sections. */
.tx-bg-gradient-center-glow         { background: linear-gradient(to right, rgba(5,5,5,0.95) 0%, rgba(230,57,70,0.15) 50%, rgba(5,5,5,0.95) 100%); }

/* Fine white grid lines — used as a subtle texture background on some sections. */
/* TODO: To change grid cell size, update the 40px 40px background-size value. */
.tx-bg-grid-white                   { background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px; }

/* Inverts the Google Maps embed to match the dark/terminal color palette. */
/* TODO: To show the map in its normal colors (no filter), remove this class from
         the map <iframe> element in contact.html. */
.tx-map-filter                      { filter: invert(90%) hue-rotate(180deg) saturate(0.4) brightness(0.85); }