/* Shared Core Styles for Innovation Uprising */
/* CSS Variables */
:root {
  --color-bg-dark: #0a0a0a;
  --color-bg-panel: #1c1c1c;
  --color-bg-panel-alt: #2a2a2a;
  --color-accent: #4db8ff;
  --color-accent-alt: #2a9df4;
  --color-accent-alt2: #1e88e5;
  --color-text-light: #e0e0e0;
  --color-text-muted: #aaa;
  --color-border-accent: rgba(77,184,255,0.3);
  --shadow-strong: 0 8px 25px rgba(0,0,0,0.6), 0 4px 12px rgba(77,184,255,0.15);
  --radius-large: 18px;
  --transition-base: 0.3s ease;
}

html { height:100%; width:100%; scroll-behavior:smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 10px 15px;
  background: var(--color-accent);
  color: #111;
  font-weight: 600;
  border-radius: 0 0 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 2000;
}

/* Shared Announcement Banner */
.announcement-banner {
  background: linear-gradient(135deg, rgba(77,184,255,0.15) 0%, rgba(42,157,244,0.15) 50%, rgba(30,136,229,0.2) 100%);
  border: 1px solid rgba(77,184,255,0.35);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(4px);
  padding: 25px 35px;
  border-radius: var(--radius-large);
  margin: 35px auto 40px;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
}
.announcement-banner::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(77,184,255,0.15), transparent);
  animation: slideGlow 6s linear infinite;
  pointer-events: none;
}
@keyframes slideGlow {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.announcement-banner h3 {
  margin: 0 0 12px;
  font-size: 1.55em;
  background: linear-gradient(135deg,var(--color-accent) 0%, var(--color-accent-alt) 50%, var(--color-accent-alt2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.announcement-banner p {
  margin: 6px 0;
  color: var(--color-text-light);
  font-size: 1.02em;
  line-height: 1.5;
}
.announcement-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.announcement-tag {
  background: rgba(77,184,255,0.12);
  border: 1px solid rgba(77,184,255,0.4);
  color: var(--color-accent);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (max-width: 768px){
  .announcement-banner { padding:20px 22px; margin:25px 15px 30px; }
  .announcement-banner h3 { font-size:1.3em; }
  .announcement-banner p { font-size:0.95em; }
}

/* Highlight focus for deep-linked sections */
.highlight-focus { outline:3px solid var(--color-accent); animation: highlightPulse 2.5s ease-in-out; }
@keyframes highlightPulse { 0%{outline-color:var(--color-accent);} 50%{outline-color:var(--color-accent-alt);} 100%{outline-color:var(--color-accent);} }

/* Utility classes */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* Visitor Region / Geolocation Display */
.visitor-region {
  background: linear-gradient(135deg, rgba(77,184,255,0.08) 0%, rgba(42,157,244,0.08) 50%, rgba(30,136,229,0.12) 100%);
  border: 1px solid rgba(77,184,255,0.25);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 2px 6px rgba(77,184,255,0.15);
  backdrop-filter: blur(6px);
  padding: 18px 24px;
  border-radius: 14px;
  margin: 40px auto 25px;
  max-width: 800px;
  color: var(--color-text-light);
  font-size: 0.95em;
  position: relative;
}
.visitor-region h4 {
  margin: 0 0 10px;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg,var(--color-accent) 0%, var(--color-accent-alt) 50%, var(--color-accent-alt2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.visitor-region .geo-status { display:block; margin:4px 0 10px; font-weight:600; color: var(--color-accent); }
.visitor-region .geo-details { margin: 0 0 8px; line-height:1.4; }
.visitor-region .geo-privacy { margin: 8px 0 0; font-size: 0.75em; color: var(--color-text-muted); font-style: italic; }
.visitor-region button.geo-optout,
.visitor-region button.geo-resume {
  background: rgba(77,184,255,0.15);
  color: var(--color-accent);
  border: 1px solid rgba(77,184,255,0.35);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75em;
  font-weight:600;
  letter-spacing:0.5px;
  cursor:pointer;
  transition: var(--transition-base);
  margin-top: 6px;
}
.visitor-region button.geo-optout:hover,
.visitor-region button.geo-resume:hover {
  background: rgba(77,184,255,0.25);
}
.visitor-region .geo-error { color: #ff9494; font-weight:600; }
@media (max-width: 768px){
  .visitor-region { margin: 30px 15px 20px; padding:16px 18px; font-size:0.9em; }
  .visitor-region h4 { font-size:1.05em; }
}