/* ========================================================================== 
  Ime projekta: Auditing Sarajevo Website
  Opis: Glavna CSS datoteka za stiliziranje strukture i izgleda stranice.
  Autor: Virtual Office IT Services Sarajevo (virtualoffice.ba@gmail.com)
  Verzija: 2.0.0
  
  LICENCA I AUTORSKA PRAVA:
  © 2026 Virtual Office IT Services Sarajevo. Sva prava pridržana.
  Ovaj kod je vlasništvo autora. Zabranjeno je kopiranje, modificiranje,
  distribucija ili korištenje ovog koda u komercijalne i nekomercijalne 
  svrhe bez izričite pismene dozvole autora.
   ========================================================================== */

/* ==========================================================================
   1. Theme variables
   ========================================================================== */
:root {
 font-family: "Oxygen", sans-serif;
 font-size: 100%;
 line-height: 1.45;
 color: var(--color-text);
 background-color: var(--color-bg);

 --color-bg: #223c68;
 --color-surface: #efefef;
 --color-surface-alt: #455e85;
 --color-surface-hover: #576c90;
 --color-border: #354e77;
 --color-muted: #ccc;
 --color-muted-dark: #576c90;
 --color-text: #000;
 --color-text-inverse: #fff;
 --radius: 1rem;
 --radius-sm: 0.75rem;
 --radius-round: 999px;
 --transition-time: 0.25s ease;
}

/* ==========================================================================
   2. Global reset / base styles
   ========================================================================== */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 min-height: 100vh;
 min-width: 300px;
 background-color: var(--color-bg);
 color: var(--color-text);
 font-size: 1rem;
}

.skip-link {
 position: absolute;
 top: -999px;
 left: -999px;
 background: var(--color-bg);
 color: var(--color-text-inverse);
 padding: 0.75rem 1rem;
 z-index: 100;
}

.skip-link:focus {
 top: 1rem;
 left: 1rem;
}

a {
 color: var(--color-muted);
 text-decoration: none;
}

a:hover,
a:focus {
 color: var(--color-text-inverse);
 text-decoration: none;
}

a:focus-visible {
 outline: 3px solid var(--color-text-inverse);
 outline-offset: 3px;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.page {
 width: min(100%, 1200px);
 margin: 0 auto;
 padding: 1rem;
 display: grid;
 grid-template-columns: 1fr;
 gap: 1rem;
}

.sidebar {
 display: grid;
 gap: 1rem;
 align-self: start;
 max-width: 320px;
}

.page-body {
 display: grid;
 gap: 1.5rem;
 margin-top: 0;
 min-width: 0;
}

.logo-box {
 background-color: var(--color-surface);
 padding: 1rem;
 border-radius: var(--radius);
 display: grid;
 gap: 1rem;
 align-items: center;
}

.logo-left {
 display: grid;
 gap: 1rem;
 min-width: 0;
}

.logo-box img {
 width: 100%;
 height: auto;
}

.logo-text {
 margin: 0;
 color: var(--color-text);
 font-weight: 700;
 text-align: left;
 line-height: 1.2;
 letter-spacing: 0.01em;
 min-width: 0;
}

@media (max-width: 960px) {
 .logo-box {
  grid-template-columns: 1fr;
 }
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */
.site-nav {
 width: 100%;
}

.nav {
 list-style: none;
 margin: 0;
 padding: 0;
 border-top: 1px solid var(--color-bg);
 border-left: 4px solid var(--color-border);
 background-color: var(--color-bg);
 border-radius: var(--radius);
 overflow: hidden;
}

.nav li {
 border-bottom: 1px solid var(--color-bg);
}

.nav li:last-child {
 border-bottom: none;
}

.nav a {
 display: block;
 padding: 1rem;
 background-color: var(--color-surface-alt);
 color: var(--color-muted);
 transition:
  background-color var(--transition-time),
  color var(--transition-time);
}

.nav a:hover,
.nav a:focus {
 background-color: var(--color-surface-hover);
 color: var(--color-text-inverse);
}

.nav a[aria-current="page"] {
 background-color: #374f6f;
 color: var(--color-text-inverse);
}

/* ==========================================================================
   5. Navigation controls
   ========================================================================== */
.hamburger-toggle {
 display: none;
 border: none;
 background-color: var(--color-surface-alt);
 color: var(--color-text-inverse);
 border-radius: var(--radius-sm);
 padding: 0.55rem;
 cursor: pointer;
 transition:
  background-color var(--transition-time),
  transform var(--transition-time);
}

.hamburger-toggle:hover,
.hamburger-toggle:focus {
 background-color: var(--color-surface-hover);
}

.hamburger-toggle .hamburger-icon {
 position: relative;
 width: 1.35rem;
 height: 0.18rem;
 background-color: currentColor;
 border-radius: var(--radius-round);
 display: inline-block;
}

.hamburger-wrapper {
 display: none;
}

@media (max-width: 960px) {
 .hamburger-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
 }

 .hamburger-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0;
  border-radius: var(--radius);
 }
}

.hamburger-toggle .hamburger-icon::before,
.hamburger-toggle .hamburger-icon::after {
 content: "";
 position: absolute;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: currentColor;
 border-radius: var(--radius-round);
}

.hamburger-toggle .hamburger-icon::before {
 top: -0.45rem;
}

.hamburger-toggle .hamburger-icon::after {
 top: 0.45rem;
}

/* ==========================================================================
   6. Content blocks
   ========================================================================== */
.content {
 display: grid;
 gap: 1.5rem;
}

.content.content--gray {
 background-color: var(--color-surface);
 padding: 1.5rem;
 border-radius: var(--radius);
}

.content.content--gray section {
 padding: 1rem 0;
}

.content section {
 padding: 1rem 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.text-plavi-eng {
 color: #333399;
}

/* ==========================================================================
   7. Table styles
   ========================================================================== */
.ref-table-wrapper {
 overflow-x: auto;
 background: none;
 border: none;
 border-radius: 0;
 padding: 1rem 0;
 margin: 1rem 0;
}

.ref-table-wrapper .ref-table {
 width: 100%;
 min-width: 0;
 border-collapse: collapse;
 border-spacing: 0;
 table-layout: auto;
}

.ref-table-wrapper .ref-table th,
.ref-table-wrapper .ref-table td {
 padding: 0.85rem 1rem;
 text-align: left;
 vertical-align: middle;
 border: none;
 white-space: normal;
 word-break: break-word;
}

.ref-table-wrapper .ref-table th:first-child,
.ref-table-wrapper .ref-table td:first-child {
 width: 40%;
}

.ref-table-wrapper .ref-table th:last-child,
.ref-table-wrapper .ref-table td:last-child {
 width: 60%;
}

.ref-table-wrapper .ref-table th {
 background-color: rgba(0, 0, 0, 0.08);
 font-weight: 700;
}

.ref-table-wrapper .ref-table tr:nth-child(odd) {
 background-color: #f2f2f2;
}

.ref-table-wrapper .ref-table tr:nth-child(even) {
 background-color: #ffffff;
}

.content section:last-child {
 border-bottom: none;
}

.content h2,
.content h3,
.content h4 {
 margin: 0 0 0.75rem;
 line-height: 1.2;
}

.content h2 {
 font-size: clamp(1.6rem, 2.3vw, 2rem);
}

.content h3 {
 font-size: clamp(1.35rem, 1.75vw, 1.6rem);
}

.content h4 {
 font-size: clamp(1.1rem, 1.3vw, 1.25rem);
}

.content p,
.content ul,
.content ol {
 margin: 0;
 font-size: 1rem;
}

.content ul,
.content ol {
 padding-left: 1.25rem;
}

.content ul li,
.content ol li {
 margin-bottom: 0.65rem;
}

/* ==========================================================================
   8. Utility components
   ========================================================================== */
.hero {
 background-color: var(--color-surface);
 padding: 0.75rem;
 border-radius: var(--radius);
}

.hero img,
.contact-image {
 width: 100%;
 height: auto;
 border-radius: var(--radius);
}

.download-section {
 margin-top: 1rem;
}

.download-button {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: auto;
 max-width: 100%;
 padding: 1rem 1.4rem 1rem 4.25rem;
 background-color: #374f6f;
 color: #fff;
 text-decoration: none;
 border: 1px solid transparent;
 border-radius: 1rem;
 box-shadow: 0 12px 24px rgba(34, 60, 104, 0.18);
 transition:
  transform 0.25s ease,
  box-shadow 0.25s ease,
  background-color 0.25s ease,
  border-color 0.25s ease;
}

.download-button__icon-wrapper {
 position: absolute;
 left: 0.9rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.4rem;
 height: 2.4rem;
 background-color: transparent;
 border-radius: 0;
}

.download-button__label {
 font-weight: 700;
 font-size: 1rem;
}

.download-button:hover,
.download-button:focus-visible {
 transform: translateY(-1px);
 background-color: #2f4563;
 border-color: rgba(255, 255, 255, 0.18);
 box-shadow: 0 16px 28px rgba(34, 60, 104, 0.24);
}

.download-button:focus-visible {
 outline: 3px solid rgba(255, 255, 255, 0.3);
 outline-offset: 4px;
}

.download-button__icon-wrapper img {
 display: block;
 width: 100%;
 height: auto;
 filter: brightness(0) saturate(100%) invert(94%);
}

/* ==========================================================================
   9. Footer and utility elements
   ========================================================================== */
.site-footer {
 padding: 1rem;
 width: 100%;
 text-align: center;
 background-color: var(--color-bg);
 color: var(--color-muted-dark);
 font-size: 0.85rem;
}

/* ==========================================================================
   10. Floating actions
   ========================================================================== */
.back-to-top {
 position: fixed;
 right: 1.25rem;
 bottom: 1.25rem;
 width: 3rem;
 height: 3rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-color: var(--color-surface-alt);
 border-radius: 50%;
 opacity: 0;
 visibility: hidden;
 transition:
  opacity var(--transition-time),
  transform var(--transition-time);
 z-index: 10;
}

.back-to-top.visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
 background-color: var(--color-surface-hover);
}

.back-to-top img {
 width: 2rem;
 height: auto;
}

/* ==========================================================================
   11. Responsive layout
   ========================================================================== */
@media (min-width: 960px) {
 .page {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  align-items: start;
 }

 .sidebar {
  grid-column: 1;
  align-self: start;
 }

 .page-body {
  grid-column: 2;
 }

 .logo-text {
  font-size: 0.9rem;
  text-align: center;
 }
}

/* ==========================================================================
   12. Responsive: tablet and small desktop
   ========================================================================== */
@media (max-width: 960px) {
 .page {
  grid-template-columns: 1fr;
 }

 .sidebar {
  max-width: 100%;
 }

 .logo-box {
  display: grid;
  gap: 0.75rem;
  width: 100%;
 }

 .logo-text {
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  min-width: 0;
 }

 .site-nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
   max-height var(--transition-time),
   opacity var(--transition-time),
   visibility var(--transition-time);
 }

 .site-nav.open {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
 }

 .nav {
  margin-top: 0.75rem;
 }

 .site-footer {
  text-align: center;
 }
}

/* ==========================================================================
   13. Responsive: mobile
   ========================================================================== */
@media (max-width: 640px) {
 .page {
  padding: 0.75rem;
 }

 .logo-text {
  font-size: 0.9rem;
 }

 .content h2 {
  font-size: clamp(1.3rem, 5vw, 1.3rem);
 }

 .content h3 {
  font-size: clamp(1.1rem, 4vw, 1.2rem);
 }

 .content h4 {
  font-size: clamp(0.98rem, 3.5vw, 1.05rem);
 }

 .content p,
 .content ul,
 .content ol {
  font-size: 0.95rem;
 }

 .nav a {
  padding: 0.85rem 0.9rem;
 }

 .ref-table-wrapper {
  overflow-x: hidden;
 }

 .ref-table-wrapper .ref-table,
 .ref-table-wrapper .ref-table tbody,
 .ref-table-wrapper .ref-table tr {
  display: block;
  width: 100%;
 }

 .ref-table-wrapper .ref-table tr:first-child {
  display: none;
 }

 .ref-table-wrapper .ref-table tr {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  background-color: #fff;
 }

 .ref-table-wrapper .ref-table td {
  display: block;
  padding: 0.75rem 0;
  border: none;
 }

 .ref-table-wrapper .ref-table td + td {
  margin-top: 0.75rem;
 }

 .ref-table-wrapper .ref-table td::before {
  content: attr(data-label);
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #111;
 }

 .ref-table-wrapper .ref-table td:nth-of-type(1)::before {
  content: "DONATOR";
 }

 .ref-table-wrapper .ref-table td:nth-of-type(2)::before {
  content: "IMPLEMENTING PARTNERI";
 }
}

/* ==========================================================================
   14. Responsive: extra small screens
   ========================================================================== */
@media (max-width: 480px) {
 .content h2 {
  font-size: 1.15rem;
 }

 .content h3 {
  font-size: 1.05rem;
 }

 .content h4 {
  font-size: 0.95rem;
 }

 .content p,
 .content ul,
 .content ol {
  font-size: 0.9rem;
 }
}

.download-section {
 margin-top: 1rem;
}

.download-button {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: auto;
 max-width: 100%;
 padding: 1rem 1.4rem 1rem 4.25rem;
 background-color: #374f6f;
 color: #fff;
 text-decoration: none;
 border: 1px solid transparent;
 border-radius: 1rem;
 box-shadow: 0 12px 24px rgba(34, 60, 104, 0.18);
 transition:
  transform 0.25s ease,
  box-shadow 0.25s ease,
  background-color 0.25s ease,
  border-color 0.25s ease;
}

.download-button__icon-wrapper {
 position: absolute;
 left: 0.9rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.4rem;
 height: 2.4rem;
 background-color: transparent;
 border-radius: 0;
}

.download-button__label {
 font-weight: 700;
 font-size: 1rem;
}

.download-button:hover,
.download-button:focus-visible {
 transform: translateY(-1px);
 background-color: #2f4563;
 border-color: rgba(255, 255, 255, 0.18);
 box-shadow: 0 16px 28px rgba(34, 60, 104, 0.24);
}

.download-button:focus-visible {
 outline: 3px solid rgba(255, 255, 255, 0.3);
 outline-offset: 4px;
}

.download-button__icon-wrapper img {
 display: block;
 width: 100%;
 height: auto;
 filter: brightness(0) saturate(100%) invert(94%);
}

@media (max-width: 640px) {
 .download-button {
  max-width: 100%;
  padding-left: 3.5rem;
 }
}