/*

Theme Name: The McNabb Foundation - Child Theme
Description: This is a custom child theme for The McNabb Foundation.
Template: themcnabbfoundation
Version: 1.0
Author: Make Me Modern

*/

/*===============================================

Josh Comeau's Custom CSS Reset (modified)
https://www.joshwcomeau.com/css/custom-css-reset/

================================================*/

*,::after,::before{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;height:auto;max-width:100%}button{cursor:pointer}button,input,select,textarea,h1,h2,h3,h4,h5,h6{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}ol[class],ul[class]{list-style:none;padding:0;margin:0}a,button,input,label,select,summary,textarea{touch-action:manipulation}


/*=====================

Browser-level overrides

======================*/

/* Inputs */

textarea,
select,
input:not([type=checkbox],[type=radio]) {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
}
select { 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 5'%3E%3Cpath d='M.126226.380928C.297582.209432.578959.205963.754715.373165L4 3.46066 7.24529.373166c.17575-.167203.45713-.163734.62849.007762.17137.171496.16777.446034-.00796.613258L4.31027 4.37684c-.17262.16421-.44791.16421-.62054 0L.134182.994186C-.0413952.827178-.0453072.552576.126226.380928Z' fill='%23272624'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 0.625em;
    background-position: calc(100% - .5em);
}

/*==============

Global variables

===============*/

:root {
    /* Highest and lowest possible z-index value. USE SPARINGLY! */
    --zindex-highest: 2147483647;
    --zindex-lowest: calc(-1 * var(--zindex-highest));
}


/*=====================

Gravity Forms Overrides

======================*/

/* Confirmation */

.gform_wrapper .gform_confirmation_message {
    text-align: center !important;
    font-weight: bold !important;
}

/* Errors */

.gform_wrapper .validation_error {
    border: 0 !important;
    color: #a40000 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gform_wrapper .validation_message {
    font-weight: 400 !important;
    display: block !important;
    line-height: 1 !important;
    margin-top: 8px !important;
}
.gform_wrapper li.gfield_error .gfield_description {
    font-size: 80% !important;
    color: #a40000 !important;
    padding: 0 !important;
}
.gform_wrapper li.gfield_error {
    border: none !important;
    background-color: unset !important;
}
.gform_wrapper li.gfield_error .ginput_recaptcha + .validation_message {
    text-align: center !important;
    margin: 1rem 0 0 0 !important;
}

/* Recaptcha */

.gform_wrapper .ginput_recaptcha,
.gform_wrapper .ginput_recaptcha > div { 
    margin: 0 auto !important  /* Remove this code if you do not want to center the reCAPTCHA. */
}
.grecaptcha-badge { 
    z-index: -2147483647 !important 
}


/*===========

Map overrides

============*/

.leaflet-control-attribution,
.gmnoprint a,
.gmnoprint span,
.gm-style-cc,
a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"] { 
    display: none !important 
}


/*===============

Salient overrides

================*/

/* A11y */

a:focus-visible {
    outline: -webkit-focus-ring-color auto 1px !important;
}

/* Layout */

html { 
    background-color: var(--color-bg) !important 
}
.wpb_row,
.wpb_content_element,
.templatera_row { 
    margin-bottom: 0 !important 
}
.row, div.clear {
    padding-bottom: 0 !important;
}
/* 
    Overriding Salient's container logic to implement our own - defined
    at the section level rather than the page level.
*/
.container {
    max-width: unset !important;
    padding: 0 !important;
}
.wpb_row {
	margin-left: 0 !important;
	left: unset !important;
	width: 100% !important;
}
.wpb_row > .col > .wpb_column:only-of-type {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Typography */

body {
    font-size: var(--font-size-body);
    line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 1.25;
    margin: 0;
    font-family: var(--font-family-heading);
}
p {
    padding-bottom: 0;
}
table {
    font: inherit;
}
body,#infscr-loading,#infscr-loading div,#nectar-ocm-ht-line-check,#page-header-bg .subheader,#pagination .next.inactive,#pagination .prev.inactive,#pagination a,#pagination span,#top #logo,.bold,.comment-list .comment-author,.comment-list .pingback .comment-body>a,.container-wrap nav.woocommerce-pagination ul li span,.nectar-box-roll .overlaid-content .subheader,.nectar-button,.text-on-hover-wrap .categories a,.woocommerce .container-wrap nav.woocommerce-pagination ul li span,.woocommerce nav.woocommerce-pagination ul li a,b,blockquote,body .gform_wrapper .top_label .gfield_label,body .ui-widget,body .vc_text_separator div,button[type="submit"],dt,input[type="button"],input[type="submit"],select,strong {
    font-family:var(--font-family-body);
    color: inherit;
}
#page-header-bg h1,#respond h3,#sidebar h4,.nectar-box-roll .overlaid-content h1,.row .col.section-title h1,.row .col.section-title h2,h1,h2,h3,h3#comments,h4,h5,h6 { 
    font-family:var(--font-family-heading);
    color: inherit;
}

/* Links */

a {
    color: var(--color-accent-primary);
}

/* Inputs */

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=datetime],
input[type=date],
input[type=tel],
input[type=month],
input[type=week] {
    font-size: 16px !important; /* prevents zooming in on input on mobile */
    min-height: 48px !important; /* ensure proper clickable area */
}

/* Footer */

#footer-outer a.non-hoverable,
#copyright a.non-hoverable {
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}
#footer-outer a.non-hoverable:hover,
#copyright a.non-hoverable:hover {
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}


/*=============

Utility classes

==============*/

/* A11y */

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

/* Disable scroll */

.overflow-hidden {
    overflow: hidden !important;
}

/* Responsive - Change viewport widths as needed */

@media screen and (max-width: 750px) {
    .small-down-hide {
        display: none !important;
    }
}

@media screen and (min-width: 750.01px) {
    .small-up-hide {
        display: none !important;
    }
}

@media screen and (max-width: 1000px) {
    .medium-down-hide {
        display: none !important;
    }
}

@media screen and (min-width: 1000.01px) {
    .medium-up-hide {
        display: none !important;
    }
}

@media screen and (max-width: 1200px) {
    .large-down-hide {
        display: none !important;
    }
}

@media screen and (min-width: 1200.01px) {
    .large-up-hide {
        display: none !important;
    }	
}


/*================================================

Loading Screen

Only works if Page Transitions > Transition Effect 
is set to "Horizontal Multi-Layer Swipe".

=================================================*/

#ajax-loading-screen .reveal-2:after {
    content: "";
    background-image: url();  /* need to load in logo url here */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
}


/*============

Typography

=============*/


h1,
.h1 {
    font-size: var(--font-size-h1);
}
h2,
.h2 {
    font-size: var(--font-size-h2);
}
h3,
.h3 {
    font-size: var(--font-size-h3);
}
h4,
.h4 {
    font-size: var(--font-size-h4);
}
h5,
.h5 {
    font-size: var(--font-size-h5);
}
h6,
.h6 {
    font-size: var(--font-size-h6);
}


/*============

Reduced Motion

=============*/

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}