/* =========================================================
   File: css/ui.css
   Title: UI primitives + utilities (merged, deduped)
   Updated: 2025-11-07 (clean + single source of truth)
   Author: Tom Glendening
   ========================================================= */

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */


img { border: none; }

/* ---------------------------------------------------------
   UTILITIES — GUTTERS & SPACING
   --------------------------------------------------------- */
.gutter-lg {
  --sg-col-gap: 2rem;
  --sg-row-gap: 1.25rem;
  --card-gap: 2rem;
}
.gutter-xl {
  --sg-col-gap: 2.5rem;
  --sg-row-gap: 1.5rem;
  --card-gap: 2.5rem;
}

.pb-xxl { padding-bottom: 10rem; }

/* Keep lists readable but compact */
li { padding-bottom: 1rem; }

/* ---------------------------------------------------------
   BUTTONS (outline-light)
   --------------------------------------------------------- */
.btn-outline-light {
  color: #000;
  border-color: #000;
  background-color: transparent;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light:focus {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}

/* ---------------------------------------------------------
   OFFCANVAS MINOR TWEAK
   --------------------------------------------------------- */
.offcanvas-header { padding-top: 20px; }
@media (max-width: 575.98px) {
  .offcanvas {
    width: 60vw !important;
    max-width: 60vw !important;
  }
}

/* ---------------------------------------------------------
   HIGHLIGHT UTILITY
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   SIMPLE 2-COL GRID UTILITY
   --------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap, 1rem);
  align-items: start;
}
.grid-2 > * { min-width: 0; }
@media (max-width: 599.98px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   DARK SURFACE HELPER
   --------------------------------------------------------- */
.on-black {
  color: var(--color-white);
  background: var(--color-black);
  --bs-body-color: #fff;
  --bs-link-color: #fff;
  --bs-card-color: #fff;
  --bs-card-bg: transparent;
  --bs-table-color: #fff;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.6);
}
.on-black a { color: inherit; }
.on-black a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   HEADER SEAM (visual only; positioning in layout.css)
   --------------------------------------------------------- */
.area-header { border-bottom: 0; }

/* ---------------------------------------------------------
   H2-STYLE LINKS
   --------------------------------------------------------- */
.h2-link {
  font-family: var(--h2-font);
  font-size: var(--h2-fs);
  line-height: var(--h2-lh);
  font-weight: 200 !important;
  color: #808080 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
.h2-link:hover,
.h2-link:active {
  color: currentColor !important;
  font-weight: 500;
}

/* ---------------------------------------------------------
   LOGO UTILS
   --------------------------------------------------------- */
.idcny-logo {
  width: 20%;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.idcny-logo:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

/* ---------------------------------------------------------
   CLUSTER MAP — Base + Overlay (NO PADDING)
   Source of truth for cluster-map styles
   --------------------------------------------------------- */
.cluster-map-wrapper {
  position: relative;
  display: block;
  margin: 0;           /* no margin */
  padding: 0;          /* no padding */
  width: 100%;
  max-width: 100%;
  text-align: center;
  /* Optional: remove any border the markup might include */
  border: none;
}

.cluster-map-base {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;           /* no margin */
  padding: 0;          /* no padding */
}

.cluster-map-overlay {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: auto;
  pointer-events: none; /* lets clicks pass through */
  margin: 0;           /* no margin */
  padding: 0;          /* no padding */
}

/* ---------------------------------------------------------
   RESPONSIVE IMAGE HELPERS (UI-level)
   --------------------------------------------------------- */
.img-wide {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .img-wide { width: 90%; }
}

.ic-img-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ic-img-fluid {
  width: 50%;
  max-width: 100%;
}
@media (max-width: 768px) {
  .ic-img-fluid { width: 100%; }
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
}

/* =========================================================
   GLOBAL SCROLLBAR — Applies to ALL popups + offcanvas
   Clean, Thin, Minimal
========================================================= */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.05);
}

/* =========================================================
   UTILITY — .border-dotted
   ---------------------------------------------------------
   Provides a 1px dotted outline using currentColor.
========================================================= */
.border-bottom-dotted {
  border: 1px dotted white;
}
.floating-logo-link img {
  width: clamp(60px, 10vw, 120px);
  height: auto;
}
@media (max-width: 600px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* =========================================================
   End of File — css/ui.css
   ========================================================= */