/* --- responsive layer, loaded after styles.css and custom-sitmp.css --- */

/* The [hidden] attribute is display:none only in the UA stylesheet, so the legacy author rule
   ul { display: inline-block } overrides it. Restore it at author level. */
[hidden] {
    display: none;
}

/* --- mobile navigation, hidden on desktop --- */
#mobileNav {
    display: none;
}
div.breadcrumb-wrap {
    display: none;
}

/* --- up to 1239px: the fixed 1200px frame is released and the layout goes fluid --- */
@media (max-width: 1239px) {
    :root {
        --content-roof-height: 70px;
    }
    #header,
    #animation,
    #menu,
    #content,
    #footer {
        min-width: 0;
    }
    #logoAndText,
    #menuWrapper,
    #contentWrapper,
    #footerWrapper {
        width: auto;
        max-width: var(--layout-width);
        padding-left: 20px;
        padding-right: 20px;
    }
    #menu ul li a {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 20px;
    }
}

/* --- up to 991px: single column, mobile menu, breadcrumbs --- */
@media (max-width: 991px) {
    :root {
        --content-roof-height: 72px;
        /* The side panels go full width here, so they use the calmer content angle. */
        --activity-roof-angle: 7.8deg;
        --activity-roof-height: 58px;
    }

    /* Header stacks as logo / burger bar / stage, with the title laid over the top of the stage. */
    #header {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            "logo"
            "nav"
            "stage";
        padding-top: 15px;
        padding-bottom: 0;
    }
    /* Dropping the wrapper box promotes #logo and #headerText to grid items of #header, so the
       title can be placed over the stage without changing markup the desktop relies on. */
    #logoAndText {
        display: contents;
    }
    /* The negative bottom margin lets the logo hang over the burger bar and shortens the blue
       area above it by the same amount. z-index keeps it above the bar (#mobileNav is 3). */
    #logo {
        grid-area: logo;
        justify-self: center;
        z-index: 4;
        left: 0;
        top: 0;
        width: 175px;
        margin-right: 0;
        margin-bottom: -47px;
    }
    #logo img {
        width: 175px;
        height: 175px;
    }
    /* Same grid cell as the stage: sits over the scene, no background of its own. */
    #headerText {
        grid-area: stage;
        align-self: start;
        z-index: 2;
        margin: 0;
        padding: 20px 20px 0 20px;
        text-align: center;
        font-size: 24px;
        line-height: 30px;
    }
    #animation {
        grid-area: stage;
        position: static;
        width: 100%;
        /* Clips the scene: pulled up by 60px at the top and cropped evenly left and right. */
        overflow: hidden;
    }
    /* The scene keeps its design width and is cropped symmetrically, so the middle stays visible
       instead of the sprites being squeezed into the viewport. */
    #animation #spritely {
        width: 990px;
        max-width: none;
        margin-left: calc(50% - 495px);
        margin-right: 0;
    }

    /* the yellow bar is replaced by the burger, which sits above the animation */
    #menu {
        display: none;
    }
    #mobileNav {
        grid-area: nav;
        display: block;
        position: relative;
        z-index: 3;
        font-size: 16px;
        line-height: 1.4;
        text-align: left;
        background-color: #f8e149;
        background-image: url("/img/ms38/colorStripes.jpg");
        background-position: center bottom;
        background-repeat: repeat-x;
    }
    #menuToggle {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 14px 20px;
        font-family: inherit;
        font-size: 20px;
        line-height: 24px;
        text-align: right;
        color: #003366;
        background: none;
        border: 0;
        cursor: pointer;
    }
    #menuToggle:focus-visible {
        outline: 2px solid #003366;
        outline-offset: -4px;
    }
    #menuToggle .menuToggle-bars,
    #menuToggle .menuToggle-bars::before,
    #menuToggle .menuToggle-bars::after {
        display: block;
        width: 26px;
        height: 3px;
        background-color: #003366;
    }
    #menuToggle .menuToggle-bars {
        position: relative;
    }
    #menuToggle .menuToggle-bars::before,
    #menuToggle .menuToggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }
    #menuToggle .menuToggle-bars::before {
        top: -8px;
    }
    #menuToggle .menuToggle-bars::after {
        top: 8px;
    }
    #mobileMenu {
        padding-bottom: 10px;
        background-color: #ffffff;
    }
    /* :not([hidden]) is required — a plain display:block would beat the hidden attribute. */
    ul.mobileMenu-list:not([hidden]) {
        display: block;
    }
    ul.mobileMenu-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul.mobileMenu-list li.mobileMenu-item {
        margin: 0;
        padding: 0;
        border-top: 1px solid #e5f1fa;
    }
    div.mobileMenu-row {
        display: flex;
        align-items: stretch;
    }
    a.mobileMenu-link {
        flex: 1 1 auto;
        padding: 12px 20px;
        font-size: 17px;
        line-height: 22px;
        text-decoration: none;
        color: #003366;
    }
    li.mobileMenu-item.active > div.mobileMenu-row > a.mobileMenu-link {
        font-weight: bold;
        color: #ff0000;
    }
    a.mobileMenu-link:hover,
    a.mobileMenu-link:focus-visible {
        text-decoration: underline;
    }
    button.mobileMenu-toggle {
        flex: 0 0 52px;
        padding: 0;
        font-size: 16px;
        color: #003366;
        background: none;
        border: 0;
        border-left: 1px solid #e5f1fa;
        cursor: pointer;
    }
    button.mobileMenu-toggle:focus-visible {
        outline: 2px solid #003366;
        outline-offset: -3px;
    }
    button.mobileMenu-toggle i {
        transition: transform 0.2s ease;
    }
    button.mobileMenu-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    ul.mobileMenu-list--sub {
        background-color: #f7fbfe;
    }
    ul.mobileMenu-list--sub a.mobileMenu-link {
        padding-left: 40px;
        font-size: 16px;
    }
    ul.mobileMenu-list--sub ul.mobileMenu-list--sub a.mobileMenu-link {
        padding-left: 60px;
    }

    /* breadcrumbs */
    div.breadcrumb-wrap {
        display: block;
        margin-bottom: 18px;
    }
    ol.breadcrumb {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
        line-height: 1.4em;
    }
    ol.breadcrumb li.breadcrumb-item {
        margin: 0 0 3px 0;
        padding: 0;
    }
    ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
        content: "\203A";
        margin-left: 7px;
        margin-right: 7px;
        color: #003366;
    }
    ol.breadcrumb li.breadcrumb-item a {
        color: #003366;
    }
    ol.breadcrumb li.breadcrumb-item.active span {
        color: #ff0000;
    }

    /* content and side column stack, the Plzeň logo drops above the footer */
    #contentWrapper {
        flex-direction: column;
    }
    #mainColumn {
        order: 1;
        width: 100%;
    }
    #sideColumn {
        order: 2;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
        font-size: inherit;
        line-height: inherit;
    }
    /* the side menu tree is available in the mobile menu instead */
    #leftSubmenu {
        display: none;
    }
    #leftMenu {

        background-image: none;
    }
    #leftMenu,
    #activity {
        width: 100%;
        margin-left: 0;
        margin-bottom: 25px;
    }
    #leftMenuWrapper {
        top: 0;
        margin-bottom: 0;
    }
    #leftMenu_bottom {
        bottom: 0;
    }
    #leftMenu_more {
        display: inline-block;
        margin: 0 0 20px 0;
    }
    #logoPlzen {
        order: 99;
        display: block;
        left: 0;
        top: 0;
        margin-top: 10px;
        text-align: center;
    }

    /* footer text into a column */
    #footerText {
        text-align: center;
    }
    #footerText span.footerText-sep {
        display: none;
    }
    #footerText span.footerText-copy,
    #footerText a {
        display: block;
        margin-top: 6px;
    }
}

/* --- 576px to 991px: the two bottom panels share a row --- */
@media (min-width: 576px) and (max-width: 991px) {
    #sideColumn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
        align-items: start;
    }
    /* Spans both columns so it stays centred under the panels, above the footer. */
    #logoPlzen {
        grid-column: 1 / -1;
    }
    /* On pages without the news panel (the news listing itself) the activities panel would leave
       the second column empty, so it takes the whole row instead. */
    #sideColumn:not(:has(#leftMenu)) #activity {
        grid-column: 1 / -1;
    }
}

/* --- up to 767px --- */
@media (max-width: 767px) {
    :root {
        --content-roof-height: 56px;
        --activity-roof-height: 44px;
    }
    #mainColumn::before,
    #activity::before {
        width: 24px;
        height: 24px;
        margin-left: -12px;
        top: 18px;
    }
    #mainColumn_content {
        padding-left: 18px;
        padding-right: 18px;
    }
    #activityWrapper {
        padding-left: 18px;
        padding-right: 18px;
    }
    #leftMenuWrapper {
        padding-left: 45px;
        padding-right: 18px;
    }
    h1 {
        margin-left: -30px;
        margin-right: -18px;
        /*padding-left: 18px;*/
        padding-right: 18px;
        /* Narrow columns wrap the title onto more lines, and the ribbon's tail takes a fixed share
           of its height, so the band needs more room below to keep covering the last line. */
        border-bottom-width: 22px;
        font-size: 1.5em;
    }
    #headerText {
        font-size: 20px;
        line-height: 26px;
    }
    ul.photogallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        margin-top: 28px;
    }
    /* wide legacy tables in the article body scroll instead of breaking the layout */
    #mainColumn_content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
    /* The jídelníček tables are fluid already. display:block would wrap their rows in an anonymous
       table box with width:auto, which shrinks to the content instead of filling the column. */
    #mainColumn_content .listekmenu table {
        display: table;
        width: 100%;
    }
    /* These cells cannot scroll, so they need "anywhere": unlike break-word it also lowers the
       cell's min-content width, which is what the table layout uses. */
    #mainColumn_content .listekmenu td {
        overflow-wrap: anywhere;
    }
    /* jídelníček */
    #navigation {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    #back {
        margin-right: 0;
        text-align: center;
    }
    #next {
        margin-left: 0;
        text-align: center;
    }
    .listekmenu {
        margin-left: 0;
    }
    .listekmenu input {
        width: 100%;
        max-width: 430px;
    }
}

/* --- up to 479px --- */
@media (max-width: 479px) {
    :root {
        --content-roof-height: 44px;
        --activity-roof-height: 38px;
    }
    #logoAndText,
    #menuWrapper,
    #contentWrapper,
    #footerWrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    #logo,
    #logo img {
        width: 140px;
        height: 140px;
    }
    #headerText {
        font-size: 18px;
        line-height: 24px;
    }
    ul.photogallery {
        grid-template-columns: 1fr;
    }
    div.paging:has(a),
    div.strankovani:has(a, span) {
        gap: 4px;
        padding: 12px 0 0 0;
    }
    div.paging a,
    div.strankovani a,
    div.strankovani span.inActive {
        min-width: 36px;
        padding: 0 6px;
    }
    #leftMenuWrapper {
        padding-left: 40px;
    }
}