/**
* Alignments: this contains all the global widths, margins etc for page layouts/templates and blocks.
* NOTE: T1 CONTAINER .t1-container has been deprecated, was used in template that has been deleted
*
 */

/* --------------------------------------------------------------
Body - set the max size for very large screens
-------------------------------------------------------------- */
body {
    /*max-width: var(--wp--custom--layout--maxsize);*/
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
/* if want the megamenu to span fuller width past header content, then put use header .container-fluid
 and remove header .navbar */
/*header .container-fluid,  playing with 11/12 tailwind mod */
header .navbar,
header .sp2-alert > *,  /* site alert */
footer .container-fluid {
    /*max-width: var(--wp--custom--layout--widesize);*/
    max-width: var(--wp--custom--layout--maxsize);
    width: var(--wp--custom--layout--contentsize); /*91.6666%;*/
    margin-right: auto;
    margin-left: auto;
}
.sp2-alert p {
    text-align: center; /* force center of message in case user doesn't center */
}
@media (max-width: 992px) {
    header .container-fluid {
        padding: 0;
    }
}

@media (max-width: 992px) {
/* need padding on mobile, keeping background full width*/
}


/* --------------------------------------------------------------
Main Containers
.mec-container: post page
.full-width-container: default - a page that is entirely full width blocks
.transparent-container: a full-width-container with adjustment for transparent header
.t1-container: a top level page that contains full width blocks, and may have some WYSIWYG content
-------------------------------------------------------------- */
/* everything with normal content container */
.mec-container > * {
    max-width: var(--wp--custom--layout--contentsize);
    margin-right: auto;
    margin-left: auto;
    width: var(--wp--custom--layout--postsize);
}

/* force wide width container for blocks that will default to container size */
.mec-container > .alignwide,
.t1-container > .alignwide {
    max-width: var(--wp--custom--layout--widesize);
    width: var(--wp--custom--layout--widesize);
}

/* force full width for blocks that will default to container size */
.mec-container > .alignfull,
.t1-container > .alignfull {
    max-width: 100%;
    width: 100%;
}
.mec-container > .alignfull:not(.has-background):not(.has-background-dim),
.t1-container > .alignfull:not(.has-background):not(.has-background-dim) {
    /*width: 91.666%;*/
    width: var(--wp--custom--layout--contentsize);
    max-width: var(--wp--custom--layout--maxsize);
}

/* Classic/WYSIWYG Editor containment */
.t1-container > div > p,
.t1-container > div > h1,
.t1-container > div > h2,
.t1-container > div > h3,
.t1-container > div > h4,
.t1-container > div > h5,
.t1-container > div > h6,
.t1-container > div > pre,
.t1-container > div > .tablepress,
.t1-container > div > .sp2-accordion {
    max-width: var(--wp--custom--layout--postsize);
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------------------------
Block Container note: contentsize is a percentage
.block-container: should be used on every block pattern to contain it and properly pad and align X margins
-------------------------------------------------------------- */
.full-width-container .block-container > *,
.transparent-container .block-container > *,
.t1-container .block-container > *,
.full-width-container .block-container-short > *,
.transparent-container .block-container-short > *,
.t1-container .block-container-short > *  {
    /*max-width: var(--wp--custom--layout--widesize);*/
    max-width: var(--wp--custom--layout--maxsize);
    margin-right: auto;
    margin-left: auto;
    width: var(--wp--custom--layout--contentsize);

}
.mec-container .block-container.has-background > * {
    margin-right: auto;
    margin-left: auto;
    width: var(--wp--custom--layout--contentsize);
}

/* top and bottom padding around the block pattern content */
.block-container,
.wp-block-group.has-background.block-container,
.wp-block-columns.has-background.block-container {
    padding-top: var(--wp--custom--layout--pattern-padding);
    padding-bottom: var(--wp--custom--layout--pattern-padding);
}
@media (max-width: 599px) {
    .block-container,
    .wp-block-group.has-background.block-container,
    .wp-block-columns.has-background.block-container {
        padding-top: var(--wp--custom--layout--pattern-padding-mobile);
        padding-bottom: var(--wp--custom--layout--pattern-padding-mobile);
    }
}
/* customize top and bottom padding for search results page */
.wpsearchpagemain .block-container {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* special class for left and right margin without top and bottom padding */
.title-container,
.wp-block-group.title-container,
.wp-block-group.title-container.tab-tray-title,
.contain-me,
.wp-block-group.contain-me {
    max-width: var(--wp--custom--layout--maxsize);
    margin-right: auto;
    margin-left: auto;
    width: var(--wp--custom--layout--contentsize);
}

/* --------------------------------------------------------------
Headline Containers
.sp2-block-headline (centered)
.sp2-block-headline-2col
.sp2-block-headline-left
-------------------------------------------------------------- */

/* .sp2-block-headline: is a class for long title/headlines to give space around */
.block-container .sp2-block-headline {
    margin-right: auto;
    margin-left: auto;
    width: 50%;
}
.sp2-block-headline-left {
    padding-right: 20%;
}
/*.sp2-block-headline-2col {
    margin-right: auto;
    margin-left: auto;
    width: 60%;
}*/
/* .sp2-block-headline-grid is for grids that center align on desk and tab and left align on mobile */
.wp-block-group.sp2-block-headline-grid {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 599px) {
    /* .block-container .sp2-block-headline-2col */
    .block-container .sp2-block-headline {
        width: 75%;
    }
}


/* --------------------------------------------------------------
Transparent Cover Page
-------------------------------------------------------------- */
/* desktop header is 180px, collapsed is 130px */
/* transparent header page container */
.transparent-container > * {
    margin-top: -180px;  /* size of the header */
}
.transparent-container .wp-block-cover {
    z-index: -1;
}

.transparent-container .wp-block-cover-image .wp-block-cover__inner-container,
.transparent-container .wp-block-cover .wp-block-cover__inner-container {
    margin-top: 50px;
}

/* Full screen hero cover blocks */
.wp-block-cover {
    min-height: calc(100vh - 180px);
}
.transparent-container .wp-block-cover {
    min-height: 100vh;
}

.page-template-transparent header.has-darkblue-background-color {
    background-color: transparent !important;
}

/* --------------------------------------------------------------
Core Columns Block Alignment
-------------------------------------------------------------- */
@media (max-width: 599px) {
    .wp-block-columns.has-background {
        /*padding: 1.25em 2.375em;   CORE */
        /*padding: 2.5em;*/
    }
}

/*@media (min-width: 600px) and (max-width: 781px) {
    .wp-block-column:nth-child(2n):not(.sp2-archive) {
        margin-left: 4em;
    }
}
*/
/*  I MAY NEED THIS ONE TO FIX THAT WEIRD 50% WIDTH OF 2 COLUMNS at TABLET WIDTH
- NEED TO BE CAREFUL WITH THIS - NOT SURE IF IT IS DOING IS EVERYWHERE - see margins below too
*/
/*@media (min-width: 600px) and (max-width: 781px) {
.wp-block-column:not(:only-child) {
    flex-basis:  100% !important;
}*/
@media (min-width: 782px) {
    .wp-block-column:not(:first-child) {
        margin-left: 2em; /* adding back in from pre v5.9 styling */
    }
}

@media (min-width: 782px) {
    /* not news archive or events page or the overlap content cards */
    .wp-block-column:not(:first-child):not(.sp2-archive):not(.highlight-events):not(.overlap):not(.single-overlap-card-right):not(.single-overlap-card-left) {
        margin-left: 4.5em; /* was 2.15 12-3-21*/
    }
}

/* Remove core settings that interfere with theme */
.wp-block-columns:not(.bullet-container) {
    margin-bottom: 0;
}

/* override the flex break from 599 to 992*/
@media (max-width: 992px) {
    .wp-block-columns.break-at-tablet {
        display: block;
    }
}
@media (max-width: 992px) {
    .wp-block-columns.break-at-tablet .wp-block-column:not(:first-child):not(.sp2-archive):not(.highlight-events) {
        margin-left: 0;
    }
    .t3-hero-b .wp-block-columns.break-at-tablet. .wp-block-column:not(:first-child) {
        margin-top: 2em;
        border-top: 1px solid white;
        padding-top: 2em;
    }
}

/* --------------------------------------------------------------
Core Media Text Block Alignment
-------------------------------------------------------------- */
.wp-block-media-text .wp-block-media-text__content {
    padding: 0 8%;
}


/* --------------------------------------------------------------
IN PROCESS OF TRYING OUT ALL BLOCK CONTAINERS AS A GROUP BLOCK

Block Patterns
classes:    sp2-outer for base columns block
            sp2-headline  for 75% headline group on desk and tab, 100% on mobile
            sp2-grid-3 for a column grid
            # of columns is controlled by tailwind classes in html
            3: tw-grid-cols-1 tablet:tw-grid-cols-2 lg:tw-grid-cols-3
            6: tw-grid-cols-3 lg:tw-grid-cols-6   (for stats)
-------------------------------------------------------------- */

/* OUTER PADDING - for the first wp-block-columns of the block pattern.*/
/*this is the padding at top and bottom of the content (above the title and below the last line of content */
.wp-block-columns.sp2-outer {
    padding-top: var(--wp--custom--layout--pattern-padding);
    padding-bottom: var(--wp--custom--layout--pattern-padding);
}
@media (max-width: 599px) {
    .wp-block-columns.sp2-outer {
        padding-top: var(--wp--custom--layout--pattern-padding-mobile);
        padding-bottom: var(--wp--custom--layout--pattern-padding-mobile);
    }
}
/* this is the right and left margin o container of the block */
.wp-block-columns.sp2-outer > .wp-block-column {
    /*margin-right: 5%;
    margin-left: 5%;*/
    width: var(--wp--custom--layout--contentsize);
    max-width: var(--wp--custom--layout--maxsize);
    margin-right: auto;
    margin-left: auto;
}




/* --------------------------------------------------------------
 GRID Containers
 used inside block-container
 .sp2-grid: default grid container for custom building a grid, needs group blocks with sp2-grid-item class
 .sp2-grid-2: 2 column grid container
 .sp2-grid-3: 3 column grid container
 .sp2-grid-4: 4 column grid container
 .sp2-grid-5: 5 column grid container
 https://css-tricks.com/snippets/css/complete-guide-grid/
-------------------------------------------------------------- */
.sp2-grid-6,
.sp2-grid-5,
.sp2-grid-3,
.sp2-grid-2,
.sp2-grid-1,
.sp2-grid {
    display: grid;

    row-gap: var(--wp--custom--layout--grid-row-gutter);
}
@media (max-width: 599px) {
    .sp2-grid-3 .sp2-grid-item,
    .sp2-grid-2 .sp2-grid-item,
    .sp2-grid-5 .sp2-grid-item {
        width: 75%;
        margin-right: auto;
        margin-left: auto;
    }
}

.sp2-grid-1 {
    justify-items: center;
}
/* MEC 03/21/22 gaps: 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 */
.sp2-grid-2 {
    column-gap: var(--wp--custom--layout--grid-column-gap-2col);
    row-gap: var(--wp--custom--layout--grid-row-gutter-2col);
    column-gap: var(--wp--custom--layout--grid-column-gap-2-col);
    row-gap: var(--wp--custom--layout--grid-row-gutter-2-col);
}
.sp2-grid,
.sp2-grid-3,
.sp2-grid-5 {
    column-gap: var(--wp--custom--layout--grid-column-gap-3col);
    column-gap: var(--wp--custom--layout--grid-column-gap-3-col);
}
.sp2-grid-6 {
    column-gap: var(--wp--custom--layout--grid-column-gap-6col);
    column-gap: var(--wp--custom--layout--grid-column-gap-6-col);
}


/* text-block-align - is for the alignment of the text in each text block */
.wp-block-group.sp2-content > *,
.wp-block-column.sp2-content  > *,
.wp-block-group.sp2-grid-item > *,
.sp2-grid-2.grid-mobile-left .wp-block-group.sp2-grid-item > *,
.bullets-title .wp-block-group.sp2-grid-item > * {
    text-align: var(--wp--custom--layout--text-block-align);
    justify-content: left; /* just added for bullets */
}
@media (max-width: 599px) {
    /*.wp-block-group.sp2-content  > *,
    .wp-block-column.sp2-content  > *,
    .wp-block-group.sp2-grid-item > * {
        text-align: var(--wp--custom--layout--text-block-align-mobile);
        justify-content: center;
    }*/
    .wp-block-column.title-group-left {
        /*padding-bottom: var(--wp--custom--layout--grid-row-gutter-2col);*/
    }
}

.grid-mobile-left .wp-block-group.sp2-grid-item,
.grid-mobile-left .wp-block-buttons {
    width: 100%;
}


/* fact-block - control width - 100px*/
/*.stat-block .wp-block-group.sp2-content,
.fact-block .wp-block-group.sp2-content {
    max-width: var(--wp--custom--layout--stat-block);
    margin-right: auto;
    margin-left: auto;
}*/

/* --------------------------------------------------------------
BULLETS CONTAINERS
see readme.txt in /patterns for more details
-------------------------------------------------------------- */
@media(max-width:599px){
    .bullet-container {
        margin-left: 40px;
    }
    .bullets-title {
        width: var(--wp--custom--layout--contentsize);
    }
}
@media (min-width: 600px) and (max-width: 781px) {
    .bullets-title {
        width: 75%;
    }
}
@media(max-width:992px){
    .bullet-block {
        display: block;
    }
    .wp-block-column.bullets-title {
        padding-bottom: 30px;
    }
}
/* BEGIN TESTING HERE FOR TITLE OUTSIDE OF BULLET BLOCK */
/* ORIGINAL
.wp-block-columns.bullet-block {
    padding-top: var(--wp--custom--layout--pattern-padding);
    padding-bottom: var(--wp--custom--layout--pattern-padding);
    width: var(--wp--custom--layout--contentsizeflush);
    margin-left: auto;
}*/
/* NEW */
.wp-block-group.block-container-bullets > * {
    width: var(--wp--custom--layout--contentsizeflush);
    margin-left: auto;
    max-width: 2240px; /* custom based on 1920px max width and bullets need to flush*/
}

.wp-block-columns.bullet-block:not(.title-outside) {
    padding-top: var(--wp--custom--layout--pattern-padding);
    padding-bottom: var(--wp--custom--layout--pattern-padding);
}
/* END TESTING HERE FOR TITLE OUTSIDE OF BULLET BLOCK */

/* lines up at edge of screen (NEEDS MOBILE) */
.bullet-container,
.wp-block-group.has-background.bullet-container {
    padding-top: 0;
    padding-right: 0;
}
.wp-block-columns.bullet-columns .wp-block-column:not(:first-child) {
    margin-left: 0;
}
.wp-block-group.has-background.bullet-group,
.wp-block-group.has-background.bullet-group-dark-blue,
.wp-block-group.bullet-group,
.wp-block-group.bullet-group-dark-blue {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
}
.bullet-container div > p {
    padding-bottom: 2px;  /* back out the default padding on p */
}
.dot-column {
    padding-top: 30px;
    border-top: 1px solid var(--wp--preset--color--lightblue);
    padding-right: 40px;
    margin-top: 1.25em;
}
.dot:after {
    content:'';
    position: absolute;
    top: 12px;
    margin: 0 auto;
    height: 24px;
    width: 24px;
    background-color: var(--wp--preset--color--lightblue);
    border-radius: 50%;
}
.block-container-bullets.has-white-background-color.has-background .bullet-container .dot-column,
.block-container-bullets.has-blue-background-color.has-background .bullet-container .dot-column,
.bullet-container.has-white-background-color.has-background .dot-column,
.bullet-group-dark-blue .dot-column {
    border-top: 1px solid var(--wp--preset--color--darkblue);
}
.block-container-bullets.has-blue-background-color.has-background .bullet-container .dot:after,
.block-container-bullets.has-white-background-color.has-background .bullet-container .dot:after,
.bullet-container.has-white-background-color.has-background .dot:after,
.bullet-group-dark-blue .dot:after {
    background-color: var(--wp--preset--color--darkblue);
}



/* --------------------------------------------------------------
THIS MAY OR MAY NOT BE REWORKED
 OVERLAP content card - placed on column
-------------------------------------------------------------- */
.sp2-outer-b,
.wp-block-columns.has-background.sp2-outer-b {
    padding-top: var(--wp--custom--layout--pattern-padding);
    padding-bottom: var(--wp--custom--layout--pattern-padding);
}
@media (max-width: 599px) {
    .sp2-outer-b,
    .wp-block-columns.has-background.sp2-outer-b{
        padding-top: var(--wp--custom--layout--pattern-padding-mobile);
        padding-bottom: var(--wp--custom--layout--pattern-padding-mobile);
    }
}