.breadcrumbs { font-size: 0.9rem; margin-bottom: 1rem; font-weight: bold; } .breadcrumbs a { color: #3498db; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .term-list { display: block; margin-top: 1rem; } .term-list__item { margin-bottom: 0.5rem; } .term-list__link { color: inherit; text-decoration: none; } .term-list__link:hover { text-decoration: underline; } .posts-list { margin-top: 2rem; } /* Brand actions */ .brand__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: nowrap; } .brand__auth { display: flex; align-items: center; gap: 0.3rem; position: relative; } /* RSS Subscribe button */ .rss-subscribe__link { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid currentColor; background-color: var(--foreground-color); color: var(--background-color) !important; font-size: 0.7rem; font-weight: 340; text-decoration: none !important; line-height: 1.4; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .rss-subscribe__link:hover { background-color: transparent; color: var(--foreground-color) !important; } .rss-subscribe__link svg { width: 10px; height: 10px; } /* Auth links base */ .auth-link { display: inline-flex; align-items: center; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 340; text-decoration: none !important; line-height: 1.4; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Dropdown toggle — visible on ALL screens */ .brand__auth-check { display: none; } .brand__auth-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.2rem 0.4rem; box-sizing: border-box; border-radius: 3px; border: 1px solid #f26522; background-color: #f26522; color: #fff; cursor: pointer; font-size: 0.7rem; font-weight: 340; line-height: 1.4; user-select: none; outline: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .brand__auth-toggle:hover { background-color: transparent; border-color: #f26522; color: #f26522; } @media (prefers-color-scheme: dark) { .brand__auth-toggle { background-color: transparent; border-color: currentColor; color: var(--foreground-color); } .brand__auth-toggle:hover, .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* Dropdown panel — hidden by default, shown on focus-within */ .brand__auth-links { display: none; position: absolute; top: calc(100% + 0.4rem); right: 0; flex-direction: column; gap: 0; background-color: var(--background-color); border: 1px solid var(--background-color1); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); z-index: 100; min-width: 110px; } .brand__auth:focus-within .brand__auth-links { display: flex; } .brand__auth-links .auth-link { border: none; border-radius: 0; padding: 0.55rem 1rem; font-size: 0.78rem; width: 100%; justify-content: center; background-color: transparent; color: var(--foreground-color) !important; } .brand__auth-links .auth-link:not(:last-child) { border-bottom: 1px solid var(--background-color1); } .brand__auth-links .auth-link:hover { background-color: var(--background-color1); color: var(--foreground-color) !important; } /* Mobile */ @media (max-width: 600px) { .brand__actions { gap: 0.16rem; } .rss-subscribe__link { background-color: transparent !important; color: var(--foreground-color) !important; border-color: currentColor; width: 1.6rem; height: 1.6rem; box-sizing: border-box; padding: 0; justify-content: center; } .rss-subscribe__link:hover { background-color: var(--foreground-color) !important; color: var(--background-color) !important; } .rss-subscribe__link span { display: none; } .rss-subscribe__link svg { width: 14px; height: 14px; } .brand__auth-text { display: none; } .brand__auth-toggle { width: 1.6rem; height: 1.6rem; padding: 0; } } /* ── Mobile auth toggle colors ── */ /* Default (system light): orange filled */ @media (max-width: 600px) { .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } } /* System dark: outline */ @media (max-width: 600px) and (prefers-color-scheme: dark) { .brand__auth-toggle { background-color: transparent !important; border-color: currentColor !important; color: var(--foreground-color) !important; } .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* Manual light override */ @media (max-width: 600px) { [data-theme="light"] .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } [data-theme="light"] .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } /* Manual dark override */ [data-theme="dark"] .brand__auth-toggle { background-color: transparent !important; border-color: currentColor !important; color: var(--foreground-color) !important; } [data-theme="dark"] .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* ── Theme switcher ── */ /* Force light theme */ [data-theme="light"] { --background-color: #fbf1c7; --background-color1: #ebdbb2; --foreground-color: #3c3836; --foreground-color3: #665c54; --accent-color: #af3a03; } /* Force dark theme */ [data-theme="dark"] { --background-color: #171414; --background-color1: #fff; --foreground-color: #e3e1db; --foreground-color3: #ccc3b3; --accent-color: #fff; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem; border: none; background: none; color: var(--foreground-color); cursor: pointer; line-height: 1; transition: opacity 0.2s ease; } .theme-toggle:hover { opacity: 0.6; } .theme-toggle__text--light, .theme-toggle__text--dark { display: none !important; } /* Default (system light): moon icon + "Dark" label */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } /* Desktop icon size */ .theme-toggle svg { width: 16.5px; height: 16.5px; } .theme-toggle__text--light { display: none; } .theme-toggle__text--dark { display: inline; } /* System dark (no data-theme): sun icon + "Light" label */ @media (prefers-color-scheme: dark) { .theme-toggle__sun { display: block; } .theme-toggle__moon { display: none; } .theme-toggle__text--light { display: inline; } .theme-toggle__text--dark { display: none; } } /* Manual dark: sun icon + "Light" label */ [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } [data-theme="dark"] .theme-toggle__text--light { display: inline; } [data-theme="dark"] .theme-toggle__text--dark { display: none; } /* Manual light: moon icon + "Dark" label */ [data-theme="light"] .theme-toggle__sun { display: none; } [data-theme="light"] .theme-toggle__moon { display: block; } [data-theme="light"] .theme-toggle__text--light { display: none; } [data-theme="light"] .theme-toggle__text--dark { display: inline; } /* Match size to other buttons on mobile */ @media (max-width: 600px) { .theme-toggle { width: 2.3rem; height: 2.3rem; box-sizing: border-box; padding: 0; } .theme-toggle svg { width: 16.5px; height: 16.5px; } .theme-toggle__text--light, .theme-toggle__text--dark { display: none !important; } }