/*
 * End of the Line Studios — 064 interaction / contrast / hidden-admin pass
 * Brand authority: EOTLS guide.
 *
 * Contract:
 *   - light surfaces never use pale labels, controls, or button text;
 *   - intentional light buttons on dark surfaces retain dark copy;
 *   - purple controls always use white copy;
 *   - yellow controls always use black copy;
 *   - the full publisher masthead scrolls away;
 *   - JAZS / New Moreland property navigation remains genuinely sticky;
 *   - the public masthead uses the exact yellow brand lockup;
 *   - admin entry is footer-gesture only and has no public href.
 */

:root {
  --e064-ink: #111111;
  --e064-ink-soft: #343939;
  --e064-paper: #f1f5f5;
  --e064-white: #ffffff;
  --e064-purple: #7631a0;
  --e064-purple-hover: #642585;
  --e064-yellow: #e9c116;
  --e064-silver: #bdbdbd;
  --e064-control-border: #2d3232;
}

/* ============================================================
   STICKY HANDOFF REPAIR
   062 used overflow:clip on main/page-shell. That makes a descendant
   sticky property rail unreliable in Chromium/Firefox. Restore vertical
   overflow so the property rail can actually attach to the viewport.
   ============================================================ */
html {
  overflow-x: clip;
}

body.eotls-064,
body.eotls-064 .page-shell,
body.eotls-064 main {
  overflow: visible !important;
}

body.eotls-064 .e062-header,
body.eotls-064 .e062-nav.nav-wrap {
  position: relative !important;
  top: auto !important;
}

body.eotls-064 .e062-property-nav.e063-property-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  isolation: isolate;
}

body.eotls-064 .e062-property-nav.e063-property-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(241, 245, 245, 0.985);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}

/* Ensure the secondary rail is never hidden by reveal/animation rules. */
body.eotls-064 .e062-property-nav.e063-property-sticky,
body.eotls-064 .e062-property-nav.e063-property-sticky * {
  visibility: visible !important;
}

/* ============================================================
   HIGH-CONTRAST BRAND LOCKUP
   Exact yellow lockup supplied in the EOTLS brand guide.
   ============================================================ */
body.eotls-064 .e062-brand {
  width: clamp(158px, 15.5vw, 238px);
  height: 64px;
}

body.eotls-064 .e062-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   064 BUTTON / CONTROL CONTRAST CONTRACT
   A visual control must carry readable text against its own background,
   regardless of older inherited theme declarations.
   ============================================================ */
body.eotls-064 :is(.e062-btn, .btn, button, input[type="submit"], input[type="button"]) {
  text-shadow: none !important;
}

/* Brand purple = white copy. 7.7:1 against white copy. */
body.eotls-064 :is(
  .e062-btn-primary,
  .e062-btn-purple,
  .btn.primary,
  .btn--primary,
  button.primary,
  [data-checkout-submit],
  [data-preorder-add]
) {
  border-color: var(--e064-purple) !important;
  background: var(--e064-purple) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

body.eotls-064 :is(
  .e062-btn-primary,
  .e062-btn-purple,
  .btn.primary,
  .btn--primary,
  button.primary,
  [data-checkout-submit],
  [data-preorder-add]
):hover:not(:disabled) {
  border-color: var(--e064-purple-hover) !important;
  background: var(--e064-purple-hover) !important;
  color: #ffffff !important;
}

/* Light/off-white buttons always use black text. */
body.eotls-064 .e062-btn-light {
  border-color: var(--e064-paper) !important;
  background: var(--e064-paper) !important;
  color: #000000 !important;
  opacity: 1 !important;
}

body.eotls-064 .e062-btn-light:hover:not(:disabled) {
  border-color: var(--e064-yellow) !important;
  background: var(--e064-yellow) !important;
  color: #000000 !important;
}

/* Black buttons always use white text. */
body.eotls-064 .e062-btn-dark {
  border-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

body.eotls-064 .e062-btn-dark:hover:not(:disabled) {
  border-color: var(--e064-purple) !important;
  background: var(--e064-purple) !important;
  color: #ffffff !important;
}

/* Outline buttons are contextual: white on dark, dark on paper. */
body.eotls-064 :is(.e062-black, .e062-purple, .e062-video-band, .e062-property-hero, .e062-campaign-cta, .e062-home-hero, .e062-world-feature) .e062-btn-outline {
  border-color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
  color: #ffffff !important;
}

body.eotls-064 :is(.e062-black, .e062-purple, .e062-video-band, .e062-property-hero, .e062-campaign-cta, .e062-home-hero, .e062-world-feature) .e062-btn-outline:hover {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

body.eotls-064 :is(.e062-white, .e063-light-surface, .legal-copy, .e063-admin-main, .e062-shop-grid-section) .e062-btn-outline {
  border-color: #161919 !important;
  background: transparent !important;
  color: #161919 !important;
}

body.eotls-064 :is(.e062-white, .e063-light-surface, .legal-copy, .e063-admin-main, .e062-shop-grid-section) .e062-btn-outline:hover {
  border-color: #161919 !important;
  background: #161919 !important;
  color: #ffffff !important;
}

/* Legacy .btn.alt/.ghost controls on light transactional surfaces. */
body.eotls-064.e062-system main :is(.btn.alt, .btn--ghost),
body.eotls-064 .e062-white :is(.btn.alt, .btn--ghost),
body.eotls-064 .e062-form-shell :is(.btn.alt, .btn--ghost),
body.eotls-064 .e062-shop-grid-section :is(.btn.alt, .btn--ghost) {
  border: 2px solid var(--e064-control-border) !important;
  background: #ffffff !important;
  color: #151818 !important;
  opacity: 1 !important;
}

body.eotls-064.e062-system main :is(.btn.alt, .btn--ghost):hover:not(:disabled),
body.eotls-064 .e062-white :is(.btn.alt, .btn--ghost):hover:not(:disabled),
body.eotls-064 .e062-form-shell :is(.btn.alt, .btn--ghost):hover:not(:disabled),
body.eotls-064 .e062-shop-grid-section :is(.btn.alt, .btn--ghost):hover:not(:disabled) {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* The release signup card is intentionally dark even when nested in a light section. */
body.eotls-064 .release-signup-card :is(.btn.alt, .btn--ghost) {
  border-color: #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;
}

body.eotls-064 .release-signup-card :is(.btn.alt, .btn--ghost):hover:not(:disabled) {
  border-color: var(--e064-yellow) !important;
  background: var(--e064-yellow) !important;
  color: #000000 !important;
}

/* Filter and small utility controls on paper. */
body.eotls-064 .e062-shop-grid-section .merch-filters button,
body.eotls-064.e062-system main button:not(.nav-toggle):not(.product__img-button):not(.admin-sigil),
body.eotls-064 .e063-admin-main button:not(.nav-toggle):not(.product__img-button):not(.admin-sigil) {
  opacity: 1 !important;
}

body.eotls-064 .e062-shop-grid-section .merch-filters button {
  border-color: #222626 !important;
  background: #ffffff !important;
  color: #161919 !important;
}

body.eotls-064 .e062-shop-grid-section .merch-filters button:hover,
body.eotls-064 .e062-shop-grid-section .merch-filters button.is-active {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* Dynamic cart/account/admin controls frequently inherit older pale text. */
body.eotls-064.e062-system main :is(
  .cart-row,
  .cart-summary,
  .total-box,
  .account-head,
  .card,
  .admin-record,
  .stat-card,
  .danger-zone
) :is(button, .btn, a.btn) {
  text-shadow: none !important;
}

body.eotls-064.e062-system main :is(
  .cart-row,
  .cart-summary,
  .total-box,
  .account-head,
  .card
) button:not(.primary):not([data-checkout-submit]):not(.product__img-button) {
  border-color: #252929 !important;
  background: #ffffff !important;
  color: #151818 !important;
}

body.eotls-064.e062-system main :is(
  .cart-row,
  .cart-summary,
  .total-box,
  .account-head,
  .card
) button:not(.primary):not([data-checkout-submit]):not(.product__img-button):hover:not(:disabled) {
  background: #151818 !important;
  color: #ffffff !important;
}

/* Disabled controls remain readable rather than washing into the background. */
body.eotls-064 :is(button, .btn, .e062-btn, input[type="submit"]):disabled,
body.eotls-064 :is(button, .btn, .e062-btn)[aria-disabled="true"] {
  border-color: #858b8b !important;
  background: #d7dcdc !important;
  color: #4b5050 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Strong keyboard focus without changing hover coloration. */
body.eotls-064 :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--e064-yellow) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   FOOTER SECRET ADMIN ENTRY
   No href, no hover color, no pointer cursor, no URL preview.
   The icon is visually inert while remaining keyboard accessible.
   ============================================================ */
body.eotls-064 .e062-footer-bottom .admin-sigil {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.34) !important;
  font: inherit;
  line-height: inherit;
  opacity: 1 !important;
  cursor: default !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

body.eotls-064 .e062-footer-bottom .admin-sigil:hover,
body.eotls-064 .e062-footer-bottom .admin-sigil:active {
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.34) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.eotls-064 .e064-footer-join {
  color: rgba(255, 255, 255, 0.62) !important;
}

body.eotls-064 .e064-footer-join:hover {
  color: var(--e064-yellow) !important;
}

/* Never render legacy injected admin links in public navigation. */
body.eotls-064 [data-admin-only-nav],
body.eotls-064 .nav-links [data-admin-access],
body.eotls-064 .e062-nav .admin-sigil {
  display: none !important;
}

@media (max-width: 640px) {
  body.eotls-064 .e062-brand {
    width: 175px;
    height: 58px;
  }

  body.eotls-064 .e062-property-nav.e063-property-sticky {
    position: sticky !important;
    top: 0 !important;
  }
}