/* =========================
   GLOBAL / SHARED STYLES
   Used across the site (landing + dashboard header)
   ========================= */

body { background: #f3f4f6; }

/* Header brand */
.header-brand { display:flex; align-items:center; gap:.75rem; }
.header-brand > img#wp-wordmark { flex:0 0 auto; }

/* Wordmark PNG sizing */
#wp-wordmark{
  height:34px !important; max-height:none !important; max-width:none !important; image-rendering:auto;
}
@media (min-width:768px){ #wp-wordmark{ height:40px !important; } }

/* SVG logo animations */
#wp-logo .bg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
#wp-logo .wave {
  stroke-dasharray:100; stroke-dashoffset:100;
  animation: wp-draw 1s ease-out forwards; vector-effect:non-scaling-stroke;
}
@keyframes wp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion:reduce){ #wp-logo .wave{ animation:none; stroke-dashoffset:0; } }

/* Hover polish for the SVG */
#wp-logo{ transition: transform .18s ease, filter .22s ease; }
#wp-logo:hover{ transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
#wp-logo:hover .wave { stroke-width: 3.2; }

/* Theme variables */
:root{
  --wp-grad-start:#60a5fa; /* blue-400 */
  --wp-grad-end:#4f46e5;   /* indigo-600 */
  --wp-gold:#FFD700;
  
}

/* Fancy 3D hero headline (landing) */
.metallic-title{
  background-image: linear-gradient(180deg, #5fa8ff 0%, #4778c9 54%, #a8b7d7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.45),
    0  1px 0 rgba(15,23,42,.25),
    0  2px 0 rgba(15,23,42,.22),
    0  3px 0 rgba(15,23,42,.18),
    0  6px 14px rgba(2,6,23,.25);
}

/* Blue–metallic wordmark (landing) */
.hero-3d--blue{
  display:inline-block; font-weight:800; letter-spacing:.2px;
  background-image:
    linear-gradient(180deg,#b9d4ff 0%,#6ea0ff 12%,#3b7ae6 28%,#1f3d79 50%,#3b7ae6 72%,#6ea0ff 88%,#cfe1ff 100%),
    linear-gradient(75deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 38% 62%,rgba(255,255,255,.55) 100%);
  background-size:100% 100%,220% 100%; background-position:center,-140% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:.35px rgba(255,255,255,.35);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.35),
    0  1px 0 rgba(16,24,40,.20),
    0  2px 0 rgba(16,24,40,.18),
    0  3px 0 rgba(16,24,40,.16),
    0  4px 0 rgba(16,24,40,.14),
    0 10px 18px rgba(2,6,23,.22);
  transition: background-position .5s ease, transform .18s ease, text-shadow .18s ease;
}
.hero-3d--blue:hover{
  background-position:center,120% 0; transform:translateY(-1px);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.42),
    0  1px 0 rgba(16,24,40,.22),
    0  2px 0 rgba(16,24,40,.20),
    0  3px 0 rgba(16,24,40,.18),
    0  4px 0 rgba(16,24,40,.16),
    0 12px 22px rgba(2,6,23,.28);
}
@media (prefers-reduced-motion: reduce){
  .hero-3d--blue{ transition:none; }
  .hero-3d--blue:hover{ transform:none; background-position:center,-140% 0; }
}

/* Global 3D button base (reused in multiple places) */
.btn-3d{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem; padding:.6rem 1rem; border-radius:9999px;
  font-weight:700; letter-spacing:.2px; user-select:none; cursor:pointer;
  border:2px solid transparent;
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, filter .22s ease, color .22s ease;
  will-change: transform, box-shadow;
}

/* Fancy action buttons on the landing header */
#about-btn, #view-demo{
  position:relative; z-index:0; color:#fff; border:2px solid var(--wp-gold); border-radius:9999px;
  background-image:linear-gradient(135deg, var(--wp-grad-start), var(--wp-grad-end));
  box-shadow:0 6px 16px rgba(0,0,0,.2), inset 0 0 6px rgba(255,255,255,.12);
  transition:transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}
#about-btn::after, #view-demo::after{
  content:""; position:absolute; inset:-8px; border-radius:9999px;
  filter:blur(10px); opacity:0; transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease; z-index:-1; pointer-events:none;
}
#about-btn:hover, #about-btn.is-hover,
#view-demo:hover, #view-demo.is-hover{
  transform:translateY(-2px) scale(1.03);
  background-image:linear-gradient(135deg, var(--wp-grad-end), var(--wp-grad-start));
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 0 10px rgba(255,255,255,.18);
}
#about-btn:hover::after, #about-btn.is-hover::after,
#view-demo:hover::after, #view-demo.is-hover::after{ opacity:1; transform:scale(1.04); }
#about-btn:active, #view-demo:active{ transform:translateY(1px) scale(.99); box-shadow:0 4px 14px rgba(0,0,0,.22), inset 0 0 7px rgba(255,255,255,.14); }
@media (max-width:767.98px){
  #about-btn{ font-size:12px; padding:.25rem .5rem; }
  #view-demo{ font-size:14px; padding:.5rem 1rem; }
}

/* Feature cards (landing) */
.feature-card{
  position:relative; border-radius:.75rem; padding:1.5rem;
  background: linear-gradient(135deg, #fff7ed, #e9dfc0);
  border: 5px solid rgba(15,23,42,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  will-change:transform;
}
.feature-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 30px rgba(2,6,23,.12);
  border-color:rgba(244, 188, 47, 0.45);
}
@media (prefers-reduced-motion:reduce){
  .feature-card{ transition:none; }
  .feature-card:hover{ transform:none; }
}

/* About modal (shared) */
.about-overlay{ position:fixed; inset:0; display:none; z-index:9999; background:rgba(0,0,0,.45); align-items:center; justify-content:center; }
@supports (backdrop-filter: blur(8px)){ .about-overlay{ background:rgba(0,0,0,.25); backdrop-filter: blur(6px);} }
.about-modal{
  width:min(720px,92vw); max-height:86vh; overflow:auto; background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.about-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.about-text{ color:#374151; }
.about-muted{ color:#6b7280; font-size:12px; }


/* Tooltip styles for map control buttons */
.map-control-btn {
  position: relative;
   z-index: 10002 !important; 
}

.map-control-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 9px solid #e0e0e0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Tooltip arrow */
.map-control-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #e0e0e0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10000;
}

/* Show on hover */
.map-control-btn:hover::after,
.map-control-btn:hover::before {
  opacity: 1;
    z-index: 10002 !important;
}