/* =========================================================================
   DISCOVER GAY DALLAS — HOUSTON EDITION · BASE
   Tokens, resets, typography defaults, shared utility classes.
   Every --dgd-* token aliases theme.json so a token tweak (or style-variation
   switch) cascades everywhere. Hardcoded fallbacks are bright/light so the
   editor preview iframe renders correctly before theme.json resolves.
   ========================================================================= */

:root {
  /* Bright, Visit-Houston-style palette. light scheme for form controls. */
  color-scheme: light;

  /* ---------- Deep "always dark" surfaces (footer, hero scrims) ---------- */
  --dgd-night:          var(--wp--preset--color--night,        #00171F);
  --dgd-night-deep:     var(--wp--preset--color--night-darker, #001016);
  --dgd-on-dark:        var(--wp--preset--color--on-dark,      #FFFFFF);
  --dgd-on-dark-soft:   var(--wp--custom--dgd--on-dark--soft,   rgba(255, 255, 255, 0.85));
  --dgd-on-dark-muted:  var(--wp--custom--dgd--on-dark--muted,  rgba(255, 255, 255, 0.60));
  --dgd-on-dark-border: var(--wp--custom--dgd--on-dark--border, rgba(255, 255, 255, 0.18));

  /* ---------- Surface + text ----------
     NOTE: slug "ivory" maps to #FFFFFF (page bg); "bone" to #F1F1F1 (mist).
     Names are historical — follow the value, not the slug. */
  --dgd-midnight:  var(--wp--preset--color--ivory,    #FFFFFF); /* page bg */
  --dgd-bone:      var(--wp--preset--color--bone,     #F1F1F1); /* alt / card bg */
  --dgd-ink:       var(--wp--preset--color--ink,      #00171F); /* body text */
  --dgd-ink-soft:  var(--wp--preset--color--ink-soft, #2A363B);
  --dgd-muted:     var(--wp--preset--color--muted,    #606D72);
  --dgd-border:    var(--wp--preset--color--border,   #E2E5E7);
  --dgd-card-ring: var(--wp--custom--dgd--card-ring,  0 0 0 1px rgba(0,23,31,0.08));

  /* Section washes */
  --dgd-blush:    var(--wp--preset--color--blush,    #EBF8FE);
  --dgd-sky-wash: var(--wp--preset--color--sky-wash, #EBF8FE);
  --dgd-sun-wash: var(--wp--preset--color--sun-wash, #FFF8E1);

  /* ---------- Brand accents ---------- */
  --dgd-ocean:         var(--wp--preset--color--ocean,         #007AC0);
  --dgd-ocean-dark:    var(--wp--preset--color--ocean-dark,    #005289);
  --dgd-ocean-light:   var(--wp--preset--color--ocean-light,   #EBF8FE);
  --dgd-ocean-deep:    var(--wp--preset--color--ocean-deep,    #003A5D);
  --dgd-lemon:         var(--wp--preset--color--lemon,         #FADA30);
  --dgd-orange:        var(--wp--preset--color--orange,        #FFB300);
  --dgd-magenta:       var(--wp--preset--color--magenta,       #EB52A1);
  /* Legacy accent aliases (used by copied dgd-core helpers/patterns) */
  --dgd-fuchsia:       var(--wp--preset--color--fuchsia,        #EB52A1);
  --dgd-cyan:          var(--wp--preset--color--cyan,           #007AC0);
  --dgd-buttercup:     var(--wp--preset--color--buttercup,      #FADA30);
  --dgd-violet:        var(--wp--preset--color--violet,         #005289);
  --dgd-violet-bright: var(--wp--preset--color--violet-bright,  #007AC0);
  --dgd-mint:          var(--wp--preset--color--mint,           #00A6CE);
  --dgd-tangerine:     var(--wp--preset--color--tangerine,      #FFB300);

  /* "On-accent" text tokens (meet WCAG AA on their accent background) */
  --dgd-on-fuchsia:   var(--wp--custom--dgd--on-accent--fuchsia,   #FFFFFF);
  --dgd-on-violet:    var(--wp--custom--dgd--on-accent--violet,    #FFFFFF);
  --dgd-on-cyan:      var(--wp--custom--dgd--on-accent--cyan,      #FFFFFF);
  --dgd-on-buttercup: var(--wp--custom--dgd--on-accent--buttercup, #00171F);
  --dgd-on-mint:      var(--wp--custom--dgd--on-accent--mint,      #00171F);
  --dgd-on-tangerine: var(--wp--custom--dgd--on-accent--tangerine, #00171F);

  /* Alpha-aware versions for rgba() math */
  --dgd-ink-rgb:      var(--wp--custom--dgd--rgb--ink,      0, 23, 31);
  --dgd-midnight-rgb: var(--wp--custom--dgd--rgb--midnight, 0, 23, 31);

  /* Square-ish radius scale (Houston shape language) */
  --dgd-radius-sm: var(--wp--custom--dgd--radius--sm, 2px);
  --dgd-radius-md: var(--wp--custom--dgd--radius--md, 3px);
  --dgd-radius-lg: var(--wp--custom--dgd--radius--lg, 4px);
  --dgd-radius-xl: var(--wp--custom--dgd--radius--xl, 6px);
  --dgd-radius-pill: var(--wp--custom--dgd--radius--pill, 999px);

  --dgd-shadow-soft: var(--wp--preset--shadow--soft, 0 1px 2px rgba(0,23,31,0.08));
  --dgd-shadow-card: var(--wp--preset--shadow--card, 0 4px 16px rgba(0,23,31,0.10));
  --dgd-shadow-lift: var(--wp--preset--shadow--lift, 0 16px 36px rgba(0,23,31,0.16));

  --dgd-gutter:  var(--wp--custom--dgd--gutter, clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem));
  --dgd-wide:    1320px;   /* layout.wideSize */
  --dgd-content: 760px;    /* layout.contentSize */

  --dgd-ease: var(--wp--custom--dgd--ease, cubic-bezier(0.2, 0.8, 0.2, 1));

  --dgd-pad-sm: var(--wp--custom--dgd--section--pad-sm, clamp(2.5rem, 5vw, 4rem));
  --dgd-pad-md: var(--wp--custom--dgd--section--pad-md, clamp(3rem, 6vw, 5.5rem));
  --dgd-pad-lg: var(--wp--custom--dgd--section--pad-lg, clamp(4rem, 8vw, 7rem));
}

/* ---------- Base typography ---------- */

body {
  background: var(--dgd-midnight);
  color: var(--dgd-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { overflow-x: clip; }

::selection { background: var(--dgd-ocean); color: #fff; }

h1, h2, h3, h4 {
  font-family: "Barlow", system-ui, "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--dgd-ink);
}

/* Script accent for <em> inside display headings (Houston "Find your scene") */
.dgd-serif-italic,
.dgd-script {
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Skip-to-content link ---------- */

.dgd-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1.5rem;
  background: var(--dgd-ocean);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--dgd-radius-sm);
  outline: 3px solid var(--dgd-lemon);
  outline-offset: 2px;
}
.dgd-skip-link:focus { top: 0.75rem; }

/* ---------- Eyebrow label ----------
   Canonical primitive: Barlow Condensed uppercase, ocean by default, with a
   28×2px rule prefix in currentColor. */

.is-style-dgd-ad-eyebrow,
.is-style-htx-eyebrow,
.dgd-eyebrow {
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dgd-ocean);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dgd-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.dgd-eyebrow--alt  { color: var(--dgd-magenta); }
.dgd-eyebrow--soft { color: var(--dgd-on-dark-soft); }
.dgd-eyebrow--ink  { color: var(--dgd-muted); }
.dgd-eyebrow--no-bar::before { display: none; }

/* ---------- Display-condensed treatment (travel-guide headings) ---------- */

.dgd-display {
  font-family: var(--wp--preset--font-family--display, "Barlow", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--dgd-ink);
}
.dgd-display .dgd-serif-italic,
.dgd-display em {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Outlined word-art (Houston "DALLAS" hero/social lettering) ----- */

.is-style-htx-wordart,
.dgd-wordart {
  font-family: var(--wp--preset--font-family--display, "Barlow", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  text-stroke: 2px currentColor;
}

/* ---------- Script accent heading (block style) ---------- */

.is-style-htx-script {
  font-family: "Kaushan Script", cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--dgd-ocean);
}

/* ---------- Watermark word (faint oversized type behind a section) ---------- */

.dgd-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-family: var(--wp--preset--font-family--display, "Barlow", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.8;
  font-size: clamp(5rem, 4rem + 16vw, 18rem);
  color: var(--dgd-watermark-color, var(--dgd-ocean));
  opacity: var(--dgd-watermark-opacity, 0.08);
  white-space: nowrap;
}

/* ---------- Wave section divider ----------
   Sizing for the decorative SVG emitted by dgd_render_wave_divider(). The SVG
   path is filled at render time with the *next* band's palette color. */

.dgd-wave {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  margin: 0;
}
.dgd-wave--flip { transform: scaleY(-1); }

/* ---------- Readable image surface primitive ---------- */

.dgd-surface-image { position: relative; isolation: isolate; color: var(--dgd-on-dark); }
.dgd-surface-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 23, 31, 0) 0%,
    rgba(0, 23, 31, 0.35) 40%,
    rgba(0, 23, 31, var(--dgd-scrim-floor, 0.78)) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.dgd-surface-image > * { position: relative; z-index: 1; }

/* ---------- Container + section utilities ---------- */

.dgd-wrap {
  max-width: var(--dgd-wide);
  margin-inline: auto;
  padding-inline: var(--dgd-gutter);
}
.dgd-section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.dgd-section--tight { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.dgd-bg-paper  { background: var(--dgd-midnight); }
.dgd-bg-mist   { background: var(--dgd-bone); }
.dgd-bg-blush  { background: var(--dgd-blush); }
.dgd-bg-sky    { background: var(--dgd-sky-wash); }
.dgd-bg-sun    { background: var(--dgd-sun-wash); }
.dgd-bg-ocean  { background: var(--dgd-ocean); color: #fff; }
.dgd-bg-ocean h1,.dgd-bg-ocean h2,.dgd-bg-ocean h3,.dgd-bg-ocean h4 { color: #fff; }

/* ---------- Focus ---------- */

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--dgd-ocean);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Scroll-reveal ----------
   Hidden pre-state added ONLY by JS (and only to bands below the fold) so
   no-JS visitors see everything, the first screen never flashes, and
   reduced-motion visitors are never touched. */
.dgd-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--dgd-ease),
    transform 0.7s var(--dgd-ease);
  will-change: opacity, transform;
}
.dgd-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dgd-reveal { opacity: 1; transform: none; transition: none; }
}

/* Offset in-page anchor jumps so they clear the fixed/sticky header
   (~112px = utility 40 + main 72; 72px once the utility bar hides on mobile). */
html { scroll-padding-top: 112px; }
@media (max-width: 860px) { html { scroll-padding-top: 72px; } }

/* ---------- Fluidity ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 300ms;
    animation-timing-function: var(--dgd-ease);
  }
  .dgd-site-header { view-transition-name: dgd-header; }
  .dgd-footer { view-transition-name: dgd-footer; }
}

/* ---------- Reduced-motion safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Collapse pattern wrappers that self-hide to zero element children. */
main .wp-block-group:not(:has(*)) { display: none; }

/* ---------- Print ---------- */
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #1a1a1a !important; font-size: 11pt; line-height: 1.5; }
  h1, h2, h3, h4 { color: #1a1a1a !important; }
  .dgd-site-header, .dgd-site-footer, .dgd-drawer, .dgd-mega, .dgd-search-overlay,
  .dgd-hero, .dgd-newsletter, .dgd-star-btn, .dgd-sticky-bar, .wp-block-button, nav { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; word-break: break-all; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  .dgd-directory__card, .dgd-card, .wp-block-group { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; color: #1a1a1a !important; }
  img { max-width: 100% !important; }
}