/* directory-russia.ru /pda/ - visual-only responsive layout v56.
   Loaded AFTER the two original theme stylesheets. No existing CSS is deleted. */

html { -webkit-text-size-adjust: 100%; }
body {
    min-width: 0;
    margin: 0;
    color: #243c53;
    background: #f1f5f9;
    font: 15px/1.58 Arial, Helvetica, sans-serif;
}
#pagewrap, #pagewrap *, #pagewrap *:before, #pagewrap *:after {
    box-sizing: border-box;
}
#pagewrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 306px;
    grid-template-areas: "header header" "content sidebar" "footer footer";
    column-gap: 22px;
    row-gap: 22px;
    width: calc(100% - 48px);
    max-width: 1370px;
    min-height: 100vh;
    margin: 14px auto 0;
    padding: 0;
    align-content: start;
}
#pagewrap a { color: #0879b5; }
#pagewrap a:hover { color: #006084; }

/* One integrated header, including existing search and unchanged navigation URLs. */
#pagewrap #header {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 265px;
    grid-template-areas: "brand search" "nav nav";
    align-items: center;
    gap: 18px 24px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 25px 30px 22px;
    border-bottom: 4px solid #10b1c2;
    border-radius: 0 0 18px 18px;
    color: #fff;
    background: linear-gradient(115deg, #12283f 0%, #15446d 75%, #12688b 100%);
    box-shadow: 0 8px 22px rgba(14, 38, 68, .13);
}
#header hgroup { grid-area: brand; min-width: 0; }
#pagewrap #site-logo {
    position: static;
    top: auto;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}
#pagewrap #site-logo a {
    display: inline-block;
    color: #fff;
    font: 700 clamp(23px, 2.5vw, 33px)/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: -.45px;
    text-decoration: none;
}
#pagewrap #site-description {
    position: static;
    top: auto;
    margin: 6px 0 0;
    padding: 0;
    color: #c1e7f5;
    font: 400 14px/1.5 Arial, Helvetica, sans-serif;
}
#pagewrap #header nav {
    grid-area: nav;
    display: block;
    min-width: 0;
}
#pagewrap #main-nav {
    position: static;
    left: auto;
    bottom: auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#pagewrap #main-nav li,
#pagewrap #main-nav li:first-child {
    display: block;
    float: none;
    position: static;
    margin: 0;
    padding: 0;
}
#pagewrap #main-nav a {
    display: block;
    padding: 10px 17px;
    border: 1px solid rgba(210, 236, 251, .28);
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font: 700 14px/1.2 Arial, Helvetica, sans-serif;
    text-shadow: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
#pagewrap #main-nav a:hover,
#pagewrap #main-nav a:focus-visible {
    background: #147cac;
    border-color: #69cfe3;
    text-decoration: none;
}
#pagewrap #searchform {
    grid-area: search;
    position: static;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
    z-index: auto;
}
#pagewrap #searchform #autocomplete {
    box-sizing: border-box;
    display: block;
    float: none;
    width: 100%;
    height: 43px;
    padding: 0 16px;
    color: #173752;
    background: #fff;
    border: 1px solid #b4d7e8;
    border-radius: 10px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .07);
    font: 14px/1.4 Arial, Helvetica, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#pagewrap #searchform #autocomplete:focus {
    border-color: #22bfd2;
    box-shadow: 0 0 0 3px rgba(34, 191, 210, .2);
}

/* Main page content and all subpages keep the original HTML, links and forms. */
#pagewrap #content {
    grid-area: content;
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    min-height: 420px;
    height: auto;
    margin: 0;
    padding: 27px 32px 32px;
    border: 1px solid #dbe6f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(24, 60, 93, .055);
    overflow-wrap: break-word;
}
#content h1, #content h2, #content h3, #content h4 {
    color: #163c5c;
    line-height: 1.3;
}
#pagewrap #content .post-title {
    margin: 0 0 14px;
    padding: 0 0 11px;
    font: 700 20px/1.3 Arial, Helvetica, sans-serif;
    color: #153f60;
    border-bottom: 1px solid #dfe9f0;
}
#content .post-date { color: #1684a6; }
#content .post { margin-bottom: 22px; }
#content .category { line-height: 1.8; }
#content .category p { padding: 3px 0; }
#content a { text-underline-offset: 3px; }
#content input[type="text"],
#content input[type="email"],
#content input[type="search"],
#content select, #content textarea,
#sidebar input[type="text"], #sidebar select {
    max-width: 100%;
    min-height: 37px;
    padding: 8px 11px;
    color: #1b3a50;
    border: 1px solid #cbdbe7;
    border-radius: 8px;
    background: #fff;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
}
#content textarea { min-height: 100px; }
#content input:focus, #content select:focus,
#content textarea:focus, #sidebar input:focus {
    outline: 2px solid rgba(10, 164, 186, .27);
    outline-offset: 1px;
}
#pagewrap .btn, #pagewrap input[type="submit"], #pagewrap button {
    border-radius: 8px;
}
#content img, #sidebar img { max-width: 100%; height: auto; }
#content table { max-width: 100%; }

/* Original sidebar links and modules are untouched. */
#pagewrap #sidebar {
    grid-area: sidebar;
    display: block;
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
}
#pagewrap #sidebar .widget {
    width: 100%;
    margin: 0 0 16px;
    padding: 18px 19px;
    border: 1px solid #d9e5ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(24, 60, 93, .055);
}
#pagewrap #sidebar .widgettitle {
    margin: 0 0 10px;
    padding: 0 0 10px;
    color: #133c5b;
    font: 700 16px/1.3 Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #d9e7f0;
}
#pagewrap #sidebar .widget ul { margin: 0; padding: 0; }
#pagewrap #sidebar .widget li {
    padding: 9px 0;
    margin: 0;
    line-height: 1.4;
    border-top: 0;
    border-bottom: 1px solid #edf2f6;
}
#pagewrap #sidebar .widget li:last-child { border-bottom: 0; }
#sidebar .widget p { margin: 0 0 8px; }
#sidebar .widget a { font-weight: 500; }
#sidebar .input-city { width: 100%; }

#pagewrap #footer {
    grid-area: footer;
    float: none;
    clear: none;
    min-width: 0;
    margin: 0 0 24px;
    padding: 19px 28px;
    border-radius: 14px;
    color: #c7dbea;
    background: linear-gradient(110deg, #102e50, #163d5c);
    font-size: 13px;
}
#pagewrap #footer p { margin: 0; }
#pagewrap #footer a { color: #edf8ff; }

@media (max-width: 1050px) {
    #pagewrap { grid-template-columns: minmax(0, 1fr) 285px; gap: 17px; width: calc(100% - 30px); }
    #pagewrap #content { padding: 24px 24px 28px; }
    #pagewrap #header { padding: 24px 25px 20px; }
}
@media (max-width: 760px) {
    #pagewrap {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "content" "sidebar" "footer";
        width: calc(100% - 24px);
        gap: 16px;
    }
    #pagewrap #header { grid-template-columns: minmax(0, 1fr) 215px; }
    #pagewrap #sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    #pagewrap #sidebar .widget { padding: 17px; margin: 0; }
    #pagewrap #sidebar .widget:last-child { grid-column: 1 / -1; }
    #pagewrap #content { min-height: 0; }
}
@media (max-width: 570px) {
    #pagewrap { width: calc(100% - 20px); gap: 12px; }
    #pagewrap #header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "brand" "nav" "search";
        gap: 15px;
        padding: 19px 17px 18px;
        border-radius: 0 0 14px 14px;
    }
    #pagewrap #site-logo a { font-size: 23px; }
    #pagewrap #site-description { font-size: 13px; }
    #pagewrap #main-nav { gap: 6px; }
    #pagewrap #main-nav a { padding: 10px 13px; font-size: 13px; }
    #pagewrap #searchform { width: 100%; }
    #pagewrap #content { padding: 19px 17px; border-radius: 13px; }
    #pagewrap #content .post-title { font-size: 18px; }
    #pagewrap #sidebar { display: block; }
    #pagewrap #sidebar .widget { margin: 0 0 12px; padding: 17px; }
    #pagewrap #footer { margin-bottom: 12px; padding: 18px; border-radius: 12px; }
    .pagination { height: auto; min-height: 30px; }
    .pagination ul { max-width: 100%; display: flex; flex-wrap: wrap; }
    .pagination ul > li > a, .pagination ul > li > span { float: none; display: block; }
}
@media (max-width: 360px) {
    #pagewrap #site-logo a { font-size: 21px; }
    #pagewrap #main-nav a { font-size: 12px; padding: 9px 11px; }
    #pagewrap #content { padding: 16px 13px; }
}

/* V57: slightly detach the entire layout from the top edge on mobile too. */
@media (max-width: 570px) { #pagewrap { margin-top: 10px; } }