/*
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; }

h1, h2, h3, h4, h5, h6 {
    line-height:1.2;
}

/* MISC */
.admin-bar #page > header {
	top:30px;
}
.wp-block-media-text,
.wp-block-group .is-layout-constrained {
	width:96%;
	margin-right:auto;
	margin-left:auto;
	max-width:1300px;
}
.post-password-form {
	    max-width: 800px;
    margin: 40px auto;
}
/* end misc */

#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;
    line-height:1.2;
}
#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;
}
.dpz-text-align-center {
    text-align:center;
}

/* 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:98%;
    max-width:1300px;
    max-height: 78px;
    padding-left:1%;
    padding-right:1%;
    height:100%;
    display:flex;
    margin:0 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:center;
}
#logo { width:30%; max-width:385px; }
#logo h1 { font-size:32px; }
#logo img { max-height:80px; }

/*******************************/
/* MAIN MENU                   */
/*******************************/

nav.main-menu-nav {
    flex-grow:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
nav.main-menu-nav a,
nav.main-menu-nav a:visited {
    text-decoration:none;
}
ul#main_menu {
    list-style:none;
    display:flex;
    flex-direction:row;
    justify-content: flex-end;
    column-gap: 2em;
    margin:0;
    padding:0;
}


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

.awb-icon-search:before {
    content: "\f002";
}
@media (max-width:980px) {
    #dpz_hamburger_icon {
        width: 30px;
        height: 18px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        box-sizing: content-box;
        line-height:1;
        transition-property: color, background-color, border-color;
        transition-duration: .2s;
        transition-timing-function: linear;
        margin-right:15px;
    }
    #dpz_hamburger_icon div {
        background-color:#000000;
        height:2px;
        width:30px;
        opacity: 1;
        transform: rotate(0);
        transition: .25s ease-in-out;
    }
    #dpz_hamburger_icon div:first-child {
        top: 0px;
        transform-origin: left top;
        margin-top:0;
    }
    #dpz_hamburger_icon div:nth-child(3) {
        transform-origin: left bottom;
    }
    #dpz_hamburger_icon.open div:nth-child(1) {
        background-color: #000000;
        transform: rotate(45deg);
        margin-top:-5px;
    }
    #dpz_hamburger_icon.open div:nth-child(2) {
        width:0;
        opacity:0;
    }
    #dpz_hamburger_icon.open div:nth-child(3) {
        background-color: #000000;
        transform: rotate(-45deg);
    }
    #dpz_hamburger_icon.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
    nav.main-menu-nav {
        display:none;
        position: absolute;
        width: 100vw;
        max-width: 100%;
        height: 100vh;
        background-color: rgba(256,256,256,0.95);
        left: 0;
        top: 0;
    }
    ul#main_menu {
        flex-direction:column;
        height: 100%;
        justify-content: flex-start;
        margin-top: 60px;
        row-gap: 30px;
        align-items: center;
    }


    nav.main_menu { 
        display:none;
    }
    .menu-item a {
        font-size:24px ! important; /* replace with custom??? */
    }
}



/* 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:block;
}
.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;
}



/* 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);
    }
    .wp-block-coblocks-accordion-item__title {
        font-size:18px ! important;
    }
    .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 {
        flex-wrap:nowrap;
    }
}
/* 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;
    }
    .wp-block-media-text {
        display:flex;
        flex-direction:column;
    }
    .wp-block-media-text .wp-block-media-text__media,
    .wp-block-media-text .wp-block-media-text__content {
        width:100%;
    }
    .wp-block-media-text figure {
        max-width:400px;
    }
    .wp-block-media-text .wp-block-media-text__media + .wp-block-media-text__content {
        margin-top:20px;
    }
    #page-wrapper > p,
    #page-wrapper > h1,
    #page-wrapper > h2,
    #page-wrapper > h3,
    #page-wrapper > h4,
    #page-wrapper > h5,
    #page-wrapper > h6,
    #page-wrapper > ul,
    #page-wrapper > ol,
    #page-wrapper > .wp-block-image.is-style-default {
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }
}

/*-------- 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;
}

/*-------- SOCIAL PIN POONT --------*/
.hive-block-head,
.hive-block-foot {
    display:none ! important;
    height:0 ! important;
}