/**
 * Cassiopeia GaP – child template styles
 *
 * Re-creates the look of the former Artisteer template "GaP3" (Joomla 3)
 * on top of Cassiopeia. Loaded automatically by Cassiopeia via the
 * "template.user" web asset; no template PHP is overridden.
 */

:root {
  --gap-page-bg: #979b8c;
  --gap-sheet-border: #7c806f;
  --gap-text: #373932;
  --gap-heading: #5a905f;
  --gap-heading-sub: #7f9f82;
  --gap-nav-bg: rgba(42, 55, 43, .5);
  --gap-nav-border: rgba(151, 155, 140, .2);
  --gap-nav-hover-bg: #5e7d61;
  --gap-nav-hover-text: #e6efe7;
  --gap-nav-active-bg: #49744c;
  --gap-nav-active-text: #bfcfc0;
  --gap-post-bg: rgba(226, 233, 227, .9);
  --gap-block-bg: #dfe7e0;
  --gap-footer-bg: #d8d9d3;
  --gap-footer-text: #2f312b;
  --gap-footer-link: #416844;
  --gap-serif: "Times New Roman", Georgia, Times, serif;
  --gap-sans: Arial, "Arial Unicode MS", Helvetica, sans-serif;
  --gap-sheet-width: 1000px;

  --cassiopeia-color-primary: #49744c;
  --cassiopeia-color-hover: #5e7d61;
  --cassiopeia-color-link: #5a905f;
  --link-color: #5a905f;
  --link-color-rgb: 90, 144, 95;
  --link-hover-color: #359c3e;
  --link-hover-color-rgb: 53, 156, 62;
  --body-color: var(--gap-text);
  --body-font-family: var(--gap-sans);
  --body-font-size: .875rem;
  --heading-color: var(--gap-heading);
}

/* Page background with the wave strip at the bottom */
body.site {
  letter-spacing: 1px;
  background: var(--gap-page-bg) url("../images/page.png") left bottom repeat-x fixed;
}

/* ------------------------------------------------------------------ */
/* The "sheet": header, content grid and footer form one framed card  */
/* ------------------------------------------------------------------ */
.site > .container-header,
.site > .site-grid,
.site > .container-footer {
  width: min(var(--gap-sheet-width), calc(100% - 2rem));
  margin-inline: auto;
  padding-inline: 3px;
  background: #fff url("../images/sheet.png");
  border-inline: 1px solid var(--gap-sheet-border);
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15);
  clip-path: inset(-10px -10px 0 -10px);
}

.site > .container-header {
  margin-top: 30px;
  padding-top: 3px;
  border-top: 1px solid var(--gap-sheet-border);
  border-radius: 15px 15px 0 0;
}

.site > .site-grid {
  clip-path: inset(0 -10px);
  padding-block: 4px;
  grid-template-columns: [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
  column-gap: 8px;
}

.site > .container-footer {
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gap-sheet-border);
  border-radius: 0 0 15px 15px;
  clip-path: inset(0 -10px -10px -10px);
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.container-header .grid-child {
  max-width: none;
  padding: 0;
}

.container-header > .grid-child:has(.navbar-brand) {
  min-height: 100px;
  align-items: center;
  padding: 0 2.5rem;
  background: #5c9361 url("../images/header.jpg") left top / cover no-repeat;
  border-radius: 11px;
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: #eef2ee;
  font-family: var(--gap-serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
}

.container-header .navbar-brand:hover a,
.container-header .navbar-brand a:focus {
  color: #fff;
}

.container-header .site-description {
  color: #ebf0eb;
  font-family: var(--gap-sans);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Navigation bar */
.container-header .container-nav {
  justify-content: center;
  margin-top: 3px;
  padding: 4px;
  background: var(--gap-nav-bg);
  border: 1px dotted var(--gap-nav-border);
  border-bottom: 3px solid var(--gap-nav-border);
  border-radius: 11px;
}

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

.container-header .mod-menu {
  justify-content: center;
}

.container-header .metismenu.mod-menu .metismenu-item {
  padding: 0;
  font-size: inherit;
}

.container-header .metismenu > li + li {
  margin-left: 2px;
}

.container-header .metismenu > li > a {
  display: block;
  padding: 0 15px;
  line-height: 33px;
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
}

.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus-visible {
  color: var(--gap-nav-hover-text);
  background: var(--gap-nav-hover-bg);
}

.container-header .metismenu > li.active > a,
.container-header .metismenu > li.current > a {
  color: var(--gap-nav-active-text);
  background: var(--gap-nav-active-bg);
}

/* Cassiopeia's underline effect does not fit the pill style */
.container-header .metismenu > li > a::after {
  display: none;
}

.container-header .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--gap-serif);
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--gap-heading);
}

h3, .h3 {
  color: var(--gap-heading-sub);
}

.page-header h1,
.page-header h2,
.item-title {
  color: var(--gap-heading);
  font-size: 1.75rem;
}

.page-header h1 a,
.page-header h2 a,
.item-title a {
  color: inherit;
  text-decoration: none;
}

a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Content panel ("art-post") and sidebar cards ("art-block")          */
/* ------------------------------------------------------------------ */
.container-component > main {
  padding: 5px 15px 15px;
  background: var(--gap-post-bg);
  border-radius: 6px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, .18);
}

.container-sidebar-left .card,
.container-sidebar-right .card,
.container-top-a .card,
.container-top-b .card,
.container-bottom-a .card,
.container-bottom-b .card,
.container-component .card {
  --card-bg: var(--gap-block-bg);
  --card-border-color: transparent;
  --card-cap-bg: transparent;
  border-radius: 6px;
  font-size: .8125rem;
  color: #35372f;
}

.card-header {
  padding-left: 32px;
  font-family: var(--gap-serif);
  font-size: 1rem;
  letter-spacing: 1px;
  color: #000;
  background: url("../images/blockheadericon.png") 12px center no-repeat;
  border-bottom: 0;
}

/* Blog / featured listings */
.blog-item + .blog-item,
.blog-featured .blog-item {
  border-top: 1px solid #b0b3a8;
}

.readmore .btn,
.btn-secondary {
  color: var(--gap-text);
  background: transparent;
  border: 1px solid #445a46;
  border-radius: 6px;
}

.readmore .btn:hover,
.btn-secondary:hover {
  color: #fff;
  background: #5c9361;
  border-color: #445a46;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.footer {
  color: var(--gap-footer-text);
  background-color: #fff;
  background-image: url("../images/sheet.png");
}

.footer .grid-child {
  justify-content: center;
  max-width: none;
  padding: 10px;
  font-size: .75rem;
  letter-spacing: 1px;
  text-align: center;
  background: var(--gap-footer-bg) url("../images/footer.png");
  border-radius: 11px;
}

.footer a:not(.btn) {
  color: var(--gap-footer-link);
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus {
  color: var(--gap-footer-text);
}

.footer p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */
@media (width <= 991.98px) {
  .container-header .container-nav {
    justify-content: flex-end;
  }

  .container-header .metismenu > li + li {
    margin-left: 0;
  }

  .container-header .metismenu > li > a {
    color: #fff;
  }
}

@media (width <= 575.98px) {
  .site > .container-header {
    margin-top: 1rem;
  }

  .container-header > .grid-child:has(.navbar-brand) {
    padding: 1rem;
  }

  .container-header .navbar-brand,
  .container-header .navbar-brand a {
    font-size: 1.5rem;
  }
}