/* Porto International OLR — Premium clarity & contrast update v11 */
:root {
  --primary: #082f57;
  --secondary: #0a4f8d;
  --accent: #0b6fbd;
  --accent-strong: #075693;
  --accent-light: #8ecdf7;
  --gold: #4ea9e8;
  --light: #f4f8fc;
  --dark: #041f3a;
  --text: #12263a;
  --text-light: #526b82;
  --surface: #ffffff;
  --surface-soft: #eef5fb;
  --line: rgba(8, 47, 87, .12);
  --shadow-sm: 0 10px 30px rgba(4, 31, 58, .08);
  --shadow-md: 0 22px 60px rgba(4, 31, 58, .13);
  --shadow-lg: 0 34px 90px rgba(4, 31, 58, .18);
}

html { color-scheme: light; }
body {
  background:
    radial-gradient(circle at 8% 4%, rgba(110, 184, 235, .10), transparent 24rem),
    linear-gradient(180deg, #f8fbfe 0%, #f2f7fb 100%);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(73, 164, 229, .45);
  outline-offset: 3px;
}

/* Stronger readable top navigation */
.lang-bar {
  background: #031b32;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.lang-bar span { color: rgba(255,255,255,.72); }
.lang-btn { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.24); }
.lang-btn:hover, .lang-btn.active {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.navbar { padding-top: 17px; }
.navbar.scrolled {
  background: rgba(4,31,58,.91);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 45px rgba(2,20,38,.24);
  backdrop-filter: blur(22px) saturate(145%);
}
.logo-icon {
  border: 3px solid #2e91d5 !important;
  box-shadow: 0 9px 28px rgba(10, 99, 166, .32), 0 0 0 4px rgba(255,255,255,.10);
}
.logo-text { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.24); }
.logo-text span { color: #a7d9fb; }
.nav-links a { color: rgba(255,255,255,.94); }
.nav-links a:hover { color: #b9e2ff; }
.mobile-menu-btn { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }

/* Hero: cinematic, but high contrast */
.hero-slider { background: #031f3a; }
.slide-overlay {
  background:
    linear-gradient(90deg, rgba(2,24,46,.91) 0%, rgba(3,40,72,.72) 48%, rgba(3,34,61,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}
.slide-content { max-width: 980px; }
.slide-badge {
  background: rgba(255,255,255,.12);
  color: #e7f5ff;
  border-color: rgba(183,226,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.slide-title { letter-spacing: -.025em; text-shadow: 0 9px 38px rgba(0,0,0,.45); }
.slide-title .highlight { color: #8fd1ff; }
.slide-title .highlight::after { background: #4da9e8; opacity: .22; }
.slide-subtitle { color: rgba(255,255,255,.91); text-shadow: 0 3px 18px rgba(0,0,0,.38); }
.btn-primary, .nav-cta, .form-submit {
  background: linear-gradient(135deg, #0b70be 0%, #168edc 100%);
  border-color: #168edc;
  box-shadow: 0 15px 36px rgba(7, 86, 147, .28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover, .nav-cta:hover, .form-submit:hover {
  background: linear-gradient(135deg, #075693, #0b70be);
  color: #fff;
  border-color: #8fd1ff;
  box-shadow: 0 20px 46px rgba(7,86,147,.36);
}
.btn-secondary {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.48);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: #fff; color: var(--primary); }
.arrow { background: rgba(3,31,56,.46); border-color: rgba(255,255,255,.32); }

/* Cards and light sections */
.stats-section {
  background: linear-gradient(135deg, #041f3a 0%, #073b69 100%);
}
.stat-card {
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
}
.stat-label { color: rgba(255,255,255,.82); }
.stat-icon { color: #83c8f5; }
.about-section, .gallery-section, .partners-section {
  background: linear-gradient(180deg, #fff 0%, #f5f9fc 100%);
}
.about-img-main, .about-img-float { box-shadow: var(--shadow-lg); }
.about-content p, .facility-copy { color: #4b657c; }
.feature-item {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.feature-item:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* Make section headings readable on both light and dark backgrounds */
.section-header .tag {
  color: #0a64aa;
  background: rgba(10,100,170,.09);
  border: 1px solid rgba(10,100,170,.16);
  border-radius: 999px;
  padding: 7px 16px;
  letter-spacing: 2.4px;
}
.gallery-section .section-header h2,
.partners-section .section-header h2,
.facility-section .section-header h2,
.weather-section .section-header h2 { color: var(--primary) !important; }
.gallery-section .section-header p,
.partners-section .section-header p,
.facility-section .section-header p,
.weather-section .section-header p { color: #516b82 !important; }
.schedule-section .section-header .tag,
.live-section .section-header .tag {
  color: #dff2ff !important;
  background: rgba(133,204,250,.14);
  border-color: rgba(175,222,251,.34);
}
.schedule-section .section-header h2,
.live-section .section-header h2 { color: #fff !important; }
.schedule-section .section-header p,
.live-section .section-header p { color: rgba(255,255,255,.82) !important; }

/* Schedule: premium glass timeline and WCAG-friendly labels */
.schedule-section {
  background:
    radial-gradient(circle at 90% 5%, rgba(92,179,238,.19), transparent 30rem),
    radial-gradient(circle at 8% 92%, rgba(40,130,196,.17), transparent 28rem),
    linear-gradient(145deg, #041f3a 0%, #07355e 52%, #052945 100%);
}
.timeline::before { width: 2px; background: linear-gradient(#9ed8fb, #1988d4, #74c5f5); }
.timeline-item {
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  border: 1px solid rgba(198,232,253,.18);
  box-shadow: 0 18px 55px rgba(1,18,34,.20), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
}
.timeline-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.145), rgba(255,255,255,.075));
  border-color: rgba(165,219,252,.38);
  box-shadow: 0 26px 72px rgba(1,18,34,.30);
}
.timeline-date {
  background: #dff2ff;
  color: #063763;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.timeline-title { color: #fff; }
.timeline-location { color: rgba(255,255,255,.83); }
.timeline-location i { color: #9fd9fb; }
.timeline-distance {
  background: rgba(137,207,249,.14);
  color: #e5f6ff;
  border: 1px solid rgba(157,216,250,.25);
}
.timeline-badge {
  background: linear-gradient(135deg, #3e9edc, #7cc8f4);
  color: #042b4d;
  box-shadow: 0 9px 25px rgba(0,0,0,.17);
}
.timeline-dot { background: #9ed8fb; border-color: #052b4c; }

/* Weather and facilities */
.weather-section {
  background: linear-gradient(180deg, #eef6fc 0%, #fff 100%);
}
.weather-card, .facility-card {
  border: 1px solid rgba(8,47,87,.12);
  box-shadow: var(--shadow-md);
}
.weather-toolbar button, .weather-location-btn {
  color: #173a58;
  border-color: rgba(8,47,87,.15);
}
.weather-toolbar button.active, .weather-location-btn.active {
  color: #fff;
}
.facility-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(72,163,226,.11), transparent 34%),
    linear-gradient(180deg, #f5f9fc 0%, #eaf3fa 100%);
}
.facility-card::after { background: linear-gradient(to top, rgba(2,25,47,.92), rgba(2,25,47,.05) 72%); }
.facility-card figcaption { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.65); }

/* Live and gallery */
.live-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(59,150,213,.14), transparent 32rem),
    linear-gradient(145deg, #041d35 0%, #062d50 100%);
}
.live-main, .camera-card {
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 20px 55px rgba(1,17,31,.18);
}
.live-info p { color: rgba(255,255,255,.78); }
.camera-info p { color: rgba(255,255,255,.74); }
.camera-thumb i { color: rgba(255,255,255,.45); }
.gallery-item { box-shadow: var(--shadow-md); border: 1px solid rgba(8,47,87,.10); }
.gallery-overlay { background: linear-gradient(to top, rgba(2,25,47,.94), rgba(2,25,47,.05) 72%); }
.gallery-overlay p { color: rgba(255,255,255,.84); }
.partner-logo { color: #304d66; opacity: .82; border: 1px solid rgba(8,47,87,.10); }

/* Footer contrast */
.footer {
  background:
    radial-gradient(circle at 50% -20%, rgba(64,160,224,.14), transparent 30rem),
    linear-gradient(155deg, #031a30 0%, #052b4c 100%);
}
.footer-brand p, .footer-col ul li a { color: rgba(255,255,255,.76); }
.footer-bottom p { color: rgba(255,255,255,.68); }
.photo-credit { color: rgba(255,255,255,.68); }
.footer-col ul li a i { color: #8fcff7; }

/* Forms and modal */
.modal-overlay { background: rgba(2,18,34,.76); }
.modal-box {
  border: 1px solid rgba(8,47,87,.12);
  box-shadow: 0 35px 100px rgba(2,18,34,.32);
}
.form-group input, .form-group select, .form-group textarea {
  color: var(--text);
  background: #fff;
  border-color: rgba(8,47,87,.17);
}
.form-group input::placeholder { color: #6f8396; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #1886cf;
  box-shadow: 0 0 0 4px rgba(24,134,207,.13);
}

/* Member and admin: same premium visual language */
.member-body, .admin-body {
  background:
    radial-gradient(circle at 82% 0%, rgba(87,174,230,.10), transparent 26rem),
    #f3f7fb !important;
  color: var(--text);
}
.member-sidebar, .admin-sidebar {
  background: linear-gradient(180deg, #031d35 0%, #06365f 100%) !important;
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 16px 0 45px rgba(3,28,50,.12);
}
.member-logo span, .admin-logo span { color: #9ed8fb !important; }
.member-menu li a, .admin-menu li a { color: rgba(255,255,255,.80) !important; }
.member-menu li a:hover, .member-menu li a.active,
.admin-menu li a:hover, .admin-menu li a.active {
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  border-left-color: #83c8f5 !important;
}
.member-header, .admin-header {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(8,47,87,.10) !important;
  border-radius: 18px;
  padding: 18px 22px !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
.member-card, .admin-card, .admin-stat-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(8,47,87,.10) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}
.member-card:hover, .admin-stat-card:hover { box-shadow: var(--shadow-md) !important; }
.member-card h3, .admin-card h3, .admin-header h1, .member-header h1 { color: var(--primary) !important; }
.info-item, .race-card, .upload-area, .admin-table th {
  background: #f6f9fc !important;
  border-color: rgba(8,47,87,.10) !important;
}
.info-label, .admin-stat-info p, .upload-area p { color: #526b82 !important; }
.info-value, .admin-table td, .upload-area h4 { color: #17364f !important; }
.admin-table tr:hover td { background: #eef5fb !important; }
.badge-success, .badge-warning, .badge-danger, .badge-info {
  color: #075693 !important;
  background: #dff2ff !important;
  border: 1px solid rgba(11,111,189,.18);
}
.btn-add, .btn-edit, .btn-delete, .search-box button {
  background: linear-gradient(135deg, #0b70be, #168edc) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(7,86,147,.20);
}

@media (max-width: 768px) {
  .navbar { background: rgba(3,29,53,.66); backdrop-filter: blur(14px); }
  .nav-links.mobile-open {
    background: rgba(3,29,53,.98) !important;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .slide-subtitle { color: rgba(255,255,255,.94); }
  .section-header { margin-bottom: 48px; }
  .timeline-item { padding: 24px 20px; }
  .timeline-location { color: rgba(255,255,255,.88); }
  .member-header, .admin-header { border-radius: 14px; padding: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Porto International OLR — decisive readability fixes v12 */
.stats-section {
  background:
    radial-gradient(circle at 15% 0%, rgba(83, 174, 232, .17), transparent 24rem),
    linear-gradient(135deg, #edf6fc 0%, #f8fbfe 52%, #e7f2fa 100%) !important;
  border-top: 1px solid rgba(8, 47, 87, .08);
  border-bottom: 1px solid rgba(8, 47, 87, .08);
}
.stats-section::before {
  background: radial-gradient(circle, rgba(11,116,201,.12) 0%, transparent 70%) !important;
}
.stat-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(8,47,87,.11) !important;
  box-shadow: 0 18px 48px rgba(4,31,58,.10), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(14px);
}
.stat-card:hover {
  background: #fff !important;
  box-shadow: 0 25px 65px rgba(4,31,58,.15) !important;
}
.stat-card::before {
  height: 4px !important;
  background: linear-gradient(90deg, #075693, #39a3e8) !important;
  transform: scaleX(1) !important;
  opacity: .78;
}
.stat-icon { color: #0b70be !important; filter: drop-shadow(0 8px 16px rgba(11,112,190,.18)); }
.stat-number,
.stat-number .counter {
  color: #052b52 !important;
  text-shadow: none !important;
}
.stat-label {
  color: #3e5a72 !important;
  font-weight: 650 !important;
}

.facility-section .section-header {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.facility-section .section-header .tag {
  color: #fff !important;
  background: linear-gradient(135deg, #075693, #168edc) !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(7,86,147,.22);
}
.facility-section .section-header h2 {
  color: #031f3a !important;
  font-weight: 900 !important;
  letter-spacing: -.025em;
  text-shadow: 0 1px 0 #fff;
}
.facility-section .section-header p {
  color: #36536c !important;
  font-weight: 550 !important;
  line-height: 1.75 !important;
}
.facility-copy {
  color: #27465f !important;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(8,47,87,.10);
  border-left: 4px solid #0b70be;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 14px 38px rgba(4,31,58,.08);
  font-weight: 520;
}
.facility-card::after {
  background: linear-gradient(180deg, rgba(2,25,47,.02) 28%, rgba(2,25,47,.94) 100%) !important;
}
.facility-card figcaption {
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.82) !important;
}

@media (max-width: 768px) {
  .stat-number { font-size: clamp(28px, 9vw, 42px) !important; }
  .stat-label { color: #36536c !important; }
  .facility-section .section-header h2 { font-size: clamp(28px, 8vw, 38px) !important; }
  .facility-copy { padding: 17px 16px; }
}