/* ==========================================================================
   02-design.css — color, transparency & visual surface treatment only
   No positioning or sizing here — that's 01-layout.css. Load this
   AFTER both 00-base-theme.css and 01-layout.css, since some rules
   below (the cover fade, the callout background) only make visual
   sense once things are correctly positioned and sized.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero cover image — opacity & fade only (not position/size)
   -------------------------------------------------------------------------- */
:root {
  --cover-opacity: .65;
  --cover-fade-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-bg-default) 98%);
}

.notion-header__cover.has-cover {
  opacity: var(--cover-opacity) !important;
}

.footer-cover:before,
.notion-header__cover:after {
  background-image: var(--cover-fade-gradient) !important;
}

.footer-cover {
  background: var(--footerCover) !important;
  background-color: var(--color-bg-default) !important;
  background-size: cover !important;
  opacity: var(--cover-opacity) !important;
}

/* --------------------------------------------------------------------------
   Navbar — background, blur & scroll behavior
   The tint (color AND transparency) comes from Super › Colors ›
   Navbar › Background, as an 8-digit hex (e.g. #11111126). This file
   adds the blur, and the "invisible at the top" behavior.

   Scroll: 05-navbar-scroll.js labels the page data-dj-nav="top" or
   "scrolled". At the top, the navbar goes fully invisible (no tint,
   no blur); once scrolled, Super's tint + the blur fade in, and fade
   back out on return to the top. If the script fails to load, the
   label is never set and the navbar stays tinted + blurred — a safe
   fallback rather than a broken one.

   Tried and shelved: a top-to-bottom gradient falloff via a masked
   ::before layer. Didn't render on Super across browsers; reverted to
   this known-good version. Worth revisiting later if wanted.
   -------------------------------------------------------------------------- */
:root {
  --dj-navbar-blur: 48px;
  --dj-navbar-fade: .35s;   /* how long the fade in/out takes */
}

.super-navbar {
  background: var(--navbar-background-color) !important;
  backdrop-filter: blur(var(--dj-navbar-blur)) !important;
  -webkit-backdrop-filter: blur(var(--dj-navbar-blur)) !important;
  border: none !important;
  box-shadow: none !important;
}

/* The mobile menu is handled in its own section further down — it
   needs an opaque background of its own, not the navbar's tint. */

.super-navbar {
  transition:
    background var(--dj-navbar-fade) ease,
    backdrop-filter var(--dj-navbar-fade) ease,
    -webkit-backdrop-filter var(--dj-navbar-fade) ease !important;
}

/* At the top of the page: fully invisible. Only the bar itself — the
   mobile dropdown menu keeps its tint + blur so its links stay
   readable over the hero. */
html[data-dj-nav="top"] .super-navbar {
  background: transparent !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
}

.super-navbar__content {
  border: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Colored callouts / full-width sections — background & stroke
   Super builds callout backgrounds by formula with the lightness
   locked (7% in dark mode), so they couldn't be controlled from
   Super. Instead, each color reads the SAME Super picker as its
   button (Forms › Button {color}), mixed into the page background.
   One picker per hue drives both: full strength on buttons, a subdued
   wash on sections.

   THE FOUR DIALS BELOW ARE THE ONLY NUMBERS TO TOUCH:
     FILL   — how rich the background is, per mode.
     STROKE — how strong the outline is, per mode. Previously every
              callout shared one neutral gray border, which showed up
              on dark fills (green, blue) and vanished on light ones
              (orange, yellow). Now each stroke is built from that
              callout's own color, so they're consistent across hues.
              Set a stroke to 0% to make outlines disappear entirely.

   Brown is deliberately excluded (it's a utility trigger — see the
   centering snippet in Super's CSS box). Gray keeps a neutral
   treatment, tuned separately at the bottom of this section.
   -------------------------------------------------------------------------- */
:root {
  --dj-section-fill-light: 15%;    /* light mode background richness */
  --dj-section-fill-dark: 15%;     /* dark mode background richness */
  --dj-section-stroke-light: 45%;  /* light mode outline strength */
  --dj-section-stroke-dark: 45%;   /* dark mode outline strength */
}

/* Wiring — picks the right pair for the active mode. No numbers here. */
html.theme-light {
  --dj-section-strength: var(--dj-section-fill-light);
  --dj-section-stroke-strength: var(--dj-section-stroke-light);
}

html.theme-dark {
  --dj-section-strength: var(--dj-section-fill-dark);
  --dj-section-stroke-strength: var(--dj-section-stroke-dark);
}

.notion-callout[class*="bg-orange"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-orange) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-orange) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-yellow"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-yellow) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-yellow) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-green"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-green) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-green) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-blue"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-blue) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-blue) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-purple"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-purple) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-purple) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-pink"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-pink) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-pink) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-red"] {
  background-color: color-mix(in srgb, var(--color-bg-form-btn-red) var(--dj-section-strength), var(--color-bg-default)) !important;
  border-color: color-mix(in srgb, var(--color-bg-form-btn-red) var(--dj-section-stroke-strength), var(--color-bg-default)) !important;
}

/* Gray — neutral, built from Super's Text color rather than a hue, so
   it stays a true gray in both modes. Dark mode fill only (light mode
   keeps Super's own gray); stroke follows the same dial as the rest. */
.theme-dark .notion-callout[class*="bg-gray"] {
  background-color: color-mix(in srgb, var(--color-text-default) 4%, var(--color-bg-default)) !important;
}

.notion-callout[class*="bg-gray"] {
  border-color: color-mix(in srgb, var(--color-text-default) calc(var(--dj-section-stroke-strength) / 3), var(--color-bg-default)) !important;
}

/* --------------------------------------------------------------------------
   Gallery cards — cover overlay gradient & no-cover text color
   Structure/positioning for these same has-cover / no-cover cards
   lives in 01-layout.css — this file only touches their color.
   -------------------------------------------------------------------------- */
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-collection-card__content {
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%) !important;
}

.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__content {
  background: none !important;
  background-image: none !important;
}

.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__property {
  color: var(--color-text-default) !important;
}

/* --------------------------------------------------------------------------
   Gallery group headers — hide the divider, color the title
   The divider is a border (or box-shadow) directly on the header,
   not a separate element — making it transparent instead of removing
   it preserves the exact same vertical spacing between groups.
   -------------------------------------------------------------------------- */
.notion-collection-group__section-header {
  border-color: transparent !important;
  box-shadow: none !important;
}

.notion-collection-group__section-header .notion-property__title {
  color: #7D7D7D !important;
}

/* --------------------------------------------------------------------------
   Inline pill buttons (e.g. "Learn more") — rest-state text opacity
   70% of whatever color the pill inherits (currentColor) — the
   theme default when no Notion color was applied, or the specific
   color (green, blue, etc.) when one was. Automatically correct in
   both light and dark mode, and for any color, since it's tied to
   inheritance rather than a hard-coded variable. Hover behavior
   (a soft tinted wash) is defined separately in 00-base-theme.css.
   -------------------------------------------------------------------------- */
.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 {
  color: color-mix(in srgb, currentColor 70%, transparent) !important;
}

/* --------------------------------------------------------------------------
   Native Notion button — background/text color
   Notion tags a colored button with a "bg-{color}-light" class. Super
   builds that color by formula, and in dark mode the formula locks its
   lightness at 7% — which is why colored buttons looked nearly black
   no matter what you picked. So colored buttons now read Super's
   dedicated Forms › Button ({color}) pickers instead
   (--color-bg-form-btn-{color}), set per theme in Super.

   NOTE: Notion button blocks use bg- classes (a background-color
   family), NOT the color- classes text uses. See handoff gotcha #4.
   -------------------------------------------------------------------------- */

/* Default button (no color assigned): outlined in page colors.
   Values defined once in 00-base-theme.css, section 3. */
.notion-button__content:not([class*="bg-"]) {
  background: var(--cta-bg-color) !important;
  border: 1px solid var(--cta-text-color) !important;
  -webkit-text-fill-color: var(--cta-text-color) !important;
}

/* Colored buttons: fill from Super's Forms pickers. */
.notion-button__content[class*="bg-"] {
  border: none !important;
  -webkit-text-fill-color: var(--dj-on-color-text) !important;
}

.notion-button__content[class*="bg-gray"]   { background: var(--color-bg-form-btn-gray) !important; }
.notion-button__content[class*="bg-brown"]  { background: var(--color-bg-form-btn-brown) !important; }
.notion-button__content[class*="bg-orange"] { background: var(--color-bg-form-btn-orange) !important; }
.notion-button__content[class*="bg-yellow"] { background: var(--color-bg-form-btn-yellow) !important; }
.notion-button__content[class*="bg-green"]  { background: var(--color-bg-form-btn-green) !important; }
.notion-button__content[class*="bg-blue"]   { background: var(--color-bg-form-btn-blue) !important; }
.notion-button__content[class*="bg-purple"] { background: var(--color-bg-form-btn-purple) !important; }
.notion-button__content[class*="bg-pink"]   { background: var(--color-bg-form-btn-pink) !important; }
.notion-button__content[class*="bg-red"]    { background: var(--color-bg-form-btn-red) !important; }

/* Hover, every button: fully inverted page colors (white-on-black in
   dark mode, black-on-white in light). Listed after the color rules
   and with :hover, so it wins over them. */
.notion-button__content:hover,
.notion-button__content[class*="bg-"]:hover {
  background: var(--cta-bg-hover-color) !important;
  -webkit-text-fill-color: var(--cta-text-hover-color) !important;
}

/* --------------------------------------------------------------------------
   Code blocks — remove the per-line background band
   Super's syntax-highlighting theme ("One Dark") paints its own
   background (#282c34) on BOTH the outer <pre> box and the inner
   <code> element. Normally the two match, so nobody notices. But we
   give the outer box our translucent --color-code-bg instead, which
   exposed the inner one — and because <code> is an inline element,
   its background only covers the text on each line, first character
   to last. That was the dark band. The outer box already provides the
   background, so the inner one is simply cleared. Also drops the
   theme's text-shadow, which muddies text on a translucent surface.
   -------------------------------------------------------------------------- */
.notion-code code,
.notion-code code[class*="language-"] {
  background: transparent !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Database list items — hover background
   Super's own hover is a solid gray (Super's card/hover background),
   which sits flat on top of colored full-width sections. This uses the
   same translucent wash as toggles (--dj-toggle-hover-bg, defined in
   00-base-theme.css section 3), so it tints whatever is behind it.
   Tied to the toggle variable on purpose: change the strength there
   and toggles + list rows stay matched.
   -------------------------------------------------------------------------- */
.notion-collection-list__item:hover {
  background: var(--dj-toggle-hover-bg) !important;
}

/* --------------------------------------------------------------------------
   Navbar links — dim the unselected ones
   Super's Navbar › Text color is now pure white (dark) / black (light).
   Rather than leaving Super's own dimming in place, every link is set
   to 70% of that color, and the CURRENT page's link gets the full
   strength — so the selected page still reads as selected, with a
   cleaner contrast between the two states.

   Uses color-mix rather than opacity so only the text dims, not any
   background or border a link might carry. Hover brings a link to
   full strength too, as a hint that it's clickable.

   The "current page" selector lists several possibilities, because
   Super's own class for it hasn't been confirmed by Inspect yet —
   unmatched ones are simply ignored, so this is safe either way.
   -------------------------------------------------------------------------- */
:root {
  --dj-navbar-item-dim: 60%;
}

.super-navbar__item-list .super-navbar__item {
  color: color-mix(in srgb, var(--navbar-text-color) var(--dj-navbar-item-dim), transparent) !important;
}

.super-navbar__item-list .super-navbar__item:hover,
.super-navbar__item-list .super-navbar__item:focus-visible,
.super-navbar__item-list .super-navbar__item.active,
.super-navbar__item-list .super-navbar__item.selected,
.super-navbar__item-list .super-navbar__item[aria-current],
.super-navbar__item-list .super-navbar__item[data-active="true"] {
  color: var(--navbar-text-color) !important;
}


/* --------------------------------------------------------------------------
   Mobile menu — background, item size, hover & fullscreen
   Three things Super gets wrong here, all fixed with the dials below:

   1. BACKGROUND. Super sets --navbar-menu-background-color to the
      SAME value as the navbar itself, which is deliberately ~15%
      transparent — so the open menu let the page show through and the
      links were hard to read. It now gets its own near-opaque
      background built from Super's Page background color.

   2. HOVER / ACTIVE. Super's --navbar-background-color-hover is
      #ff280f (bright red) and has no picker in Super's UI, which is
      why it survived. Replaced with a neutral wash of your Text
      color, matching toggles and list rows.

   3. SIZE & FULLSCREEN. Link size is now a dial, and the menu fills
      the whole screen instead of dropping partway down.
   -------------------------------------------------------------------------- */
:root {
  --dj-mobile-menu-opacity: 97%;      /* 100% = fully solid */
  --dj-mobile-menu-item-size: 1.75rem;/* link size in the open menu */
  --dj-mobile-menu-item-weight: 700; /* 400 regular, 500 medium, 700 bold */
  --dj-mobile-menu-item-gap: .25rem;  /* vertical space between links */
  --dj-mobile-menu-item-padding: .5rem 1rem; /* space inside each link row */
  --dj-mobile-menu-top-offset: .5rem; /* gap between navbar and first link */
  /* Space reserved at the top of the panel. Was var(--navbar-height);
     now a third of that, moving the menu up ~2/3. Raise it if the
     links tuck under the navbar. */
  --dj-mobile-menu-panel-top: var(--navbar-height);
  --dj-mobile-menu-hover: color-mix(in srgb, var(--color-text-default) 8%, transparent);
}

.super-navbar__menu {
  background: color-mix(in srgb, var(--color-bg-default) var(--dj-mobile-menu-opacity), transparent) !important;
  backdrop-filter: blur(var(--dj-navbar-blur)) !important;
  -webkit-backdrop-filter: blur(var(--dj-navbar-blur)) !important;
  border: none !important;
  box-shadow: none !important;

  /* Fullscreen: fills the viewport instead of dropping partway down.
     100dvh (not 100vh) accounts for mobile browser chrome. Delete
     this block to go back to the stock drop-down panel. */
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  max-height: none !important;
  padding-top: var(--dj-mobile-menu-panel-top) !important;
  overflow-y: auto !important;
}

/* Confirmed via Inspect: the mobile menu uses a DIFFERENT class
   family from the desktop navbar — super-navigation-menu__*, not
   super-navbar__*. The text size sits on the item's inner <p> title,
   and spacing comes from a gap on the list PLUS padding on each item.
   Both navbar and menu selectors are kept below so either markup is
   covered. */
/* Pin the links directly under the navbar. Without this the panel
   centers its contents vertically on tall phone screens, pushing the
   menu far down the page. The wrapper and viewport are Super's own
   nesting layers — zeroed so only the offset dial adds space. */
.super-navigation-menu__items-wrapper,
.super-navigation-menu__items-viewport {
  display: block !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.super-navigation-menu__items {
  margin-top: var(--dj-mobile-menu-top-offset) !important;
  padding-top: 0 !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dj-mobile-menu-item-gap) !important;
}

.super-navigation-menu__item,
.super-navigation-menu__item-content {
  padding: var(--dj-mobile-menu-item-padding) !important;
}

/* Super's stylesheet gives the menu its own font family, so Inter is
   set explicitly here. --primary-font is Super › Typography ›
   Primary Font, so changing it there still carries through. */
.super-navigation-menu__item-title,
.super-navigation-menu__item .notion-link,
.super-navigation-menu__item,
.super-navbar__menu .super-navbar__item {
  font-family: var(--primary-font) !important;
}

.super-navigation-menu__item-title,
.super-navigation-menu__item .notion-link,
.super-navbar__menu .super-navbar__item {
  font-size: var(--dj-mobile-menu-item-size) !important;
  font-weight: var(--dj-mobile-menu-item-weight) !important;
  line-height: 1.2 !important;
}

/* Hover / active — replaces Super's red. */
.super-navigation-menu__item:hover,
.super-navigation-menu__item:focus-visible,
.super-navigation-menu__item[data-highlighted],
.super-navbar__menu .super-navbar__item:hover {
  background: var(--dj-mobile-menu-hover) !important;
}

/* Belt and braces: kills the red at the source, in case Super uses it
   anywhere else in the menu. */
.super-navbar,
.super-navbar__menu,
.super-navigation-menu__items-wrapper {
  --navbar-background-color-hover: var(--dj-mobile-menu-hover) !important;
  --navbar-list-item-hover: var(--dj-mobile-menu-hover) !important;
}

/* --------------------------------------------------------------------------
   Notion form (contact page) — panel & field backgrounds
   Confirmed via Inspect: Super renders the form natively (no iframe),
   so every part is styleable. Stock leaves the whole thing
   transparent — panel, inputs and all — which disappears over
   full-bleed background imagery.

   The panel is built from Super's Page background color, so it
   follows light/dark automatically. Fields get the same translucent
   wash used by toggles and code blocks, so they read as inset.

   DIALS:
     panel-opacity  — 100% = fully solid, lower = lets imagery through
     panel-padding  — space inside the panel
     field-strength — how visible the input fields are against it
   -------------------------------------------------------------------------- */
:root {
  --dj-form-panel-opacity: 92%;
  --dj-form-panel-padding: 2rem;
  --dj-form-field-strength: 6%;
}

.notion-form__wrapper {
  background: color-mix(in srgb, var(--color-bg-default) var(--dj-form-panel-opacity), transparent) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--border-radii-layout) !important;
  padding: var(--dj-form-panel-padding) !important;
}

.notion-form__input-field {
  background: color-mix(in srgb, var(--color-text-default) var(--dj-form-field-strength), transparent) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--border-radii-layout) !important;
}

/* Focus: strengthen the field so the active one is obvious. */
.notion-form__input-field:focus,
.notion-form__input-field:focus-visible {
  background: color-mix(in srgb, var(--color-text-default) calc(var(--dj-form-field-strength) * 2), transparent) !important;
  border-color: var(--color-text-default) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Callouts containing an image block — no border
   A callout with an image placed inside it (an uploaded PNG/SVG as
   content, NOT the callout's Notion icon) reads as a designed block
   in its own right, so the outline competes with it. Callouts without
   one — including those using only a Notion icon — keep their border.

   :has() asks "does this callout contain an image block?", letting
   the browser style the parent based on its contents. Listed last so
   it wins over the colored-callout strokes above, which set border
   colors.
   -------------------------------------------------------------------------- */
.notion-callout:has(.notion-image),
.notion-callout:has(figure img),
.notion-callout:has(.notion-callout__content img) {
  border: none !important;
}

/* --------------------------------------------------------------------------
   Mobile menu open — full-screen overlay
   Confirmed via Inspect: .super-navbar__menu-wrapper carries a
   transform (Super uses it for the slide-down animation). A transform
   makes that element the anchor for position:fixed inside it — so the
   panel's "top: 0" meant the top of the wrapper, which sits below the
   92px navbar, not the top of the screen.

   Fixing the WRAPPER is what works. It gets pulled to the top of the
   viewport, and the navbar stays transparent and above it so the logo
   and close button remain visible and clickable.
   -------------------------------------------------------------------------- */
.super-navbar__menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.super-navbar__menu {
  top: 0 !important;
  margin-top: 0 !important;
}

html:has(.super-navbar__menu) .super-navbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 50 !important;
}