/* =========================================================================
   DGD NIGHT — dark mode for dgd-houston.
   Palette is the original dgd-afterdark (old discovergaydallas.com) scheme.
   Scope: html[data-dgd-mode="dark"] — set pre-paint by the inline script in
   functions.php. Specificity 0-1-1 intentionally beats the :root preset
   declarations WP prints from theme.json.
   Sections: 1) token re-declarations  2) component overrides for hardcoded
   literals (audited 2026-07-01)  3) mode-toggle icon state.
   ====================================================================== */

html[data-dgd-mode="dark"] {
  color-scheme: dark;

  /* --- 1a. shared slugs -> afterdark values (verbatim from dgd-afterdark/theme.json) --- */
  --wp--preset--color--ivory: #0C0820;
  --wp--preset--color--bone: #1A1440;
  --wp--preset--color--ink: #F4EEE0;
  --wp--preset--color--ink-soft: #C8BFDC;
  --wp--preset--color--muted: #A89FC4;
  --wp--preset--color--border: #3A2D6A;
  --wp--preset--color--fuchsia: #FF3889;
  --wp--preset--color--fuchsia-bright: #FF1F7A;
  --wp--preset--color--fuchsia-mid: #FF52A0;
  --wp--preset--color--fuchsia-deep: #C51864;
  --wp--preset--color--cyan: #00C8E6;
  --wp--preset--color--buttercup: #FFD43B;
  --wp--preset--color--violet: #6B33FF;
  --wp--preset--color--violet-bright: #A78BFA;
  --wp--preset--color--mint: #3DF5C9;
  --wp--preset--color--tangerine: #FF7A33;
  --wp--preset--color--coral: #FF5A4E;
  --wp--preset--color--blush: #2A0A1C;
  --wp--preset--color--sky-wash: #062538;
  --wp--preset--color--sun-wash: #231A0A;
  --wp--preset--color--night: #0F0B23;
  --wp--preset--color--night-darker: #05020E;
  --wp--preset--color--on-dark: #FFFDF7;
  --wp--preset--color--concierge-bg: #0F0A1F;
  --wp--preset--color--concierge-card: #1A1230;

  /* --- 1b. houston-only slugs -> semantic afterdark mapping (spec table) --- */
  --wp--preset--color--paper: #0C0820;
  --wp--preset--color--mist: #1A1440;
  --wp--preset--color--ocean: #FF3889;        /* brand primary -> old fuchsia */
  --wp--preset--color--ocean-dark: #C51864;
  --wp--preset--color--ocean-light: #2A0A1C;
  --wp--preset--color--ocean-deep: #1A1440;
  --wp--preset--color--lemon: #FFD43B;
  --wp--preset--color--orange: #FF7A33;
  --wp--preset--color--magenta: #FF52A0;      /* fuchsia-mid, distinct from ocean */
  --wp--preset--color--gray: #A89FC4;

  /* --- 1c. custom tokens: re-point the --dgd-* aliases (their
         --wp--custom--dgd--* sources are printed by theme.json and do not
         flip; values from dgd-afterdark custom.dgd) --- */
  --dgd-card-ring: 0 0 0 1px rgba(255, 253, 247, 0.10);
  --dgd-on-dark-soft: rgba(255, 253, 247, 0.85);
  --dgd-on-dark-muted: rgba(255, 253, 247, 0.55);
  --dgd-on-dark-border: rgba(255, 253, 247, 0.18);
  --dgd-on-fuchsia: #FFFDF7;
  --dgd-on-violet: #FFFDF7;
  --dgd-on-cyan: #0F0B23;      /* white on #00C8E6 fails contrast; afterdark used night */
  --dgd-on-buttercup: #0F0B23;
  --dgd-on-mint: #0F0B23;
  --dgd-on-tangerine: #0F0B23;
  --dgd-ink-rgb: 244, 238, 224;   /* text-derived alphas follow the light text */
  --dgd-midnight-rgb: 12, 8, 32;  /* page-bg-derived scrims match #0C0820 */
  --dgd-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
  --dgd-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --dgd-shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.55);

  /* --- 1d. gradients -> afterdark (verbatim from dgd-afterdark/theme.json);
         every pattern inline-style references these vars, so this flips the
         experience tabs, trending, bars/hotels grids, and directory
         fallbacks automatically --- */
  --wp--preset--gradient--sunrise-strip: linear-gradient(105deg, #FF1F7A 0%, #FF7A33 45%, #FFD43B 100%);
  --wp--preset--gradient--pride-rainbow: linear-gradient(90deg, #FF1F7A 0%, #FF7A33 22%, #FFD43B 44%, #3DF5C9 66%, #00C8E6 84%, #6B33FF 100%);
  --wp--preset--gradient--dusk-veil: linear-gradient(180deg, rgba(15, 11, 35, 0) 0%, rgba(15, 11, 35, 0.85) 100%);
  --wp--preset--gradient--neon-wash: linear-gradient(135deg, #FF1F7A 0%, #6B33FF 100%);
  --wp--preset--gradient--mint-cyan: linear-gradient(135deg, #3DF5C9 0%, #00C8E6 100%);
  --wp--preset--gradient--cinema-veil: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(12, 8, 32, 0.05) 30%, rgba(12, 8, 32, 0.85) 100%), linear-gradient(90deg, rgba(255, 56, 137, 0.18), transparent 35%, rgba(0, 200, 230, 0.18));
  --wp--preset--gradient--reel-tint: radial-gradient(ellipse 70% 50% at 20% 100%, rgba(255, 56, 137, 0.22), transparent 60%), radial-gradient(ellipse 60% 50% at 90% 0%, rgba(0, 200, 230, 0.18), transparent 60%);
}

/* =========================================================================
   2. COMPONENT OVERRIDES — hardcoded literals that assume a light page
   (full audit 2026-07-01; grouped by source file).
   ====================================================================== */

/* --- header.css --- */
html[data-dgd-mode="dark"] .dgd-site-header,
html[data-dgd-mode="dark"] .dgd-main { background: var(--dgd-midnight); }
/* the front page floats a TRANSPARENT header over the hero until scroll;
   the rule above ties its (0,2,1) specificity and would win by source order */
html[data-dgd-mode="dark"] body.dgd-overlay-header .dgd-site-header:not(.is-scrolled) { background: transparent; }
html[data-dgd-mode="dark"] .dgd-mega,
html[data-dgd-mode="dark"] .dgd-drawer__panel,
html[data-dgd-mode="dark"] .dgd-search-overlay__panel { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] .dgd-drawer__search-input,
html[data-dgd-mode="dark"] .dgd-search-overlay__input { background: var(--dgd-midnight); }
html[data-dgd-mode="dark"] body.dgd-overlay-header .dgd-site-header:not(.is-scrolled) .dgd-cta-pill:hover {
  background: var(--dgd-on-dark);
  color: var(--dgd-midnight);
}

/* --- houston.css --- */
html[data-dgd-mode="dark"] .htx-featured,
html[data-dgd-mode="dark"] .htx-events,
html[data-dgd-mode="dark"] .htx-articles,
html[data-dgd-mode="dark"] .htx-cta-cards { background: var(--dgd-midnight); }
html[data-dgd-mode="dark"] .htx-articles .wp-block-post { background: var(--dgd-bone); }
/* the trending band itself is ocean-deep -> #1A1440; bone would melt into it */
html[data-dgd-mode="dark"] .htx-trending__feature {
  background: var(--dgd-midnight);
  box-shadow: var(--dgd-card-ring), var(--dgd-shadow-card);
}
/* :where() keeps this at (0,1,1) so the source :focus-visible border swap
   (0,2,0) still wins — the input's only focus indicator */
html[data-dgd-mode="dark"] :where(.htx-guide-capture__input) {
  background: var(--dgd-bone);
  border-color: var(--dgd-border);
}
html[data-dgd-mode="dark"] .htx-btn--ghost:hover {
  background: var(--dgd-on-dark);
  color: var(--dgd-midnight);
}
/* wave dividers: CSS fill beats the SVG presentation attribute (theme memory) */
html[data-dgd-mode="dark"] .htx-band > .dgd-wave path,
html[data-dgd-mode="dark"] .dgd-experience > .dgd-wave path { fill: var(--dgd-midnight); }
/* the band's BOTTOM wave must match the experience band below it (ocean-light
   -> #2A0A1C), not the page bg — higher specificity than the blanket above */
html[data-dgd-mode="dark"] .htx-band > .dgd-wave:last-of-type path { fill: var(--dgd-ocean-light); }
/* blue glow/tint assumed light-mode ocean; re-derive from dark ocean #FF3889 / #C51864 */
html[data-dgd-mode="dark"] .htx-btn--ocean { box-shadow: 0 6px 18px rgba(255, 56, 137, 0.25); }
html[data-dgd-mode="dark"] .htx-feat-card:hover::after {
  background: linear-gradient(180deg, rgba(255, 56, 137, 0.25) 0%, rgba(0, 23, 31, 0.5) 45%, rgba(0, 23, 31, 0.94) 100%);
}

/* --- components.css --- */
html[data-dgd-mode="dark"] .dgd-card,
html[data-dgd-mode="dark"] .dgd-card--event,
html[data-dgd-mode="dark"] .dgd-card--directory,
html[data-dgd-mode="dark"] .dgd-card--news,
html[data-dgd-mode="dark"] .wp-block-group.is-style-dgd-ad-card,
html[data-dgd-mode="dark"] .wp-block-group.is-style-htx-card { background: var(--dgd-bone); }
/* :where() = (0,1,1): wins the base rule, loses to the :hover fill (0,2,0) */
html[data-dgd-mode="dark"] :where(.dgd-tabcar__nav) { background: var(--dgd-bone); }
/* toast + coach-tip use background: var(--dgd-ink) + white text; ink flips
   LIGHT in dark mode so white text would vanish — pin the pill dark */
html[data-dgd-mode="dark"] .dgd-toast,
html[data-dgd-mode="dark"] .dgd-coach-tip {
  background: var(--dgd-bone);
  color: var(--dgd-on-dark);
}
html[data-dgd-mode="dark"] .dgd-badge--cancelled,
html[data-dgd-mode="dark"] .dgd-badge--sold-out {
  background: var(--dgd-blush);
  color: var(--wp--preset--color--coral, #FF5A4E); /* danger red is invisible on the dark blush chip */
}
/* neon button glow re-derived from dark ocean #FF3889 / ocean-dark #C51864 */
html[data-dgd-mode="dark"] .wp-block-button.is-style-dgd-ad-neon .wp-block-button__link,
html[data-dgd-mode="dark"] .wp-block-button.is-style-htx-primary .wp-block-button__link { box-shadow: 0 6px 18px rgba(255, 56, 137, 0.30); }
html[data-dgd-mode="dark"] .wp-block-button.is-style-dgd-ad-neon .wp-block-button__link:hover,
html[data-dgd-mode="dark"] .wp-block-button.is-style-htx-primary .wp-block-button__link:hover { box-shadow: 0 12px 26px rgba(197, 24, 100, 0.38); }

/* --- houston.css (home hero) --- */
/* The hero is always-dark in both modes; DGD Night just deepens the scrim so
   the ambient slideshow/video sits further back behind the copy. */
html[data-dgd-mode="dark"] .htx-hero__scrim {
  background:
    linear-gradient(180deg, rgba(0, 23, 31, 0.72) 0%, rgba(0, 23, 31, 0.3) 15%, transparent 30%),
    linear-gradient(180deg, rgba(0, 23, 31, 0.25) 0%, rgba(0, 23, 31, 0.5) 45%, rgba(0, 23, 31, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 23, 31, 0.65) 0%, transparent 60%);
}

/* --- content.css --- */
html[data-dgd-mode="dark"] .htx-event-detail { background: var(--dgd-bone); }
/* :where() so the .is-active / [aria-pressed] / [aria-current] fills survive */
html[data-dgd-mode="dark"] :where(.dgd-directory__pill) { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] .htx-grid-section { background: var(--dgd-midnight); }
/* section-divider rainbow is hardcoded with light-mode brand hexes ON ::before
   (::after carries the reel-tint, which flips via its gradient token); swap
   just the rainbow layer for the afterdark pride-rainbow preset */
html[data-dgd-mode="dark"] .htx-page-hero::before {
  background:
    var(--wp--preset--gradient--pride-rainbow) left bottom / 100% 3px no-repeat,
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 22px 22px;
}

/* --- events.css (the dead .htx-event-cal block is intentionally skipped) --- */
html[data-dgd-mode="dark"] .htx-addcal__menu,
html[data-dgd-mode="dark"] .htx-daterange input[type="date"],
html[data-dgd-mode="dark"] .htx-datepicker { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] :where(.htx-evscope__btn) { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] .htx-event-map { background: var(--dgd-midnight); }

/* --- restaurants.css --- */
html[data-dgd-mode="dark"] .htx-listing-info,
html[data-dgd-mode="dark"] .htx-listing-info__social { background: var(--dgd-midnight); }
html[data-dgd-mode="dark"] .htx-facet__search input { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] :where(.htx-dir-main__view) { background: var(--dgd-bone); }
/* active sort pill: ocean-light/ocean-dark flip to blush/#C51864 — too dim.
   Keep the blush chip, lift the text to fuchsia-mid for contrast. */
html[data-dgd-mode="dark"] .htx-dir-main__sortlink.is-active { color: var(--wp--preset--color--fuchsia-mid, #FF52A0); }

/* --- blog.css --- */
html[data-dgd-mode="dark"] .htx-mag__lead { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] :where(.htx-mag-filter__pill, .htx-post-share__btn, .htx-post-share__copy) { background: var(--dgd-bone); }
html[data-dgd-mode="dark"] .htx-article-hero { background: var(--dgd-midnight); }

/* =========================================================================
   2b. REVIEW FIXES — dark-scope text pinning (adversarial review 2026-07-01)
   ====================================================================== */

/* Lemon/orange surfaces keep DARK text: their light-mode `color: var(--dgd-ink)`
   flips to #F4EEE0 in dark mode (~1.2:1 on #FFD43B). Every selector below
   pairs a lemon (or orange-hover) background with ink text in the source. */
html[data-dgd-mode="dark"] .htx-btn--lemon,
html[data-dgd-mode="dark"] .htx-feat-card__arrow,
html[data-dgd-mode="dark"] .htx-social__icons a,
html[data-dgd-mode="dark"] .dgd-card--event .dgd-card__date,
html[data-dgd-mode="dark"] .dgd-directory__card-datebadge,
html[data-dgd-mode="dark"] .dgd-badge--featured,
html[data-dgd-mode="dark"] .dgd-star-btn[aria-pressed="true"],
html[data-dgd-mode="dark"] .dgd-directory__card .dgd-star-btn[aria-pressed="true"],
html[data-dgd-mode="dark"] .dgd-trip-chip__count,
html[data-dgd-mode="dark"] .dgd-toast__action,
html[data-dgd-mode="dark"] .dgd-util__trip-count,
html[data-dgd-mode="dark"] .dgd-footer__guide-cta,
html[data-dgd-mode="dark"] .dgd-footer__socials a:hover,
html[data-dgd-mode="dark"] .htx-event-list__date,
html[data-dgd-mode="dark"] .htx-event-hero__type,
html[data-dgd-mode="dark"] .htx-event-hero__save[aria-pressed="true"],
html[data-dgd-mode="dark"] .dgd-directory__card-ribbon,
html[data-dgd-mode="dark"] .htx-listing-list__featured,
html[data-dgd-mode="dark"] .htx-listing-hero__type,
html[data-dgd-mode="dark"] .htx-listing-hero__save[aria-pressed="true"],
html[data-dgd-mode="dark"] .htx-mag__lead-tag { color: var(--dgd-on-buttercup); }
/* source rule carries !important on color */
html[data-dgd-mode="dark"] .wp-block-button.is-style-htx-lemon .wp-block-button__link { color: var(--dgd-on-buttercup) !important; }

/* ocean-dark text on ocean-light chips resolves #C51864-on-#2A0A1C (~3.2:1);
   lift to fuchsia-mid like the sortlink fix. :where() on the stateful ones so
   their hover/pressed colors still win. */
html[data-dgd-mode="dark"] .dgd-badge:not(.dgd-badge--featured):not(.dgd-badge--cancelled):not(.dgd-badge--sold-out),
html[data-dgd-mode="dark"] .htx-event-list__type,
html[data-dgd-mode="dark"] .htx-listing-list__type,
html[data-dgd-mode="dark"] .htx-listing-info__tag,
html[data-dgd-mode="dark"] .htx-dir-chip,
html[data-dgd-mode="dark"] .dgd-directory__card-nav,
html[data-dgd-mode="dark"] .htx-author-bio__eyebrow { color: var(--wp--preset--color--fuchsia-mid, #FF52A0); }
html[data-dgd-mode="dark"] :where(.dgd-star-btn, .dgd-search-overlay__close) { color: var(--wp--preset--color--fuchsia-mid, #FF52A0); }

/* =========================================================================
   3. MODE TOGGLE — icon visibility per mode (markup ships both SVGs).
   Default (light mode): show the moon ("switch to dark").
   ====================================================================== */
.dgd-mode-toggle__sun { display: none; }
html[data-dgd-mode="dark"] .dgd-mode-toggle__sun { display: inline-block; }
html[data-dgd-mode="dark"] .dgd-mode-toggle__moon { display: none; }