/* Additions on top of the archived Repro stylesheet: the slider without jQuery, accessibility helpers
   and a single-column layout for phones (the original 960px grid was desktop-only). */

:root {
    --pergamena-gutter: 16px;
    --pergamena-surface: #fff;
}

/* Home slider: one panel visible, the thumbnail tabs switch panels (js/pergamena.js) */
#coda-slider-1 .panel { display: none; }
#coda-slider-1 .panel.is-active { display: block; }

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

.nav-toggle { display: none; }

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

@media (max-width: 980px) {
    body { overflow-x: hidden; }
    .container_12 { width: auto; padding: 0 var(--pergamena-gutter); }
    .container_12 [class*="grid_"] {
        float: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    #top .grid_3 { display: none; }
    #second_nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
    #second_nav li { float: none; }
    #logo img, #header_advert img { max-width: 100%; height: auto; }
    #header_advert { margin: 8px 0; text-align: center; }
    #sidebar, #footer .grid_3 { margin-top: 24px; }
    .ads-300 img { max-width: 100%; height: auto; }
}

@media (max-width: 640px) {
    .nav-toggle {
        display: block;
        width: 100%;
        padding: 12px var(--pergamena-gutter);
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
    }
    #nav .sf-menu { display: none; }
    #nav.is-open .sf-menu { display: block; }
    #nav .sf-menu li { float: none; }
    #nav .sf-menu ul { position: static; display: block; visibility: visible; }

    .post_columns .column { float: none; width: auto; margin-right: 0; }
    #slider .slider_image { float: none; text-align: center; }
    #slider .details { float: none; width: auto; }
    #slider_nav { display: none; }
    #content .alignleft, #content .alignright { float: none; display: block; margin: 0 auto 12px; }
}

/* Kontakt form (mu-plugins/pergamena-kontakt.php): fields, notices, the hidden spam trap */
.contact-form { margin: 16px 0; }
.contact-form__field { margin-bottom: 12px; }
.contact-form__field label { display: block; font-weight: bold; margin-bottom: 4px; }
.contact-form__field input,
.contact-form__field textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    font: inherit;
}
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 8px 12px; border-left: 4px solid; }
.notice--success { border-color: #3a7d3a; background: #eef6ee; }
.notice--error { border-color: #b03030; background: #f9eeee; }