/* The geolocation page's demos (moved from the homepage on 2026-10-10): the tabs, the panels, the weather, shop, consent, redirect and log cards */
.section-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.035;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* ========================================
   GEOLOCATION USE CASES SECTION
   ======================================== */

.geo-section {
  position: relative;
  overflow: hidden;
}

/* Demo tabs — match the industries tab style */
.geo-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.geo-tabs::-webkit-scrollbar { display: none; }

.geo-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
  position: relative;
  margin-right: -1px;
}

.geo-tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.geo-tab.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  z-index: 1;
}

.geo-tab.active:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.geo-tab svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.geo-tab.active svg {
  opacity: 1;
}

/* Demo panels */
/* All panels occupy the same grid cell, so the section is always as tall as the
   tallest one and switching tabs never moves the page. Inactive panels are hidden
   with visibility (out of the tab order and the accessibility tree) and cross-fade. */
.geo-panels {
  position: relative;
  display: grid;
}

.geo-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  /* Only the open demo takes room: the others are lifted out of the flow, so the section is as tall
     as the demo on show and not as tall as the tallest of the five (which left a blank band below
     the shorter ones). The outgoing demo still fades over the incoming one. */
  position: absolute;
  inset: 0;
}

.geo-panel.active {
  position: static;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

/* Both columns take the same breathing room from the tab bar */
.geo-panel-info,
.geo-panel-demo {
  padding-top: var(--space-xl);
}

.geo-panel-info h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.geo-panel-info > p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-xl);
}

.geo-panel-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-lg);
}

.geo-panel-fields span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
}

/* Demo card (shared) */
.geo-demo-card {
  border: 1px solid var(--border);
}

.geo-demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.geo-demo-body {
  padding: var(--space-xl) var(--space-lg);
}

.geo-demo-footer {
  padding: 0.6rem 1.2rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Weather demo */
.geo-weather-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Line-drawn weather glyph, in the diagrams' idiom, with the one motion its
   condition has: rays turning, clouds drifting, rain falling, snow settling,
   fog sliding, a bolt that flashes. */
.geo-weather-glyph {
  margin-left: auto;
  align-self: center;
  width: 112px;
  height: 112px;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  flex-shrink: 0;
  color: var(--text-primary);
}
.geo-weather-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.geo-weather-glyph .wx-solid { fill: var(--bg-secondary); }   /* the card's paper: fronts occlude backs */
/* Colour for the glyph. Hues are chosen per mode so a 1.6px line holds against the card's paper:
   deeper on light themes, brighter on dark ones. Rain takes the page accent. */
.geo-weather-glyph { --wx-sun: #D97706; --wx-moon: #A68A2E; --wx-rain: var(--accent); --wx-snow: #3A8FC7; --wx-bolt: #D97706; }
:is([data-theme="dark"]) .geo-weather-glyph { --wx-sun: #FBBF24; --wx-moon: #E8D48A; --wx-snow: #A5D8FF; --wx-bolt: #FFD43B; }
/* each part takes its natural colour; clouds stay ink and fog goes quiet */
.geo-weather-glyph :is(.wx-rays, .wx-core) { color: var(--wx-sun); }
.geo-weather-glyph :is(.wx-moon, .wx-star) { color: var(--wx-moon); }
.geo-weather-glyph .wx-drop { color: var(--wx-rain); }
.geo-weather-glyph .wx-flake { color: var(--wx-snow); }
.geo-weather-glyph .wx-bolt { color: var(--wx-bolt); }
.geo-weather-glyph .wx-fog-line { color: var(--text-muted); }
.geo-weather-glyph .wx-rays { animation: wx-spin 48s linear infinite; }
.geo-weather-glyph .wx-core { animation: wx-breathe 4s ease-in-out infinite; }
.geo-weather-glyph .wx-cloud { animation: wx-drift 7s ease-in-out infinite alternate; }
.geo-weather-glyph .wx-cloud-back { animation: wx-drift 11s ease-in-out infinite alternate-reverse; }
.geo-weather-glyph .wx-drop { animation: wx-fall 1.2s linear infinite; }
.geo-weather-glyph .wx-flake { animation: wx-snow 2.8s ease-in-out infinite; }
.geo-weather-glyph .wx-fog-line { animation: wx-fog 5s ease-in-out infinite alternate; }
.geo-weather-glyph .wx-bolt { animation: wx-flash 5s steps(1, end) infinite; }
.geo-weather-glyph .wx-moon { animation: wx-breathe 6s ease-in-out infinite; }
.geo-weather-glyph .wx-star { animation: wx-twinkle 3s ease-in-out infinite; }

@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-breathe { 50% { transform: scale(1.06); } }
@keyframes wx-drift { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes wx-fall { from { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
@keyframes wx-snow { from { transform: translate(0, -4px); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(2px, 5px); } 85% { opacity: 1; } to { transform: translate(-1px, 14px); opacity: 0; } }
@keyframes wx-fog { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes wx-flash { 0%, 100% { opacity: 0.3; } 62% { opacity: 1; } 66% { opacity: 0.3; } 70% { opacity: 1; } 78% { opacity: 0.3; } }
@keyframes wx-twinkle { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .geo-weather-glyph * { animation: none !important; }
}

.geo-weather-temp {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.geo-weather-desc {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.geo-weather-details {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.geo-weather-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-secondary);
}

.geo-weather-row span:first-child {
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

/* Ecommerce demo */
.geo-shop-body {
  padding: var(--space-lg);
}

.geo-shop-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: var(--space-md);
}

.geo-shop-product {
  border: 1px solid var(--border);
  padding: var(--space-md);
  text-align: center;
}

.geo-shop-product-img {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-shop-product-img svg {
  width: 60%;
  height: 60%;
  color: var(--text-primary);
  opacity: 0.2;
}

.geo-shop-product-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.geo-shop-product-price {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.geo-shop-banner {
  border: 1px dashed var(--border);
  padding: 0.65rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.03em;
}

/* Compliance demo */
.geo-compliance-body {
  padding: var(--space-lg);
}

.geo-compliance-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-lg);
}

.geo-compliance-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.42rem 0.9rem;   /* ten rows: kept tight so this card is no taller than the others */
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.geo-compliance-rule-name {
  color: var(--text-primary);
  font-weight: 500;
}

/* The regulation's full name beside its acronym: quieter than the acronym, still legible */
.geo-compliance-rule-full {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}

.geo-compliance-rule-status {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.geo-compliance-rule-status.applies {
  color: var(--text-primary);
  font-weight: 600;
}

.geo-compliance-result {
  border: 1px dashed var(--border);
  padding: 0.8rem 1rem;
}

.geo-compliance-result-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}

.geo-compliance-result-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Geo-redirect demo */
.geo-redirect-body {
  padding: var(--space-lg);
}

.geo-redirect-flow {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.geo-redirect-row {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.geo-redirect-region {
  flex: 0 0 120px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.geo-redirect-arrow {
  flex: 0 0 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.geo-redirect-url {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.geo-redirect-row.active .geo-redirect-region,
.geo-redirect-row.active .geo-redirect-url {
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--text-primary);
  border-width: 1.5px;
}

/* Steps (shared) */
.geo-demo-steps {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.geo-step {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.geo-step-num {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* Log enrichment demo */
.geo-logs-card {
  overflow: hidden;
}

.geo-logs-body {
  padding: 0.5rem 0.6rem;
  color: var(--text-primary);
}

/* Enriched access log: a raw line, then what ipdata adds to it. Threat rows sit on
   a faint highlight; clean rows quieter. Real text, so it reads at any width. */
.geo-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}
.geo-log-row {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.geo-log-row:last-child { border-bottom: 0; }
.geo-log-row.is-threat { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.geo-log-raw {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.geo-log-raw b { font-weight: 500; color: var(--text-secondary); }
.geo-log-enriched {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  color: var(--text-secondary);
}
.is-threat .geo-log-enriched { color: var(--text-primary); }
.geo-log-enriched b { font-weight: 600; color: var(--text-primary); }
.geo-log-summary {
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem 0.15rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .geo-tab { padding: 0.6rem 0.9rem; font-size: 0.78rem; }
  /* on a phone the tabs wrap into rows as outlined chips instead of scrolling with the last one cut (2026-10-15) */
  .geo-tabs { flex-wrap: wrap; gap: 6px; overflow: visible; border-bottom: 0; padding-bottom: 0.25rem; }
  .geo-tab { border-bottom: 1px solid var(--border); margin-right: 0; }
  .geo-tab.active { border-color: var(--text-primary); }
  .geo-panel { grid-template-columns: 1fr; }
}