/*
Theme Name: PaintMap
Theme URI: https://example.com/paintmap
Author: ChatGPT
Description: A WordPress theme that uses your hand-drawn painting as a clickable map with SVG hotspots.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paintmap
*/

:root{
  --pm-accent: #222;
  --pm-highlight: rgba(255, 255, 0, 0.35);
  --pm-outline: rgba(0,0,0,0.33);
  --pm-focus: rgba(0, 123, 255, 0.35);
  --pm-bg: #fffaf3;
  --pm-text: #1a1a1a;
  --pm-link: #0b5fff;
}

html, body { margin:0; padding:0; }
body {
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.6;
}

/* Header / basic layout */
.pm-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.pm-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pm-site-title { font-size: 1.6rem; font-weight: 700; margin:0; }
.pm-nav ul { list-style:none; display:flex; flex-wrap: wrap; gap:12px; padding:0; margin:0; }
.pm-nav a { text-decoration:none; color: var(--pm-link); }

/* Hero image with overlay */
.pm-hero-wrap { position: relative; width: 100%; }
.pm-hero-img { display:block; width:100%; height:auto; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.pm-overlay { position:absolute; inset:0; }
.pm-overlay svg { width:100%; height:100%; display:block; }

/* Hotspot styles */
.pm-hotspot { cursor: pointer; stroke: var(--pm-outline); stroke-width: 2; fill: transparent; transition: fill 150ms ease, stroke 150ms ease; }
.pm-hotspot:hover { fill: var(--pm-highlight); }
.pm-hotspot:focus { outline: none; stroke: var(--pm-focus); fill: var(--pm-focus); }

.pm-legend { font-size: 0.95rem; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 10px 14px; margin-top: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.pm-legend h3 { margin: 0 0 6px 0; font-size: 1rem; }
.pm-legend ul { padding-left: 18px; margin: 0; }

/* Sections */
section.pm-section { padding: 64px 0; border-top: 1px dashed rgba(0,0,0,0.1); }
section.pm-section h2 { margin-top:0; font-size: 1.8rem; }
section.pm-section p { margin: 0.5rem 0 0 0; }

.pm-footer { margin: 48px 0; text-align:center; font-size:0.9rem; color:#555; }