/*  ============================
 *   CREATIVE COMMONS INDONESIA
 *   v 1.01
 *  ============================
 *
 *   Copyright 2022-2023 CCID
 *     by Joaquim Baeta
 *     <mail@joaquimbaeta.com>
 *
 *  ============================ */

:root {
  --ccid-red-96: #fbeeeeff; /* Navbar text hover */
  --ccid-red-91: #f6dadaff; /* Image and other shadows */
  --ccid-red-86: #f2c5c5ff; /* Navbar text, footer text, image border */
  --ccid-red-81: #edb0b0ff; /* Links */
  --ccid-red-76: #e89b9bff; /* Footer license text, hr */
  --ccid-red-71: #e48686ff; /* Article meta icons, list markers */
  --ccid-red-66: #df7272ff;
  --ccid-red-61: #da5d5dff; /* Icons in footer */
  --ccid-red-56: #d54949ff;
  --ccid-red-51: #d03434ff;
  --ccid-red-46: #bf2b2bff;
  --ccid-red-41: #aa2727ff; /* Footer link decoration */
  --ccid-red-36: #962222ff; /* Default red, navbar bg */
  --ccid-red-31: #7f1d1dff; /* Main footer */
  --ccid-red-26: #6e1919ff; /* Footer license bg */
  --ccid-red-21: #571414ff; /* Dropdown menu hover background */
  --ccid-red-16: #430f0fff; /* Dropdown menu active item */
  --ccid-red-11: #2e0a0aff;
  --ccid-red-06: #1a0505ff;
  --ccid-greyred-76: #4a3d40ff;
  --ccid-greyred-86: #4c4649ff;
  --ccid-greyred-96: #514e50ff; /* Active breadcrumb, highlighted article meta text, figure caption */
  --font-body: 'Sen', system-ui, -apple-system, sans-serif;
  --font-headings: 'Jost', 'Sen', system-ui, -apple-system, sans-serif;
}

/* Color */

.bg-ccid-red-36 {
  background-color: var(--ccid-red-36) !important;
}

.bg-ccid-red-31 {
  background-color: var(--ccid-red-31);
}

.bg-ccid-red-26 {
  background-color: var(--ccid-red-26);
}

/* Typography */

body {
  font-family: var(--font-body);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, .breadcrumb, .article-meta {
  font-family: var(--font-headings);
  font-weight: 400;
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2rem;
  }

  h2, .h2 {
    font-size: 1.8rem;
  }

  h3, .h3 {
    font-size: 1.6rem;
  }

  h4, .h4 {
    font-size: 1.4rem;
  }
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .h6 {
  font-size: 1rem;
}

main a {
  color: var(--bs-body-color-rgb);
  text-decoration: none;
  background-image: linear-gradient(120deg, var(--ccid-red-81) 0%, var(--ccid-red-81) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.3rem;
  background-position: 0 100%;
  transition: background-size 0.2s ease-in-out;
}

main a:hover, h3 a:hover, h5 a:hover {
  color: var(--bs-body-color-rgb);
  background-size: 100% 100%;
}

h3 a, h5 a {
  color: var(--ccid-red-36);
  text-decoration: none;
  background-image: linear-gradient(120deg, var(--ccid-red-91) 0%, var(--ccid-red-91) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0rem;
  background-position: 0 100%;
  transition: background-size 0.2s ease-in-out;
}

h3 a:hover, h5 a:hover {
  color: var(--ccid-red-36);
  background-size: 100% 0.3rem;
}

.author-profile a, .ccid-people h5 a, .article-meta a {
  color: var(--ccid-red-56);
  text-decoration: none;
  background-image: none;
  transition: 0.2s ease-in-out;
}

.author-profile a:hover, .ccid-people h5 a:hover, .article-meta a:hover {
  color: var(--ccid-red-46);
}

main ul {
  padding-left: 20px;
}

main ul li::marker {
  font-family: "Font Awesome 6 Free";
  content: "\f30b";
  font-weight: 900;
  color: var(--ccid-red-71);
}

main ol {
  padding-left: 20px;
}

main ol li::marker {
  font-weight: 700;
  color: var(--ccid-red-71);
}

main li {
  padding-left: 10px;
}

/* Navbar */

.navbar {
  font-family: var(--font-headings);
  background-color: var(--ccid-red-36);
  border-bottom: 5px solid var(--ccid-red-86);
}

.navbar a {
  color: var(--ccid-red-86);
}

.navbar a:hover {
  color: var(--ccid-red-96);
}

.navbar .dropdown-toggle.show {
  color: var(--ccid-red-96);
}

.navbar .dropdown-menu {
  border-radius: 0;
  border: 0;
  --bs-dropdown-link-hover-bg: var(--ccid-red-21);
  box-shadow: 6px 5.5px 0px -0.5px #eb7f7f78;
}

.navbar .dropdown-menu .dropdown-item:active {
  background-color: var(--ccid-red-16);
}

/* Breadcrumbs */

.breadcrumb-item a {
  text-decoration: none;
  color: var(--ccid-red-36); 
}

.breadcrumb-item.active {
  color: var(--ccid-greyred-96);
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 6 Free";
    content: "\f105";
    font-weight: 900;
    color: var(--ccid-red-86);
}

@media (max-width: 991.98px) {
  .breadcrumb > li + li + li {
    display: none;
  }
}

/* Images, figures */

main img, .border-shadow, figure iframe {
  background: var(--ccid-red-96);
  border: 1px solid;
  border-color: var(--ccid-red-86);
  box-shadow: 7px 7px 0px -2px var(--ccid-red-91);
}

.figure-img {
  margin-bottom: 0;
}

.figure-caption {
  text-align: center;
  color: var(--ccid-greyred-96);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.figure-group {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 575px) {
  .figure-group {
    flex-direction: column;
  }
}

.borderless {
  box-shadow: none;
  border: 0;
  background: transparent;
}

/* Footer  */

footer {
  font-family: var(--font-headings);
  background-color: var(--ccid-red-31);
}

footer h5 {
  color: var(--ccid-red-61);
  margin-left: -1.5rem;
}

footer .fa-li i {
  color: var(--ccid-red-51);
}

footer li {
  color: var(--ccid-red-86);
}

footer li b {
  font-weight: 400;
}

footer li a {
  text-decoration: none;
}

footer li a {
  color: var(--ccid-red-86);
  text-decoration: none;
  background-image: linear-gradient(120deg, #aa2727ff 0%, #aa2727ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.1rem;
  background-position: 0 100%;
  transition: background-size 0.2s ease-in-out;
}

footer li a:hover {
  color: var(--ccid-red-86);
  background-size: 100% 100%;
}

.footer-license {
  background-color: var(--ccid-red-26); 
}

.footer-license p {
  color: var(--ccid-red-76);
}

.footer-license a {
  color: var(--ccid-red-76);
  text-decoration: none;
  background-image: linear-gradient(120deg, #aa2727ff 0%, #aa2727ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.1rem;
  background-position: 0 100%;
  transition: background-size 0.2s ease-in-out;
}

.footer-license a:hover {
  color: var(--ccid-red-76);
  background-size: 100% 100%;
}

/* Buttons  */

.btn {
  font-family: var(--font-headings) !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ccid-red-36);
  --bs-btn-border-color: var(--ccid-red-36);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ccid-red-41);
  --bs-btn-hover-border-color: var(--ccid-red-41);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ccid-red-31);
  --bs-btn-active-border-color: var(--ccid-red-31);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-outline-primary {
  --bs-btn-color: var(--ccid-red-36) !important;
  --bs-btn-border-color: var(--ccid-red-36) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--ccid-red-36) !important;
  --bs-btn-hover-border-color: var(--ccid-red-36) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--ccid-red-36) !important;
  --bs-btn-active-border-color: var(--ccid-red-36) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: #0d6efd !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: #0d6efd !important;
  --bs-gradient: none !important;
}

/* Badges */

.badge {
  font-family: var(--font-headings);
  font-weight: 400;
  padding: 0.5rem 0.8rem;
  border-radius: 0;
}

/* Index page */

.index-page .navbar {
  border: none;
  box-shadow: 0px 5px 0px 0px #eb7f7f78;
}

.index-jumbotron {
  border-bottom: 5px solid var(--ccid-red-91);
}

.index-jumbotron .bg-dark {
  background-color: rgba(33,35,41,0.75) !important;
 }

.highlighted-article {
  box-shadow: 0px 0px 50px 5px rgba(0,0,0,0.5);
}

.highlighted-article .article-meta {
  color: var(--ccid-greyred-96);
}

.article-type {
  color: #fff;
  background-color: var(--ccid-red-36);
  padding: 1rem;
}

.index-page .author-profile {
  display: flex;
  align-items: center;
}

.index-page .author-profile img {
  width: auto;
  height: 56px;
  margin-right: 0.5rem;
}

@media (max-width: 575px) {
  .article-type {
    padding: 0.756rem;
  }

  .index-page .author-profile {
    font-size: 0.95rem;
  }

  .index-page .author-profile img {
    height: 47px;
  }
}

@media (max-width: 345px) {
  .article-type {
    display: none;
  }
}

.highlighted-article-image {
  padding: 0;
}

.highlighted-article-image {
  background-image: radial-gradient(#514e50ff, #571414ff);
  overflow: hidden;
}

.index-card > .h-100 {
  box-shadow: inset 0px 0px 100px 25px #000;
}

.index-card .text-bg-dark {
  background-color: rgba(33,35,41,0.9) !important;
}

.index-card h2 {
  color: var(--ccid-red-56);
  text-align: center;
  margin-bottom: 1.5rem !important;
}

.article-list .article-img img, #paginated-list .article-img img {
  background-size: cover;
  object-fit: cover;
  object-position: center;
  width: 100%;
  min-height: 100%;
}

@media (max-width: 767px) {
  .article-list .btn {
    margin-bottom: 0.5rem;
  }
}

.article-list h5 a, #paginated-list h5 a {
  color: var(--bs-body-color);
}

.highlighted-article-image img {
  background-size: cover;
  opacity: 0.75;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  object-fit: cover;
  object-position: center;
  width: 100%;
  min-height: 100%;
}

.highlighted-article-image img:hover {
  opacity: 1;
}

.index-page .badge {
  left: calc(var(--bs-gutter-x) * 0.5) !important;
}

.index-title {
  background: var(--ccid-red-56);
/*  border-bottom: 5px solid var(--ccid-red-91);*/
}

.index-title h1 {
/*  font-size: 2rem;*/
  font-weight: 400;
  color: var(--ccid-red-91);
  margin-bottom: 0;
}

.index-title h1 i {
  color: var(--ccid-red-91);
/*  font-weight: 400;*/
/*  text-align: center;*/
  text-shadow: 4px 4px var(--ccid-red-66);
}

.sobatccid .index-card .text-bg-dark {
  background-color: rgba(33,35,41,0.875) !important;
  transition: 0.3s ease-in-out;
}

.sobatccid .index-card .text-bg-dark:hover {
  background-color: rgba(33,35,41,0.95) !important;
}

.sobatccid .index-card > .h-100 {
  box-shadow: none
}

/* Section pages */

.section-title {
  color: var(--ccid-red-56);
}

.section-title i {
  color: var(--ccid-red-91);
  text-shadow: 4px 4px var(--ccid-red-66);
}

/* Articles */

.article-author, .article-meta .fa-solid {
  color: var(--ccid-red-71);
}

.article h4, .article .h4, .article h3, .article .h3, .article h2, .article .h2 {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

/* CCID people */

.author-profile img {
  width: 52px;
  margin-right: 1.5rem;
}

@media (max-width: 409px) {
  .author-profile img {
    width: 55px;
    margin-right: 1.25rem;
  }
}

.ccid-people .badge {
  position: relative;
  z-index: 999;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  padding: 0 20px 0 0;
}

.progress {
  height: 2px;
  background: var(--ccid-red-91);
  z-index: -999;
}

.progress-bar {
  background: var(--ccid-red-76);
}

.ccid-people .progress {
  margin-top: -1.4rem;
}

/* Utilities */

@media (min-width: 576px) {
  .w-sm-20 {
    width: 20% !important;
  }

  .w-sm-24 {
    width: 24% !important;
  }

  .w-sm-25 {
    width: 24% !important;
  }

  .w-sm-30 {
    width: 30%;
  }

  .w-sm-31 {
    width: 31%;
  }

  .w-sm-32 {
    width: 32%;
  }

  .w-sm-35 {
    width: 35%;
  }

  .w-sm-50 {
    width: 50%;
  }

  .w-sm-60 {
    width: 60% !important;
  }

  .w-sm-64 {
    width: 64% !important;
  }

  .w-sm-65 {
    width: 65% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .w-md-20 {
    width: 20% !important;
  }

  .w-md-24 {
    width: 24% !important;
  }

  .w-md-30 {
    width: 30% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-64 {
    width: 64% !important;
  }

}

/* Article end */

.article-end {
  background: url('/prx/000/https/creativecommons.or.id/assets/img/article-end.svg') no-repeat center;
  height: 200px;
}

/* Pagination */

.hidden {
  display: none;
}

ul#paginated-list {
  list-style-type: none;
  padding-left: 2px;
}

ul#paginated-list li::marker {
    content: "";
}

.pagination-container {
  font-family: var(--font-headings);
  display: flex;
  align-items: center;
  bottom: 0;
  padding: 1rem 0;
  justify-content: center;
}

.pagination-number, .pagination-button {
  font-size: 0.9rem;
  background-color: transparent;
  border: none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  transition: 0.2s ease-in-out;
}

.pagination-number:hover, .pagination-button:not(.disabled):hover {
  background: var(--ccid-red-96);
}

.pagination-number.active {
  color: var(--bs-body-color-rgb);
  background: var(--ccid-red-91);
}

/* Blockquote */

.blockquote {
  font-size: 1.15rem;
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.blockquote::before {
  content: "\201C";
  font-size: 10rem;
  position: absolute;
  margin-left: -25px;
  margin-top: -60px;
  color: var(--ccid-red-91);
  z-index: -1;
}

.blockquote-footer {
  color: var(--ccid-greyred-96);
  margin-top: 0rem;
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

hr {
  margin: 2rem 0;
  border-top: 2px solid var(--ccid-red-76);
}

/* Carousels  */

.carousel {
  box-shadow: 7px 7px 0px -2px var(--ccid-red-91);
}

.carousel-caption {
  bottom: 1rem;
  color: var(--ccid-greyred-96);
  background-color: #ffffff;
  border: 1px solid var(--ccid-red-86);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.carousel-caption p {
  font-size: 0.9rem;
  margin-bottom: 0;
}