/**
 * Light (cream) mode - additive override layer.
 *
 * Every rule in this file is scoped to :root[data-theme="light"], so the file is
 * inert until the visitor opts in through the header switch. Nothing here edits
 * the default navy design: that palette stays exactly as authored in style.css
 * and in the per-template <style> blocks.
 *
 * Surface values were sampled from the approved mock-up:
 *   page  #f0e0d1   header/hero  #f1e1d2   logo plate  #e6d3b9
 * The brand navy (#1a2332) and the gold gradient (#d4af37 -> #f4d03f) are
 * deliberately unchanged - in this mode they move from "background" duty to
 * "ink and accent" duty, which is why so few colours need redefining.
 *
 * !important appears only where the rule being overridden already used it
 * (hero backgrounds, navbar background, nav links, CTA headings); the cascade
 * offers no other way to win against those.
 *
 * @package hamed-law
 */

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root[data-theme="light"] {
    /* Sampled surfaces */
    --lm-page: #f0e0d1;
    --lm-panel: #f1e1d2;
    --lm-card: #fbf4ea;
    --lm-card-alt: #f6e9db;

    /* Emphasis blocks (CTA, emergency, table of contents header) */
    --lm-emphasis-start: #f7e7ca;
    --lm-emphasis-end: #efdcbc;

    /* Logo plate, sampled from the mock-up */
    --lm-plate-start: #f6e4c9;
    --lm-plate-end: #e6d3b9;

    /* Ink */
    --lm-ink: #1a2332;
    --lm-ink-soft: rgba(26, 35, 50, 0.78);
    --lm-ink-mute: rgba(26, 35, 50, 0.55);

    /* Lines and translucent panels */
    --lm-line: rgba(26, 35, 50, 0.12);
    --lm-line-strong: rgba(26, 35, 50, 0.22);
    --lm-line-gold: rgba(212, 175, 55, 0.38);
    --lm-glass: rgba(255, 255, 255, 0.55);
    --lm-glass-soft: rgba(255, 255, 255, 0.38);

    /* Re-point the two surface tokens the theme already reads everywhere, so
       the ~40 `background: var(--white)` cards and `var(--light-gray)` strips
       follow along without being listed one by one. Their use as *text* colour
       on formerly dark panels is corrected explicitly further down. */
    --white: #fbf4ea;
    --light-gray: #f6e9db;
}

/* ==========================================================================
   1. Base
   ========================================================================== */
:root[data-theme="light"] body {
    background-color: var(--lm-page);
}

:root[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--lm-card-alt);
}

/* ==========================================================================
   2. Navbar
   ========================================================================== */
:root[data-theme="light"] .navbar.bg-primary {
    background: linear-gradient(135deg, var(--lm-panel) 0%, var(--lm-page) 100%) !important;
    /* A crisp hairline instead of the default 20px blur: on a cream surface a
       blurred shadow reads as a smudge under the header rather than as depth. */
    box-shadow: 0 1px 0 rgba(26, 35, 50, 0.09);
}

/* main.js adds .scrolled once the page is scrolled past 50px, which repaints the
   bar with a translucent navy. Without this the header would jump back to the
   dark palette the moment the visitor scrolls. */
:root[data-theme="light"] .navbar.scrolled {
    background: rgba(241, 225, 210, 0.95) !important;
    box-shadow: 0 2px 10px rgba(26, 35, 50, 0.07);
}

:root[data-theme="light"] .navbar-brand .site-title,
:root[data-theme="light"] .site-title {
    color: var(--lm-ink) !important;
}

:root[data-theme="light"] .navbar-brand .site-tagline,
:root[data-theme="light"] .site-tagline {
    color: var(--lm-ink-mute) !important;
}

:root[data-theme="light"] .navbar-nav .nav-link {
    color: var(--lm-ink-soft) !important;
}

/* The gold "active/hover" pill already pairs gold with navy text, so it needs
   no change - only the resting state above moves. */

/* Logo plate: navy disc on navy navbar becomes a warm plate on cream. */
:root[data-theme="light"] .logo,
:root[data-theme="light"] .footer-logo .logo-icon,
:root[data-theme="light"] .logo-icon {
    background: linear-gradient(135deg, var(--lm-plate-start), var(--lm-plate-end));
    border-color: var(--lm-line-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25), 0 0 30px rgba(212, 175, 55, 0.12);
}

:root[data-theme="light"] .navbar-brand:hover .logo {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.35), 0 0 50px rgba(212, 175, 55, 0.18);
    border-color: var(--lm-line-gold);
}

/* Mobile: Bootstrap draws the burger from its own custom properties, so the
   supported way to recolour it is to redefine them rather than to restyle the
   pseudo element. */
:root[data-theme="light"] .navbar-dark {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 35, 50, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(26, 35, 50, 0.18);
}

/* The tinted panel belongs to the collapsed dropdown only. style.css declares
   its dark counterpart inside the same breakpoint, so this has to be scoped the
   same way: unscoped, it paints a translucent band across the whole nav row on
   desktop, which is exactly the haze that had to be removed. */
@media (max-width: 991.98px) {
    :root[data-theme="light"] .navbar-collapse {
        background: rgba(26, 35, 50, 0.05);
    }
}

/* Language switcher */
:root[data-theme="light"] .language-switcher .lang-link {
    border-color: var(--lm-line-strong);
    color: var(--lm-ink-soft) !important;
}

:root[data-theme="light"] .language-switcher .lang-link:hover,
:root[data-theme="light"] .language-switcher .lang-link:focus-visible {
    background: rgba(26, 35, 50, 0.06);
    border-color: var(--secondary-gold);
}

:root[data-theme="light"] .language-switcher .lang-link.active {
    background: var(--secondary-gold);
    border-color: var(--secondary-gold);
    color: var(--primary-navy) !important;
}

/* Mode switch itself */
:root[data-theme="light"] .theme-toggle {
    border-color: var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.45);
    color: var(--lm-ink);
}

:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .theme-toggle:focus-visible {
    background: var(--secondary-gold);
    border-color: var(--secondary-gold);
    color: var(--primary-navy);
}

/* ==========================================================================
   3. Heroes
   ========================================================================== */
:root[data-theme="light"] .home-hero,
:root[data-theme="light"] .services-hero,
:root[data-theme="light"] .consultation-hero,
:root[data-theme="light"] .about-hero,
:root[data-theme="light"] .blog-hero,
:root[data-theme="light"] .contact-hero,
:root[data-theme="light"] .search-hero,
:root[data-theme="light"] .hero-section,
:root[data-theme="light"] .page-hero {
    background: linear-gradient(135deg, var(--lm-panel) 0%, var(--lm-page) 100%) !important;
    color: var(--lm-ink) !important;
}

/* style.css layers a flat rgba(0, 0, 0, 0.2) sheet underneath the gold glows of
   the shared hero overlay (declared twice, at .hero-overlay). Over navy it is
   invisible; over cream it drains the beige to a muddy #c1b4a4. The contact and
   consultation pages were the only ones that looked right because each template
   declares its own overlay locally, gold glows only. Same two glows here,
   without the black sheet. */
:root[data-theme="light"] .hero-overlay {
    background: radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.10) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
}

:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero-section h1,
:root[data-theme="light"] .page-hero h1,
:root[data-theme="light"] .contact-hero h1,
:root[data-theme="light"] .consultation-hero h1,
:root[data-theme="light"] .search-hero h1 {
    color: var(--lm-ink) !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .hero-subtitle,
:root[data-theme="light"] .search-hero p {
    color: var(--lm-ink-soft) !important;
}

:root[data-theme="light"] .hero-description {
    color: var(--lm-ink-soft);
}

:root[data-theme="light"] .hero-badge {
    background: rgba(212, 175, 55, 0.14);
    border-color: var(--lm-line-gold);
}

:root[data-theme="light"] .hero-stat,
:root[data-theme="light"] .hero-feature {
    background: var(--lm-glass);
    border-color: var(--lm-line-gold);
}

:root[data-theme="light"] .stat-label,
:root[data-theme="light"] .hero-feature span,
:root[data-theme="light"] .stats-section .stat-label {
    color: var(--lm-ink-soft);
}

:root[data-theme="light"] .scroll-indicator {
    color: var(--lm-ink-mute) !important;
}

/* Buttons that were designed to sit on a dark hero. The filled gold button is
   already navy-on-gold and stays untouched. */
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-tertiary,
:root[data-theme="light"] .btn-outline,
:root[data-theme="light"] .contact-method {
    background: transparent;
    color: var(--lm-ink);
    border-color: var(--lm-line-strong);
}

:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .btn-tertiary:hover,
:root[data-theme="light"] .btn-outline:hover,
:root[data-theme="light"] .contact-method:hover {
    background: var(--secondary-gold);
    color: var(--primary-navy);
    border-color: var(--secondary-gold);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.28);
}

/* ==========================================================================
   4. Light sections and cards that were pure white / #f8f9fa
   ========================================================================== */
:root[data-theme="light"] .services-section {
    background: linear-gradient(135deg, var(--lm-page) 0%, var(--lm-card) 50%, var(--lm-card-alt) 100%);
}

:root[data-theme="light"] .process-section,
:root[data-theme="light"] .simple-page,
:root[data-theme="light"] .services-seo-content,
:root[data-theme="light"] .single-post-wrapper,
:root[data-theme="light"] .category-page,
:root[data-theme="light"] .tag-page,
:root[data-theme="light"] .categories-navbar-section {
    background: var(--lm-page);
}

:root[data-theme="light"] .contact-content,
:root[data-theme="light"] .consultation-form-section {
    background: linear-gradient(135deg, var(--lm-page) 0%, var(--lm-card) 100%);
}

:root[data-theme="light"] .single-post-content,
:root[data-theme="light"] .category-post-card,
:root[data-theme="light"] .tag-post-card,
:root[data-theme="light"] .service-detailed-card,
:root[data-theme="light"] .related-post-card,
/* :not() on the selected/current state: each carries its own gold or navy fill
   with white text, already readable on cream. Without the exclusion this rule's
   extra type selectors (root, li, span...) out-specify ".active"/".current" -
   0,2,1 beats 0,2,0 for the category pill, 0,3,3 beats 0,3,2 for the pagination
   span - so the plain-card colour silently replaced the selected fill, leaving
   white text almost invisible on cream. */
:root[data-theme="light"] .category-nav-item:not(.active):not(:hover),
:root[data-theme="light"] .pagination a:not(:hover),
:root[data-theme="light"] .pagination span:not(.current),
:root[data-theme="light"] .blog-pagination .page-numbers li a:not(:hover),
:root[data-theme="light"] .blog-pagination .page-numbers li span:not(.current),
:root[data-theme="light"] .post-navigation a:hover {
    background: var(--lm-card);
}

:root[data-theme="light"] .categories-navbar,
:root[data-theme="light"] .table-of-contents {
    background: linear-gradient(135deg, var(--lm-card) 0%, var(--lm-card-alt) 100%);
}

:root[data-theme="light"] .related-post-image,
:root[data-theme="light"] .post-tags a,
:root[data-theme="light"] .post-navigation a,
:root[data-theme="light"] .info-item,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group select {
    background: var(--lm-card-alt);
}

:root[data-theme="light"] .form-group input:focus,
:root[data-theme="light"] .form-group select:focus,
:root[data-theme="light"] .form-group textarea:focus {
    background: var(--lm-card);
}

:root[data-theme="light"] .categories-scroll-wrapper::-webkit-scrollbar-track,
:root[data-theme="light"] .table-of-contents-body.active::-webkit-scrollbar-track {
    background: var(--lm-card-alt);
}

/* ==========================================================================
   5. Panels that were navy islands: archive headers, 404, table of contents
   ========================================================================== */
:root[data-theme="light"] .category-header,
:root[data-theme="light"] .tag-header,
:root[data-theme="light"] .error-404-section {
    background: linear-gradient(135deg, var(--lm-panel) 0%, var(--lm-page) 100%);
}

:root[data-theme="light"] .category-title,
:root[data-theme="light"] .tag-title,
:root[data-theme="light"] .error-404-title {
    color: var(--lm-ink);
}

:root[data-theme="light"] .category-description,
:root[data-theme="light"] .tag-description,
:root[data-theme="light"] .error-404-description {
    color: var(--lm-ink-soft);
}

:root[data-theme="light"] .error-404-link-item {
    background: var(--lm-glass);
    border-color: var(--lm-line-gold);
}

:root[data-theme="light"] .error-404-link-item:hover {
    background: rgba(212, 175, 55, 0.14);
    border-color: var(--secondary-gold);
}

:root[data-theme="light"] .error-404-link-item a {
    color: var(--lm-ink);
}

:root[data-theme="light"] .table-of-contents-header,
:root[data-theme="light"] .table-of-contents-header:hover {
    background: linear-gradient(135deg, var(--lm-emphasis-start) 0%, var(--lm-emphasis-end) 100%);
}

:root[data-theme="light"] .table-of-contents-header h3 {
    color: var(--lm-ink);
}

/* ==========================================================================
   6. Emphasis blocks: CTA, SEO box, emergency contact
   ========================================================================== */
:root[data-theme="light"] .cta-section,
:root[data-theme="light"] .post-cta,
:root[data-theme="light"] .seo-cta-box,
:root[data-theme="light"] .emergency-section,
:root[data-theme="light"] .emergency-contact {
    background: linear-gradient(135deg, var(--lm-emphasis-start) 0%, var(--lm-emphasis-end) 100%);
    color: var(--lm-ink);
    border: 1px solid var(--lm-line-gold);
}

:root[data-theme="light"] .cta-content h2,
:root[data-theme="light"] .post-cta h3,
:root[data-theme="light"] .emergency-contact h4 {
    color: var(--lm-ink) !important;
}

:root[data-theme="light"] .cta-content p,
:root[data-theme="light"] .post-cta p,
:root[data-theme="light"] .seo-cta-box p,
:root[data-theme="light"] .emergency-contact p {
    color: var(--lm-ink-soft) !important;
}

:root[data-theme="light"] .cta-feature,
:root[data-theme="light"] .trust-item {
    color: var(--lm-ink);
}

:root[data-theme="light"] .trust-label {
    color: var(--lm-ink-mute);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
:root[data-theme="light"] .site-footer {
    background: linear-gradient(135deg, var(--lm-panel) 0%, var(--lm-page) 100%);
    color: var(--lm-ink);
    border-top: 1px solid var(--lm-line-gold);
}

:root[data-theme="light"] .footer-newsletter {
    background: var(--lm-glass);
    border-color: var(--lm-line-gold);
}

:root[data-theme="light"] .newsletter-text h3,
:root[data-theme="light"] .footer-logo h3,
:root[data-theme="light"] .contact-value,
:root[data-theme="light"] .work-day {
    color: var(--lm-ink);
}

:root[data-theme="light"] .newsletter-text p,
:root[data-theme="light"] .footer-about p,
:root[data-theme="light"] .footer-section li a,
:root[data-theme="light"] .copyright p,
:root[data-theme="light"] .footer-bottom-links a,
:root[data-theme="light"] .stat-label {
    color: var(--lm-ink-soft);
}

:root[data-theme="light"] .contact-label {
    color: var(--lm-ink-mute);
}

:root[data-theme="light"] .newsletter-form input {
    background: var(--lm-card);
    border-color: var(--lm-line-strong);
    color: var(--lm-ink);
}

:root[data-theme="light"] .newsletter-form input::placeholder {
    color: var(--lm-ink-mute);
}

:root[data-theme="light"] .footer-stats .stat-item,
:root[data-theme="light"] .contact-item {
    background: var(--lm-glass-soft);
    border-color: var(--lm-line-gold);
}

:root[data-theme="light"] .contact-item:hover {
    background: var(--lm-glass);
}

:root[data-theme="light"] .social-link {
    background: var(--lm-glass);
    border-color: var(--lm-line-gold);
    color: var(--lm-ink);
}

/* .social-link:hover is already gold-on-navy and stays as authored. */

:root[data-theme="light"] .footer-bottom {
    border-top-color: var(--lm-line);
}

:root[data-theme="light"] .footer-section li a:hover,
:root[data-theme="light"] .footer-bottom-links a:hover {
    color: var(--secondary-gold);
}