/* ==========================================================================
   Visual redesign: design tokens
   Warm neutral ground + a single blue accent (matched to the logo ribbon)
   replacing the inherited cold gray-blue Drupal palette, plus a real type
   scale replacing the old 75%-of-16px (~12px) body text.
   ========================================================================== */
:root {
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-tint: #eef2f7;
  --text: #262320;
  --text-secondary: #6b655d;
  --border: #e4dfd6;
  --brand: #1f5fa8;
  --brand-hover: #164a82;
  --brand-dark: #1b3a5c;
  --shadow: 0 1px 3px rgba(38, 35, 32, 0.08);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

#page {
  width: auto;
  max-width: 1180px;
  background-color: var(--surface);
}

a, .created, .com {
  color: var(--brand);
}

a:hover {
  color: var(--brand-hover);
}

/* Header: swap the fixed-height/absolutely-positioned Drupal layout for a
   flex row so the logo and banner can breathe instead of being pinned to a
   73px-tall box. */
#header {
  height: auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

#logo-floater, #sidebar-header {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  text-align: left;
}

#sidebar-header {
  flex: 1;
  min-width: 240px;
}

#sidebar-header img {
  border-radius: var(--radius-lg);
}

.nav-toggle {
  display: none;
}

html.js .nav-toggle[aria-expanded="true"] {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Page/section titles */
.title h2 {
  float: none;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

span.basetax {
  background-color: var(--surface-tint);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
}

span.basetax a {
  color: var(--brand-dark);
  text-decoration: none;
}

.breadcrumb a {
  color: var(--brand);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Article listing rows (frontpage + category/region/tag listings) */
.view-frontpage .views-row, .view-razdel .views-row {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.view-frontpage .views-row:last-child, .view-razdel .views-row:last-child {
  border-bottom: none;
}

.view-frontpage .img, .view-razdel .img {
  float: none;
  flex-shrink: 0;
}

.txt {
  margin-left: 0;
}

.created a {
  background-color: var(--surface-tint);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
}

h3.title a, .txt h3 a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

h3.title a:hover, .txt h3 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.teaser {
  color: var(--text-secondary);
}

.com, .com a {
  color: var(--text-secondary);
  font-size: 14px;
}

ul.links.inline li a {
  display: inline-block;
  background-color: var(--surface-tint);
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  text-decoration: none;
}

ul.links.inline li a:hover {
  background-color: var(--brand);
  color: #fff;
}

.tax {
  padding-left: 0;
  background: none;
}

/* Sidebar widgets (left nav + right "latest news"/calendar) as real cards */
.block {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

#sidebar-right .block {
  background-color: var(--surface);
  padding: 20px;
}

.block h2 {
  font-size: 18px;
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 12px;
  margin-bottom: 8px;
  position: relative;
}

.block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--brand);
}

.block .views-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.block .views-row:last-child {
  border-bottom: none;
}

.block .views-field-title {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 0;
}

.view-dom-id-4 .views-field-title a, .view-dom-id-3 .views-field-title a,
.view-otcer-calendar .views-field-title a {
  color: var(--text);
  text-decoration: none;
}

.view-dom-id-4 .views-field-title a:hover, .view-dom-id-3 .views-field-title a:hover,
.view-otcer-calendar .views-field-title a:hover {
  color: var(--brand);
}

.view-dom-id-3 .created, .view-otcer-calendar .views-field-field-date-value {
  color: var(--text-secondary);
  font-size: 13px;
  background: none;
  padding: 0;
}

/* Left nav (Разделы/Регион) */
#block-views-navigation-block_1 .view-content a,
#block-views-navigation_city-block_1 .view-content a {
  background-color: transparent;
  color: var(--text);
  height: auto;
  line-height: normal;
  padding: 10px 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-weight: 500;
  text-decoration: none;
}

#block-views-navigation-block_1 .view-content .views-row:last-child a,
#block-views-navigation_city-block_1 .view-content .views-row:last-child a {
  border-bottom: none;
}

#block-views-navigation-block_1 .view-content a:hover,
#block-views-navigation_city-block_1 .view-content a:hover {
  background-color: var(--surface-tint);
  color: var(--brand);
}

#block-views-navigation-block_1 .view-content a.active,
#block-views-navigation_city-block_1 .view-content a.active {
  border-left: 3px solid var(--brand);
  padding-left: 11px;
  color: var(--brand);
  font-weight: 700;
  background-color: var(--surface-tint);
}

/* Footer */
#footer {
  background-color: var(--surface-tint);
  color: var(--text-secondary);
}

#footer a {
  color: var(--brand);
}

#footer-right {
  color: var(--text-secondary);
}

/* Article detail page */
.submitted {
  color: var(--text-secondary);
}

.similar, .meta {
  border-top: 2px solid var(--border);
}

.search-page {
  padding-top: 5px;
}

/* Drupal's clear-block clearfix was never carried over during migration,
   even though templates place a `.clear-block` div right after every
   floated `.title h2` (baseof.html) to contain it. Without this, the
   float stays open and the following content (e.g. the first article's
   floated thumbnail) rises up beside the title instead of below it. */
.clear-block:after {
  content: "";
  display: table;
  clear: both;
}

div.title {
  padding-bottom: 35px;
}

.error-404-page .title h2 {
  font-size: 260%;
  color: var(--brand-dark);
}

.error-404-image {
  padding: 10px 0 20px;
}

.error-404-image img {
  width: 320px;
}

.error-404-lead {
  font-size: 130%;
  color: var(--text-secondary);
}

/* The theme hardcodes image width/height as HTML attributes (410x200,
   100x100, 468x60, ...) instead of CSS. A CSS type-selector rule like
   `img{}` beats a presentational HTML attribute in the cascade, so
   `height:auto` alone doesn't just override the *attribute* height — with
   no CSS width set either, a floated `.img` container with no width of
   its own shrinks-to-fit the image's natural size, and the thumbnail
   renders full-size instead of clamped to the attribute's width. So each
   context needs its own explicit CSS width restoring the original
   intent; only then does `max-width:100%` correctly act as a mobile-only
   safety cap instead of the only sizing rule in effect. */
img {
  max-width: 100%;
  height: auto;
}

.view-frontpage .img img, .view-razdel .img img {
  width: 130px;
  border-radius: var(--radius-md);
}

.first-img img {
  width: 410px;
}

.promo-anons-item img {
  width: 100px;
}

.views-field-field-image-c-fid img {
  width: 50px;
}

#sidebar-header img {
  width: 468px;
}

/* Drupal core's system.css supplied .links.inline styling; it never got
   carried over into style.css during migration, so tag lists rendered as
   a default bulleted vertical list instead of an inline row. */
ul.links.inline {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.links.inline li {
  display: inline;
  margin-right: 8px;
}

/* Mobile: the theme is a fixed 950px, 3-column, absolutely-positioned
   2010s layout with zero responsive rules of its own. Collapse it to a
   single stacked column below 780px (the width the original CSS already
   assumed as its floor, see the disabled `min-width:780px` comment in
   style.css) without touching the desktop layout at all. */
@media (max-width: 780px) {
  #page {
    width: auto;
    padding: 20px 12px 15px;
  }

  #header {
    height: auto;
    padding-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .login {
    position: static;
    right: auto;
    top: auto;
  }

  #wrapper {
    margin-top: 10px;
  }

  #wrapper #container #center {
    float: none;
    width: auto;
  }

  body.sidebar-left #center,
  body.sidebar-right #center,
  body.sidebars #center {
    margin: 0;
  }

  body.sidebar-left #squeeze,
  body.sidebar-right #squeeze,
  body.sidebars #squeeze {
    margin: 0;
  }

  #sidebar-left, #sidebar-right {
    float: none;
    width: auto;
  }

  .view-frontpage .views-row, .view-razdel .views-row {
    flex-direction: column;
  }

  .view-frontpage .img, .view-razdel .img {
    float: none;
  }

  .txt {
    margin-left: 0;
    margin-top: 10px;
  }

  .similar, .meta {
    padding-left: 0;
  }

  .similar b, .meta b {
    margin-left: 0;
    float: none;
    width: auto;
    display: block;
  }

  .promo-anons-grid {
    flex-direction: column;
  }

  #footer {
    height: auto;
    padding: 15px 0;
  }

  #footer-left, #footer-right {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    text-align: left;
  }

  #footer-right {
    margin-top: 10px;
  }

  body {
    font-size: 87.5%;
  }

  html.js .nav-toggle {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px 16px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  html.js #sidebar-left {
    display: none;
  }

  html.js #sidebar-left.nav-open {
    display: block;
  }
}

/* style.css floats .img left with no clearfix on .views-row, so a taller
   thumbnail bleeds down into the next row(s) instead of staying inside its
   own listing entry. */
.view-frontpage .views-row, .view-razdel .views-row {
  overflow: hidden;
}

.promo-anons h2 {
  padding-bottom: 10px;
  font-size: 135%;
  border-bottom: 1px solid #9f9f9f;
}

.promo-anons-grid {
  display: flex;
  gap: 18px;
  padding-top: 15px;
}

.promo-anons-item {
  flex: 1;
}

.promo-anons-item img {
  display: block;
  margin-bottom: 8px;
}

.promo-anons-title a {
  color: var(--text);
  text-decoration: none;
}

.promo-anons-title a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.pager-prev, .pager-next {
  background-color: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
}

.pager-prev:hover, .pager-next:hover {
  background-color: var(--brand);
  color: #fff;
  text-decoration: none;
}

.pager-disabled {
  color: var(--border);
  border-color: var(--border);
}

.pager-current {
  color: var(--text-secondary);
}

.pagefind-ui {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pagefind-ui-primary: var(--brand);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pagefind-ui__form {
  margin-bottom: 20px;
}

.pagefind-ui__search-input {
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
}

.pagefind-ui__search-clear {
  color: var(--text-secondary);
}

.pagefind-ui__result {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.pagefind-ui__result-title {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 8px;
}

.pagefind-ui__result-title a {
  color: var(--text);
  text-decoration: none;
}

.pagefind-ui__result-title a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.pagefind-ui__result-excerpt {
  color: var(--text-secondary);
  line-height: 1.45;
}

.pagefind-ui__button {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  padding: 7px 12px;
}