/* =========================================
   HANNE B.'S BILLEDSPROG
   Cassiopeia – Joomla 6
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --hb-tekst: #344F5D;
  --hb-turkis: #5C9EAA;
  --hb-kant: #D6E3E7;
  --hb-header: #DCE9ED;
}

/* BAGGRUND */
html,
body,
.site-grid,
.container-component,
.container-main,
main {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* SKRIFTTYPE */
body {
  color: var(--hb-tekst);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
}

/* OVERSKRIFTER */
h1, h2, h3, h4, h5, h6,
.page-header,
.page-title {
  font-family: 'Raleway', sans-serif;
  color: var(--hb-tekst);
  font-weight: 400;
  line-height: 1.4;
}

/* HEADER */
.container-header {
  background: var(--hb-header);
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid var(--hb-kant);
}

.container-header .navbar-brand a {
  color: var(--hb-tekst);
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

.container-header .mod-menu,
.container-header .mod-menu a {
  font-family: 'Raleway', sans-serif;
  color: var(--hb-tekst);
  font-weight: 400;
}

.container-header .mod-menu a:hover {
  color: var(--hb-turkis);
}

/* LINKS */
a {
  color: #397D8C;
}

a:hover {
  color: var(--hb-turkis);
}

/* =========================================
   DIGTLISTE – KATEGORILISTE
   ========================================= */

.hb-digtliste .com-content-category__table {
  width: 100%;
  max-width: 600px;
  margin: 25px auto 35px;
  border: none !important;
  border-collapse: collapse;
  background: #ffffff !important;
}

.hb-digtliste .com-content-category__table tbody tr,
.hb-digtliste .com-content-category__table tbody tr:nth-child(odd),
.hb-digtliste .com-content-category__table tbody tr:nth-child(even),
.hb-digtliste .com-content-category__table tbody th,
.hb-digtliste .com-content-category__table tbody td {
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.hb-digtliste .com-content-category__table tbody th.list-title {
  border-bottom: 1px solid var(--hb-kant) !important;
}

.hb-digtliste .com-content-category__table tbody tr:first-child th.list-title {
  border-top: 1px solid var(--hb-kant) !important;
}

.hb-digtliste .com-content-category__table .list-title {
  padding: 16px 22px !important;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left !important;
}

.hb-digtliste .com-content-category__table .list-title a {
  display: block;
  color: var(--hb-tekst) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  text-align: left !important;
}

.hb-digtliste .com-content-category__table tbody tr:hover th.list-title {
  background: #f5fafb !important;
}

.hb-digtliste .com-content-category__table .list-title a:hover,
.hb-digtliste .com-content-category__table .list-title a:focus {
  color: var(--hb-turkis) !important;
}

/* =========================================
   ENKELTE DIGTE – TITEL, DATO OG TEKST
   ========================================= */

body.hb-digtliste.view-article .com-content-article .page-header,
body.hb-digtliste.view-article .com-content-article .article-info,
body.hb-digtliste.view-article .com-content-article__body {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* =========================================
   DIGTLISTE – BLADREFUNKTION
   ========================================= */

.hb-digtliste .com-content-category__navigation {
  margin: 35px auto 45px;
  max-width: 600px;
}

.hb-digtliste .pagination {
  gap: 5px;
}

.hb-digtliste .pagination .page-link {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--hb-tekst);
  background: #ffffff;
  border: 1px solid var(--hb-kant);
  border-radius: 5px;
  box-shadow: none;
  padding: 8px 12px;
}

.hb-digtliste .pagination .page-link:hover,
.hb-digtliste .pagination .page-link:focus {
  color: #ffffff;
  background: var(--hb-turkis);
  border-color: var(--hb-turkis);
}

.hb-digtliste .pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--hb-turkis);
  border-color: var(--hb-turkis);
}

.hb-digtliste .pagination .page-item.disabled .page-link {
  color: #91a5ae;
  background: #f7fafb;
  border-color: var(--hb-kant);
}

/* =========================================
   RS MEDIAGALLERY – ÅRGANGSGALLERIER
   ========================================= */

body.com_rsmediagallery
.rsmg-main-container ul.rsmg-albums {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 0;
  margin: 20px 0 40px;
  list-style: none;
  width: 100%;
}

body.com_rsmediagallery
.rsmg-albums > li {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.com_rsmediagallery
.rsmg-album-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.com_rsmediagallery
.rsmg-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: var(--hb-tekst);
}

/* =========================================
   RS MEDIAGALLERY – BILLEDKORT
   ========================================= */

body.com_rsmediagallery .rsmg-gallery .rsmg-item-container,
body.com_rsmediagallery .rsmg-gallery .rsmg-item-link,
body.com_rsmediagallery .rsmg-gallery .rsmg-item-thumb-container,
body.com_rsmediagallery .rsmg-gallery .rsmg-item-thumb,
body.com_rsmediagallery .rsmg-gallery .rsmg-item-body {
  box-shadow: none !important;
  border: none !important;
  background-color: #ffffff !important;
}

body.com_rsmediagallery .rsmg-gallery img {
  box-shadow: none !important;
  border: none !important;
}

body.com_rsmediagallery
.rsmg-gallery .rsmg-item-body h2.rsmg-item-title {
  font-family: 'Raleway', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--hb-tekst) !important;
  text-align: center !important;
  text-shadow: none !important;
  margin: 0 0 12px !important;
}

body.com_rsmediagallery
.rsmg-gallery .rsmg-item-description {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--hb-tekst) !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* =========================================
   RS MEDIAGALLERY – ÅBNEDE MALERIER
   ========================================= */

html body .rsmg-item-details,
html body .rsmg-details-container,
html body .rsmg-details-image,
html body .rsmg-details-body {
  box-shadow: none !important;
  border: none !important;
  background: #ffffff !important;
}

html body .rsmg-details-image img {
  box-shadow: none !important;
  border: none !important;
}

html body .rsmg-details-body h2.rsmg-details-title {
  font-family: 'Raleway', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--hb-tekst) !important;
  text-align: center !important;
  text-shadow: none !important;
  margin: 0 0 12px !important;
}

html body .rsmg-details-body .rsmg-details-description {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--hb-tekst) !important;
  text-align: center !important;
}

/* =========================================
   FORSIDE – MALERIER
   ========================================= */

.hb-forside-galleri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  width: 100%;
  max-width: 960px;
  margin: 30px auto 50px;
}

.hb-forside-galleri img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================
   KNAPPER
   ========================================= */

.hb-knap-omraade {
  text-align: center;
  margin: 35px 0 65px;
}

.hb-knap {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--hb-header);
  color: var(--hb-tekst);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--hb-kant);
  border-radius: 6px;
  transition: background-color 0.2s ease,
              color 0.2s ease;
}

.hb-knap:hover,
.hb-knap:focus {
  background-color: var(--hb-turkis);
  color: #ffffff;
  text-decoration: none;
}

.hb-forside-digt {
  width: 100%;
  max-width: 550px;
  margin: 0 auto 45px;
  text-align: left;
  color: var(--hb-tekst);
}

.hb-forside-digt p {
  text-align: left;
}

.hb-forside-digt h3 {
  font-size: 21px;
  font-weight: 400;
  margin-bottom: 25px;
}

/* =========================================
   FORSIDE – DIGTSAMLINGER
   ========================================= */

.hb-digtsamlinger {
  margin: 45px auto 65px;
}

.hb-digtsamlinger h2 {
  text-align: center;
  margin-bottom: 35px;
}

.hb-bog-galleri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  max-width: 720px;
  margin: 0 auto;
}

.hb-bog {
  text-align: center;
}

.hb-bog img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hb-bog h3 {
  font-size: 19px;
  font-weight: 400;
  margin-top: 15px;
}

/* =========================================
   FOOTER
   ========================================= */

.container-footer {
  background: var(--hb-header);
  background-image: none;
  color: var(--hb-tekst);
  border-top: 1px solid var(--hb-kant);
  padding: 30px 20px 22px;
}

.container-footer .grid-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.container-footer .grid-child > * {
  width: 100%;
  text-align: center;
}

.container-footer ul.hb-footer-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-footer ul.hb-footer-menu > li {
  display: block;
  width: auto !important;
  margin: 0;
  padding: 0;
}

.container-footer ul.hb-footer-menu a {
  display: inline-block;
  color: var(--hb-tekst);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.container-footer ul.hb-footer-menu a:hover,
.container-footer ul.hb-footer-menu a:focus {
  color: #397D8C;
  text-decoration: underline;
}

.container-footer p {
  color: var(--hb-tekst);
}

.container-footer a {
  color: var(--hb-tekst);
}

.container-footer a:hover,
.container-footer a:focus {
  color: #397D8C;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 992px) {

  body.com_rsmediagallery
  .rsmg-main-container ul.rsmg-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .hb-forside-galleri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* =========================================
   MOBIL
   ========================================= */

@media (max-width: 600px) {

  body {
    font-size: 15px;
  }

  .hb-digtliste .com-content-category__table .list-title {
    padding: 13px 12px !important;
    font-size: 16px;
  }

  .hb-digtliste .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  body.com_rsmediagallery
  .rsmg-main-container ul.rsmg-albums {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 420px;
  }

  .hb-forside-galleri {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 420px;
  }

  .hb-bog-galleri {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 320px;
  }

  .hb-forside-digt {
    max-width: 100%;
    padding: 0 12px;
  }

  .container-footer {
    padding: 25px 15px;
  }

  .container-footer ul.hb-footer-menu {
    gap: 8px 16px;
  }

  .container-footer ul.hb-footer-menu a {
    font-size: 13px;
  }
}