/**
 * BerezaWP — Site-wide dark theme for interior pages (Daniel BW-200017).
 * Loads AFTER style.css on every page EXCEPT the homepage (homepage is already
 * dark and self-contained via index.php + dark-theme.css).
 *
 * Palette = the homepage's own tokens (index.php :root + dark-theme.css .hero):
 *   bg #0a1120 / #0d1728  cards #111e33 / #0f1b2e  lines #1d2b45
 *   hero gradient #071827 -> #061525 -> #04111d
 *   accent blue #2f6bff / #4f86ff (button gradient #1d86ff -> #006cff)
 *   ink #eaf0fb  muted #9fb0cc
 *
 * TOKEN STRATEGY (style.css :root is re-declared here; later sheet wins, and
 * page-level <style> blocks that reference the vars inherit the flip too):
 *   FLIPPED  --navy (heading/nav TEXT everywhere) -> light ink. Every place
 *            that used --navy as a BACKGROUND is overridden explicitly below.
 *   FLIPPED  --navy-dark -> deep navy (footer bg, gradients).
 *   FLIPPED  --light-gray (section/panel bg) -> dark panel.
 *   FLIPPED  --medium-gray (borders) -> dark line.
 *   FLIPPED  --dark-gray (body text) -> light body text.
 *   FLIPPED  --teal/--teal-light (accent) -> homepage blues.
 *   KEPT     --white. It is used as TEXT on dark surfaces ~260 times across
 *            page styles; flipping it would black out that text. Every
 *            component that used --white as a BACKGROUND is overridden
 *            directly instead (see CARD SURFACES + PAGE TEMPLATES).
 *   KEPT     --orange values; orange CTAs are restyled per-component to the
 *            blue accent (page styles hardcode #D35400 as a 2nd gradient stop,
 *            so flipping the token would create broken two-tone gradients).
 *
 * !important is used only where page-level <style> blocks (which load after
 * this sheet) hardcode light backgrounds or dark text.
 */

/* ============ 1. TOKENS ============ */
:root {
    --navy: #eaf0fb;          /* was #1E3A5F — heading/nav text goes light */
    --navy-dark: #071827;     /* was #152942 — footer/deep surfaces */
    --teal: #4f86ff;          /* was #5DADE2 — accent -> homepage blue */
    --teal-light: #7ea6ff;    /* was #85C1E9 */
    --light-gray: #0d1728;    /* was #F8F9FA — tinted sections/panels */
    --medium-gray: #223452;   /* was #E5E7EB — card & input borders */
    --dark-gray: #c9d5ea;     /* was #333333 — body text goes light */

    /* dark-theme additions (namespaced so nothing collides) */
    --dsk-bg: #0a1120;
    --dsk-bg2: #0d1728;
    --dsk-card: #111e33;
    --dsk-card2: #0f1b2e;
    --dsk-line: #1d2b45;
    --dsk-blue: #2f6bff;
    --dsk-blue2: #4f86ff;
    --dsk-ink: #eaf0fb;
    --dsk-mut: #9fb0cc;
    --dsk-hero: linear-gradient(135deg, #071827 0%, #061525 48%, #04111d 100%);
    --dsk-btn: linear-gradient(180deg, #1d86ff, #006cff);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.55);
}

/* ============ 2. BASE ============ */
html { background: var(--dsk-bg); }
body {
    background: var(--dsk-bg) !important; /* one page hardcodes #FAFAFA */
    color: var(--dark-gray) !important;
}
::selection { background: rgba(47,107,255,.4); color: #fff; }
a { color: var(--dsk-blue2); }
a:hover { color: var(--teal-light); }
hr { border-color: var(--dsk-line); }
blockquote { background: var(--dsk-card2); border-left: 4px solid var(--dsk-blue); color: var(--dark-gray); }
code, pre { background: var(--dsk-card2) !important; color: #cfe0ff !important; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--dsk-blue2); outline-offset: 2px; }
.section-header p { color: var(--dsk-mut); }
.section-header h2::after { background: linear-gradient(90deg, #1d86ff, #4f86ff); }

/* ============ 3. HEADER / NAV (inline styles live in header.php) ============ */
.top-bar { background: #04111d; color: #fff; border-bottom: 1px solid var(--dsk-line); }
.top-bar a { color: var(--dsk-blue2); }
.header {
    background: rgba(10,17,32,.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
    border-bottom: 1px solid var(--dsk-line);
}
.logo-text { color: var(--dsk-ink); }
.nav-toggle { color: var(--dsk-ink); }
.nav-menu { background: #0d1a2e; }                       /* mobile dropdown */
.nav-menu a { color: var(--dsk-ink); border-bottom-color: var(--dsk-line); }
.nav-menu a:hover { color: var(--dsk-blue2); }
.nav-menu .sub-menu { border-left-color: var(--dsk-blue); }
.nav-menu .sub-menu a { color: var(--dark-gray); }
@media (min-width: 992px) {
    .nav-menu { background: transparent; }
}
@media (min-width: 768px) {
    .nav-menu .sub-menu {
        background: var(--dsk-card);
        border-color: var(--dsk-line);
        box-shadow: var(--shadow-lg);
    }
    .nav-menu .sub-menu a { color: var(--dsk-ink); }
    .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu a:focus { background: var(--dsk-card2); color: var(--dsk-blue2); }
}

/* ============ 4. BUTTONS -> blue accent (task: CTAs on the homepage blue) ============ */
.btn-primary,
.cta-button,
.review-link,
.float-btn.calendar,
.newsletter-form .cta-button {
    background: var(--dsk-btn) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0,102,255,.35);
}
.btn-primary:hover, .cta-button:hover, .review-link:hover {
    box-shadow: 0 14px 35px rgba(0,102,255,.45);
    color: #fff !important;
}
/* !important: /services/ inline block re-declares .btn-secondary after this sheet
   (background var(--navy) -> flipped near-white + white text = unreadable) */
.btn-secondary { background: var(--dsk-btn) !important; color: #fff !important; }
.btn-secondary:hover { box-shadow: 0 10px 30px rgba(0,102,255,.4); color: #fff !important; background: var(--dsk-btn) !important; }
/* secondary CTA = ghost, like the homepage (page styles give it a white bg) */
.cta-button.secondary, .cta-button.secondary:hover {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(126,166,255,.55) !important;
    color: #fff !important;
    box-shadow: none;
}
/* .btn-outline used navy for border/text and navy bg on hover */
.btn-outline { border-color: var(--dsk-blue2); color: var(--dsk-ink); background: transparent; }
.btn-outline:hover { background: var(--dsk-blue); color: #fff; }
.back-to-top { background: var(--dsk-blue); color: #fff; }
.back-to-top:hover { background: var(--dsk-blue2); }

/* ============ 5. HERO / BAND SECTIONS (style.css used navy gradients) ============ */
.hero, .page-hero, .post-header, .sa-hero, .audit-hero, .st-hero {
    background: var(--dsk-hero) !important;
    color: #fff !important;
    border-top: 1px solid rgba(255,255,255,.06);
}
.page-hero h1, .page-hero h2, .post-header h1,
.sa-hero h1, .audit-hero h1, .st-hero h1 { color: #f4f7ff !important; }
.stats-section,
.cta-bar, .map-section, .questions-cta-section,
.newsletter-cta-section, .portfolio-stats, .brand-strip {
    background: var(--dsk-hero) !important;
    color: #fff;
}
.contact { background: var(--dsk-hero); }
.contact-info { background: rgba(255,255,255,.04); border: 1px solid var(--dsk-line); }

/* ============ 6. CARD SURFACES (style.css components that had --white bg) ============ */
.platforms-section, .services, .testimonials { background: var(--dsk-bg); }
.platforms-label { color: var(--dsk-mut); }
/* !important: /services/ inline block re-declares .service-card{background:var(--white)}
   and .service-card p{color:#666} after this sheet */
.service-card, .testimonial-card {
    background: var(--dsk-card) !important;
    border-color: var(--dsk-line);
}
.service-card p, .testimonial-info p { color: var(--dsk-mut) !important; }
.service-card h2 { color: var(--dsk-ink) !important; }
.about-content p { color: var(--dark-gray); }
.modal-content { background: var(--dsk-card); border: 1px solid var(--dsk-line); }
.modal-close { color: var(--dsk-ink); }

/* ============ 7. FORMS (dark inputs, light text, visible borders) ============ */
.contact-form { background: var(--dsk-card); border: 1px solid var(--dsk-line); }
.form-group label { color: var(--dsk-ink); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"],
input[type="date"], select, textarea {
    background: #0b1526 !important;
    color: var(--dsk-ink) !important;
    border: 2px solid #2c3f60 !important;
    border-radius: var(--radius-sm, 6px);
}
input::placeholder, textarea::placeholder { color: var(--dsk-mut); opacity: 1; }
input:focus, select:focus, textarea:focus {
    border-color: var(--dsk-blue) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47,107,255,.25);
}
.newsletter-section {
    background: var(--dsk-hero);
    border-top: 1px solid var(--dsk-line);
    border-bottom: 1px solid var(--dsk-line);
}
.newsletter-form input:focus { outline: 3px solid var(--dsk-blue); }

/* ============ 8. TABLES ============ */
table { background: var(--dsk-card); color: var(--dark-gray); border-color: var(--dsk-line); }
th { background: var(--dsk-card2); color: var(--dsk-ink); border-color: var(--dsk-line); }
td { border-color: var(--dsk-line); }
tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* ============ 9. FOOTER (was --navy-dark; token flip covers it, keep consistent) ============ */
.footer { background: #04111d; border-top: 1px solid var(--dsk-line); }
.footer-section ul a { color: rgba(234,240,251,.75); }
.footer-links a { color: rgba(234,240,251,.6); }
.footer-section ul a:hover, .footer-contact a:hover { color: var(--dsk-blue2); }

/* ============ 10. PAGE TEMPLATES (page <style> blocks load after this sheet
     and hardcode light backgrounds / dark text — hence !important) ============ */

/* 10a. white/near-white cards & sections -> dark cards */
.service-overview, .included-item, .included-grid, .faq-section,
.location-overview, .landmark, .why-local, .neighborhoods, .nearby-towns,
.landmarks-grid, .area-link, .county-card, .sidebar-related, .sidebar-cta,
.post-sidebar, .legal-content, .about-page-section, .credential-card,
.skills-section, .contact-method, .contact-form-section, .audit-form-card,
.audit-check-card, .audit-trust, .google-review-section, .review-card,
.blog-card, .portfolio-card, .cat-card, .sa-card, .pg-link, .pg-disabled,
.faq-item, .form-card, .post-form-sidebar, .message-list, .message-item,
.media-item, .media-grid, .skill-category, .post-tags, .note, .card,
.ct-services, .dest, .requested-url, .benefits-grid, .why-choose-section {
    background: var(--dsk-card) !important;
    color: var(--dark-gray);
    border-color: var(--dsk-line) !important;
}
.faq-question { background: var(--dsk-card) !important; color: var(--dsk-ink) !important; }
.faq-question:hover, .pg-disabled:hover { background: var(--dsk-card2) !important; }
.search-box input { background: #0b1526 !important; color: var(--dsk-ink) !important; }
.tag { background: var(--dsk-card2) !important; color: var(--dark-gray) !important; }
.budget-note { background: var(--dsk-card2) !important; color: var(--dark-gray) !important; }

/* 10b. hardcoded #444/#555/#666/#888 text -> readable muted */
.overview-content p, .price-card li, .included-item p, .faq-answer,
.faq-answer p,
.benefit p, .section-intro, .area-link small, .sidebar-cta p,
.post-content p, .post-content em, .post-content li,
.legal-wrapper p, .legal-wrapper li,
.about-text-section p, .credential-card p, .skill-category li,
.blog-content p, .blog-meta span,
.review-text, .review-card .business, .google-review-content p,
.audit-form-card .terms {
    color: var(--dsk-mut) !important;
}

/* 10c. small elements that used navy as a BACKGROUND (token now light) */
.contact-icon, .social-icons a, .reviewer-avatar, .service-icon,
.pg-link:hover, .audit-form-card .submit-btn {
    background: var(--dsk-btn) !important;
    color: #fff !important;
}
.blog-image { background: var(--dsk-bg2) !important; }

/* 10d. st-* keyword-page family (350 pages, all colors hardcoded) */
.st-hero .cta { background: var(--dsk-btn) !important; color: #fff !important; }
.st-crumb { color: var(--dsk-mut) !important; }
.st-crumb a, .st-cities a { color: var(--dsk-blue2) !important; }
.st-body { color: var(--dark-gray) !important; }
.st-body h2, .st-faq h2, .st-faq summary { color: var(--dsk-ink) !important; }
.st-body h3 { color: var(--dsk-blue2) !important; }
.st-cities {
    background: var(--dsk-card) !important;
    border-left: 4px solid var(--dsk-blue) !important;
    color: var(--dark-gray);
}
.st-faq details { border-bottom-color: var(--dsk-line) !important; }

/* ============ 11. PER-PAGE CONTRAST FIXES (dark-theme audit 2026-07-03) ============ */

/* /free-wordpress-audit/ — page style block hardcodes navy #0F2744 text; the 10a
   background flip left navy-on-navy headings/labels/strong */
.audit-form-card h2, .audit-form-card label,
.audit-what-you-get h2, .audit-check-card strong, .audit-trust strong {
    color: var(--dsk-ink) !important;
}

/* /service-areas/ — inline .sa-card{color:#0F2744} + .sa-card span{color:#5a6473}
   load after this sheet; hover shadow was a navy tint (invisible on dark) */
.sa-card, .sa-card strong { color: var(--dsk-ink) !important; }
.sa-card span { color: var(--dsk-mut) !important; }
.sa-card { border-left-color: #FFD700 !important; } /* restore the gold accent 10a wipes */
.sa-card:hover {
    background: var(--dsk-card2) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.55) !important;
}

/* /blog/ — current-page chip lost its highlight to the 10a .pg-link override */
.pg-current, .pg-current:hover {
    background: var(--dsk-btn) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* /blog/ — 12px white badge text on #E67E22 was 2.85:1; deeper orange = 5:1 */
.blog-category { background: #b4530a !important; }

/* topbar pill: 12px white on #27AE60 was 2.87:1; darker green = 5.4:1 */
.top-bar .available-badge { background: #1d7a44 !important; }

/* logo.png carries a dark-navy wordmark — light chip keeps it readable on the
   dark header/footer until a light logo variant exists */
.logo img, .footer-logo {
    background: #f4f7ff;
    padding: 4px;
    border-radius: 10px;
}

/* content images otherwise untouched (task requirement) */