/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.2
*/


/* *************** */
/* Color variables */
/* *************** */

/*
 * Some color variables
 * TODO: Prune unused when design is finished.
 * Names can also be retrieved from https://www.color-blindness.com/color-name-hue/.
 */
:root {
    --color-logo-red: #ed1c24;
    --color-logo-blue: #466ba1;
    --color-black-text: #222;
    --color-white: #fff;
    
    --color-gp-nav-entry-gray: #515151;
    
    --color-tailwind-gray-400: #9CA3AF;
    --color-tailwind-red-500: #EF4444;
    --color-tailwind-yellow-300: #FCD34D;
    --color-tailwind-yellow-400: #FBBF24;
    
    --color-raaba-green: #0b9636;

    /* Generic */
    --color-bianca: #f9f4ed;
    --color-cararra: #ece8d8;
    --color-calico: #d5b987;
}

/* ******************** */
/* Theme customizations */
/* ******************** */

/*
 * Mimicking fonts used in Elementor pages for posts
 * that do not use Elementor. Cause in this case, Elementor
 * stylesheets and thus the respective Google Fonts are not
 * loaded.
 */

/* latin-ext */
@font-face {
    font-family: 'Open Sans Self-Hosted';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* src: url(https://fonts.gstatic.com/s/opensans/v23/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2'); */
    src: url(fonts/open-sans-400-latin-ext__mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans Self-Hosted';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* src: url(https://fonts.gstatic.com/s/opensans/v23/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'); */
    src: url(fonts/open-sans-400-latin__mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Open Sans Self-Hosted';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    /* src: url(https://fonts.gstatic.com/s/opensans/v23/mem5YaGs126MiZpBA-UNirkOXOhpOqc.woff2) format('woff2'); */
    src: url(fonts/open-sans-600-latin-ext__mem5YaGs126MiZpBA-UNirkOXOhpOqc.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Open Sans Self-Hosted';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    /* src: url(https://fonts.gstatic.com/s/opensans/v23/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2'); */
    src: url(fonts/open-sans-600-latin__mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Gloria Hallelujah Self-Hosted';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/gloria-hallelujah__LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gloria Hallelujah Self-Hosted', sans-serif;
    font-weight: 600;
}

body {
    font-family: 'Open Sans Self-Hosted', sans-serif;
    font-weight: 400;
}

/* 
 * Narrow spacing of main nav items so that all items fit in one line.
 * Can be controlled with GP Premium: https://docs.generatepress.com/article/menu-item-height-width/. 
 */
@media (min-width: 768px) {
    .main-navigation .main-nav ul li a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.site-header {
    background-color: var(--color-bianca);
}

.main-navigation {
    background-color: var(--color-bianca);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: var(--color-bianca);
}

/*
 * The main content area
 *
 * 1. Remove top padding of main content area to close gap
 *    to main nav which looks too big if everything has
 *    one bg color. If main nav and content would have
 *    a different bg color, this padding would be justified.
 */
.separate-containers .inside-article {
    background-color: var(--color-bianca);
    padding-top: 0; /* [1] */
}

/*
 * Overwrite white background of category index page header.
 */
.separate-containers .page-header {
    background-color: var(--color-bianca);
}

.sidebar .widget {
    background-color: var(--color-cararra);
}

.footer-widgets {
    background-color: var(--color-calico);
}

.footer-widgets .widget-title {
    color: var(--color-black-text);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-widgets .widget {
    color: var(--color-black-text);
    font-size: 15px;
}

.footer-widgets a {
    color: var(--color-black-text);
}

.footer-widgets a:hover {
    color: var(--color-raaba-green);
}

/* Decorate footer links with a right angle quotation mark */
.footer-widgets a::before {
    content: '\203A';
    font-size: 18px;
    margin-right: 4px;
}

.site-info {
    background-color: var(--color-calico);
    color: var(--color-black-text);
}

.site-info a {
    color: var(--color-black-text);
}

.site-info a:hover {
    color: var(--color-raaba-green);
}

/* max-width cause text-align is a theme style and therefore this is less invasive */
@media (max-width: 768px) {
    .site-info {
        text-align: left;
    }
}


/* *************** */
/* VSRaaba classes */
/* *************** */

.vsr-h-separator {
    margin-left: .5em;
    margin-right: .5em;
}

.vsr-site-info-link {
    display: block;
}

.vsr-site-info-link,
.vsr-site-info-link:hover {
    text-decoration: underline;
}

@media (min-width: 769px) {
    .vsr-site-info-link {
        display: inline;
    }
}