/* 1. LOGO & HEADER SETUP */
.Header__logo, .Header__logo a, .Header__logo img {
    width: 250px !important;
    display: block !important;
    height: auto !important;
}

/* Standard Flex Header */
.Header__navbarInner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* 2. BUTTON STYLES (Lore Theme) */
.Header__menuList a, 
.Header__topSection .signin, 
#asap-signin-link {
    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    margin: 0 5px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: 0.3s !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
    display: inline-block !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* 3. HOVER STYLES */
.Header__menuList a:hover, 
.Header__topSection .signin:hover {
    background-color: #06602D !important;
    border: 1px solid #75BFEC !important;
}

/* 4. FOREST BACKGROUND */
.Header__searchSection {
    background: url('https://cdn.dencrofty.com/lore/assets/dencroftyforestbg.jpg') center/cover no-repeat !important;
    padding: 100px 0 !important;
}

/* Hide default Zoho Chat widget */
#zohohc-asap-web-launcher, 
.zohodesk-asap-launcher,
#zsiq_float, 
.zsiq_floatmain {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Direct target for the Den Crofty search button */
span[data-id="searchButton"].SearchContainer__searchIcon {
  background-color: #06602D !important;
  border-color: #06602D !important;
  background: #06602D !important;
}

/* Ensures the hover effect doesn't revert to orange */
span[data-id="searchButton"].SearchContainer__searchIcon:hover {
  background-color: #044520 !important; /* A slightly darker green for hover */
  border-color: #044520 !important;
}

div.ContentBox__alignCenter {
  background-color: #f8f9fa !important; 
  border: 1px solid #000000 !important; 
  box-shadow: 0px 4px 8px rgba(128, 128, 128, 0.4) !important; 
  border-radius: 8px !important; 
  padding: 30px 20px !important; /* Added padding so the text doesn't touch the black border */
  margin-bottom: 20px !important; 
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover effect to lift the cards */
div.ContentBox__alignCenter:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0px 8px 16px rgba(128, 128, 128, 0.6) !important; 
}

/* Card styling for the Popular Lore section */
.PopularArticles,
.home-popular-articles,
.kb-popular-articles,
.popular-articles-container,
.popular-articles {
  background-color: #f8f9fa !important; 
  border: 1px solid #000000 !important; 
  box-shadow: 0px 4px 8px rgba(128, 128, 128, 0.4) !important; 
  border-radius: 8px !important; 
  padding: 30px 20px !important; 
  margin-bottom: 20px !important; 
}

/* Targets the invisible container holding the Popular Lore section */
div:has(> div.ListHeader__listHeader2 h5[data-id="popularAricles"]) {
  background-color: #f8f9fa !important; 
  border: 1px solid #000000 !important; 
  box-shadow: 0px 4px 8px rgba(128, 128, 128, 0.4) !important; 
  border-radius: 8px !important; 
  padding: 30px 20px !important; 
  margin-bottom: 20px !important; 
}

/* 1. Shrink the original Zoho text to 0px so it vanishes */
h3:has(a[data-id="tickets_module"]) + p,
h3:has(a[data-id="mytickets_module"]) + p,
h3:has(a[data-id="ticket_module"]) + p,
h3:has(a[data-id="kb_module"]) + p {
  font-size: 0px !important;
  color: transparent !important;
}

/* 2. Project the new text for Traces */
h3:has(a[data-id="tickets_module"]) + p::after,
h3:has(a[data-id="mytickets_module"]) + p::after,
h3:has(a[data-id="ticket_module"]) + p::after {
  content: "Track your past hunts and see the solutions provided by our Elders.";
  font-size: 15px !important; 
  color: #444444 !important; 
  line-height: 1.5 !important;
  display: block !important;
}

/* 3. Project the new text for Lore (Already working!) */
h3:has(a[data-id="kb_module"]) + p::after {
  content: "Search the archives for Pack guides, history, and FAQs.";
  font-size: 15px !important; 
  color: #444444 !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* 1. Hide the "Are you an Agent?" text STRICTLY in the Agent block */
span.Signin__userHeader:has(a[data-id="agent_signin"]) > span {
  font-size: 0px !important;
  color: transparent !important;
}

/* 2. Project the new text STRICTLY in the Agent block */
span.Signin__userHeader:has(a[data-id="agent_signin"]) > span::after {
  content: "Leader? " !important;
  font-size: 14px !important; 
  color: #444444 !important; 
}

/* 3. Hide the original "Login here" link text */
a[data-id="agent_signin"] {
  font-size: 0px !important;
  color: transparent !important;
}

/* 4. Project the new link text */
a[data-id="agent_signin"]::after {
  content: "Enter the Den" !important;
  font-size: 14px !important; 
  color: #06602D !important; 
  font-weight: bold !important;
}

/* 5. Hide the original "You will be taken..." subtext */
#agentLoginDesc {
  font-size: 0px !important;
  color: transparent !important;
}

/* 6. Project the new subtext */
#agentLoginDesc::after {
  content: "Access the backend tools to guide the pack." !important;
  font-size: 13px !important;
  color: #777777 !important;
  display: block !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

/* Style all links in the right-hand Sign In sidebar */
.Signin__userHeader a {
  color: #06602D !important;
  font-weight: bold !important;
  display: block !important; /* This is the magic line that forces it downward! */
  margin-top: 2px !important; /* Adds a tiny bit of breathing room */
  transition: color 0.2s ease !important;
}

/* Add a slightly darker green hover effect so they feel interactive */
.Signin__userHeader a:hover {
  color: #044520 !important;
}

/* Add a slightly darker green hover effect so they feel interactive */
.Signin__userHeader a:hover {
  color: #044520 !important;
}

/* 1. Hide the original "Already a member?" title */
span.Signin__loginTitle {
  font-size: 0px !important;
  color: transparent !important;
}

/* 2. Project the new "Already a Packmate?" title */
span.Signin__loginTitle::after {
  content: "Already a Packmate?" !important;
  font-size: 26px !important; /* Keeps it nice and large like a header */
  color: #333333 !important; /* Dark grey/black to match standard headings */
  display: block !important;
  font-weight: 600 !important; /* Gives it that bold title look */
  margin-bottom: 8px !important; /* Gives it a little breathing room above the Sign In text */
}

/* 1. Hide the original typo-ridden description */
#newUserDesc {
  font-size: 0px !important;
  color: transparent !important;
}

/* 2. Project the corrected description */
#newUserDesc::after {
  content: "Create an account to submit traces, read lore, and engage in our Territory." !important;
  font-size: 13px !important;
  color: #777777 !important;
  display: block !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

/* 1. Turn the right-side elements into dark grey cards */
.Signin__loginHalf {
  background-color: #333333 !important; /* Dark grey background */
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Turn the standard headers white */
.Signin__userHeader {
  color: #ffffff !important;
}

/* 3. Turn the "Are you a Leader?" Hologram header white */
span.Signin__userHeader:has(a[data-id="agent_signin"]) > span::after {
  color: #ffffff !important; 
}

/* 4. Lighten the generic description text for contrast */
.Signin__userDesc {
  color: #dddddd !important; 
}

/* 5. Lighten the Hologram descriptions */
#newUserDesc::after,
#agentLoginDesc::after {
  color: #dddddd !important;
}

/* 6. Brighten the links so they are readable on dark grey */
.Signin__userHeader a {
  color: #66bb6a !important; /* A brighter, vibrant Den Crofty green */
}
.Signin__userHeader a:hover {
  color: #81c784 !important; 
}

/* 7. Brighten the "Enter the Den" Hologram link */
a[data-id="agent_signin"]::after {
  color: #66bb6a !important;
}

/* 8. Force the SVG icons to be white instead of black */
.Signin__loginUserIcon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 1. Hide the original "New User?" text STRICTLY in the Sign Up block */
span.Signin__userHeader:has(a[data-id="portal_signup"]) > span {
  font-size: 0px !important;
  color: transparent !important;
}

/* 2. Project the new "New Packmate?" text */
span.Signin__userHeader:has(a[data-id="portal_signup"]) > span::after {
  content: "New Packmate? " !important;
  font-size: 14px !important; 
  color: #ffffff !important; /* White to match your sleek new dark mode! */
}