/* public/css/style.css */

/* ============================================================
   🌟 PREMIUM TYPOGRAPHY SYSTEM — AdsVolt
   Font Stack:
   - Display  → Bricolage Grotesque (Hero, Big Headlines)
   - Headings → Plus Jakarta Sans   (H1–H5, Cards)
   - Body     → Inter               (Paragraphs, UI text)
   - Mono     → JetBrains Mono      (Code, Labels, Badges)
   ============================================================ */

/* ─── 1. CSS Font Variables ─────────────────────────────── */
:root {
    --brand-color: #0d6efd;

    /* Font Families */
    --font-display:  'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-heading:  'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Type Scale (fluid clamp) */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.0625rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  clamp(1.75rem, 3vw, 2rem);
    --text-4xl:  clamp(2rem,    4vw, 2.5rem);
    --text-5xl:  clamp(2.5rem,  5vw, 3.5rem);
    --text-6xl:  clamp(3rem,    6vw, 4.5rem);
    --text-hero: clamp(3.5rem,  8vw, 6rem);

    /* Line Heights */
    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.8;
    --leading-loose:   2.0;

    /* Letter Spacing */
    --tracking-tight:   -0.04em;
    --tracking-snug:    -0.02em;
    --tracking-normal:   0;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.1em;
    --tracking-widest:   0.15em;

    /* Font Weights */
    --weight-light:     300;
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;
}

/* ─── 2. Base Body Typography ───────────────────────────── */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: -0.01em;
    background-color: #f8fafc;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── 3. Heading Hierarchy ──────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-snug);
    color: #0f172a;
    margin-bottom: 0.5em;
}
h1, .h1 { font-size: var(--text-4xl);  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--text-3xl);  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-size: var(--text-2xl);  font-weight: var(--weight-bold); }
h4, .h4 { font-size: var(--text-xl);   font-weight: var(--weight-bold); }
h5, .h5 { font-size: var(--text-lg);   font-weight: var(--weight-semibold); }
h6, .h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: 0; }

/* ─── 4. Display / Hero Font ────────────────────────────── */
.display-font,
.section-title,
.hero-title {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

/* Bootstrap display classes override */
.display-1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.display-2 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;  }
.display-3 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;  }
.display-4 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.display-5 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;  }
.display-6 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

.fw-black { font-weight: 800 !important; }

/* ─── 5. Body / Paragraph Styles ───────────────────────── */
p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: #334155;
    margin-bottom: 1rem;
}
.lead {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: var(--leading-relaxed);
    color: #475569;
}

/* ─── 6. Monospace / Code ───────────────────────────────── */
code, kbd, pre, samp, .font-mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: -0.01em;
}
code {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    padding: 0.15em 0.45em;
    border-radius: 5px;
    font-weight: 500;
}
pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.7;
    border: 1px solid rgba(255,255,255,0.05);
}
pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }

/* ─── 7. Labels / Badges / UI text ─────────────────────── */
.text-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}
.badge { font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
small, .small { font-size: var(--text-sm); font-weight: var(--weight-regular); }

/* ─── 8. Typography Utility Classes ────────────────────── */
.font-display  { font-family: var(--font-display)  !important; }
.font-heading  { font-family: var(--font-heading)  !important; }
.font-body     { font-family: var(--font-body)     !important; }
.font-mono     { font-family: var(--font-mono)     !important; }

.tracking-tight   { letter-spacing: var(--tracking-tight)   !important; }
.tracking-snug    { letter-spacing: var(--tracking-snug)    !important; }
.tracking-normal  { letter-spacing: var(--tracking-normal)  !important; }
.tracking-wide    { letter-spacing: var(--tracking-wide)    !important; }
.tracking-wider   { letter-spacing: var(--tracking-wider)   !important; }
.tracking-widest  { letter-spacing: var(--tracking-widest)  !important; }

.leading-tight    { line-height: var(--leading-tight)    !important; }
.leading-snug     { line-height: var(--leading-snug)     !important; }
.leading-normal   { line-height: var(--leading-normal)   !important; }
.leading-relaxed  { line-height: var(--leading-relaxed)  !important; }
.leading-loose    { line-height: var(--leading-loose)    !important; }

/* ─── 9. Component Specific Font ───────────────────────── */
.marketing-navbar { font-family: var(--font-body); }
.marketing-navbar .navbar-nav .nav-link { font-weight: var(--weight-medium); font-size: var(--text-sm); letter-spacing: 0.01em; }
.dropdown-item { font-family: var(--font-body); font-size: var(--text-sm); }

.blog-content { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-loose); color: #334155; }
.blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5 { font-family: var(--font-heading); }

.content-box { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.9; }

/* ─── 10. Dark Mode Typography ──────────────────────────── */
[data-bs-theme="dark"] body { background-color: #0f172a !important; color: #e2e8f0; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 { color: #f8fafc; }
[data-bs-theme="dark"] p { color: #cbd5e1; }
[data-bs-theme="dark"] .lead { color: #94a3b8; }
[data-bs-theme="dark"] code { background: rgba(96,165,250,0.12); color: #60a5fa; }
[data-bs-theme="dark"] pre { background: #0b1120; border-color: rgba(255,255,255,0.08); }

/* ─── 11. Existing Styles (Preserved) ───────────────────── */
main { flex: 1; }
.sticky-top { top: 90px !important; z-index: 1000; }

.text-brand { color: var(--brand-color) !important; }
.bg-brand   { background-color: var(--brand-color) !important; }
.btn-brand  { background-color: var(--brand-color); color: white; border: none; }
.btn-brand:hover { filter: brightness(0.9); color: white; }
.text-dark-blue { color: #0f172a; }

.navbar-brand img { max-height: 40px; }
.card-hover:hover { transform: translateY(-5px); transition: 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

footer { background-color: #1a1a1a; color: #d1d1d1; padding: 50px 0 20px; }
footer a { color: #d1d1d1; text-decoration: none; transition: 0.3s; }
footer a:hover { color: #fff; text-decoration: underline; }

section:first-of-type { position: relative; z-index: 1; }

.content-box img, .blog-content img, .page-content img, .summernote-content img {
    max-width: 100% !important; height: auto !important; object-fit: contain;
    border-radius: 8px; margin: 15px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.content-box table, .blog-content table, .page-content table {
    width: 100% !important; max-width: 100%; overflow-x: auto; display: block;
}

.badge-soft { background-color: rgba(13,110,253,0.1); color: #0d6efd; font-weight: 700; }

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .card-premium { background-color: #1e293b !important; border-color: rgba(255,255,255,0.05) !important; }
[data-bs-theme="dark"] .bg-light-blue,
[data-bs-theme="dark"] .bg-light { background-color: #0b1120 !important; border-color: rgba(255,255,255,0.05) !important; }
[data-bs-theme="dark"] .text-dark-blue,
[data-bs-theme="dark"] .text-dark { color: #f8fafc !important; }
[data-bs-theme="dark"] .marketing-navbar { background: rgba(15,23,42,0.95) !important; border-bottom-color: rgba(255,255,255,0.05); }
[data-bs-theme="dark"] .marketing-hero  { background-color: #0f172a !important; }
[data-bs-theme="dark"] .badge-soft { background-color: rgba(13,110,253,0.2) !important; color: #60a5fa !important; }
[data-bs-theme="dark"] .btn-outline-dark { color: #e2e8f0 !important; border-color: #475569 !important; }
[data-bs-theme="dark"] .btn-outline-dark:hover { background-color: #f8fafc !important; color: #0f172a !important; }

[data-bs-theme="dark"] .product-header-mkt { background-color: #0b1120 !important; border-bottom-color: rgba(255,255,255,0.05) !important; }
[data-bs-theme="dark"] .filter-sidebar,
[data-bs-theme="dark"] .checkout-box { background-color: #1e293b !important; border-color: rgba(255,255,255,0.05) !important; }
[data-bs-theme="dark"] .custom-select-mkt { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-bs-theme="dark"] .cat-list-mkt a { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .cat-list-mkt a:hover,
[data-bs-theme="dark"] .cat-list-mkt a.active { background-color: rgba(13,110,253,0.15) !important; color: #60a5fa !important; }
[data-bs-theme="dark"] .text-secondary { color: #94a3b8 !important; }

.wavy-bg { position: relative; background: linear-gradient(135deg, var(--brand-color) 0%, #084298 100%); color: white; padding-bottom: 80px; }
.wavy-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: translateY(1px); }
.wavy-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; }
.wavy-divider .shape-fill { fill: #f8fafc; }
[data-bs-theme="dark"] .wavy-divider .shape-fill { fill: #0f172a; }

.glass-card { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.4) !important; box-shadow: 0 8px 32px 0 rgba(31,38,135,0.05) !important; border-radius: 24px !important; }
[data-bs-theme="dark"] .glass-card { background: rgba(30,41,59,0.7) !important; border: 1px solid rgba(255,255,255,0.05) !important; box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2) !important; }
.glass-header { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
[data-bs-theme="dark"] .glass-header { background: rgba(15,23,42,0.85) !important; border-bottom: 1px solid rgba(255,255,255,0.05); }

.curved-card { border-radius: 24px !important; overflow: hidden; }
.curved-img  { border-radius: 24px; }

.float-anim { animation: floatAnim 4s ease-in-out infinite; }
@keyframes floatAnim { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

.pulse-glow { animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(13,110,253,0.4); } 70% { box-shadow: 0 0 0 15px rgba(13,110,253,0); } 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); } }

.text-gradient { background: linear-gradient(135deg, var(--brand-color), #084298); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-bs-theme="dark"] .text-gradient { background: linear-gradient(135deg, #60a5fa, #93c5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }