/* CSS that should eventually be taken care of in theme.json */


/*---------------------------------------------------------------
>>> TABLE OF CONTENTS:
-----------------------------------------------------------------

	1. Typography
	2. Elements
	3. Tables
	4. Links
	5. Button

-----------------------------------------------------------------*/




/* --------------------------------------------------------------
1. Typography
-------------------------------------------------------------- */
html, body {
    font-family: var(--wp--custom--typography--fontfamily);
    background-color: var(--wp--custom--background--color);
    font-size: var(--wp--custom--typography--body);
    color: var(--wp--custom--typography--color);
    line-height: 1.4;
}

/* set line height for large font sizes */
.has-xl-font-size {
    line-height: 1.2;
}
.has-xxl-font-size,
.has-xxxl-font-size {
    line-height: 1.1;
}

/* setting the body's background on a page with a transparent header, resolves the white space issue
 that occurs on mobile when the collapsed menu is toggled open */
body.page-template-transparent {
    background-color: var(--wp--preset--color--darkblue);
}

@media (max-width: 1275px) {
    html, body {
        font-size: var(--wp--custom--typography--body-mobile);
    }
}

@media (min-width: 1921px) {
    body {
        font-size: var(--wp--custom--typography--body-xl-desktop);
        line-height: 1.6;
    }
}

h1,
h3,
h4,
h5,
h6 {
    clear: both;
    line-height: var(--wp--custom--typography--headinglineheight);
    margin-bottom: 1%;
}
h1,
h3,
h4,
h5 {
    font-family: var(--wp--custom--typography--fontfamilybold);
    text-transform: uppercase;
}

/* Fallback title styles */
/* MEC 03/21/22 font-size: added catch for core changing of theme json variable names with numbers
not sure if this was an intentional core change from 5.8 to 5.9, when have confirmation on
correct naming convention, should be able to remove the duplicates */
h1 {
    font-size: var(--wp--custom--typography--h1);
    font-size: var(--wp--custom--typography--h-1);
    text-transform: uppercase;
}

h2 {
    font-size: var(--wp--custom--typography--h2);
    font-size: var(--wp--custom--typography--h-2);
    padding-bottom: 1.25rem;
}

h3 {
    font-size: var(--wp--custom--typography--h3);
    font-size: var(--wp--custom--typography--h-3);
}

h4 {
    font-size: var(--wp--custom--typography--h4);
    font-size: var(--wp--custom--typography--h-4);
}

h5 {
    font-size: var(--wp--custom--typography--h5);
    font-size: var(--wp--custom--typography--h-5);
    padding-top: 10px;
}

h6 {
    font-size: var(--wp--custom--typography--h6);
    font-size: var(--wp--custom--typography--h-6);
    padding-top: 10px;
    text-transform: uppercase;
}

p {
    padding-bottom: 20px;
}
/* this is meant to make it easy for content manager to control paragraph spacing, using the tailwind classes also works*/
div.no-space p,
p.no-space {
    padding-bottom: 0;
}

/* for default pages and posts, to auto add spacing on some elements, sp2 block patterns are excluded because want to
control padding based on how the <p> is used */
.mec-container p:not(.block-container p):not(.wp-block-group p) ,
.mec-container ul:not(.block-container ul) {
    padding-bottom: 1.2em;
}


b,
strong,
.strong,
.strong a {
    font-weight: var(--wp--custom--typography--bold);
    font-family: var(--wp--custom--typography--fontfamilybold);
}

.bold {
    font-family: var(--wp--custom--typography--fontfamilyboldcondensed);
}

.regular {
    font-family: var(--wp--custom--typography--fontfamily);
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    color: var(--wp--custom--color--foreground);
    font-weight: var(--wp--custom--typography--bold);
    line-height: 1.4;
    margin: 1em 0 1.2em 0;
    position: relative;
    padding: 0 0 0 30px;
    border-left: solid 4px var(--wp--preset--color--black); /*#272c30;*/
}

blockquote p {
    margin-bottom: 1em;
}

blockquote cite {
    margin-top: 10px;
    display: block;
}

/* --------------------------------------------------------------
2. Elements
-------------------------------------------------------------- */
ul,
ol {
    /* margin: 0 0 1.4em 20px;*/
    /* margin: 0 0 1.4em 0;*/
}

li {
    margin-left: 20px;
}


ul {
    list-style: disc;
}

/* target lists that are before paragraphs and add some space */
ul + p {
    padding-top: 20px;
}

/*ul li {
    list-style-type: '– ';
}*/

/* this is specifically for lists in the footer or header */
footer li,
header li,
footer a,
header a {
    list-style: none;
    list-style-type: none;
    padding-bottom: 10px;
    margin-left: 0;
}

ol {
    list-style: decimal;
}

ul ul,
ol ol,
ul ol,
ol ul {
    /*margin: 0.6em 0 0.6em 1.5em;*/
}

/* --------------------------------------------------------------
3. Tables
-------------------------------------------------------------- */

.wp-block-table {
    width: 83%;
    margin-right: auto;
    margin-left: auto;
}
table {
    font-size: var(--wp--custom--table--font-size);
    margin-bottom: 5%;
    padding: 0;
    width: 100%;
    text-indent: 20px;
    border-style: hidden;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

table thead {
    border-bottom: var(--wp--custom--table--thead--border-bottom) !important; /*new in hybrid*/
}

table thead th {
    font-family: var(--wp--custom--table--thead--fontfamily);
    font-size: var(--wp--custom--table--thead--font-size--m);
}

table td,
table th,
.wp-block-table td,
.wp-block-table th {
    padding: 15px;
}

/* controlling background color - need to allow for control in editor if background is set */
table:not(.has-background) thead {
    background: transparent;
}
table:not(.has-background) tr:nth-child(even),
table:not(.has-background) tr:nth-child(odd) {
    background: transparent;
}


/* --------------------------------------------------------------
4. Links
-------------------------------------------------------------- */
a {
    text-decoration: none;
    /*text-decoration: underline;*/
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
    /*text-decoration: none;*/
}

/* --------------------------------------------------------------
5. Button Link Override - there is a core bug that is not allowing the
button text color to override a parent's text color - you will find other
button styling in sp2-2-theme.css
-------------------------------------------------------------- */
.wp-block-button__link.has-blue-color {
    color: var( --wp--preset--color--blue ) !important;
}
.wp-block-button__link.has-darkblue-color {
    color: var( --wp--preset--color--darkblue ) !important;
}
.wp-block-button__link.has-white-color {
    color: var( --wp--preset--color--white ) !important;
}
.wp-block-button__link.has-lightblue-color {
    color: var( --wp--preset--color--lightblue )!important;
}
.wp-block-button__link.has-red-color {
    color: var( --wp--preset--color--red )!important;
}