/* ==========================================================================
   GingerLive "Glow" reskin for legacy content pages
   Applied to: /about, /casestudies (+ posts), /blog (+ posts), all languages.
   Loaded AFTER each page's inline styles so it wins the cascade; deliberate
   use of !important where the old inline rules carry high specificity.
   Content markup is untouched (the footer blog-scraper depends on its ids).
   ========================================================================== */

:root {
    --gl-orange: #ff7105;
    --gl-gold: #ffb454;
    --gl-violet: #9b4dff;
    --gl-bg: #0d0a12;
    --gl-surface: rgba(255, 255, 255, 0.04);
    --gl-surface-strong: rgba(255, 255, 255, 0.07);
    --gl-border: rgba(255, 255, 255, 0.1);
    --gl-border-strong: rgba(255, 255, 255, 0.18);
    --gl-text: #f5f2fa;
    --gl-text-body: #ddd6e8;   /* article body: high contrast on --gl-bg (>10:1) */
    --gl-text-dim: #b7aec6;
    --gl-text-faint: #8b8198;
    --gl-grad-brand: linear-gradient(92deg, #ff7105 0%, #ffb454 100%);
    --gl-font-display: "Space Grotesk", "Ubuntu", system-ui, sans-serif;
    --gl-font-body: "Inter", "Ubuntu", system-ui, sans-serif;
}

/* ---------- Base ---------- */

html, body {
    background: var(--gl-bg) !important;
    color: var(--gl-text) !important;
    font-family: var(--gl-font-body) !important;
}

body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--gl-font-display) !important;
    color: var(--gl-text) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Old pages paint sections/cards white and text dark via Tailwind grays.
   Lift all of those to the dark palette. */
.bg-white, .bg-gray-100, .bg-gray-50 { background-color: transparent !important; }

.text-gray-900, .text-gray-800, .text-black, .text-dark { color: var(--gl-text) !important; }
.text-gray-700, .text-gray-600 { color: var(--gl-text-dim) !important; }
.text-gray-500, .text-gray-400, .text-muted { color: var(--gl-text-faint) !important; }

hr { border-color: var(--gl-border) !important; }

/* ---------- Old glass navbar (components/header.php) ---------- */

.nav-glass-panel {
    background: rgba(16, 12, 22, 0.6) !important;
    border-color: var(--gl-border) !important;
}

.nav-glass-panel.scrolled {
    background: rgba(14, 10, 19, 0.85) !important;
    border-color: var(--gl-border-strong) !important;
}

/* Bootstrap-style navbars on blog/case-study posts */
.navbar, nav.navbar { background: transparent !important; }
.navbar .nav-link, .breadcrumb-item, .breadcrumb-item a { color: var(--gl-text-dim) !important; }
.breadcrumb { background: transparent !important; }

/* ---------- Long-form article content (readability first) ---------- */

#blog-text,
.caseStudy-content,
#caseStudy-text {
    color: var(--gl-text-body) !important;
    font-size: 1.08rem !important;
    line-height: 1.8 !important;
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
}

#blog-text p,
.caseStudy-content p,
#caseStudy-text p,
#blog-text li,
.caseStudy-content li,
#caseStudy-text li {
    color: var(--gl-text-body) !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

#blog-text strong, #blog-text b,
.caseStudy-content strong, .caseStudy-content b,
#caseStudy-text strong, #caseStudy-text b {
    color: var(--gl-text) !important;
    font-weight: 600;
}

#blog-text h2, .caseStudy-content h2, #caseStudy-text h2 {
    font-size: 1.65rem !important;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

#blog-text h3, .caseStudy-content h3, #caseStudy-text h3 {
    font-size: 1.25rem !important;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

#blog-text a, .caseStudy-content a, #caseStudy-text a,
a.gingerLiveLink {
    color: var(--gl-gold) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 180, 84, 0.4);
    text-underline-offset: 3px;
}

#blog-text a:hover, .caseStudy-content a:hover, #caseStudy-text a:hover,
a.gingerLiveLink:hover { color: var(--gl-orange) !important; }

#blog-text img, .caseStudy-content img, #caseStudy-text img,
#blogImage, #caseStudyImage {
    border-radius: 16px;
    border: 1px solid var(--gl-border);
}

#blog-text table, .caseStudy-content table, #caseStudy-text table {
    border-collapse: collapse;
    width: 100%;
}

#blog-text th, #blog-text td,
.caseStudy-content th, .caseStudy-content td,
#caseStudy-text th, #caseStudy-text td {
    border: 1px solid var(--gl-border-strong) !important;
    padding: 0.6rem 0.8rem;
    color: var(--gl-text-body) !important;
    background: var(--gl-surface) !important;
}

#blog-text blockquote, .caseStudy-content blockquote, #caseStudy-text blockquote {
    border-left: 3px solid var(--gl-orange);
    background: var(--gl-surface);
    padding: 0.8rem 1.2rem;
    border-radius: 0 12px 12px 0;
    color: var(--gl-text-dim) !important;
}

/* Marketing footer embedded on legacy/app pages (e.g. the orange login body):
   guarantee a solid dark band and correct link colours regardless of the host
   page's own background or <a> styles. Only affects pages that load this file. */
.gl-footer { background: #0b0810 !important; position: relative; z-index: 1; }
.gl-footer h4 { color: var(--gl-text) !important; }
.gl-footer p, .gl-footer span, .gl-footer li { color: var(--gl-text-dim) !important; }
.gl-footer a { color: var(--gl-text-dim) !important; text-decoration: none !important; }
.gl-footer a:hover { color: var(--gl-gold) !important; }

/* Legal documents & simple article pages use .blog-content (Privacy, Terms,
   Cookie). Same readability treatment as blog/case-study long-form text. */
.blog-content {
    color: var(--gl-text-body) !important;
    font-size: 1.06rem !important;
    line-height: 1.85 !important;
    max-width: 46em !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.blog-content p,
.blog-content li,
.blog-content td,
.blog-content dd,
.blog-content dt,
.blog-content span {
    color: var(--gl-text-body) !important;
}
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5 {
    color: var(--gl-text) !important;
}
.blog-content strong, .blog-content b { color: var(--gl-text) !important; font-weight: 600; }
.blog-content a {
    color: var(--gl-gold) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 180, 84, 0.4);
    text-underline-offset: 3px;
}
.blog-content a:hover { color: var(--gl-orange) !important; }
.blog-content .breadcrumb, .blog-content .breadcrumb-item,
.blog-content .breadcrumb-item a { color: var(--gl-text-dim) !important; }

/* Article titles */
#blogArticleTitle, #caseStudyTitle,
h1 #blogArticleTitle, h1 #caseStudyTitle {
    color: var(--gl-text) !important;
    font-family: var(--gl-font-display) !important;
}

/* Meta rows (date, read time) */
#blog-date, #blog-read-time, #caseStudy-read-time, .caseStudy-meta, .blog-meta {
    color: var(--gl-text-faint) !important;
}

/* Tables of contents */
#blog-table-of-contents, #caseStudy-table-of-contents {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 16px !important;
    padding: 1.2rem 1.4rem !important;
}

#blog-table-of-contents a, #caseStudy-table-of-contents a {
    color: var(--gl-text-dim) !important;
    text-decoration: none !important;
}

#blog-table-of-contents a:hover, #caseStudy-table-of-contents a:hover {
    color: var(--gl-gold) !important;
}

/* Back buttons / small nav links on posts */
#backButton, #backButton a { color: var(--gl-text-dim) !important; }

/* ---------- Hub cards (blog & case-study indexes) ---------- */

.card {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s !important;
}

.card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 140, 51, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

.card-body { background: transparent !important; }

.card-title, .card h2 {
    color: var(--gl-text) !important;
    font-family: var(--gl-font-display) !important;
}

.card-text { color: var(--gl-text-dim) !important; }

.card-date { color: var(--gl-text-faint) !important; }

.card-img-top { border-bottom: 1px solid var(--gl-border); }

/* ---------- About-page cards ---------- */

.stat-card, .value-card, .playbook-card, .team-card, .story-step, .cta-card {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    box-shadow: none !important;
    color: var(--gl-text-dim) !important;
}

.stat-card:hover, .value-card:hover, .playbook-card:hover, .team-card:hover, .story-step:hover {
    border-color: rgba(255, 140, 51, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

.stat-card p { color: var(--gl-text-faint) !important; }
.stat-card p:first-of-type { color: var(--gl-text-faint) !important; }
.stat-card .text-3xl, .stat-card .font-bold { color: var(--gl-text) !important; }

/* Arbitrary Tailwind light-background utilities (bg-[#fff9f3] and friends) */
[class*="bg-[#f"], [class*="bg-[#e"], [class*="bg-[#d"] { background-color: var(--gl-surface) !important; }

/* ---------- Buttons ---------- */

.gradient, .orangeBg {
    background: var(--gl-grad-brand) !important;
    color: #1a0d02 !important;
}

/* ---------- Old pasted footer ---------- */

.footer {
    background: transparent !important;
    border-top: 1px solid var(--gl-border) !important;
    color: var(--gl-text-dim) !important;
}

.footer h2, .footer .nav__title { color: var(--gl-text) !important; }

.footer address, .footer .legal, .footer .nav__ul a, .footer a { color: var(--gl-text-dim) !important; }

.footer a:hover { color: var(--gl-gold) !important; }

.footer__btn {
    background: var(--gl-surface-strong) !important;
    color: var(--gl-text) !important;
}

.footer .legal, .footer .legal__links, .footer .heart { color: var(--gl-text-faint) !important; }

#footerBlogsList a { color: var(--gl-text-dim) !important; }
#footerBlogsList a:hover { color: var(--gl-gold) !important; }

/* KWORKS badge keeps its white chip so the logo stays legible */
#poweredByKWorksContainer > div {
    background: #fff !important;
    border-radius: 12px !important;
    border: none !important;
}

#poweredByKWorksContainer p { color: #333 !important; }

/* Old white "wave" section dividers: pointless on a dark page, hide them */
svg[viewBox="0 0 1428 174"] { display: none !important; }

/* ---------- Misc surfaces ---------- */

/* white info panels / boxes on the about page and posts */
.shadow, .shadow-lg, .shadow-md { box-shadow: none !important; }

::selection { background: rgba(255, 113, 5, 0.4); }

/* Scroll bars on dark (webkit) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--gl-bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }