/* ==========================================================================
   tauon.ch / gluon.ch — Custom Styles
   Modern system font stack (zero serif) + clean, static design
   ========================================================================== */

/* --- Fonts: System stack only, no serif anywhere --- */
:root {
  --sans-serif-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
  --serif-font: var(--sans-serif-font) !important;
  --header-font: var(--sans-serif-font) !important;
  --post-font-family: var(--sans-serif-font) !important;
  --code-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", monospace !important;

  /* Custom Logo-Harmonized Palette — light theme uses the logo's deep violet accent (#7c3aed) */
  --primary-color: #7c3aed;
  --hover-color: #ffffff;
  --meta-color: #475569; /* Slate 600: passes WCAG AA contrast (7.0:1) on #fafbfc */
  --divider-color: rgba(100, 116, 139, 0.25);
  --background-color: #fafbfc;
  --navbar-color: #fafbfc;
  --text-color: #334155;
  --text-color-high-contrast: #0f172a;

  /* Gradient presets */
  --logo-gradient: linear-gradient(135deg, #06b6d4 0%, #818cf8 50%, #a78bfa 100%);
  --logo-gradient-text: linear-gradient(135deg, #0891b2 0%, #6366f1 50%, #7c3aed 100%);
}

[data-theme="dark"] {
  --primary-color: #22d3ee;
  --hover-color: #0f172a;
  --meta-color: #94a3b8;
  --divider-color: rgba(148, 163, 184, 0.2);
  --background-color: #0f172a;
  --navbar-color: #0f172a;
  --text-color: #cbd5e1;
  --text-color-high-contrast: #f8fafc;

  --logo-gradient: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%);
  --logo-gradient-text: linear-gradient(135deg, #22d3ee 0%, #a78bfa 90%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-color: #22d3ee;
    --hover-color: #0f172a;
    --meta-color: #94a3b8;
    --divider-color: rgba(148, 163, 184, 0.2);
    --background-color: #0f172a;
    --navbar-color: #0f172a;
    --text-color: #cbd5e1;
    --text-color-high-contrast: #f8fafc;

    --logo-gradient: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%);
    --logo-gradient-text: linear-gradient(135deg, #22d3ee 0%, #a78bfa 90%);
  }
}

/* Full-viewport background glow on html element (prevents white margin cutoff) */
html {
  background-color: var(--background-color) !important;
  background-image:
    radial-gradient(at 10% 8%, rgba(6, 182, 212, 0.04) 0px, transparent 65%),
    radial-gradient(at 90% 12%, rgba(167, 139, 250, 0.04) 0px, transparent 65%),
    radial-gradient(at 50% 95%, rgba(129, 140, 248, 0.02) 0px, transparent 70%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
}

[data-theme="dark"] html {
  background-image:
    radial-gradient(at 10% 8%, rgba(34, 211, 238, 0.06) 0px, transparent 65%),
    radial-gradient(at 90% 12%, rgba(167, 139, 250, 0.05) 0px, transparent 65%),
    radial-gradient(at 50% 95%, rgba(129, 140, 248, 0.03) 0px, transparent 70%) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) html {
    background-image:
      radial-gradient(at 10% 8%, rgba(34, 211, 238, 0.06) 0px, transparent 65%),
      radial-gradient(at 90% 12%, rgba(167, 139, 250, 0.05) 0px, transparent 65%),
      radial-gradient(at 50% 95%, rgba(129, 140, 248, 0.03) 0px, transparent 70%) !important;
  }
}

body {
  background: transparent !important;
  background-color: transparent !important;
}

*, *::before, *::after,
html, body, main, article, section, header, footer, nav,
p, span, a, li, ul, ol, dl, dt, dd, blockquote, q,
h1, h2, h3, h4, h5, h6,
.home-title, .nav-links, .article-title, .post-title,
input, button, select, textarea {
  font-family: var(--sans-serif-font) !important;
}

code, kbd, samp, pre, pre code {
  font-family: var(--code-font) !important;
}

/* --- Font Weight Normalization: nothing thinner than Regular 400 --- */
.nav-links { font-weight: 400 !important; }
#banner-home-subtitle { font-weight: 400 !important; }
.bloglist-meta ul,
.bloglist-meta ul li,
.pinned-label { font-weight: 400 !important; }
.bloglist-content .description p { font-weight: 400 !important; }
.all-posts, #all-projects { font-weight: 400 !important; }
.article-navigation div p { font-weight: 400 !important; }
footer, footer .credits, footer .credits small,
footer p, footer span, footer a { font-weight: 400 !important; }

/* ==========================================================================
   CLEAN & MODERN ACCENTS (COMPLETELY STATIC, NO ANIMATIONS / TRANSFORMS)
   ========================================================================== */

/* --- Rounded blog list container: transparent background to blend into page --- */
.bloglist-container {
  border-radius: 14px;
}

.bloglist-content,
.bloglist-meta {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- Softer dividers: dashed instead of hard lines --- */
.bottom-divider {
  border-bottom: 1px dashed var(--divider-color) !important;
}

/* ==========================================================================
   ELEGANT HOVER & FLICKER-FREE LINK BEHAVIOR
   Tabi defaults: inverted full-background block with sharp ::before pseudo-element.
   This flickers violently on large elements like post titles.
   Replacement: smooth, elegant text color shift only.
   ========================================================================== */

/* 1. Post titles in bloglist: NO background inversion, just smooth color accent */
.bloglist-title a,
.bloglist-title a:hover {
  background: none !important;
  background-color: transparent !important;
}
.bloglist-title a:hover::before {
  display: none !important;
  content: none !important;
}
.bloglist-title a {
  color: var(--text-color-high-contrast) !important;
  transition: color 0.15s ease;
}
.bloglist-title a:hover,
.bloglist-title:hover a {
  color: #7c3aed !important;
}
[data-theme="dark"] .bloglist-title a:hover,
[data-theme="dark"] .bloglist-title:hover a {
  color: #22d3ee !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bloglist-title a:hover,
  :root:not([data-theme="light"]) .bloglist-title:hover a {
    color: #22d3ee !important;
  }
}

/* 2. All section titles, post titles, home title: clean hover without flickering background */
.home-title,
.home-title:hover,
.article-title,
.article-title:hover {
  background-color: transparent !important;
}
.home-title:hover::before,
.article-title:hover::before {
  display: none !important;
  content: none !important;
}

/* Fix: Top-bar site title must NEVER lose its gradient or disappear on hover */
.home-title:hover {
  background: var(--logo-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.85;
}

/* 3. Navigation links: subtle color transition, no jumping box */
.nav-links {
  transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

.nav-links:hover {
  background: none !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
}
.nav-links:hover::before {
  display: none !important;
  content: none !important;
}

/* 4. "Read more" link: smooth color shift */
.readmore,
.readmore:hover {
  background: none !important;
  background-color: transparent !important;
}
.readmore:hover::before {
  display: none !important;
  content: none !important;
}
.readmore:hover {
  color: var(--primary-color) !important;
}

/* 5. Elegant Body / Prose Links (eliminates harsh filled rectangle & flickering ::before box)
   Exclude .header-anchor: anchor links must remain position: absolute with no underline
   so that heading text nodes do not get displaced into an indented column. */
.body a:not(.header-anchor),
article a:not(.header-anchor),
.content a:not(.nav-links):not(.home-title):not(.tag):not(.social):not(.readmore):not(.theme-menu-item):not(.language-menu-item):not(.header-anchor) {
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--primary-color) 40%, transparent) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

.body a::before,
.body a:hover::before,
article a::before,
article a:hover::before,
.content a:hover::before {
  display: none !important;
  content: none !important;
}

.body a:not(.header-anchor):hover,
article a:not(.header-anchor):hover,
.content a:not(.nav-links):not(.home-title):not(.tag):not(.social):not(.readmore):not(.theme-menu-item):not(.language-menu-item):not(.header-anchor):hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
  text-decoration-color: var(--primary-color) !important;
  opacity: 0.85;
}

/* External link indicator icon: match text color and transition gracefully */
a.external::after {
  transition: opacity 0.15s ease !important;
}
a.external:hover::after {
  background-color: var(--primary-color) !important;
  opacity: 0.85;
}

/* ==========================================================================
   SIGNATURE LOGO GRADIENT (from logo_light.svg: #22d3ee -> #a78bfa)
   Cyan/Turquoise (energy, tech) to Soft Violet/Purple (warmth, humanity)
   ========================================================================== */
:root {
  --logo-gradient: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #a78bfa 100%);
  --logo-gradient-text: linear-gradient(135deg, #06b6d4 0%, #6366f1 55%, #8b5cf6 100%);
}
[data-theme="dark"] {
  --logo-gradient-text: linear-gradient(135deg, #22d3ee 0%, #a78bfa 90%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-gradient-text: linear-gradient(135deg, #22d3ee 0%, #a78bfa 90%);
  }
}

/* Apply unified gradient to the top-left Site Title AND Logo */
.home-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  background: transparent !important;
  line-height: 1.3 !important;
}

/* Unified continuous gradient spanning both Logo and Text */
.home-title .nav-logo-icon {
  display: inline-block;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 55%, #818cf8 100%) !important;
  -webkit-mask: url("/logo_mask.svg") no-repeat center / contain;
  mask: url("/logo_mask.svg") no-repeat center / contain;
}

.home-title span:last-child {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 30%, #6366f1 65%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.3 !important;
  padding-bottom: 0.25rem !important;
  margin-bottom: -0.25rem !important;
}

/* Fix: Top-bar site title must NEVER lose its gradient or disappear on hover */
.home-title:hover {
  opacity: 0.85;
}
.home-title:hover span:last-child {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 30%, #6366f1 65%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.home-title:hover .nav-logo-icon {
  background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 55%, #818cf8 100%) !important;
}

/* Footer social links container */
.socials .social {
  color: var(--meta-color);
  background: transparent !important;
  background-color: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
}

.socials .social::before,
.socials .social:hover::before {
  display: none !important;
  content: none !important;
}

/* Base image styling: light mode is neutral dark-grey */
.socials .social img {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--meta-color);
  transition: filter 0.15s ease, transform 0.15s ease;
  filter: invert(0.35) !important;
}

/* Hover: highlight with accent color (deep violet #7c3aed in light mode) */
.socials .social:hover {
  background: transparent !important;
  background-color: transparent !important;
  transform: translateY(-2px);
}

.socials .social:hover img {
  filter: invert(35%) sepia(100%) saturate(975%) hue-rotate(220deg) brightness(71%) contrast(83%) !important;
}

/* Dark mode idle state: light grey so it's clearly visible */
[data-theme="dark"] .socials .social img {
  filter: invert(0.7) !important;
}

/* Dark mode hover: crisp primary cyan */
[data-theme="dark"] .socials .social:hover img {
  filter: invert(71%) sepia(61%) saturate(2311%) hue-rotate(152deg) brightness(102%) contrast(92%) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .socials .social img {
    filter: invert(0.7) !important;
  }
  :root:not([data-theme="light"]) .socials .social:hover img {
    filter: invert(71%) sepia(61%) saturate(2311%) hue-rotate(152deg) brightness(102%) contrast(92%) !important;
  }
}

/* Apply gradient to the Home Banner Heading — one step smaller than the
   tabi default (2.8rem), medium-semibold weight, natural line height so the
   gradient text is not clipped and the block feels lighter overall.
   Note: tabi's own selector (#banner-container-home #home-banner-text …) has
   higher specificity, so we must match it to actually win. */
#home-banner-header,
#banner-container-home #home-banner-text #home-banner-header {
  background: var(--logo-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  letter-spacing: -0.025em;
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-block-end: 0.35rem !important;
}

@media only screen and (max-width: 600px) {
  #home-banner-header,
  #banner-container-home #home-banner-text #home-banner-header {
    font-size: 1.7rem !important;
  }
}

#banner-home-subtitle .home-role {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

#banner-home-subtitle .home-author {
  font-size: 1.1rem;
  font-weight: 600;
  color: #000000 !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  letter-spacing: -0.015em;
}

[data-theme="dark"] #banner-home-subtitle .home-author {
  color: #cbd5e1 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #banner-home-subtitle .home-author {
    color: #cbd5e1 !important;
  }
}

/* ==========================================================================
   ÜBER MICH — INTRO HEADER (Aviv Yecheskel & Keywords in one gradient line)
   ========================================================================== */
.about-intro-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  margin-block-end: 1.25rem;
}

.about-author-name {
  background: var(--logo-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  display: inline-block;
}

.about-separator {
  background: var(--logo-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.7;
  font-size: 1.2rem;
  user-select: none;
}

.about-keywords {
  background: var(--logo-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  display: inline-block;
}

/* ==========================================================================
   HOME BANNER AVATAR / PHOTO (Matches Über Mich portrait format)
   ========================================================================== */
#image-container-home {
  max-width: 10.5rem !important;
  margin: auto 0;
  overflow: visible !important;
}
#banner-home-img {
  border-radius: 12px !important;
  aspect-ratio: 3 / 4 !important;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.25), 0 4px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(125, 125, 125, 0.15);
}

/* --- Tags: discreet, compact pills under "Weiterlesen" / descriptions --- */
.bloglist-tags {
  margin-top: 0.6rem !important;
}

.bloglist-tags .tag,
.tags a.tag,
a.tag {
  position: relative;
  display: inline-block;
  padding: 0.12rem 0.5rem !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
  line-height: 1.35 !important;
  margin-inline-end: 0.4rem !important;
}

/* Invisible touch target expansion (minimum 44x44px bounding area on touch devices) */
.bloglist-tags .tag::after,
.tags a.tag::after,
a.tag::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -4px;
  right: -4px;
}
.bloglist-tags .tag:hover,
.tags a.tag:hover,
a.tag:hover {
  background: var(--primary-color);
  color: var(--hover-color, #fff);
  border-radius: 999px !important;
}
.bloglist-tags .tag:hover::before,
.tags a.tag:hover::before,
a.tag:hover::before {
  display: none !important;
  content: none !important;
}

/* --- Headings: friendlier rhythm --- */
h1, h2, h3 {
  letter-spacing: -0.015em;
}

/* --- Home banner: warmer greeting --- */
#home-banner-header {
  letter-spacing: -0.02em;
}

/* ==========================================================================
   PRE-LAUNCH REFINEMENTS (2026-10-13)
   - Header title: line-height & padding-bottom are defined directly on
     .home-title / .home-title span:last-child above to prevent gradient clipping.
   - SVG logo: restored to original 1.65rem size without extra padding.
   ========================================================================== */

/* 2c. Author line under the intro: soften the pure-black, heavy look. */
#banner-home-subtitle .home-author {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b !important;
  margin-top: 0.75rem !important;
  letter-spacing: -0.01em;
}

[data-theme="dark"] #banner-home-subtitle .home-author {
  color: #cbd5e1 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #banner-home-subtitle .home-author {
    color: #cbd5e1 !important;
  }
}

/* ==========================================================================
   PRE-LAUNCH REFINEMENTS (2026-10-13, Runde 2)
   A. Banner-Titel noch leichter (1.75rem/500)
   B. Mobile: Divider wie im Desktop — zwischen den Posts, nicht über dem ersten
   ========================================================================== */

/* A. Banner title one more step down */
#home-banner-header,
#banner-container-home #home-banner-text #home-banner-header {
  font-size: 1.75rem !important;
  font-weight: 500 !important;
}

@media only screen and (max-width: 600px) {
  #home-banner-header,
  #banner-container-home #home-banner-text #home-banner-header {
    font-size: 1.5rem !important;
  }
}

/* B. Mobile (single column, <=1100px):
   In the single-column layout, each post consists of .bloglist-meta (date)
   followed by .bloglist-content (title, excerpt, tags).
   The divider belongs ONLY under the post content (between posts),
   NEVER under the meta date. */
@media only screen and (max-width: 1100px) {
  .bloglist-meta.bottom-divider,
  .bloglist-meta {
    border-bottom: none !important;
    border-top: none !important;
  }

  .bloglist-content {
    border-top: none !important;
  }

  .bloglist-content.bottom-divider {
    border-bottom: 1px dashed var(--divider-color) !important;
  }
}

/* 4. Dropdown menus: symmetric rhythm — container padding equals the gap
   between items, so the menu reads evenly spaced on all sides. Item sizing
   (0.4rem 0.6rem) lives with the .theme-menu-item / .language-menu-item
   rules in the shared dropdown section below. */
.dropdown-content {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem !important;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: flex;
}

.theme-menu-item,
.language-menu-item,
.dropdown-content a.theme-menu-item,
.dropdown-content a.language-menu-item {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.6rem !important;
  line-height: normal !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 6px;
  color: var(--text-color) !important;
  font-size: 0.8rem !important;
  text-align: left;
  box-sizing: border-box;
  text-decoration: none !important;
  cursor: pointer;
}

.theme-menu-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.language-badge-svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.theme-menu-item:hover,
.language-menu-item:hover {
  background: rgba(125, 125, 125, 0.12) !important;
  background-color: rgba(125, 125, 125, 0.12) !important;
  color: var(--primary-color) !important;
}

/* Language menu items are <a> links (theme items are <button>). The shared
   link reset `.dropdown-content a.language-menu-item { background/color: … !important }`
   has higher specificity (0,2,1) than `.language-menu-item:hover` (0,2,0) and
   neutralises the hover highlight. Restore the same hover action as the theme
   switcher with a matching-specificity rule for the link variant only. */
.dropdown-content a.language-menu-item:hover {
  background: rgba(125, 125, 125, 0.12) !important;
  background-color: rgba(125, 125, 125, 0.12) !important;
  color: var(--primary-color) !important;
}

.theme-menu-item.is-active,
.language-menu-item.is-active {
  font-weight: 600;
  color: var(--primary-color) !important;
  cursor: default;
}

/* The active entry should behave identically in both menus: no hover
   highlight, matching the language switcher's is-active:hover rule. */
.theme-menu-item.is-active:hover,
.language-menu-item.is-active:hover {
  background: transparent !important;
  background-color: transparent !important;
}

.language-menu-item.is-active .language-badge {
  color: var(--primary-color) !important;
}

.language-menu-item::before,
.language-menu-item:hover::before {
  display: none !important;
  content: none !important;
}

/* --- Blockquotes: accent bar instead of plain text --- */
blockquote {
  border-inline-start: 3px solid var(--primary-color);
  padding-inline-start: 1.2rem;
  margin-inline-start: 0;
  border-radius: 2px;
}

/* --- Article images: rounded corners & soft shadow --- */
.article-content img,
.content img {
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* --- Footer: airy & centered --- */
footer {
  padding-top: 0.5rem;
}
footer .credits {
  opacity: 0.85;
}
footer .credits p {
  display: inline !important;
  margin: 0 !important;
}
footer .credits small {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.35rem !important;
}

/* Identical, elegant hover behavior for license link & sitemap link */
footer .credits a {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease, opacity 0.15s ease, text-decoration-color 0.15s ease !important;
  background: transparent !important;
  background-color: transparent !important;
}

footer .credits a:hover {
  color: var(--primary-color) !important;
  opacity: 0.75 !important;
  background: transparent !important;
  background-color: transparent !important;
}

footer .credits a:hover::before,
footer .credits a::before {
  display: none !important;
  content: none !important;
}

.footer-separator {
  color: var(--meta-color);
  opacity: 0.6;
  margin-inline: 0.25rem;
  user-select: none;
}


/* Micro-typography: protect separators from wrapping as lone orphan characters */
.separator,
.footer-separator {
  white-space: nowrap !important;
  display: inline-block !important;
}

.footer-sitemap-link {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

/* ==========================================================================
   Shared Dropdown Styles (Theme & Language Switchers)
   ========================================================================== */

.dropdown summary {
  list-style: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
}

.dropdown summary::-webkit-details-marker {
  display: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--background-color);
  min-width: 8.5rem;
  padding: 0.35rem 0.25rem !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(125, 125, 125, 0.18);
  white-space: nowrap;
}

.theme-dropdown-content {
  min-width: 8.5rem;
}

.language-dropdown-content {
  min-width: 8.5rem;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}

/* --- Theme & Language Switchers (100% Identical Shared Architecture) --- */
.theme-switcher-wrapper,
.language-switcher-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-start: 0.4rem;
  margin-inline-end: 0.4rem;
}

.theme-current-icon-container,
.language-current-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-color);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.theme-current-icon-container:hover,
.theme-dropdown:hover .theme-current-icon-container,
.theme-dropdown[open] .theme-current-icon-container,
.language-current-icon-container:hover,
.language-dropdown:hover .language-current-icon-container,
.language-dropdown[open] .language-current-icon-container {
  color: var(--primary-color) !important;
}

.theme-current-icon-container svg,
.language-current-icon-container svg {
  width: 1.15rem;
  height: 1.15rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.theme-dropdown-content,
.language-dropdown-content {
  min-width: 8.5rem;
}

/* Ensure dropdown menus anchor cleanly on smaller screens without overflowing the viewport */
@media only screen and (max-width: 600px) {
  .dropdown-content {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}