:root {
  --header-blue: #012d7d;
  --blue-deep: #0a1e3c;
  --blue-primary: #0b3e9c;
  --blue-medium: #1a66e1;
  --blue-light: #3a7bd5;
  --blue-soft: #6c9bd2;
  --blue-pale: #e6f0fa;
  --white: #ffffff;
  --white-soft: #f8fafc;
  --gray-light: #f1f5f9;
  --gray: #e2e8f0;
  --gray-dark: #94a3b8;
  --gray-text: #334155;
  --black-soft: #1e293b;
  --black: #0f172a;
  --shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 4px 16px rgba(11, 62, 156, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 62, 156, 0.12);
  --shadow-lg: 0 16px 32px rgba(11, 62, 156, 0.16);
  --shadow-xl: 0 24px 48px rgba(11, 62, 156, 0.2);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', 'sans-pro-bold', sans-serif;
  --container-width: 98%;
  --container-max-width: 1600px;
}

/* =========================================================================
   0. KILL THE 2010-ERA INSET SHADOWS
   ========================================================================= */
.box-shadow-inset,
.box-shadow-inset-2 {
  box-shadow: none !important;
}

/* wider viewing area on large screens — Bootstrap's .container is capped
   at 1170px; use the site's own container tokens instead */
.container {
  width: var(--container-width);
  max-width: var(--container-max-width);
}

/* =========================================================================
   1. BASE TYPOGRAPHY
   NOTE: deliberately no global "color" on h1-h6 — headings must inherit
   color from their wrapper (.red-color / .black-color / .white-color /
   etc.) exactly like the original theme intended. A blanket color here
   would silently win over inherited colors site-wide (that was the bug
   that made the header title unreadable).
   ========================================================================= */
body {
  font-family: var(--font-main) !important;
  color: var(--gray-text);
  background: var(--white-soft);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}
p { line-height: 1.7; }
hr { border-top: 1px solid var(--gray); }
::selection { background: var(--blue-light); color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--blue-medium);
  outline-offset: 2px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--white-soft); }
::-webkit-scrollbar-thumb { background: var(--blue-soft); border-radius: var(--radius-full); }

/* generic color utilities */
.black-color, .black-color a { color: var(--black); }
.red-color, .red-color a { color: var(--blue-primary); }
.red-background { background: var(--blue-deep); }
.gray-color, .gray-color a { color: var(--gray-text); }
.gray-background { background: var(--white); }
.white-background { background: var(--white); }
.lead { color: var(--gray-text); }

/* =========================================================================
   2. HEADER — two-tier: flat navy bar (logo + search) on top, separate
   white menu bar directly below it (no gap between them).
   ========================================================================= */
.header-line {
  background: var(--header-blue) !important;
  box-shadow: 0 4px 24px rgba(10, 30, 60, 0.25);
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-line .logotype {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-line .logoimg { float: none; margin: 0; }
@media (min-width: 769px) {
  .header-line .logoimg { height: 78px; width: auto; }
}
.chdu-title, .chdu-title-en {
  padding-left: 0;
  font-weight: 600;
  line-height: 1.25;
}
@media (min-width: 769px) {
  .chdu-title, .chdu-title-en {
    width: auto;
    max-width: none;
    white-space: nowrap;
    font-size: 27px !important;
  }
}
/* explicit, high-priority: title text in the navy header is always white */
.header-line h1,
.header-line h2,
.header-line .chdu-title,
.header-line .chdu-title-en,
.header-line .chdu-title:hover,
.header-line .chdu-title-en:hover {
  color: var(--white) !important;
}

#search-col { display: flex; align-items: center; justify-content: flex-end; }
.search-line form { display: flex; align-items: center; }
#s {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--radius-full) !important;
  color: var(--white) !important;
  padding-left: 16px;
}
#s::placeholder { color: rgba(255, 255, 255, 0.65); }
#s:focus { background-color: rgba(255, 255, 255, 0.22) !important; }
#searchsubmit { filter: brightness(0) invert(1); opacity: 0.85; }

/* keep the menu bar reachable while scrolling, on desktop */
@media (min-width: 1001px) {
  .top-menu-wrapper { position: sticky; top: 0; z-index: 600; }
}

/* =========================================================================
   3. MOBILE MENU BUTTON + FULLSCREEN OVERLAY NAV — flat color, no motion
   ========================================================================= */
.menuButton { border-bottom: none; box-shadow: var(--shadow-sm); }
.menuButtonScroll, .menuButtonDefault { background: var(--header-blue) !important; }
.menuButtonDefault .glyphicon, .menuButtonScroll .glyphicon { color: var(--white) !important; }

@media (max-width: 1000px) {
  .top-menu-nav { background: var(--blue-deep) !important; }
  #top-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  #top-menu li a { color: var(--white) !important; font-size: 17px; font-weight: 600; }
}

/* =========================================================================
   4. DESKTOP TOP MENU — its own clean white bar, flat colors
   ========================================================================= */
.top-menu-wrapper {
  background: var(--white) !important;
  border-bottom: none;
  box-shadow: 0 1px 0 var(--gray), 0 6px 16px rgba(15, 23, 42, 0.05);
}
.top-menu li { font-weight: 600; color: var(--gray-text); border-bottom: none !important; }
.top-menu a:hover { color: var(--blue-primary); }
.top-menu li.current-menu-item > a,
.top-menu li.current-menu-parent > a,
.top-menu li.current_page_item > a {
  color: var(--blue-primary);
  font-weight: 800;
}
.top-menu li.current-menu-item,
.top-menu li.current-menu-parent,
.top-menu li.current_page_item {
  box-shadow: inset 0 -3px 0 var(--blue-medium);
}
.top-menu li ul {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  overflow: hidden;
  min-width: 240px !important;
  padding: 8px !important;
}
.top-menu li ul li {
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-sm);
}
.top-menu li ul li:nth-child(2n) { background: var(--white-soft); }
.top-menu li ul li:hover { background: var(--blue-pale); }
.top-menu li ul li a {
  color: var(--gray-text);
  font-weight: 500;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 12px 16px !important;
}
.top-menu li ul li a:hover { color: var(--blue-primary); }

/* =========================================================================
   5. HOMEPAGE SECTION HEADINGS
   ========================================================================= */
.homepage h2 {
  color: var(--black);
  text-shadow: none;
  font-size: 26px;
}
.homepage h2::before { background-color: var(--blue-medium); border-radius: var(--radius-full); width: 6px; }

/* =========================================================================
   6. CARDS — news / events / faculty / category-page blocks
   In the real markup these are ALSO Bootstrap ".row" elements (negative
   side margins). Adding a visible border/padding to that same box makes
   it bleed outside its column and overlap the neighbour — cancel the
   negative margin specifically for these compound-class cases.
   ========================================================================= */
.category-news-element.row,
.category-standart-block.row {
  margin-left: 0;
  margin-right: 0;
}
.category-news-element {
  background: var(--white);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--blue-medium) !important;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.category-news-element-img-wrapper { border-radius: var(--radius-md); }
.category-news-element-img-wrapper .category-news-element-img img { border-radius: var(--radius-md); }
.category-news-element-title { font-weight: 800; }
.category-news-element-title-2 {
  border-top: none;
  border-left: 4px solid var(--blue-medium);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--blue-pale);
}

/* small clock icons next to dates — tint them brand-blue everywhere
   instead of leaving them plain black, ties news/events/contact lists
   together visually */
.glyphicon-time { color: var(--blue-soft); }

/* "view all" link under the news list — make it read as a real button,
   not a leftover plain text link */
div.red-color[align="right"] > a {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--blue-primary);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
div.red-color[align="right"] > a:hover { background: var(--blue-primary); color: var(--white); }

/* right sidebar (video + events) becomes one solid panel, not a list of
   floating boxes — gives the page a clear two-block composition */
.mainpage-right-column {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.category-events-element-title, .category-events-element-title a { color: var(--blue-primary) !important; font-weight: 700; }
.category-events-element-title { display: block; margin-bottom: 4px; }
.category-events-element-text { margin-top: 6px; font-size: 14px; }
.category-events-element .glyphicon-time { color: var(--blue-soft); margin-right: 4px; }
.category-events-block { padding: 4px 0; }

/* the date badge and the title/excerpt sit in two separate Bootstrap
   columns with no vertical alignment between them — flex the row that
   holds them so the badge is centered next to the text, and move the
   divider line onto the row itself so it spans the full width instead
   of stopping under the text column only */
.row:has(> .col-md-3 > .category-events-time) {
  display: flex;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  border-bottom: 1px solid var(--gray);
  padding: 10px 0;
}
article:last-child > .row:has(> .col-md-3 > .category-events-time) { border-bottom: none; }

.category-events-time {
  position: relative;
  width: 78px;
  height: 86px;
  margin: 0 auto !important;
  padding: 36px 0 0 0 !important;
  background: none !important;
  filter: drop-shadow(0 4px 10px rgba(11, 62, 156, 0.18));
}
.category-events-time::before {
  content: "" !important;
  background: url(../calendar_blue.png) no-repeat center / 100% 100% !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
.category-events-month {
  color: var(--blue-primary) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.category-events-day {
  color: var(--blue-deep) !important;
  font-weight: 800;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.category-standart-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--blue-medium);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  overflow: hidden;
}

img.faculty-leader + h3 {
  color: var(--blue-primary);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 4px;
}

.category-standart-block img,
.col-category-vstup-image img,
.rektorat-photo-img,
.faculty-leader,
.category-video-block,
.ogoloshenya_thumbnail img,
.right-faculty-menu-news-element img,
.right-faculty-menu-news-elements img {
  border: none !important;
  padding: 0 !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}
.news-wrapper img { box-shadow: var(--shadow-lg); border-radius: var(--radius-md); }
.categories-design h3 { color: var(--blue-primary) !important; border-top: none; border-bottom: 3px solid var(--blue-pale); }

.facult-right-column-design,
.faculty-main-person,
.p-text-size h1,
.mainpage-right-column h3,
.not-homepage .mainpage-right-column a h3 {
  background: var(--blue-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
  padding: 14px !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.my-bread a, .col-category-vstup a:active, .col-category-vstup a:focus { color: var(--blue-primary); }
.p-text-size table { border-color: var(--gray) !important; border-radius: var(--radius-sm); }

.search-result-tag {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--blue-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-left: 8px;
  vertical-align: middle;
}

.p-text-size > i.fa, .p-text-size p > a > i.fa, .p-text-size p > i.fa,
.p-text-size .glyphicon { color: var(--blue-primary); }

.ui-tabs-nav, .tabs-nav-items { background: var(--white-soft) !important; border: none !important; }
.ui-tabs-nav .ui-state-active, .ui-tabs-nav .ui-tabs-active { background: var(--blue-primary) !important; }
.ui-tabs-nav .ui-state-active a, .ui-tabs-nav .ui-tabs-active a { color: var(--white) !important; }
.ui-tabs-panel, .tabs-flat .tabs-content { background: var(--white) !important; }

.translate-button {
  background: var(--blue-primary);
  border-radius: var(--radius-full);
  padding: 12px 28px;
  font-weight: 600;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}
.translate-button:hover { background: var(--blue-medium); }

.wp-pagenavi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
  border: none;
  border-radius: var(--radius-full);
  background: var(--blue-primary);
  padding: 6px 14px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.wp-pagenavi a:hover { border: none; background: var(--blue-medium); }
.wp-pagenavi a:active { border: 1px solid var(--blue-medium); color: var(--blue-medium); background: var(--white); }
.wp-pagenavi span.current { border: none; background: var(--blue-deep); color: var(--white); border-radius: var(--radius-full); padding: 6px 14px; }
.wp-pagenavi span.pages, .wp-pagenavi span.extend { border: none; background: var(--gray-light); color: var(--gray-text); border-radius: var(--radius-full); padding: 6px 14px; }

@media (min-width: 1024px) {
  #main-page-slider { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); margin: 18px 0 28px; }
}
.slider .prev { background-image: url(../img/arrow-left.png); background-color: var(--blue-primary); }
.slider .next { background-image: url(../img/arrow-right.png); background-color: var(--blue-primary); }


.bottom-menu-wrapper { background: var(--white) !important; padding-top: 36px; padding-bottom: 16px; }
.bottom-menu li a { color: var(--blue-primary); }
.bottom-menu li ul li a { color: var(--gray-text); }
.bottom-menu li ul li a:hover { color: var(--blue-medium); }

.footer-button-list a, .footer-button-list-2 a {
  background: var(--blue-pale);
  color: var(--blue-primary);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  padding-left: 20px !important;
  box-shadow: var(--shadow-xs);
}
.footer-button-list a .glyphicon, .footer-button-list-2 a .glyphicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--blue-primary);
  margin-right: 10px;
  font-size: 13px;
}
.footer-button-list a:hover .glyphicon, .footer-button-list-2 a:hover .glyphicon {
  background: var(--blue-deep);
  color: var(--white);
}
.footer-button-list a:hover, .footer-button-list-2 a:hover { background: var(--blue-primary); color: var(--white); }

.adaptive-footer-wrapper.red-background { background: var(--blue-deep); }
.adaptive-footer-wrapper .footer-row { padding-top: 48px; padding-bottom: 48px; }
.footer-logo { font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: 0.5px; }
.footer-logo a { color: var(--blue-soft); }
.under-bottom-menu li a { font-weight: 500; opacity: 0.9; }
.under-bottom-menu li a:hover { color: var(--blue-soft); opacity: 1; }
.footer-col-row-2 { opacity: 0.85; line-height: 1.8; }
.footer-col-row-2 a { color: var(--blue-soft) !important; }


.error404-row .page-header {
  background: var(--header-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 28px 24px;
  margin-bottom: 20px;
}
.error404-row .page-header .page-title,
.error404-row .page-header h3 { color: var(--white) !important; margin: 0; }
.error404-row .page-header h3 { margin-top: 8px; font-weight: 500; opacity: 0.9; }
.error404-row ul { margin: 14px 0; padding-left: 22px; }
.error404-row .error-search-box { margin: 22px 0; max-width: 420px; }

.my-bread { font-size: 14px; color: var(--gray-dark); padding: 8px 0; }
.my-bread a { font-weight: 600; }


.p-text-size > h1:first-child {
  font-weight: 800;
  margin-bottom: 12px;
}

/* search page, zero results */
.search-no-results {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: var(--gray-text);
}
.search-no-results .glyphicon {
  display: block;
  color: var(--blue-primary);
  font-size: 28px;
  margin-bottom: 12px;
}
.search-no-results a { color: var(--blue-primary); font-weight: 600; }

@media (max-width: 768px) {
  .header-line .logotype { gap: 12px; }
  .category-news-element { padding: 10px; }
  .footer-button-list a, .footer-button-list-2 a { padding-top: 12px; padding-bottom: 12px; }
  .adaptive-footer-wrapper .footer-row { padding-top: 32px; padding-bottom: 32px; }
  .homepage h2 { font-size: 22px; }
}