#root,
:root {
  --pe-white: #fff;
  --pe-border: #eaeaea;
  --pe-border-muted: #e4e4e4;
  --pe-divider: #ccc;
  --pe-text-muted: #666666;
  /* --bs-primary: #28998b; */
  --pe-accent: var(--bs-primary, #28998b); /* fallback if Bootstrap var not present */
  --pe-tag-bg: var(--bs-primary, #a0bc9f);
  --pe-radius-md: 6px;
  --pe-transition-fast: 0.3s;
  --pe-transition-base: 0.5s;
  --pe-transition-slow: 1s;
  --pe-ease-standard: ease;
}

/* Dark mode overrides (Bootstrap 5: html[data-bs-theme="dark"]) */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] #root {
  /* Borders and dividers */
  --pe-border: var(--bs-border-color, #2f3338);
  --pe-border-muted: #3a3f44;
  --pe-divider: #3a3f44;

  /* Text */
  --pe-text-muted: var(--bs-secondary-color, #adb5bd);

  /* Accents */
  --pe-accent: var(--bs-primary, #28998b);
  --pe-tag-bg: var(--bs-primary, #2e6f65);
}

/* Dark surfaces for components that used --pe-white backgrounds */
html[data-bs-theme="dark"] #custom-search-input {
  background-color: var(--bs-body-bg, #121212);
}

html[data-bs-theme="dark"] .news {
  background: var(--bs-body-bg, #121212);
}

html[data-bs-theme="dark"] .news .title {
  background: var(--bs-body-bg, #121212);
}


#custom-search-input {
  padding: 3px;
  border: solid 1px var(--pe-border-muted);
  border-radius: var(--pe-radius-md);
  background-color: var(--bs-body-bg, var(--pe-white));
}

#custom-search-input input {
  border: 0;
  box-shadow: none;
}

#custom-search-input button {
  margin: 2px 0 0 0;
  background: none;
  box-shadow: none;
  border: 0;
  color: var(--pe-text-muted);
  padding: 0 8px 0 10px;
  border-left: solid 1px var(--pe-divider);
}

#custom-search-input button:hover {
  border: 0;
  box-shadow: none;
  border-left: solid 1px var(--pe-divider);
}

#custom-search-input .glyphicon-search {
  font-size: 23px;
}
div.list-group a.list-group-item h2 {
  font-size: 18px !important;
}

.news {
  background: var(--bs-body-bg, var(--pe-white));
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all var(--pe-transition-base) var(--pe-ease-standard);

  border: 1px solid var(--pe-border);
}

.news .img-figure {
  position: relative;
}

.news .img-figure img {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--pe-transition-slow) var(--pe-ease-standard);
}

.news:hover .img-figure img {
  transform: scale(1.1);
}

.news .title {
  /*padding: 29px 30px;*/
  padding: 45px 30px;
  position: absolute;
  left: 0;
  background: var(--bs-body-bg, var(--pe-white));
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform var(--pe-transition-base) var(--pe-ease-standard);
  transform: translateY(0);
}

.news .title h2 {
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 19px !important;
  /*  color: #3D6AA2;*/
  text-align: center;
}

.news:hover .title {
  transform: translateY(-90px);
}

.news p.description {
  position: relative;
  font-weight: normal;
  line-height: 22px;
  opacity: 0;

  text-align: center;

  padding: 15px 30px 0px 30px;

  transition: opacity var(--pe-transition-base) var(--pe-ease-standard);
}

.news:hover p.description {
  opacity: 1;
}

p.more {
  text-align: center;
}

.more a {
  position: relative;
  font-size: 13px;
  margin-top: 30px;
  display: inline-block;
  transition: all var(--pe-transition-base) var(--pe-ease-standard);
  color: var(--bs-primary, var(--pe-accent));
}

.more a:after {
  content: "";
  width: 18px;
  height: 1px;
  position: absolute;
  left: 55px;
  top: 9px;
  background: var(--bs-primary, var(--pe-accent));
  vertical-align: middle;
  margin-left: 30px;
  transition: all var(--pe-transition-base) var(--pe-ease-standard);
}

.news:hover a:after {
  width: 30px;
}

.cat {
  background: var(--pe-tag-bg);
  color: var(--bs-btn-color, var(--pe-white));
  text-transform: uppercase;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 1;
  padding: 3px 15px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}