/* Shared site styles — Ada Međica Plivački Maraton
   Loaded on every page after Bootstrap so these rules can override it. */

:root {
  --color-primary: #0b3d5c;
  --color-secondary: #1c7293;
  --color-bg: #f7f9fa;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #5b6b73;
  --color-accent: #ff6b4a;
  --color-accent-dark: #e14e2d;
  --shadow-soft: 0 10px 30px rgba(11, 61, 92, 0.12);
  --shadow-lift: 0 16px 40px rgba(11, 61, 92, 0.18);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font: 400 16px/1.7 'Inter', sans-serif;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding-top: 76px;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  color: var(--color-primary);
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
  font-weight: 600;
}

h3 {
  font-size: 26px;
}

h4 {
  padding: 0;
  font-size: 18px;
}

a {
  color: var(--color-secondary);
}

a:hover {
  color: var(--color-accent);
}

.container {
  padding: 60px 40px;
  max-width: 1140px;
}

.person {
  border: 6px solid var(--color-surface);
  margin-bottom: 20px;
  width: 80%;
  height: 80%;
  opacity: 1;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.person:hover {
  border-color: var(--color-surface);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

img.rounded-circle {
  box-shadow: var(--shadow-soft);
}

.btn {
  padding: 10px 22px;
  background-color: var(--color-secondary);
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  transition: .2s;
}

.btn:hover,
.btn:focus {
  border: 1px solid var(--color-secondary);
  background-color: #fff;
  color: var(--color-secondary);
}

.navbar {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0;
  background-color: var(--color-primary);
  border: 0;
  border-bottom: 3px solid var(--color-accent);
  min-height: 76px;
  font-size: 14px !important;
  letter-spacing: 2.5px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.navbar-brand {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  height: auto !important;
  padding: 26px 15px !important;
}

.navbar-nav > li > a {
  padding-top: 30px !important;
  padding-bottom: 27px !important;
}

.navbar li a,
.navbar .navbar-brand {
  color: #eaf3f8 !important;
  font-weight: 600;
}

.navbar-nav li a {
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.navbar-nav li a:hover {
  color: #fff !important;
  border-bottom-color: var(--color-accent);
}

.navbar-nav li.active a {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom-color: var(--color-accent);
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  margin-top: 21px;
}

.open .dropdown-toggle {
  color: #fff;
  background-color: var(--color-secondary) !important;
}

.dropdown-menu {
  background-color: var(--color-primary) !important;
}

/* In a navbar-right nav, dropdowns align under the toggle's left edge by
   default, which pushes them past the right edge of the viewport since the
   toggle itself sits at the far right. Align right instead. */
.navbar-right .dropdown-menu {
  right: 0;
  left: auto;
}

.dropdown-menu li a {
  color: #eaf3f8 !important;
}

.dropdown-menu li a:hover {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}

footer {
  background-color: var(--color-primary);
  color: #dce9f0;
  padding: 50px 32px 30px;
}

footer a {
  color: #dce9f0;
}

footer h3 {
  color: #fff;
}

footer p {
  color: #9db6c3;
}

footer a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.up-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.up-arrow:hover {
  background: var(--color-accent);
}

.form-control {
  border-radius: 6px;
}

textarea {
  resize: none;
}

.logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.logo {
  width: auto;
  height: 95px;
  padding: 14px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.event-badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 10px 28px;
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-soft);
}

/* Big stacked call-to-action link, used e.g. on the applications page */
.btn-apply-link {
  margin: 10px 0;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  display: inline-block;
  transition: background-color 0.25s ease-in-out, transform 0.2s ease;
}

.btn-apply-link:hover {
  background-color: var(--color-accent-dark);
  color: #fff;
  text-decoration: none;
  transform: scale(1.03);
}

/* Results tables */
.table-dark {
  background-color: var(--color-primary) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--color-secondary) !important;
  color: #fff;
}

.table-dark a {
  color: #cfe3ee;
}

.table-dark a:hover {
  color: #fff;
}

@media (max-width: 600px) {
  body {
    padding-top: 58px;
  }

  .navbar {
    min-height: 58px;
  }

  .navbar-brand {
    font-size: 16px !important;
    padding: 17px 15px !important;
  }

  .navbar-default .navbar-toggle {
    margin-top: 12px;
  }

  .btn-apply-link {
    font-size: 16px;
    padding: 14px 22px;
    width: 90%;
    max-width: 90vw;
    white-space: normal;
    word-wrap: break-word;
  }

  .container {
    padding: 40px 20px;
  }
}