/* === Hideaway Palmetum · Palm Map · Layout & Panel v3 === */

:root {
  --cream: #fbf8f3;
  --ink: #222;
  --green: #1a5e1a;
  --gold: #a67c00;
  --shadow: rgba(0,0,0,.25);
  --panel-width: 430px;        /* widened panel for better monograph fit */
  --palm-icon-scale: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #000;
}

/* Shell: map + detail panel */
#palmetum-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Leaflet map */
#map {
  position: absolute;
  inset: 0;
}

/* === Palm marker scaling === */
.palm-marker-icon {
  transform: scale(var(--palm-icon-scale));
  transform-origin: center bottom;
  transition: transform 0.15s ease-out;
}
/* === Active Palm Pulse Effect === */

.palm-marker-icon.active-pulse {
  animation: palmPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.65));
}

@keyframes palmPulse {
  0%   { transform: scale(var(--palm-icon-scale)) }
  50%  { transform: scale(calc(var(--palm-icon-scale) * 1.25)) }
  100% { transform: scale(var(--palm-icon-scale)) }
}

/* === Detail Panel (desktop: right side) === */
#palm-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--panel-width);
  height: 100%;
  background: rgba(251, 248, 243, 0.96);
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  z-index: 1000;
}

#palm-panel.panel-open {
  transform: translateX(0);
}

#palm-panel.panel-closed {
  transform: translateX(100%);
}

/* Close button */
#panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

#panel-close:hover {
  background: #f4f4f4;
}

/* Panel inner becomes vertical split: header + iframe */
.panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* Header stays at top */
#panel-header {
  padding: 28px 20px 16px;
  background: rgba(251, 248, 243, 0.96);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.panel-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 4px;
}

#palm-name {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--green);
}

.panel-common {
  margin-top: 4px;
  font-size: 13px;
  color: #555;
}

/* Meta + badge */
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Conservation badge (neutral baseline) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid #ccc;
}

.badge-neutral {
  background: #f5f5f5;
  color: #555;
}

/* Monograph external link */
.panel-link {
  display: inline-flex;
  margin-top: 10px;
  font-size: 13px;
  text-decoration: none;
  color: var(--gold);
  border-bottom: 1px solid rgba(166,124,0,0.35);
  padding-bottom: 2px;
}

.panel-link:hover {
  color: #c28c00;
  border-bottom-color: rgba(166,124,0,0.75);
}

/* Search box */
.panel-search {
  margin-top: 14px;
}

#palm-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccb;
  border-radius: 6px;
  font-size: 14px;
}

#search-results {
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  margin-top: 6px;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

#search-results div {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}

#search-results div:last-child {
  border-bottom: none;
}

#search-results div:hover {
  background: #f7f0d6;
}

/* Monograph preview takes all remaining height */
#monograph-frame {
  flex-grow: 1;
  width: 100%;
  border: none;
  background: #fff;

  /* Scale down content slightly to fit panel better */
  zoom: 0.85;                     /* Chrome/Edge */
  -moz-transform: scale(0.85);    /* Firefox fallback */
  -moz-transform-origin: top left;
}

/* === Mobile layout: panel becomes bottom sheet === */
@media (max-width: 768px) {
  #palm-panel {
    width: 100%;
    height: 40vh;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    border-left: none;
    border-top: 3px solid var(--gold);
    transform: translateY(100%);
  }

  #palm-panel.panel-open {
    transform: translateY(0);
  }

  #palm-panel.panel-closed {
    transform: translateY(100%);
  }

  #panel-close {
    top: 6px;
    right: 10px;
  }

  .panel-inner {
    height: 100%;
  }

  #map {
    height: 60vh;
  }

  #palmetum-shell {
    height: 100%;
  }

  /* Slightly reduce zoom on mobile so more fits */
  #monograph-frame {
    zoom: 0.80;
    -moz-transform: scale(0.80);
  }
}
/* Hide Google Maps "Use ctrl + scroll to zoom the map" prompt */
.gm-style-pbt {
  display: none !important;
}