/*
Theme Name: Proglas Tema
Version: 1.9.18
Description: Flat academic design with Deep Academic Blue (#1e3a5f) as the primary palette.
*/

/* Latin Modern Roman is shipped in assets/fonts (see assets/css/fonts.css); the cdnfonts import was removed on 20 October 2026. */

/* Location above the content only while navigation is collapsed. */
.mobile-breadcrumbs { display: none; }
@media (max-width: 899px) {
    .content-card > .mobile-breadcrumbs {
        display: block;
        margin: 0 0 16px;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        text-align: left;
        text-indent: 0;
        text-transform: none;
        letter-spacing: normal;
        color: #46545b;
        overflow-wrap: anywhere;
    }
}

/* Preserve readable dark-blue labels when the current header skin has a black bar. */
html body.site-body.site-body.pg-skin-izvorni .primary-nav {
    background: #fbf8ec !important;
    border-bottom: 1px solid #1e3a5f;
}
html body.site-body.site-body.pg-skin-izvorni .primary-nav .menu-toggle,
html body.site-body.site-body.pg-skin-izvorni .primary-nav .archive-nav-toggle {
    color: #1e3a5f !important;
}

/* Keep dark-blue tab labels readable on hover and keyboard focus. */
html body.site-body.site-body .primary-nav .primary-menu a:hover,
html body.site-body.site-body .primary-nav .primary-menu a:focus-visible {
    background: #e8eef5 !important;
}

/* Dark blue navigation and headings; paragraph text keeps its existing color. */
html body.site-body.site-body :is(h1,h2,h3,h4,h5,h6):not(.document-reader__title):not(.footer-nav-heading):not(.footer-archive-heading),
html body.site-body.site-body .publication-entry__title,
html body.site-body.site-body .page-visible-title,
html body.site-body.site-body .is-style-proglas-heading,
html body.site-body.site-body .primary-menu a,
html body.site-body.site-body .archive-root a,
html body.site-body.site-body .archive-root button,
html body.site-body.site-body .archive-nav-toggle,
html body.site-body.site-body .content-card a,
html body.site-body.site-body .social-card-cta,
html body.site-body.site-body .archive-drawer-toggle {
    color: #1e3a5f !important;
}
html body.site-body.site-body .site-logo-link img,
html body.site-body.site-body .pg-logo img {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='logo-blue' color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.882353' intercept='0.117647'/%3E%3CfeFuncG type='linear' slope='0.772549' intercept='0.227451'/%3E%3CfeFuncB type='linear' slope='0.627451' intercept='0.372549'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#logo-blue") !important;
}

/* The logo images are already blue; do not invert them inside the small logo. */
html body.site-body.site-body .pg-logo-mini .logo-box {
    filter: none;
}

/* =====================================================
    BLUE THEME VARIABLES
   ===================================================== */
:root {
    interpolate-size: allow-keywords;
    --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --nav-duration: 0.42s;
    --theme-primary: #1e3a5f;
    --theme-secondary: #2d5a8f;
    --theme-neutral: #f5f3f0;
    --theme-text: #1a1a1a;
    --theme-text-light: #4a5f7a;
    --theme-border: #1e3a5f;
    --theme-hover: #3d6fa8;
    --theme-accent: #1e3a5f;
    --theme-muted: #e8eef5;
    --theme-footer-bg: #1e3a5f;
    --sticky-nav-offset: 3.5rem;
    --nav-mobile-max: 1100px;
    --layout-sidebar-min: 900px;
    --layout-max-width: 1440px;
    --layout-inline-pad: 1rem;
    --layout-grid-gap: 2rem;
    --layout-archive-col: 220px;
    --layout-aside-col: minmax(280px, 300px);
    --layout-grid-columns: var(--layout-archive-col) minmax(0, 1fr) var(--layout-aside-col);
}

/* =====================================================
    GLOBAL LAYOUT CONTAINER
   ===================================================== */
.site-container {
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    margin-inline: auto;
}

/* =====================================================
    FLAT SHARP LAYOUT SHELL
   ===================================================== */
.site-header,
.site-footer,
.modern-article,
.modern-facebook-widget,
.modern-instagram-widget {
    border-radius: 0;
    box-shadow: none;
}

.modern-article {
    background: transparent;
    border: none;
    padding: 0;
}

html {
    overflow-x: clip;
}

.site-body {
    background-color: var(--theme-neutral);
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    overflow-x: clip;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
    HEADER — CENTERED LOGO + STICKY NAV
   ===================================================== */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 0 0;
    background: #fff;
}

.header-logo-row {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    margin-inline: auto;
    gap: 1.25rem;
    margin-bottom: 0;
    padding: 0 0 1rem;
    min-width: 0;
}

.header-logo-line {
    flex: 1 1 auto;
    min-width: 0;
    height: 0;
    border-top: 2px solid var(--theme-primary);
}

.site-logo-link {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: inline-block;
    text-decoration: none;
}

.site-logo-link img,
.site-logo-fallback-img,
.site-logo-link .custom-logo {
    /* Map black to the primary blue while preserving white details. */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='logo-blue' color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.882353' intercept='0.117647'/%3E%3CfeFuncG type='linear' slope='0.772549' intercept='0.227451'/%3E%3CfeFuncB type='linear' slope='0.627451' intercept='0.372549'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#logo-blue");
    display: block;
    max-height: 165px;
    max-width: 100%;
    width: auto;
    height: auto;
}

/* Shared sticky behaviour for primary nav + archive sidebar */
.site-sticky-bar,
.site-nav-sidebar {
    position: sticky;
    align-self: start;
}

.primary-nav {
    top: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    border-bottom: 2px solid var(--theme-primary);
}

.primary-nav-controls,
.primary-nav-bar,
.archive-nav-toggle,
.archive-menu-overlay,
.nav-panel-toolbar,
.primary-menu-backdrop,
.primary-menu-foot {
    display: none;
}

.primary-menu-overlay,
.primary-menu-sheet {
    display: contents;
}

.primary-menu-wrap {
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    margin-inline: auto;
}

.primary-menu {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    padding: 0.85rem 1rem;
    margin: 0;
    flex-wrap: wrap;
}

.primary-menu a {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: #1f2937;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--theme-primary);
    display: none;
}

.menu-toggle-bars {
    position: relative;
    display: block;
    width: 1.4rem;
    height: 1rem;
}

.menu-toggle-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}

.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 7px; }
.menu-toggle-bars span:nth-child(3) { top: 14px; }

.primary-nav.is-open .menu-toggle-bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.primary-nav.is-open .menu-toggle-bars span:nth-child(2) {
    opacity: 0;
}

.primary-nav.is-open .menu-toggle-bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.icon-burger,
.icon-archive,
.icon-close {
    width: 28px;
    height: 28px;
}

/* =====================================================
    SITE WRAPPER — ARCHIVE + CONTENT (+ SOCIAL ASIDE ON LARGE SCREENS)
   ===================================================== */
.site-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "archive"
        "content"
        "social";
    gap: 1.5rem;
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    min-width: 0;
    margin: 0 auto;
    padding: 1.5rem var(--layout-inline-pad) 3rem;
}

.site-nav-sidebar {
    grid-area: archive;
}

.content-main {
    grid-area: content;
}

.social-aside {
    grid-area: social;
}

.site-nav-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'Latin Modern Roman', serif;
    top: var(--sticky-nav-offset);
    z-index: 90;
    max-height: calc(100vh - var(--sticky-nav-offset) - 1rem);
    overflow: hidden;
    --archive-pad-y: 0.75rem;
    --archive-pad-x: 0;
    --archive-indent: 1rem;
}

.archive-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}

.archive-panel-inner {
    min-height: 0;
}

.archive-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--nav-duration) var(--nav-ease);
}

.archive-item.is-open > .archive-collapse,
.archive-collapse.is-open {
    grid-template-rows: 1fr;
}

.archive-collapse > .archive-submenu {
    overflow: hidden;
    min-height: 0;
}

.content-main {
    width: 100%;
    min-width: 0;
    margin: 0;
    max-width: none;
    background: #fff;
    padding: 1.25rem 1rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.content-empty {
    text-align: center;
    color: var(--theme-text-light);
    font-size: 1.05rem;
}

/* =====================================================
    ARCHIVE SIDEBAR — FLAT NAV COLUMN
   ===================================================== */
.archive-title {
    flex-shrink: 0;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--theme-primary);
    background: transparent;
}

.archive-drawer-toggle {
    display: none;
}

.archive-drawer-caret {
    display: none;
}

.archive-root,
.archive-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.archive-item {
    margin: 0;
}

.archive-item > a,
.archive-item > .archive-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--theme-text);
    text-decoration: none;
    margin: 0;
    padding: var(--archive-pad-y) var(--archive-pad-x);
    font-size: 1rem;
    line-height: 1.6;
    border-bottom: 1px solid rgba(30, 58, 95, 0.12);
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.archive-item > a {
    cursor: pointer;
}

.archive-item > .archive-toggle > span {
    flex: 1;
    min-width: 0;
}

.archive-item.depth-0 > a,
.archive-item.depth-0 > .archive-toggle {
    padding-left: var(--archive-pad-x);
    padding-right: var(--archive-pad-x);
    color: var(--theme-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.archive-item.depth-1 > a,
.archive-item.depth-1 > .archive-toggle {
    padding-left: calc(var(--archive-pad-x) + var(--archive-indent) * 1);
    padding-right: var(--archive-pad-x);
    color: var(--theme-text);
}

.archive-item.depth-2 > a,
.archive-item.depth-2 > .archive-toggle {
    padding-left: calc(var(--archive-pad-x) + var(--archive-indent) * 2);
    padding-right: var(--archive-pad-x);
    color: var(--theme-text-light);
}

.archive-item.depth-3 > a,
.archive-item.depth-3 > .archive-toggle {
    padding-left: calc(var(--archive-pad-x) + var(--archive-indent) * 3);
    padding-right: var(--archive-pad-x);
    color: var(--theme-text-light);
}

.archive-item[class*="depth-"]:not(.depth-0):not(.depth-1):not(.depth-2):not(.depth-3) > a,
.archive-item[class*="depth-"]:not(.depth-0):not(.depth-1):not(.depth-2):not(.depth-3) > .archive-toggle {
    padding-left: calc(var(--archive-pad-x) + var(--archive-indent) * 4);
    padding-right: var(--archive-pad-x);
    color: var(--theme-text-light);
}

.archive-item > a:hover,
.archive-item > .archive-toggle:hover {
    color: var(--theme-hover);
}

.archive-item > a:active,
.archive-item > .archive-toggle:active {
    transform: translateY(1px);
}

.archive-item > a:focus-visible,
.archive-item > .archive-toggle:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
    color: var(--theme-hover);
}

.archive-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 0.5rem;
    margin-top: 0.2em;
    transition: transform var(--nav-duration) var(--nav-ease);
}

.archive-toggle[aria-expanded="true"] .archive-caret {
    transform: rotate(180deg);
}

/* Highlight only the current page, never its archive headings. */
body .archive-root .archive-item.current-menu-item > a {
    color: #0b0b0b;
    background: #ffe14d;
}

/* =====================================================
    SOCIAL ASIDE — INSTAGRAM & FACEBOOK
   ===================================================== */
.social-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: static;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow: visible;
}

.social-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    width: 100%;
    min-width: 0;
}

.social-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--theme-primary);
}

.social-card-header h3,
.social-widget-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.social-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.social-card--instagram .social-icon,
.social-card--facebook .social-icon {
    color: var(--theme-primary);
}

.social-card-body {
    padding: 0.75rem 0;
    width: 100%;
    min-width: 0;
}

.social-card-body .ig-grid,
.social-card-body #sb_instagram {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.social-card-body .instagram-feed:not(.instagram-feed--embed) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.social-card-body .instagram-feed--embed {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.social-card-body img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}

.instagram-fallback {
    font-size: 0.9rem;
    color: var(--theme-text-light);
    line-height: 1.6;
}

.social-embed--facebook {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 360px;
    overflow: hidden;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    background: #fff;
}

/* A fixed preview of the current feed; the whole box opens Facebook. */
.social-embed--facebook iframe {
    pointer-events: none;
    clip-path: inset(0 16px 0 0);
}

.social-embed--facebook .social-embed__link:focus-visible {
    outline: 3px solid var(--theme-primary);
    outline-offset: -3px;
}

.social-embed--facebook iframe,
.social-embed--instagram iframe {
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 500px;
    max-width: 100%;
    border: 0;
}

.social-embed--instagram {
    position: relative;
    width: 100%;
    min-width: 0;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.social-card-body .social-embed--instagram iframe {
    height: 260px;
}

.social-embed__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

.instagram-feed--embed .instagram-media,
.instagram-feed--embed iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.social-card-cta {
    display: block;
    text-align: center;
    padding: 0.65rem 0;
    background: transparent;
    border-top: 2px solid var(--theme-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.social-card-cta:hover {
    color: var(--theme-primary);
}

/* =====================================================
    MAIN CONTENT — READABLE TYPOGRAPHY
   ===================================================== */
/* Natural word spacing on phones; desktop justification is unchanged. */
@media (max-width: 767px) {
    :root {
        --proglas-prose-align: left;
    }
}

.content-card {
    margin-bottom: 2rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: #1f2937;
}

.content-card p {
    margin: 0 0 1.25rem;
    text-align: var(--proglas-prose-align, justify);
}

/* Give every prose paragraph the same first-line inset, not just styled leads.
   Nested lists, publication details, captions and form controls keep their layout. */
body:not(.page-id-138) .content-card > p,
.proglas-popup-inner p:not(.proglas-popup-close):not(.proglas-popup-list-title) {
    text-indent: 40px;
}

.content-card h2,
.content-card h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--theme-primary);
}

.content-card h2 {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--theme-secondary);
    padding-bottom: 0.5rem;
}

.content-card h3 {
    font-size: 1.4rem;
}

.content-card img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 1.5rem 0;
}

.content-card a {
    color: var(--theme-primary);
    text-decoration: underline;
}

.content-card ul,
.content-card ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.content-card li {
    margin-bottom: 0.5rem;
}

.content-card blockquote {
    border-left: 4px solid var(--theme-secondary);
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--theme-text-light);
    background: var(--theme-neutral);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.content-card--flat {
    margin-bottom: 0;
}

.content-card .entry-title {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    font-weight: 800;
}

/* =====================================================
    FOOTER — dedicated inner container (same width tokens
    as .site-wrapper / .site-container; no page 3-col grid)
   ===================================================== */
.site-footer {
    margin-top: 0;
    width: 100%;
    background: #1e3a5f;
    color: #d1d5db;
    font-size: 0.95rem;
}

.site-footer__inner,
.site-footer__bottom-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    margin-inline: auto;
    padding-inline: var(--layout-inline-pad);
    min-width: 0;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-block: 2rem 1.5rem;
}

.site-footer__left,
.site-footer__right {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: invert(1);
}

@media (min-width: 768px) {
    .footer-logo {
        width: 400px;
        max-width: min(400px, 100%);
    }
}

.footer-tagline {
    margin: 0;
    max-width: 420px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #b8c5d6;
}

/* Keep an archive opened from the footer above the large header on arrival. */
@media (max-width: 899px) {
    body.site-body .primary-nav.is-archive-open {
        z-index: 202;
    }
}

.footer-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.footer-nav-heading {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-align: left;
}

.footer-nav-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    align-items: stretch;
}

.footer-archive-column {
    display: flex;
    flex-direction: column;
}

.footer-archive-heading {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #b8c5d6;
    letter-spacing: 0.12em;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
}

.footer-links.footer-contact-link {
    margin-top: auto;
    padding-top: 3rem;
    text-align: left;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: #e8eef5;
    text-decoration: underline;
}

.site-footer__bottom,
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-block: 1rem;
    text-align: center;
}

.footer-copyright {
    margin: 0;
    font-size: 0.8rem;
    color: #b8c5d6;
}

@media (max-width: 899px) {
    .site-footer__inner {
        padding-block: 1.5rem;
    }
}

@media (min-width: 900px) {
    .site-footer__inner {
        display: grid;
        grid-template-columns: minmax(0, 420px) minmax(0, 420px);
        justify-content: space-between;
        align-items: start;
        gap: clamp(60px, 8vw, 140px);
    }

    .site-footer__left,
    .site-footer__right {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================
    DISCLAIMER MODAL
   ===================================================== */
.disclaimer-modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
}

.disclaimer-modal[hidden] {
    display: none;
}

.disclaimer-modal-panel {
    background: #f5f5f5;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    position: relative;
}

.disclaimer-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.disclaimer-modal-title {
    margin-top: 0;
    font-size: 1.1rem;
    padding-bottom: 10px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-primary);
}

.disclaimer-modal-body {
    font-family: 'Latin Modern Roman', serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--theme-text);
    text-align: left;
}

.disclaimer-modal-body p {
    margin: 0 0 1.25rem;
}

.disclaimer-modal-body p:last-child {
    margin-bottom: 0;
}

body.disclaimer-open {
    overflow: hidden;
}

.contact-alert {
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}

.contact-alert--success,
.contact-alert--error {
    background: var(--theme-muted);
    color: var(--theme-primary);
    border-left: 3px solid var(--theme-primary);
}

.contact-form {
    display: grid;
    gap: 1.25rem;
}

.contact-form-field label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}

.contact-form-field input,
.contact-form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--theme-primary);
    border-radius: 0;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    font-family: inherit;
}

.contact-form-field textarea {
    resize: none;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
    outline: none;
    border-bottom-width: 2px;
    border-bottom-color: var(--theme-primary);
    background: #fff;
}

.contact-form-submit {
    justify-self: start;
    border: none;
    background: var(--theme-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

.contact-form-submit:hover {
    background: var(--theme-hover);
}

.content-main--wide {
    max-width: none;
}

.site-wrapper--contact {
    grid-template-columns: 1fr;
    grid-template-areas:
        "archive"
        "content"
        "social";
}

.site-wrapper--timeline {
    grid-template-columns: 1fr;
    grid-template-areas:
        "archive"
        "content"
        "social";
}

@media (max-width: 899px) {
    .site-wrapper,
    .site-wrapper--timeline,
    .site-wrapper--contact {
        gap: 0;
        padding-bottom: 3rem;
        grid-template-areas:
            "content"
            "social";
    }

    .site-nav-sidebar {
        display: none;
    }

    .archive-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline-start: auto;
        min-height: 2.75rem;
        padding: 0.5rem 0.25rem 0.5rem 0.75rem;
        border: 0;
        background: none;
        color: var(--theme-primary);
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .archive-nav-toggle:active {
        transform: translateY(1px);
    }

    .primary-nav-bar {
        justify-content: space-between;
    }

    .content-main,
    .social-aside {
        padding-top: 0;
    }

    .social-aside {
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-top: 1rem;
        border-top: 2px solid var(--theme-primary);
    }

    .social-card {
        flex: 1 1 0;
        min-width: 0;
    }

    .social-card-header h3 {
        font-size: 0.8rem;
    }

    .social-card-cta {
        font-size: 0.75rem;
        padding: 0.5rem 0;
    }

    .archive-menu-overlay {
        --archive-pad-x: 1.75rem;
        --archive-indent: 1.25rem;
    }

    .archive-menu-overlay .nav-panel-toolbar {
        padding-left: max(var(--archive-pad-x), env(safe-area-inset-left));
        padding-right: 0.35rem;
    }

    .archive-menu-mount.nav-panel-body {
        padding-top: 0.5rem;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
        padding-left: max(var(--archive-pad-x), env(safe-area-inset-left));
        padding-right: max(var(--archive-pad-x), env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .archive-menu-overlay .archive-panel {
        display: block;
        overflow: visible;
        background: transparent;
        padding: 0;
    }

    .archive-menu-overlay .archive-panel-inner {
        overflow: visible;
        min-height: 0;
    }

    .archive-menu-overlay .archive-item > a,
    .archive-menu-overlay .archive-item > .archive-toggle {
        min-height: 3rem;
        align-items: center;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
        padding-right: 0.35rem;
        padding-left: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .archive-menu-overlay .archive-item.depth-0 > a,
    .archive-menu-overlay .archive-item.depth-0 > .archive-toggle {
        padding-left: 0;
        background: transparent;
    }

    .archive-menu-overlay .archive-item.depth-1 > a,
    .archive-menu-overlay .archive-item.depth-1 > .archive-toggle {
        padding-left: var(--archive-indent);
        background: transparent;
    }

    .archive-menu-overlay .archive-item.depth-2 > a,
    .archive-menu-overlay .archive-item.depth-2 > .archive-toggle {
        padding-left: calc(var(--archive-indent) * 2);
        background: transparent;
    }

    .archive-menu-overlay .archive-item.depth-3 > a,
    .archive-menu-overlay .archive-item.depth-3 > .archive-toggle {
        padding-left: calc(var(--archive-indent) * 3);
        background: transparent;
    }
}

@media (min-width: 900px) {
    .site-wrapper,
    .site-wrapper--timeline,
    .site-wrapper--contact {
        grid-template-columns: var(--layout-grid-columns);
        grid-template-areas: "archive content social";
        align-items: start;
        gap: var(--layout-grid-gap);
        max-width: min(96%, var(--layout-max-width));
    }

    .site-wrapper--contact {
        grid-template-columns: 200px minmax(0, 1fr) var(--layout-aside-col);
    }

    .site-nav-sidebar {
        grid-area: archive;
        --archive-pad-x: 0.35rem;
        position: sticky;
        top: var(--sticky-nav-offset);
        align-self: start;
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - var(--sticky-nav-offset) - 1rem);
        overflow: hidden;
    }

    .archive-panel {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--theme-primary) #eef2f7;
        display: block;
    }

    .archive-panel::-webkit-scrollbar {
        width: 8px;
    }

    .archive-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .archive-panel::-webkit-scrollbar-thumb {
        background: var(--theme-primary);
        border-radius: 4px;
    }

    .content-main {
        grid-area: content;
        padding: 2rem 2.25rem;
    }

    .social-aside {
        grid-area: social;
        position: sticky;
        top: var(--sticky-nav-offset);
        align-self: start;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-inline: 0;
        padding-top: 0;
        border-top: none;
        max-height: calc(100vh - var(--sticky-nav-offset) - 1rem);
        overflow-y: auto;
    }

    .social-card {
        width: 100%;
        max-width: none;
    }

    .site-nav-sidebar .archive-drawer-toggle {
        display: block;
        width: 100%;
        margin: 0;
        padding: var(--archive-pad-y) var(--archive-pad-x);
        border: none;
        border-bottom: 2px solid var(--theme-primary);
        background: var(--theme-neutral);
        cursor: pointer;
        text-decoration: none;
        text-align: left;
        font: inherit;
    }

    .site-nav-sidebar .archive-panel {
        display: block;
    }
}

/* =====================================================
    RESPONSIVE — NAV, LAYOUT, DRAWER
   ===================================================== */
@media (min-width: 1101px) {
    .primary-menu[hidden] {
        display: flex !important;
    }
}

@media (max-width: 1100px) {
    .site-wrapper {
        padding-top: 0;
    }

    body.proglas-nav-open,
    body.proglas-popup-open,
    body.proglas-lightbox-open,
    html:has(body.proglas-nav-open),
    html.proglas-lightbox-open {
        overflow: hidden;
    }

    .primary-nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 3.5rem;
        box-sizing: border-box;
    }

    .menu-toggle {
        display: flex;
    }

    .primary-nav {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.65rem max(1rem, env(safe-area-inset-right)) 0.65rem max(1rem, env(safe-area-inset-left));
        min-height: 3.5rem;
        box-sizing: border-box;
        z-index: 200;
        background: #fff;
    }

    /* Open mobile panels must also sit above the animated header (201). */
    .primary-nav.is-open {
        z-index: 220;
    }

    .menu-toggle--burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 4;
        flex-shrink: 0;
        margin: 0;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.65rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle--burger:focus-visible,
    .archive-nav-toggle:focus-visible,
    .nav-panel-close:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 3px;
    }

    .primary-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 205;
        background: rgb(30 58 95 / 0.42);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--nav-duration) var(--nav-ease), visibility var(--nav-duration) var(--nav-ease);
    }

    .primary-nav.is-open .primary-menu-backdrop,
    .primary-nav.is-archive-open .primary-menu-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .primary-menu-overlay,
    .primary-menu-sheet,
    .archive-menu-overlay,
    .archive-menu-sheet {
        display: block;
    }

    .primary-menu-overlay,
    .archive-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 210;
        width: auto;
        height: auto;
        pointer-events: none;
        visibility: hidden;
        background: transparent;
    }

    .primary-nav.is-open .primary-menu-overlay,
    .primary-nav.is-archive-open .archive-menu-overlay {
        visibility: visible;
        pointer-events: auto;
    }

    .nav-panel-sheet {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        background: var(--theme-neutral);
        overflow: hidden;
        outline: none;
        box-sizing: border-box;
        transition: transform var(--nav-duration) var(--nav-ease);
        will-change: transform;
    }

    .primary-menu-sheet {
        transform: translateX(-100%);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .archive-menu-sheet {
        transform: translateX(100%);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .primary-nav.is-open .primary-menu-sheet,
    .primary-nav.is-archive-open .archive-menu-sheet {
        transform: translateX(0);
    }

    .nav-panel-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        min-height: 3.5rem;
        padding: 0.35rem 0.35rem 0.35rem 1.25rem;
        border-bottom: 2px solid var(--theme-primary);
        background: var(--theme-neutral);
        box-sizing: border-box;
    }

    .nav-panel-kicker {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--theme-primary);
    }

    .nav-panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--theme-primary);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-panel-close:active {
        transform: translateY(1px);
    }

    .nav-panel-close-icon {
        position: relative;
        display: block;
        width: 1.15rem;
        height: 1.15rem;
    }

    .nav-panel-close-icon span {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        background: currentColor;
    }

    .nav-panel-close-icon span:first-child {
        transform: rotate(45deg);
    }

    .nav-panel-close-icon span:last-child {
        transform: rotate(-45deg);
    }

    .nav-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--theme-primary) transparent;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .primary-menu-wrap {
        max-width: none;
        margin: 0;
        background: transparent;
        padding: 0.35rem 0 1.25rem;
    }

    .primary-menu {
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .primary-menu li {
        border-bottom: 1px solid rgba(30, 58, 95, 0.14);
    }

    .primary-nav.is-open .primary-menu li {
        animation: proglas-menu-reveal 0.48s var(--nav-ease) both;
    }

    .primary-nav.is-open .primary-menu li:nth-child(1) { animation-delay: 0.05s; }
    .primary-nav.is-open .primary-menu li:nth-child(2) { animation-delay: 0.09s; }
    .primary-nav.is-open .primary-menu li:nth-child(3) { animation-delay: 0.13s; }
    .primary-nav.is-open .primary-menu li:nth-child(4) { animation-delay: 0.17s; }
    .primary-nav.is-open .primary-menu li:nth-child(5) { animation-delay: 0.21s; }
    .primary-nav.is-open .primary-menu li:nth-child(6) { animation-delay: 0.25s; }
    .primary-nav.is-open .primary-menu li:nth-child(7) { animation-delay: 0.29s; }
    .primary-nav.is-open .primary-menu li:nth-child(n+8) { animation-delay: 0.33s; }

    .primary-menu a {
        display: flex;
        align-items: center;
        min-height: 3.25rem;
        padding: 1rem 1.25rem;
        border-bottom: none;
        font-size: 0.95rem;
        letter-spacing: 0.1em;
        color: var(--theme-primary);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s var(--nav-ease), color 0.2s var(--nav-ease);
    }

    .primary-menu a:hover,
    .primary-menu a:focus-visible,
    .primary-menu .current-menu-item > a {
        background: var(--theme-muted);
        color: var(--theme-primary);
        border-color: transparent;
    }

    .primary-menu a:active {
        transform: translateY(1px);
    }
}

@keyframes proglas-menu-reveal {
    from {
        opacity: 0;
        transform: translateX(-0.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 480px) {
    .primary-nav {
        padding: 0.65rem max(0.75rem, env(safe-area-inset-right)) 0.65rem max(0.75rem, env(safe-area-inset-left));
        min-height: 3.5rem;
    }

    .primary-menu a {
        min-height: 3rem;
        padding: 0.9rem 1.15rem;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
    }

    .header-logo-row {
        padding: 0 0.75rem 0.85rem;
        gap: 0.75rem;
    }
}

@media (max-width: 767px) {
    .site-logo-link img,
    .site-logo-fallback-img,
    .site-logo-link .custom-logo {
        max-height: 110px;
    }
}


/* =====================================================
    MODERN HEADER STYLES
   ===================================================== */
.modern-header {
    background: var(--theme-neutral);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: auto;

}

.header-scrolled .logo-container {
    max-height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;

}

.header-container {
    max-width: min(95%, var(--layout-max-width));
    margin: 0 auto;
}

/* Mobile Header */
.mobile-header {
    padding: 1rem;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--theme-primary);
    transition: color 0.3s;
}

.menu-toggle:hover {
    color: var(--theme-hover);
}

.mobile-logo img {
    height: 66px;
    width: auto;
}

.mobile-menu {
    background: var(--theme-neutral);
    border-top: 1px solid #e5e5e5;
    margin-top: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav {
    padding: 1rem;
}

.mobile-wp-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-wp-menu li {
    margin-bottom: 0.75rem;
}

.mobile-wp-menu a {
    color: var(--theme-primary);
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Latin Modern Roman', serif;
    transition: color 0.3s;
}

.mobile-wp-menu a:hover {
    color: var(--theme-hover);
}

.mobile-wp-menu .sub-menu {
    list-style: none;
    padding-left: 1rem;
    margin: 0.25rem 0 0.75rem;
}

.mobile-wp-menu .sub-menu a {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Desktop Header */
.desktop-header {
    padding: 2rem 0;

}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-container {
    text-align: center;
    padding: 20px 0;
    max-height: 200px;

}

.site-logo {
    height: 165px;
    width: auto;
    max-width: 100%;
    object-fit: contain;

}

.header-scrolled .site-logo {
    transform: translateY(-100%);
    opacity: 0;
}

.main-nav {
    width: 100%;
}

.nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 2.5rem;
}

.nav-menu a {
    color: var(--theme-primary);
    text-decoration: none;
    font-size: 1.1rem;
    font-family: 'Latin Modern Roman', serif;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 0.3s;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-secondary);
    transition: width 0.3s;
}

.nav-menu a:hover {
    color: var(--theme-hover);
}

.nav-menu a:hover::after {
    width: 100%;
}

/* =====================================================
    INSTAGRAM WIDGET STYLES
   ===================================================== */
.modern-instagram-widget {
    background: var(--theme-neutral);
    border: 1px solid var(--theme-border);
    padding: 1.5rem;
    border-radius: 2px;
}

.instagram-feed {
    text-align: center;
}

.instagram-profile-link {
    display: block;
    text-decoration: none;
    color: var(--theme-primary);
}

.instagram-profile-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border);
}

.instagram-icon {
    color: var(--theme-primary);
}

.instagram-username {
    font-family: 'Latin Modern Roman', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.follow-button {
    display: inline-block;
    background: var(--theme-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 2px;
    font-family: 'Latin Modern Roman', serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.3s ease, color 0.3s ease;
}

.follow-button:hover {
    background: var(--theme-hover);
    color: #fff;
}

/* =====================================================
    MODERN FOOTER STYLES
   ===================================================== */
.modern-footer {
    background: var(--theme-primary);
    color: #fff;
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    max-width: min(95%, var(--layout-max-width));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.footer-copyright {
    margin: 0;
    font-family: 'Latin Modern Roman', serif;
    font-size: 0.95rem;
    color: #ccc;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-family: 'Latin Modern Roman', serif;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-social-link:hover {
    color: var(--theme-hover);
}

.footer-fb-icon {
    width: 20px;
    height: 20px;
}

/* =====================================================
    MAIN CONTENT WRAPPER
   ===================================================== */
.main-content-wrapper {
    background: var(--theme-neutral);
    min-height: calc(100vh - 200px);
}

/* =====================================================
    RESPONSIVE HEADER & FOOTER
   ===================================================== */
@media (max-width: 1024px) {
    .desktop-header {
        display: none;
    }
    
    .mobile-header {
        display: block;
    }
    
    .site-logo {
        height: 110px;
    }
    
    .nav-menu {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    
    .nav-menu a {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .mobile-logo img {
        height: 55px;
    }
    
    .modern-footer {
        padding: 1.5rem 0;
    }
    
    .footer-content {
        gap: 1rem;
    }
    
    .footer-copyright,
    .footer-social-link {
        font-size: 0.85rem;
    }
}

@media (min-width: 1025px) {
    .mobile-header {
        display: none;
    }
    
    .desktop-header {
        display: block;
    }
}

/* =====================================================
    MODERN PAGE REDESIGN - Old School Vibe
   ===================================================== */
.modern-page-container {
    max-width: min(95%, var(--layout-max-width));
    margin: 0 auto;
    padding: 2rem 1rem;
}

.modern-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}



.modern-main-content {
    flex: 1;
    min-width: 300px;
    position: relative;

}

.modern-sidebar-left {
    flex: 0 0 16.666%;
    min-width: 200px;
}

.modern-sidebar-left a {
    color: var(--theme-primary);
}

.modern-sidebar-left a:hover {
    color: var(--theme-hover);
}

.modern-sidebar-right {
    flex: 0 0 16.666%;
    min-width: 200px;
}

.modern-article {
    background: #fff;
    padding: 2.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--theme-border);
}

.modern-facebook-widget {
    position: sticky;
    top: 2rem;
    background: var(--theme-neutral);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid var(--theme-border);
}

.modern-page-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .modern-layout {
        flex-direction: column;
    }
    .modern-sidebar-left {
        display: block;
    }
    
    .modern-sidebar-left,
    .modern-sidebar-right,
    .modern-main-content {
        flex: 1;
        width: 100%;
    }
    
    
    .modern-main-content {
        margin-left: 0;
    }
    
    .modern-sidebar-right {
        order: 3;
    }
    
    .modern-article {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .modern-page-container {
        padding: 1rem 0.5rem;
    }
    
    .modern-sidebar-left {
        display: block;
    }
    
    .modern-article {
        padding: 1rem;
    }
}

/* =====================================================
    PROFESSIONAL GUTENBERG BLOCK STYLES
   ===================================================== */

/* Paragraf stilovi */
p.is-style-pro-lead {
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 500;
    color: var(--theme-primary);
    margin-bottom: 1.5rem;
}

p.is-style-pro-highlight {
    background: linear-gradient(120deg, var(--theme-secondary) 0%, var(--theme-secondary) 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.3em;
    background-position: 0 88%;
    padding: 0.2em 0;
}

p.is-style-pro-dropcap::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    padding-right: 0.5rem;
    padding-top: 0.1rem;
    font-weight: 700;
    color: var(--theme-primary);
}

/* Naslov stilovi */
h1.is-style-pro-academic,
h2.is-style-pro-academic,
h3.is-style-pro-academic {
    font-family: 'Latin Modern Roman', serif;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 3px double var(--theme-secondary);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

h1.is-style-pro-section,
h2.is-style-pro-section,
h3.is-style-pro-section {
    font-family: 'Latin Modern Roman', serif;
    font-weight: 600;
    border-left: 4px solid var(--theme-secondary);
    padding-left: 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(to right, var(--theme-neutral), transparent);
}

/* Slika stilovi */
figure.is-style-pro-frame img {
    border: 3px solid var(--theme-border);
    padding: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

figure.is-style-pro-shadow img {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: none;
}

figure.is-style-pro-float-left {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 50%;
}

figure.is-style-pro-float-right {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 50%;
}

/* Lista stilovi */
ul.is-style-pro-clean,
ol.is-style-pro-clean {
    list-style: none;
    padding-left: 0;
}

ul.is-style-pro-clean li,
ol.is-style-pro-clean li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--theme-border);
}

ul.is-style-pro-clean li:last-child,
ol.is-style-pro-clean li:last-child {
    border-bottom: none;
}

ul.is-style-pro-compact,
ol.is-style-pro-compact {
    padding-left: 1rem;
}

ul.is-style-pro-compact li,
ol.is-style-pro-compact li {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

/* Grupa/Kontejner stilovi */
.wp-block-group.is-style-pro-card {
    background: #fff;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 1.5rem 0;
}

.wp-block-group.is-style-pro-box {
    background: var(--theme-neutral);
    border-left: 4px solid var(--theme-secondary);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.wp-block-group.is-style-pro-paper {
    background: var(--theme-neutral);
    border: 1px solid var(--theme-border);
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
    position: relative;
}

.wp-block-group.is-style-pro-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to bottom, var(--theme-secondary), transparent);
}

/* Citat stilovi */
blockquote.is-style-proglas-quote {
    border-left: 4px solid var(--theme-secondary);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--theme-text-light);
    background: var(--theme-neutral);
    padding: 1.5rem;
    border-radius: 0 4px 4px 0;
}

/* Galerija stilovi */
.wp-block-gallery.is-style-proglas-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.wp-block-gallery.is-style-proglas-gallery figure {
    min-width: 0;
    margin: 0;
}

.wp-block-gallery.is-style-proglas-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--theme-border);
    padding: 0;
    background: #fff;
}

/* Responsive za profesionalne stilove */
@media (max-width: 768px) {
    figure.is-style-pro-float-left,
    figure.is-style-pro-float-right {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }
    
    p.is-style-pro-lead {
        font-size: 1.1rem;
    }
    
    p.is-style-pro-dropcap::first-letter {
        font-size: 3rem;
    }
    
    .wp-block-group.is-style-pro-card,
    .wp-block-group.is-style-pro-box,
    .wp-block-group.is-style-pro-paper {
        padding: 1.5rem;
    }
    
    .wp-block-gallery.is-style-proglas-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =====================================================
    1. OSNOVA I RESET
   ===================================================== */
* {
    box-sizing: border-box !important;
}

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

body { 
    font-family: 'Latin Modern Roman', serif !important; 
    color: #000;
    background-color: #ffffff;
    font-size: 15px !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

pre,
table,
.wp-block-table,
.wp-block-image,
.wp-block-embed,
.wp-block-gallery,
.wp-block-columns {
    max-width: 100%;
}

.max-w-7xl {
    max-width: min(95%, var(--layout-max-width)) !important;
    margin: 0 auto;
}

/* SAKRIVA TITLE (NASLOV) NA SVIM STRANICAMA */
h1.entry-title, 
h1.page-title, 
.entry-header h1, 
.timeline-h1 { 
    display: none !important; 
}

.page-visible-title {
    display: block !important;
    font-family: 'Latin Modern Roman', serif;
    font-weight: 700;
    font-size: 1.35rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 auto 1.75rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* =====================================================
    2. GRID I TIMELINE (DESKTOP)
   ===================================================== */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    clear: both;
    align-items: flex-start;
}

.col-lg-6 {
    width: 50% !important;
    position: relative;
    padding: 40px 45px !important;
    min-height: 100px;
}

/* CENTRALNA LINIJA */
.col-lg-6::before {
    content: "";
    position: absolute;
    width: 2px;
    background: var(--theme-secondary);
    top: 0;
    bottom: 0;
    z-index: 1;
}

.edge::before { right: -1px; }
.col-lg-6:not(.edge)::before { left: -1px; }

/* TAČKE — kvadratni markeri poravnati sa naslovom/datumom */
.col-lg-6.edge > h3:first-of-type,
.col-lg-6:not(.edge) > h3:first-of-type {
    position: relative;
}

.col-lg-6.edge > h3:first-of-type::after,
.col-lg-6:not(.edge) > h3:first-of-type::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--theme-primary);
    border: none;
    border-radius: 0;
    z-index: 10;
}

/* 45px horizontalni padding kolone + 5px do centra linije */
.col-lg-6.edge > h3:first-of-type::after { right: -50px; }
.col-lg-6:not(.edge) > h3:first-of-type::after { left: -50px; }

/* PORAVNANJE ZA DESKTOP */
.edge {
    text-align: right !important;
    margin-right: 50% !important;
}

.col-lg-6:not(.edge) {
    text-align: left !important;
    margin-left: 50% !important;
}

/* =====================================================
    3. SPECIJALNI STILOVI
   ===================================================== */
.indent, 
.proglas-content p.indent,
.is-style-proglas-indent {
    text-indent: 40px !important;
    text-align: var(--proglas-prose-align, justify) !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

.mainBold, 
.is-style-proglas-bold {
    font-weight: 700 !important;
}

.is-style-proglas-heading, 
h3.is-style-proglas-heading,
.proglas-content h3 {
    font-family: 'Latin Modern Roman', serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    margin: 40px auto 25px auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    border-bottom: none;
    padding-bottom: 0;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.text-uppercase { text-transform: uppercase; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

/* =====================================================
    4. SLIKE I GALERIJA
   ===================================================== */
.pics img, 
.img-responsive, 
.is-style-proglas-pics img,
.proglas-content img {
    padding: 0 !important;
    border: 1px solid var(--theme-border) !important;
    background-color: transparent !important;
    display: block;
    margin: 25px auto;
    max-width: 100%;
    height: auto;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.row .img-responsive {
    max-width: 100% !important;
    border: 1px solid var(--theme-border) !important;
    padding: 0 !important;
    background-color: transparent !important;
}

figure { margin: 25px auto; }

/* =====================================================
    GUTENBERG IMAGE BLOCK CENTERING
   ===================================================== */
.wp-block-image {
    text-align: center !important;
    margin: 25px auto !important;
    display: block !important;
}

.wp-block-image img {
    margin: 0 auto !important;
    display: block !important;
}

/* Center all image blocks not in galleries */
.wp-block-image:not(.wp-block-gallery .wp-block-image) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Specific centering for standalone images */
.wp-block-image.alignleft,
.wp-block-image.alignright {
    text-align: center !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}
figcaption {
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    color: var(--theme-text-light);
}

/* =====================================================
    VIDEO EMBEDS — FULL WIDTH OF MAIN CONTENT
   ===================================================== */
body.page-video .content-card .wp-block-embed,
.content-card .wp-block-embed.is-provider-embed-handler,
.content-card .wp-block-embed.is-provider-youtube,
.content-card .wp-block-embed.is-provider-vimeo,
.content-card .wp-block-embed.is-type-video,
.content-card .wp-block-video {
    display: block;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

body.page-video .content-card .wp-block-embed .wp-block-embed__wrapper,
.content-card .wp-block-embed.is-provider-embed-handler .wp-block-embed__wrapper,
.content-card .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper,
.content-card .wp-block-embed.is-provider-vimeo .wp-block-embed__wrapper,
.content-card .wp-block-embed.is-type-video .wp-block-embed__wrapper {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

body.page-video .content-card .wp-block-embed .wp-block-embed__wrapper::before,
.content-card .wp-block-embed.is-provider-embed-handler .wp-block-embed__wrapper::before,
.content-card .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper::before,
.content-card .wp-block-embed.is-provider-vimeo .wp-block-embed__wrapper::before,
.content-card .wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
    content: none !important;
    display: none !important;
    padding-top: 0 !important;
}

body.page-video .content-card .wp-block-embed iframe,
.content-card .wp-block-embed.is-provider-embed-handler iframe,
.content-card .wp-block-embed.is-provider-youtube iframe,
.content-card .wp-block-embed.is-provider-vimeo iframe,
.content-card .wp-block-embed.is-type-video iframe {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

body.page-video .content-card .wp-block-embed.wp-embed-aspect-4-3 iframe,
.content-card .wp-block-embed.is-provider-embed-handler.wp-embed-aspect-4-3 iframe,
.content-card .wp-block-embed.is-provider-youtube.wp-embed-aspect-4-3 iframe {
    aspect-ratio: 4 / 3;
}

.content-card .wp-block-video video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
    5. OSTALO
   ===================================================== */
.tela {
    border: none;
    padding: 20px;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.04);
}

.footer-custom {
    height: 35px;
    background-color: var(--theme-primary);
    color: #fff;
    text-align: center;
    padding-top: 8px;
    font-size: 12px;
    width: 100%;
}

/* =====================================================
    6. KONAČNI MOBILE RESPONSIVE FIX
   ===================================================== */
@media (max-width: 991px) {
    .row { 
        display: block !important;
        width: 100% !important;
    }
    
    .col-lg-6.edge,
    .col-lg-6:not(.edge) {
        width: 100% !important; 
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 10px !important;
        text-align: left !important;
        float: none !important;
    }

    .col-lg-6::before, 
    .col-lg-6::after,
    .edge::before,
    .edge::after,
    .col-lg-6 > h3::after { 
        display: none !important; 
    }

    .text-right { text-align: left !important; }
    
    .img-responsive {
        width: 100% !important;
        margin: 10px 0 !important;
    }
}

/* =====================================================
    7. LIGHTBOX
   ===================================================== */
#proglas-lightbox img,
#proglas-lightbox-img,
#custom-lightbox img,
.lightbox-content img {
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#proglas-lightbox img {
    transition: opacity 0.3s ease-in-out;
}

#proglas-lightbox .prev, 
#proglas-lightbox .next {
    user-select: none;
    transition: transform 0.2s;
    text-shadow: none;
}

#proglas-lightbox .prev:hover, 
#proglas-lightbox .next:hover {
    transform: none;
    color: #fff !important;
    opacity: 0.85;
}

@media (max-width: 768px) {
    #proglas-lightbox-img {
        max-width: 96% !important;
        max-height: 78vh !important;
        object-fit: contain !important;
        width: auto !important;
        height: auto !important;
    }
    #proglas-lightbox .prev, 
    #proglas-lightbox .next {
        bottom: 20px;
        top: auto;
    }
}

/* =====================================================
    8. POPRAVKA LISTI (TACKE I BROJEVI)
   ===================================================== */
/* Ciljamo liste unutar kolona i glavnog sadržaja */
.content-card ul,
.col-lg-6 ul {
    list-style-type: disc !important;
    margin: 20px 0 20px 40px !important;
    padding: 0 !important;
    display: block !important;
}

.content-card ul li,
.col-lg-6 ul li {
    display: list-item !important;
    list-style-type: disc !important;
    margin-bottom: 8px !important;
}

/* Numerisane liste */
.content-card ol,
.col-lg-6 ol {
    list-style-type: decimal !important;
    margin: 20px 0 20px 40px !important;
    padding: 0 !important;
    display: block !important;
}

.content-card ol li,
.col-lg-6 ol li {
    display: list-item !important;
    list-style-type: decimal !important;
    margin-bottom: 8px !important;
}
/* Plavi linkovi unutar paragrafa */
.content-card p a,
.col-lg-6 p a,
p a {
    color: var(--theme-primary) !important;
    text-decoration: underline !important; /* Podvučeno da se lakše uoči */
    transition: color 0.2s ease;
}

.content-card p a:hover,
.col-lg-6 p a:hover,
p a:hover {
    color: var(--theme-secondary) !important;
}

/* Stil za novu galeriju izdanja */
.proglas-izdanja-grid .wp-block-column {
    margin-bottom: 40px !important;
}

.proglas-izdanja-grid img {
    aspect-ratio: 1 / 1.5 !important; /* Format knjige */
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border: 1px solid var(--theme-border) !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.izdanje-naslov {
    font-family: 'Latin Modern Roman', serif !important;
    font-size: 14px !important;
    text-transform: uppercase;
    margin-top: 15px !important;
    line-height: 1.2;
}
/* =====================================================
    PROGLAS TOTALNI FIX ZA GALERIJU - 3 KOLONE + COVER
   ===================================================== */

.wp-block-gallery.proglas-native-gallery:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.is-style-proglas-gallery:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.columns-default:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.columns-5:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.columns-4:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.columns-3:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.columns-2:not(.skriveno-skladiste):not(.skrivena-galerija) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem !important;
    padding: 0 !important;
}

.wp-block-gallery.proglas-native-gallery .wp-block-image,
.wp-block-gallery.is-style-proglas-gallery .wp-block-image,
.wp-block-gallery.columns-default .wp-block-image,
.wp-block-gallery.columns-5 .wp-block-image,
.wp-block-gallery.columns-4 .wp-block-image,
.wp-block-gallery.columns-3 .wp-block-image {
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    min-width: 0;
}

.wp-block-gallery.proglas-native-gallery .wp-block-image img,
.wp-block-gallery.is-style-proglas-gallery .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: 1px solid var(--theme-border) !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 4. CAPTION - Ključni deo koji kvari sve */
.wp-block-gallery.proglas-native-gallery figcaption,
.wp-block-gallery.is-style-proglas-gallery figcaption,
.wp-block-gallery.columns-5 figcaption {
    position: relative !important; /* Izbacuje ga iz slike na dno */
    width: 100% !important;
    background: none !important;
    color: var(--theme-text-light) !important;
    margin: 5px 0 15px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    font-family: 'Latin Modern Roman', serif !important;
    text-shadow: none !important;
}

/* Isključi WP-ov gradient koji stavlja preko caption-a */
.wp-block-gallery.proglas-native-gallery .wp-block-image figcaption::before,
.wp-block-gallery.is-style-proglas-gallery .wp-block-image figcaption::before {
    display: none !important;
}

/* Sve galerije: okvir samo na img, bez senke */
.wp-block-gallery .wp-block-image img,
.wp-block-gallery.has-nested-images figure img {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.wp-block-gallery:not(.proglas-native-gallery):not(.is-style-proglas-gallery) .wp-block-image img,
.wp-block-gallery.has-nested-images:not(.proglas-native-gallery):not(.is-style-proglas-gallery) figure img {
    border: 1px solid var(--theme-border) !important;
    padding: 0 !important;
    background: transparent !important;
}
.galerija-tri .wp-block-gallery.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.galerija-tri .wp-block-image {
    width: auto !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.galerija-tri .wp-block-image img {
    border: 1px solid var(--theme-border) !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* =====================================================
    FINALNI POKUŠAJ - CILJANJE WP UNUTRAŠNJOSTI
   ===================================================== */

/* Forsiramo vidljivost natpisa unutar galerije.
   Captions are normal page content and must stay below sticky nav (z-index: 100 / 200). */
.wp-block-gallery .wp-block-image figcaption,
.wp-block-gallery .wp-element-caption,
.wp-block-gallery figure figcaption {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    color: var(--theme-text-light) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 10px 0 20px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-shadow: none !important;
    z-index: auto;
}

/* =====================================================
    PROGLAS POPUP MODAL
   ===================================================== */
.proglas-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: rgb(26 26 26 / 0.88);
    z-index: 400;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.proglas-popup-overlay.active {
    display: block;
}

body.proglas-popup-open,
body.proglas-lightbox-open,
html.proglas-lightbox-open,
html.proglas-lightbox-open body {
    overflow: hidden;
}

.proglas-popup-container {
    position: relative;
    background-color: #fafafa;
    max-width: 100%;
    width: min(52rem, 100%);
    min-height: 100%;
    border: none;
    box-shadow: none;
    margin: 0 auto;
}

.proglas-popup-close {
    position: sticky;
    top: calc(0.75rem + env(safe-area-inset-top));
    float: right;
    margin: 0.75rem 0.75rem 0 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 32px;
    line-height: 1;
    color: #fff;
    background: rgb(26 26 26 / 0.72);
    border: 1px solid #fff;
    cursor: pointer;
    z-index: 2;
    font-family: 'Latin Modern Roman', serif;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.proglas-popup-close:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.proglas-popup-content {
    padding: 1.5rem 1.5rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    min-height: 0;
    clear: both;
}

.proglas-popup-inner {
    font-family: 'Latin Modern Roman', serif;
    line-height: 1.8;
    color: #000;
}

.proglas-popup-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proglas-popup-intro {
    font-size: 15px;
    text-align: var(--proglas-prose-align, justify);
    margin-bottom: 20px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.04);
    border-left: 3px solid var(--theme-primary);
}

.proglas-popup-inner p {
    margin-bottom: 15px;
    text-align: var(--proglas-prose-align, justify);
    font-size: 15px;
}

.proglas-popup-inner em {
    font-style: italic;
}

.proglas-popup-inner strong {
    font-weight: 700;
}

.proglas-popup-signature {
    text-align: right;
    font-weight: 700;
    margin-top: 30px;
    font-size: 16px;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .proglas-popup-overlay {
        padding: 0;
    }

    .proglas-popup-container {
        max-width: 100%;
        min-height: 100vh;
    }

    .proglas-popup-close {
        top: calc(0.5rem + env(safe-area-inset-top));
        right: auto;
        width: 44px;
        height: 44px;
        font-size: 28px;
        background: rgb(26 26 26 / 0.8);
    }

    .proglas-popup-content {
        padding: 1.25rem 1rem 2rem;
        max-width: 100%;
    }

    .proglas-popup-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .proglas-popup-intro {
        font-size: 14px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .proglas-popup-inner p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .proglas-popup-signature {
        font-size: 15px;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .proglas-popup-content {
        padding: 1rem 0.9rem 1.75rem;
    }

    .proglas-popup-title {
        font-size: 18px;
    }

    .proglas-popup-inner p {
        font-size: 13px;
    }
}

/* =====================================================
    PROGLAS POPUP TRIGGER LIST (AUTHOR GRID)
   ===================================================== */
.proglas-popup-list-container {
    margin: 1.75rem auto;
    text-align: center;
    width: 100%;
    max-width: min(800px, 100%);
    overflow-x: clip;
}

.proglas-popup-list-title {
    font-family: 'Latin Modern Roman', serif;
    font-size: 1.125rem;
    margin: 0 0 0.85rem;
    color: var(--theme-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proglas-popup-list,
.authors-grid {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.proglas-popup-list.authors-grid,
.authors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: start;
    justify-items: stretch;
    text-align: left;
}

.proglas-popup-list > *,
.authors-grid > * {
    margin: 0;
    min-width: 0;
}

.proglas-popup-list p,
.authors-grid p {
    margin: 0;
}

.proglas-popup-list .proglas-popup-trigger,
.authors-grid .proglas-popup-trigger,
.proglas-popup-list h4.proglas-popup-trigger,
.authors-grid h4.proglas-popup-trigger {
    font-family: 'Latin Modern Roman', serif;
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--theme-primary);
    text-decoration: none;
    display: block;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.15rem 0;
    border: 0;
    background: none;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    touch-action: manipulation;
    cursor: pointer;
}

.proglas-popup-list .proglas-popup-trigger:hover,
.authors-grid .proglas-popup-trigger:hover {
    color: var(--theme-hover);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

@media (max-width: 768px) {
    .proglas-popup-list-container {
        margin: 1.25rem auto;
        padding: 0 0.5rem;
    }

    .proglas-popup-list-title {
        font-size: 1rem;
        margin-bottom: 0.65rem;
    }

    .proglas-popup-list.authors-grid,
    .authors-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.45rem;
        row-gap: 0.15rem;
    }

    .proglas-popup-list .proglas-popup-trigger,
    .authors-grid .proglas-popup-trigger,
    .proglas-popup-list h4.proglas-popup-trigger,
    .authors-grid h4.proglas-popup-trigger {
        font-size: 0.78rem;
        line-height: 1.3;
        padding: 0.1rem 0;
    }
}

/* Uklanjamo WP-ov defaultni crni gradijent koji često sakriva tekst */
.wp-block-gallery .wp-block-image figcaption::before {
    content: none !important;
    display: none !important;
}

/* Ako koristiš stariju verziju galerije gde je tekst apsolutno pozicioniran */
figure.wp-block-image.is-style-proglas-pics {
    overflow: visible !important;
}
/* FINALNI FIX ZA CAPTION */
.wp-block-gallery figure {
    display: flex !important;
    flex-direction: column !important;
}

.wp-block-gallery .wp-block-image img {
    display: block !important;
}

.wp-block-gallery .wp-element-caption,
.wp-block-gallery figcaption {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto;

    margin-top: 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    color: #000 !important;

    background: none !important;
    padding: 0 !important;
}
/* 1. Animacija za nove slike (Učitaj još) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* 2. Glavni kontejner galerije */
#proglas-gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

body.page-stonsi #proglas-gallery-wrapper {
    grid-template-columns: minmax(0, 1fr);
}

#proglas-gallery-wrapper figure {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: block;
}

#proglas-gallery-wrapper figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 1px solid var(--theme-border);
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.page-stonsi #proglas-gallery-wrapper figure img {
    aspect-ratio: auto;
    object-fit: contain;
}
/* Stil za pasus-okidač - unapređen dizajn */
.trigger-galerija {
    cursor: pointer !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%);
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}

/* Ikonica kamere - bolje poravnanje */
.trigger-galerija::before {
    content: "📷";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Hover efekat - prirodan i glatki */
.trigger-galerija:hover {
    background: linear-gradient(135deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 100%);
    border-color: rgba(0,0,0,0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.trigger-galerija:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

/* Aktivno stanje */
.trigger-galerija:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Sakrivanje galerija na stranici - radi na svim uređajima */
.skriveno-skladiste,
.skrivena-galerija,
.wp-block-gallery.skriveno-skladiste,
.wp-block-gallery.skrivena-galerija {
    display: none !important;
}

/* Mobilni stilovi za trigger */
@media (max-width: 767px) {
    .trigger-galerija {
        padding: 6px 14px 6px 10px;
        font-size: 14px;
    }
    
    .trigger-galerija::before {
        font-size: 12px;
        width: 18px;
        height: 18px;
    }
    
    /* Lightbox na mobilnom - bolje prilagođen */
    #custom-lightbox {
        padding: 20px 8px;
    }
    
    .lightbox-content {
        max-width: 100%;
    }
    
    #close-custom-lightbox {
        top: 10px;
        right: 15px;
        font-size: 32px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.6);
    }
}

/* Stil za naš vertikalni lightbox - sa animacijama */
#custom-lightbox {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0);
    z-index: 999999;
    overflow-y: auto;
    padding: 40px 10px;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Animacija otvaranja - pozadina se zatamnjuje */
#custom-lightbox.opening {
    display: flex;
    opacity: 1;
    background: rgba(0,0,0,0.92);
}

/* Animacija zatvaranja */
#custom-lightbox.closing {
    opacity: 0;
    background: rgba(0,0,0,0);
}

/* Sadržaj lightbox-a sa animacijom ulaska */
.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Animacija sadržaja pri otvaranju */
#custom-lightbox.opening .lightbox-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Animacija sadržaja pri zatvaranju */
#custom-lightbox.closing .lightbox-content {
    transform: translateY(-20px) scale(0.98);
    opacity: 0;
}

/* Stil za dugme zatvaranja sa animacijom - vidljivo na svim uređajima */
#close-custom-lightbox {
    position: fixed;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    line-height: 1;
}

#custom-lightbox.opening #close-custom-lightbox {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#close-custom-lightbox:hover {
    transform: rotate(90deg) scale(1.1) !important;
    color: var(--theme-hover) !important;
}

.lightbox-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid #fff;
    margin-bottom: 30px;
    border-radius: 0;
    box-shadow: none;
}
/* =====================================================
    MOBILE — HIDDEN GALLERIES + INLINE IMAGES
   ===================================================== */
@media (max-width: 767px) {
    .skriveno-skladiste,
    .skrivena-galerija,
    .wp-block-gallery.skriveno-skladiste,
    .wp-block-gallery.skrivena-galerija,
    .skriveno-skladiste.wp-block-gallery,
    .skrivena-galerija.wp-block-gallery,
    .skriveno-skladiste figure,
    .skrivena-galerija figure,
    .skriveno-skladiste img,
    .skrivena-galerija img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    .content-card > .wp-block-image img,
    .col-lg-6 > .wp-block-image img,
    .content-card .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }
}

/* =====================================================
    MOBILE ARCHIVE SIDE MENU
   ===================================================== */
.archive-side-menu {
    position: fixed;
    top: 0;
    right: calc(-1 * min(300px, 88vw));
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    z-index: 2000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.archive-side-menu.open {
    right: 0;
}

.archive-side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid var(--theme-primary);
}

.archive-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--theme-primary);
}

.archive-side-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    font-size: 1rem;
    line-height: 1.6;
}

.archive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.archive-overlay[hidden] {
    display: none;
}

@media (min-width: 1025px) {
    .archive-side-menu,
    .archive-overlay {
        display: none;
    }
}

/* Archive sidebar — legacy drawer rules removed; see .archive-root above */

/* =====================================================
    GALLERY LAYOUTS — 3 KOLONE, COVER U MREŽI, ORIGINAL U LIGHTBOXU
    Izuzetak: body.page-stonsi → 1 slika po redu, prirodni odnos
   ===================================================== */
.wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija),
.wp-block-gallery.has-nested-images:not(.skriveno-skladiste):not(.skrivena-galerija),
#proglas-gallery-wrapper,
.proglas-popup-content .wp-block-gallery,
.galerija-tri .wp-block-gallery,
.galerija-nezavisni .wp-block-gallery,
.galerija-karikature .wp-block-gallery,
.gallery:not(.skriveno-skladiste):not(.skrivena-galerija) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija) > .wp-block-image,
.wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija) > figure,
.wp-block-gallery.has-nested-images:not(.skriveno-skladiste):not(.skrivena-galerija) figure.wp-block-image,
#proglas-gallery-wrapper figure,
.gallery:not(.skriveno-skladiste):not(.skrivena-galerija) .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    flex: none !important;
    margin: 0 !important;
    min-width: 0;
    height: auto !important;
    position: relative !important;
    box-sizing: border-box;
}

.wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija) > figcaption {
    grid-column: 1 / -1;
}

.wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija) img,
#proglas-gallery-wrapper figure img,
.galerija-tri .wp-block-gallery img,
.wp-block-gallery.is-style-proglas-covers img,
.wp-block-gallery.is-style-proglas-karikature img,
.gallery:not(.skriveno-skladiste):not(.skrivena-galerija) .gallery-icon img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Proglas issues: preserve the masthead at the top of every thumbnail. */
body.page-id-505 #proglas-gallery-wrapper figure img {
    object-position: center top !important;
}

/* Nezavisni: square only gallery thumbs, not every page image */
.galerija-nezavisni .wp-block-gallery img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.content-main .wp-block-gallery .is-long-card {
    grid-column: auto;
    width: 100% !important;
    max-width: 100% !important;
}

.content-main .wp-block-gallery .is-long-card img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    height: auto !important;
}

#proglas-lightbox img,
#proglas-lightbox-img,
#custom-lightbox img,
.lightbox-content img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 92vh !important;
}

@media (max-width: 480px) {
    .wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija),
    #proglas-gallery-wrapper,
    .gallery:not(.skriveno-skladiste):not(.skrivena-galerija) {
        gap: 0.4rem !important;
    }
}

/* Stonsi: jedna slika po redu, bez 1:1 crop-a */
body.page-stonsi .wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija),
body.page-stonsi .wp-block-gallery.has-nested-images:not(.skriveno-skladiste):not(.skrivena-galerija),
body.page-stonsi #proglas-gallery-wrapper,
body.page-stonsi .proglas-popup-content .wp-block-gallery,
body.page-stonsi .gallery:not(.skriveno-skladiste):not(.skrivena-galerija) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
}

body.page-stonsi .wp-block-gallery:not(.skriveno-skladiste):not(.skrivena-galerija) img,
body.page-stonsi #proglas-gallery-wrapper figure img,
body.page-stonsi .proglas-popup-content .wp-block-gallery img,
body.page-stonsi .gallery:not(.skriveno-skladiste):not(.skrivena-galerija) .gallery-icon img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}

body.page-stonsi .content-main .wp-block-gallery .is-long-card {
    grid-column: auto;
}

body.page-stonsi .content-main .wp-block-gallery .is-long-card img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle-bars span,
    .primary-menu-overlay,
    .primary-menu-sheet,
    .archive-menu-overlay,
    .archive-menu-sheet,
    .primary-menu-backdrop,
    .primary-menu li,
    .archive-panel,
    .archive-collapse,
    .archive-drawer-caret,
    .archive-caret,
    .nav-panel-sheet,
    .proglas-popup-overlay {
        transition: none !important;
        animation: none !important;
    }

    .primary-menu li {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================
    BILTENI ARCHIVE GRID
    Document cards only. Do not reuse for photo galleries.
   ===================================================== */
.bulletin-archive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.bulletin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    align-items: start;
}

.content-card .bulletin-card,
.bulletin-card {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.content-card .bulletin-card:hover,
.bulletin-card:hover {
    color: inherit;
}

.bulletin-card:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.bulletin-card figure {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.bulletin-card__thumbnail {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: transparent;
}

.content-card .bulletin-card img,
.content-card .bulletin-card__image,
.bulletin-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    object-fit: cover;
    object-position: top center;
}

.bulletin-card__meta {
    padding: 0;
    margin: 8px 0 0;
    background: transparent;
    text-align: center;
    font-size: 13px;
    color: #000;
}

.bulletin-card__label {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #000;
}

.bulletin-warehouse {
    display: none;
}

@media (max-width: 480px) {
    .bulletin-grid {
        gap: 0.4rem;
    }
}

/* =====================================================
    SCANNED DOCUMENT PREVIEW + CONTINUOUS READER
   ===================================================== */
.document-preview {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem auto 1.75rem;
    text-align: center;
}

.document-preview__open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.document-preview__open:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 4px;
}

.document-preview__cover {
    display: block;
    width: min(100%, 520px);
    margin-inline: auto;
    border: 1px solid var(--theme-border);
    background: #fff;
    line-height: 0;
}

.document-preview__cover-image,
.content-card .document-preview__cover-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: contain;
    aspect-ratio: auto;
}

.document-preview__subtitle {
    display: block;
    max-width: 36rem;
    margin: 0 auto;
    color: var(--theme-text);
    font-family: 'Latin Modern Roman', serif;
    font-size: 1rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.document-preview__cta {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--theme-border);
    color: var(--theme-primary);
    font-family: 'Latin Modern Roman', serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    background: #fff;
}

.document-preview__open:hover .document-preview__cta {
    background: var(--theme-muted);
}

.document-preview__open:active .document-preview__cover {
    opacity: 0.92;
}

.document-preview__pages-json {
    display: none !important;
}

.document-reader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    flex-direction: column;
    background: #1a1a1a;
    color: #f5f5f5;
}

.document-reader.is-open {
    display: flex;
}

.document-reader__chrome {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 18, 18, 0.96);
}

.document-reader__title {
    margin: 0;
    padding: 0;
    border: 0;
    color: #f3f3f3;
    font-family: 'Latin Modern Roman', serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-reader__close {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.document-reader__close:hover,
.document-reader__close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.document-reader__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.document-reader__pages {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(100%, 1000px);
    margin: 0 auto;
    padding: 0 0 3.75rem;
    line-height: 0;
}

.document-reader__page {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
}

.document-reader__page img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    vertical-align: top;
    pointer-events: none;
    user-select: none;
}

.document-reader__nav {
    position: absolute;
    left: 50%;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transform: translateX(-50%);
    padding: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(18, 18, 18, 0.92);
    color: #f5f5f5;
    font-family: 'Latin Modern Roman', serif;
    pointer-events: auto;
}

.document-reader__nav[hidden] {
    display: none !important;
}

.document-reader__nav-btn {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.document-reader__nav-btn:hover:not(:disabled),
.document-reader__nav-btn:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.document-reader__nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.document-reader__nav-label {
    min-width: 7.5rem;
    padding: 0 0.35rem;
    font-size: 0.92rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

html.proglas-document-reader-open,
html.proglas-document-reader-open body,
body.proglas-document-reader-open {
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .document-preview__cover {
        width: min(100%, 420px);
    }

    .document-reader__chrome {
        padding: 0.45rem 0.55rem;
        padding-top: max(0.45rem, env(safe-area-inset-top));
    }

    .document-reader__title {
        font-size: 0.92rem;
    }

    .document-reader__pages {
        width: 100%;
        max-width: 100%;
        padding-bottom: 4rem;
    }

    .document-reader__nav {
        bottom: max(0.55rem, env(safe-area-inset-bottom));
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .document-reader__nav-btn {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.25rem;
    }

    .document-reader__nav-label {
        min-width: 6.75rem;
        font-size: 0.85rem;
    }
}


@media (prefers-reduced-motion: reduce) {
    .document-preview__open:active .document-preview__cover {
        opacity: 1;
    }
}

/* Section navigation and heading colors on the protest history page. */
.page-id-90 .content-card .wp-block-heading,
.page-id-131 .content-card .wp-block-heading {
    color: #1e3a5f !important;
}
.page-id-90 .content-card .is-style-proglas-heading[id] {
    display: block !important;
    scroll-margin-top: 100px;
    border-bottom: 2px solid var(--theme-secondary);
    padding-bottom: 0.5rem;
}
.page-id-90 .protest-sections-menu {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: #f4f5f6;
    border: 1px solid #e2e6ea;
    border-radius: 4px;
}
.page-id-90 .protest-sections-label {
    display: block;
    text-align: center;
    color: #526477;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.page-id-90 .content-card .protest-sections-menu ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 0.25rem 1.5rem;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-id-90 .content-card .protest-sections-menu ul li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-id-90 .protest-sections-menu a {
    display: block;
    text-align: center;
    padding: 0.5rem 0;
    color: #1e3a5f;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
}
.page-id-90 .protest-sections-menu a:hover,
.page-id-90 .protest-sections-menu a:focus-visible {
    color: #2d5a8f;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-id-90 .protest-sections-menu a:focus-visible,
.page-id-90 .protest-sections-toggle:focus-visible {
    outline: 2px solid #1e3a5f;
    outline-offset: 3px;
}
.page-id-90 .protest-sections-toggle { display: none; }
@media (max-width: 700px) {
    .page-id-90 .protest-sections-menu { padding: 0.75rem 1rem; }
    .page-id-90 .protest-sections-menu.is-enhanced .protest-sections-label { display: block; }
    .page-id-90 .protest-sections-menu.is-enhanced .protest-sections-toggle {
        display: none;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #1e3a5f;
        font: inherit;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    .page-id-90 .protest-sections-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
    .page-id-90 .content-card .protest-sections-menu ul {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }
    .page-id-90 .content-card .protest-sections-menu ul[hidden] { display: grid !important; }
    .page-id-90 .protest-sections-menu a { min-height: 44px; }
}

/* Consistent typography for the dated protest timeline only. */
.page-id-90 .protest-timeline-event > h3 {
    font-family: 'Latin Modern Roman', serif;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none !important;
    letter-spacing: normal;
    text-align: left !important;
    margin: 0 0 0.75rem !important;
}
.page-id-90 .protest-timeline-event > p {
    font-size: 17px;
    font-weight: 400 !important;
    line-height: 1.6;
    text-transform: none !important;
    text-indent: 0 !important;
    text-align: left !important;
    margin: 0 0 1rem !important;
}
.page-id-90 .protest-timeline-event > figure {
    margin: 1rem 0 0;
}
.page-id-90 .protest-timeline-event figcaption {
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    margin: 0.5rem 0 0;
}
@media (min-width: 992px) {
    .page-id-90 .protest-timeline-event {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* A section title opens its overview; the separate arrow expands the menu. */
.archive-item.has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
}
body .archive-root .archive-item > .archive-section-link {
    padding-right: 0.25rem;
}
body .archive-root .archive-item > .archive-section-toggle {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    align-items: center;
    min-height: 44px;
}
.archive-section-toggle .archive-caret {
    margin: 0;
}
.archive-item.has-children > .archive-collapse {
    grid-column: 1 / -1;
}
.content-card ul.archive-section-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
}
.content-card ul.archive-section-list > li {
    list-style: none !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(30, 58, 95, 0.15);
}
.archive-section-list > li > a {
    display: block;
    padding: 0.85rem 0.5rem;
}

/* Stilovi za timeline tekst - popravljeno da obuhvati sve paragrafe u obe kolone */
.timeline-page .col-lg-6 p,
.timeline-page .col-lg-6.edge p,
.row .col-lg-6 p {
    text-transform: uppercase !important;
    font-weight: normal !important;

/* GLOBALNO SAKRIVANJE AUTOMATSKIH NASLOVA STRANICA */
h1.entry-title,
h1.page-title,
h1.timeline-h1,
.entry-header h1,
.page-visible-title {
    display: none !important;
}

/* OSIGURAJ DA TVOJ RUCNO DODAT NASLOV OSTAJE VIDLJIV */
h3.is-style-proglas-heading {
    display: block !important;
}