/* ================================================================
   SPKD Prosvjeta — Zajednicki layout CSS
   Header, Footer, Mobile Nav, Buttons
   Ucitava se na svim custom stranicama (index + blog postovi)
   ================================================================ */

/* BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reset Astra/WP theme html font-size override (87.5%) back to standard 16px
   so rem-based nav sizes are correct on all pages */
html { font-size: 16px !important; }
body { font-family: 'Montserrat', system-ui, sans-serif; font-size: 16px; color: #1a1a2e; background: #f6f8fb; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* CSS VARIJABLE */
:root {
  --blue:       #023969;
  --blue-deep:  #011f3d;
  --red:        #c62f32;
  --red-dark:   #9e2325;
  --white:      #ffffff;
  --bg:         #f6f8fb;
  --bg-dark:    #edf1f7;
  --text:       #1a1a2e;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Montserrat', system-ui, sans-serif;
  --radius:     4px;
  --shadow:     0 4px 20px rgba(2,57,105,0.12);
  --shadow-lg:  0 12px 48px rgba(2,57,105,0.22);
  --trans:      0.32s cubic-bezier(0.4,0,0.2,1);
}

/* HEADER */
.p-hdr {
  position: fixed; top: 0; left: 0; right: 0; height: 80px;
  background: var(--blue-deep); border-bottom: 3px solid var(--red);
  z-index: 9999; display: flex; align-items: center;
  padding: 0 clamp(1rem,4vw,3rem); transition: box-shadow var(--trans);
}
.p-hdr.scrolled { box-shadow: 0 4px 24px rgba(1,31,61,0.5); }
.p-hdr-inner { width:100%; max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.p-hdr-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.p-hdr-logo img { height:50px; width:auto; filter:drop-shadow(0 5px 10px rgba(0,0,0,0.3)); transition:transform var(--trans); }
.p-hdr-logo:hover img { transform:scale(1.05); }
.p-hdr-logo-name { display:flex; flex-direction:column; line-height:1.8; }
.p-hdr-logo-name strong { font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--white); letter-spacing:0.02em; }
.p-hdr-logo-name span { font-family:var(--sans); font-size:0.58rem; font-weight:600; color:rgba(255,255,255,0.5); letter-spacing:0.18em; text-transform:uppercase; }
.p-hdr-nav { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.p-hdr-nav a { font-family:var(--sans); font-size:0.72rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.78); padding:0.45rem 0.8rem; border-radius:var(--radius); transition:color var(--trans),background var(--trans); white-space:nowrap; display:block; }
.p-hdr-nav a:hover, .p-hdr-nav a.active { color:var(--white); background:rgba(255,255,255,0.1); }
.p-nav-cta a { background:var(--red) !important; color:var(--white) !important; padding:0.45rem 1.1rem !important; font-weight:700 !important; }
.p-nav-cta a:hover { background:var(--red-dark) !important; }

/* Dropdown */
.p-nav-dropdown { position:relative; }
.p-nav-dropdown-toggle { display:flex !important; align-items:center; gap:4px; cursor:default; user-select:none; }
.p-nav-arrow { font-size:0.55em; line-height:1; display:inline-block; transition:transform 0.22s ease; }
.p-nav-dropdown:hover .p-nav-arrow { transform:rotate(180deg); }
.p-dropdown-menu { position:absolute; top:calc(100% + 4px); left:0; background:var(--blue-deep); border-top:2px solid var(--red); min-width:200px; list-style:none; padding:0.4rem 0; margin:0; box-shadow:0 10px 28px rgba(0,0,0,0.4); border-radius:0 0 6px 6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s; z-index:10000; }
.p-nav-dropdown:hover .p-dropdown-menu, .p-nav-dropdown:focus-within .p-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.p-dropdown-menu li { list-style:none; }
.p-dropdown-menu a { display:block !important; padding:0.55rem 1.3rem !important; font-family:var(--sans) !important; font-size:0.71rem !important; font-weight:600 !important; letter-spacing:0.08em !important; text-transform:uppercase !important; color:rgba(255,255,255,0.7) !important; background:transparent !important; border-radius:0 !important; white-space:nowrap; transition:color 0.15s,background 0.15s,padding-left 0.15s; }
.p-dropdown-menu a:hover { color:var(--white) !important; background:rgba(255,255,255,0.08) !important; padding-left:1.6rem !important; }

/* Hamburger */
.p-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0; }
.p-hamburger span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:all 0.3s ease; transform-origin:center; }
.p-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.p-hamburger.open span:nth-child(2) { opacity:0; }
.p-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.p-mobile-nav { position:fixed; top:0; right:-100%; width:min(300px,88vw); height:100vh; background:var(--blue-deep); border-left:3px solid var(--red); z-index:10000; padding:90px 1.5rem 2rem; display:flex; flex-direction:column; gap:0; list-style:none; transition:right 0.4s cubic-bezier(0.4,0,0.2,1); overflow-y:auto; }
.p-mobile-nav.open { right:0; }
.p-mobile-nav a { display:block; font-family:var(--sans); font-size:0.9rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.75); padding:1rem 0; border-bottom:1px solid rgba(255,255,255,0.08); transition:color var(--trans),padding var(--trans); }
.p-mobile-nav a:hover { color:var(--white); padding-left:6px; }
.p-mobile-nav .p-nav-cta a { color:var(--red) !important; font-weight:700; }
.p-nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); z-index:9998; display:none; }
.p-nav-overlay.open { display:block; }

/* BUTTONS */
.p-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:0.9rem 2rem; border-radius:var(--radius); transition:all var(--trans); cursor:pointer; text-decoration:none; }
.p-btn-primary { background:var(--red); color:var(--white); border:2px solid var(--red); }
.p-btn-primary:hover { background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(198,47,50,0.35); }
.p-btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.5); }
.p-btn-outline:hover { border-color:var(--white); background:rgba(255,255,255,0.1); transform:translateY(-2px); }

/* FOOTER */
.p-ftr { background:var(--blue-deep); }
.p-ftr-top { height:56px; background-color:var(--blue-deep); border-top:2px solid rgba(198,47,50,0.4); }
.p-ftr-main { padding:clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,3rem) 0; }
.p-ftr-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:2.5rem; max-width:1300px; margin:0 auto 3rem; }
.p-ftr-name { font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--white); display:block; margin-bottom:3px; }
.p-ftr-sub { font-family:var(--sans); font-size:0.58rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.38); display:block; margin-bottom:1rem; }
.p-ftr-quote { font-family:var(--serif); font-style:italic; font-size:0.93rem; color:rgba(255,255,255,0.42); line-height:1.6; margin-bottom:1.3rem; padding-left:0.8rem; border-left:2px solid rgba(198,47,50,0.4); }
.p-social { display:flex; gap:10px; }
.p-social a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius); color:rgba(255,255,255,0.5); font-size:0.8rem; font-weight:700; font-family:var(--sans); text-decoration:none; transition:all var(--trans); }
.p-social a:hover { background:var(--red); border-color:var(--red); color:var(--white); transform:translateY(-2px); }
.p-ftr-col-h { font-family:var(--sans); font-size:0.65rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid rgba(198,47,50,0.25); }
.p-ftr-ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.45rem; }
.p-ftr-ul a { font-family:var(--sans); font-size:0.8rem; color:rgba(255,255,255,0.48); display:flex; align-items:center; gap:6px; transition:color var(--trans),padding var(--trans); text-decoration:none; }
.p-ftr-ul a::before { content:'o'; color:var(--red); opacity:0; transition:opacity var(--trans); }
.p-ftr-ul a:hover { color:rgba(255,255,255,0.9); padding-left:4px; }
.p-ftr-ul a:hover::before { opacity:1; }
.p-ftr-contact { font-family:var(--sans); font-size:0.75rem; color:rgba(255,255,255,0.38); line-height:1.7; margin-top:1rem; }
.p-ftr-contact a { color:rgba(198,47,50,0.7); transition:color var(--trans); text-decoration:none; }
.p-ftr-contact a:hover { color:var(--red); }
.p-ftr-bottom { border-top:1px solid rgba(255,255,255,0.07); max-width:1300px; margin:0 auto; padding:1.2rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; }
.p-ftr-copy { font-family:var(--sans); font-size:0.7rem; color:rgba(255,255,255,0.22); letter-spacing:0.04em; }
.p-ftr-legal { display:flex; gap:1.2rem; }
.p-ftr-legal a { font-family:var(--sans); font-size:0.7rem; color:rgba(255,255,255,0.28); transition:color var(--trans); text-decoration:none; }
.p-ftr-legal a:hover { color:var(--red); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:0.1s;}.d2{transition-delay:0.2s;}.d3{transition-delay:0.3s;}.d4{transition-delay:0.4s;}

/* RESPONSIVE */
@media (max-width:768px) {
  .p-hdr-nav { display:none; }
  .p-hamburger { display:flex; }
  .p-hdr-logo-name { display:none; }
  .p-ftr-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
}
@media (max-width:480px) { .p-ftr-grid { grid-template-columns:1fr; } }
@media (min-width:769px) { .p-hdr-logo-name { display:flex; } }

/* SPECIFIC READABILITY FIXES FOR UAGB BLOCKS */

/* Fix white-on-white Info Boxes mistakenly set on the Projekti page (white container 10f9ded2) */
.uagb-block-10f9ded2 .uagb-ifb-title-wrap *,
.uagb-block-10f9ded2 .uagb-ifb-desc {
    color: #1f2864 !important; /* Force to Prosvjeta Dark Blue */
}

/* Fix "Majski susreti" and "Cokoladne zecice" which were also white-on-white */
.uagb-block-7c2a469f .uagb-ifb-title-wrap *, .uagb-block-7c2a469f .uagb-ifb-desc,
.uagb-block-9381d17b .uagb-ifb-title-wrap *, .uagb-block-9381d17b .uagb-ifb-desc {
    color: #1f2864 !important;
}

/* Fix dark-on-dark Info Boxes mistakenly set on the Aktivnosti 2023 page */
.uagb-block-a9bfb6e7 .uagb-ifb-title-wrap *, .uagb-block-a9bfb6e7 .uagb-ifb-desc,
.uagb-block-f70b5d2a .uagb-ifb-title-wrap *, .uagb-block-f70b5d2a .uagb-ifb-desc,
.uagb-block-537b8451 .uagb-ifb-title-wrap *, .uagb-block-537b8451 .uagb-ifb-desc {
    color: #ffffff !important; /* Force to White */
}

/* Fix specific blue-on-red/blue Info Boxes on Projekti-Aktivnosti (they had wrong colors assigned) */
.uagb-block-7177914a .uagb-ifb-title-wrap *, .uagb-block-7177914a .uagb-ifb-desc,
.uagb-block-98a8bda7 .uagb-ifb-title-wrap *, .uagb-block-98a8bda7 .uagb-ifb-desc,
.uagb-block-a34ed6d2 .uagb-ifb-title-wrap *, .uagb-block-a34ed6d2 .uagb-ifb-desc,
.uagb-block-97da5c63 .uagb-ifb-title-wrap *, .uagb-block-97da5c63 .uagb-ifb-desc,
.uagb-block-11619abb .uagb-ifb-title-wrap *, .uagb-block-11619abb .uagb-ifb-desc { /* Srpski pisci */
    color: #ffffff !important;
}

/* Fix white-on-white Advanced Heading "Bog blagoslovio" on O Prosvjeti page */
.uagb-block-nqxkzzmu .uagb-heading-text,
.uagb-block-nqxkzzmu .uagb-heading-text *,
/* Fix white-on-white Advanced Heading on Srpski pisci page */
.uagb-block-c8f82d72 .uagb-heading-text,
.uagb-block-c8f82d72 .uagb-heading-text * {
    color: #1f2864 !important;
}

/* Fixes for Pridruži se Prosvjeti page */
.uagb-block-b01e32ed h1.uagb-ifb-title,
.uagb-block-b01e32ed h1.uagb-ifb-title * {
    color: #ffffff !important; /* Main H1 white on blue */
}
.uagb-block-0253f26c .uagb-ifb-desc,
.uagb-block-abc72619 .uagb-ifb-desc,
.uagb-block-xpp5w9n8 .uagb-ifb-desc {
    color: #1a1a2e !important; /* Dark text on white background */
}
.uagb-block-abc72619 .uagb-ifb-title {
    color: #023969 !important; /* Blue titles on white context */
}
.uagb-block-3fda3981 .uagb-ifb-title,
.uagb-block-3fda3981 .uagb-ifb-title *,
.uagb-block-3fda3981 .uagb-ifb-desc,
.uagb-block-562a885f .uagb-ifb-title,
.uagb-block-562a885f .uagb-ifb-title *,
.uagb-block-562a885f .uagb-ifb-desc {
    color: #ffffff !important; /* White text for Mission and Vision */
}



.uagb-block-7b04df11 .uagb-ifb-title,
.uagb-block-eonbwcvu .uagb-ifb-title {
    color: #ffffff !important; /* White titles on dark backgrounds */
}

/* Fix visibility for 'Ko smo MI?' section on Pridruži se page */
.uagb-block-e6f6047c .uagb-heading-text,
.uagb-block-e6f6047c .uagb-heading-text *,
.uagb-block-4d1e71ba .uagb-heading-text {
    color: #000000 !important; /* Pure Black text on white background */
    text-shadow: none !important;
}

/* Fix visibility for 'Ways to help' columns on Pridruži se page */
.uagb-block-030cb5e2 .uagb-heading-text,
.uagb-block-030cb5e2 .uagb-heading-text *,
.uagb-block-7dd74371 .uagb-heading-text,
.uagb-block-08c33048 .uagb-heading-text,
.uagb-block-08c33048 .uagb-heading-text *,
.uagb-block-9312f7f0 .uagb-heading-text,
.uagb-block-4099fdb5 .uagb-heading-text,
.uagb-block-4099fdb5 .uagb-heading-text *,
.uagb-block-0fdf399c .uagb-heading-text {
    color: #000000 !important; /* Black text for Help columns */
    text-shadow: none !important;
}

/* Styling for 'Prosvjetina himna' section on O Prosvjeti page */
.uagb-block-dbe44be3,
.uagb-block-dbe44be3 *,
.uagb-block-386ada51,
.uagb-block-386ada51 * {
    color: #000000 !important;
    font-size: 22px !important;
    text-shadow: none !important;
}

/* ================================================================
   FAQ ACCORDION STYLES
   ================================================================ */
.uagb-faq__wrap {
    width: 100%;
}

.uagb-faq-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
}

.uagb-faq-questions-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    transition: background 0.2s ease;
}

.uagb-faq-questions-button:hover {
    background: rgba(2, 57, 105, 0.03);
}

.uagb-faq-questions-button .uagb-question {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a2e;
}

.uagb-faq-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.uagb-faq-icon-wrap svg {
    width: 14px;
    height: 14px;
    fill: #023969;
}

/* Hide inactive icon, show active icon when expanded */
.uagb-faq-item .uagb-icon-active {
    display: none;
}
.uagb-faq-item .uagb-icon {
    display: flex;
}
.uagb-faq-item-active .uagb-icon-active {
    display: flex;
}
.uagb-faq-item-active .uagb-icon {
    display: none;
}

/* FAQ Content */
.uagb-faq-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 0 0 0;
}

.uagb-faq-item-active .uagb-faq-content {
    padding-bottom: 20px;
}

.uagb-faq-content p {
    margin: 0 0 15px 0;
    line-height: 1.7;
    color: #333;
    font-size: 15px;
}