@import "tailwindcss";
@import "mapbox-gl/dist/mapbox-gl.css";

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v336/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOem.ttf")
    format("truetype");
}

@font-face {
  font-family: "Material Symbols Outlined Filled";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v354/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOem.ttf")
    format("truetype");
}

:root {
  color-scheme: light;
  --background: #fbfaf7;
  --foreground: #282523;
  --paper: #fffefb;
  --muted: #66645f;
  --line: #d9d4c9;
  --site-accent-light: #e86f00;
  --site-accent-dark: #ff8a1f;
  --accent: var(--site-accent-light);
  --success: #16803a;
  --map-halo: #fbfaf7;
  --placeholder: #e7ded1;
  --dialog-backdrop: rgb(40 37 35 / 0.6);
  --font-copy: kepler-std, Georgia, serif;
  --font-display: kepler-std-display, kepler-std, Georgia, serif;
  --font-small: pacaembu-light, Arial, sans-serif;
  --radius-control: 0.35rem;
  --radius-badge: 0.25rem;
  --radius-panel: 0.7rem;
  --radius-large-panel: 0.9rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #14120f;
  --foreground: #fff8ef;
  --paper: #211c17;
  --muted: #b8afa3;
  --line: #453b32;
  --accent: var(--site-accent-dark);
  --success: #5fd484;
  --map-halo: #14120f;
  --placeholder: #322b24;
  --dialog-backdrop: rgb(0 0 0 / 0.72);
}

@media (prefers-color-scheme: dark) {
  :root[data-color-mode="system"] {
    color-scheme: dark;
    --background: #14120f;
    --foreground: #fff8ef;
    --paper: #211c17;
    --muted: #b8afa3;
    --line: #453b32;
    --accent: var(--site-accent-dark);
    --success: #5fd484;
    --map-halo: #14120f;
    --placeholder: #322b24;
    --dialog-backdrop: rgb(0 0 0 / 0.72);
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-paper: var(--paper);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --font-sans: var(--font-copy);
  --font-serif: var(--font-display);
  --font-mono: var(--font-small);
}

body {
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-copy);
}

.theme-logo {
  display: inline-grid;
  line-height: 0;
  vertical-align: middle;
}

.theme-logo-image {
  display: block;
  grid-area: 1 / 1;
}

.theme-logo-dark {
  display: none;
}

:root[data-theme="dark"] .theme-logo-light {
  display: none;
}

:root[data-theme="dark"] .theme-logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root[data-color-mode="system"] .theme-logo-light {
    display: none;
  }

  :root[data-color-mode="system"] .theme-logo-dark {
    display: block;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-serif {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-synthesis-weight: none;
}

small,
figcaption,
caption,
label,
input,
button,
nav,
dt,
.font-mono,
.text-xs,
.text-sm {
  font-family: var(--font-small);
}

.font-copy {
  font-family: var(--font-copy);
}

@media (min-width: 1024px) {
  .detail-media-row {
    position: relative;
    left: 50%;
    width: min(calc(100vw - 2rem), 72rem);
    transform: translateX(-50%);
  }
}

.material-symbols-outlined {
  display: inline-block;
  direction: ltr;
  font-family: "Material Symbols Outlined" !important;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

.material-symbols-filled {
  font-family: "Material Symbols Outlined Filled" !important;
}

a {
  text-underline-offset: 0.18em;
}

button,
summary,
[role="button"],
[role="tab"],
[role="menuitem"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
select,
label[for] {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"],
input:disabled {
  cursor: not-allowed;
}

button[class~="border"]:not([class*="rounded"]),
a[class~="border"]:not([class*="rounded"]),
summary[class~="border"]:not([class*="rounded"]),
label[class~="border"]:not([class*="rounded"]),
[role="button"][class~="border"]:not([class*="rounded"]),
[role="tab"][class~="border"]:not([class*="rounded"]),
[role="menuitem"][class~="border"]:not([class*="rounded"]),
input[class~="border"]:not([type="checkbox"]):not([type="radio"]):not([class*="rounded"]),
select[class~="border"]:not([class*="rounded"]),
textarea[class~="border"]:not([class*="rounded"]) {
  border-radius: var(--radius-control);
}

article[class~="border"]:not([class*="rounded"]),
aside[class~="border"]:not([class*="rounded"]),
details[class~="border"]:not([class*="rounded"]),
dialog[class~="border"]:not([class*="rounded"]),
figure[class~="border"]:not([class*="rounded"]),
form[class~="border"]:not([class*="rounded"]) {
  border-radius: var(--radius-panel);
}

div[class~="border"][class*="bg-"]:not([class*="rounded"]):not([class~="w-dvw"]),
section[class~="border"][class*="bg-"]:not([class*="rounded"]):not([class~="w-dvw"]),
li[class~="border"][class*="bg-"]:not([class*="rounded"]),
ul[class~="border"][class*="bg-"]:not([class*="rounded"]),
ol[class~="border"][class*="bg-"]:not([class*="rounded"]),
header[class~="border"][class*="bg-"]:not([class*="rounded"]),
main[class~="border"][class*="bg-"]:not([class*="rounded"]) {
  border-radius: var(--radius-panel);
}

div[class~="border"][class*="max-w-"]:not([class*="rounded"]),
section[class~="border"][class*="max-w-"]:not([class*="rounded"]),
article[class~="border"][class*="max-w-"]:not([class*="rounded"]) {
  border-radius: var(--radius-large-panel);
}

div[class*="aspect-"][class~="border"]:not([class*="rounded"]),
span[class*="aspect-"][class~="border"]:not([class*="rounded"]),
figure[class~="border"]:not([class*="rounded"]):not(.lexxy-story-image),
picture[class~="border"]:not([class*="rounded"]) {
  overflow: hidden;
}

a[class~="border"][class*="bg-"]:not([class*="rounded"]):has(img),
article[class~="border"][class*="bg-"]:not([class*="rounded"]):has(img),
div[class~="border"][class*="bg-"]:not([class*="rounded"]):not(.lexxy-editor-surface):has(img),
section[class~="border"][class*="bg-"]:not([class*="rounded"]):has(img),
li[class~="border"][class*="bg-"]:not([class*="rounded"]):has(img) {
  overflow: hidden;
}

img[class~="border"]:not([class*="rounded"]),
video[class~="border"]:not([class*="rounded"]),
iframe[class~="border"]:not([class*="rounded"]) {
  border-radius: var(--radius-panel);
}

[role="dialog"] > div[class*="bg-"][class*="shadow-"]:not([class*="rounded"]),
[role="dialog"] > article[class*="bg-"][class*="shadow-"]:not([class*="rounded"]),
dialog[class*="bg-"]:not([class*="rounded"]) {
  border-color: var(--line);
  border-radius: var(--radius-large-panel);
  overflow: hidden;
}

[role="dialog"][class*="fixed"][class*="inset-0"] {
  background-color: var(--dialog-backdrop) !important;
}

dialog::backdrop {
  background-color: var(--dialog-backdrop) !important;
  backdrop-filter: blur(4px);
}

span[class~="inline-flex"][class*="bg-"]:not([class*="rounded"]),
span[class~="inline-block"][class*="bg-"]:not([class*="rounded"]),
span[class~="inline-grid"][class*="bg-"]:not([class*="rounded"]),
span[class~="border"][class*="bg-"]:not([class*="rounded"]),
span[class*="bg-"][class*="px-"]:not([class*="rounded"]),
p[class~="inline-flex"][class*="bg-"]:not([class*="rounded"]),
div[class~="inline-flex"][class*="bg-"]:not([class*="rounded"]) {
  border-radius: var(--radius-badge);
}

[role="tab"]:not([class*="rounded"]) {
  border-radius: var(--radius-control);
}

#dashboard-tab-deals:checked ~ .dashboard-tabs label[for="dashboard-tab-deals"],
#dashboard-tab-leads:checked ~ .dashboard-tabs label[for="dashboard-tab-leads"] {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--background);
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--foreground);
}

:root[data-theme="dark"] .bg-\[\#f7f2ea\],
:root[data-theme="dark"] .bg-\[\#f5f3ee\],
:root[data-theme="dark"] .bg-\[\#fbfaf7\],
:root[data-theme="dark"] .bg-\[\#f8f4ec\],
:root[data-theme="dark"] .bg-\[\#d8d1c4\],
:root[data-theme="dark"] .bg-\[\#d9e9e5\],
:root[data-theme="dark"] .bg-\[\#dce7df\],
:root[data-theme="dark"] .bg-\[\#e8e1d5\] {
  background-color: var(--background);
}

:root[data-theme="dark"] .bg-\[\#fffefb\],
:root[data-theme="dark"] .bg-\[\#f3f3f3\] {
  background-color: var(--paper);
}

:root[data-theme="dark"] .bg-\[\#e7ded1\],
:root[data-theme="dark"] .bg-\[\#fff4d8\],
:root[data-theme="dark"] .bg-\[\#fff5cf\] {
  background-color: var(--placeholder);
}

:root[data-theme="dark"] .text-\[\#282523\],
:root[data-theme="dark"] .text-\[\#1c1c1e\],
:root[data-theme="dark"] .text-\[\#2d2720\] {
  color: var(--foreground);
}

:root[data-theme="dark"] .text-\[\#66645f\],
:root[data-theme="dark"] .text-\[\#4b4b50\],
:root[data-theme="dark"] .text-\[\#8e8e93\],
:root[data-theme="dark"] .text-\[\#5f574e\],
:root[data-theme="dark"] .text-\[\#5f4512\],
:root[data-theme="dark"] .text-\[\#7a5500\] {
  color: var(--muted);
}

:root[data-theme="dark"] .border-double.border-foreground {
  border-color: color-mix(in srgb, var(--foreground) 34%, transparent);
}

:root[data-theme="dark"] .border-double.border-line {
  border-color: color-mix(in srgb, var(--line) 58%, transparent);
}

:root[data-theme="dark"] .border-double.border-background {
  border-color: color-mix(in srgb, var(--background) 48%, transparent);
}

:root[data-theme="dark"] .border-b.border-foreground:not(.border-double),
:root[data-theme="dark"] .border-t.border-foreground:not(.border-double),
:root[data-theme="dark"] .border-y.border-foreground:not(.border-double) {
  border-color: color-mix(in srgb, var(--foreground) 68%, transparent);
}

:root[data-theme="dark"] .map-marker,
:root[data-theme="dark"] .map-marker > :is(button, div),
:root[data-theme="dark"] .map-marker .material-symbols-outlined {
  border-color: #fff8ef;
  color: #fff8ef;
}

.giveaway-rules-section h2,
.giveaway-rules-section h3 {
  font-family: var(--font-small) !important;
  font-style: normal;
  font-weight: 700;
  font-synthesis-weight: auto;
}

.giveaway-rules-content h2,
.giveaway-rules-content h3 {
  font-family: var(--font-small) !important;
  font-style: normal;
  font-weight: 700;
  font-synthesis-weight: auto;
}

.story-body figure {
  margin-top: 2rem;
  overflow: visible;
  border: 0;
  background: transparent;
}

.story-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
}

.story-body figure iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
}

.story-body figure.story-instagram {
  max-width: min(100%, 430px);
  margin-right: auto;
  margin-left: auto;
}

.story-body figure.story-instagram iframe {
  aspect-ratio: 9 / 16 !important;
}

.story-body figure.story-instagram .instagram-media {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.story-body figure figcaption {
  padding: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.45;
}

.story-end-dot {
  display: inline-block;
  width: 0.56em;
  height: 0.56em;
  margin-left: 0.38em;
  border-radius: 9999px;
  background: var(--accent);
  vertical-align: baseline;
  transform: translateY(-0.07em);
}

.mapboxgl-popup-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
  color: var(--foreground);
  box-shadow: 0 12px 28px rgba(40, 37, 35, 0.14);
  padding: 0;
  overflow: hidden;
}

.mapboxgl-popup-tip {
  display: none;
}

.walkable-downtown-map .mapboxgl-popup {
  z-index: 40;
}

.explore-map-expanded .mapboxgl-ctrl-top-right {
  right: 0.75rem;
  top: 0.75rem;
}

.explore-map-expanded .mapboxgl-ctrl-bottom-left,
.explore-map-expanded .mapboxgl-ctrl-bottom-right {
  display: none !important;
}

.spot-of-day-map .mapboxgl-marker {
  pointer-events: none;
}

.spot-of-day-map .mapboxgl-popup {
  pointer-events: none;
}

.spot-of-day-map .mapboxgl-popup-content {
  pointer-events: auto;
}

.spot-of-day-map .mapboxgl-ctrl-bottom-right {
  display: none !important;
}

.map-popup {
  max-width: 15rem;
  padding: 0.8rem;
  background: var(--paper);
  color: var(--foreground);
}

.map-popup-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  object-fit: cover;
}

.map-popup-eyebrow {
  color: var(--accent);
  font-family: var(--font-small);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.map-popup-title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.05;
}

.map-popup-description {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.map-popup-link {
  display: inline-flex;
  margin-top: 0.65rem;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-small);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Shared admin theme tokens. Component and layout styling lives in Tailwind classes. */
.admin-shell,
.admin-login-shell {
  --background: #f6f7f9;
  --foreground: #1d2430;
  --paper: #ffffff;
  --muted: #667085;
  --line: #dfe3e8;
  --accent: #2f6f84;
  --accent-contrast: #ffffff;
  --success: #0b815a;
  --placeholder: #e9ecf1;
  --dialog-backdrop: rgb(15 23 42 / 0.52);
  --radius-control: 0.45rem;
  --radius-badge: 999px;
  --radius-panel: 0.65rem;
  --radius-large-panel: 0.8rem;
  --font-copy: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-copy);
  --font-small: var(--font-copy);
  --font-admin-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] :is(.admin-shell, .admin-login-shell) {
  --background: #111318;
  --foreground: #f3f4f6;
  --paper: #181b21;
  --muted: #9aa3b2;
  --line: #303640;
  --accent: #78b8c8;
  --accent-contrast: #111318;
  --success: #47c99a;
  --placeholder: #252a32;
  --dialog-backdrop: rgb(0 0 0 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root[data-color-mode="system"] :is(.admin-shell, .admin-login-shell) {
    --background: #111318;
    --foreground: #f3f4f6;
    --paper: #181b21;
    --muted: #9aa3b2;
    --line: #303640;
    --accent: #78b8c8;
    --accent-contrast: #111318;
    --success: #47c99a;
    --placeholder: #252a32;
    --dialog-backdrop: rgb(0 0 0 / 0.7);
  }
}

/* Remove legacy display typography throughout the admin without changing the rendered email preview. */
:is(.admin-shell, .admin-login-shell)
  [class~="uppercase"]:not(.email-preview-surface *) {
  letter-spacing: normal;
  text-transform: none;
}

/* Normalize legacy admin action weight while those components are migrated. */
:is(.admin-shell, .admin-login-shell)
  :is(button, summary, [role="button"], [role="menuitem"], a)[class*="uppercase"][class*="tracking-"]:not(
    .email-preview-surface *
  ),
.admin-login-shell label[class*="uppercase"][class*="tracking-"] {
  font-weight: 600;
}

/* Legacy inline tags should match the shared rounded badge treatment. */
.admin-shell
  :is(span, p)[class~="border"][class*="uppercase"]:not([class*="rounded"]):not(.email-preview-surface *) {
  border-radius: var(--radius-badge);
  font-weight: 600;
}