/* ============================================================
   GLOBAL.CSS – CSS Varijable, Reset, Tipografija
   Udruga Sjećanje
   ============================================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Open+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   1. CSS VARIJABLE
   ============================================================ */
:root {
    /* --- Boje --- */
    --color-primary:        #3D0D0D;
    --color-primary-light:  #5C1515;
    --color-primary-dark:   #1A0505;
    --color-secondary:      #C9A84C;
    --color-secondary-dark: #A8882A;
    --color-dark:           #0F0303;
    --color-text:           #FFFFFF;
    --color-text-muted:     #B0A090;
    --color-text-dark:      #1A0505;
    --color-border:         rgba(201, 168, 76, 0.2);
    --color-overlay:        rgba(15, 3, 3, 0.75);
    --color-overlay-light:  rgba(61, 13, 13, 0.6);
    --color-footer-bg:      #0F0303;
    --color-icon-bar-bg:    #2C0A0A;

    /* --- Tipografija --- */
    --font-heading:         'Playfair Display', Georgia, serif;
    --font-body:            'Open Sans', -apple-system, sans-serif;

    --size-xs:   0.75rem;    /* 12px */
    --size-sm:   0.875rem;   /* 14px */
    --size-base: 1rem;       /* 16px */
    --size-md:   1.125rem;   /* 18px */
    --size-lg:   1.25rem;    /* 20px */
    --size-xl:   1.5rem;     /* 24px */
    --size-2xl:  2rem;       /* 32px */
    --size-3xl:  2.5rem;     /* 40px */
    --size-4xl:  3.5rem;     /* 56px */
    --size-5xl:  4.5rem;     /* 72px */

    /* --- Spacing --- */
    --section-padding:    80px 0;
    --section-padding-sm: 50px 0;
    --container-width:    1200px;
    --container-padding:  0 20px;
    --gap-sm:   16px;
    --gap-md:   24px;
    --gap-lg:   40px;
    --gap-xl:   60px;

    /* --- Tranzicije --- */
    --transition:      all 0.3s ease;
    --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: all 0.15s ease;

    /* --- Border Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* --- Sjene --- */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.2);

    /* --- Z-indeksi --- */
    --z-header:  1000;
    --z-overlay: 900;
    --z-modal:   2000;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-primary-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-body);
}

/* ============================================================
   3. TIPOGRAFIJA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: clamp(var(--size-3xl), 5vw, var(--size-5xl)); }
h2 { font-size: clamp(var(--size-2xl), 3vw, var(--size-4xl)); }
h3 { font-size: clamp(var(--size-xl), 2vw, var(--size-3xl)); }
h4 { font-size: var(--size-xl); }
h5 { font-size: var(--size-lg); }
h6 { font-size: var(--size-md); }

p {
    font-size: var(--size-base);
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ============================================================
   4. UTILITY KLASE
   ============================================================ */

/* Kontejner */
.us-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--container-padding);
    width: 100%;
}

/* Sekcija */
.us-section {
    padding: var(--section-padding);
}

.us-section--dark {
    background-color: var(--color-primary-dark);
}

.us-section--primary {
    background-color: var(--color-primary);
}

.us-section--icon-bar {
    background-color: var(--color-icon-bar-bg);
}

/* Naslovi sekcija */
.us-section-title {
    font-family: var(--font-heading);
    color: var(--color-text);
    margin-bottom: 8px;
}

.us-section-title span {
    color: var(--color-secondary);
}

.us-section-subtitle {
    color: var(--color-text-muted);
    font-size: var(--size-md);
    margin-bottom: 40px;
}

/* Zlatna linija dekoracija */
.us-gold-line {
    width: 60px;
    height: 2px;
    background: var(--color-secondary);
    margin: 16px 0 32px 0;
}

.us-gold-line--center {
    margin: 16px auto 32px;
}

/* Tekst boje */
.us-text-gold    { color: var(--color-secondary); }
.us-text-muted   { color: var(--color-text-muted); }
.us-text-white   { color: var(--color-text); }
.us-text-center  { text-align: center; }
.us-text-upper   { text-transform: uppercase; letter-spacing: 0.1em; }

/* Flex utilities */
.us-flex         { display: flex; }
.us-flex-center  { display: flex; align-items: center; justify-content: center; }
.us-flex-between { display: flex; align-items: center; justify-content: space-between; }
.us-flex-gap-sm  { gap: var(--gap-sm); }
.us-flex-gap-md  { gap: var(--gap-md); }

/* Grid utilities */
.us-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
.us-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.us-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }

/* ============================================================
   5. ANIMACIJE
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(201, 168, 76, 0); }
}

/* Klase za animaciju na scroll (aktivira JS) */
.us-animate {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.us-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.us-animate--left {
    transform: translateX(-25px);
}

.us-animate--left.is-visible {
    transform: translateX(0);
}

/* ============================================================
   6. OVERRIDE ELEMENTOR DEFAULTS
   ============================================================ */

/* Makni Elementor default margin/padding */
.elementor-section {
    margin-bottom: 0 !important;
}

/* Elementor kontejner */
.elementor-container {
    max-width: var(--container-width) !important;
}

/* Osiguraj da naši fontovi rade u Elementoru */
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
    font-family: var(--font-heading) !important;
}

/* ============================================================
   7. SCROLLBAR STILIZACIJA
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* ============================================================
   8. SELEKCIJA TEKSTA
   ============================================================ */
::selection {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
}


/* ── Hero full width fix ── */
.elementor-page .site-content,
.elementor-page #primary,
.elementor-page #content,
.elementor-page main.site-main,
.elementor-page .content-area,
body.elementor-page {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hello Elementor specifično */
body.elementor-page .site-content .content-area {
    width: 100% !important;
    float: none !important;
}