.login-box 
{
    right: 250px;
}

.content-box 
{
    width: auto;
}

.blog-post-padding
{
    padding-left: 100px;
    float: left;
    width: 100%;
}

.blog-posts-list-width
{
    width: 90%;
}

.pictures {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pictures > li {
    border: 3px solid transparent;
    float: left;
    height: calc(100% / 5);
    margin: 0 -1px -1px 0;
    overflow: hidden;
    width: calc(100% / 5);
}

.pictures > li > img {
    cursor: zoom-in;
    width: 100%;
}

.hamburger-navbar-right
{
    display: none;
}
/* The theme (css/header-1.css) hides the full menu below 800px, the phone layout starts
   at 768px: in between the phone's MENU button stands in for it */
@media (min-width: 769px) and (max-width: 799px)
{
    .hamburger-navbar-right { display: inline; }
}

.mobile-controls
{
    float: right; 
    margin-right: 5px;
}

#articles_container
{
    width: 100%; 
    overflow: auto; 
    position: relative; 
    padding-left: 20px; 
    padding-right:20px
}

#articles_html_content
{
    padding-left: 40px; 
    padding-right:40px;
}

/* Same gap under the menu on every page (as on Aktualności): fixed padding instead of the
   first element's top margin, which collapsed through and differed per page (20–40px). */
#articles_html_content
{
    padding-top: 20px;
}

/* One text font for the content of every page: the one the news articles use.
   Fonts pasted into page HTML (Word/Office: Times, Calibri, Arial…) give way to it;
   sizes stay as they are. Headings keep the site's heading font (Dosis). */
#articles_html_content
{
    font-family: helvetica, arial, sans-serif;
}
#articles_html_content [style*="font-family"],
#articles_html_content font[face],
#articles_html_content .galeria
{
    font-family: inherit !important;
}
/* News article bodies: one font even where pasted Word <style> blocks or the "font:"
   shorthand set another (new saves drop font faces: App\Service\ArticleHtml) */
#articles_html_content .blog-post .short-txt :not(h1, h2, h3, h4, h5, h6)
{
    font-family: inherit !important;
}
#articles_html_content :is(h1, h2, h3, h4, h5, h6)[style*="font-family"],
#articles_html_content :is(h1, h2, h3, h4, h5, h6) font[face]
{
    font-family: Dosis, sans-serif !important;
}

/* Page title on every page: the first h1/h2 of the content (static pages keep their own
   HTML) and the calendar title. Aktualności and Galeria have none: the green item in the
   top menu shows where you are (see "Open page in the menu"). */
#articles_html_content > h1:first-child,
#articles_html_content > h2:first-child,
#articles_html_content center > h1:first-of-type,
#articles_html_content .zp-page-title
{
    font-family: Dosis, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: #444 !important;
    text-align: center;
    margin: 0 0 10px;
}

/* More room under the title where the content follows it directly (static pages, gallery,
   calendar); Aktualności and Jadłospis (h1 first child) already have their own spacing. */
#articles_html_content > h2:first-child,
#articles_html_content center > h1:first-of-type,
#articles_html_content .zp-page-title
{
    margin-bottom: 24px;
}

/* Calendar HTML (editor output) starts with an empty <p> and a <br> before its title */
#articles_html_content > p:empty:first-child,
#articles_html_content center > br:first-child
{
    display: none;
}

/* Kontakt page — cards: header, staff, groups (block structure as in the Kontakt editor) */
.kontakt-page
{
    color: #444;
    line-height: 1.6;
}

.kontakt-header
{
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.3fr;
    gap: 8px 28px;
    align-items: start;
    margin-bottom: 26px;
    padding: 20px 24px;
    background: #f5f9f2;
    border: 1px solid #e3ebdd;
    border-left: 4px solid #5a8f3c;
    border-radius: 10px;
}
.kontakt-header p { margin: 0; }

.kontakt-title
{
    display: inline-block;
    margin-bottom: 4px;
    font-family: Dosis, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #3d6b25;
}

.kontakt-kadra
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.kontakt-kadra-card
{
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e6e9e3;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.kontakt-kadra-role
{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5a8f3c;
}

.kontakt-detail
{
    color: #777;
    font-size: 14px;
}

.kontakt-grupy
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.kontakt-grupa
{
    padding-bottom: 4px;
    background: #fff;
    border: 1px solid #e6e9e3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.kontakt-grupa-name
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f5f9f2, #e7f1df);
    border-bottom: 1px solid #e3ebdd;
    font-family: Dosis, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #3d6b25;
    text-align: left;
}
/* tree matching the group name (data-tree set by inc/kontakt.js) */
.kontakt-grupa-name::before
{
    content: "";
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff no-repeat center / 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='13' width='2' height='9' rx='.8' fill='%238d5a3b'/%3E%3Ccircle cx='12' cy='9' r='6.5' fill='%237cad38'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.kontakt-grupa[data-tree="brzoza"] .kontakt-grupa-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='8.5' rx='6.5' ry='6' fill='%239ccc65'/%3E%3Cellipse cx='9' cy='10' rx='3.2' ry='3' fill='%238bc34a'/%3E%3Crect x='10.8' y='10' width='2.4' height='12' rx='1' fill='%23f4f4f0' stroke='%23555' stroke-width='.6'/%3E%3Cpath d='M11 13h1.4M11.8 15.5h1.2M11 18h1.6M12 20h1' stroke='%23333' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kontakt-grupa[data-tree="sosna"] .kontakt-grupa-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='9' width='2' height='13' rx='.8' fill='%238d5a3b'/%3E%3Cpath d='M13 13l3-2' stroke='%238d5a3b' stroke-width='1.2' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='6.5' rx='8' ry='3.6' fill='%234f8a3a'/%3E%3Cellipse cx='16.5' cy='10.5' rx='3.4' ry='1.8' fill='%235d9a45'/%3E%3Cellipse cx='10' cy='5' rx='4' ry='2' fill='%2368a84e'/%3E%3C/svg%3E"); }
.kontakt-grupa[data-tree="swierk"] .kontakt-grupa-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='18' width='2' height='4' fill='%238d5a3b'/%3E%3Cpath d='M12 2l4 5h-2l4.5 5h-2.5l5 6H3l5-6H5.5L10 7H8z' fill='%232e6b34'/%3E%3C/svg%3E"); }
.kontakt-grupa[data-tree="dab"] .kontakt-grupa-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 22v-6.5l-2-2M13.5 22v-6.5l2-2' stroke='%237a4b2f' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='7' cy='10' r='4' fill='%236a9a2f'/%3E%3Ccircle cx='17' cy='10' r='4' fill='%236a9a2f'/%3E%3Ccircle cx='12' cy='7' r='5' fill='%237cad38'/%3E%3Ccircle cx='9.5' cy='12.5' r='3.2' fill='%237cad38'/%3E%3Ccircle cx='14.5' cy='12.5' r='3.2' fill='%236a9a2f'/%3E%3C/svg%3E"); }
.kontakt-grupa[data-tree="jodla"] .kontakt-grupa-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11.1' y='18.5' width='1.8' height='3.5' fill='%237a4b2f'/%3E%3Cpath d='M12 1.5l3 4.5h-1.6l3.6 5h-2l4 7.5H5l4-7.5H7l3.6-5H9z' fill='%233d7f6e'/%3E%3Cpath d='M12 4v14' stroke='%232f6a5b' stroke-width='.6'/%3E%3C/svg%3E"); }

.kontakt-grupa-section
{
    margin: 0 16px 12px;
}
.kontakt-grupa-section > strong
{
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
}

.kontakt-indent
{
    margin-left: 0;
}

/* phone numbers (tel:/sms: links added by inc/telefony.js): tap to call on a phone,
   plain text on a computer with a mouse; the icon (handset / speech bubble) shows on both */
.zp-tel
{
    color: #3d6b25;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(90, 143, 60, .4);
    text-underline-offset: 3px;
    white-space: nowrap;
}
.zp-tel-ico
{
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-right: .35em;
    vertical-align: -.3em;
}
.zp-tel-ico svg
{
    display: block;
    width: 100%;
    height: 100%;
}
.zp-tel-ico circle { fill: #5a8f3c; }
.zp-tel-ico path { fill: #fff; }
@media (hover: hover) and (pointer: fine)
{
    .zp-tel
    {
        color: inherit;
        font-weight: inherit;
        text-decoration: none;
        pointer-events: none;
        cursor: text;
    }
}

/* The menu bar stays at the top of the window while scrolling, on every width.
   On a computer only the bar with the menu stays; the top bar (group name, logout) scrolls
   away: the header box is dissolved (display: contents) so #main-nav can stick to the
   window, whatever the top bar's height. scroll-padding keeps jump targets (article links,
   the gallery pager's scrollIntoView) out from under it. */
@media (min-width: 769px)
{
    header { display: contents; }
    #main-nav { position: sticky; top: 0; }
    html { scroll-padding-top: 80px; }
}
@media (max-width: 768px)
{
    html { scroll-padding-top: 70px; }
    header
    {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #fff;
    }

    .txt-2col .col-1 .img-responsive
    {
        max-width: 67%;
        margin: 0 auto;
    }

    .login-box
    {
        right: auto;
    }

    .content-box
    {
        width: 100%;
    }

    .blog-v2
    {
        width: 100%;
    }

    .blog-posts-list-width
    {
        width: 100%;
    }

    .blog-post-padding
    {
        padding-left: 7px;
        padding-right: 7px;
        float: left;
        width: 100%;
    }

    .pictures > li
    {
        border: 3px solid transparent;
        float: left;
        height: calc(100% / 3);
        margin: 0 -1px -1px 0;
        overflow: hidden;
        width: calc(100% / 3);
    }

    .hamburger-navbar-right
    {
        display: inline;
    }

    .mobile-controls
    {
        float: right;
        margin-right: 5px;
    }

    #articles_container
    {
        width: 100%;
        overflow-x: hidden;
        position: relative;
        padding-left: 0px;
        padding-right: 0px
    }

    #articles_html_content
    {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        box-sizing: border-box;
    }

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

    #articles_html_content table
    {
        max-width: 100%;
        word-break: break-word;
    }

    #articles_html_content iframe
    {
        max-width: 100%;
    }

    .zp-mobile-card
    {
        margin-bottom: 14px;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fafafa;
    }

    .zp-mobile-card:first-child
    {
        margin-top: 4px;
    }

    .kontakt-header
    {
        grid-template-columns: 1fr;
        padding: 16px 18px;
    }

    .kontakt-kadra,
    .kontakt-grupy
    {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 480px)
{
    .login-box
    {
        right: auto;
    }

    .content-box
    {
        width: 100%;
    }

    .blog-v2
    {
        width: 100%;
    }

    .blog-posts-list-width
    {
        width: 100%;
    }

    .blog-post-padding
    {
        padding-left: 5px;
        padding-right: 5px;
        float: left;
        width: 100%;
    }

    .pictures > li
    {
        border: 3px solid transparent;
        float: left;
        height: calc(100% / 3);
        margin: 0 -1px -1px 0;
        overflow: hidden;
        width: calc(100% / 3);
    }

    .hamburger-navbar-right
    {
        display: inline;
    }

    .mobile-controls
    {
        float: right;
        margin-right: 5px;
    }

    #articles_container
    {
        width: 100%;
        overflow-x: hidden;
        position: relative;
        padding-left: 0px;
        padding-right: 0px
    }

    #articles_html_content
    {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        box-sizing: border-box;
    }

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

    #articles_html_content table
    {
        max-width: 100%;
        word-break: break-word;
    }

    #articles_html_content iframe
    {
        max-width: 100%;
    }
}

.zp-spinner-wrap
{
    text-align: center;
    padding: 60px 0;
}

.zp-spinner
{
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #e0e0e0;
    border-top-color: #009014;
    border-radius: 50%;
    animation: zpSpin 0.7s linear infinite;
}

@keyframes zpSpin
{
    to { transform: rotate(360deg); }
}

/* ── Jadłospis (page 3): day cards as on Kontakt, week title as on Kalendarz ──────────
   HTML written by the Jadłospis editor (templates/admin/editor.php, which also uses
   these classes for its own day cards); inc/func.js adds the "Dzisiaj" card, the allergen
   pills (.jad-alg) and the allergen panel (.jad-info) on the page only. */
.jad-week { margin-bottom: 34px; }
.jad-week-title
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 16px;
    font-family: Dosis, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #3d6b25;
    text-align: center;
    text-transform: lowercase; /* the editor writes "12 - 16 PAŹDZIERNIKA" */
}
.jad-week-title::before
{
    content: "";
    flex: 0 0 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.jad-week-title:empty { display: none; }
.jad-days
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 1160px;
    margin: 0 auto;
    text-align: left;
}
.jad-day-card
{
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    background: #fff;
    border: 1px solid #e6e9e3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.jad-day-header
{
    display: flex;
    flex-wrap: wrap; /* narrow cards: date under the day name */
    justify-content: space-between;
    align-items: baseline;
    gap: 0 8px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #f5f9f2, #e7f1df); /* today: solid green (.jad-today-hdr) */
    border-bottom: 1px solid #e3ebdd;
    color: #3d6b25;
}
.jad-day-name
{
    font-family: Dosis, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    display: inline-block;
    text-transform: lowercase; /* "PONIEDZIAŁEK" → "Poniedziałek" */
}
.jad-day-name::first-letter { text-transform: uppercase; }
.jad-day-date
{
    font-size: 13px;
    font-weight: 600;
    text-transform: lowercase;
    color: #6f8f5c;
    white-space: nowrap;
}
.jad-meal
{
    padding: 9px 14px 8px;
}
.jad-meal + .jad-meal { border-top: 1px solid #f0f2ee; }
.jad-meal-name
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5a8f3c;
}
/* meal icons; the editor always writes the four meals in this order */
.jad-meal-name::before
{
    content: "";
    flex: 0 0 15px;
    height: 15px;
    background: no-repeat center / contain;
}
.jad-meal:nth-child(2) .jad-meal-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 17a7 7 0 0 1 14 0M2 21h20M12 3v3M4.2 8.2l2 2M19.8 8.2l-2 2'/%3E%3C/svg%3E"); }
.jad-meal:nth-child(3) .jad-meal-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.6-6-1.4-7 2.2-1 3.8 1.6 11 5 11 .9 0 1.3-.4 2-.4s1.1.4 2 .4c3.4 0 6-7.2 5-11C18 5.6 14 5.4 12 7z'/%3E%3Cpath d='M12 7c0-2 1-3.4 3-4'/%3E%3C/svg%3E"); }
.jad-meal:nth-child(4) .jad-meal-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0zM8 7c0-1.5 1-1.5 1-3M12 7c0-1.5 1-1.5 1-3M16 7c0-1.5 1-1.5 1-3'/%3E%3C/svg%3E"); }
.jad-meal:nth-child(5) .jad-meal-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M3 22h14M8 3v3M12 3v3'/%3E%3C/svg%3E"); }
.jad-meal-text
{
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}
/* allergen numbers ("*1,7" at the end of a dish, inc/func.js) */
.jad-alg
{
    display: inline-block;
    margin-left: 2px;
    padding: 0 7px;
    border-radius: 9px;
    background: #f1f3ef;
    color: #777;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    vertical-align: 1px;
    cursor: help;
}

/* "Dzisiaj": today's card above the weeks, wider, with a green header */
.jad-today-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 34px;
}
.jad-today-wrap .jad-week-title { text-transform: none; }
.jad-today-wrap .jad-week-title::before
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.jad-today-wrap .jad-day-card
{
    width: 100%;
    max-width: 560px;
    text-align: left;
    border-color: #cfe0c4;
    box-shadow: 0 4px 16px rgba(61, 107, 37, .12);
}
.jad-today-hdr
{
    background: #5a8f3c !important;
    border-bottom-color: #5a8f3c !important;
}
.jad-today-hdr,
.jad-today-hdr .jad-day-date { color: #fff !important; }
.jad-today-wrap .jad-meal-text { font-size: 15px; }

/* Allergen list and legal note under the menu (inc/func.js wraps them in .jad-info) */
.jad-info
{
    max-width: 1160px;
    margin: 10px auto 0;
    padding: 18px 24px 16px;
    background: #f5f9f2;
    border: 1px solid #e3ebdd;
    border-left: 4px solid #5a8f3c;
    border-radius: 10px;
    text-align: left;
}
#articles_html_content .jad-info p
{
    margin: 0;
    font-size: 13px !important;
    line-height: 1.5;
    color: #555;
}
#articles_html_content .jad-info .jad-info-title
{
    margin-bottom: 2px;
    font-family: Dosis, sans-serif;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.2;
    color: #3d6b25;
}
#articles_html_content .jad-info .jad-info-sub
{
    margin-bottom: 10px;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
}
.jad-info-list
{
    columns: 2;
    column-gap: 36px;
}
#articles_html_content .jad-info-list p
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
    break-inside: avoid;
}
/* allergen number as a badge, the text with a hanging indent (inc/func.js splits them) */
.jad-info-num
{
    flex: 0 0 22px;
    height: 22px;
    margin-top: -1px;
    border: 1px solid #cfe0c4;
    border-radius: 50%;
    background: #fff;
    color: #3d6b25;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
#articles_html_content .jad-info .jad-info-note
{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e3ebdd;
    font-size: 12px !important;
    color: #888;
}

@media (max-width: 600px)
{
    .jad-days { grid-template-columns: 1fr; gap: 14px; }
    .jad-week { margin-bottom: 28px; }
    .jad-week-title { font-size: 20px; margin-bottom: 12px; }
    /* allergen panel: numbered rows with a badge and a hanging indent */
    .jad-info { margin-top: 4px; padding: 16px 14px 12px; border-left-width: 1px; border-top: 4px solid #5a8f3c; }
    #articles_html_content .jad-info .jad-info-title { font-size: 21px !important; }
    #articles_html_content .jad-info .jad-info-sub { margin-bottom: 6px; }
    .jad-info-list { columns: 1; }
    #articles_html_content .jad-info-list p
    {
        padding: 6px 0;
        border-top: 1px solid #e3ebdd;
        font-size: 14px !important;
        line-height: 1.45;
        color: #444;
    }
    #articles_html_content .jad-info-list p:first-child { border-top: none; }
    .jad-info-num { flex-basis: 24px; height: 24px; font-size: 12px; line-height: 22px; }
    #articles_html_content .jad-info .jad-info-note { margin-top: 6px; font-size: 12px !important; line-height: 1.5; }
}

/* Login on phones: taller fields with rounded corners; 16px stops iOS zooming into the field */
@media (max-width: 767.98px) {
    .login-box input[name="user"],
    .login-box input[name="pass"] {
        height: 46px;
        padding: 0 14px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
    }
}

/* ── Kalendarz (.ZP-table, written by the calendar editor) — desktop look ──────────
   Phones: the same card, each event as one row with the date above it (below). */
@media (min-width: 769px)
{
    #articles_html_content .ZP-table
    {
        grid-template-columns: minmax(230px, 32%) 1fr;
        max-width: 1000px;
        margin: 0 auto 30px;
        border: 1px solid #e3e8df;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }
    #articles_html_content .ZP-table-cell
    {
        display: flex;
        align-items: center;
        padding: 13px 20px;
        border: none;
        border-bottom: 1px solid #eef1ec;
        line-height: 1.5;
        transition: background-color .15s;
    }
    /* date */
    #articles_html_content .ZP-table-cell:first-child
    {
        background: #f5f9f2;
        border-left: 4px solid #5a8f3c;
        border-right: 1px solid #e3ebdd;
        color: #3d6b25;
        font-size: 15px;
        gap: 10px;
    }
    #articles_html_content .ZP-table-cell:first-child::before
    {
        content: "";
        flex: 0 0 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    /* description */
    #articles_html_content .ZP-table-cell + .ZP-table-cell
    {
        color: #444;
    }
    #articles_html_content .ZP-table-row:nth-child(even) > .ZP-table-cell + .ZP-table-cell
    {
        background: #fbfcfa;
    }
    #articles_html_content .ZP-table-row:nth-child(even) > .ZP-table-cell:first-child
    {
        background: #eef5e9;
    }
    #articles_html_content .ZP-table-row:hover > .ZP-table-cell
    {
        background: #e8f3e1;
    }
    #articles_html_content .ZP-table-row:last-child > .ZP-table-cell
    {
        border-bottom: none;
    }
    /* subtitle under the calendar title ("Terminy mogą ulec…") */
    #articles_html_content center:has(> .ZP-table, > h1 + br, > h1)
    {
        color: #777;
        font-size: 15px;
    }
}

/* Kalendarz on phones: one rounded card, each event a row: green date with the
   calendar icon, description under it, a green accent on the left as on desktop */
@media (max-width: 768px)
{
    #articles_html_content .ZP-table
    {
        margin: 0 0 24px;
        border: 1px solid #e3e8df;
        border-left: 4px solid #5a8f3c;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }
    #articles_html_content .ZP-table-row
    {
        gap: 3px;
        margin: 0;
        padding: 11px 14px 12px;
        border-bottom: 1px solid #eef1ec;
    }
    #articles_html_content .ZP-table-row:nth-child(even) { background: #f8fbf6; }
    #articles_html_content .ZP-table-row:last-child { border-bottom: none; }
    #articles_html_content .ZP-table-cell
    {
        padding: 0;
        border: none;
        line-height: 1.45;
        text-align: left;
    }
    /* date */
    #articles_html_content .ZP-table-cell:first-child
    {
        align-items: center;
        gap: 8px;
        color: #3d6b25;
        font-size: 14px;
    }
    #articles_html_content .ZP-table-cell:first-child::before
    {
        content: "";
        flex: 0 0 15px;
        height: 15px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    /* description, aligned with the date text (icon 15px + gap 8px) */
    #articles_html_content .ZP-table-cell + .ZP-table-cell
    {
        display: block;
        padding-left: 23px;
        color: #444;
        font-size: 15px;
    }
    /* title and subtitle */
    #articles_html_content center > h1:first-of-type
    {
        font-size: 28px;
        margin-bottom: 14px;
    }
    #articles_html_content center:has(> .ZP-table, > h1 + br, > h1)
    {
        color: #777;
        font-size: 14px;
    }
}

/* Kalendarz: every event with a day opens "Dodaj do kalendarza" (inc/kalendarz.js);
   a calendar-with-plus icon at the end of the row, faint until hovered on a computer */
#articles_html_content .zp-cal-row { cursor: pointer; }
#articles_html_content .zp-cal-row > .ZP-table-cell + .ZP-table-cell::after
{
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-left: auto;
    padding-left: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M12 13v6M9 16h6'/%3E%3C/svg%3E") no-repeat center / contain;
    background-origin: content-box;
    opacity: .45;
    transition: opacity .15s;
}
#articles_html_content .zp-cal-row:hover > .ZP-table-cell + .ZP-table-cell::after { opacity: 1; }
#articles_html_content .zp-cal-row > .ZP-table-cell:focus-visible { outline: 2px solid #5a8f3c; outline-offset: -2px; }
@media (max-width: 768px)
{
    #articles_html_content .zp-cal-row
    {
        position: relative;
        padding-right: 46px;
    }
    #articles_html_content .zp-cal-row > .ZP-table-cell + .ZP-table-cell::after
    {
        position: absolute;
        top: 50%;
        right: 14px;
        width: 20px;
        height: 20px;
        margin: -10px 0 0;
        padding: 0;
        opacity: .8;
    }
    #articles_html_content .zp-cal-row:active { background: #e8f3e1; }
}
.zp-modal .zp-cal-what { font-weight: 600; }
.zp-modal .zp-cal-when { margin-top: 4px; color: #3d6b25; }

/* Statut (4) and Regulamin (5) are page scans: centre them */
#articles_html_content[data-content="4"] img,
#articles_html_content[data-content="5"] img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ── Gallery folders as cards (templates/gallery/folders_modern.php) ──────────
   Old look: GALLERY_FOLDERS=classic in .env (templates/gallery/folders_classic.php). */
.zp-folders
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px;
    max-width: 1160px;
    margin: 0 auto 10px;
    text-align: left;
}
.zp-folder
{
    position: relative;
    background: #fff;
    border: 1px solid #e6e9e3;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.zp-folder:hover,
.zp-folder:focus-visible
{
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    outline: none;
}
.zp-folder-cover
{
    position: relative;
    aspect-ratio: 16 / 10;
    background: #eef3ea;
    overflow: hidden;
}
.zp-folder-cover img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.zp-folder:hover .zp-folder-cover img { transform: scale(1.04); }
.zp-folder-empty
{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f1f6ed, #e2ecda) no-repeat;
}
.zp-folder-empty::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390b07a' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center / 54px;
}
/* folder tab on the cover, so it still reads as a folder */
.zp-folder-cover::before
{
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a8f3c'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center / 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
/* bottom-left badge: stack of photos (a gallery, not a single picture) */
.zp-folder-cover::after
{
    content: "";
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff' stroke='%23333' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='10' height='13' rx='1.5' transform='rotate%28-24 12 21%29'/%3E%3Crect x='7' y='5' width='10' height='13' rx='1.5' transform='rotate%2824 12 21%29'/%3E%3Crect x='7.5' y='4' width='9' height='13' rx='1.5'/%3E%3C/g%3E%3Cpath d='M9 14.6l2.2-2.8 1.6 1.9 1.1-1.3 1.6 2.2z' fill='%235a8f3c'/%3E%3Ccircle cx='14.1' cy='7.3' r='1.1' fill='%23f0b429'/%3E%3C/svg%3E") no-repeat center / 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    pointer-events: none;
}
.zp-folder-btn
{
    position: absolute;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    transition: transform .15s ease, background-color .15s ease;
}
.zp-folder-btn:hover { transform: scale(1.1); }
.zp-folder-dl
{
    right: 10px;
    bottom: 10px;
    background: rgba(255, 255, 255, .95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") no-repeat center / 17px;
}
.zp-folder-dl:hover { background-color: #fff; }
.zp-folder-del
{
    right: 10px;
    top: 10px;
    background: rgba(203, 36, 49, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") no-repeat center / 16px;
}
.zp-folder-del:hover { background-color: #cb2431; }
.zp-folder-name
{
    padding: 10px 14px 12px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-sizing: border-box;
}
@media (max-width: 600px)
{
    .zp-folders { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .zp-folder-name { font-size: 13px; padding: 8px 10px 10px; }
    .zp-folder-btn,
    .zp-folder-cover::after { width: 28px; height: 28px; }
    .zp-folder-cover::after { background-size: 20px; }
}

/* Photos inside a gallery folder: same rounded cards as the folders, no caption.
   Delete button (editors only) reuses .zp-folder-btn.zp-folder-del, top right. */
#galley ul.pictures { gap: 12px; max-width: 1160px; }
#galley .pictures li
{
    border: 1px solid #e6e9e3;
    border-radius: 12px;
    background: #eef3ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
#galley .pictures li:hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
#galley .pictures li img[data-item-type] { transition: transform .35s ease; }
#galley .pictures li:hover img[data-item-type] { transform: scale(1.04); }
@media (max-width: 540px)
{
    #galley ul.pictures { gap: 8px; }
    #galley ul.pictures li { flex-basis: calc(50% - 4px); border-radius: 10px; }
    #galley .pictures li .zp-folder-btn { width: 28px; height: 28px; }
}

/* ── Static text pages (Tabela opłat, Poradnik, Psycholog, Logopeda, Pozostałe zajęcia,
   Programy, Informacje żywieniowe, Procedury): readable column, real headings, tidy lists/tables ── */
#articles_html_content.zp-static-page
{
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}
.zp-static-page p { margin: 0 0 .85em; }
.zp-static-page h3
{
    font-family: Dosis, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #3d6b25;
    margin: 1.7em 0 .6em;
    padding-bottom: .3em;
    border-bottom: 2px solid #e3ebdd;
}
.zp-static-page h4
{
    /* css/zp_h4.css turns every h4 into a centred orange separator (with !important) */
    font-family: Dosis, sans-serif;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    letter-spacing: normal;
    text-align: left;
    color: #333;
    margin: 1.4em 0 .4em;
    padding: 0;
    border: none;
}
.zp-static-page h3 + h4 { margin-top: .6em; }
.zp-static-page ul,
.zp-static-page ol { margin: 0 0 1em; padding-left: 1.5em; }
.zp-static-page li { margin: .3em 0; padding-left: .2em; }
.zp-static-page li::marker { color: #5a8f3c; }
.zp-static-page li > p { margin: 0; }
.zp-static-page a { color: #3d7d2a; text-decoration: underline; text-underline-offset: 2px; }
.zp-static-page a:hover { color: #2c5c1e; }
.zp-static-page hr { border: 0; border-top: 1px solid #e5e5e5; margin: 1.8em 0; }
.zp-static-page img { max-width: 100%; height: auto; border-radius: 6px; }
.zp-static-page .zp-red { color: #cb2431; }
.zp-static-page table
{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e3e8df;
    border-radius: 10px;
    overflow: hidden;
    margin: 1em 0 1.6em;
    font-size: 14px;
    line-height: 1.5;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.zp-static-page td,
.zp-static-page th { padding: 10px 12px; border: none; border-bottom: 1px solid #eef1ec; vertical-align: top; text-align: left; }
.zp-static-page tr:last-child > td { border-bottom: none; }
.zp-static-page tr:first-child > td,
.zp-static-page th { background: #f5f9f2; color: #3d6b25; font-weight: 700; }
.zp-static-page tr:nth-child(even) > td { background: #fbfcfa; }
.zp-static-page td p { margin: 0 0 .4em; }
.zp-static-page td p:last-child { margin-bottom: 0; }
.zp-static-page td ul { margin: 0; padding-left: 1.1em; }
/* Tabela opłat (page 6): price list, check-mark list, footnotes in a box */
.zp-static-page table.zp-fees { font-size: 15px; }
.zp-static-page table.zp-fees td
{
    padding: 14px 18px;
    vertical-align: middle;
    background: #fff;
    color: #444;
    font-weight: 400;
}
.zp-static-page table.zp-fees td:last-child
{
    text-align: right;
    white-space: nowrap;
    font-family: Dosis, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #3d6b25;
}
.zp-static-page table.zp-fees tr:first-child > td { background: #f5f9f2; }
.zp-static-page ul.zp-fees-list { list-style: none; padding-left: 0; }
.zp-static-page ul.zp-fees-list li
{
    position: relative;
    margin: .5em 0;
    padding-left: 32px;
}
.zp-static-page ul.zp-fees-list li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: .25em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eaf3e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px;
}
.zp-static-page .zp-fees-notes
{
    margin: 1.8em 0 1em;
    padding: 14px 18px;
    border-left: 4px solid #a8c98f;
    border-radius: 0 10px 10px 0;
    background: #f7faf5;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}
.zp-static-page .zp-fees-notes p { margin: 0; }
.zp-static-page .zp-fees-notes p + p { margin-top: .7em; }
/* Pozostałe zajęcia: phone numbers stay on one line */
#articles_html_content[data-content="11"] td:last-child { white-space: nowrap; }
@media (max-width: 768px)
{
    #articles_html_content.zp-static-page { font-size: 15px; }
    .zp-static-page h3 { font-size: 21px; }
    .zp-static-page h4 { font-size: 17px !important; }
    /* wide tables scroll sideways instead of squashing */
    .zp-static-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .zp-static-page td,
    .zp-static-page th { min-width: 130px; }
    /* the price list fits the screen: no sideways scroll */
    .zp-static-page table.zp-fees { display: table; }
    .zp-static-page table.zp-fees td { min-width: 0; padding: 12px 14px; }
    .zp-static-page table.zp-fees td:last-child { font-size: 19px; }
}

/* Aktualności: article titles in the green heading style of the static pages (trial) */
#articles_html_content .blog-post h2
{
    font-family: Dosis, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #3d6b25;
    margin: .2em 0 .6em;
    padding-bottom: .3em;
    border-bottom: 2px solid #e3ebdd;
}
/* the theme draws its own short underline under post titles */
#articles_html_content .blog-post h2::before,
#articles_html_content .blog-post h2::after { display: none; }
@media (max-width: 768px)
{
    #articles_html_content .blog-post h2 { font-size: 21px; }
}
/* Article text on a computer: a little larger than the theme's 14px (its
   "section.blog-v2.basic p" rule sets paragraphs directly); sizes set in the article itself stay */
@media (min-width: 769px)
{
    #articles_html_content .blog-post .short-txt,
    #articles_html_content .blog-post .short-txt p { font-size: 15px; line-height: 1.55; }
}

/* Empty paragraphs in articles (<p><br></p>, marked .zp-empty-line by ArticleSpacing::markEmptyLines()):
   the editor shows paragraphs without margins, so authors add an empty line between them. Here
   paragraphs have their own 25px gap (about one line), so one empty line adds nothing more and
   each further one in a row adds one line: the page looks like the editor. */
#articles_html_content .blog-post .short-txt .zp-empty-line
{
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
#articles_html_content .blog-post .short-txt .zp-empty-line + .zp-empty-line { height: 22px; }

/* The same gap under every article: the body ends with its own 25px (the theme's paragraph
   margin), whatever margin the last paragraph has (pasted text often brings margin-bottom: 0cm) */
#articles_html_content .blog-post .zp-article-body { padding-bottom: 25px; }
#articles_html_content .blog-post .zp-article-body > :last-child,
#articles_html_content .blog-post .zp-article-body > :last-child > :last-child { margin-bottom: 0 !important; }

/* Article attachments (templates/partials/news_item.php) */
.zp-attachments
{
    margin: 18px 0 6px;
    padding: 12px 14px;
    background: #f7faf5;
    border: 1px solid #e3ebdd;
    border-radius: 10px;
}
.zp-attachments-label
{
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5a8f3c;
}
.zp-attachment
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 8px 8px 0;
    padding: 6px 12px 6px 6px;
    background: #fff;
    border: 1px solid #dde6d6;
    border-radius: 8px;
    color: #333 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.zp-attachment:hover
{
    border-color: #5a8f3c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.zp-attachment-ext
{
    flex: 0 0 auto;
    min-width: 38px;
    padding: 3px 6px;
    border-radius: 5px;
    background: #5a8f3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.zp-attachment-name
{
    overflow-wrap: anywhere;
    font-size: 14px;
}

/* ── Gallery photo viewer (#zp-lightbox, inc/gallery_lightbox.js) ───────────── */
html.zp-lb-open,
html.zp-lb-open body { overflow: hidden; }
.zp-lb
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: #0e100e;
    color: #fff;
    font-family: helvetica, arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}
.zp-lb[hidden] { display: none; }
.zp-lb-bar
{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    position: relative;
    z-index: 3;
}
.zp-lb-counter
{
    font-size: 14px;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .08);
    padding: 5px 12px;
    border-radius: 14px;
}
.zp-lb-actions { display: flex; gap: 10px; }
.zp-lb-btn,
.zp-lb-nav
{
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .12);
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.zp-lb-btn { width: 40px; height: 40px; background-size: 20px; }
.zp-lb-btn:hover,
.zp-lb-nav:hover { background-color: rgba(255, 255, 255, .25); }
.zp-lb-download { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
a.zp-lb-btn { display: inline-block; }
a.zp-lb-btn[hidden] { display: none; }
.zp-lb-folder { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.zp-lb-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.zp-lb-stage
{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
}
.zp-lb-track
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 84px 24px;
    box-sizing: border-box;
}
#zp-lb-img,
#zp-lb-video
{
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    transform-origin: center center;
    will-change: transform;
}
#zp-lb-img { cursor: pointer; -webkit-user-drag: none; }
#zp-lb-img[hidden],
#zp-lb-video[hidden] { display: none; }
.zp-lb-zoomed #zp-lb-img { border-radius: 0; box-shadow: none; }
.zp-lb-nav
{
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 54px;
    height: 54px;
    margin-top: -39px;
    background-size: 26px;
    opacity: .7;
}
.zp-lb-prev { left: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.zp-lb-next { right: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.zp-lb-nav:hover,
.zp-lb[data-side="prev"] .zp-lb-prev,
.zp-lb[data-side="next"] .zp-lb-next { opacity: 1; background-color: rgba(255, 255, 255, .25); transform: scale(1.08); }
.zp-lb-nav:disabled { opacity: 0 !important; pointer-events: none; }
.zp-lb-spinner
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    margin: -31px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #8bc34a;
    border-radius: 50%;
    animation: zp-lb-spin .8s linear infinite;
    pointer-events: none;
}
.zp-lb-spinner[hidden] { display: none; }
@keyframes zp-lb-spin { to { transform: rotate(360deg); } }
/* phones and tablets: swipe instead of arrows, photo uses the full width */
@media (hover: none), (max-width: 600px)
{
    .zp-lb-nav { display: none; }
    .zp-lb-track { padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
    #zp-lb-img,
    #zp-lb-video { border-radius: 0; box-shadow: none; }
    .zp-lb-bar { padding-left: 12px; padding-right: 12px; }
}

/* ── Gallery entry on the news page (templates/partials/gallery_news_item.php) ── */
.zp-gn { margin: 4px 0 6px; }
.zp-gn-stage
{
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: 640px;
    background: #f1f5ee;
    border: 1px solid #e6e9e3;
    border-radius: 12px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.zp-gn-main
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity .2s ease;
}
.zp-gn-main.is-loading { opacity: .55; }
.zp-gn-nav,
.zp-gn-full
{
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .92);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
    transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}
.zp-gn-nav
{
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background-size: 22px;
    opacity: .85;
}
.zp-gn-nav:hover,
.zp-gn-full:hover { opacity: 1; background-color: #fff; transform: scale(1.08); }
.zp-gn-nav:disabled { opacity: 0; pointer-events: none; }
.zp-gn-prev { left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.zp-gn-next { right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.zp-gn-full
{
    right: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    background-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
}
.zp-gn-counter
{
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 4px 11px;
    border-radius: 13px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font: 600 12px/1.4 helvetica, arial, sans-serif;
    letter-spacing: .03em;
    pointer-events: none;
}
.zp-gn-strip
{
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.zp-gn-thumb
{
    flex: 0 0 auto;
    width: 96px;
    height: 71px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: .65;
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: opacity .15s ease, outline-color .15s ease;
}
.zp-gn-thumb:hover { opacity: 1; }
.zp-gn-thumb.is-active { opacity: 1; outline-color: #5a8f3c; cursor: zoom-in; }
.zp-gn-mobile { display: none; }
.zp-gn-mobile .zp-folder { display: block; text-decoration: none; }
.zp-gn-count { padding: 10px 14px 12px; color: #5a8f3c; font-size: 13px; font-weight: 600; }
@media (max-width: 600px)
{
    .zp-gn { display: none; }
    .zp-gn-mobile { display: block; margin: 4px 0 6px; }
}

/* Inside a gallery folder: the folder name opens the content (no page title above it) */
#gallery_div #gallery_opts + h3 { margin-top: 0; }
/* Aktualności have no page title either: the first post starts where other pages' titles do */
#articles_html_content[data-content="0"] > section.blog-v2:first-of-type { padding-top: 0; }

/* "Pobierz wszystkie" under the photos of a folder */
/* "Zmień kolejność" (editors, inc/gallery_order.js): the photos are dragged into place */
.zp-order-bar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    max-width: 1160px;
    margin: 0 auto 16px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 12px;
}
.zp-order-bar.zp-order-on
{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    background: #f3f9ef;
    border: 1px solid #cfdcc5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.zp-order-hint { color: #555; font-size: 14px; }
.zp-order-actions { display: inline-flex; gap: 10px; }
.zp-order-bar [hidden] { display: none; }
.zp-order-bar button
{
    height: 36px;
    padding: 0 18px;
    border-radius: 18px;
    font: 600 14px helvetica, arial, sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}
.zp-order-start,
.zp-order-cancel { border: 1px solid #cfdcc5; background: #fff; color: #3d6b25; }
.zp-order-start:hover,
.zp-order-cancel:hover { background: #eef6e8; }
.zp-order-start::before { content: "\21C5"; margin-right: 8px; }
.zp-order-save { border: none; background: #5a8f3c; color: #fff; box-shadow: 0 2px 8px rgba(90, 143, 60, .3); }
.zp-order-save:hover { background: #4b7a31; }
.zp-order-save:disabled { opacity: .6; cursor: wait; }
#galley ul.pictures.zp-ordering li { cursor: grab; touch-action: manipulation; }
#galley ul.pictures.zp-ordering li img[data-item-type] { cursor: grab !important; }
#galley ul.pictures.zp-ordering li:hover,
#galley ul.pictures.zp-ordering li:hover img[data-item-type] { transform: none; }
#galley ul.pictures.zp-ordering .zp-folder-btn { display: none; }
#galley ul.pictures li.zp-order-ghost { opacity: .35; outline: 3px dashed #5a8f3c; outline-offset: -3px; }
#galley ul.pictures li.zp-order-chosen { box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }

.zp-download-all-wrap { text-align: center; margin: 26px 0 14px; }
#galley a.zp-download-all,
#galley a.zp-download-all:visited
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 20px;
    border-radius: 24px;
    background: #5a8f3c;
    color: #fff;
    font: 600 15px/1.2 helvetica, arial, sans-serif;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(90, 143, 60, .35);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.zp-download-all::before
{
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") no-repeat center / contain;
}
#galley a.zp-download-all:hover,
#galley a.zp-download-all:focus
{
    background: #4b7a31;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(90, 143, 60, .45);
}
.zp-download-all-count
{
    padding: 2px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
}

/* Round icon buttons (App\View\Icons): news actions in the date line, top bar, mobile header.
   :is() with #top-bar gives every context the same, high specificity: the theme's
   "section.blog-v2.basic .blog-post h2 a" and "#top-bar a" rules must not reach them. */
:is(section.blog-v2 .blog-post, #top-bar, .hamburger-navbar-right) .zp-act,
:is(section.blog-v2 .blog-post, #top-bar, .hamburger-navbar-right) .zp-act:visited
{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #e3e7df;
    border-radius: 50%;
    background: #fff;
    color: #5f6672;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.zp-act svg { display: block; }
:is(section.blog-v2 .blog-post, #top-bar, .hamburger-navbar-right) .zp-act:is(:hover, :focus-visible)
{
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
    background: #5a8f3c;
    border-color: #5a8f3c;
    color: #fff;
}
:is(section.blog-v2 .blog-post, #top-bar, .hamburger-navbar-right) .zp-act-del:is(:hover, :focus-visible) { background: #cb2431; border-color: #cb2431; }
/* top bar and mobile header: light grey until hovered (then green, as everywhere), a bit smaller in the top bar */
:is(#top-bar, .hamburger-navbar-right) .zp-act:not(:hover):not(:focus-visible) { background: #f1f3ef; border-color: #e1e5dd; color: #5f6672; box-shadow: none; }
#top-bar .zp-act { width: 28px; height: 28px; }
#top-bar .zp-act svg { width: 15px; height: 15px; }

/* news: date on the left, the buttons on the right of the same line */
.zp-post-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
/* the theme fades .post-submitted to 60%: keep that for the date only, not for the buttons */
section.blog-v2 .blog-post .post-submitted.zp-post-meta { opacity: 1; }
.zp-post-meta > span:first-child { opacity: .6; }
.zp-acts { display: inline-flex; align-items: center; gap: 6px; }
.zp-act-form { display: contents; }
.zp-act-sent { display: none; }
.zp-act-send.is-sent .zp-act-sent
{
    display: block;
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #5a8f3c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 8px;
    box-sizing: content-box;
}

/* Top bar: the theme fades every link/span to 60% (and nested opacity multiplies) — show them normally */
header #top-bar a,
header #top-bar span { opacity: 1; }
.zp-topbar-acts { display: inline-flex !important; align-items: center; gap: 8px; height: 40px; }
#top-bar .zp-topbar-acts > * { margin-left: 0; }
#top-bar .zp-topbar-group select { height: 30px; padding: 0 8px; border: 1px solid #d6dbd2; border-radius: 6px; background: #fff; color: #333; font-size: 14px; }
#top-bar a.zp-topbar-logout { margin-left: 4px; color: #333; font-size: 13pt; }
#top-bar a.zp-topbar-logout:hover { color: #5a8f3c; text-decoration: none; }

/* Mobile header: same buttons (article size, 32px), centred on the GRUPA / MENU labels.
   The GRUPA box is taller than its label (70px, label 29px at its top), so centring in the row
   misses: align to the row top and move the 32px button down so its middle meets the label's (36px). */
.hamburger-navbar-right .zp-head-act { display: flex; align-items: center; align-self: flex-start; margin: 19.5px 4px 0; }
/* on the phone "+" (add article / gallery / photos) stays green, unlike the top bar;
   :not(#zp-none) only lifts the specificity above the grey :is(#top-bar, …) rule */
.hamburger-navbar-right .zp-act-add:not(:hover):not(:focus-visible):not(#zp-none) { background: #5a8f3c; border-color: #5a8f3c; color: #fff; }

/* Dialogs ("Nowa galeria" and the rest of the site): css/zp-modal.css */

/* Adding photos to a gallery folder (templates/gallery/upload_iframe.php; the uploader inside: upload_page.php) */
.zp-upload-sub { margin: 0 0 18px; text-align: center; color: #5a8f3c; font: 600 13px/1.3 helvetica, arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.zp-upload-frame { display: block; width: 100%; max-width: 1000px; height: 420px; margin: 0 auto; border: 0; }

/* Open page in the menu, in place of a page title on Aktualności / Galeria
   (class "active" from ContentController::buildNavBar and templates/layout.php).
   Desktop: green text with a permanent green underline (the theme's hover line, made solid);
   a dropdown holding the page is underlined too, the page inside it is green and bold. */
@media (min-width: 800px)
{
    /* ".nav.navbar-nav": outweighs css/header-1.css, which loads after this file */
    #main-nav .nav.navbar-nav > li > a:before { background-color: #5a8f3c; border-radius: 2px; }
    #main-nav .nav.navbar-nav > li.active > a,
    #main-nav .nav.navbar-nav > li.active > a:hover,
    #main-nav .nav.navbar-nav > li.active > a:focus { color: #3d6b25; }
    #main-nav .nav.navbar-nav > li.active > a:before { display: block; opacity: 1; height: 3px; }
    #main-nav .nav.navbar-nav .dropdown-menu > li.active > a,
    #main-nav .nav.navbar-nav .dropdown-menu > li.active > a:hover { color: #3d6b25; font-weight: 700; }
}

/* Phone: the open page's row in the MENU list (visible only once the list is open) */
#dropdown-menu a.active,
#dropdown-menu a.active:hover { background-color: #5a8f3c; color: #fff; }