/*
 Theme Name:   Blade Child
 Theme URI:    https://themeforest.net/user/greatives
 Description:  Blade Child Theme
 Version:      3.6.1.idd-1.9.9.1
 Author:       Greatives Team
 Author URI:   https://greatives.eu
 Template:     blade
*/

/* Main ADA settings for ovline focus outlines */
/* Ensure links and buttons have visible focus outlines */

/* set the theme default fonts using variables */
:root {
    --heading-font: "Nunito", sans-serif;
    --body-font: "Nunito", sans-serif;
    --outline-color: #005fcc; /* high contrast blue */

}
/* Add underline for ada */
a, a:hover, a:focus, a:visited {
    text-decoration: underline !important;
}
/* Remove any letter spacing set */
a, h1, h2, h3, h4, h5, h6, p, span, div {
    letter-spacing: inherit !important;
}
a:focus,
button:focus,
[role="button"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
    outline: 3px solid var(--outline-color) !important;   /* high contrast blue */
    outline-offset: 3px !important;          /* adds space between element & outline */
    border-radius: 5px !important;
    z-index:99999;
}
input:focus,select:focus,textarea:focus,a:hover,button:hover {
    outline: 3px solid var(--outline-color) !important;   /* high contrast blue */
    outline-offset: 3px !important;          /* adds space between element & outline */
    border-radius: 5px !important;
    z-index:99999;
}
/* Optional: also apply to hover for consistency */

/* end focus outline */
/* MVA custom styles */

/* Gives the headings a bit more weight and a bit less width */

/*blade theme overrides*/
.grve-page-title{
    height:315px;
    background-color: #161631 !important;
}

.grve-page-title .grve-title{
    color: #1f1f1f !important;
    font-family: var(--heading-font) !important;
    font-size: 64px !important;
    line-height: 67.2px !important;
    letter-spacing: 1.3px !important;
    font-weight:400 !important;
}

.grve-pagination a{
    color:#000000 !important;
}
/* Special Buttons css */
.grve-btn *, button *{
    font-size: .875rem !important;

    line-height: 19px !important;
    letter-spacing: .0875em !important;

}
.grve-pagination ul li a, .grve-pagination ul li span{
    opacity: inherit !important;
    font-size:20px;
}
.grve-row {
    margin-right: 0px;
    margin-left: 0px;
}
/* End blade overrides */

.wppro-heading-font,.wppro-heading-font *{
    font-family: var(--heading-font) !important;
}

.wppro-body-font, .wppro-body-font *{
    font-family: var(--body-font) !important;
}

/* like an h6 */
.wppro-med-text, .wppro-med-text p{
    /*font-family: "Teko", sans-serif;*/
    font-size: 16px;
}
.wppro-lrg-text, .wppro-larg-text p{
    /*font-family: "Teko", sans-serif;*/
    font-size: 26px;
}



/******  site specific css  ********/

/* CSS (add to your child theme or enqueue separately) */

/* Event calendar overrides */
.tribe-events .tribe-events-c-top-bar__datepicker-button-icon-svg {
    display: none !important;
}

.tribe_btn_calendar_icon button, .tribe_btn_calendar_icon{
    background-color: white !important;
}
.tribe_btn_calendar_icon:hover button,.tribe_btn_calendar_icon:hover{
    background-color: white !important;
}
.tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum {
    color: #000000 !important;
    text-decoration: line-through !important;
}
.tribe-events .tribe-events-c-messages__message{
    background-color: #f3f3f3 !important;
}



    /* Special wppro styles to help with alignment */
.wppro-box
{
    display:flex;
}
.wppro-box-row{
    flex-direction: row;
    flex-wrap: wrap;
}
.wppro-box-column{
    flex-direction: column;
    flex-wrap: nowrap;
}
/* wppro style for making an image widget act as a background image */
/* Make the wrapper behave like a background layer */
/* 1) Only when the section contains our bg helper, prep it */
.grve-section:has(.wppro-bg-image){
    position: relative;
    overflow: hidden;    /* clip any overhang */
    isolation: isolate;  /* keep z-index = 0/−1 safely inside */
}

/* 2) Make the helper fill the entire SECTION, not the column/container */
.wppro-bg-image{
    position: absolute !important;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;        /* full-bleed width regardless of inner .grve-container */
    z-index: 0;          /* behind content */
    pointer-events: none;
}

/* 3) Ensure the section’s normal content stacks above the image */
.grve-section:has(.wppro-bg-image) > .grve-container{
    position: relative;
    z-index: 1;
}

/* Make the <img> behave like a CSS background */
.wppro-bg-image img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top right; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-cover img{
    object-fit: cover;
}
.wppro-bg-image-contain img{
    object-fit: contain;
}
.wppro-bg-image-none img{
    object-fit: none;
}
.wppro-bg-image-top-right img{
    object-position: top right; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-top-left img{
    object-position: top left; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-bot-right img{
    object-position: bottom right; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-bot-left img{
    object-position: bottom left; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-right img{
    object-position: right; /* tweak as needed (e.g., 'right center') */
}
.wppro-bg-image-left img{
    object-position: left; /* tweak as needed (e.g., 'right center') */
}
/* end background */




/* wppro text helpers */
.wppro-uppercase{
    text-transform: uppercase !important;

}

/* borders */
.wppro-border-0 {
    border: 0 !important;
}
.wppro-border-1{
    border: 1px solid !important;
}
.wppro-border-2{
    border: 2px solid !important;
}
.wppro-border-3{
    border: 3px solid !important;
}
.wppro-border-4{
    border: 4px solid !important;
}

/* colors */
.wppro-text-color-white *{
    color: white !important;
}
.wppro-text-color-black *{
    color: black;
}
/* text alignments */
.wppro-text-center *{
    text-align: center;
}

/*Mobile styles*/
@media (max-width: 768px) {
    .wppro-hide-mobile {
        display: none !important;
    }
}


/* wppro post loop styles */


.wppro-featured {
    margin-bottom: 2rem;
}
.wppro-featured-image {
    position: relative;
}
.wppro-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* Base badge style */
.wppro-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #c00;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
}

/* Variation */
.wppro-badge.featured {
    background: #c00; /* red */
}
.wppro-badge.latest {
    background: #444; /* dark gray */
}

.wppro-featured h2 {
    margin-top: 1rem;
    font-size: 1.5rem;
}
.wppro-readmore {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: bold;
    text-decoration: none;
}


/* Container */
.wppro-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* Grid item: max 2 per row */
.wppro-grid-item {
    flex: 1 1 calc(50% - 20px);

}

.wppro-grid-image {
    position: relative;
    margin: 0;
}

.wppro-grid-image img {
    width: 100%;
    height: 225px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

/* Featured singleton */
.wppro-featured {
    margin-bottom: 30px;
    position: relative;
}

.wppro-featured-image {
    position: relative;
    margin: 0;
}

.wppro-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Badge styles */
.wppro-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #c00;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
    line-height: 1;
}

/* Content */
.wppro-grid-item header,
.wppro-featured header {
    margin-top: 15px;
}

.wppro-grid-item h3,
.wppro-featured h2 {
    margin: 0 0 10px;
    font-weight: 700;
}

.wppro-excerpt {
    margin: 0 0px 15px;
    font-size: 0.9rem;
    color: #333;
}

.wppro-readmore {
    margin: 0 0px 15px;
    font-weight: 600;
    font-size:20px !important;
    color: #c00;
    text-decoration: none;
}

.wppro-readmore:focus,
.wppro-readmore:hover {
    text-decoration: underline;
}


/* search results css */
.wppro-serp-wrapper {
    padding: 1.5rem 0 2.5rem;
}
.wppro-serp-header {
    font-size: 25px;
    color: #595959;
    margin-bottom: 1.5rem;
}
.wppro-serp-header strong {
    font-weight: 600;
}
.wppro-serp-results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wppro-serp-result {
    margin-bottom: 1.75rem;
}
.wppro-serp-result__title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 0.1rem;
}
.wppro-serp-result__title a {
    text-decoration: none;
}
.wppro-serp-result__title a:hover,
.wppro-serp-result__title a:focus {
    text-decoration: underline;
}
.wppro-serp-result__url {
    display: block;
    font-size: 0.8125rem;
    color: #006621;
    margin-bottom: 0.25rem;
    word-break: break-all;
}
.wppro-serp-result__meta {
    font-size: 0.75rem;
    color: #484848;
    margin-bottom: 0.25rem;
}
.wppro-serp-result__excerpt {
    font-size: 0.875rem;
    color: #3c4043;
    margin: 0;
}
.wppro-serp-no-results {
    margin-top: 1.5rem;
    font-size: 0.95rem;
}
.wppro-serp-no-results strong {
    font-weight: 600;
}
.wppro-serp-no-results ul {
    margin-top: 0.75rem;
}
/* Make sure pagination has some spacing from results */
.wppro-serp-pagination {
    margin-top: 2rem;
}
/* end search results */

/* Responsive: stack items */
@media (max-width: 768px) {
    .wppro-grid-item {
        flex: 1 1 100%;
    }
}

/**
* Reflow on mobile and Desktop. 
* Issue is being caused by grve-column class name which reduces spacing for Blade elements due to it's default 25px padding. 
* Many reflow issues can be fixed by overriding this padding on mobile and desktop.
*/

@media screen and (max-width: 500px) {
    .grve-column {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Utils */
.aspect-video {
	aspect-ratio: 16 / 9;
}
/* Fix to make .aspect-video work on iframes
 * wrapped with .fluid-width-video-wrapper */
.fluid-width-video-wrapper iframe.aspect-video {
	position: unset;
}






/* todo move to wppro group */