/*
Theme Name: BudLog
Theme URI: https://github.com/zatamoko/budloger
Author: Zatamoko
Author URI: https://github.com/zatamoko
Description: Minimal classic theme for the BudLog public site — a single page: a map of nest boxes with a sidebar list. Field-notebook palette, no parent theme.
Version: 1.0.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: budlog-theme
*/

:root {
  --paper: #f5ecd5;
  --paper-card: #fffaf0;
  --ink: #2b2620;
  --muted-ink: #5a4f3a;
  --green: #3a5a3a;
  --line: #c9b98f;
  --header-h: 64px;
  --footer-h: 40px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* ---- Header ---- */
.bl-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--green);
  color: var(--paper);
}
/* Brand link — logo + wordmark, reloads the site to its initial state.
   Pin the colour explicitly (and across link states) so the browser's default
   blue/underline link styling never leaks onto the wordmark or the SVG stroke. */
.bl-brand,
.bl-brand:link,
.bl-brand:visited,
.bl-brand:hover,
.bl-brand:active {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  text-decoration: none;
}
.bl-logo {
  display: inline-flex;
}
.bl-logo svg {
  width: 36px;
  height: 36px;
}
.bl-wordmark {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---- Main: sidebar + map ---- */
.bl-main {
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  min-height: 0;
}

.bl-sidebar {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.bl-detail {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-card);
}
.bl-detail-hint {
  margin: 0;
  color: var(--muted-ink);
}
.bl-detail-code {
  margin: 0 0 2px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.bl-detail-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.bl-detail-h {
  margin: 16px 0 4px;
  font-size: 0.95rem;
}
.bl-detail-meta {
  margin: 0 0 4px;
  color: var(--muted-ink);
}
.bl-detail-species {
  margin: 0;
  font-style: italic;
}

.bl-boxlist {
  padding: 16px;
}
.bl-boxlist-empty {
  padding: 20px;
  color: var(--muted-ink);
}

/* Section heading (Aktivní / Vyřazené / Ztracené). */
.bl-section-h {
  margin: 18px 4px 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-ink);
}
.bl-section-h:first-child {
  margin-top: 4px;
}

/* Box tiles — mirrors the PWA: 2-col grid, ID + hole + species + status. */
.bl-box-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bl-box-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  padding: 16px 12px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(43, 38, 32, 0.18);
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease;
}
.bl-box-card:hover {
  filter: brightness(0.98);
}
.bl-box-card.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green);
}
.bl-box-card[data-status='retired'] {
  background: color-mix(in srgb, var(--muted-ink) 22%, var(--paper-card));
  opacity: 0.75;
}
.bl-box-card[data-status='lost'] {
  opacity: 0.4;
}
.bl-box-card-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.bl-box-card .bl-meta {
  font-size: 0.95rem;
  margin: 0;
}
.bl-box-card .bl-card-name {
  font-size: 0.95rem;
  margin: 0;
}

.bl-map {
  height: 100%;
  width: 100%;
}

/* Mute the map so the green markers stand out — fully greyscale + dimmed tiles
   only (markers/controls live in other panes and stay full-colour). */
.bl-map .leaflet-tile-pane {
  filter: grayscale(1) brightness(0.92) contrast(0.9);
}

/* ---- Map marker: a classic map pin (point down) with the box ID on top ---- */
.bl-pin .bl-pin-body {
  position: relative;
  width: 34px;
  height: 46px;
  transition: transform 0.12s ease;
  transform-origin: 50% 100%; /* grow from the tip */
}
/* Round head, pointed at the bottom — the standard teardrop pin silhouette.
   The square corner (border-radius 0) is bottom-right; rotating -45deg swings
   it to point straight down. */
.bl-pin .bl-pin-body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  background: var(--green);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* The ID, upright, centred on the round head (above the tip). */
.bl-pin .bl-pin-id {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 700;
}
/* Selected marker grows to 150% from its tip and lifts above the rest. */
.bl-pin.is-active {
  z-index: 1000 !important;
}
.bl-pin.is-active .bl-pin-body {
  transform: scale(1.5);
}

/* ---- Footer ---- */
.bl-footer {
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--paper);
  font-size: 0.85rem;
}

/* ---- Narrow screens: stack sidebar above map ---- */
@media (max-width: 700px) {
  .bl-main {
    grid-template-columns: 1fr;
    height: auto;
  }
  .bl-sidebar {
    max-height: 40vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .bl-map {
    height: 60vh;
  }
}