/* Custom overrides loaded after the template CSS. */
.font-bold { font-weight: 700; }
.menu-offset {
    padding-left: 5rem; /* Creates spacing between logo and menu without shrinking nav width */
}

/* Utility: red text for liked state (matches Tailwind's .text-red-600) */
.text-red-600 { color: #dc2626 !important; }

/* Icon outline/border effect using text-shadow (works across browsers)
   Apply this to icon fonts (e.g., .pe-7f-like) to add a subtle border without changing the glyph. */
.icon-heart-border {
    /* Transparent fill, border-only icon */
    -webkit-text-fill-color: transparent; /* Hide glyph fill in Chrome/Edge/Safari */
    -webkit-text-stroke: 1px currentColor; /* Outline in current text color */
    /* Fallback outline using text-shadow for browsers without text-stroke */
    text-shadow:
            1px 0 0 currentColor,
            -1px 0 0 currentColor,
            0 1px 0 currentColor,
            0 -1px 0 currentColor,
            1px 1px 0 currentColor,
            1px -1px 0 currentColor,
            -1px 1px 0 currentColor,
            -1px -1px 0 currentColor;
}

@supports (-webkit-text-stroke: 1px currentColor) {
    .icon-heart-border {
        text-shadow: none;
    }
}

/* Active state styles for header navigation (desktop and mobile) */
.header-nav .active-link,
.header-nav .has-active,
.mobile-nav .active-link,
.mobile-nav .has-active {
    color: #212121 !important;
}

/* Highlight selected item inside dropdown */
.dropdown-menu li.is-active,
.dropdown-menu li.is-active:hover {
    background-color: rgb(245 248 249); /* same as hover bg */
}
.dropdown-menu li.is-active a,
.dropdown-menu li.is-active .lang-link-disabled {
    color: #212121; /* dark text like active items elsewhere */
}
/* Make the category color dot a bit larger on the active item */
.dropdown-menu li.is-active:after {
    width: 10px;
    height: 10px;
}

/* Language link disabled (current language in dropdown) */
.dropdown-menu li .lang-link-disabled {
    display: block;
    padding: 1rem 22px;
    cursor: pointer;
    color: #a6a9ac;
}

/* Mobile nav dropdown background removal to match main list */
.mobile-nav .dropdown-menu,
.mobile-nav .dropdown-menu li:hover,
.mobile-nav .dropdown-menu li.is-active,
.mobile-nav .dropdown-menu li.is-active:hover {
    background-color: transparent !important;
}

/* Mobile nav improvements: ensure buttons and links look consistent and use flex */
.mobile-nav #mobile-menu > ul li a,
.mobile-nav #mobile-menu > ul li button,
.mobile-nav #mobile-menu > ul li .lang-link-disabled {
    display: flex !important;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
}
/* Ensure consistency for links and non-clickable language items in mobile */
.mobile-nav #mobile-menu > ul li a,
.mobile-nav #mobile-menu > ul li .lang-link-disabled {
    border-bottom: 1px solid #eceff2;
    padding: 18px 0;
    color: #a6a9ac;
    font-size: 17px;
}
/* Indent submenu items on mobile to distinguish them from main items */
.mobile-nav .dropdown-menu li a,
.mobile-nav .dropdown-menu li .lang-link-disabled {
    padding-left: 1.25rem !important;
}
/* Ensure the button has the same border and padding as links in mobile */
.mobile-nav #mobile-menu > ul li button {
    border-bottom: 1px solid #eceff2;
    padding: 18px 0;
    color: #a6a9ac;
    font-size: 17px;
    font-family: inherit;
}

/* Dark mode: minimal overrides using html.dark scope */
html.dark .bg-bodyBg { background-color: #0b1220 !important; }
html.dark .bg-white { background-color: #0f172a !important; }
html.dark .text-bodyColor { color: #cbd5e1 !important; }
html.dark .text-secondary { color: #e5e7eb !important; }
html.dark .text-primary { color: #9ca3af !important; }
html.dark body { background-color: #0b1220; color: #cbd5e1; }
html.dark .header-nav a.light-link { color: #cbd5e1; }
html.dark .header-nav .active-link,
html.dark .header-nav .has-active,
html.dark .mobile-nav .active-link,
html.dark .mobile-nav .has-active { color: #ffffff !important; }
html.dark .dropdown-menu { background-color: #0f172a; }
html.dark .dropdown-menu li:hover { background-color: #111827; }
html.dark .dropdown-menu li.is-active,
html.dark .dropdown-menu li.is-active:hover { background-color: #111827; }
html.dark .dropdown-menu li.is-active a,
html.dark .dropdown-menu li.is-active .lang-link-disabled { color: #ffffff; }
html.dark .mobile-nav { background-color: #0b1220; box-shadow: none; }
html.dark .mobile-nav #mobile-menu > ul li a,
html.dark .mobile-nav #mobile-menu > ul li button,
html.dark .mobile-nav #mobile-menu > ul li .lang-link-disabled { border-color: #1e293b; color: #cbd5e1; }
html.dark .mobile-nav #mobile-menu > ul li a:hover,
html.dark .mobile-nav #mobile-menu > ul li button:hover { color: #ffffff; }
html.dark #menu-animate-icon span { background-color: #cbd5e1; }
html.dark .header-nav a.light-link:hover { color: #ffffff; }
html.dark .dropdown-menu li a { color: #cbd5e1; }
html.dark .dropdown-menu li a:hover { color: #ffffff; }

/* Theme toggle icons and labels CSS fallback (works even before JS updates classes) */
[data-theme-toggle][aria-pressed="true"] .theme-icon-sun { display: inline-block; }
[data-theme-toggle][aria-pressed="true"] .theme-icon-moon { display: none; }
[data-theme-toggle][aria-pressed="false"] .theme-icon-sun { display: none; }
[data-theme-toggle][aria-pressed="false"] .theme-icon-moon { display: inline-block; }

[data-theme-toggle][aria-pressed="true"] .theme-label-to-light { display: inline !important; }
[data-theme-toggle][aria-pressed="true"] .theme-label-to-dark { display: none !important; }
[data-theme-toggle][aria-pressed="false"] .theme-label-to-light { display: none !important; }
[data-theme-toggle][aria-pressed="false"] .theme-label-to-dark { display: inline !important; }

@media (min-width: 992px) {
  /* Hide labels by default on desktop; no hover display requested (tooltips used instead) */
  .header-nav [data-theme-toggle] .theme-label-to-dark,
  .header-nav [data-theme-toggle] .theme-label-to-light {
    display: none !important;
  }
}

/* Highlight targeted comments with a flash effect */
.comment:target,
.comment.is-highlighted {
    animation: highlight-flash 2s ease-out;
}

@keyframes highlight-flash {
    0% { background-color: rgba(255, 201, 82, 0.4); }
    15% { background-color: rgba(255, 201, 82, 0.4); }
    100% { background-color: rgba(255, 201, 82, 0); }
}

/* Dark mode override for highlight */
html.dark .comment:target,
html.dark .comment.is-highlighted {
    animation: highlight-flash-dark 2s ease-out;
}

@keyframes highlight-flash-dark {
    0% { background-color: rgba(255, 201, 82, 0.25); }
    15% { background-color: rgba(255, 201, 82, 0.25); }
    100% { background-color: rgba(255, 201, 82, 0); }
}

/* Style for the copy-link icon */
.copy-link-btn {
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    margin-left: 0.5rem;
    cursor: pointer;
    color: #6b7280; /* Gray-500, darker than original #A6A9AC */
}
.copy-link-btn:hover {
    opacity: 1;
    color: #374151; /* Gray-700 */
}

/* Maintain dark mode behavior if it was already okay */
html.dark .copy-link-btn {
    opacity: 0.5;
    color: inherit;
}
html.dark .copy-link-btn:hover {
    opacity: 1;
    color: inherit;
}
/* Sidebar */
.rounded-full { border-radius: 9999px; }
html.dark .side-section { background-color: #0f172a !important; }
html.dark .side-section-title { background-color: #111827 !important; border-color: #1f2937 !important; color: #cbd5e1 !important; }
html.dark .author-info { color: #9ca3af !important; }
html.dark .author-nav-link { color: #9ca3af !important; border-color: #1f2937 !important; }
html.dark .author-nav-link:hover { background-color: #111827 !important; color: #e5e7eb !important; }
html.dark .category-link { color: #9ca3af !important; border-color: #1f2937 !important; }
html.dark .category-link:hover { background-color: #111827 !important; color: #e5e7eb !important; }
/* Only apply default gray dot when no explicit after:bg-* color class is present */
html.dark .category-link:not([class*="after:bg-"]):after { background-color: #9ca3af !important; }

/* Post cards (article previews) */
html.dark .article { background-color: #0f172a !important; }
html.dark .articles-header { color: #9ca3af !important; border-color: #1f2937 !important; }
html.dark .article .articles-content { color: #9ca3af !important; }
html.dark .article .articles-content p { color: #9ca3af !important; }
html.dark .font-bold { font-weight: 700 !important; color: #ffffff !important; }
html.dark .font-black { font-weight: 900 !important; color: #ffffff !important; }

/* Comments list and form */
.form-control { color: #212121 !important; } /* Standardize input/textarea text color in light mode */

html.dark .comment { background-color: #0f172a; }
html.dark .comment-content-header h3 { color: #e5e7eb !important; }
html.dark .response-form-wrapper { background-color: #0f172a !important; }
html.dark .form-control { border-color: #334155 !important; color: #cbd5e1 !important; }
html.dark .form-control::placeholder { color: #64748b; }

/* Code and pre blocks */
.pre {
    white-space: pre !important;
}

html.dark pre,
html.dark .pre {
    color: #cbd5e1 !important;
}

html.dark code,
html.dark .code {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}


/* Dark mode: social icons in author sidebar and footer */
html.dark .social-icon {
    background-color: #111827 !important; /* dark slate */
    border-color: #334155 !important; /* slate-700 */
    color: #cbd5e1 !important; /* slate-300 for icon */
}
html.dark .social-icon:hover {
    background-color: #38B7EA !important; /* blueColor accent */
    border-color: #38B7EA !important;
    color: #0b1220 !important; /* dark bg for contrast on blue */
    box-shadow: 0 0 0 3px rgba(56, 183, 234, 0.2);
}
html.dark .social-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #0b1220, 0 0 0 4px #38B7EA; /* accessible ring on dark */
}


/* Header dropdown spacing tweak: standardize the menu distance from the toggle label on desktop */
.header-nav .dropdown-menu { top: 38px !important; }
.header-nav .dropdown-toggle:after { 
  position: absolute !important;
  top: calc(50% - 12px) !important;
  content: '\e688' !important; /* Ensure consistent icon across all dropdown toggles */
  font-family: 'Pe-icon-7-stroke' !important;
  font-size: 24px !important;
}
/* Override caret vertical position specifically for mobile nav as it uses larger padding */
.mobile-nav .dropdown-toggle:after {
  top: calc(50% - 18px) !important;
}
/* Remove bottom border on last item within dropdown to avoid whiteish line */
.header-nav .dropdown-menu li:last-child { border-bottom: none !important; }

/* Desktop header alignment fixes */
@media (min-width: 992px) {
  /* Ensure nav fills the remaining space between logo and burger */
  .header-top > .header-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* allow shrink */
    max-width: 100% !important;
    float: none !important; /* neutralize template floats if any */
    width: auto !important;
    display: block !important; /* remains a flex item via parent */
  }
  /* Make the inner list a stretching flex row */
  .header-nav > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
  /* Push the right controls flush-right with comfortable spacing */
  .header-nav > ul > li.right-controls-toggle {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 8px !important;
  }
  /* Right-align dropdown panel under right controls */
  .header-nav > ul > li.right-controls .dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }
}

/* Dark mode toggle: remove underline and adjust hover behavior */
.header-nav [data-theme-toggle].light-link,
.header-nav [data-theme-toggle].light-link:hover {
    text-decoration: none !important;
}
/* Ensure good contrast in dark mode and avoid turning dark on hover */
html.dark .header-nav [data-theme-toggle].light-link { color: #cbd5e1 !important; }
html.dark .header-nav [data-theme-toggle].light-link:hover { color: #ffffff !important; }

/* Improve contrast for the category title in light mode only */
html:not(.dark) .category-title,
html:not(.dark) .category-title .text-title {
  color: #757575 !important; /* match existing dark gray tone (text-bodyColor) for light mode */
}

/* Dark mode fix for article blockquotes */
html.dark .blog-post-article-quote {
  color: #e5e7eb !important; /* light text for readability on dark bg */
}
html.dark .blog-post-article-quote:before {
  background-color: currentColor !important; /* match the quote bar to the text color */
}

/* Autofill styling fixes: prevent white/yellow background when selecting suggestions or autofill */
/* Baseline (light mode): neutralize WebKit autofill yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-text-fill-color: #212121 !important; /* dark text in light mode */
  caret-color: #212121;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; /* match light bg */
  box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: background-color 9999s ease-in-out 0s; /* hide flash */
}

/* Firefox light mode */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  color: #212121 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #ffffff inset;
}

/* Dark mode overrides: ensure autofill keeps dark background and readable text */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active,
html.dark textarea:-webkit-autofill,
html.dark textarea:-webkit-autofill:hover,
html.dark textarea:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill:active,
html.dark select:-webkit-autofill,
html.dark select:-webkit-autofill:hover,
html.dark select:-webkit-autofill:focus,
html.dark select:-webkit-autofill:active {
  -webkit-text-fill-color: #cbd5e1 !important; /* slate-300 */
  caret-color: #cbd5e1;
  -webkit-box-shadow: 0 0 0px 1000px #0f172a inset; /* match dark surface */
  box-shadow: 0 0 0px 1000px #0f172a inset;
  border-color: #334155 !important; /* slate-700 border to match .form-control */
}

/* Firefox dark mode */
html.dark input:-moz-autofill,
html.dark textarea:-moz-autofill,
html.dark select:-moz-autofill {
  color: #cbd5e1 !important;
  background-color: #0f172a !important;
  box-shadow: 0 0 0 1000px #0f172a inset;
}


/* Language dropdown labels: show native/exonym appropriately */
/* Hide alternate label by default for compact list */
.header-nav .dropdown-menu .lang-alt { display: none; }
/* Ensure keyboard users can also reveal the alt label */
.header-nav .dropdown-menu a:focus-visible .lang-alt { display: inline; }
/* Show alt label on hover for pointer devices */
@media (hover: hover) and (pointer: fine) {
  .header-nav .dropdown-menu li:hover .lang-alt { display: inline; }
}

/* Language toggle label visibility: shown on desktop and mobile menu */
.header-nav .dropdown-toggle .lang-label { display: inline-block; margin-left: 8px; }
/* Show label in mobile nav with improved spacing */
.mobile-nav .dropdown-toggle .lang-label { display: inline !important; margin-left: 1.25rem !important; }

/* Header rightmost dropdown caret alignment using container gutter */
@media (min-width: 992px) {
  /* Define a shared gutter for the header container; tweak this to match site grid */
  .header-top .container { --container-gutter: 27px; }

  /* Standardize vertical rhythm and display for all header links */
  .header-nav .light-link {
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 25px !important;
  }

  /* Standardize all dropdown toggles in the header */
  .header-nav .dropdown-toggle {
    position: relative !important;
    padding-right: 28px !important; /* room for caret */
  }
  .header-nav .dropdown-toggle:after {
    right: 0 !important;
    pointer-events: none;
    margin-left: 0 !important;
    transition: all 0.2s ease-in-out;
  }
  .header-nav .group:hover .dropdown-toggle:after {
    transform: rotate(180deg);
  }

  /* Nudge the entire right-controls group left by the gutter so inner content aligns with body/footer edge */
  .header-nav > ul > li.right-controls { 
    /* margin-right: var(--container-gutter, 27px) !important; */
    margin-left: 28px !important; /* spacing between toggle and language dropdown */
  }
  /* Right-align dropdown panel under right controls */
  .header-nav > ul > li.right-controls .dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }
}


/* Neutralize hover effects for disabled buttons */
.btn:disabled, 
.btn[disabled],
.btn[aria-busy="true"] {
    cursor: not-allowed !important;
    opacity: 0.6;
    /* Overrides Tailwind's !hover:bg-secondary and other hover effects */
    pointer-events: none; 
}

/* Dark mode: buttons (align .btn family with dark palette) */
html.dark .btn {
  border-color: #334155; /* slate-700 */
  color: #cbd5e1;        /* slate-300 */
  background-color: transparent;
}
html.dark .btn:hover {
  background-color: #111827; /* slate-900 surface hover */
  border-color: #475569;      /* slate-600 */
  color: #ffffff;
  text-decoration: none;
}
/* Focus ring for accessibility */
html.dark .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 183, 234, 0.25);
  border-color: #38B7EA; /* blueColor accent */
}
/* Disabled/busy states */
html.dark .btn:disabled,
html.dark .btn[aria-busy="true"],
html.dark .btn[disabled] {
  border-color: #1f2937;      /* slate-800 */
  color: #64748b;             /* slate-500 */
  background-color: #0f172a;  /* dark surface */
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}
/* Links styled as buttons: prevent underline in both idle and hover */
a.btn, a.btn:hover { text-decoration: none !important; }
/* Specific fix: override forced light hover on Write a response button in dark mode */
html.dark .write-a-response-btn:hover {
  background-color: #111827 !important; /* override !hover:bg-secondary */
  border-color: #475569 !important;
  color: #ffffff !important;
}


/* Hover text colors for readability */
html.dark .hover\:text-secondary:hover { color: #e5e7eb !important; }
/* Keep parity for primary as well, in case used */
html.dark .hover\:text-primary:hover { color: #9ca3af !important; }

/* Border color utilities for topics (used in "New" badge) */
.border-blueColor { border-color: rgb(56 183 234) !important; }
.border-redColor { border-color: rgb(255 116 115) !important; }
.border-yellowColor { border-color: rgb(255 201 82) !important; }
.border-greenColor { border-color: rgb(109 200 191) !important; }

/* Skeleton Loading Styles */
@keyframes skeleton-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
.skeleton-item {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background-color: #eceff2;
    border-radius: 4px;
}
.skeleton-text-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.animate-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.h-3 { height: 0.75rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-24 { height: 6rem; }
.h-48 { height: 12rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-48 { width: 12rem; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }
.w-4\/5 { width: 80%; }
.w-5\/6 { width: 83.333333%; }

.gap-4 { gap: 1rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.rounded { border-radius: 0.25rem; }

.pt-1 { padding-top: 0.25rem; }
.mt-8 { margin-top: 2rem; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }

.m-4 { margin: 1rem; }
.p-4 { padding: 1rem; }

html.dark .skeleton-item {
    background-color: #1e293b; /* matches dark mode surface */
}