/* ==========================================================================
   RoletyAlu - Custom Styles
   ========================================================================== */

/* Theme Variables
   ========================================================================== */

:root {
    --color-orange: #ed6c11;
    --color-bg: #f5f5f5;
    --color-bg-secondary: #ffffff;
    --color-card: #ffffff;
    --color-header: #ffffff;
    --color-header-nav: #fafafa;
    --color-hover: #f0f0f0;
    --color-footer: #f8f8f8;
    --color-border: #e0e0e0;
    --color-border-subtle: #eeeeee;
    --color-text: #1a1a1a;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;
    --color-text-dim: #d1d5db;
    --color-mask-strong: rgba(255, 255, 255, 0.9);
    --color-mask-medium: rgba(255, 255, 255, 0.4);
    --color-mask-light: rgba(255, 255, 255, 0.2);
    --color-overlay: rgba(255, 255, 255, 0.6);
}

.dark-theme {
    --color-bg: #141414;
    --color-bg-secondary: #181818;
    --color-card: #1e1e1e;
    --color-header: #1a1a1a;
    --color-header-nav: #1c1c1c;
    --color-hover: #262626;
    --color-footer: #0f0f0f;
    --color-border: #333333;
    --color-border-subtle: #1e1e1e;
    --color-text: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-faint: #6b7280;
    --color-text-dim: #4b5563;
    --color-mask-strong: rgba(24, 24, 24, 0.9);
    --color-mask-medium: rgba(24, 24, 24, 0.4);
    --color-mask-light: rgba(24, 24, 24, 0.2);
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/* Base
   ========================================================================== */

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout
   ========================================================================== */

.content-wrap {
    width: 85%;
    max-width: 1920px;
}

/* Utilities
   ========================================================================== */

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Light information panels for product decision blocks
   ========================================================================== */

body:not(.dark-theme) .mosq-light-panel,
body:not(.dark-theme) .mosq-light-scope .accent-dark.bg-brand-card {
    background: #ffffff !important;
    border-color: #dde3ea !important;
    box-shadow: 0 10px 30px rgba(23, 32, 51, 0.06);
}

body:not(.dark-theme) .mosq-light-panel .bg-brand-dark,
body:not(.dark-theme) .mosq-light-scope .bg-brand-dark {
    background: #f8fafc !important;
    border-color: #dde3ea !important;
}

body:not(.dark-theme) .mosq-light-panel .text-white,
body:not(.dark-theme) .mosq-light-scope .text-white {
    color: #172033 !important;
}

body:not(.dark-theme) .mosq-light-panel .text-gray-400,
body:not(.dark-theme) .mosq-light-scope .text-gray-400 {
    color: #667085 !important;
}

body:not(.dark-theme) .mosq-light-panel .border-brand-border,
body:not(.dark-theme) .mosq-light-scope .border-brand-border {
    border-color: #dde3ea !important;
}

body:not(.dark-theme) .mosq-light-panel .divide-brand-border > :not([hidden]) ~ :not([hidden]) {
    border-color: #dde3ea !important;
}

/* Theme Toggle Button
   ========================================================================== */

.theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: #ed6c11;
    color: #ed6c11;
}

.theme-toggle-desktop {
    display: none;
}

.nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text-muted);
    transition: all 0.3s ease;
}

.nav-btn:hover {
    border-color: #ed6c11;
    color: #ed6c11;
}

.nav-btn-mobile {
    display: flex;
}

@media (min-width: 1024px) {
    .theme-toggle-desktop {
        display: flex;
    }

    .nav-btn-mobile {
        display: none !important;
    }
}

.theme-toggle .icon-light,
.theme-toggle .icon-dark {
    transition: opacity 0.3s ease;
}

/* 
   By default (no class = Light): Show Moon (icon-light)
   When .dark-theme is on: Show Sun (icon-dark)
*/
.theme-toggle .icon-light { display: flex; }
.theme-toggle .icon-dark  { display: none; }

.dark-theme .theme-toggle .icon-light { display: none; }
.dark-theme .theme-toggle .icon-dark  { display: flex; }

/* ==========================================================================
   Dark Accent Sections (header nav + footer always dark, even in light theme)
   ========================================================================== */

/* Scope dark-mode CSS variables to .accent-dark elements in light theme */
/* Slightly lighter dark accent (e.g. top header bar) */
body:not(.dark-theme) .accent-dark-soft {
    --color-header: #1c1c1c;
    --color-header-nav: #1c1c1c;
    --color-border: #2a2a2a;
    --color-border-subtle: #141414;
    --color-hover: #333333;
    --color-text: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-faint: #6b7280;
    --color-text-dim: #4b5563;
}

body:not(.dark-theme) .accent-dark {
    --color-bg: #141414;
    --color-bg-secondary: #181818;
    --color-card: #141414;
    --color-header: #1a1a1a;
    --color-header-nav: #1c1c1c;
    --color-hover: #262626;
    --color-footer: #0f0f0f;
    --color-border: #333333;
    --color-border-subtle: #1e1e1e;
    --color-text: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-faint: #6b7280;
    --color-text-dim: #4b5563;
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Theme Overrides
   ========================================================================== */

/* Background overrides */
.bg-\[\#181818\]  { background-color: var(--color-bg-secondary) !important; }
.bg-\[\#1e1e1e\]  { background-color: var(--color-card) !important; }
.bg-\[\#1c1c1c\]  { background-color: var(--color-header-nav) !important; }
.bg-\[\#262626\]  { background-color: var(--color-hover) !important; }
.bg-\[\#141414\]  { background-color: var(--color-bg) !important; }
.bg-\[\#0f0f0f\]  { background-color: var(--color-footer) !important; }

/* Hover background overrides (Tailwind hover: variants use hardcoded values) */
.hover\:bg-\[\#262626\]:hover { background-color: var(--color-hover) !important; }
.group-hover\:bg-\[\#262626\]:is(.group:hover *) { background-color: var(--color-hover) !important; }

/* Background brand classes */
.bg-brand-dark   { background-color: var(--color-bg) !important; }
.bg-brand-card   { background-color: var(--color-card) !important; }
.bg-brand-header { background-color: var(--color-header) !important; }

/* Border overrides */
.border-\[\#1e1e1e\]   { border-color: var(--color-border-subtle) !important; }
.border-brand-border   { border-color: var(--color-border) !important; }

/* Gradient overrides */
.from-\[\#181818\]  { --tw-gradient-from: var(--color-bg-secondary) !important; }
.via-\[\#181818\]   { --tw-gradient-via: var(--color-bg-secondary) !important; }
.to-\[\#181818\]    { --tw-gradient-to: var(--color-bg-secondary) !important; }
.from-\[\#141414\]  { --tw-gradient-from: var(--color-bg) !important; }
.to-\[\#141414\]    { --tw-gradient-to: var(--color-bg) !important; }

/* Special Gradient case */
.bg-gradient-to-b.from-\[\#181818\] {
    --tw-gradient-from: var(--color-bg-secondary) !important;
    --tw-gradient-to: var(--color-bg) !important;
}

/* Text color overrides */
.text-white       { color: var(--color-text) !important; }
.text-gray-100    { color: var(--color-text-secondary) !important; }
.text-gray-300    { color: var(--color-text-muted) !important; }
.text-gray-400    { color: var(--color-text-muted) !important; }
.text-gray-500    { color: var(--color-text-faint) !important; }
.text-gray-600    { color: var(--color-text-dim) !important; }

/* Hover text - allow some brand colors or variables */
.hover\:text-white:hover { color: var(--color-text) !important; }
.group-hover\:text-white:is(.group:hover *) { color: var(--color-text) !important; }

/* Mosquito decision panels should follow the theme toggle */
body:not(.dark-theme) .mosq-light-panel.accent-dark {
    --color-bg: #ffffff;
    --color-card: #f8fafc;
    --color-border: #dde3ea;
    --color-text: #172033;
    --color-text-muted: #667085;
}

body:not(.dark-theme) .mosq-light-panel.accent-dark.bg-brand-card {
    background-color: #f8fafc !important;
    border-color: #dde3ea !important;
}

body:not(.dark-theme) .mosq-light-panel .bg-brand-dark {
    background-color: #ffffff !important;
    border-color: #dde3ea !important;
}

body:not(.dark-theme) .mosq-light-panel .text-white {
    color: #172033 !important;
}

body:not(.dark-theme) .mosq-light-panel .text-gray-400 {
    color: #667085 !important;
}

body:not(.dark-theme) .mosq-light-panel .border-brand-border,
body:not(.dark-theme) .mosq-light-panel .divide-brand-border > :not([hidden]) ~ :not([hidden]) {
    border-color: #dde3ea !important;
}

/* Shadow overrides */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}
.dark-theme .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Overlay / backdrop overrides */
.bg-black\/50 { background-color: var(--color-overlay) !important; }

/* Logo: always the same — header is dark (#1c1c1c) in both themes */
header img[alt="RoletyAlu"] {
    filter: none;
}

/* Hero text backdrop – applies only when NOT in dark theme or explicitly for contrast */
.hero-text-backdrop {
    display: inline-block;
    border-radius: 0.875rem;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1rem 1.5rem 1.25rem;
}

/* Minimalist subpage hero – no backdrop box, just clean text on gradient */
.page-hero.bg-brand-dark {
    background-color: #141414 !important;
}
.page-hero h1,
.page-hero .hero-breadcrumb a,
.page-hero .hero-breadcrumb span {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* Hero text should always be white on video */
.hero-text-backdrop h1,
.hero-text-backdrop h2,
.hero-text-backdrop nav,
.hero-text-backdrop nav a,
.hero-text-backdrop nav span,
.hero-text-backdrop nav i {
    color: #ffffff !important;
}

/* Hero section is always dark — higher specificity (.bg-brand-dark has 0,1,0; this has 0,1,1) */
section.bg-brand-dark:has(> video) {
    background-color: #141414 !important;
}
section.bg-brand-dark:has(> video) .bg-gradient-to-t.from-brand-dark {
    opacity: 1 !important;
    --tw-gradient-from: #141414 !important;
    --tw-gradient-to: transparent !important;
}
body:not(.dark-theme) section.bg-brand-dark:has(> video) .bg-gradient-to-t.from-brand-dark {
    background-image: linear-gradient(to top, var(--color-bg) 0%, transparent 15%) !important;
}

/* Hide other image/video masks in light theme */
.bg-gradient-to-t.from-\[\#181818\],
.bg-gradient-to-t.from-\[\#141414\] {
    opacity: 0 !important;
}
.dark-theme .bg-gradient-to-t.from-\[\#181818\],
.dark-theme .bg-gradient-to-t.from-\[\#141414\] {
    opacity: 1 !important;
}

/* Exterior shutters category: lighter editorial layout in the default theme */
body.category-rolety-zewnetrzne:not(.dark-theme) {
    --color-bg: #f6f7f9;
    --color-bg-secondary: #ffffff;
    --color-card: #ffffff;
    --color-border: #dde3ea;
    --color-border-subtle: #edf0f4;
    --color-text: #172033;
    --color-text-secondary: #374151;
    --color-text-muted: #667085;
    --color-text-faint: #8b95a5;
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page {
    background:
        linear-gradient(180deg, #ffffff 0, #f6f7f9 34rem),
        #f6f7f9;
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .accent-dark {
    --color-bg: #f6f7f9;
    --color-bg-secondary: #ffffff;
    --color-card: #ffffff;
    --color-border: #dde3ea;
    --color-border-subtle: #edf0f4;
    --color-hover: #f2f5f8;
    --color-text: #172033;
    --color-text-secondary: #374151;
    --color-text-muted: #667085;
    --color-text-faint: #8b95a5;
    --color-text-dim: #a3acba;
    --color-overlay: rgba(255, 255, 255, 0.58);
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .page-hero .bg-gradient-to-t {
    background-image: linear-gradient(
        to top,
        rgba(246, 247, 249, 0.96) 0%,
        rgba(246, 247, 249, 0.55) 20%,
        rgba(0, 0, 0, 0.08) 100%
    ) !important;
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .surface-band {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .bg-brand-card {
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page a.bg-brand-card:hover,
body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .group.bg-brand-card:hover,
body.category-rolety-zewnetrzne:not(.dark-theme) .category-page details.bg-brand-card:hover {
    box-shadow: 0 20px 55px rgba(237, 108, 17, 0.13);
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .bg-\[\#141414\] {
    background: linear-gradient(145deg, #f8fafc, #e8edf3) !important;
}

body.category-rolety-zewnetrzne:not(.dark-theme) .category-page .from-\[\#1a1a1a\] {
    --tw-gradient-from: rgba(232, 237, 243, 0.95) !important;
    --tw-gradient-to: rgba(232, 237, 243, 0) !important;
}

/* Transitions */
header,
footer,
section,
.bg-brand-card,
.bg-brand-header,
.bg-\[\#181818\],
.bg-\[\#1e1e1e\],
.bg-\[\#1c1c1c\],
.bg-\[\#0f0f0f\],
.bg-\[\#141414\],
.theme-toggle,
.nav-btn {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}