@charset "UTF-8";
/*
 * Inter — default typeface for SRPA 2026 (local files from templates/Inter,
 * converted to WOFF2). Loaded unconditionally, independent of the template's
 * "Font Scheme" admin option.
 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/*
 * SRPA 2026 — colour theme overrides on top of the Cassiopeia base template.
 *
 * Palette sampled with pixel precision from the site mockup
 * (templates/teplate.jpg, via Pillow: median/mode over clean background
 * patches, darkest-percentile average over text regions):
 *
 *   --srpa-sage    #B0C8B4  DEFAULT page/body background — header, hero and
 *                           the sidebar+content band are all this colour in
 *                           the mockup; cream only appears as the footer and
 *                           in one plain-content band ("О Нас")
 *   --srpa-cream   #FCFCF4  footer background; opt-in via .srpa-band-cream
 *   --srpa-mint    #D0DCD4  secondary panel (e.g. the calendar widget card)
 *   --srpa-accent  #5E8A6E  buttons, links, active-menu accent
 *   --srpa-accent-dark #4C7359  hover state
 *   --srpa-ink     #24231F  headings, logo, nav text, body text (near-black)
 *   --srpa-text    #444643  unused by default (kept for optional lighter text
 *                           inside .srpa-band-cream sections)
 *   --srpa-muted   #555752  footer / caption text
 *
 * Button/link colour is driven by css/global/custom_srpa2026.css (the
 * template's selectable colour scheme file); this file covers everything
 * else: making sage the default background (with white cards for boxed
 * content), and the header/footer treatment.
 */

:root {
  --srpa-sage: #B0C8B4;
  --srpa-cream: #FCFCF4;
  --srpa-mint: #D0DCD4;
  --srpa-accent: #5E8A6E;
  --srpa-accent-dark: #4C7359;
  --srpa-ink: #24231F;
  --srpa-text: #444643;
  --srpa-muted: #555752;
  --srpa-border: #DCE3DA;

  --cassiopeia-font-family-body: "Inter", Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --cassiopeia-font-family-headings: "Inter", Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 600;

  /* Sage is the default page/body background in the mockup (header, hero
     and the sidebar+content band are all this colour) — cream is the
     exception, used only for the footer and for content explicitly
     wrapped in .srpa-band-cream (e.g. an "О Нас"-style section). */
  --body-bg: var(--srpa-sage);
  --body-bg-rgb: 176, 200, 180;
  --body-color: var(--srpa-ink);
  --body-color-rgb: 36, 35, 31;
  --heading-color: var(--srpa-ink);
  --border-color: var(--srpa-border);
}

body {
  background-color: var(--body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--heading-color);
}

/* Module boxes / cards: white panels with a light border, as in the mockup. */
.card {
  --card-bg: #ffffff;
  --card-border-color: var(--srpa-border);
  --card-cap-bg: #ffffff;
}

/* Sidebar widgets (e.g. "Семинары и конференции" / the calendar widget) get
   the mockup's light mint-green instead of white — a step lighter than the
   sage page background, not a plain white box. */
.container-sidebar-left .card,
.container-sidebar-right .card {
  --card-bg: var(--srpa-mint);
  --card-cap-bg: var(--srpa-mint);
}

.card-title,
.mod-title {
  color: var(--heading-color);
}

/* Utility classes for the few spots that deviate from the sage default.
   Apply via a module's "Module Class" field or a custom HTML wrapper:
   - .srpa-band-cream: opt a section OUT of sage into cream (e.g. an
                        "О Нас"-style plain-content block, as in the mockup)
   - .srpa-panel-mint : secondary panel background (e.g. a calendar widget) */
.srpa-band-cream {
  background-color: var(--srpa-cream);
  color: var(--srpa-ink);
}

.srpa-panel-mint {
  background-color: var(--srpa-mint);
  color: var(--srpa-ink);
}

/* .btn-secondary is Cassiopeia's plain-grey button — used site-wide for
   "Подробнее" (readmore) links and the article prev/next nav ("Назад" /
   "Вперед"). Recolour it to match the accent green used on .btn-primary
   (the search button etc.) so every button reads consistently. */
.btn-secondary {
  --btn-color: #fff;
  --btn-bg: var(--srpa-accent);
  --btn-border-color: var(--srpa-accent);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--srpa-accent-dark);
  --btn-hover-border-color: var(--srpa-accent-dark);
  --btn-active-color: #fff;
  --btn-active-bg: var(--srpa-accent-dark);
  --btn-active-border-color: var(--srpa-accent-dark);
  --btn-disabled-color: #fff;
  --btn-disabled-bg: var(--srpa-accent);
  --btn-disabled-border-color: var(--srpa-accent);
}

/* Header: the mockup's header uses the same sage green as the section
   bands, with dark logo/nav text — not Cassiopeia's default solid-colour
   header with white text. */
.container-header {
  background-image: none;
  background-color: var(--srpa-sage);
  box-shadow: inset 0 -1px 0 var(--srpa-border);
}

/* Logo + menu on one row (desktop only), as in the mockup. .container-header-row
   is a .grid-child (same max-width:1320px + centering as the content below,
   e.g. the sidebar) with "below-top" (logo), the brand block and "menu"/
   "search" as its flex children — so the logo's left edge lines up with the
   page content, instead of hugging the browser edge.
   Below 992px each child keeps its own full-width row (the usual mobile
   pattern: logo on top, collapsed/hamburger menu below). */
.container-header-row {
  flex-wrap: wrap;
}

.container-header-row > * {
  flex: 1 0 100%;
}

@media (width >= 992px) {
  .container-header-row {
    align-items: flex-end;
  }

  .container-header-row > * {
    flex: 0 0 auto;
  }
}

/* "topbar" position: unused by default in Cassiopeia, repurposed here as a
   mobile-only logo bar at the very top of the page (a Custom HTML module
   with the logo image, position "topbar"). It's rendered with style="none"
   (see index.php), which Joomla's core none.php chrome outputs with NO
   wrapper at all — so a module's own "Module Class" field (e.g.
   "hide-desktop") never makes it into the HTML for this position. Instead,
   hide the whole position directly at desktop widths — safe here since
   "topbar" is dedicated to this one mobile-only logo module. */
.container-topbar {
  padding: .5em 1em 0;
  color: var(--srpa-ink);
}

.container-topbar img {
  max-height: 100px !important;
  height: auto !important;
  width: auto;
}

/* Tighten the gap between the topbar logo and the menu row below it
   (Cassiopeia's default spacing assumes the logo sits inline with the
   menu, not stacked above it on mobile). */
@media (width < 768px) {
  .container-header .grid-child.container-header-row {
    padding-top: 0;
  }

  .container-header nav {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .container-topbar {
    display: none;
  }
}

/* Desktop dropdown submenu panel — mint instead of Cassiopeia's default white. */
.container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)) {
  background-color: var(--srpa-mint);
}

.container-header .site-description,
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .mod-menu,
.container-header .navbar-toggler,
.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
  color: var(--srpa-ink);
}

.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus,
.container-header .mod-finder a:not(.jmodedit):hover,
.container-header .mod-finder a:not(.jmodedit):focus {
  color: var(--srpa-accent);
}

.container-header .navbar-toggler {
  border-color: var(--srpa-ink);
}

.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after,
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
  background: var(--srpa-accent);
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.active > span {
  color: var(--srpa-accent-dark);
}

/* Footer: cream, same as the page background, with muted grey text. */
.footer {
  background-image: none;
  background-color: var(--srpa-cream);
  color: var(--srpa-muted);
  box-shadow: inset 0 1px 0 var(--srpa-border);
}

.footer a:not(.btn),
.footer .btn-link {
  color: var(--srpa-muted);
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus,
.footer .btn-link:hover,
.footer .btn-link:focus {
  color: var(--srpa-accent);
}

.footer .metismenu.mod-menu .mm-collapse {
  background: var(--srpa-cream);
}

/* Breadcrumbs read better with a soft tint on a cream page. */
.breadcrumb {
  background-color: var(--srpa-mint);
  border: 1px solid var(--srpa-border);
}

/* Responsive show/hide utilities carried over from the previous template
   (cassiopeia/user.css) — apply via a module's "Module Class" field.
   Kept here (not in user.css) so they survive future user.css resets. */
@media (max-width: 767.98px) {
  .hide-mobile,
  .hide-mobile * {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop,
  .hide-desktop * {
    display: none !important;
  }
}

/* Hide the banner slider on article/category pages — also carried over
   from cassiopeia/user.css. */
body[class*="article"] .baner-slaider {
  display: none !important;
}

body[class*="category"] .baner-slaider {
  display: none !important;
}

/* "Члены СКПА" (/skpa-members.html, menu item id 126) ONLY — a 4-column
   blog listing where each item is a name ("page-header" h2) stacked above
   a photo. Two fixes, scoped to this page via body.itemid-126, desktop
   only (≥992px, the same breakpoint where the layout actually becomes
   4 columns — below that it's a single stacked column, so names just
   wrap to their natural height as usual):
   1. Smaller heading font so most surnames fit without wrapping as much.
   2. Reserve height for 3 lines on every title regardless of actual name
      length, so photos start at the same offset across a row (the grid
      row itself already matches the tallest item, but a short 2-line name
      still only pushes its own photo down 2 lines without this). */
@media (min-width: 992px) {
  body.itemid-126 .blog-items .blog-item .page-header h2 {
    font-size: 1.35rem;
    line-height: 1.4em;
    min-height: 4.2em;
  }
}