/* SKPC compact fixed header — 2026-10-08.
   Loaded AFTER style.css and adaptive.css to preserve all existing page styles.
   Only header elements are changed. Footer/content/form widths remain untouched. */
:root { --skpc-header-height: 80px; }
#header {
    min-height: var(--skpc-header-height);
    /* Keep the border visually but not in layout height (+1px jump). */
    border-bottom: 0;
    box-shadow: 0 6px 22px rgba(0,0,0,.16),
                inset 0 1px 0 rgba(255,255,255,.025),
                inset 0 -1px 0 rgba(117,185,235,.24);
}
#header .header-grid {
    display: grid;
    grid-template-columns: 224px minmax(0,1fr) max-content;
    column-gap: 18px;
    align-items: center;
    min-height: var(--skpc-header-height);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}
#header .brand { display: flex; align-items: center; min-width: 0; }
#header .logo,
#header .logo picture { display: block; width: 224px; max-width: 100%; }
#header .logo img {
    display: block;
    width: 224px;
    max-width: 100%;
    height: auto;
    max-height: 74px;
    background: transparent;
    filter: none;
}
#header .nav { min-width: 0; }
#header #menu { gap: 6px; }
#header #menu a {
    padding: 12px 12px;
    font-size: 15px;
    letter-spacing: .035em;
    white-space: nowrap;
}
#header .header-contacts { gap: 0; }
#header .header-contacts a {
    font-size: 15px;
    white-space: nowrap;
    line-height: 1.25;
}
/* At narrower desktop widths remove the phone before links crowd one another. */
@media (min-width: 971px) and (max-width: 1050px) {
    #header .header-grid {
        grid-template-columns: 220px minmax(0,1fr);
        column-gap: 16px;
    }
    #header .header-contacts { display: none !important; }
}
@media (max-width: 970px) {
    :root { --skpc-header-height: 72px; }
    #header .header-grid {
        display: block;
        min-height: var(--skpc-header-height);
        padding: 0 68px 0 28px;
    }
    #header .brand { height: var(--skpc-header-height); }
    #header .logo,
    #header .logo picture { width: 220px; }
    #header .logo img { width: 220px; max-height: 70px; }
    #header .header-contacts { display: none !important; }
    #header #menu { display: block; top: var(--skpc-header-height); }
}
@media (max-width: 640px) {
    :root { --skpc-header-height: 64px; }
    #header .header-grid { padding-left: 18px; padding-right: 64px; }
    #header .logo,
    #header .logo picture { width: 185px; }
    #header .logo img { width: 185px; max-height: 62px; }
    #header #menu { top: var(--skpc-header-height); }
}
@media (max-width: 360px) {
    #header .logo,
    #header .logo picture,
    #header .logo img { width: 174px; }
}