/*
Theme Name: DPZ Colab 2023 Theme
Theme URI: https://dpz.com
Author: DPZ
Author URI: https://dpz.com
Description: Based on the original DPZ Colab theme, which was supposed to act as a basis for all future CoLab sites, 2023 eliminates the old create-guten-block CoLab block templates in favor of custom ACF blocks. There is also more flexibility in block options as the strict controls in the original theme was too limiting.
Version: 0.1
Requires at least: 6
Tested up to: 6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dpz-colab-2023
*/

/********************************************************/
/* VARIABLES
/********************************************************/

:root {
    /*--um-maize: #FFCB05; */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
}

/********************************************************/
/* FONTS
/********************************************************/

/* what to do with font-optical-sizing: auto ??? */

/* these will only be used if the font represented is selected, even then, they probably aren't needed */
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}


/* general */
.container {
    width:96%;
    max-width:1300px;
    padding-left:2%;
    padding-right:2%;
 }

body {
    background:#ffffff;
    margin:0;
    line-height:1.5;
}
#page {
    margin:0;
    width:100%;
}
/* set generic size here so that custom overrides can happen;
only set in templates if we don't want to be able to override */
a { text-decoration:none; }

#page-wrapper > p, 
#page-wrapper > ol, 
#page-wrapper > ul, 
#page-wrapper > h1, 
#page-wrapper > h2, 
#page-wrapper > h3, 
#page-wrapper > h4, 
#page-wrapper > h5, 
#page-wrapper > h6 {
    width:98%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}
#page-wrapper > blockquote {
    width:90%;
    max-width:900px;
    margin:20px auto;
}
button, .wp-block-button__link {
    border-style:solid;
    border-radius:6px;
    padding:10px 20px;
}

/* header */
#page > header {
    position: sticky;
    z-index:8;
    top: 0;
    padding:0;
    background-color: #fff;
    height: 80px;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 0.15rem 0.15rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%);
}
.admin-bar #page > header {
	top:30px;
}
#nav_wrapper {
    width:96%;
    max-width:1300px;
    max-height: 78px;
    padding-left:2%;
    padding-right:2%;
    display:flex;
    margin:0 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:center;
}
#logo { width:50%; max-width:385px; }
#logo h1 { font-size:32px; }
#logo img { max-height:80px; }
nav.main_menu { display:flex; justify-content:flex-end; }
#main-menu {
    display: flex;
    flex-direction:row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-top:0;
}
#main-menu a {
    padding: 0.5rem;
    text-decoration:none;
}

/* translate box */
.switcher { position:absolute; right:0; }

/* mobile menu -- modeled from fusion */
.dpz-mobile-navigation {
    display: none;
}
/* .fusion-mobile-menu-design-flyout.fusion-header-has-flyout-menu */ .dpz-flyout-mobile-menu-icons {
    display: none;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-mobile-menu-icons {
    margin-top:0;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons {
    font-size:20px;
    margin: 0 calc((45px)/ -2);
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons {
    align-items: center;
    z-index: 99999;
}
.dpz-flyout-menu-icons {
    padding: 45px;
    color: #000000;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-icon:before {
    color:#000000;
    border-radius: 50%;
    background-clip: padding-box;
    transition: all .25s ease-in-out;
}
.awb-icon-search:before {
    content: "\f002";
}
.dpz-flyout-menu-icons:hover {
    color: #a0ce4e;
}
.dpz-flyout-mobile-menu-icons {
    float: right;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle {
    height: calc((20px) * .9);
    width: calc((20px) * 1.5);
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle, 
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle {
    padding: 0 calc((45px)/ 2);
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle {
    margin-top: -2px;
}
/*.fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle {
    position: relative;
    transition: margin .25s ease-in-out;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle .dpz-toggle-icon {
    height: calc((20px) * .9);
    width: calc((20px) * .9);
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle, 
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: content-box;
    line-height:1;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle .dpz-toggle-icon {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    direction: ltr;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line:nth-child(1), 
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle .dpz-toggle-icon-line:nth-child(1) {
    transform-origin: left top;
    margin-top:-4px;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line:nth-child(3), 
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle .dpz-toggle-icon-line:nth-child(3) {
    transform-origin: left bottom;
    margin-top:0;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line, /* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-flyout-search-toggle .dpz-toggle-icon-line {
    transform: rotate(0);
    transition: .25s ease-in-out;
}
/* .fusion-header-has-flyout-menu */ .dpz-flyout-menu-icons .dpz-toggle-icon-line {
    background-color: #000000;
    width: calc((20px) * 1.5);
    height: calc((20px) * .1);
}
.mm-active + .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line:nth-child(1) {
    transform: rotate(45deg);
}
.mm-active + .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line:nth-child(2) {
    opacity:0;
}
.mm-active + .dpz-flyout-menu-icons .dpz-flyout-menu-toggle .dpz-toggle-icon-line:nth-child(3) {
    transform: rotate(-45deg);
}
.mobile_main_menu { 
    display:none;
}
.dpz-flyout-menu-toggle:hover .dpz-toggle-icon-line { background-color:#cccccc;}
@media (max-width:980px) {
    .dpz-flyout-menu-icons {
        display: flex;
        position: relative;
    }
    nav.main_menu { display:none; }
    .mobile_main_menu {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        z-index:99999;
        width:100%;
        height: 100vh;
        background-color: rgba(256,256,256,0.95);
    }
    ul#mobile-main-menu {
        width: 100%;
        text-align: center;
        margin-top:40px;
        margin-bottom: 0;
        padding: 25px 0;        
    }
    ul#mobile-main-menu li {
        padding:10px 0;
    }
    .menu-item a {
        font-size:24px ! important; /* replace with custom??? */
    }
}

.mobile-menu-toggler {
    display: none;
}


/* Page Container */
#page-wrapper {
    width:100%;
    margin:0 auto;
    max-width:100%;
    min-height: calc(100vh - 134px);
}
.admin-bar #page-wrapper {
    min-height: calc(100vh - 174px);
}

/* Page Title */
h1.entry-header {
    display:block;
    width:100%;
    border-bottom: 1px solid #eaecef;
    text-align: center;
    padding-bottom: 10px;
    margin-top: 24px;
    margin-bottom: 15px;
    line-height:1.2;
}

/* Footer */
footer #dpz_footer {
    margin-left:auto;
    margin-right:auto;
    display:flex;
}
.dpz-acf-text.dpz-footer {
    margin-top:1em;
    margin-bottom:1em;
}

/* DPZ Columns */
.dpz-2-columns-50-50,
.dpz-2-columns-40-60,
.dpz-2-columns-60-40,
.dpz-2-columns-33-66,
.dpz-2-columns-66-33,
.dpz-2-columns-25-75,
.dpz-2-columns-75-25,
.dpz-2-columns-20-80,
.dpz-2-columns-80-20,
.dpz-3-columns-33-33-33,
.dpz-3-columns-25-50-25,
.dpz-3-columns-25-25-50,
.dpz-3-columns-50-25-25,
.dpz-3-columns-30-30-40,
.dpz-3-columns-30-40-30,
.dpz-3-columns-40-30-30,
.dpz-3-columns-20-20-60,
.dpz-3-columns-20-60-20,
.dpz-3-columns-60-20-20 {
    display:flex;
    flex-direction:row;
    width:100%;
}
.dpz-2-columns-50-50 div,
.dpz-2-columns-40-60 div,
.dpz-2-columns-60-40 div,
.dpz-2-columns-33-66 div,
.dpz-2-columns-66-33 div,
.dpz-2-columns-25-75 div,
.dpz-2-columns-75-25 div,
.dpz-2-columns-20-80 div,
.dpz-2-columns-80-20 div,
.dpz-3-columns-33-33-33 div,
.dpz-3-columns-25-50-25 div,
.dpz-3-columns-25-25-50 div,
.dpz-3-columns-50-25-25 div,
.dpz-3-columns-30-30-40 div,
.dpz-3-columns-30-40-30 div,
.dpz-3-columns-40-30-30 div,
.dpz-3-columns-20-20-60 div,
.dpz-3-columns-20-60-20 div,
.dpz-3-columns-60-20-20 div {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
}
.dpz-2-columns-50-50 > div,
.dpz-3-columns-50-25-25 > div,
.dpz-3-columns-25-50-25 > div + div {
    width:50%;
}
.dpz-2-columns-40-60 > div {
    width:40%;
}
.dpz-2-columns-60-40 > div,
.dpz-3-columns-40-30-30 > div,
.dpz-3-columns-30-40-30 > div + div {
    width:40%;
}
.dpz-2-columns-33-66 > div,
.dpz-3-columns-33-33-33 > div {
    width:33%;
}
.dpz-2-columns-66-33 > div {
    width:66%;
}
.dpz-2-columns-25-75 > div,
.dpz-3-columns-25-50-25 > div,
.dpz-3-columns-25-25-50 > div,
.dpz-3-columns-25-25-50 > div + div,
.dpz-3-columns-50-25-25 > div + div {
    width:25%;
}
.dpz-2-columns-75-25 > div {
    width:75%;
}
.dpz-2-columns-20-80 > div,
.dpz-3-columns-20-20-60 > div,
.dpz-3-columns-20-20-60 > div + div,
.dpz-3-columns-20-60-20 > div,
.dpz-3-columns-60-20-20 > div + div {
    width:20%;
}
.dpz-2-columns-80-20 > div {
    width:80%;
}
.dpz-3-columns-30-30-40 > div,
.dpz-3-columns-30-30-40 > div + div,
.dpz-3-columns-30-40-30 > div,
.dpz-3-columns-40-30-30 > div + div {
    width:30%;
}
.dpz-3-columns-60-20-20 > div,
.dpz-3-columns-20-60-20 > div + div {
    width:60%;
}

.dpz-2-columns-50-50 > div + div,
.dpz-2-columns-40-60 > div + div,
.dpz-2-columns-60-40 > div + div,
.dpz-2-columns-33-66 > div + div,
.dpz-2-columns-66-33 > div + div,
.dpz-2-columns-25-75 > div + div,
.dpz-2-columns-75-25 > div + div,
.dpz-2-columns-20-80 > div + div,
.dpz-2-columns-80-20 > div + div,
.dpz-3-columns-25-50-25 > div + div + div,
.dpz-3-columns-25-25-50 > div + div + div,
.dpz-3-columns-50-25-25 > div + div + div,
.dpz-3-columns-30-30-40 > div + div + div,
.dpz-3-columns-30-40-30 > div + div + div,
.dpz-3-columns-40-30-30 > div + div + div,
.dpz-3-columns-20-20-60 > div + div + div,
.dpz-3-columns-20-60-20 > div + div + div,
.dpz-3-columns-60-20-20 > div + div + div {
    flex-grow:1;
}
/* alignment settings are in custom block css */
/*

    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
*/
/*
.dpz-2-columns-60-40,
.dpz-2-columns-33-66,
.dpz-2-columns-66-33,
.dpz-2-columns-25-75,
.dpz-2-columns-75-25,
.dpz-2-columns-20-80,
.dpz-2-columns-80-20
*/

/* Page Content Basics */
#page-wrapper > p {
    width:98%;
    margin:20px auto;
    max-width:1200px;
}

/* Map Template */
.page-template-page-colab-map #page-wrapper {
    width:100%;
    max-width:100%;
}
.cl2023-ssp-map-embed {
    width:100%;
}
.page-template-page-colab-map iframe {
    width:100vw;
    height:80vh;
}



/* CARRY OVER FROM OLD THEME */
/*
.center-content {
    text-align: center;
}
*/

/*
@media (min-width:981px) {
    nav.main_menu { display:none; }
}
(/)
/* TABLET */
@media (max-width:980px) {
    /* TO DO -- Search TO DO in functions-customizer; get rid of this */
    h1 { font-size:56px; }
    h2 { font-size:48px; }
    h3 { font-size:40px; }
    h4 { font-size:32px; }
    h5 { font-size:24px; }
    h6 { font-size:18px; }
    /* END TO DO */
    #logo {
        width:70%;
        max-width:70%;
    }
    #logo img {
        max-width:100%;
    }
    nav.main_menu {
        display:none;
        position:absolute;
        top:100px;
        left:0;
        width:90%;
        background-color:white;
        box-shadow: 1px 1px 4px 2px rgba(204, 204, 204, 0.6);
        -moz-box-shadow: 1px 1px 4px 2px rgba(204, 204, 204, 0.6);
        -webkit-box-shadow: 1px 1px 4px 2px rgba(204, 204, 204, 0.6);
    }
    #main-menu {
        display:block;
    }
    #main-menu a {
        line-height:2.5rem;
    }
    .mobile-menu-toggler {
        display:flex;
        flex-grow:1;
        justify-content:flex-end;
    }
    .mobile-menu-toggler button {
        padding: 0;
        line-height: 1;
        background-color:#ffffff;
        border-radius: .25rem;
        display:flex;
        width:50px;
        height:50px;
        justify-content:center;
        align-items:center;
        cursor:pointer;
    }
    .mobile-menu-toggler-icon {
        font-size:2.5rem;
        height:auto;
        width:auto;
    }
    .wp-block-coblocks-accordion-item__title {
        font-size:18px ! important;
    }
}
/* MOBILE */
@media (max-width:767px) {
    /* TO DO -- Search TO DO in functions-customizer; get rid of this */
    h1 { font-size:38px; }
    h2 { font-size:34px; }
    h3 { font-size:30px; }
    h4 { font-size:26px; }
    h5 { font-size:22px; }
    h6 { font-size:18px; }
    /* END TO DO */
    #logo h1 {
        font-size:24px;
    }
}

/*-------- WORDPRESS BLOCKS & GODADDY COBLOCKS --------*/
.wp-block-media-text,
.wp-block-group .is-layout-constrained {
	width:96%;
	margin-right:auto;
	margin-left:auto;
	max-width:1300px;
}