:root {
  --dark-bg: #2a2a2a;
  --dark-text: #f5f1ed;
  --dark-accent: #fae6ca;
  --light-bg: #ffffff;
  --light-text: #000000;
}

/* ======================================
   DARK MODE - BODY & GLOBAL
   ====================================== */

body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  --nv-light-bg: #444 !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode a,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th,
body.dark-mode label,
body.dark-mode div,
body.dark-mode strong,
body.dark-mode em {
  color: var(--dark-text);
  border-color: #444;
}

body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg p,
body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg span,
body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg div,
body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg h2,
body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg strong,
body.dark-mode #amvvmfucbnnzeehcrdzkdgouvmnnbtedqzt_fqnpymirsvnyktyrlnurdwwajjykdvyutgdg a {
  color: #333333 !important;
  border-color: transparent !important;
}

/* Reset background for comment elements — overridden at bottom of file */
body.dark-mode .nv-comments-list .nv-comment-article,
body.dark-mode .nv-comments-list .nv-comment-avatar,
body.dark-mode .nv-comments-list .comment-content,
body.dark-mode .nv-comments-list .nv-comment-header,
body.dark-mode .nv-comments-list .nv-comment-content {
    background-color: #3d3d3d;
}

body.dark-mode .nv-comments-list .children .nv-comment-article,
body.dark-mode .nv-comments-list .children .nv-comment-avatar,
body.dark-mode .nv-comments-list .children .comment-content,
body.dark-mode .nv-comments-list .children .nv-comment-header,
body.dark-mode .nv-comments-list .children .nv-comment-content {
    background-color: #464646;
}

body.dark-mode a {
  color: #f5f1ed;
}

body.dark-mode .fa.fa-circle-chevron-down {
  color: #f5f1ed !important;
}


/* ======================================
   RECIPE FAVORITE REMOVE BUTTON - DARK MODE
   ====================================== */

/* Base button styles (light mode) */
.recipe-favorite-remove {
    background: #dc3545 !important;
    color: white !important;
    border: 1px solid #dc3545 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.recipe-favorite-remove:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

/* Dark mode styles */
body.dark-mode .recipe-favorite-remove {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #ffffff !important;
}

body.dark-mode .recipe-favorite-remove:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Focus state for accessibility */
body.dark-mode .recipe-favorite-remove:focus {
    outline: 2px solid #fae6ca !important;
    outline-offset: 2px !important;
}

/* Active state when clicked */
body.dark-mode .recipe-favorite-remove:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(231, 76, 60, 0.4) !important;
}

/* Disabled state */
body.dark-mode .recipe-favorite-remove:disabled {
    background: #7f8c8d !important;
    border-color: #7f8c8d !important;
    color: #bdc3c7 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ======================================
   DARK MODE - FORM ELEMENTS
   ====================================== */

body.dark-mode button,
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"] {
  background-color: var(--dark-accent);
  color: var(--dark-text);
  transition: all 0.2s ease;
}

body.dark-mode button:hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="submit"]:hover {
  background-color: #f5dbb9;
  opacity: 0.9;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1f1f1f;
  color: var(--dark-text);
  border: 1px solid #444;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background-color: #2a2a2a;
  border-color: var(--dark-accent);
  outline: none;
}

/* ======================================
   DARK MODE - CONTENT AREAS
   ====================================== */

body.dark-mode .widget,
body.dark-mode .entry-content,
body.dark-mode article:not(.nv-comment-article) {
  background-color: #2a2a2a;
  color: var(--dark-text);
}

body.dark-mode .article-content-col {
  background-color: #333 !important;
  color: var(--dark-text);
}

body.dark-mode .article-content-col * {
  background-color: transparent !important;
}

body.dark-mode .article-content-col h2,
body.dark-mode .article-content-col h3 {
  color: #f5f1ed;
}

body.dark-mode h3 {
  margin-top: 30px;
}

/* ======================================
   DARK MODE - LINKS & NAVIGATION
   ====================================== */

body.dark-mode .entry-title a {
  color: var(--dark-accent) !important;
}

body.dark-mode .nav-ul li a {
  color: var(--dark-accent) !important;
}

body.dark-mode .entry-title a:hover {
  opacity: 0.8;
}

body.dark-mode .nav-ul li a:hover {
  color: #f5dbb9 !important;
}


/* ======================================
   CATEGORY HEADER
   ====================================== */

/* Category Intro Content Styles */
.category-intro-content {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #ac1219;
    border-radius: 4px;
}

.category-intro-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Dark Mode Support */
body.dark-mode .category-intro-content {
    background: #2a2a2a;
    border-left-color: #fae6ca;
}

body.dark-mode .category-intro-content p {
    color: #f5f1ed;
}


/* ======================================
   DARK MODE TOGGLE BUTTON
   ====================================== */

.dark-mode-toggle {
    display: inline-block;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    margin: 0;
    border: 3px solid #fae6ca !important;   /* visible border = circle */
    border-radius: 50%;
    background: transparent !important;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.25); /* gentle halo */
    line-height: 0;                 /* remove stray gaps */
}

.dark-mode-toggle img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* fill the whole circle */
    filter: none !important;
    opacity: 1 !important;
}

/* kill theme hover colours */
.dark-mode-toggle:hover,
.dark-mode-toggle:focus {
    background: transparent !important;
    border-color: #fae6ca !important;
    box-shadow: none !important;
    filter: none !important;
}

.dark-mode-toggle:active {
  transform: scale(0.85);
}

body.dark-mode .dark-mode-toggle {
  background-color: #555;
}

body.dark-mode .dark-mode-toggle:hover {
  /*background-color: #666;*/
}

/* ======================================
   DARK MODE - ADDITIONAL ELEMENTS
   ====================================== */

body.dark-mode code,
body.dark-mode pre {
  background-color: #1f1f1f;
  color: #86b1fc;
  border-color: #444;
}

body.dark-mode blockquote {
  border-left-color: var(--dark-accent);
  color: #d4cec6;
}

body.dark-mode table {
  border-color: #444;
}

body.dark-mode table th {
  background-color: #333;
  color: var(--dark-text);
}

body.dark-mode table td {
  border-color: #444;
}

body.dark-mode hr {
  border-color: #444;
}

body.dark-mode .sidebar {
  background-color: #2a2a2a;
}

@media (max-width: 768px) {          /* phones + small tablets */
    body.dark-mode .count-badge {
        background-color: #f5f1ed !important;
        color: #000 !important;
        border-radius: 7px;           /* typo fixed */
        position: relative;
        z-index: 2;
    }
}

body.dark-mode #ez-toc-container {
    background: #2a2a2a;
}

body.dark-mode #ez-toc-container a {
    color: var(--dark-text);
}

body.dark-mode form input:read-write, form select, form select option, form textarea, form.wp-block-search input.wp-block-search__input {
    background-color: #ffffff !important;
}

body.dark-mode footer .wp-block-search__button,
body.dark-mode .site-footer .wp-block-search__button {
    color: #fff !important;
    background: #ac1219 !important;
    border: none !important;
}

body.dark-mode footer .wp-block-search__button svg,
body.dark-mode .site-footer .wp-block-search__button svg {
    fill: #fff !important;
}

/* ======================================
   DARK MODE - FOOTER
   ====================================== */

body.dark-mode .footer--row.footer-main {
  background-color: #ac1219 !important;
}

body.dark-mode .footer--row-inner,
body.dark-mode .footer--row-inner * {
  background-color: transparent !important;
}

/* ======================================
   DARK MODE - LANGUAGE SWITCHER
   ====================================== */

body.dark-mode .gt_float_switcher .gt-selected .gt-current-lang {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.dark-mode .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code,
body.dark-mode .gt_float_switcher span.gt-lang-code {
  color: #000000 !important;
}

body.dark-mode .gt_float_switcher .gt_options a {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.dark-mode .today-delight-title {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Protect Smart Slider from any dark mode interference */
body.dark-mode .n2-ss-slider,
body.dark-mode .n2-ss-slider * {
  background-color: transparent !important;
  color: inherit !important;
}

body.dark-mode .n2-ss-slide {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ======================================
   DARK MODE - ACCESSIBILITY
   ====================================== */

/* FIX: Exclude Smart Slider images from dark mode opacity */
body.dark-mode .n2-ss-slider img,
body.dark-mode [data-smartslider] img {
  opacity: 1 !important;
}

body.dark-mode img {
  opacity: 0.85;
}

body.dark-mode img:hover {
  opacity: 1;
}

/* ======================================
   SEARCH FORM
   ====================================== */

.search-form .search-submit {
  color: #ac1219 !important;
}

body.dark-mode .search-form .search-submit {
  color: white !important;
  background-color: #ac1219 !important;
}

body.dark-mode .search-form .search-submit::before,
body.dark-mode .search-form .search-submit svg,
body.dark-mode .search-form .search-submit i {
  background-color: transparent !important;
  color: white !important;
}

body.dark-mode .search-form .search-submit * {
  background-color: transparent !important;
}

/* ======================================
   POST EXCERPTS
   ====================================== */

.post-excerpt {
  font-family: Lato, sans-serif;
  margin: 0 0 20px 0;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: #333 !important;
  font-weight: 200;
}

body.dark-mode .post-excerpt {
  color: #dedede !important;
}

/* Recipe-specific excerpt style */
.type-recipe .post-excerpt {
  font-style: italic;
  color: #000;
  font-weight: 500;
}

body.dark-mode .type-recipe .post-excerpt {
  color: #dedede !important;
}

/* Read more link */
.read-more {
  color: #3083bf;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  margin-left: 4px;
}

.read-more:hover {
  text-decoration: underline;
}

body.dark-mode .read-more {
  color: #86b1fc;
}

body.dark-mode .read-more:hover {
  color: #a8c5ff;
}

/* ======================================
   BLOG ENTRY TITLES
   ====================================== */

.layout-grid .content > .blog-entry-title {
  font-weight: 500 !important;
}

/* ======================================
   RESPONSIVE - MOBILE
   ====================================== */

@media (max-width: 960px) {
  body.dark-mode .icon-bar {
    background-color: #ffffff !important;
  }
  
  body.dark-mode .navbar-toggle {
    background-color: #ac1219 !important;
  }
  
  body.dark-mode .navbar-toggle .icon-bar {
    background-color: #ac1219 !important;
  }

  /* Neve hamburger SVG bars — white in dark mode */
  body.dark-mode .neve-menu-icon,
  body.dark-mode .menu-mobile-icon,
  body.dark-mode button.navbar-toggle svg,
  body.dark-mode .nv-navbar-toggle svg,
  body.dark-mode [class*="menu-icon"] svg rect,
  body.dark-mode [class*="menu-icon"] svg line,
  body.dark-mode [class*="hamburger"] svg rect,
  body.dark-mode [class*="hamburger"] svg line {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Neve mobile toggle button background */
  body.dark-mode button.navbar-toggle,
  body.dark-mode .nv-navbar-toggle {
    background-color: transparent !important;
  }
  
  body.dark-mode .close-sidebar-panel {
    color: #ac1219 !important;
  }
  
  body.dark-mode [id*="header-menu-sidebar"],
  body.dark-mode .close-sidebar-panel,
  body.dark-mode .slide_left,
  body.dark-mode #nv-primary-navigation-sidebar {
    background: white !important;
  }
  
/* -------------------------------------------------
   MOBILE MENU – white panel, but keep icon visible
   ------------------------------------------------- */
@media (max-width: 960px) {
  /* 1. white background for the panel + direct text */
  body.dark-mode .header-menu-sidebar,
  body.dark-mode #nv-primary-navigation-sidebar,
  body.dark-mode .header-menu-sidebar .nav-ul,
  body.dark-mode .header-menu-sidebar li,
  body.dark-mode .header-menu-sidebar .wrap,
  body.dark-mode .close-sidebar-panel {
      background: #fff !important;
      color: #000 !important;
  }

  /* 2. leave the <img> alone so the icon stays coloured */
  body.dark-mode .dark-mode-toggle img {
      background: transparent !important;
  }
}
  
  body.dark-mode .mobile-menu-search-container {
    background-color: #ffffff !important;
  }
}

.dark-mode-toggle-item .wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

body.dark-mode .dark-mode-toggle-item .wrap {
  background-color: #ffffff !important;
}

/* Hide toggle in mobile menu on desktop */
@media (min-width: 961px) {
  li.menu-item.dark-mode-toggle-item {
    display: none !important;
  }
}

.dark-mode-toggle-item {
  order: 999 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 20px !important;
  border-top: 1px solid #444 !important;
}

@media (max-width: 768px) {
  div[style*="font-size:14px"] {
    font-size: 11px !important;
  }
}

/* ======================================
   DARK MODE - COMMENTS (last, wins over body.dark-mode *)
   ====================================== */
body.dark-mode .nv-comments-list .nv-comment-article,
body.dark-mode .nv-comments-list .nv-comment-avatar,
body.dark-mode .nv-comments-list .comment-content,
body.dark-mode .nv-comments-list .nv-comment-header,
body.dark-mode .nv-comments-list .nv-comment-content {
    background-color: #3d3d3d !important;
    border-radius: 25px !important;
}

body.dark-mode .nv-comments-list .children .nv-comment-article,
body.dark-mode .nv-comments-list .children .nv-comment-avatar,
body.dark-mode .nv-comments-list .children .comment-content,
body.dark-mode .nv-comments-list .children .nv-comment-header,
body.dark-mode .nv-comments-list .children .nv-comment-content {
    background-color: #464646 !important;
}

body.dark-mode #respond {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode #respond label,
body.dark-mode #respond p,
body.dark-mode #respond h3,
body.dark-mode #respond .comment-notes,
body.dark-mode #respond .logged-in-as {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode #respond textarea,
body.dark-mode #respond input[type="text"],
body.dark-mode #respond input[type="email"],
body.dark-mode #respond input[type="url"] {
    background-color: #1f1f1f !important;
    color: var(--dark-text) !important;
    border: 1px solid #444 !important;
}
/* ======================================
   DARK MODE - NAV DROPDOWN SUBMENUS
   ====================================== */

body.dark-mode .nav-ul .sub-menu,
body.dark-mode .nav-ul li.menu-item-has-children > .sub-menu,
body.dark-mode li.menu-item.category-item.menu-item-has-children > .sub-menu {
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
}

body.dark-mode .nav-ul .sub-menu li,
body.dark-mode .nav-ul .sub-menu li a {
  background-color: #2a2a2a !important;
  color: var(--dark-text) !important;
}

body.dark-mode .nav-ul .sub-menu li a:hover {
  background-color: #3a3a3a !important;
  color: var(--dark-accent) !important;
}

/* ======================================
   DARK MODE - RECIPE MODALS
   (conversion table + shopping list)
   ====================================== */

body.dark-mode .conversion-table-content,
body.dark-mode .shopping-list-content {
    background-color: #1a1a1a !important;
    color: var(--dark-text) !important;
}

body.dark-mode .conversion-table-content *,
body.dark-mode .shopping-list-content * {
    color: var(--dark-text) !important;
    background-color: transparent !important;
    border-color: #444 !important;
}

body.dark-mode .conversion-table-header,
body.dark-mode .shopping-list-header {
    border-bottom-color: #444 !important;
}

body.dark-mode .conversion-table-close,
body.dark-mode .shopping-list-close {
    color: var(--dark-text) !important;
    background: transparent !important;
}

body.dark-mode .conversion-tab {
    color: var(--dark-text) !important;
    background: transparent !important;
}

body.dark-mode .conversion-tab.active {
    color: var(--dark-accent) !important;
    border-bottom-color: var(--dark-accent) !important;
    background: transparent !important;
}

body.dark-mode .conversion-table th {
    background-color: #333 !important;
    color: var(--dark-text) !important;
}

body.dark-mode .conversion-table th,
body.dark-mode .conversion-table td {
    border-color: #444 !important;
}

body.dark-mode .site-logo-container {
    border-bottom-color: #444 !important;
    background-color: transparent !important;
}

body.dark-mode .conversion-note {
    color: #aaa !important;
}

body.dark-mode .btn-close-conversion,
body.dark-mode .btn-print-shopping-list {
    background-color: #2196F3 !important;
    color: #ffffff !important;
}