/*
Theme Name: Dhanote Broadband
Theme URI: https://dhanote.net
Author: Dhanote Broadband
Author URI: https://dhanote.net
Description: A modern, performant, and fully animated custom theme for Dhanote Broadband.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dhanote
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme is designed with deep glassmorphism, glowing orbs, and modern GSAP animations.
*/

:root {
    --color-primary: #6B2C7A;
    --color-secondary: #D6006D;
    --color-accent: #D6006D; /* The single accent color */
    --color-background-dark: #07090e; /* deeper near-black navy */
    --color-card-dark: rgba(21, 26, 37, 0.4); /* Frosted translucent base */
    --color-text-light: #ffffff;
    --color-text-muted: #94a0b8; /* slightly cooler, muted blue-gray */
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --font-primary: 'Outfit', sans-serif;
}

/* overflow-x must be hidden on BOTH html and body: some mobile browsers
   only respect it on the root element, and without it here the page can
   be dragged/panned horizontally, taking the fixed header along with it. */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background-dark);
    color: var(--color-text-muted);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* ------------------------
   Ambient Background Glows
   ------------------------ */
.ambient-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(214,0,109,0.15) 0%, rgba(107,44,122,0) 70%);
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    animation: floatGlow 15s ease-in-out infinite alternate;
}

.ambient-glow.primary {
    top: -200px;
    left: -200px;
}

.ambient-glow.secondary {
    top: 40%;
    right: -300px;
    background: radial-gradient(circle, rgba(107,44,122,0.15) 0%, rgba(214,0,109,0) 70%);
    animation-duration: 20s;
    animation-delay: -5s;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 150px) scale(1.2); }
}

/* ------------------------
   Gradient Backgrounds
   ------------------------ */
.bg-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    position: relative;
    overflow: hidden;
}

/* ------------------------
   Glassmorphism 2.0 Cards
   ------------------------ */
.dark-card {
    background: var(--color-card-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 40px rgba(0,0,0,0.4);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

.dark-card:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 30px 60px rgba(214, 0, 109, 0.15);
    border-color: rgba(214, 0, 109, 0.4); /* pink glow border */
}

/* ------------------------
   Typography
   ------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--color-text-light);
    letter-spacing: -0.02em;
}

p {
    line-height: 1.7;
    font-weight: 300;
    font-size: 1.05rem;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary);
}

/* ------------------------
   Icons (Phosphor Override)
   ------------------------ */
i.ph, i.ph-fill, i.ph-duotone {
    font-size: 48px;
    color: var(--color-accent);
    margin-bottom: 20px;
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.dark-card:hover i.ph {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(214, 0, 109, 0.6));
}

/* ------------------------
   Button Styles
   ------------------------ */
.btn {
    padding: 16px 36px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-align: center;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.btn-outline-white {
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,0.1);
    border-color: #ffffff;
}

.btn-solid-white {
    background: #ffffff;
    color: var(--color-background-dark);
    border: 1px solid #ffffff;
}
.btn-solid-white:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.btn-accent {
    background: var(--color-accent);
    color: #ffffff;
    border: 1px solid var(--color-accent);
    box-shadow: 0 4px 15px rgba(214, 0, 109, 0.3);
}
.btn-accent:hover {
    box-shadow: 0 15px 30px rgba(214, 0, 109, 0.5);
}

/* ------------------------
   Animated Fiber Optic Network Wire Canvas Overlay
   ------------------------ */
#network-wire-canvas {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vw/100vh (not 100%) on a fixed element is a classic cause of
       horizontal drag/overflow on mobile: vw includes the scrollbar
       gutter on many mobile browsers, making this a few pixels wider
       than the real viewport and letting the whole page pan sideways. */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

/* ------------------------
   Navigation Menu Styles
   ------------------------ */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.nav-menu li a {
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: capitalize;
    position: relative;
    padding: 10px 0;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-menu li a:hover::after,
.nav-menu li.current-menu-item > a::after {
    width: 100%;
}

/* ------------------------
   Global Responsive System (All Devices)
   ------------------------ */

/* Container safety */
.container {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

/* Fluid Media Elements */
img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Fluid responsive typography */
h1 {
    font-size: clamp(2rem, 5.5vw, 4rem);
}

h2 {
    font-size: clamp(1.6rem, 3.8vw, 2.8rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
}

p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

/* CEO Spotlight Responsive Layout */
@media (max-width: 850px) {
    .ceo-spotlight .dark-card {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 30px 20px !important;
    }
}

/* Tablets and Mobile Overrides (<= 992px) */
@media (max-width: 992px) {
    .ambient-glow {
        width: 300px !important;
        height: 300px !important;
        filter: blur(50px) !important;
    }

    /* !important: many templates set a fixed inline padding (e.g. "padding:
       40px") on .dark-card, which otherwise silently defeats this rule and
       lets cards keep desktop-sized padding (and overflow) on phones. */
    .dark-card {
        padding: 2rem 1.5rem !important;
        border-radius: 16px;
    }

    .btn {
        padding: 14px 28px;
        font-size: 1rem;
    }

    /* Prevent grid overflows on smaller viewports.
       !important is required: these grids are set via inline style="",
       which otherwise always wins over a plain stylesheet rule. */
    div[style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }

    /* Force real fluid typography: headings/paragraphs almost always carry
       an inline font-size on this theme, which silently defeats the clamp()
       rules above. !important restores the fluid scaling on tablets/phones
       without touching the desktop sizes each template was designed for. */
    h1 { font-size: clamp(2rem, 6vw, 3rem) !important; }
    h2 { font-size: clamp(1.5rem, 4.5vw, 2.3rem) !important; }
    h3 { font-size: clamp(1.2rem, 3.2vw, 1.7rem) !important; }
    p  { font-size: clamp(0.95rem, 2vw, 1.05rem) !important; }

    /* Hero/page-header sections use very tall inline padding designed for
       desktop; shrink it so mobile visitors aren't scrolling past mostly
       empty space before reaching content. */
    section[class*="hero"] {
        padding-top: 130px !important;
        padding-bottom: 70px !important;
    }

    /* Match the shorter fixed header at this breakpoint so the single-tool
       sub-nav sticks just below it instead of underneath it. */
    .tool-subnav {
        top: 68px !important;
    }
}

/* Mobile Phones (<= 576px) */
@media (max-width: 576px) {
    body {
        padding-top: 55px;
    }

    .site-header {
        padding: 6px 0;
    }

    .logo-badge {
        padding: 4px 10px !important;
        border-radius: 8px !important;
        max-width: calc(100vw - 80px) !important;
    }

    .logo-badge img {
        max-height: 32px !important;
    }

    .dark-card {
        padding: 1.5rem 1.15rem !important;
    }

    .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    /* Stack buttons & action blocks vertically */
    .hero-content div[style*="display: flex; gap"],
    .bg-gradient div[style*="display: flex; gap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Any remaining inline flex row (forms, input+button bars, split
       layouts) should stack on phones instead of squeezing side by side.
       Excludes intentional horizontal-scroll strips (overflow-x carousels
       like the testimonial slider), which must stay nowrap to scroll. */
    div[style*="display: flex"][style*="gap"]:not([style*="overflow-x"]) {
        flex-wrap: wrap !important;
    }

    /* Grids get a tighter safe minimum on true phone widths so a single
       column never forces horizontal scrolling on narrow devices. */
    div[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .site-info {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }

    /* Hero headings/buttons should never force horizontal scroll and
       stacked CTA links should be full-width & centered, not two
       side-by-side links running off the edge of the viewport. */
    section[class*="hero"] {
        padding-top: 100px !important;
        padding-bottom: 55px !important;
    }

    section[class*="hero"] a.btn {
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Long/unbreakable tokens (emails, urls, IPs) must wrap rather than
       overflow the viewport width on narrow phones. */
    p, li, td, th {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .tool-subnav {
        top: 55px !important;
    }
}

/* Ultra Small Mobile Screens (<= 400px) */
@media (max-width: 400px) {
    h1 { font-size: clamp(1.6rem, 8.5vw, 2rem) !important; }
    h2 { font-size: clamp(1.3rem, 7vw, 1.6rem) !important; }

    .btn {
        padding: 13px 20px;
        font-size: 0.95rem;
    }
}