/* ============================================================
 * Modern responsive overlay for the Joomla-era Bootstrap 2 layout.
 * Loaded LAST so it wins cascade. Touches only at narrow breakpoints,
 * leaves desktop look intact.
 * ============================================================ */

/* ---------- Accessibility: skip-link + focus styles ---------- */

/* Skip-link — hidden off-canvas by default, slides in on keyboard focus.
 * Screen-reader friendly (still in the a11y tree) but visually out of the
 * way until a sighted keyboard user tabs to it. */
.skip-link {
    position: absolute;
    left: 0;
    top: -100px;       /* parked above the viewport */
    z-index: 9999;
    padding: 10px 16px;
    background: #0066a2;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 120ms ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffd000;
    outline-offset: 0;
}

/* Visible focus ring on every interactive element — meets WCAG 2.4.7.
 * The Joomla-era template stripped focus rings on links and buttons; we
 * restore them here without touching default look. Use :focus-visible so
 * mouse clicks don't show the ring (only keyboard / touch). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #0066a2;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 208, 0, 0.4);
}

/* Don't make focus rings overflow inside dense tables/grids — softer there. */
.nav-items a:focus-visible,
.moduletable a:focus-visible {
    outline-offset: 0;
}

/* ---------- Base improvements that help every viewport ---------- */
* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;      /* prevent horizontal scroll on phones */
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
}

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

/* ---------- Adaptive public navigation managed from admin ----------
   The admin can add/remove main-bar and sidebar links. These overrides
   make the legacy Joomla menus grow vertically instead of overlapping
   the hero, grid, or content when labels are long or the item count grows. */
#navigation-row {
    overflow: visible;
}

#navigation-row .row-container {
    overflow: visible;
}

#topnav {
    white-space: normal !important;
    overflow: visible;
}

#topnav > ul.clear {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 !important;
}

#topnav > ul.clear::before,
#topnav > ul.clear::after {
    content: none !important;
}

#topnav > ul.clear > li {
    float: none !important;
    display: flex;
    margin: 0 !important;
}

#topnav > ul.clear > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 11px !important;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

#topnav li a.drop,
#topnav li.active a.drop {
    padding-left: 18px !important;
    background-position: 6px center;
}

#topnav ul ul {
    top: 100%;
}

#topnav ul ul li {
    float: none !important;
    display: block;
}

#topnav ul ul li a {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

ul.side-menu li {
    padding: 0 !important;
    min-height: 0;
}

ul.side-menu li a {
    display: block;
    padding: 5px 7px;
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
}

ul.side-menu li ul {
    margin: 4px 0 0;
    padding-left: 0;
}

ul.side-menu li ul li a {
    font-size: 12px;
    text-transform: none;
}

/* Make any embedded iframe (YouTube/Vimeo) responsive */
.item_content iframe,
.video-embed iframe,
article iframe {
    max-width: 100%;
}

/* ============================================================
 * High-contrast theme (`body.vrt-hc`) — WCAG AAA-aligned palette
 * for users with low vision. Toggled via the "А" button in the
 * masthead (admin-help.js), persisted in localStorage.
 *
 * Palette:
 *   bg       #000        (paper black)
 *   fg       #fff        (paper white)
 *   link     #ffd000     (gov-yellow, ~14:1 contrast vs black)
 *   visited  #ffd866
 *   accent   #00ffff     (cyan for keyboard focus)
 * ============================================================ */
body.vrt-hc,
body.vrt-hc #content-row,
body.vrt-hc #footer-wrapper,
body.vrt-hc .container,
body.vrt-hc .moduletable {
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.vrt-hc a,
body.vrt-hc a:link {
    color: #ffd000 !important;
    text-decoration: underline !important;
}
body.vrt-hc a:visited { color: #ffd866 !important; }
body.vrt-hc a:hover,
body.vrt-hc a:focus { background: #ffd000 !important; color: #000 !important; outline: 2px solid #00ffff !important; outline-offset: 2px; }

body.vrt-hc *:focus-visible {
    outline: 3px solid #00ffff !important;
    outline-offset: 2px;
    background: rgba(0, 255, 255, 0.15) !important;
}

body.vrt-hc h1, body.vrt-hc h2, body.vrt-hc h3,
body.vrt-hc h4, body.vrt-hc h5, body.vrt-hc h6,
body.vrt-hc .moduleTitle,
body.vrt-hc strong, body.vrt-hc b {
    color: #fff !important;
}

body.vrt-hc .news-grid__title a,
body.vrt-hc .news-grid__title a:visited { color: #ffd000 !important; }
body.vrt-hc .news-stack__title a,
body.vrt-hc .news-stack__title a:visited { color: #ffd000 !important; }

body.vrt-hc .news-grid__featured,
body.vrt-hc .news-grid__cell { border-color: #444 !important; }
body.vrt-hc .news-grid__footer { border-top-color: #444 !important; }
body.vrt-hc .news-grid__date,
body.vrt-hc .news-stack__date,
body.vrt-hc .item_published { color: #ddd !important; }

body.vrt-hc img { filter: none; }  /* don't darken news photos — they're real-world */

body.vrt-hc .left_contacts { background: #1a1a1a !important; }

/* Don't apply HC to admin panel — admins have their own toggle separately
   and the form contrast there isn't safe under this palette. */
body.vrt-hc-disabled-admin {}

/* The toggle button itself, in the masthead (rendered by the layout). */
.vrt-hc-toggle {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1;
}
.vrt-hc-toggle:hover,
.vrt-hc-toggle:focus-visible { background: rgba(255,255,255,0.1); outline: 2px solid currentColor; }
body.vrt-hc .vrt-hc-toggle { color: #ffd000 !important; border-color: #ffd000 !important; }

/* ============================================================
 * Language switcher — flags + BG/EN text labels.
 *
 * Replaces the bare-flag images that were 16×12 px (un-clickable mess).
 * Renders as two pill-shaped buttons at every viewport size:
 *   - Active locale = greyed, non-clickable
 *   - Alternate locale = clickable, white background, brand-green
 *     border on hover/focus + lift
 * ============================================================ */
.vrt-lang-switch {
    align-items: center;
}
.vrt-lang-switch li { margin: 0 !important; padding: 0 !important; }

.vrt-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    min-height: 30px;
    border: 1px solid #c5cdd6;
    border-radius: 4px;
    background: #fff;
    color: #1c1f23;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 120ms, background-color 120ms, transform 80ms;
}
.vrt-lang img {
    width: 20px;
    height: auto;
    display: block;
    border: 0;
    flex-shrink: 0;
}
.vrt-lang span {
    letter-spacing: 0.04em;
    color: inherit;
}

/* Clickable (alternate locale) — strong hover affordance. */
a.vrt-lang:hover,
a.vrt-lang:focus-visible {
    border-color: #0c5b22;
    background: #f0f7f0;
    color: #0c5b22;
    transform: translateY(-1px);
    outline: none;
}
a.vrt-lang:focus-visible {
    outline: 2px solid #0c5b22;
    outline-offset: 2px;
}
a.vrt-lang:active { transform: translateY(0); }

/* Active locale — visually "selected", not clickable. */
.vrt-lang--active {
    background: #f4f6f9 !important;
    color: #6c7480 !important;
    cursor: default;
    border-color: #d1d6dc !important;
}
.vrt-lang--active img { opacity: 0.6; }

/* Mobile — keep the same visual style but stretch the tap target. */
@media (max-width: 992px) {
    .vrt-lang {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 13.5px;
    }
}

/* ============================================================
 * Left sidebar — banners + contacts module
 * Matches live vratsa.government.bg's sidebar styling: full-width images
 * stacked with 8px gap, contacts block in a dark-green header card.
 * ============================================================ */
.left_banners {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}
.left_banners > a,
.left_banners > img {
    display: block;
    line-height: 0;
}
.left_banners img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 2px;
}
.left_banners a:focus-visible {
    outline-offset: 2px;  /* don't crowd the image edge */
}

/* Контакти module under banners — header bar + body card */
.left_contacts {
    margin: 0 0 14px;
    background: #0d4d1c;     /* same brand green as section headers on live */
    color: #fff;
    border-radius: 2px;
    overflow: hidden;
}
.left_contacts .contacts-info {
    padding: 14px 16px 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #f1f5f1;
}
.left_contacts .contacts-info strong { color: #fff; }
.left_contacts .contacts-info a {
    color: #ffd866;
    word-break: break-all;
}
.left_contacts .contacts-info a:hover,
.left_contacts .contacts-info a:focus { text-decoration: underline; }

/* ----------------------------------------------------------------
 * Mobile / tablet rules for the home layout:
 *
 *   1. Hide the left-sidebar БАНЕРИ + КОНТАКТИ modules. They're partner
 *      promo material — useful on desktop, just noise on a phone where
 *      users want news first.
 *   2. Reorder the 3-column row so the main content (#component, where
 *      news/events live) renders BEFORE the left aside and right aside.
 *      Use flex `order` so we don't need to touch markup or any of the
 *      legacy Joomla wrapper divs.
 *
 * Both kick in at ≤992px so tablets get the cleaner layout too.
 * ---------------------------------------------------------------- */
@media (max-width: 992px) {

    /* Hide the БАНЕРИ + КОНТАКТИ headers, their toggle checkboxes, and
       the bodies. `.banners_btn` is shared by both module headers (NOT
       by "Полезни връзки" which uses `.left_side_btn`), so this scope
       is safe. */
    h3.moduleTitle.banners_btn,
    input#banners_checkbox1,
    input#left_contacts_checkbox1,
    .left_banners,
    .left_contacts {
        display: none !important;
    }

    /* Reorder the 3-column row so news/events show first on mobile.
       The parent is `.content-inner.row` from layouts/vratsa.blade.php.
       Bootstrap-2's float grid was already neutralised earlier in this
       file — we just need to add flex + per-child `order`. */
    .content-inner.row {
        display: flex !important;
        flex-direction: column;
    }
    .content-inner.row #component   { order: 1; }
    .content-inner.row #aside-left  { order: 2; }
    .content-inner.row #aside-right { order: 3; }
}

/* ============================================================
 * News grid (`.news-grid`) — pixel-aligned with live vratsa.government.bg.
 *
 * Two layers:
 *   1. `.news-grid__featured` — full-width first article, title above,
 *      image (left, larger) + text (right) inline, date+read-more below.
 *   2. `.news-grid__cell` — 2-up grid of subsequent articles. Each cell:
 *      title above, image (left, smaller) + text (right) inline,
 *      date+read-more below.
 *
 * The `.news-grid` qualifier raises specificity so we don't need to
 * !important every property when overriding Joomla's stock mod_newsflash.
 * ============================================================ */
.mod-newsflash-adv.news-grid {
    margin: 0;
}

/* ---------- Title (used by both featured + cells) -------------------- */
.news-grid .news-grid__title {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
}
.news-grid .news-grid__title a {
    color: #1c1f23;
    text-decoration: none;
}
.news-grid .news-grid__title a:hover,
.news-grid .news-grid__title a:focus {
    color: #0c5b22;
    text-decoration: underline;
}

/* ---------- Body row: image (left) + text (right) inline ------------ */
.news-grid .news-grid__body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    /* legacy mod_newsflash rules apply display:block — override hard */
}
.news-grid .news-grid__image {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    float: none !important;
}
.news-grid .news-grid__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #d6dbe1;
    border-radius: 2px;
    background: #f3f4f6;
}
.news-grid .news-grid__text {
    flex: 1 1 auto;
    min-width: 0;
    color: #2b2f33;
    font-size: 14px;
    line-height: 1.55;
    text-align: justify;
}

/* ---------- Footer row: read-more (left) + date (right) ------------- */
.news-grid .news-grid__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #f0f2f5;
    list-style: none;
}
.news-grid .news-grid__more {
    color: #0c5b22 !important;
    font-weight: 600;
    text-decoration: none;
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
}
.news-grid .news-grid__more:hover,
.news-grid .news-grid__more:focus {
    text-decoration: underline;
}
.news-grid .news-grid__more span {
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
}
.news-grid .news-grid__date {
    color: #6c7480;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Featured row: full content-column width ----------------- */
.news-grid .news-grid__featured {
    padding: 20px 0 22px;
    border-bottom: 1px solid #e5e9ee;
    margin: 0;
    float: none !important;
    width: auto !important;
    display: block;
}
.news-grid .news-grid__featured .news-grid__image {
    flex: 0 0 48%;
    max-width: 48%;
}

/* ---------- 2-up row + cells --------------------------------------- */
.news-grid .news-grid__row {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.news-grid .news-grid__row::before,
.news-grid .news-grid__row::after {
    content: none; /* kill Bootstrap-2 row clearfix that breaks flex */
}
.news-grid .news-grid__cell {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 20px 0 22px;
    border-bottom: 1px solid #e5e9ee;
    float: none !important;
    display: block;
}
.news-grid .news-grid__cell .news-grid__image {
    flex: 0 0 42%;
    max-width: 42%;
}

/* Last row: drop the bottom border on both cells */
.news-grid .news-grid__row:last-child .news-grid__cell {
    border-bottom: 0;
}

/* ---------- Mobile (≤768px): cells stack, images shrink ------------- */
@media (max-width: 768px) {
    .news-grid .news-grid__title { font-size: 15px; }
    .news-grid .news-grid__row {
        flex-direction: column;
        gap: 0;
    }
    .news-grid .news-grid__featured .news-grid__image,
    .news-grid .news-grid__cell .news-grid__image {
        flex: 0 0 38%;
        max-width: 38%;
    }
    .news-grid .news-grid__featured,
    .news-grid .news-grid__cell {
        padding: 16px 0 14px;
    }
}

/* ---------- Tiny phones (≤480px): image + text stack vertically ----- */
@media (max-width: 480px) {
    .news-grid .news-grid__body {
        flex-direction: column;
        gap: 10px;
    }
    .news-grid .news-grid__featured .news-grid__image,
    .news-grid .news-grid__cell .news-grid__image {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ---------- Larger touch targets for menus on mobile ---------- */
@media (max-width: 992px) {
    .menu li > a,
    .mod-menu li > a {
        padding: 12px 14px !important;
        min-height: 44px;
        line-height: 1.3;
    }
}

/* ---------- Slideshow arrows (camera.js plugin) ----------------
   The plugin's prev/next buttons use a sprite (images/camera_skins.png)
   that we now ship. We layer a modern circular background underneath
   so the arrows are visible on any photo regardless of brightness. */
.camera_wrap .camera_prev,
.camera_wrap .camera_next {
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
}
.camera_wrap .camera_prev:hover,
.camera_wrap .camera_next:hover {
    opacity: 1;
    transform: scale(1.05);
}
.camera_wrap .camera_prev > span,
.camera_wrap .camera_next > span {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
/* Hide the play/pause command on touch — users swipe; the buttons
   crowd the slideshow on small screens. */
.camera_wrap .camera_commands { display: none; }

/* ============================================================
 * Tablet — 992px and below
 * Stack sidebars + main into a single column, keep top nav.
 * ============================================================ */
@media (max-width: 992px) {

    .container,
    body > .row-container > .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin: 0 !important;
    }

    .row,
    .row-fluid {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reset Bootstrap 2 .spanN grid to full width on narrow */
    [class*="span"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        min-height: 0 !important;
    }

    /* Slideshow — let it adapt instead of staying at 411px desktop height.
       camera.js sets inline heights on .camera_src/.camera_target too, so
       we override those as well or the wrapper looks empty. */
    #camera_wrap_1,
    .camera_wrap {
        height: auto !important;
        min-height: 240px;
    }
    #camera_wrap_1 .camera_src,
    #camera_wrap_1 .camera_target,
    #camera_wrap_1 .camera_target_content,
    #camera_wrap_1 .camera_overlayer,
    #camera_wrap_1 .camera_loader,
    #camera_wrap_1 > div {
        height: auto !important;
        min-height: 240px;
    }
    /* Hero: slideshow ON TOP, tile-grid BELOW. Bootstrap 2's `.row` is
       a float-clearfix container; on mobile we make it a column-flex
       container so the children stack vertically no matter what
       float/width rules template.css applies. */
    #showcase-row .row,
    #showcase-row .row-container .row {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 10px;
    }
    #showcase-row .row > .moduletable,
    #showcase-row .row > [class*="span"],
    #showcase-row .row > .span7,
    #showcase-row .row > .span5 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;          /* don't let flex stretch them */
        order: 0;                            /* keep DOM order: slideshow first */
    }
    #showcase-row .row > .span5 {
        order: 1;                            /* tile-grid second, always below */
    }

    /* Header — stack logo, search, language switcher */
    header .moduletable.search-block {
        margin-top: 12px;
    }

    /* Mobile tap target for the HC toggle (language switcher handled by
       `.vrt-lang` rules which apply at all viewports). */
    .vrt-hc-toggle {
        min-width: 44px;
        min-height: 36px;
    }

    /* EN notice — tighten typography for narrow viewports, keep readable. */
    #vrt-en-notice {
        font-size: 13.5px;
        padding: 9px 12px;
    }
    #vrt-en-notice > div {
        gap: 10px;
    }
    #vrt-en-notice a[href*="locale"] {
        padding: 4px 10px;
        font-size: 12.5px;
    }

    /* Sidebars stack below main content but remain readable */
    .col-sidebar-left,
    .col-sidebar-right {
        margin-top: 16px;
    }

    /* News grid: 2-up becomes 1-up */
    .mod-newsflash-adv .item__module {
        margin-bottom: 14px;
    }

    /* Tables in admin shouldn't blow out viewport */
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Footer columns stack */
    .footer-container > div,
    #footer .row > div {
        margin-bottom: 18px;
    }
}

/* ============================================================
 * Mobile — 768px and below
 * Hide decorations, biggest touch targets, single column
 * ============================================================ */
@media (max-width: 768px) {

    body {
        font-size: 15px;
        line-height: 1.55;
    }

    h1, .moduleTitle, h3.moduleTitle {
        font-size: 1.35em !important;
        line-height: 1.3;
    }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1.1em; }
    h4 { font-size: 1.05em; }

    /* Hide the desktop top menu, show hamburger drill nav */
    .nav-pills,
    header .mod-menu__main,
    .menu.nav {
        display: none !important;
    }

    .nav-top,
    .nav-drill {
        display: block !important;
    }

    /* Editor status bar must not crowd the page */
    #vrt-ie-status {
        font-size: 12px !important;
        padding: 4px 8px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    #vrt-ie-status a, #vrt-ie-status button {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
    body.has-vrt-ie-status { padding-top: 64px; }

    /* Help bubble doesn't overlap content */
    .vrt-help-trigger {
        right: 12px !important;
        bottom: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* Inline-edit menu sized for thumbs */
    .vrt-ie-menu {
        min-width: 220px !important;
    }
    .vrt-ie-menu button {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    .vrt-ie-modal {
        width: 96vw !important;
        padding: 14px !important;
        max-height: 92vh !important;
    }

    /* Mobile slideshow — match live's aspect (~65% tall on iPhone) and
       guarantee the image is actually centered in the window. camera.js
       inserts an <img> inside .camera_target_content; without these
       rules the inner divs collapse and the image lands off-center. */
    #camera_wrap_1,
    .camera_wrap {
        position: relative !important;
        width: 100% !important;
        min-height: 220px !important;
        height: 65vw !important;          /* bumped from 56vw to match live */
        max-height: 360px !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #000;                  /* dark backdrop while loading */
    }
    #camera_wrap_1 .camera_src,
    #camera_wrap_1 .camera_target,
    #camera_wrap_1 .camera_target_content,
    #camera_wrap_1 .camera_overlayer,
    #camera_wrap_1 .cameraCont,
    #camera_wrap_1 .cameraContents,
    #camera_wrap_1 > div {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* The actual <img> that camera.js inserts — center it inside the
       slideshow window and crop equally from each side via cover. */
    #showcase-row img,
    #camera_wrap_1 img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        margin: 0 !important;
    }
    /* Caption shrinks on phones so it doesn't cover the photo */
    .camera_caption {
        font-size: 13px !important;
        padding: 6px 10px !important;
        line-height: 1.25 !important;
    }
    .camera_caption a { font-size: 13px !important; }

    /* ----------------------------------------------------------
     * MOBILE PARITY PASS — match live's iPhone rendering exactly.
     * Bugs spotted in IMG_6840–6854 screenshots vs vratsa.government.bg
     * --------------------------------------------------------- */

    /* M1 — Hamburger to top-RIGHT. Live shows the green-circle menu
       button anchored to the upper right edge; ours was drifting left
       because the .nav-top flex container had no explicit justify.
       Set both ways: margin-left:auto on the child AND justify-content
       on the parent so the rule survives template.css changes. */
    .nav-top {
        justify-content: flex-end !important;
        padding-right: 10px !important;
        padding-top: 8px !important;
        background: transparent !important;
    }
    .nav-top .hamburger {
        margin-left: auto !important;
        margin-right: 0 !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        text-align: center;
        padding: 0 !important;
        font-size: 24px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.18);
    }

    /* M2 — Category grid: rectangular buttons (2:1 aspect-ratio), not
       squares. template.css line 1050 sets `.social li { width: 30.9%;
       min-height: 92px; float: left; }` for a desktop 3-column flex
       layout; those rules leak onto mobile and fight my grid. Every
       override below carries !important AND uses the `html` qualifier
       to bump specificity definitively above .social. */
    html .mod-menu__social,
    .mod-menu__social {
        padding: 0 !important;
        border: 0 !important;
        margin: 0 !important;
    }
    html .mod-menu__social ul.menu.social,
    .mod-menu__social ul.menu.social {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 12px 0 !important;
        list-style: none !important;
        border: 0 !important;
        overflow: visible !important;
    }
    html .mod-menu__social ul.menu.social li,
    .mod-menu__social ul.menu.social li {
        /* Beat .social li { float:left; width:30.9%; min-height:92px; } */
        float: none !important;
        width: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        display: block !important;
        background: transparent !important;
    }
    html .mod-menu__social ul.menu.social li > a,
    .mod-menu__social ul.menu.social li > a {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2.6 / 1 !important;   /* slimmer rectangle than before */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.1 !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        border: 1px solid #c8c8c8 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;          /* override template.css flex:1 1 auto */
        font: 600 10.5px/1.1 'Open Sans', sans-serif !important;
        color: #1b3a1d !important;
        text-decoration: none !important;
    }
    html .mod-menu__social ul.menu.social li > a > span,
    .mod-menu__social ul.menu.social li > a > span {
        font-size: 10.5px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        display: block !important;
        letter-spacing: .1px !important;
        word-break: keep-all !important;
    }
    /* Hover/active — tile darkens slightly to match live's look */
    html .mod-menu__social ul.menu.social li > a:hover,
    .mod-menu__social ul.menu.social li > a:hover {
        background: #f7f7f7 !important;
        border-color: #888 !important;
    }

    /* M3 — The public "🔑 Вход" admin link must NOT show on mobile for
       visitors (live doesn't have it). Admins logged in still see their
       name + Изход — fine. The drawer (nav-drill) carries the admin
       login link via the @auth check in the layout, so the hamburger
       still gets you to admin from a phone. */
    .moduletable.search-block > div:last-child > a[href*="login"] {
        display: none !important;
    }

    /* M4 — News card body text: live uses left-align; ours had
       text-align: justify from the Joomla template which produces
       ugly word gaps at narrow widths. */
    .item_introtext,
    .item_introtext p,
    .item_content p,
    .mod-newsflash-adv p,
    article p[align="justify"] {
        text-align: left !important;
    }
    /* News card image gets a consistent size — when cover_image points
       at a missing file the alt-text shows in a sized box rather than
       collapsing to 0px and leaving the browser broken-image icon. */
    /* M4 mobile news cards override the desktop flex (42%) — on phones
       the photo + text are side-by-side at smaller proportions; cards
       still stack one-per-row (not 2-col) so the text has room. */
    .mod-newsflash-adv .row > .span6,
    .mod-newsflash-adv .row > .item.span6 {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    .mod-newsflash-adv .item__module .img-intro,
    .mod-newsflash-adv .item__module .img-intro__left {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .mod-newsflash-adv .item__module .item_info_dl {
        font-size: 13px;
    }

    /* M5 — Inline-edit + help bubble must not collide with the now
       right-anchored hamburger. Hamburger sits at 10px from the right;
       push the help bubble further down so taps don't overlap. */
    .vrt-help-trigger {
        right: 10px !important;
        bottom: 18px !important;
    }
    /* Editor status bar already adapts (see rules above) — but ensure
       it stays BELOW the hamburger header on very narrow phones */
    body.has-vrt-ie-status .nav-top {
        top: 48px !important;
    }

    /* Footer collapses */
    #footer {
        text-align: center;
        padding: 14px 0 !important;
    }
}

@media (max-width: 768px) {
    html .mod-menu__social ul.menu.social,
    .mod-menu__social ul.menu.social {
        grid-template-columns: 1fr !important;
    }

    html .mod-menu__social ul.menu.social li > a,
    .mod-menu__social ul.menu.social li > a {
        aspect-ratio: auto !important;
        min-height: 58px !important;
        padding: 8px 10px !important;
    }
}

/* ============================================================
 * Small phones — 480px and below
 * ============================================================ */
@media (max-width: 480px) {

    body { font-size: 14px; }

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Login page form full width */
    .form-login {
        max-width: 100% !important;
    }

    /* Slideshow on phones — keep the ~65% aspect from the parent block;
       just cap the absolute max so it doesn't dwarf the content. Arrows
       scale down so they don't crowd the photo. */
    #camera_wrap_1, .camera_wrap {
        height: 60vw !important;
        max-height: 260px !important;
    }
    .camera_wrap .camera_prev,
    .camera_wrap .camera_next {
        transform: scale(.8);
    }

    /* Tighter tile shape + font on small phones (≤480px) — even slimmer
       rectangle and tiny font so labels fit on 2 lines max even at
       ~160px tile width */
    html .mod-menu__social ul.menu.social,
    .mod-menu__social ul.menu.social {
        grid-template-columns: 1fr !important;
    }

    html .mod-menu__social ul.menu.social li > a,
    .mod-menu__social ul.menu.social li > a {
        aspect-ratio: auto !important;
        min-height: 58px !important;
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        padding: 8px 10px !important;
    }
    html .mod-menu__social ul.menu.social li > a > span,
    .mod-menu__social ul.menu.social li > a > span {
        font-size: 9.5px !important;
        letter-spacing: 0 !important;
    }

    /* Make sure modals are reachable */
    .vrt-ie-backdrop,
    .vrt-help-backdrop {
        padding: 8px;
        align-items: flex-start !important;
        padding-top: 60px !important;
    }
}

/* ============================================================
 * Print
 *
 * Gov staff print articles + ZDOI responses. The on-screen layout
 * (nav, sidebars, slideshow, banners, edit-mode UI) is noise on paper.
 * Strip all of that and present clean black-on-white content with
 * the URL printed after every link so a paper copy stays verifiable.
 * ============================================================ */
@media print {

    /* Hide everything that isn't the article body. */
    .nav-top,
    .nav-drill,
    header,
    #header-wrapper,
    nav,
    #topnav,
    .navigation-holder,
    #aside-left,
    #aside-right,
    #showcase-row,        /* the hero / slideshow / 12-tile grid */
    .camera_wrap,
    .left_banners,
    .left_contacts,
    .horizontal-banners,
    .hero-row,
    #footer-wrapper,
    .skip-link,
    .vrt-ie-status,
    .vrt-help-trigger,
    .vrt-ie-menu,
    .vrt-ie-backdrop,
    .vrt-toast,
    [data-edit-toolbar],
    .breadcrumb,
    .post-gallery,
    .search-block,
    button,
    .btn { display: none !important; }

    /* Force black-on-white, drop ink-wasting backgrounds. */
    html,
    body,
    #content-row,
    #component,
    .container,
    .moduletable {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
    body { font-size: 12pt; line-height: 1.45; }
    img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }

    /* Headings stay with the next paragraph + don't break mid-section. */
    h1, h2, h3, h4 { page-break-after: avoid; page-break-inside: avoid; color: #000 !important; }
    p, ul, ol, table { page-break-inside: avoid; }

    /* Links: keep them recognisable, show the URL so a paper copy is verifiable. */
    a, a:visited {
        color: #000 !important;
        text-decoration: underline;
    }
    /* Don't dump URLs for anchors / internal nav links / tel: / mailto:. */
    a[href]:not([href^="#"]):not([href^="javascript"])::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #444;
    }
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after { content: ""; }  /* mailto: link text already shows the address */

    /* Header on top of every printed page (page-margin box) — title only. */
    @page {
        size: A4;
        margin: 18mm 16mm 18mm 16mm;
    }
}

/* ============================================================
 * Motion + dark-mode hints
 *
 * Honour prefers-reduced-motion across the whole site: kills the hero
 * slideshow auto-rotate, all transitions, hover animations. Browser-side
 * setting controlled by the OS accessibility prefs.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Stop the camera.js slideshow advancing — it ignores CSS animations so
       we hide its arrows + thumbnails. The first slide stays visible. */
    .camera_wrap .camera_pag,
    .camera_wrap .camera_thumbs_cont { display: none; }
}

/* ── Public form textareas (contact / feedback) ──────────────────────────
   Legacy bootstrap-2 forces input/textarea height to 21px and ignores the
   rows= attribute, collapsing the "Съобщение" box to a single line. Restore
   a proper, resizable multi-line box so visitors can write and see freely. */
.form textarea,
form textarea[name="body"] {
    width: 100% !important;
    min-height: 180px !important;
    height: auto !important;
    line-height: 1.55;
    padding: 10px 12px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
}
/* Article image slideshow (news detail pages) */
.article-slideshow {
    margin: 0 0 16px;
}

.article-slideshow__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #ddd;
}

.article-slideshow__slide {
    display: none;
    margin: 0;
}

.article-slideshow__slide.is-active {
    display: block;
}

.article-slideshow__slide img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #fff;
}

.article-slideshow__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 54px;
    border: 0;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
}

.article-slideshow__control:hover,
.article-slideshow__control:focus {
    background: rgba(0, 0, 0, .64);
}

.article-slideshow__control--prev { left: 8px; }
.article-slideshow__control--next { right: 8px; }

.article-slideshow__count {
    margin-top: 5px;
    text-align: right;
    color: #666;
    font-size: 12px;
}

/* ============================= BREADCRUMBS =============================
 * partials/breadcrumbs.blade.php ships with matching rules in the orphaned
 * assets/css/public.css, but neither layout (layouts.vratsa / layouts.public)
 * actually loads that file — so every breadcrumb site-wide rendered as a
 * raw numbered <ol>. Re-implemented here (the stylesheet both layouts do
 * load) using the site's real palette instead of public.css's undefined
 * --color-* custom properties.
 *
 * The partial's own markup wraps itself in <div class="container"> — but
 * it's always rendered inside @section('content'), i.e. already nested in
 * the narrower Bootstrap 2 "span8" middle column (both layouts use the
 * same span2/span8/span2 three-column grid). Bootstrap 2's global
 * .container is a fixed ~940px centered block, which is the *page* width,
 * not this inner column's — so it must be neutralised here to just fill
 * whatever column the breadcrumb actually sits in, or long titles overflow
 * into the right sidebar. */
.breadcrumbs {
    background: #f4f6f9;
    border-bottom: 1px solid #d1d6dc;
    padding: .5rem 0;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.breadcrumbs .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: #6c7480;
}
.breadcrumbs li span {
    overflow-wrap: break-word;
}
.breadcrumbs li:not(:last-child)::after {
    content: "\203A";
    margin-left: .35rem;
    color: #6c7480;
}
.breadcrumbs a {
    color: #0c5b22;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs li[aria-current="page"] {
    color: #1c1f23;
    font-weight: 600;
}
@media print {
    .breadcrumbs { display: none; }
}