/* catalog\static\catalog\css\easywebsight.css */

/* ============================================
   EASYWEBSIGHT — MASTER CSS IMPORT BUNDLE
   A unified entry point for the entire design system
   ============================================ */

/* --------------------------------------------
   1. LIGHT MODE — MUST LOAD FIRST
   -------------------------------------------- */
@import url("components/lightmode-apple-news.css");

/* --------------------------------------------
   2. DESIGN SYSTEM — TOKENS, TYPOGRAPHY
   (These contain unscoped light-mode rules)
   -------------------------------------------- */
@import url("design-system/tokens.css");
@import url("design-system/typography.css");

/* --------------------------------------------
   3. COMPONENTS — PURE, REUSABLE UI ELEMENTS
   -------------------------------------------- */
/* @import url("components/segmented-control.css"); */
@import url("components/segmented-control-apple.css");
@import url("components/cards.css");
@import url("components/nav.css");
@import url("components/thumbnails.css");
@import url("components/forms.css");
@import url("components/pagination.css");
@import url("components/echo-chamber.css"); /* ⭐ Correct placement */
@import url("components/editors-picks.css"); /* ⭐ Correct placement */

/* --------------------------------------------
   4. THEMES — SECTION‑SPECIFIC COLOR SYSTEMS
   -------------------------------------------- */
/* @import url("themes/segmented-control-themes.css"); */
@import url("themes/books.css");
@import url("themes/articles.css");
@import url("themes/editorials.css");
@import url("themes/authors.css");

/* --------------------------------------------
   5. LAYOUT — GRID, WRAPPERS, STRUCTURE
   -------------------------------------------- */
@import url("layout/layout.css");
@import url("layout/containers.css");
@import url("layout/wrappers.css");

/* --------------------------------------------
   6. CONTENT — RICH TEXT, ARTICLES, READER MODE
   -------------------------------------------- */
@import url("content/content.css");
@import url("content/reader.css");

/* --------------------------------------------
   7. APP — PROJECT‑SPECIFIC OVERRIDES
   -------------------------------------------- */
@import url("app/app.css");

/* -----------------------------------------------------
   8. EASYWEBSIGHT — GLOBAL JPEG IMAGE ROUNDING CONTROLS
   ----------------------------------------------------- */
@import url("themes/images.css");

/* --------------------------------------------
   9. DARK MODE — MUST LOAD LAST
   (Overrides everything above cleanly)
   -------------------------------------------- */
@import url("design-system/darkmode.css");




/* --------------------------------------------
   10. NAV FIXES
   -------------------------------------------- */
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
}

.navbar-nav .dropdown-toggle {
    display: inline-flex;
    align-items: center;
}




/* 
-------------------------------------------
⭐ Best place for it: your main CSS bundle
-------------------------------------------
 */
.ew-link-hero {
  font-weight: 650;
  color: #0d6efd; /* brand accent or your neon pop */
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  letter-spacing: 0.3px;
  text-shadow: 0 0 6px rgba(13,110,253,0.35);
}

.ew-link-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: currentColor;
  opacity: 0.85;
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease;
}

.ew-link-hero:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.ew-link-hero:hover {
  text-shadow: 0 0 10px rgba(13,110,253,0.55);
}





/* --------------------------------------
✨ Subtle‑Elegant Link Style (Refined)
-------------------------------------- */
/* 
.ew-link-soft {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
} */


/* Test to see if CSS is working - create a solid red box */
/* 
.ew-link-soft {
  border: 1px solid red !important;
} */


.ew-link-soft::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: currentColor;
  opacity: 0.35;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.ew-link-soft:hover::after {
  width: 100%;
  opacity: 0.6;
}




/* ----------------------------------------------------
🔥 Bold, Attention‑Grabbing Link (Refined + Premium)
---------------------------------------------------- */
.ew-link-bold {
  font-weight: 600;
  color: #0d6efd; /* or your brand accent */
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  letter-spacing: 0.2px;
}

.ew-link-bold::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  opacity: 0.55;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.ew-link-bold:hover::after {
  transform: scaleX(1);
  opacity: 0.9;
}


/* --------------------------------------------
   AUTHOR WORKS — TAB VISIBILITY + RESPONSIVENESS
   -------------------------------------------- */
/* 
.nav-tabs .nav-link {
    color: #ffffff !important;
    opacity: 0.75;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    opacity: 1;
    color: #ffffff !important;
}

.nav-tabs .nav-link.active {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    border-color: #ffffff !important;
    font-weight: 700;
    opacity: 1;
    border-radius: 6px;
}

.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-bottom: none !important;
}

.nav-tabs .nav-item {
    flex: 1;
    text-align: center;
}
 */

/* ============================================================
   AUTHOR WORKS — APPLE NEWS STYLE TABS
   ============================================================ */

/* Base tab styling */
.nav-tabs .nav-link {
    color: #ffffff !important;      /* readable on blue */
    opacity: 0.85;                  /* subtle dim for inactive */
    font-weight: 600;
    background: transparent;
    border: none;
    transition: all 0.25s ease;
    padding: 0.6rem 1.2rem;
}

/* Hover state for inactive tabs */
.nav-tabs .nav-link:hover {
    opacity: 1;
    color: #ffffff !important;
    transform: translateY(-1px);    /* tiny lift */
}

/* ACTIVE TAB — FLOATING APPLE NEWS STYLE */
.nav-tabs .nav-link.active {
    background: #ffffff !important;     /* white pill */
    color: #0d6efd !important;          /* brand blue text */
    border-radius: 10px;
    font-weight: 700;
    opacity: 1;
    transform: translateY(-3px);        /* floating effect */
    box-shadow: 0 6px 14px rgba(0,0,0,0.18),
                0 2px 4px rgba(0,0,0,0.12); /* Apple-style lift */
}

/* Tab bar layout */
.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-bottom: none !important;
}

/* Make tabs responsive and evenly spaced */
.nav-tabs .nav-item {
    flex: 1;
    text-align: center;
}



/* ============================================================
   AUTHOR WORKS — APPLE NEWS STYLE TABS (FINAL VERSION)
   ============================================================ */

/* Base tab styling */
.nav-tabs .nav-link {
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
    padding: 0.55rem 1.2rem;
    transition: all 0.25s ease;
    border-radius: 10px;
}

/* INACTIVE TABS — semi-transparent white pills */
.nav-tabs .nav-link:not(.active) {
    background: rgba(255,255,255,0.22);      /* visible on blue */
    backdrop-filter: blur(6px);              /* Apple glass effect */
    -webkit-backdrop-filter: blur(6px);
    opacity: 1;                               /* full visibility */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* Hover state for inactive tabs */
.nav-tabs .nav-link:not(.active):hover {
    background: rgba(255,255,255,0.32);
    transform: translateY(-2px);
}

/* ACTIVE TAB — floating white pill */
.nav-tabs .nav-link.active {
    background: #ffffff !important;
    color: #0d6efd !important;
    font-weight: 700;
    transform: translateY(-4px);              /* floating effect */
    box-shadow: 
        0 8px 18px rgba(0,0,0,0.22),
        0 3px 6px rgba(0,0,0,0.18);
}

/* Tab bar layout */
.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-bottom: none !important;
}

/* Responsive equal-width tabs */
.nav-tabs .nav-item {
    flex: 1;
    text-align: center;
}


/* ============================================================
   AUTHOR WORKS — HIGH VISIBILITY TABS (SPECIFICITY FIX)
   ============================================================ */

/* Inactive tabs — solid white pill, blue text */
.ew-tabs.nav-tabs .nav-link:not(.active) {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    opacity: 1 !important;
}

/* Hover on inactive */
.ew-tabs.nav-tabs .nav-link:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* Active tab — floating blue pill */
.ew-tabs.nav-tabs .nav-link.active {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 999px;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}

/* Layout */
.ew-tabs.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    border-bottom: none !important;
}

.ew-tabs.nav-tabs .nav-item {
    flex: 1;
    text-align: center;
}



/* ✅ Fix: High‑visibility inactive tabs - DeepSeek */
/* ============================================
   EXTRA VISIBILITY FOR "BOOKS / ARTICLES / EDITORIALS" TABS
   ============================================ */
.ew-tabs.nav-tabs .nav-link {
    /* Force all tabs to have consistent sizing and transitions */
    transition: all 0.2s ease;
    font-weight: 600;
}

/* INACTIVE TABS — high‑contrast, solid appearance */
.ew-tabs.nav-tabs .nav-link:not(.active) {
    background: #f8f9fa !important;      /* light grey‑white, not pure white */
    color: #0a58ca !important;            /* darker blue for text */
    border: 1px solid rgba(0,0,0,0.15) !important;  /* subtle border defines shape */
    border-radius: 30px !important;       /* pill shape */
    padding: 0.5rem 1.2rem !important;
    opacity: 1 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Hover on inactive tabs — lift + darker text */
.ew-tabs.nav-tabs .nav-link:not(.active):hover {
    background: #ffffff !important;
    color: #084298 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ACTIVE TAB — keep your existing style but reinforce */
.ew-tabs.nav-tabs .nav-link.active {
    background: #0b5ed7 !important;   /* slightly deeper blue */
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    font-weight: 700;
}


/* ⭐ Now paste THIS at the very bottom of easywebsight.css - Copilot */
/* ============================================================
   AUTHOR WORKS — MAX SPECIFICITY VISIBILITY FIX
   ============================================================ */

/* Inactive tabs — solid white pill, blue text */
.ew-author-tabs.nav-tabs .nav-link:not(.active),
.ew-author-tabs .nav-item .nav-link:not(.active) {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.2rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
    opacity: 1 !important;
}

/* Hover on inactive */
.ew-author-tabs.nav-tabs .nav-link:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
}

/* Active tab — floating blue pill */
.ew-author-tabs.nav-tabs .nav-link.active,
.ew-author-tabs .nav-item .nav-link.active {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.28) !important;
}

/* Layout */
.ew-author-tabs.nav-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    border-bottom: none !important;
}

.ew-author-tabs.nav-tabs .nav-item {
    flex: 1 !important;
    text-align: center !important;
}


/* ✅ STEP 2 — Paste THIS at the very bottom of easywebsight.css - Copilot */
/* ============================================================
   AUTHOR WORKS — MAXIMUM VISIBILITY FIX (NUCLEAR OVERRIDE)
   ============================================================ */

/* Inactive tabs — solid white pill, blue text */
.ew-author-tabs.nav-tabs .nav-item .nav-link:not(.active) {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.2rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    opacity: 1 !important;
}

/* Hover on inactive */
.ew-author-tabs.nav-tabs .nav-item .nav-link:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
}

/* Active tab — floating blue pill */
.ew-author-tabs.nav-tabs .nav-item .nav-link.active {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

/* Layout */
.ew-author-tabs.nav-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    border-bottom: none !important;
}

.ew-author-tabs.nav-tabs .nav-item {
    flex: 1 !important;
    text-align: center !important;
}








/* ⭐ FIX THIS IN 3 STEPS - Copilot */
/* 1. Edit the REAL file */

/* AUTHOR WORKS — guaranteed override */
.ew-author-tabs.nav-tabs .nav-item .nav-link:not(.active) {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.2rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    opacity: 1 !important;
}

.ew-author-tabs.nav-tabs .nav-item .nav-link.active {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}


/* ⭐ STEP 2 — Add this CSS at the very bottom of easywebsight.css - Copilot */
/* ============================================================
   AUTHOR HEADER FRAME (user13 + All Authors + My Profile)
   ============================================================ */

.ew-author-header-frame {
    background: #0d6efd;                 /* same blue as Author Works */
    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    text-align: center;
}

.ew-author-header-frame h1 {
    color: #ffffff !important;
}

/* Make segmented control visible on blue */
.ew-author-header-frame .segmented-control-apple .segment {
    color: #ffffff !important;
}




/* ============================================================
   AUTHOR HEADER FRAME (Authors + All Authors + My Profile)
   ============================================================ */

.ew-author-header-frame {
    /* background: #0d6efd;                  */
    /* same blue as Author Works */
    background-color: var(--bs-primary) !important;
    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    text-align: center;
}

.ew-author-header-frame h1 {
    color: #ffffff !important;
}

/* Make segmented control visible on blue */
.ew-author-header-frame .segmented-control-apple .segment {
    color: #ffffff !important;
}



/* ============================================================
   AUTHOR LIST — top clearance for author image
   ============================================================ */

.author-photo-wrapper {
    padding-top: 12px;        /* adjust to 14px or 16px if you want more space */
}

.author-photo-wrapper .author-thumb {
    display: block;
    margin-left: auto;
    margin-right: auto;       /* keeps the image centered */
}






/* ⭐ Option 1 — Clean White Button (Apple‑style) */
.jump-btn {
    display: inline-block;
    background: #ffffff;
    color: #0d6efd;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border: 2px solid #e5e5e5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.jump-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* ⭐ Option B — Add a reusable CSS class (cleaner) */
/* In your main CSS (or inside author_detail.html <style> block), add: */
.tab-bottom-spacer {
    height: 750px; /* adjust as needed */
    /* height: 600px;  */
    /* adjust as needed */
}



/* ⭐ STEP 2 — Add the floating button CSS */
/* Place this inside your <style> block in the same file. */
/* ⭐ Floating Jump Button */
.floating-jump-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #ffffff;
    color: #0d6efd;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: all 0.25s ease;
}

.floating-jump-btn:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}






/* ⭐ STEP 2 — Add the white‑background button styling */
/* Add this CSS inside the <style> block of the same template: */
.back-to-book-btn {
    /* background: #ffffff !important;         */
    /* white background */
    background: #ddf8ff !important;        /* light blue background */
    color: #0d6efd !important;             /* blue text */
    border: 1px solid #e0e0e0 !important;  /* subtle border */
    padding: 6px 12px !important;          /* button padding */
    border-radius: 8px !important;         /* rounded corners */
    text-decoration: none !important;      /* remove underline */
    font-weight: 600 !important;           /* bold text */
    font-weight: 400 !important;           /* bold text */
    display: inline-block !important;      /* prevents full-width */
    width: auto !important;                /* shrink to text */
    white-space: nowrap !important;        /* prevent wrapping */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* soft shadow */
}
.back-to-book-btn:hover {
    background: #f8f9fa !important;
    background: #bce9ff !important;     /* working on this */
    color: #0a58ca !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}


/* ✔ STEP 2 — Add the pale‑grey background styling */
/* Add this CSS inside the <style> block of the same template: */
.cancel-btn {
    background-color: #f2f2f2 !important;   /* pale grey */
    background-color: #ffffff !important;   /* pale grey */
    background-color: #f5f7fa !important;   /* pale grey */
    color: #333 !important;                 /* dark text */
    border-color: #d0d0d0 !important;       /* soft border */
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.cancel-btn:hover {
    background-color: #e6e6e6 !important;   /* slightly darker on hover */
    border-color: #c8c8c8 !important;
    color: #000 !important;
}


/* ⭐ STEP 2 — Add the white frame styling */
.chapter-form-frame {
    background: #ffffff;
    padding: 24px 28px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 32px;
}

/* Improve label spacing */
.chapter-form-frame label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Pale grey Cancel button */
.cancel-btn {
    background-color: #f2f2f2 !important;
    color: #333 !important;
    border-color: #d0d0d0 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.cancel-btn:hover {
    background-color: #e6e6e6 !important;
    border-color: #c8c8c8 !important;
    color: #000 !important;
}


/* ⭐ Option 1 — Make the dropdown 100% width (recommended) */
#id_author {
    width: 100% !important;
}


/* ----------------------------
⭐ The fix (100% guaranteed)
---------------------------- */
/* Add this to your main stylesheet (easywebsight.css or similar): */
/* .ew-books-header-frame {
    background: #0d6efd !important;
} */

/* -----------------------------------------
⭐ Step 1 — Update ew-books-header-frame
----------------------------------------- */
/* In catalog/css/themes/books.css, replace previous entry with: */
.ew-books-header-frame {
    background-color: var(--bs-primary) !important;
}



/* ⭐ CSS (add once to your main stylesheet) */
.book-header-card {
    background: #0d6efd !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.book-header-card h1,
.book-header-card p {
    color: white !important;
}


/* ------------------------------------
⭐ Where to put this CSS (critical)
------------------------------------ */
/* Place it in your main stylesheet, NOT inside the template.

Why?

Because your main stylesheet loads after Bootstrap, so your override wins.

If you leave it inside the template, Bootstrap will override it again. */
.book-header-card,
.book-header-card .card-body {
    background-color: #0d6efd !important;
}

.book-header-card h1,
.book-header-card p,
.book-header-card a {
    color: #ffffff !important;
}

/* ----------------------------------------------
⭐ The fix — identical to the Book Detail fix
---------------------------------------------- */
/* Add this to your main stylesheet (NOT inside the template): */
.chapter-title-frame,
.chapter-title-frame .card-body,
.chapter-title-frame .chapter-title-inner {
    background-color: #0d6efd !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
}

.chapter-title-frame h1,
.chapter-title-frame h2,
.chapter-title-frame p,
.chapter-title-frame a {
    color: #ffffff !important;
}


/* -------------------------------------------
⭐ 2. Apply the system using CSS variables
------------------------------------------- */
/* Add this block at the very bottom of easywebsight.css: */
/* ============================================================
   DARK MODE — BLUE ACCENT SYSTEM
   ============================================================ */

@media (prefers-color-scheme: dark) {

    :root {
        --ew-accent: #3D8BFF;
        --ew-accent-hover: #5AA0FF;
        --ew-accent-active: #1E6FFF;
        --ew-border-subtle: #2A2F3A;

        /* Override Bootstrap tokens */
        --bs-primary: var(--ew-accent);
        --bs-link-color: var(--ew-accent);
        --bs-link-hover-color: var(--ew-accent-hover);
    }

    /* Segmented control */
    .segmented-control-apple .segment.active {
        background-color: var(--ew-accent-active) !important;
        color: #ffffff !important;
    }

    .segmented-control-apple .segment:hover {
        background-color: var(--ew-accent-hover) !important;
    }

    /* Tabs (your new Apple‑style tabs) */
    .ew-author-tabs.nav-tabs .nav-item .nav-link.active {
        background-color: var(--ew-accent-active) !important;
        color: #ffffff !important;
    }

    .ew-author-tabs.nav-tabs .nav-item .nav-link:not(.active) {
        color: var(--ew-accent) !important;
        box-shadow: inset 0 0 0 1px var(--ew-accent);
    }

    /* Buttons */
    .btn-primary {
        background-color: var(--ew-accent) !important;
        border-color: var(--ew-accent) !important;
    }

    .btn-primary:hover {
        background-color: var(--ew-accent-hover) !important;
        border-color: var(--ew-accent-hover) !important;
    }

    /* Subtle borders */
    .card,
    .list-group-item,
    .dropdown-menu {
        border-color: var(--ew-border-subtle) !important;
    }
}

/* ------------------------------------------------
⭐ Step 1 — Confirm dark mode is being detected
------------------------------------------------ */
/* Add this temporary test at the bottom of your CSS: */
@media (prefers-color-scheme: dark) {
    body {
        outline: 5px solid lime !important;
    }
}


/* -------------------------------------------------------------
⭐ Step 2 — Add these styles to easywebsight.css (or app.css)
------------------------------------------------------------- */
/* Put this near the bottom of your main CSS file: */
/* ============================================================
   EDITORS' PICKS HEADER FRAME
   ============================================================ */

.ep-header-frame {
    background-color: var(--bs-primary);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: white;
}

.ep-title {
    margin-top: 0;
    padding-top: 0;
    font-size: 1.9rem;
}

.ep-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.05rem;
}

/* ============================================================
   🔧 DARK MODE FIX FOR BOOKS BLUE FRAME
   ============================================================ */
/* Ensures the .ew-books-header-frame changes to a darker blue
   when data-bs-theme="dark" is active on the <html> element. */
html[data-bs-theme="dark"] .ew-books-header-frame {
    background-color: #1e3a5f !important;  /* deep blue for dark mode */
}



/* ------------------------------------------------------------------
⭐ Move all dark‑mode header‑frame overrides into your global CSS
------------------------------------------------------------------ */
/* Specifically the last CSS file in your cascade:
At the very bottom, add this unified system: */
/* ============================================================
   DARK MODE — HEADER FRAMES (GLOBAL FIX)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    .ew-author-header-frame,
    .ew-books-header-frame,
    .ew-articles-header-frame,
    .ew-editorials-header-frame,
    .ew-header-frame {
        background-color: var(--bs-primary) !important;
    }
}

/* ------------------------------------------------
🎨 Correct CSS (Drop‑in Ready) for the + button
------------------------------ ----------------- */
/* ✅ Where YOU should place the CSS (based on your project structure)
You have a consistent pattern:

Global overrides → easywebsight.css

Component‑scoped styles → components/*.css

Special modes → lightmode-apple-news.css, dashboard_glass.css, etc.

Because the button color must change based on theme, it belongs in the global override layer, not a component file.

✔ Place it at the bottom of:
catalog/static/catalog/css/easywebsight.css */
/* LIGHT MODE ---------------------------------------------------- */
html[data-bs-theme="light"] .btn-accent {
    background-color: #0a84ff;      /* Light-mode blue */
    color: white;
}

html[data-bs-theme="light"] .btn-accent:hover {
    background-color: #0b5ed7;
    color: white;
}

/* DARK MODE ----------------------------------------------------- */
html[data-bs-theme="dark"] .btn-accent {
    background-color: #4a69bd;      /* Your dark-mode blue */
    color: white;
}

html[data-bs-theme="dark"] .btn-accent:hover {
    background-color: #082f4c;
    color: white;
}

/* Ensure the icon inherits the color */
.btn-accent i {
    color: inherit;
}

/* ---------------------------------------------------------------------
DeepSeek - Step 3: Also add to your easywebsight.css file (as backup)
--------------------------------------------------------------------- */
/* Light mode blue frame for book header card */
.book-header-card {
    background: #0d6efd !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.book-header-card h1,
.book-header-card p,
.book-header-card a {
    color: white !important;
}



/* --------------------------------------------------------------
🎯 Concise Fix for book detail dark mode blue frame - Copilot
-------------------------------------------------------------- */
/* Add this to your dark‑mode stylesheet (or inside your global dark‑mode override block): */
/* ✅ Put it inside your dark‑mode override section in easywebsight.css */
/* Dark mode override for the book header frame */
[data-bs-theme="dark"] .book-header-card .card-body {
    background-color: #0a3d62 !important;   /* dark‑mode blue */
    border-color: #0a3d62 !important;
}


/* -----------------------------------------------------------------------------
✅ Fix: Allow the author card to expand and wrap text properly in editorials
----------------------------------------------------------------------------- */
/* You should place the CSS in the same file where you keep all 
your global UI overrides, which for your EasyWebSight project 
is almost certainly: */
/* static\catalog\css\easywebsight.css */
.author-card {
    align-items: flex-start !important;   /* prevents vertical squashing */
    height: auto !important;              /* removes any fixed height */
}

.author-meta {
    flex: 1 1 auto !important;            /* allows text to take full width */
    min-width: 0 !important;              /* prevents overflow clipping */
    white-space: normal !important;       /* ensures wrapping */
}


/* ------------------------------------------------------------------
2. Make the card layout clean and ensure the name is fully visible
------------------------------------------------------------------ */
/* Add this to your main CSS (near the bottom): */
/* Editorial header card — clean layout, full name visible */
.editorial-header-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Title + user line should wrap, not clip */
.editorial-header-card h1,
.editorial-header-card .author-line {
    white-space: normal;
    overflow: visible;
}



/* ----------------------------------------------------------------------------------------
⭐ The CSS you need to center‑justify the entire author‑meta block inside its container
---------------------------------------------------------------------------------------- */
/* Add this to your stylesheet (preferably easywebsight.css 
or wherever you keep your editorial/article styles): */
/* static\catalog\css\easywebsight.css */
/* Center the author-meta block inside the author card */

/* 
.article-author .author-card {
    justify-content: center;
    text-align: center;
} */

/* Ensure the text inside author-meta is centered */
/* 
.article-author .author-meta {
    text-align: center;
    flex: 1 1 auto;
} */

/* Center the entire author-meta block when avatar is removed */
.article-author .author-card {
    display: flex;
    justify-content: center;   /* centers the only child */
    text-align: center;        /* centers text inside the child */
}

.article-author .author-meta {
    text-align: center;
}