/* =============================================================================
   TRULLO CONOSOLO — Guest Guide
   Aesthetic: Apulian countryside. Sun-bleached cream, terracotta, olive,
   wine. Editorial travel-guide feel. Fraunces serif with DM Sans body.
   ========================================================================== */

:root {
  /* Palette */
  --cream:        #FAF6EE;
  --cream-soft:   #F2EBDC;
  --paper:        #FFFEFA;
  --ink:          #2A2820;
  --ink-soft:     #5A5448;
  --ink-faint:    #8C8576;

  --terracotta:   #C26B3D;
  --terracotta-d: #9F4F25;
  --olive:        #6B7B3F;
  --olive-d:      #4F5C2C;
  --wine:         #8B2E3F;
  --sky:          #5B7E8C;
  --ochre:        #D4A24C;

  --mauve:        #9B6B8A;
  --espresso:     #7A5C3E;

  /* Category accents */
  --c-food:        var(--terracotta);
  --c-drink:       var(--wine);
  --c-shops:       var(--olive);
  --c-experiences: var(--sky);
  --c-events:      var(--ochre);
  --c-foodshops:   var(--mauve);
  --c-cafes:       var(--espresso);

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Spacing & shapes */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-soft: 0 1px 2px rgba(42,40,32,0.04), 0 8px 24px rgba(42,40,32,0.06);
  --shadow-pop:  0 2px 4px rgba(42,40,32,0.06), 0 12px 32px rgba(42,40,32,0.10);

  /* Liquid glass */
  --glass-bg:        rgba(250, 246, 238, 0.62);
  --glass-bg-strong: rgba(255, 254, 250, 0.84);
  --glass-rim:       rgba(255, 255, 255, 0.55);
  --glass-inner:     0 1px 0 rgba(255,255,255,0.55) inset, 0 -1px 0 rgba(42,40,32,0.05) inset;
  --glass-blur:      blur(20px) saturate(1.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Warm background gradient — gives the glass surfaces something to refract */
  background-image:
    radial-gradient(ellipse at 18%  8%,  rgba(194, 107, 61, 0.14) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 92%,  rgba(107, 123, 63, 0.12) 0%, transparent 48%),
    radial-gradient(ellipse at 76% 12%,  rgba(91,  126, 140, 0.10) 0%, transparent 38%),
    radial-gradient(ellipse at 26% 88%,  rgba(139, 46,  63,  0.08) 0%, transparent 38%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------------------------------------------------------- Masthead */
.masthead {
  padding: 32px 22px 18px;
  max-width: 920px;
  margin: 0 auto;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}
.brand-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.brand-logo {
  margin: 0;
  display: block;
  max-width: 100%;
}
.brand-logo img {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
}

.instagram-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--glass-inner), var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.instagram-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-inner), var(--shadow-pop);
}
.instagram-logo {
  width: 48px;
  height: 48px;
  display: block;
  fill: currentColor;
}
.instagram-tile-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 540px;
  margin: 22px 0 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------- Filter bar */
.filter-bar {
  display: flex;
  gap: 8px;
  padding: 18px 22px 6px;
  max-width: 920px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--glass-rim);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner);
  color: var(--ink-soft);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.filter-pill:hover {
  background: rgba(242, 235, 220, 0.72);
  border-color: rgba(255, 255, 255, 0.70);
  color: var(--ink);
}
.filter-pill.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
.filter-pill.active .filter-dot { box-shadow: 0 0 0 2px var(--ink); }

.filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.filter-dot[data-cat="FOOD"]        { background: var(--c-food); }
.filter-dot[data-cat="DRINK"]       { background: var(--c-drink); }
.filter-dot[data-cat="SHOPS"]       { background: var(--c-shops); }
.filter-dot[data-cat="EXPERIENCES"] { background: var(--c-experiences); }
.filter-dot[data-cat="EVENTS"]      { background: var(--c-events); }
.filter-dot[data-cat="FOODSHOPS"]   { background: var(--c-foodshops); }
.filter-dot[data-cat="CAFES"]       { background: var(--c-cafes); }

/* ---------------------------------------------------------- Map */
.map-section {
  padding: 14px 22px 0;
  max-width: 920px;
  margin: 0 auto;
}
#map {
  width: 100%;
  height: 360px;
  border-radius: var(--r-lg);
  border: 1px solid var(--cream-soft);
  box-shadow: var(--shadow-soft);
  background: var(--cream-soft);
  z-index: 0;
}
#map.map-unavailable {
  height: auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.map-fallback {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  font-size: 14px;
}

/* Custom Leaflet popup styling */
.leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), var(--shadow-pop);
  border: 1px solid var(--glass-rim);
  padding: 4px 6px;
}
.leaflet-popup-content {
  font-family: var(--sans);
  margin: 12px 14px;
  color: var(--ink);
  line-height: 1.45;
  font-size: 14px;
}
.leaflet-popup-tip { background: rgba(255, 254, 250, 0.84); }
.popup-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.popup-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
  color: var(--ink);
}
.popup-note {
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.popup-action {
  display: inline-block;
  background: var(--terracotta);
  color: var(--cream);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  letter-spacing: 0.02em;
  transition: background 0.15s ease;
}
/* Override Leaflet's link color which has higher specificity */
.leaflet-popup-content .popup-action { color: var(--cream); }
.popup-action:hover { background: var(--terracotta-d); }
.popup-see-more {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.leaflet-popup-content .popup-see-more { color: var(--terracotta); }
.popup-see-more:hover { text-decoration: underline; }

/* B&B home marker badge */
.home-marker {
  width: 38px; height: 38px;
  background: var(--terracotta);
  border: 3px solid var(--cream);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
}
.home-marker svg { transform: rotate(45deg); width: 18px; height: 18px; color: var(--cream); }

.poi-marker {
  width: 28px; height: 28px;
  border: 2.5px solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(42,40,32,0.25);
}
.poi-marker[data-cat="FOOD"]        { background: var(--c-food); }
.poi-marker[data-cat="DRINK"]       { background: var(--c-drink); }
.poi-marker[data-cat="SHOPS"]       { background: var(--c-shops); }
.poi-marker[data-cat="EXPERIENCES"] { background: var(--c-experiences); }
.poi-marker[data-cat="EVENTS"]      { background: var(--c-events); }
.poi-marker[data-cat="FOODSHOPS"]   { background: var(--c-foodshops); }
.poi-marker[data-cat="CAFES"]       { background: var(--c-cafes); }

/* ---------------------------------------------------------- Cluster markers */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(194, 107, 61, 0.18);  /* terracotta halo */
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: rgba(159, 79, 37, 0.88);   /* terracotta-d, solid enough to read */
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
}
.marker-cluster span {
  line-height: 30px;
}

/* ---------------------------------------------------------- POI list */
.poi-section {
  padding: 28px 22px 40px;
  max-width: 920px;
  margin: 0 auto;
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  font-style: italic;
  margin: 0 0 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.poi-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.poi-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-inner), var(--shadow-soft);
}
.poi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cat-color, var(--ink-faint));
  opacity: 0.85;
}
.poi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-inner), var(--shadow-pop);
  border-color: rgba(255, 255, 255, 0.70);
}
.poi-card:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.poi-cat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-color, var(--ink-faint));
  font-weight: 500;
  margin-bottom: 6px;
}
.poi-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.poi-note {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.poi-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.poi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta);
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  transition: background 0.15s ease;
}
.poi-btn:hover { background: var(--terracotta-d); }
.poi-btn svg { width: 14px; height: 14px; }

.poi-btn-ghost {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink-soft);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-inner);
  font-weight: 500;
  letter-spacing: 0;
}
.poi-btn-ghost:hover {
  background: rgba(242, 235, 220, 0.72);
  border-color: rgba(255, 255, 255, 0.70);
  color: var(--ink);
}

.empty-state {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  padding: 40px 20px;
}

/* ---------------------------------------------------------- Footer */
.site-footer {
  text-align: center;
  padding: 30px 22px 40px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--sans);
}
.site-footer p { margin: 0 0 8px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terracotta);
  font-weight: 500;
}
.site-footer .footer-place {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-codes {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  opacity: 0.7;
  margin-top: 10px !important;
}
.footer-codes span { white-space: nowrap; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 520px) {
  .masthead { padding: 22px 18px 14px; }
  .masthead-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .brand { align-items: center; text-align: center; }
  .instagram-tile { align-self: center; flex-direction: row; gap: 10px; padding: 8px 12px; }
  .instagram-tile .instagram-logo { width: 32px; height: 32px; }
  .filter-bar { padding-left: 18px; padding-right: 18px; }
  .map-section { padding-left: 18px; padding-right: 18px; }
  .poi-section { padding: 24px 18px 36px; }
  #map { height: 320px; }
  .brand-logo img { max-width: 260px; }
  .intro { text-align: center; margin-left: auto; margin-right: auto; }
}

@media (min-width: 720px) {
  .poi-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Honour reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}