/* ==========================================================================
   CuriosityBits Living Lab Singapore — Local Flavor Overrides
   Base layout models Boston (muse-theme.css). This file adds SG identity only:
   flag-red accents, SGT timezone markers, four-language greeting,
   Marina Bay skyline silhouette in hero banners, Peranakan-tile detail.
   ========================================================================== */

:root {
  --sg-red: #ef3340;
  --sg-red-deep: #c5221f;
  --sg-red-soft: #fff1f0;
  --sg-gold: #c9a227;
}

/* 1. Header: SG node marker + red active underline (Boston uses blue gradient) */
.site-branding-sub::after {
  content: " · SG";
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--sg-red-deep);
  background: var(--sg-red-soft);
  border: 1px solid rgba(197, 34, 31, 0.3);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.main-nav a:hover,
.main-nav a.active {
  border-image: linear-gradient(to right, #ef3340 0%, #ff6b61 100%) 0 0 1 0;
}

.sg-sgt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sg-red-deep);
  background: #fff;
  border: 1px solid rgba(197, 34, 31, 0.3);
  border-radius: 999px;
  padding: 3px 11px;
  margin-left: 14px;
  white-space: nowrap;
}

.sg-sgt-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* 2. Hero: Singapore dusk gradient + skyline silhouette layer */
.featured-visual-inner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(239, 51, 64, 0.28), transparent 55%),
    linear-gradient(145deg, #1a0e10 0%, #1c2b33 62%, #0f1922 100%);
}

.featured-visual-inner .sg-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 64px;
  opacity: 0.35;
  pointer-events: none;
}

.visual-kicker.sg-kicker { color: #fca5a5 !important; }

.sg-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  background: rgba(197, 34, 31, 0.16);
  color: #fecaca;
  border: 1px solid rgba(252, 165, 165, 0.45);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

/* 3. Four-language welcome strip (EN · MS · ZH · TA) */
.sg-welcome-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.sg-welcome-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sg-welcome-strip .lang {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fecaca;
  border: 1px solid rgba(252, 165, 165, 0.4);
  border-radius: 5px;
  padding: 1px 6px;
}

/* 4. Peranakan-tile divider for section titles */
.highlights-title.ui-heading1 {
  position: relative;
}

.sg-tile-row {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
}

.sg-tile-row i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background:
    linear-gradient(45deg, var(--sg-red) 25%, transparent 25%, transparent 75%, var(--sg-red) 75%),
    linear-gradient(45deg, var(--sg-red) 25%, transparent 25%, transparent 75%, var(--sg-red) 75%);
  background-color: #fff;
  background-size: 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
  border: 1px solid rgba(197, 34, 31, 0.35);
  opacity: 0.85;
}

.sg-tile-row i:nth-child(even) {
  background:
    linear-gradient(45deg, #1c2b33 25%, transparent 25%, transparent 75%, #1c2b33 75%),
    linear-gradient(45deg, #1c2b33 25%, transparent 25%, transparent 75%, #1c2b33 75%);
  background-color: #fff;
  background-size: 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
}

/* 5. Kopi-O verdict note + footer SG line */
.sg-kopi-note {
  background: var(--sg-red-soft);
  border: 1px solid rgba(197, 34, 31, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #5b1a18;
  margin: 18px 0;
}

.sg-kopi-note strong { color: var(--sg-red-deep); }

.site-footer .sg-footer-line {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: #8a9a94;
}

/* 6. Audit cards: SG red left-tick on verdict cards */
.study-card-item.sg-verdict {
  border-top: 3px solid var(--sg-red);
}

/* 7. Mobile: keep skyline subtle, welcome strip scrollable */
@media (max-width: 768px) {
  .sg-sgt-pill { display: none; }
  .featured-visual-inner .sg-skyline { height: 44px; opacity: 0.28; }
  .sg-welcome-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sg-welcome-strip::-webkit-scrollbar { display: none; }
}