/**
 * Light Page Template Overrides
 *
 * Scoped to body.light-mode — applied only when the "Light Page" template is assigned.
 * Reverses Basel's dark theme (body.basel-dark) to a clean white background with dark text.
 *
 * Structure targeted:
 *   body.light-mode
 *   └─ .website-wrapper
 *      └─ .main-page-wrapper
 *         └─ .site-content
 *            └─ article > .entry-content
 */

/* ============================================================
   1. Body & top-level background
   ============================================================ */
body.light-mode,
body.light-mode .website-wrapper,
body.light-mode .main-page-wrapper {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ============================================================
   2. Page content area
   ============================================================ */
body.light-mode .site-content,
body.light-mode .entry-content,
body.light-mode article {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ============================================================
   3. Headings
   ============================================================ */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .entry-content h1,
body.light-mode .entry-content h2,
body.light-mode .entry-content h3,
body.light-mode .entry-content h4,
body.light-mode .entry-content h5,
body.light-mode .entry-content h6 {
    color: #111111 !important;
}

/* ============================================================
   4. Body text, paragraphs, lists
   ============================================================ */
body.light-mode p,
body.light-mode li,
body.light-mode ul,
body.light-mode ol,
body.light-mode .entry-content p,
body.light-mode .entry-content li,
body.light-mode .entry-content ul,
body.light-mode .entry-content ol {
    color: #333333 !important;
}

/* ============================================================
   5. Links
   ============================================================ */
body.light-mode a,
body.light-mode .entry-content a {
    color: #0a5fa8 !important;
}

body.light-mode a:hover,
body.light-mode .entry-content a:hover {
    color: #073f72 !important;
}

/* ============================================================
   6. Basel dark-mode overrides — website-wrapper & main-page-wrapper
      The opt-basel-dark.min.css sets these to #000 via .basel-dark selectors.
      We need higher specificity to win.
   ============================================================ */
body.light-mode.basel-dark .website-wrapper,
body.light-mode.basel-dark .main-page-wrapper {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ============================================================
   7. Page title / breadcrumb area (Basel renders above content)
   ============================================================ */
body.light-mode .page-title,
body.light-mode .page-title-wrap,
body.light-mode .single-breadcrumbs-wrapper,
body.light-mode .woocommerce-breadcrumb,
body.light-mode .yoast-breadcrumb {
    background-color: #f5f5f5 !important;
    color: #555555 !important;
    border-color: #dddddd !important;
}

body.light-mode .page-title h1,
body.light-mode .page-title-wrap h1 {
    color: #111111 !important;
}

body.light-mode.basel-dark .woocommerce-breadcrumb,
body.light-mode.basel-dark .yoast-breadcrumb {
    color: #555555 !important;
}

body.light-mode.basel-dark .woocommerce-breadcrumb a,
body.light-mode.basel-dark .yoast-breadcrumb a,
body.light-mode.basel-dark .woocommerce-breadcrumb span:before,
body.light-mode.basel-dark .yoast-breadcrumb span:before {
    color: #0a5fa8 !important;
}

/* ============================================================
   8. Tables (Basel dark sets odd rows to rgba(0,0,0,0.3) etc.)
   ============================================================ */
body.light-mode table,
body.light-mode table th,
body.light-mode table td,
body.light-mode.basel-dark table tbody th,
body.light-mode.basel-dark table tfoot th,
body.light-mode.basel-dark .woocommerce table.shop_table_responsive tbody td,
body.light-mode.basel-dark .table-striped > tbody > tr:nth-child(odd) {
    background-color: transparent !important;
    color: #1a1a1a !important;
    border-color: #dddddd !important;
}

/* ============================================================
   9. Basel-dark element overrides that use background-color:#111
      (dropdowns, scrollToTop, etc. — only suppress the ones
       that appear in legal page context)
   ============================================================ */
body.light-mode.basel-dark .scrollToTop {
    background-color: #333333 !important;
    border-color: #555555 !important;
}

/* ============================================================
   10. Sidebar (if rendered on this template)
   ============================================================ */
body.light-mode .sidebar-widget,
body.light-mode .filter-widget {
    background-color: #f9f9f9 !important;
    color: #1a1a1a !important;
}

body.light-mode.basel-dark .sidebar-widget p,
body.light-mode.basel-dark .filter-widget p,
body.light-mode.basel-dark .sidebar-widget li,
body.light-mode.basel-dark .filter-widget li {
    color: #333333 !important;
}

body.light-mode.basel-dark .sidebar-widget li a,
body.light-mode.basel-dark .filter-widget li a,
body.light-mode.basel-dark .widgettitle,
body.light-mode.basel-dark .widget-title {
    color: #0a5fa8 !important;
}

/* ============================================================
   11. wp_link_pages multi-page navigation
   ============================================================ */
body.light-mode .page-links {
    color: #333333 !important;
}

body.light-mode .page-links a {
    color: #0a5fa8 !important;
}

/* ============================================================
   12. Comments (in case page_comments is on)
   ============================================================ */
body.light-mode .comments-area,
body.light-mode .comment-body {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

body.light-mode.basel-dark .comments-area .comment-body .comment-author .fn,
body.light-mode.basel-dark .comments-area .comment-body .comment-author .says,
body.light-mode.basel-dark .comments-area .comment-body .comment-meta .comment-edit-link {
    color: #333333 !important;
}