/* ----------------------------------------------------------------------------------- */
/* site styles with variables */
/* ----------------------------------------------------------------------------------- */
body, .site-header {
    background-color: var(--pf-page-background-color);
}

.site-content {
    font-family: var(--pf-page-font-key), var(--pf-page-font-type);
    font-size: var(--pf-page-font-size);
    color: var(--pf-page-text-color);
}

a, a:visited {
    color: var(--pf-link-color);
}

a:hover {
    color: var(--pf-link-hover-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pf-heading-color);
}

/* ----------------------------------------------------------------------------------- */
/* navigation */
/* ----------------------------------------------------------------------------------- */
.navigation a {
    color: var(--pf-navigation-item-color);
}

.navigation a.nav-item-selected {
    color: var(--pf-navigation-item-selected-color);
}

.navigation a:hover {
    color: var(--pf-navigation-item-hover-color);
}

/* ----------------------------------------------------------------------------------- */
/* smart menus */
/* ----------------------------------------------------------------------------------- */
.sm-clean,
.sm-clean a,
.sm-clean ul a {
    font-family: var(--pf-page-font-key), var(--pf-page-font-type);
    font-size: var(--pf-page-font-size);
    background-color: var(--pf-page-background-color);
    color: var(--pf-navigation-item-color);
}

.sm-clean a:hover,
.sm-clean a:focus,
.sm-clean a:active,
.sm-clean a.highlighted,
.sm-clean ul a:hover,
.sm-clean ul a:focus,
.sm-clean ul a:active,
.sm-clean ul a.highlighted {
    font-family: var(--pf-page-font-key), var(--pf-page-font-type);
    font-size: var(--pf-page-font-size);
    background-color: var(--pf-page-background-color);
    color: var(--pf-navigation-item-hover-color);
}

.sm-clean a.current,
.sm-clean ul a.current {
    font-family: var(--pf-page-font-key), var(--pf-page-font-type);
    font-size: var(--pf-page-font-size);
    background-color: var(--pf-page-background-color);
    color: var(--pf-navigation-item-selected-color);
}

/* ----------------------------------------------------------------------------------- */
/* Forms and validation */
/* ----------------------------------------------------------------------------------- */
.form-group input, .form-group textarea {
    border-color: var(--pf-input-border-color);
}

input.input-validation-error, select.input-validation-error, textarea.input-validation-error {
    color: var(--pf-validation-error-color);
    border-color: var(--pf-validation-error-border-color);
    background-color: var(--pf-validation-error-background-color);
}

.form-button {
    color: var(--pf-button-color);
    background-color: var(--pf-button-background-color);
    border-color: var(--pf-button-border-color);
    transition: background-color 0.2s ease;
}

.form-button:hover {
    background-color: var(--pf-button-hover-background-color);
}

.form-button:hover,
.form-button:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--pf-button-hover-background-color);
    transform: translateY(-0.12em);
}

.field-validation-error {
    color: var(--pf-validation-error-field-color);
}

/* ----------------------------------------------------------------------------------- */
/* External (social media) links */
/* ----------------------------------------------------------------------------------- */
.external-link-panel {
    color: var(--pf-external-link-svg-color);
    border-color: var(--pf-external-link-border-color);
    background-color: var(--pf-external-link-background-color);
    box-shadow: 0 0 8px var(--pf-box-shadow-color);
}

.external-link-panel:hover {
    color: var(--pf-external-link-svg-hover-color);
    border-color: var(--pf-external-link-hover-border-color);
    background-color: var(--pf-external-link-hover-background-color);
    box-shadow: none;
}

.external-link-panel a {
    color: inherit;
    background-color: inherit
}

.external-link-svg {
}

.external-link-svg:hover {
}

/* ----------------------------------------------------------------------------------- */
/* Gallery item */
/* ----------------------------------------------------------------------------------- */
.gallery-uniform-item, .gallery-justified-item {
    border: 4px solid var(--pf-gallery-item-border-color);
    box-shadow: 0 0 8px var(--pf-gallery-item-box-shadow-color);
}

.gallery-masonry-item, .gallery-masonry-item-sizer {
    border: 4px solid var(--pf-gallery-item-border-color);
    box-shadow: 0 0 4px var(--pf-gallery-item-box-shadow-color);
}

.gallery-item-title-over {
    background-color: var(--pf-gallery-item-title-over-background-color);
    color: var(--pf-gallery-item-title-over-color);
}

.gallery-item {
    border: 4px solid var(--pf-gallery-item-border-color);
    box-shadow: 0 0 4px var(--pf-gallery-item-box-shadow-color);
}

/* ----------------------------------------------------------------------------------- */
/* Gallery item slider (lightbox) */
/* ----------------------------------------------------------------------------------- */
.gdesc-inner {
    background-color: var(--pf-page-background-color);
}

.glightbox-clean .gslide-title, 
.glightbox-clean .gslide-desc {
    color: var(--pf-page-text-color);
    font-family: var(--pf-page-font-key), var(--pf-page-font-type);
}

/* ----------------------------------------------------------------------------------- */
/* Blog posts */
/* ----------------------------------------------------------------------------------- */
.blog-posts-container .blog-post-container {
    box-sizing: border-box;
    border: 2px solid var(--pf-page-background-color);
}

.blog-posts-container .blog-post-container:hover {
    border: 2px solid var(--pf-blog-post-hover-border-color);
}

/* ----------------------------------------------------------------------------------- */
/* Scrollable element */
/* ----------------------------------------------------------------------------------- */
.scrollbox:hover::-webkit-scrollbar-thumb {
    border-color: var(--pf-scrollbox-hover-border-color);
}