/**
 * Theme Name:        Preview thema
 * Theme URI:         https://example.com/mytheme
 * Description:       Thema voor het previewen van de ParkApp.
 * Version:           1.0.0
 * Author:            Dinan
 * Author URI:        https://example.com
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       previewtheme
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/*
    If this theme depends on another theme: Template: parenttheme
 */


* {
  color: var(--wp--preset--color--pat-text-default);
}

:root {
  --font-regular: "Avenir Regular", Arial, sans-serif;
  --font-black: "Avenir Black", Arial, sans-serif;
}

body {
  font-family: var(--font-regular) !important;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-black) !important;
}

.backBtn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--wp--preset--color--pat-background-contrast);
  padding: 0.2rem;
  z-index: 20;
  border-radius: 1rem;
}

.backBtn svg {
  fill: var(--wp--preset--color--pat-text-alternative);
}
.appContainer {
  position: relative;
  overflow: hidden;
  max-width: 576px;
  margin: 2rem auto;
  background: var(--wp--preset--color--pat-default);
  /* border: 0.5rem solid var(--wp--preset--color--primary); */
  border-radius: 1rem;
  /* padding: 1rem; */
  min-height: 100dvh;
  box-sizing: border-box;
  /*padding: 0px 0px 6rem 0px;*/
}

body {
  background-image: var(--wp--preset--gradient--preview-background);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 576px) {
  .appContainer {
    margin: 0px auto;
  }
}

.nav-item {
  margin: 0.5rem;
  border-radius: 0.5rem;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  color: var(--wp--preset--color--pat-text-alternative) !important;
  fill: var(--wp--preset--color--pat-text-alternative) !important;
}
.nav-icon svg path {
  color: var(--wp--preset--color--pat-background-contrast) !important;
  fill: var(--wp--preset--color--pat-background-contrast) !important;
}
.nav-link span {
  color: var(--wp--preset--color--pat-background-contrast);
}
.nav-link:active .nav-icon {
  color: var(--wp--preset--color--pat-default);
}

/*.nav-link:active {
  background-color: var(--wp--preset--color--pat-active) !important;
}*/

#mobileNavBar {
  background-color: var(--wp--preset--color--pat-default);
}
/*.activeNavLink {
  background-color: var(--wp--preset--color--pat-active) !important;
  border-radius: 0.5rem;
}*/

.activeNavLink span {
  color: var(--wp--preset--color--pat-active) !important;
}

.activeNavLink .nav-icon svg {
  width: 100%;
  height: 100%;
  color: var(--wp--preset--color--pat-active) !important;
  fill: var(--wp--preset--color--pat-active) !important;
}
.activeNavLink .nav-icon svg path {
  color: var(--wp--preset--color--pat-active) !important;
  fill: var(--wp--preset--color--pat-active) !important;
}