/* Font Declarations */
@font-face {
    font-family: 'FreightSans Book';
    src: url('../fonts/FreightSans Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Freight Disp Pro Semibold';
    src: url('../fonts/Freight-Disp-Pro-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Freight Disp Cmp Pro Light';
    src: url('../fonts/Freight-Disp-Cmp-Pro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* CSS Variable Overrides */
:root {
    /* Custom color variables */
    --primary-fg: #ED773B; /* Narandzasta - slova */
    --primary-bg:#2C2113; /* Tamna - pozadina ili tamna slova */

    --secondary-fg:#FDEFBA; /*slova na tamnoj pozadini */

    --secondary-bg: #FAF4DA; /*svetla pozadina */
    --secondary-bg-darker:#F1EACF; /*sivkasto na svetloj pozadini */

    --tertiary-bg-darker: #91B6BC; /*golubije plava - tamnija */
    --tertiary-bg: #BECAC3; /*golubije plava - svetlije */

    /* Font variables for easy switching */
    --header-font: 'Freight Disp Pro Semibold', serif;
    --header-font: 'Freight Disp Cmp Pro Light', serif;
    /* To switch to light version, change the line above to:
       --header-font: 'Freight Disp Cmp Pro Light', serif; */

    --body-font: 'FreightSans Book', sans-serif;

    /* Bootstrap font size override - increased by 20% from default 1rem (16px) */
    --bs-body-font-size: 1.4rem;

    /* Bootstrap border radius override - remove rounded corners globally */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;

    /* Bootstrap color overrides - must come after custom variables */
    --bs-primary: var(--primary-fg);
    --bs-primary-rgb: 237, 119, 59;
    --bs-link-color: var(--primary-fg);
    --bs-link-hover-color: #d86632;
    --bs-btn-bg: var(--primary-fg);
    --bs-btn-border-color: var(--primary-fg);
    --bs-btn-hover-bg: #d86632;
    --bs-btn-hover-border-color: #d86632;
}

/* Custom styles go below this line */

/* Apply body font */
body {
    font-family: var(--body-font);
}

/* Apply header font to all heading elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--header-font);
}

/* Increase h2 size by 50% */
h2, .h2 {
    font-size: calc(2rem * 1.5);
}

/* Hero section styles */
.hero {
    background-color: var(--primary-bg);
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
    color: var(--primary-fg);
}

.hero p,
.hero .lead {
    color: var(--secondary-fg);
}

/* Hero gallery with overlapping images */
.hero-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hero-gallery-item {
    flex: 0 0 auto;
    width: 14.29%; /* 100% / 7 images */
    margin: 0;
    margin-left: -1.43%; /* 10% overlap relative to image width */
}

.hero-gallery-item:first-child {
    margin-left: 0;
}

.hero-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) contrast(1.3) sepia(20%) hue-rotate(10deg) saturate(0.8);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.hero-gallery-item img:hover {
    transform: rotate(0deg) !important;
    filter: none;
}

/* Random rotation for each image */
.hero-gallery-item:nth-child(1) img { transform: rotate(-1.5deg); }
.hero-gallery-item:nth-child(2) img { transform: rotate(1.8deg); }
.hero-gallery-item:nth-child(3) img { transform: rotate(-1.2deg); }
.hero-gallery-item:nth-child(4) img { transform: rotate(2deg); }
.hero-gallery-item:nth-child(5) img { transform: rotate(-1.7deg); }
.hero-gallery-item:nth-child(6) img { transform: rotate(1.3deg); }
.hero-gallery-item:nth-child(7) img { transform: rotate(-1.9deg); }
.hero-gallery-item:nth-child(8) img { transform: rotate(1.6deg); }
.hero-gallery-item:nth-child(9) img { transform: rotate(-1.4deg); }

/* Mobile: 2 rows layout */
@media (max-width: 767.98px) {
    .hero-gallery {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-gallery-item {
        width: 25%; /* 4 images per row */
        margin-left: -2.5%; /* 10% overlap */
        margin-bottom: -15%;
    }

    .hero-gallery-item:first-child,
    .hero-gallery-item:nth-child(5) {
        margin-left: 0;
    }

    .hero-gallery-item:nth-child(n+5) {
        margin-bottom: 0;
    }
}

/* Services section styles */
#services {
    background-color: var(--tertiary-bg-darker);
}

#services h1,
#services h3,
#services h4,
#services h5,
#services h6,
#services p,
#services .lead,
#services .nav-link {
    color: var(--secondary-fg);
}

#services h2 {
    color: var(--primary-bg);
}

#services .nav-pills .nav-link {
    border-radius: 0;
    border: 2px solid transparent;
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease;
}

#services .nav-pills .nav-link:hover {
    background-color: var(--secondary-bg) !important;
    color: var(--primary-bg) !important;
    border: 2px solid var(--primary-bg);
}

#services .nav-pills .nav-link.active {
    background-color: var(--primary-bg) !important;
    color: var(--secondary-fg) !important;
}

/* Services area: remove gap between nav and content */
#services .row {
    gap: 0;
    margin-left: 0;
    margin-right: 0;
}

#services .col-md-3,
#services .col-md-9 {
    padding-left: 0;
    padding-right: 0;
}

/* Mobile: same width and no gap */
@media (max-width: 767.98px) {
    #services .col-md-3 {
        margin-bottom: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    #services .col-md-9 {
        width: 100%;
        max-width: 100%;
    }
}

/* Desktop: Nav pills to the left of tab content with no gap */
@media (min-width: 768px) {
    #services .col-md-3 {
        order: 1;
    }

    #services .col-md-9 {
        order: 2;
    }
}

#servicesTabContent {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-bg);
    padding: 1.5rem;
}

#servicesTabContent h1,
#servicesTabContent h2,
#servicesTabContent h3,
#servicesTabContent h4,
#servicesTabContent h5,
#servicesTabContent h6,
#servicesTabContent p {
    color: var(--primary-bg);
}

/* Clients section styles */
.clients {
    background-color: var(--secondary-bg) !important;
}

.clients h1,
.clients h2,
.clients h3,
.clients h4,
.clients h5,
.clients h6,
.clients p {
    color: var(--primary-bg);
}

.clients img {
    background-color: var(--secondary-bg-darker);
    padding: 1rem;
}

/* FAQ section styles */
#faq .accordion-button {
    font-size: calc(1rem * 1.5);
}

@media (min-width: 768px) {
    #faq .accordion {
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* About section styles */
#about {
    background-color: var(--secondary-bg);
}

#about h1,
#about h2,
#about h3,
#about h4,
#about h5,
#about h6,
#about p,
#about .lead {
    color: var(--primary-bg);
}

/* Footer styles */
footer {
    background-color: var(--primary-bg);
    color: var(--secondary-fg);
}

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

/* Primary button overrides */
.btn-primary {
    background-color: var(--primary-fg) !important;
    border-color: var(--primary-fg) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #d86632 !important;
    border-color: #d86632 !important;
    color: #fff !important;
}

/* Outline secondary button overrides */
.btn-outline-secondary {
    border-color: var(--primary-fg) !important;
    color: var(--primary-fg) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--primary-fg) !important;
    border-color: var(--primary-fg) !important;
    color: #fff !important;
}

/* Nav pills overrides */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-fg) !important;
    color: #fff !important;
}

.nav-pills .nav-link:hover {
    background-color: rgba(237, 119, 59, 0.1);
}

/* Accordion button overrides */
.accordion-button:not(.collapsed) {
    background-color: rgba(237, 119, 59, 0.1) !important;
    color: var(--primary-fg) !important;
}

.accordion-button:focus {
    border-color: var(--primary-fg) !important;
    box-shadow: 0 0 0 0.25rem rgba(237, 119, 59, 0.25) !important;
}

/* Link color overrides */
a {
    color: var(--primary-fg);
}

a:hover {
    color: #d86632;
}