/* ===================================================================
   LIGHT THEME — html[data-theme="light"]
   The site starts dark; light applies only after the visitor picks it with the header
   toggle (ThemeToggle in assets/js/app.js, saved in localStorage wf_theme, applied in header.php before the CSS loads).

   The whole site turns light. The shared colour variables are re-pointed below,
   so everything built on them follows; the rest of this file covers hard-coded colours.
   Every rule is scoped to [data-theme="light"], so the dark theme is untouched.
   =================================================================== */

/* ── Palette + variable re-map ───────────────────────────────────── */
:root[data-theme="light"] {
    --lt-paper:   #f5f8f6;
    --lt-paper-2: #eaf1ec;
    --lt-card:    #ffffff;
    --lt-border:  #d6e3da;
    --lt-border-strong: #b3cabb;
    --lt-heading: #0b1f15;
    --lt-text:    #33493d;
    --lt-muted:   #4b6255;
    --lt-accent:  #066f36;               /* brand green for text/icons on light backgrounds (≥4.9:1 on every light surface) */
    --lt-tint:    rgba(6,111,54,0.08);
    --lt-tint-2:  rgba(6,111,54,0.14);
    --lt-shadow:  0 1px 2px rgba(11,31,21,0.04), 0 8px 24px rgba(11,31,21,0.06);
    --lt-shadow-hover: 0 18px 40px rgba(11,31,21,0.12);
    --lt-glow:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,111,54,0.08) 0%, transparent 65%);

    --bg-darkest: var(--lt-paper);
    --bg-dark:    var(--lt-paper-2);
    --bg-mid:     #e3ece6;
    --bg-card:    var(--lt-card);
    --white:      var(--lt-heading);     /* --white is the heading/strong-text colour */
    --gray-100:   var(--lt-heading);
    --gray-200:   var(--lt-text);
    --gray-300:   var(--lt-text);
    --gray-400:   var(--lt-muted);
    --gray-500:   var(--lt-muted);
    --gray-600:   var(--lt-border-strong);
    --green-accent: var(--lt-accent);
    --green-glow: rgba(6,111,54,0.25);
    --green-glow-soft: rgba(6,111,54,0.08);
    --text-primary:   var(--lt-heading);
    --text-secondary: var(--lt-text);
    --text-muted:     var(--lt-muted);
    --border-subtle:  var(--lt-border);
    --gradient-accent: linear-gradient(245deg, #0a9a48 0%, #04634f 100%);
    --gradient-dark:   linear-gradient(180deg, var(--lt-paper) 0%, var(--lt-paper-2) 100%);
    --shadow-sm:   0 2px 8px rgba(11,31,21,0.06);
    --shadow-md:   0 8px 24px rgba(11,31,21,0.08);
    --shadow-lg:   0 16px 48px rgba(11,31,21,0.12);
    --shadow-glow: 0 0 0 transparent;
}

/* ── Page chrome ─────────────────────────────────────────────────── */
[data-theme="light"] ::selection { background: var(--lt-accent); color: #fff; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #e4ece7; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #9db5a7; }
/* neon text set in style="" attributes (reCAPTCHA notes, thank-you highlight) */
[data-theme="light"] [style*="color:#0CF25D"],
[data-theme="light"] [style*="color: #0CF25D"] { color: var(--lt-accent) !important; }
/* neon gradient numbers set in style="" attributes (portfolio stats) */
[data-theme="light"] [style*="linear-gradient(135deg,#0CF25D,#035A3E)"] { background-image: var(--gradient-accent) !important; }

/* Buttons */
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-outline { border-color: var(--lt-accent); color: var(--lt-heading); }
[data-theme="light"] .btn-outline:hover { color: var(--lt-accent); background: var(--lt-tint); box-shadow: none; }

/* Section tags + badges */
[data-theme="light"] .section-tag { background: var(--lt-tint); }

/* Navbar */
[data-theme="light"] .navbar.scrolled { background: rgba(255,255,255,0.94); box-shadow: 0 4px 24px rgba(11,31,21,0.08), 0 1px 0 var(--lt-border); }
[data-theme="light"] .theme-toggle { background: var(--lt-card); border-color: var(--lt-border-strong); color: var(--lt-text); }
[data-theme="light"] .theme-toggle:hover { border-color: var(--lt-accent); color: var(--lt-accent); }
[data-theme="light"] .nav-dropdown-menu,
[data-theme="light"] .nav-dropdown-menu::before { background: rgba(255,255,255,0.98); border-color: var(--lt-border); }
[data-theme="light"] .nav-dropdown-menu { box-shadow: 0 20px 50px rgba(11,31,21,0.14); }
[data-theme="light"] .dd-item { color: var(--lt-text); }
[data-theme="light"] .dd-item svg { color: rgba(6,111,54,0.6); }
[data-theme="light"] .dd-item:hover,
[data-theme="light"] .dd-item:hover svg { color: var(--lt-accent); }
[data-theme="light"] .dd-item:hover { background: var(--lt-tint); }
[data-theme="light"] .dd-divider { background: var(--lt-border); }
[data-theme="light"] .dd-view-all { background: var(--lt-tint); color: var(--lt-accent); }
[data-theme="light"] .dd-view-all:hover { background: var(--lt-tint-2); }
@media (max-width: 968px) {
    [data-theme="light"] .nav-menu { background: var(--lt-card); box-shadow: -20px 0 60px rgba(11,31,21,0.14); }
    [data-theme="light"] .nav-dropdown-menu { background: var(--lt-paper); box-shadow: none; }
}

/* Loader (first paint) */
[data-theme="light"] .loader { background: var(--lt-paper); }

/* Cookie banner */
[data-theme="light"] .cookie-banner { background: var(--lt-card); border-color: var(--lt-border-strong); box-shadow: 0 20px 50px rgba(11,31,21,0.16); }

/* Footer */
[data-theme="light"] .footer { background: var(--lt-paper-2); border-top-color: var(--lt-border); }
[data-theme="light"] .footer-bottom { border-top-color: var(--lt-border-strong); }
[data-theme="light"] .social-link { background: var(--lt-card); border-color: var(--lt-border-strong); }
[data-theme="light"] .social-link:hover { background: var(--lt-accent); color: #fff; }
[data-theme="light"] .social-link.whatsapp { background: var(--lt-card); border-color: rgba(11,132,87,0.35); color: #0b8457; }
[data-theme="light"] .social-link.whatsapp:hover { background: #0b8457; color: #fff; }

/* ── Home: hero ──────────────────────────────────────────────────── */
/* The circuit photo is dark: inverting the layer (hue turned back to green) gives faint green circuits on light grey */
[data-theme="light"] .hero { background: var(--lt-paper); }
[data-theme="light"] .hero-gradient { filter: invert(1) hue-rotate(180deg); opacity: 0.45; }
[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(6,111,54,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6,111,54,0.05) 1px, transparent 1px); }
[data-theme="light"] .hero-badge { background: var(--lt-card); border-color: rgba(6,111,54,0.3); }
[data-theme="light"] .globe-ring { border-color: rgba(6,111,54,0.18); }
[data-theme="light"] .globe-ring.ring-2 { border-color: rgba(6,111,54,0.11); }
[data-theme="light"] .globe-ring.ring-3 { border-color: rgba(6,111,54,0.06); }
[data-theme="light"] #WFCanvas { filter: drop-shadow(0 0 30px rgba(6,111,54,0.15)); }

/* ── Home: services ──────────────────────────────────────────────── */
[data-theme="light"] .services { background: var(--lt-card); }
[data-theme="light"] .service-card { background: var(--lt-card); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }
[data-theme="light"] .service-card:hover { border-color: rgba(6,111,54,0.35); box-shadow: var(--lt-shadow-hover); }
[data-theme="light"] .service-card.featured { background: linear-gradient(145deg, rgba(6,111,54,0.06), var(--lt-card)); border-color: rgba(6,111,54,0.3); }
[data-theme="light"] .icon-bg { background: var(--lt-tint-2); opacity: 1; }
[data-theme="light"] .service-card:hover .icon-bg { background: rgba(6,111,54,0.2); opacity: 1; }

/* ── Home: hosting ───────────────────────────────────────────────── */
[data-theme="light"] .hosting { background: linear-gradient(180deg, var(--lt-paper) 0%, var(--lt-card) 100%); }
[data-theme="light"] .hosting-item { border-bottom-color: var(--lt-border); }
[data-theme="light"] .hosting-icon { background: var(--lt-tint); }
[data-theme="light"] .hosting-item:hover .hosting-icon { background: var(--lt-tint-2); }
[data-theme="light"] .hosting-cta-card { background: linear-gradient(145deg, rgba(6,111,54,0.05), var(--lt-card)); border-color: var(--lt-border); box-shadow: 0 20px 50px rgba(11,31,21,0.10); }
[data-theme="light"] .hosting-badge { background: var(--lt-tint); }
[data-theme="light"] .plan-badge { border-color: rgba(6,111,54,0.3); background: rgba(6,111,54,0.05); }

/* ── Home: about ─────────────────────────────────────────────────── */
[data-theme="light"] .about { background: radial-gradient(ellipse 60% 70% at 85% 50%, rgba(6,111,54,0.09) 0%, transparent 70%), var(--lt-paper-2); background-blend-mode: normal; }
[data-theme="light"] .about-card { background: rgba(255,255,255,0.88); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }

/* ── Home: portfolio ─────────────────────────────────────────────── */
[data-theme="light"] .portfolio { background: var(--lt-card); }
[data-theme="light"] .filter-btn { background: var(--lt-card); border-color: var(--lt-border-strong); color: var(--lt-text); }
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active { background: var(--gradient-accent2); border-color: transparent; color: #fff; }
[data-theme="light"] .portfolio-item { background: var(--lt-card); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }
[data-theme="light"] .portfolio-item:hover { border-color: rgba(6,111,54,0.35); box-shadow: var(--lt-shadow-hover); }
[data-theme="light"] .portfolio-placeholder { background: linear-gradient(145deg, #e2eee6, #f4f9f6); }
[data-theme="light"] .portfolio-placeholder svg rect { fill: rgba(6,111,54,0.10); }
[data-theme="light"] .portfolio-placeholder svg g { stroke: var(--lt-accent); }
[data-theme="light"] .portfolio-overlay { background: rgba(234,241,236,0.9); }
[data-theme="light"] .portfolio-link { background: var(--gradient-accent2); color: #fff; }

/* ── Home: testimonials ──────────────────────────────────────────── */
[data-theme="light"] .testimonials { background: var(--lt-paper); }
[data-theme="light"] .testimonial-card { background: var(--lt-card); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }
[data-theme="light"] .tslider-btn { background: var(--lt-card); border-color: var(--lt-border-strong); }
[data-theme="light"] .tslider-btn:hover { background: var(--lt-tint); border-color: var(--lt-accent); }
[data-theme="light"] .tslider-dot { background: rgba(6,111,54,0.35); }
[data-theme="light"] .tslider-dot.active { background: var(--lt-accent); }
[data-theme="light"] .author-avatar { color: #020e08; }

/* ── Home: CTA ───────────────────────────────────────────────────── */
[data-theme="light"] .cta-gradient { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(6,111,54,0.12) 0%, transparent 60%), linear-gradient(180deg, var(--lt-card) 0%, var(--lt-paper-2) 100%); }
[data-theme="light"] .cta-pattern { background-image: radial-gradient(circle at 20% 50%, rgba(6,111,54,0.06) 1px, transparent 1px), radial-gradient(circle at 80% 50%, rgba(6,111,54,0.06) 1px, transparent 1px); }

/* ── Home: contact + shared form fields ──────────────────────────── */
[data-theme="light"] .contact { background: radial-gradient(ellipse 60% 70% at 15% 40%, rgba(6,111,54,0.08) 0%, transparent 70%), var(--lt-paper); background-blend-mode: normal; }
[data-theme="light"] .contact-form-container { background: var(--lt-card); border-color: var(--lt-border); box-shadow: 0 20px 50px rgba(11,31,21,0.08); }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea { background-color: var(--lt-paper); border-color: var(--lt-border-strong); color: var(--lt-heading); }
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder { color: var(--lt-muted); }
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus { background-color: var(--lt-card); box-shadow: 0 0 0 3px rgba(6,111,54,0.15); }
[data-theme="light"] .form-group select option { background: var(--lt-card); color: var(--lt-heading); }

/* ── Inner pages: page hero, stats band, CTA band ────────────────── */
[data-theme="light"] .page-hero-gradient { background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(6,111,54,0.10) 0%, transparent 60%), var(--lt-paper); }
[data-theme="light"] .page-hero-grid { background-image: linear-gradient(rgba(6,111,54,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6,111,54,0.05) 1px, transparent 1px); }
[data-theme="light"] .stat-band-item { background: var(--lt-card); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }
[data-theme="light"] .stat-band-item:hover { border-color: rgba(6,111,54,0.35); }
[data-theme="light"] .service-cta-bg { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(6,111,54,0.10) 0%, transparent 60%); }
[data-theme="light"] .service-cta-pattern { background-image: radial-gradient(circle, rgba(6,111,54,0.06) 1px, transparent 1px); }

/* ── Service pages: overview visual ──────────────────────────────── */
[data-theme="light"] .visual-ring   { border-color: rgba(6,111,54,0.22); }
[data-theme="light"] .visual-ring-2 { border-color: rgba(6,111,54,0.13); }
[data-theme="light"] .visual-ring-3 { border-color: rgba(6,111,54,0.07); }
[data-theme="light"] .visual-core { background: linear-gradient(145deg, rgba(6,111,54,0.12), var(--lt-card)); border-color: rgba(6,111,54,0.3); }
[data-theme="light"] .visual-badge { background: var(--lt-card); border-color: rgba(6,111,54,0.3); box-shadow: var(--lt-shadow); }
[data-theme="light"] .highlight-item { background: var(--lt-card); border-color: var(--lt-border); }
[data-theme="light"] .highlight-item:hover { background: var(--lt-tint); border-color: rgba(6,111,54,0.3); }

/* ── Service pages: cards, steps, tech badges ────────────────────── */
[data-theme="light"] .feature-card,
[data-theme="light"] .service-main-card,
[data-theme="light"] .why-card { background: var(--lt-card); border-color: var(--lt-border); box-shadow: var(--lt-shadow); }
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .service-main-card:hover,
[data-theme="light"] .why-card:hover { background: var(--lt-card); border-color: rgba(6,111,54,0.35); box-shadow: var(--lt-shadow-hover); }
[data-theme="light"] .feature-card-icon,
[data-theme="light"] .why-icon { background: var(--lt-tint); }
[data-theme="light"] .feature-card:hover .feature-card-icon,
[data-theme="light"] .why-card:hover .why-icon { background: var(--lt-tint-2); }
[data-theme="light"] .service-main-icon { background: var(--lt-tint); border-color: rgba(6,111,54,0.2); }
[data-theme="light"] .service-main-card:hover .service-main-icon { background: var(--lt-tint-2); border-color: rgba(6,111,54,0.35); }
[data-theme="light"] .process-connector,
[data-theme="light"] .workflow-grid::before { background: linear-gradient(90deg, transparent, rgba(6,111,54,0.3), rgba(6,111,54,0.3), transparent); }
[data-theme="light"] .step-number,
[data-theme="light"] .workflow-num { background: var(--lt-card); border-color: rgba(6,111,54,0.3); box-shadow: var(--lt-shadow); }
[data-theme="light"] .process-step:hover .step-number,
[data-theme="light"] .workflow-step:hover .workflow-num { background: var(--lt-card); border-color: var(--lt-accent); box-shadow: 0 0 0 6px var(--lt-tint); }
[data-theme="light"] .tech-badge { background: var(--lt-card); border-color: var(--lt-border); }
[data-theme="light"] .tech-badge:hover { background: var(--lt-tint); border-color: rgba(6,111,54,0.35); box-shadow: 0 8px 20px rgba(11,31,21,0.08); }

/* ── Contact page ────────────────────────────────────────────────── */
[data-theme="light"] .contact-method-card,
[data-theme="light"] .contact-hours-card,
[data-theme="light"] .contact-form-wrapper,
[data-theme="light"] .quick-connect-card { box-shadow: var(--lt-shadow); }
[data-theme="light"] .contact-method-card:hover,
[data-theme="light"] .quick-connect-card:hover { border-color: rgba(6,111,54,0.35); }
[data-theme="light"] .contact-method-icon,
[data-theme="light"] .quick-connect-icon { background: var(--lt-tint); border-color: rgba(6,111,54,0.2); }
[data-theme="light"] .contact-method-icon.wa,
[data-theme="light"] .quick-connect-icon.wa-icon,
[data-theme="light"] .contact-icon.whatsapp-icon svg { color: #0b8457; }
[data-theme="light"] .hours-row { border-bottom-color: var(--lt-border); }
[data-theme="light"] .form-error { background: rgba(211,47,47,0.07); border-color: rgba(211,47,47,0.4); }
[data-theme="light"] .form-error svg { color: #c62828; }
[data-theme="light"] .form-error strong { color: #7f1d1d; }
[data-theme="light"] .form-error p { color: #8a2a27; }
[data-theme="light"] .form-error a { color: #0b6b47; }

/* ── Hosting page ────────────────────────────────────────────────── */
[data-theme="light"] .hosting-stat { background: var(--lt-card); border-color: rgba(6,111,54,0.25); box-shadow: var(--lt-shadow); }
[data-theme="light"] .hosting-stat strong,
[data-theme="light"] .plan-icon,
[data-theme="light"] .plan-price .currency,
[data-theme="light"] .plan-price .amount,
[data-theme="light"] .plan-features li svg,
[data-theme="light"] .plan-email-link:hover,
[data-theme="light"] .host-feature-icon,
[data-theme="light"] .compare-table .th-featured,
[data-theme="light"] .check { color: var(--lt-accent); }
[data-theme="light"] .plan-card,
[data-theme="light"] .host-feature-card { box-shadow: var(--lt-shadow); }
[data-theme="light"] .plan-card:hover { border-color: rgba(6,111,54,0.35); box-shadow: var(--lt-shadow-hover); }
[data-theme="light"] .plan-card.featured { border-color: rgba(6,111,54,0.5); box-shadow: 0 0 0 1px rgba(6,111,54,0.2), var(--lt-shadow-hover); }
[data-theme="light"] .plan-icon,
[data-theme="light"] .host-feature-icon { background: var(--lt-tint); border-color: rgba(6,111,54,0.2); }
[data-theme="light"] .host-feature-card:hover { border-color: rgba(6,111,54,0.35); }
[data-theme="light"] .compare-table-wrap { border-color: var(--lt-border); }
[data-theme="light"] .compare-table th,
[data-theme="light"] .compare-table td { border-bottom-color: var(--lt-border); }
[data-theme="light"] .cross { color: rgba(75,98,85,0.45); }

/* ── Portfolio page ──────────────────────────────────────────────── */
[data-theme="light"] .portfolio-card { box-shadow: var(--lt-shadow); }
[data-theme="light"] .portfolio-card:hover { border-color: rgba(6,111,54,0.35); box-shadow: var(--lt-shadow-hover); }
[data-theme="light"] .pc-thumb svg { color: rgba(11,31,21,0.22); }
[data-theme="light"] .bg-web       { background: linear-gradient(135deg, #e4f2e9, #d3eadb); }
[data-theme="light"] .bg-mobile    { background: linear-gradient(135deg, #e8e9fb, #d9dbf6); }
[data-theme="light"] .bg-software  { background: linear-gradient(135deg, #fbefe2, #f5e1cb); }
[data-theme="light"] .bg-marketing { background: linear-gradient(135deg, #fbe6f0, #f4d3e3); }
[data-theme="light"] .bg-security  { background: linear-gradient(135deg, #fbe4e4, #f3d0d0); }
[data-theme="light"] .bg-data      { background: linear-gradient(135deg, #e1f4f6, #cdebef); }
[data-theme="light"] .pc-category-pill.web       { background: rgba(255,255,255,0.85); color: #066f36; border-color: rgba(6,111,54,0.35); }
[data-theme="light"] .pc-category-pill.mobile    { background: rgba(255,255,255,0.85); color: #3730a3; border-color: rgba(67,56,202,0.35); }
[data-theme="light"] .pc-category-pill.software  { background: rgba(255,255,255,0.85); color: #9a3412; border-color: rgba(194,65,12,0.35); }
[data-theme="light"] .pc-category-pill.marketing { background: rgba(255,255,255,0.85); color: #9d174d; border-color: rgba(190,24,93,0.35); }
[data-theme="light"] .pc-category-pill.security  { background: rgba(255,255,255,0.85); color: #991b1b; border-color: rgba(185,28,28,0.35); }
[data-theme="light"] .pc-category-pill.data      { background: rgba(255,255,255,0.85); color: #155e75; border-color: rgba(14,116,144,0.35); }
[data-theme="light"] .pc-client,
[data-theme="light"] .pc-result-stat strong { color: var(--lt-accent); }
[data-theme="light"] .pc-tag { background: var(--lt-tint); border-color: rgba(6,111,54,0.18); }
[data-theme="light"] .pc-results { border-top-color: var(--lt-border); }

/* ── Privacy / terms ─────────────────────────────────────────────── */
[data-theme="light"] .legal-header { border-bottom-color: var(--lt-border); }
[data-theme="light"] .legal-meta span,
[data-theme="light"] .legal-body h2,
[data-theme="light"] .legal-body a,
[data-theme="light"] .legal-toc ol li a:hover { color: var(--lt-accent); }
[data-theme="light"] .legal-body a { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .legal-toc { border-color: var(--lt-border); box-shadow: var(--lt-shadow); }

/* ── Thank-you + 404 ─────────────────────────────────────────────── */
[data-theme="light"] .ty-icon { color: var(--lt-accent); border-color: rgba(6,111,54,0.3); }
[data-theme="light"] .ty-timer span { color: var(--lt-accent); }
[data-theme="light"] .nf-number { background-image: linear-gradient(135deg, #066f36, #035a3e); }
[data-theme="light"] .nf-icon { color: rgba(6,111,54,0.65); border-color: rgba(6,111,54,0.25); }
[data-theme="light"] .nf-suggestions { border-top-color: var(--lt-border); }
[data-theme="light"] .nf-links a { border-color: var(--lt-border-strong); }
[data-theme="light"] .nf-links a:hover { border-color: var(--lt-accent); color: var(--lt-accent); }