/*
Theme Name:        Bangla LED Premium
Theme URI:         https://bangla-led.com
Author:            Bangla LED
Author URI:        https://bangla-led.com
Description:       An ultra-premium, cinema-grade dark theme for the Bangla LED Digital Out-Of-Home (DOOH) billboard network in Bangladesh. Luxury editorial minimalism, Swiss-inspired typography, and cinematic glassmorphism. Built for programmatic local SEO with a siloed Locations custom post type. No page builders required.
Version:           1.1.1
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       bangla-led
Tags:              dark, black, one-column, custom-menu, custom-logo, featured-images, full-width-template
*/

/* -------------------------------------------------------------------------
   Bangla LED Premium — Core stylesheet
   Tailwind (CDN) handles utility classes. Everything below is the custom
   material system: glassmorphism, scrollbar, marquee, and base resets that
   must survive even if the CDN is unreachable.
   ------------------------------------------------------------------------- */

:root {
    --bl-black: #000000;
    --bl-surface: #141313;
    --bl-surface-bright: #3a3939;
    --bl-white: #ffffff;
    --bl-grey: #c4c7c8;
}

html {
    background: var(--bl-black);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bl-black);
    color: var(--bl-white);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--bl-white);
    color: var(--bl-surface);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #141313; }
::-webkit-scrollbar-thumb { background: #3a3939; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #636565; }

/* -------------------------------------------------------------------------
   Glassmorphism material system — sharp corners only (0px radius)
   ------------------------------------------------------------------------- */

.glass-panel {
    background: rgba(20, 19, 19, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

.glass-button {
    background: rgba(217, 4, 41, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 64, 87, 0.6);
    border-radius: 0;
    color: #ffffff !important;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.glass-button:hover {
    border-color: #ffffff;
    background: #e50914;
    box-shadow: 0 0 24px rgba(229, 9, 20, 0.45);
}

.glass-nav {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.input-glass {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    color: var(--bl-white);
    transition: all 0.3s ease;
}

.input-glass::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.input-glass:focus {
    outline: none;
    box-shadow: none;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.chip {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    border-radius: 0;
}

/* -------------------------------------------------------------------------
   Client logo marquee — pure CSS infinite scroll
   ------------------------------------------------------------------------- */

.marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: bl-marquee 36s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes bl-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   Map pin glow
   ------------------------------------------------------------------------- */

.map-pin {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------------------
   Mobile navigation panel
   ------------------------------------------------------------------------- */

.mobile-menu {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu[hidden] {
    display: none;
}

/* -------------------------------------------------------------------------
   WordPress core compatibility
   ------------------------------------------------------------------------- */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.alignwide, .alignfull {
    width: 100%;
}

.wp-caption {
    max-width: 100%;
}

/* Entry content typography on black */
.entry-content p,
.entry-content ul,
.entry-content ol {
    color: #c4c7c8;
    line-height: 1.7;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.entry-content a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
}