/*
V7-HEADER
* Title:    Buktika - Eco Guilds Farms Map Hero Styles
* Filename: assets/css/eco-guilds/partials/eco-guilds-farms-map.css
* Version:  v1.7.0
* Issued:   2026-03-29
* Author:   Buktika Webdesk (Binka)
* Owner:    Buktika — Binka
* Purpose:  Partial styles for eco-guilds-farms-map.html.
*           - Partial-internal elements: hero-inner, hero-title, #farms-map-container, #farms-map.
*           - Farm pin elements and hover / featured states.
*           - Tippy tooltip card (sentraledex theme) — unscoped: Tippy renders at body root.
*           - z-index hierarchy: controls (100) > tooltips (10000) > pins (5).
*           Hero geometry (height, gradient, breakpoints) owned by eco-guilds-farms.css §3.
* Type:     CSS stylesheet (partial)
* Colour Map:    v3.9.0 Section 5.2 (LOCKED)
* Design System: v4.0.0
* ISO Reference: ISO 27001, ISO 9241-110
* Source Naming Standard: Buktika v7.1 (ISO Aligned)
* License:  © Buktika, 2026. All rights reserved.
*
* Exceptions (permanent):
*   800px              — hero height fixed. JS reads .hero-eco-guilds-farms-map height.
*   rgba(248,248,248,0.945) — map chrome surface. Always light regardless of theme. No token.
*   #ffffff (pin ring/bg)  — pin geometry always white. Permanent.
*   rgba(255,255,255,0.82) — secondary text on dark tooltip bg. No rgba-white token.
*   180px / 2px        — fixed decorative bar. DOC-02 §5.3.
*   Tippy unscoped     — renders at body root. Page-scope architecturally impossible.
*/

/* 0) Dependencies
   global.css              — canonical tokens, shared components, sentraledex Tippy base
   themes.css              — [data-theme] alias layer
   eco-guilds-farms.css    — page variable binding, hero geometry, host heights
   Third-party: tippy.css, maplibre-gl.css (loaded after this file)
*/

/* ======================================================================================================
   Hero map section — partial-internal rules
   Layout, host height, gradient, and responsive breakpoints owned by eco-guilds-farms.css §3/§9.
   ====================================================================================================== */

/* Override global.css max-width on .hero.
   height: 800px — JS reads this element via HERO_SELECTOR for map container sizing.
   eco-guilds-farms.css §3 sets height:100% on this element; this rule wins (loads after) —
   intentional: 800px inner < 1000px outer host, creating gradient breathing room. */
/* Full-bleed host — overrides the fixed 1000px + responsive heights in eco-guilds-farms.css
   (this file loads last, so it wins). min-height fills the viewport below the header; height
   is auto so the explicit-px map container (sized by JS) drives the real height. */
.page-eco-guilds-farms #eco-guilds-farms-map-section {
  min-height: calc(100dvh - var(--header-height, 77px));
  height: auto;
}

.page-eco-guilds-farms .hero-eco-guilds-farms-map {
  max-width: none;
  min-height: auto;
  height: auto;
}

/* Inner wrapper — full-bleed column: title on top, map fills the rest, instruction at foot. */
.page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 0.75rem 1rem 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Headline block above the map */
.page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-title {
  margin: 0 auto 1.5rem;   /* 24px */
  max-width: 55rem;
  text-align: center;
}

.page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-title .headline {
  margin: 0 0 0.5rem;
  font-family: var(--headline-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;                     /* EXCEPTION: hero text always white */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.01em;
}

.page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-title .tagline {
  margin: 0;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);   /* EXCEPTION: no rgba-white token */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40);
}

/* Decorative amber rule below tagline — REMOVED (owner: drop the line under the hero). */

/* Instruction line — REMOVED. The "how to" copy now lives in the ? help panel
   (eco-guilds-farms-map-help-content.html), not below the map. */

/* ======================================================================================================
   Map container
   ====================================================================================================== */

.page-eco-guilds-farms #farms-map-container {
  width: 100%;
  /* height is set in px by layoutMapContainer() (viewport − header − title − instruction). */
  margin: 0.5rem 0 0;
  padding: 0.5rem;            /* 8px */
  border-radius: 1rem;        /* 16px */
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Dark space surround for the UGDA globe — a faint galaxy glow behind the sphere.
     (A photographic starfield image can replace this gradient later, like Viridians.) */
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(40, 44, 92, 0.55) 0%, rgba(11, 11, 39, 1) 60%),
    rgb(11, 11, 39);
  position: relative;
  overflow: hidden;
  transform: translateY(-8px);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.55),
    0 0 0 1px rgba(15, 23, 42, 0.18);
}

/* MapLibre map fills the container */
.page-eco-guilds-farms #farms-map {
  padding: 0.625rem;          /* 10px */
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;     /* 12px */
}

/* Navigation controls: above pins, below tooltips */
.page-eco-guilds-farms #farms-map .maplibregl-ctrl-top-left,
.page-eco-guilds-farms #farms-map .maplibregl-ctrl-top-right {
  z-index: 100;
}

.page-eco-guilds-farms .maplibregl-ctrl-help {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sdx-color-slate-dark);
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
  line-height: 1;
}

.page-eco-guilds-farms .maplibregl-ctrl-help:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--page-primary);
}

.page-eco-guilds-farms .maplibregl-ctrl-help.is-active {
  background: color-mix(in srgb, var(--page-primary) 12%, transparent);
  color: var(--page-primary);
}

.page-eco-guilds-farms .maplibregl-ctrl-help:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 1px;
}

[data-theme="dark"] .page-eco-guilds-farms .maplibregl-ctrl-help {
  color: var(--fg);
}

/* ======================================================================================================
   Farm map pins
   Structure mirrors mamadex-mamas-map.css .mama-map-pin for consistency.
   Class: .farm-map-pin (distinct from .mama-map-pin).
   ====================================================================================================== */

.page-eco-guilds-farms .farm-map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

.page-eco-guilds-farms .farm-map-pin .farm-map-pin-shell {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, var(--page-accent) 0 27%, transparent 31%),
    radial-gradient(circle at 50% 50%, #ffffff 0 50%, transparent 54%),
    radial-gradient(circle at 50% 50%, var(--page-primary) 0 100%);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(15, 23, 42, 0.34);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-eco-guilds-farms .farm-map-pin:hover .farm-map-pin-shell {
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(15, 23, 42, 0.40);
}

/* Featured pin — amber glow */
.page-eco-guilds-farms .farm-map-pin.featured .farm-map-pin-shell {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.96),
    0 0 0 7px color-mix(in srgb, var(--page-accent) 28%, transparent),
    0 12px 24px rgba(15, 23, 42, 0.40);
}

.page-eco-guilds-farms .farm-map-pin.featured:hover .farm-map-pin-shell {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.96),
    0 0 0 8px color-mix(in srgb, var(--page-accent) 38%, transparent),
    0 14px 28px rgba(15, 23, 42, 0.42);
}

/* ======================================================================================================
   Tippy tooltip card (sentraledex theme) — farm info card inner layout.
   Base box visual (background, border, border-radius, box-shadow, arrow) owned by
   global.css per DOC-03 Amendment v2.1.0 §12.4. No base overrides here.
   This file owns ONLY the inner content selectors.
   EXCEPTION: Unscoped — Tippy renders at document.body root. Page-scope impossible.
   Confirmed permanent architectural exception.
   ====================================================================================================== */

.tippy-box[data-theme~='sentraledex'] .farms-map-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;              /* 4px */
}

.tippy-box[data-theme~='sentraledex'] .farms-map-card .card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sdx-color-mama-bg);   /* warm parchment on dark tooltip bg — WCAG AAA */
}

.tippy-box[data-theme~='sentraledex'] .farms-map-card .card-location {
  margin: 0;
  font-size: 0.8125rem;      /* 13px */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.80);   /* EXCEPTION: secondary white on dark bg. No rgba-white token. */
}

/* ======================================================================================================
   Media queries
   ====================================================================================================== */

@media (max-width: 720px) {
  .page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-title .headline {
    font-size: 1.75rem;
  }
  .page-eco-guilds-farms .hero-eco-guilds-farms-map .hero-title .tagline {
    font-size: var(--body);
  }
  .page-eco-guilds-farms .hero-eco-guilds-farms-map .map-instruction {
    font-size: 0.75rem;
  }
}

/* Map hover/click popups (camps + invitation parcels) */
.eg-camp-popup strong { display: block; color: #2e5d3a; font-size: 0.9rem; line-height: 1.2; }
.eg-camp-popup__meta { display: block; margin-top: 3px; color: #5b5a50; font-size: 0.78rem; line-height: 1.35; }
.page-eco-guilds-farms .maplibregl-popup-content { padding: 9px 12px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }