/* ─── Fonts ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

body, * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ─── DaisyUI 4 theme override ───────────────────────────────────────────── */
/* DaisyUI v4 uses short variable names: --p --s --a --n --b1 etc.           */
/* Values are oklch L% C H components WITHOUT the oklch() wrapper.           */
/* Our custom.css loads AFTER DaisyUI CDN so :root here wins the cascade.    */

:root,
[data-theme="latarnia"] {
  color-scheme: light;

  /* Primary: warm terracotta/brick — old Warsaw, aged ceramic */
  --p:  48% 0.13 30;
  --pc: 96% 0.005 30;

  /* Secondary: deep warm ink — aged leather, not navy, not army */
  --s:  18% 0.025 50;
  --sc: 90% 0.008 50;

  /* Accent: antique brass/gold */
  --a:  68% 0.12 78;
  --ac: 20%  0.04 78;

  /* Neutral */
  --n:  28% 0.02 50;
  --nc: 90% 0.01 50;

  /* Backgrounds: aged paper / warm cream */
  --b1: 96%  0.008 85;
  --b2: 91%  0.008 85;
  --b3: 85%  0.008 85;
  --bc: 20%  0.02  50;

  /* Semantic */
  --in:  68% 0.17 230;
  --inc: 98% 0 0;
  --su:  62% 0.17 155;
  --suc: 98% 0 0;
  --wa:  78% 0.17 78;
  --wac: 20% 0.04 78;
  --er:  56% 0.20 22;
  --erc: 98% 0 0;

  /* Border radius */
  --rounded-box:  0.5rem;
  --rounded-btn:  0.375rem;
  --rounded-badge: 1rem;
}

/* ─── Alpine x-cloak ─────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Map ────────────────────────────────────────────────────────────────── */
#map {
  height: calc(100vh - 4rem);
  width: 100%;
}

#upload-map {
  height: 280px;
  width: 100%;
  border-radius: 0.5rem;
  z-index: 0;
}


/* ─── Photo masonry grid ─────────────────────────────────────────────────── */
.photo-grid {
  columns: 2;
  column-gap: 0.75rem;
}

@media (min-width: 768px)  { .photo-grid { columns: 3; } }
@media (min-width: 1280px) { .photo-grid { columns: 4; } }

.photo-grid-item {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

/* ─── Hero gradient ──────────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(150deg, oklch(18% 0.025 50) 0%, oklch(13% 0.015 50) 100%);
}

/* ─── Navbar brand ───────────────────────────────────────────────────────── */
.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Flash fade ─────────────────────────────────────────────────────────── */
.flash-success {
  animation: fadeOut 4s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

/* ─── Photo metadata table ───────────────────────────────────────────────── */
.lk-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.5;
}
.lk-meta-table td {
  padding: 0.42rem 0;
  border-bottom: 1px solid oklch(87% 0.008 85);
  vertical-align: middle;
}
.lk-meta-table tr:last-child td {
  border-bottom: none;
}
.lk-meta-table td:first-child {
  width: 8.5rem;
  color: oklch(54% 0.015 50);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.lk-meta-table td:last-child {
  color: oklch(24% 0.025 50);
}

/* ─── Terms page ─────────────────────────────────────────────────────────── */
.terms-body {
  max-width: 680px;
  margin: 0 auto;
  color: oklch(18% 0.02 264);
  line-height: 1.75;
}

.terms-body h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: oklch(18% 0.02 264);
}

.terms-body h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: oklch(18% 0.02 264);
  border-bottom: 1px solid oklch(87% 0.003 90);
  padding-bottom: 0.35rem;
}

.terms-body p {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.terms-body a {
  color: oklch(40% 0.20 22);
  text-decoration: underline;
  text-decoration-color: oklch(70% 0.12 22);
  text-underline-offset: 2px;
}

.terms-body hr {
  border: none;
  border-top: 1px solid oklch(87% 0.003 90);
  margin: 2rem 0;
}

.terms-body .meta {
  font-size: 0.8125rem;
  color: oklch(55% 0.01 264);
}