/* ==========================================================================
   00-base-theme.css — Horizon theme (stock), for DJCarey.com
   This is the official Horizon theme, formatted for readability, with
   ONE deliberate change from stock: in section 6, ".notion-header" is
   no longer hidden on the homepage (#page-index) — stock Horizon hid
   it there, which also hid the hero cover image added in a separate
   file, since the cover lives inside .notion-header.

   Rule ORDER within this file is preserved exactly as the original
   theme wrote it (not just grouped), because several sections rely on
   later rules overriding earlier ones, and on media queries firing in
   a specific sequence — see the notes in sections 19 and 30.

   This file is meant to be loaded FIRST, before any of the numbered
   custom-layer files (01-layout.css, 02-design.css, etc.) — those
   assume this one is already active and build on top of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Heading & navbar transition tweaks
   -------------------------------------------------------------------------- */
h1.notion-heading,
h2.notion-heading * {
  letter-spacing: -1px !important;
}

/* Line-height set here at the block level (not just on bold text
   via strong) so it applies consistently whether the heading is
   plain, fully bold, or mixed (like the homepage hero, which has
   both bold and regular text within one H1) — matches the value
   used for bold H1 text below, so both are now unified. */
h1.notion-heading {
  line-height: 1.2 !important;
}

.super-navbar__item,
.super-navbar__theme-toggle {
  transition: background .16s ease-in-out, border .16s ease-in-out !important;
}

/* --------------------------------------------------------------------------
   2. List view — text wrapping
   -------------------------------------------------------------------------- */
.notion-collection-list__item .notion-property.notion-property__title .notion-semantic-string > span,
.notion-collection-list__item .notion-property__title .notion-semantic-string {
  white-space: pre-wrap !important;
}

/* --------------------------------------------------------------------------
   3. Design tokens
   HOW COLOR WORKS ON THIS SITE (read this first):
   Super owns every color. Pick solid colors — or 8-digit hex codes with
   transparency built in, e.g. #11111126 — in Super › Theme › Colors.
   These files only ever REFERENCE Super's variables; they never set a
   hex value for anything Super has a picker for.
   Where we want a see-through version of a Super color (and Super has
   no field for it), we use color-mix() with one of the "strength"
   settings below. Tune the strength here; tune the color in Super.

   Super variable reference (from the page's own inline styles):
     --color-text-default / --color-bg-default ... Main › Text / Page bg
     --color-text-default-light .................. Main › Light Text
     --color-border-default ...................... Main › Border Color
     --color-ui-hover-bg ......................... Main › Hover background
     --color-checkbox-bg ......................... Main › Checkbox Background
     --navbar-background-color ................... Navbar › Background
     --color-bg-form-btn-{color} ................. Forms › Button ({color})
     --navbar-height ............................. Navigation › Navbar Height
     --header-cover-height ....................... Layout › Cover height
     --collection-card-gap ....................... Databases › Card Gap
   -------------------------------------------------------------------------- */
:root {
  --select-highlight-color: rgba(253, 215, 99, .4);
  --header-title-opacity: .5 !important;

  /* Deliberate difference from Super: Super's Rounded Edges setting
     (12px) is for images/cards/callouts. Buttons, pills and dropdown
     options stay fully pill-shaped regardless. */
  --cta-border-radii: 40px !important;

  /* Strength settings — the ONLY place transparency amounts live. */
  --dj-overlay-strength: 5%;   /* toggles, code blocks, dropdown active */
  --dj-lightbox-strength: 80%; /* lightbox backdrop */
  --dj-card-strength: 60%;     /* gallery card content backing */

  /* Low-opacity wash of the text color: white-ish in dark mode,
     near-black in light mode — automatically, from Super's Text color.
     It tints whatever sits behind it (e.g. full-width colored sections)
     instead of covering it flat. */
  --dj-translucent-overlay: color-mix(in srgb, var(--color-text-default) var(--dj-overlay-strength), transparent) !important;
  --dj-toggle-hover-bg: var(--dj-translucent-overlay) !important;
  --color-code-bg: var(--dj-translucent-overlay) !important;
  --dj-lightbox-bg: color-mix(in srgb, var(--color-bg-default) var(--dj-lightbox-strength), transparent) !important;
  --card-content-bg-color: color-mix(in srgb, var(--color-bg-default) var(--dj-card-strength), transparent) !important;

  /* Text sitting on a colored fill (pill hover, colored buttons):
     page-background color, i.e. dark text in dark mode, white text in
     light mode. Swap to var(--color-text-default) to invert that. */
  --dj-pill-hover-text: var(--color-bg-default) !important;
  --dj-on-color-text: var(--color-bg-default) !important;

  /* Native button, default (no color assigned): outlined in the page
     colors at rest, fully inverted on hover. Same logic in both
     themes, so it's defined once. */
  --cta-bg-color: var(--color-bg-default) !important;
  --cta-text-color: var(--color-text-default) !important;
  --cta-bg-hover-color: var(--color-text-default) !important;
  --cta-text-hover-color: var(--color-bg-default) !important;
}

/* --------------------------------------------------------------------------
   4. Dark-theme exceptions — values Super derives by formula and
   offers no picker for, so they can only be set here.
   -------------------------------------------------------------------------- */
.theme-dark {
  --color-bg-gray-light: #101010 !important;
  --color-pill-default: #101010 !important;
}

/* --------------------------------------------------------------------------
   5. (Light-theme tokens — none needed any more; everything is either
   set in Super or defined once in section 3.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Hide elements
   NOTE: this used to also hide #page-index .notion-header (the homepage
   header), which meant it hid the hero cover image on the homepage too,
   since the cover lives inside .notion-header. Removed — see section 34.
   NOTE: .notion-toggle.bg-brown (hide toggle on brown background) was
   removed from here and moved into Super's own CSS box, since it was
   colliding with the bg-brown centering snippet on Toggle Heading
   blocks (which carry both .notion-toggle and .notion-heading at
   once). Now controlled directly in Super, using text-color-brown
   instead of background-brown as the trigger, so the two features
   no longer share the same class.
   -------------------------------------------------------------------------- */
.notion-dropdown__button svg:first-of-type,
.notion-dropdown__menu-header,
.notion-toggle__trigger {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. Flex layout fixes
   -------------------------------------------------------------------------- */
.notion-collection-card,
.notion-collection-card__property-list,
.notion-property__person > .notion-semantic-string > span {
  display: flex !important;
  display: flex !important;
}

/* --------------------------------------------------------------------------
   8. Dark theme — text color fixes
   -------------------------------------------------------------------------- */
.theme-dark .notion-code code,
.theme-dark .notion-collection-card__content,
.theme-dark .notion-collection-card__property span .date {
  color: var(--color-text-default) !important;
}

/* --------------------------------------------------------------------------
   9. Card content & pill colors (light default)
   -------------------------------------------------------------------------- */
.notion-collection-card__content,
.notion-collection-card__property span .date,
.notion-collection-gallery .pill-default {
  color: var(--color-bg-default) !important;
}

/* --------------------------------------------------------------------------
   10. Per-page content width
   -------------------------------------------------------------------------- */
#page-blocks .max-width,
.parent-page__blog .max-width,
.parent-page__posts .max-width {
  --layout-max-width: 900px !important;
}

/* --------------------------------------------------------------------------
   11. Dark theme — pill outline
   -------------------------------------------------------------------------- */
.theme-dark .notion-collection-gallery .pill-default {
  background: 0 0 !important;
  border: 1px solid var(--color-text-default);
  color: var(--color-text-default) !important;
}

/* --------------------------------------------------------------------------
   12. Base body font smoothing
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* --------------------------------------------------------------------------
   13. Text selection color
   -------------------------------------------------------------------------- */
::-moz-selection {
  background: var(--select-highlight-color) !important;
}

::selection {
  background: var(--select-highlight-color) !important;
}

/* --------------------------------------------------------------------------
   14. Paragraph & heading spacing
   -------------------------------------------------------------------------- */
.notion-text p,
h2.notion-heading:not(.toggle) {
  margin-bottom: 12px !important;
}

/* --------------------------------------------------------------------------
   15. Big display headings
   -------------------------------------------------------------------------- */
h1.notion-heading strong,
strong h1.notion-heading {
  margin-bottom: 12px !important;
  letter-spacing: -4px !important;
  line-height: 1 !important;
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
}

h2.notion-heading * {
  line-height: 1 !important;
}

h3.notion-heading * {
  letter-spacing: -.6px !important;
  line-height: 1 !important;
}

.notion-header__title {
  font-size: clamp(2.3rem, 5vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -1.6px !important;
  opacity: var(--header-title-opacity) !important;
}

/* --------------------------------------------------------------------------
   16. Navbar bar & items
   -------------------------------------------------------------------------- */
.super-navbar {
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}

.super-navbar__menu {
  background: var(--color-bg-default) !important;
}

.super-navbar__item-list {
  gap: 12px !important;
}

.super-navbar__item {
  font-weight: 100 !important;
  padding: 8px 12px !important;
  height: auto !important;
  border-radius: 50px !important;
  border: 1px solid transparent !important;
}

.super-navbar__item:hover,
.super-navbar__theme-toggle:hover {
  border: 1px solid var(--color-border-default) !important;
  background: var(--color-ui-hover-bg);
}

.super-navbar__theme-toggle {
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  width: 42px !important;
  height: 42px !important;
}

.super-navbar__theme-toggle svg {
  stroke-width: 1.5px !important;
}

/* --------------------------------------------------------------------------
   17. Header spacing
   -------------------------------------------------------------------------- */
.notion-header {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   18. Collection header wrapper
   -------------------------------------------------------------------------- */
.notion-collection__header-wrapper {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* --------------------------------------------------------------------------
   19. Gallery grid — column counts & responsive breakpoints
   NOTE: keep everything in this section in the order it's in. The three
   max-width queries below can all be true at once on a narrow screen, so
   whichever one is written LAST is the one that wins — they're ordered
   widest to narrowest on purpose (1200px, then 968px, then 764px).
   -------------------------------------------------------------------------- */
.notion-collection-gallery.small {
  grid-template-columns: 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium .notion-collection-card {
  min-height: 420px !important;
}

@media all and (max-width: 1200px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
    grid-column: 2/-1;
  }
}

@media all and (max-width: 968px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr !important;
  }

  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
    grid-column: 1/-1;
  }
}

@media all and (max-width: 764px) {
  .notion-collection-gallery.medium,
  .notion-collection-gallery.small {
    grid-template-columns: 1fr !important;
  }
}

.notion-collection-gallery.large {
  grid-template-columns: 1fr 1fr !important;
}

@media only screen and (min-width: 1440px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media only screen and (max-width: 767px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
  }
}

@media only screen and (min-width: 992px) {
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+12),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+2),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+20),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+8),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+12):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+2):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+20):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+8):not(:last-child) {
    grid-column: span 2/auto;
    grid-row: span 2/auto;
  }

  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+11):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+16):not(:last-child) {
    grid-column: span 2/auto;
  }
}

.notion-collection-gallery,
.notion-collection-list {
  border-top: 0 !important;
}

.notion-collection-gallery.large {
  display: grid !important;
  grid-auto-flow: row dense !important;
  grid-auto-columns: 1fr !important;
  grid-column-gap: 24px !important;
  grid-row-gap: 24px !important;
  grid-template-rows: auto !important;
}

/* --------------------------------------------------------------------------
   20. Collection cards — layout, cover image, hover effects
   -------------------------------------------------------------------------- */
.notion-collection-card__cover img {
  padding: 0 !important;
  height: 100% !important;
  transition: transform .2s ease-in-out !important;
}

.notion-collection-card picture,
.notion-collection-card__cover div {
  height: 100% !important;
}

.notion-collection-card {
  flex-direction: column !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border-default) !important;
  position: relative !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.notion-collection-card__cover {
  height: 100% !important;
  position: relative !important;
}

.notion-collection-card:hover .notion-collection-card__cover img {
  transform: scale(1.05) !important;
  -webkit-transform: scale(1.05) !important;
  -ms-transform: scale(1.05) !important;
}

.notion-collection-card__content {
  position: absolute !important;
  bottom: 0 !important;
  background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 100%);
  width: 100% !important;
}

.notion-collection-card:hover .notion-property__title::after {
  opacity: 1 !important;
}

.notion-property__title::after {
  transition: opacity .2s ease-in-out !important;
  content: '→';
  opacity: 0 !important;
  margin-left: 6px !important;
}

/* --------------------------------------------------------------------------
   21. Shared background helpers
   -------------------------------------------------------------------------- */
.notion-collection-gallery .pill-default {
  background: 0 0 !important;
  border: 1px solid var(--color-bg-default);
}

.notion-dropdown__menu,
.notion-pill.pill-gray,
.super-navbar__cta {
  background: var(--color-bg-default) !important;
}

/* --------------------------------------------------------------------------
   22. Property title weight
   -------------------------------------------------------------------------- */
.notion-property__title .notion-semantic-string {
  font-weight: 200 !important;
}

/* --------------------------------------------------------------------------
   23. Card property list layout
   -------------------------------------------------------------------------- */
.notion-collection-card__property-list {
  margin-top: 0 !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* --------------------------------------------------------------------------
   24. Property text sizing
   -------------------------------------------------------------------------- */
.notion-property__text {
  font-size: 14px !important;
  font-weight: 300 !important;
}

.notion-collection-card__property .notion-semantic-string {
  white-space: pre-wrap !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* --------------------------------------------------------------------------
   25. Pills
   -------------------------------------------------------------------------- */
.notion-pill {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 500 !important;
  padding: 1px 7px 0 !important;
  border-radius: 50px !important;
}

.notion-pill.pill-gray {
  border: 1px solid var(--color-border-default);
}

/* --------------------------------------------------------------------------
   26. List view items
   -------------------------------------------------------------------------- */
.notion-collection-list__item:first-child,
.super-footer {
  border-top: 1px solid var(--color-border-default) !important;
}

.notion-collection-list__item {
  border-bottom: 1px solid var(--color-border-default) !important;
  padding: 24px !important;
  min-height: 38px !important;
  border-radius: 0 !important;
  transition: background-color .15s !important;
  margin: 0 !important;
}

.notion-collection-list__item .notion-property__title .notion-semantic-string > span {
  border-bottom: 0 !important;
}

.notion-page__property-name > span {
  font-size: 16px !important;
}

.notion-page__properties .notion-divider {
  margin: 32px 0 !important;
}

.notion-property__date .date {
  opacity: .6;
}

/* --------------------------------------------------------------------------
   27. Buttons — navbar CTA & inline links
   -------------------------------------------------------------------------- */
.super-navbar__cta {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;
  justify-content: center !important;
  transition: background .2s ease-in-out !important;
  color: var(--color-text-default) !important;
  /* 75% opacity border, via color-mix — automatically correct in
     both light and dark mode since it's built on the same variable
     that already flips between them. */
  border: 1px solid color-mix(in srgb, var(--color-text-default) 75%, transparent) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
}

.notion-root .notion-text .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-root .notion-text strong .notion-link {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;
  justify-content: center !important;
  transition: background .2s ease-in-out !important;
  background: var(--color-bg-default) !important;
  /* color: inherit, not a hard-coded variable — picks up whatever
     Notion color class (color-green, color-blue, etc.) sits on the
     ancestor .notion-text, so the pill automatically matches
     whatever color the text was given. Falls back to the theme
     default text color when no color was applied, same as before. */
  color: inherit !important;
  margin: -2px !important;
  /* border-color: currentColor, so it always matches whatever
     "color" above resolves to (green, blue, or the default) rather
     than being pinned to the theme's default text color. */
  border: 1px solid currentColor !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
  text-decoration: none !important;
}

.notion-code pre,
.notion-toggle,
.super-footer.floating {
  border: 1px solid var(--color-border-default) !important;
}

/* Separate from the shared border rule above — .notion-toggle and
   .super-footer.floating shouldn't get this background too. */
.notion-code pre {
  background: var(--color-code-bg) !important;
}

/* Navbar CTA keeps its original solid black/white invert on hover
   — unaffected by the pill color changes below. */
.super-navbar__cta:hover {
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  opacity: 1 !important;
}

/* Text-link pill hover: split out from the navbar CTA above so it
   can have its own, color-aware treatment.
   color: inherit here resets the 70% opacity dimming from
   02-design.css's rest-state rule — without this, currentColor
   below would pick up that dimmed value (confirmed: computed to
   0.7 alpha) instead of the full-strength color. This :hover
   selector has higher specificity than that rest-state rule, so it
   correctly wins despite loading earlier in the file order.
   Text is darkened via -webkit-text-fill-color rather than color:
   that property repaints the text without changing the computed
   "color" value, so resetting color above doesn't affect how the
   text actually looks. Widely supported (Chrome, Firefox, Safari,
   Edge) despite the name. */
.notion-root .notion-text .notion-link strong:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link:hover,
.notion-root .notion-text strong .notion-link:hover {
  color: inherit !important;
  background: currentColor !important;
  -webkit-text-fill-color: var(--dj-pill-hover-text) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   28. Toggle blocks
   -------------------------------------------------------------------------- */
.notion-toggle.open,
.notion-toggle:hover {
  background: var(--dj-toggle-hover-bg) !important;
}

/* Toggle wrapper background: strip any leftover Notion bg-color
   class (bg-orange, etc.) at rest, generalized to all toggle types
   — not just headings — since Standard toggles turned out to have
   the same leftover-color issue (confirmed: showing solid orange
   at rest, unaffected by the heading-only version of this rule).
   :not(.open):not(:hover) — rest state only, so this doesn't
   override the hover/open background rule above. */
.notion-toggle:not(.open):not(:hover) {
  background: transparent !important;
}

/* Toggle heading text (H1/H2/H3): unconditional, no :not() needed
   here — the hover/open rule above only ever targets the wrapper
   (.notion-toggle), never the heading text directly, so there's
   nothing for this to conflict with. This was the actual gap:
   the wrapper fix correctly stepped aside on open/hover, but that
   also meant the heading's own orange background showed back
   through underneath, since nothing was suppressing it in those
   states specifically. */
.notion-toggle[class*="notion-toggle-heading"] h1.notion-heading,
.notion-toggle[class*="notion-toggle-heading"] h2.notion-heading,
.notion-toggle[class*="notion-toggle-heading"] h3.notion-heading {
  background: transparent !important;
}

.notion-toggle.open:before,
.notion-toggle:before {
  position: absolute !important;
  font-weight: 100 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: .4 !important;
  top: 20px !important;
  right: 18px !important;
}

.super-footer.corners {
  padding: 40px 26px !important;
  gap: 60px !important;
}

.super-footer__footnote {
  font-weight: 300 !important;
}

.notion-toggle {
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  text-align: left !important;
  transition: .3s ease-in-out !important;
}

.notion-toggle__summary {
  margin: 0 !important;
  padding: 18px 30px 18px 18px !important;
}

.notion-heading.toggle {
  padding: 0 !important;
}

.notion-toggle.open {
  padding-bottom: 16px !important;
}

.notion-toggle__content {
  padding-inline-start: 0px !important;
  border-top: 1px solid var(--color-border-default) !important;
  margin: 0 20px !important;
  padding-top: 16px !important;
  transition: .05s ease-in-out !important;
}

.notion-toggle__content .notion-text__content {
  margin-bottom: 0 !important;
}

.notion-toggle:before {
  content: "+" !important;
}

.notion-toggle.open:before {
  content: "-" !important;
}

.notion-toggle.open .notion-toggle__content {
  border-top: 1px solid var(--color-border-default) !important;
  opacity: 1 !important;
  height: auto !important;
}

.notion-toggle.closed .notion-toggle__content {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   29. Checkboxes
   -------------------------------------------------------------------------- */
.notion-checkbox,
.notion-checkbox svg {
  border-radius: 2px !important;
}

.notion-to-do__title.checked del {
  text-decoration: none !important;
}

.notion-checkbox.checked > svg {
  fill: var(--color-bg-default) !important;
}

/* --------------------------------------------------------------------------
   30. Dropdown menu — base + responsive behavior
   NOTE: the @media block at the end of this section overrides several of
   the base rules above it (menu position, hover colors, option styling).
   It needs to stay after them to win.
   -------------------------------------------------------------------------- */
.notion-dropdown {
  width: 100% !important;
}

.notion-dropdown__button {
  justify-content: space-between !important;
  width: 100% !important;
  border: 1px solid var(--color-border-default) !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

.notion-dropdown__menu-wrapper {
  margin-bottom: 8px !important;
}

.notion-dropdown__menu {
  width: 100% !important;
  border-radius: 8px !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 12%) !important;
  border: 1px solid var(--color-border-default) !important;
  margin-top: 5px !important;
}

.notion-dropdown__option-list {
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.notion-dropdown__option {
  padding: 5px 16px !important;
  height: 50px !important;
}

.notion-dropdown__button-title,
.notion-dropdown__option p {
  font-size: 16px !important;
  font-weight: 300 !important;
}

.notion-dropdown__button:hover {
  background: 0 0 !important;
}

.notion-dropdown__option-icon {
  display: none !important;
}

@media all and (min-width: 624px) {
  .notion-dropdown__button,
  .notion-dropdown__menu-header {
    display: none !important;
  }

  .notion-dropdown__menu.initial-state {
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .notion-dropdown__menu.animate-in,
  .notion-dropdown__menu.animate-in.animate-out,
  .notion-dropdown__menu.animate-out {
    animation: none !important;
  }

  .notion-dropdown__menu {
    background: 0 0 !important;
    box-shadow: unset !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
    border: none !important;
  }

  .notion-dropdown__menu-wrapper {
    margin-bottom: 12px !important;
    position: relative !important;
  }

  .notion-dropdown__option:hover {
    background: var(--color-text-default) !important;
    border: 1px solid var(--color-text-default) !important;
  }

  .notion-dropdown__option:hover p,
  .notion-dropdown__option:hover svg {
    color: var(--cta-text-hover-color) !important;
  }

  .notion-dropdown__option p,
  .notion-dropdown__option.active p {
    color: var(--color-text-default) !important;
  }

  .notion-dropdown__option {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--cta-border-radii) !important;
    transition: .2s ease-out !important;
    height: auto !important;
    padding: 8px 12px !important;
  }

  .notion-dropdown__option p {
    transition: color .2s ease-in-out !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
  }

  .notion-dropdown__option-list {
    display: flex !important;
    padding: 0 !important;
    height: auto !important;
    gap: 8px !important;
  }

  .notion-dropdown__option.active {
    background: var(--dj-translucent-overlay) !important;
    border: 1px solid transparent !important;
  }
}

/* --------------------------------------------------------------------------
   31. Code syntax highlighting (Prism tokens)
   Replaced Horizon's stock rules, which forced selectors to #2a2a2a
   (near-invisible on dark), properties to #909090, and !important to
   an undefined variable — the "three grays" that were overriding
   Super's highlighting.

   Colors now come from Super's Notion color pickers (Colors › Notion),
   which already have separate light and dark values — so code follows
   your palette and works in both themes with no extra rules.
   Same role = same color across languages (CSS, JS, HTML...):
     green .... selectors, HTML tags, class names
     red ...... properties, attributes
     green .... strings, values in quotes, URLs
     orange ... numbers, units, booleans, constants, !important
     purple ... keywords, @rules
     yellow ... functions, built-ins
     pink ..... variables
     dimmed ... punctuation, operators, comments
   -------------------------------------------------------------------------- */
.notion-code .token.selector,
.notion-code .token.tag,
.notion-code .token.class-name {
  color: var(--color-text-green) !important;
}

.notion-code .token.property,
.notion-code .token.attr-name {
  color: var(--color-text-red) !important;
}

.notion-code .token.string,
.notion-code .token.char,
.notion-code .token.attr-value,
.notion-code .token.url,
.notion-code .token.regex,
.notion-code .token.inserted {
  color: var(--color-text-green) !important;
}

.notion-code .token.number,
.notion-code .token.unit,
.notion-code .token.boolean,
.notion-code .token.constant,
.notion-code .token.hexcode,
.notion-code .token.important {
  color: var(--color-text-orange) !important;
}

.notion-code .token.keyword,
.notion-code .token.atrule,
.notion-code .token.rule {
  color: var(--color-text-purple) !important;
}

.notion-code .token.function,
.notion-code .token.builtin {
  color: var(--color-text-yellow) !important;
}

.notion-code .token.variable {
  color: var(--color-text-pink) !important;
}

.notion-code .token.punctuation,
.notion-code .token.operator {
  color: color-mix(in srgb, var(--color-text-default) 55%, transparent) !important;
}

.notion-code .token.comment,
.notion-code .token.prolog,
.notion-code .token.doctype,
.notion-code .token.cdata {
  color: color-mix(in srgb, var(--color-text-default) 40%, transparent) !important;
  font-style: italic !important;
}

/* --------------------------------------------------------------------------
   32. Lightbox
   -------------------------------------------------------------------------- */
.lightbox-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.close-lightbox {
  position: absolute;
  top: 0;
  right: 0;
  width: 67px;
  padding: 8px 8px 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  font-size: 2rem;
  background: var(--dj-lightbox-bg);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-default);
  border-radius: 500px;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.close-lightbox:hover {
  background: var(--color-ui-hover-bg);
}

.lightbox-image {
  width: auto;
  max-height: 90%;
  max-width: 80%;
  height: auto;
  z-index: 100;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   33. Misc polish
   -------------------------------------------------------------------------- */
.notion-collection-card.no-click {
  cursor: pointer !important;
}

.notion-quote {
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
  margin-top: 25px !important;
  padding-left: 24px !important;
  letter-spacing: -.3px !important;
  border-color: var(--color-border-default) !important;
  /* Quote size removed from here — now set in Super › Typography › Quote. */
}