/* Update the global theme variables to match your forest green */
:root {
    --cassiopeia-color-primary: #41663c !important;
    --cassiopeia-color-link: #41663c !important;
    --cassiopeia-color-hover: #324e2e !important;
}

/* Force the tab-specific variables used by Bootstrap 5 */
.nav-tabs {
    --bs-nav-tabs-link-active-color: #41663c !important;
    --bs-nav-tabs-link-active-bg: #ffffff !important;
    --bs-nav-tabs-link-active-border-color: #41663c #41663c #ffffff !important;
    --bs-nav-link-color: #ffffff !important;
    --bs-nav-link-hover-color: #ffffff !important;
}

/* make the entire site's color scheme consistent - forest hreen #41663c */
/* from Gemini */

:root {
    --cassiopeia-color-primary: #41663c;
    --cassiopeia-color-hover: #324e2e;
}

/* Style the footer */
/* 1. Golden Glow for Social Icons */
.footer-social-icons a i {
    transition: all 0.3s ease-in-out;
}

.footer-social-icons a:hover i {
    color: #ffcc33 !important; /* Changes icon to gold */
    text-shadow: 0 0 12px rgba(255, 204, 51, 0.7); /* Golden "aura" */
    transform: scale(1.15);
}

/* 2. Golden Glow for Logos */
.footer img {
    transition: filter 0.3s ease;
}

.footer a:hover img {
    /* This creates a golden shadow around the transparent logo edges */
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
}
.footer {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}




/* =========================================================
   user.css — Clean baseline
   Working features:
   - Pill buttons
   - Hero module (image + overlay text)
   - Green menu bar
   - Menu separators (|)
   - Active menu item as white pill
   - Stable mobile hamburger (no jumping; menu collapses/expands)
   ========================================================= */


/* =========================
   PILL BUTTONS
   ========================= */

.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
  margin: 2rem 0;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #476643;
  color: #ffffff;
  text-decoration: none;

  min-height: 86px;
  padding: 0 3.25rem;
  border-radius: 9999px;

  font-weight: 800;
  font-size: clamp(1.25rem, 1.2rem + 0.6vw, 2rem);
  line-height: 1.1;
  text-align: center;

  transition: background-color .15s ease, transform .15s ease;
}

.pill-link:hover,
.pill-link:focus-visible {
  background: #3c5739;
  color: #ffffff;
  transform: translateY(-1px);
}

.pill-link:focus-visible {
  outline: 3px solid rgba(71,102,67,.35);
  outline-offset: 4px;
}

@media (min-width: 992px) {
  .pill-link { min-width: 320px; }
}


/* =========================
   HERO MODULE
   ========================= */

.hero {
  position: relative;
  width: 100%;
}

.hero img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.hero-text h1 {
  margin: 0;
  padding-left: 7%;
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(2.4rem, 2.4vw + 1.6rem, 4.4rem);
  text-shadow: 0 4px 14px rgba(0,0,0,.4);
}


/* =========================
   MENU BAR (your markup: MetisMenu inside .grid-child.container-nav)
   - green background
   - white bold links
   - | separators
   - active/current item as white pill
   - stable mobile collapse behavior
   ========================= */

/* Make header containers full width so the green bar spans across */
header.header .container,
header.header .container-fluid,
header.header .grid-child {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Green bar */
.grid-child.container-nav,
.grid-child.container-nav .navbar {
  background: #476643 !important;
}

/* Links */
.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item > a {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  padding: 0.55rem 1rem !important;
  font-size: 1.05rem !important;

  display: inline-block !important;
}

/* Separators between items */
.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item {
  position: relative;
}

.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item + li.metismenu-item::before {
  content: "|";
  color: rgba(255,255,255,.9);
  position: absolute;
  left: -0.1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Active/current pill */
.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item.active > a,
.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item.current > a {
  background: #ffffff !important;
  color: #476643 !important;
  border-radius: 9999px !important;
}

/* Hover */
.grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item > a:hover {
  opacity: 0.95;
}

/* MOBILE: collapse works cleanly; hamburger stays left; menu opens below */
@media (max-width: 991.98px) {

  .grid-child.container-nav nav.navbar {
    justify-content: flex-start !important;
  }

  /* Hide menu when collapsed */
  .grid-child.container-nav #navbar1.collapse {
    display: none !important;
    width: 100% !important;
  }

  /* Show menu when open */
  .grid-child.container-nav #navbar1.collapse.show {
    display: block !important;
    width: 100% !important;
  }

  /* Mobile menu vertical */
  .grid-child.container-nav #navbar1 > ul.mod-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
  }

  .grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item > a {
    display: block !important;
    padding: 0.8rem 1rem !important;
  }

  /* Remove separators on mobile */
  .grid-child.container-nav #navbar1 > ul.mod-menu > li.metismenu-item + li.metismenu-item::before {
    content: "" !important;
  }
}

/* =========================
   TOP BANNER (Font Awesome)
   ========================= */

.top-banner {
  background: var(--cassiopeia-color-primary);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

.top-banner a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.top-banner a:hover {
  color: #fff;
  text-decoration: underline;
}

.top-banner__left,
.top-banner__right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.top-banner__sep {
  opacity: 0.7;
}

/* Social icons */
.top-banner__right a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-banner__right a:hover {
  background: rgba(255,255,255,0.25);
}

/* Mobile layout */
@media (max-width: 767.98px) {
  .top-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =========================================================
   BREAD KITCHEN - TAB & NAV UNDERLINE STYLING
   ========================================================= */

/* =========================================================
   FIX FOR CATEGORY BLOG TABS - BREAD KITCHEN
   ========================================================= */

/* =========================================================
   BREAD KITCHEN - TOTAL TAB OVERRIDE
   ========================================================= */

/* 1. Target EVERYTHING that looks like a tab link */
html body .nav-tabs .nav-link,
html body .nav-tabs .nav-item .nav-link,
html body .com-content-category-blog__items .nav-link {
    background-color: #41663c !important; /* Forest Green */
    color: #ffffff !important;            /* White Text */
    border: 1px solid #41663c !important;
    border-bottom: 2px solid #41663c !important; /* Remove Teal Underline */
    margin-right: 4px !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: none !important;          /* Kill any teal shadows */
}

/* 2. Hover state */
html body .nav-tabs .nav-link:hover {
    background-color: #324e2e !important;
    border-bottom-color: #324e2e !important;
    color: #ffffff !important;
}

/* 3. The ACTIVE tab - White background with Green Underline */
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item .nav-link.active {
    background-color: #ffffff !important;
    color: #41663c !important;            /* Green text */
    border: 1px solid #41663c !important;
    border-bottom: 3px solid #41663c !important; /* Force the Underline to be Green */
    font-weight: bold !important;
}

/* 4. Kill the default Bootstrap border-bottom line that causes teal/grey issues */
html body .nav-tabs {
    border-bottom: 1px solid #41663c !important;
}

/* Target the main site container used by Cassiopeia */
/* Start replacement at Line 247 */
body.site, 
.site-grid {
    background-image: url('/images/Background/leaves-6629581_1280.png') !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-size: 500px !important;
    
    /* Blends image with your template color */
    background-blend-mode: overlay !important;
}

/* Clear white area for readability */
.site-wrapper, 
main#content {
    background-color: rgba(255, 255, 255, 0.85) !important;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}
@media (max-width: 991.98px) {
    body.site, .site-grid {
        background-attachment: scroll !important;
    }
}
/* Make all paragraph and general text darker/bolder */
body.site p, 
body.site li, 
body.site td {
    color: #222222 !important; /* A very dark grey, almost black */
    font-weight: 500 !important; /* Slightly thicker than normal */
}

/* Make headers extra crisp */
h1, h2, h3, h4 {
    color: #1a2e18 !important; /* A very dark forest green */
    font-weight: 800 !important;
}