/*
Theme Name: i3 Broadband
Author: i3 Broadband
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 2023.08.08
*/

/* font size fix for gutenberg */
body {
	--wp--preset--font-size--xx-large: clamp(2.525rem, calc(2.525rem + ((1vw - 0.48rem) * 8.4135)), 4vw);
}

/*
|--------------------------------------------------------------------------
| Header / Nav
|--------------------------------------------------------------------------
*/
/* prevent clicking empty links (like services link) */
.wp-block-navigation-item__content[href="#"] {
    pointer-events: none;;
}

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    width: 48px;
    height: 48px;
}

/* add padding to last mobile menu item so chat does not cover it*/
.wp-block-navigation__responsive-container.is-menu-open{
	padding-bottom: 50px;
}

/*
|--------------------------------------------
| Fiber
|--------------------------------------------
*/
:root {
    --logo-ratio: (69 / 180);
    --logo-width: 40vw;
    --logo-height: calc(var(--fiber-ratio) * var(--logo-width));

    --fiber-ratio: (293 / 1625); /* fiber-mobile-white dimensions */
    --fiber-height: calc(var(--fiber-ratio) * 100vw);
}
@media (min-width: 782px) {
    :root {
        --logo-width: 20vw;

        --fiber-ratio: (160 / 1920); /* fiber-desktop-white dimensions */
    }
}

header.wp-block-template-part {
    /* min-height: calc(var(--fiber-height) * 1.66); */
    /*
    min-height: calc(var(--fiber-height) * 1.5);
    padding-bottom: var(--fiber-height);
    */

    background: transparent url(./assets/images/fiber-mobile-white@2x.png) no-repeat bottom center;
    background-size: contain;

    position: relative;
    z-index: 10;
}

header > .wp-block-group:not(#announcement) {
    /* min-height: calc(var(--fiber-height) * 1.66); */
    min-height: calc(var(--fiber-height) + var(--logo-height) + (var(--wp--preset--spacing--30) * 4));
    /* add spacing-30 * 4 instead of * 2 to give a little extra */
}

@media (max-width: 781px) {
    header > .wp-block-group:not(#announcement) {
        padding-top: calc(var(--wp--preset--spacing--30) / 4) !important;

        /* 14vw is roughly the width of the left inset fiber edge */
        padding-left: 14vw !important;
        /* padding-right: 14vw !important; */
        min-height: calc(var(--fiber-height) + var(--logo-height) + (var(--wp--preset--spacing--30) * 1)) !important;
    }
}

header .wp-block-buttons {
    margin-right: -5px; /* 2px for border, 3px for button rounding */
}

/* manual active state for secondary nav */
.upper-nav a:hover,
body.page-id-463 header a[data-id="463"],
body.page-id-439 header a[data-id="439"],
body.page-id-430 header a[data-id="430"],
body.page-id-466 header a[data-id="466"] {
    color: var(--wp--preset--color--secondary);
}

.wp-block-site-logo a {
    /* this is the amount of whitespace to the left of the logo */
    margin-left: -3.47826087%;
}
.wp-block-site-logo img {
    width: var(--logo-width);
}

.nav-show-mobile,
.nav-hide-desktop {

}
.nav-hide-mobile,
.nav-show-desktop {
    display: none !important;
}

@media (min-width: 900px) {
    .nav-show-mobile,
    .nav-hide-desktop {
        display: none !important;
    }
    .nav-hide-mobile,
    .nav-show-desktop {
        display: block !important;
    }
}

@media (min-width: 782px) {
    header.wp-block-template-part {
        background-image: url(./assets/images/fiber-desktop-white@2x.png);
    }

    header > .wp-block-group:not(#announcement) {
        /*min-height: 20vw; /* matches site-logo img */
    }

    .wp-block-site-logo img {
        /* width: 20vw; */
    }
}

header + main {
	/*
    position: relative;
    z-index: 50;
	*/
    margin-top: calc(var(--fiber-height) * -0.8) !important;
}

/* pages with cover block first */
body:not(.single) header + main > .entry-content > .wp-block-cover:first-child,

/* pages */
body:not(.single) header + main > .entry-content > *:first-child:not(.legacy-content-wrapper),

/* single blog posts, 404, etc. */
body.blog header + main,
body.single header + main,
body.error404 header + main
{
    /* padding-top: calc(var(--fiber-height) * .8); */
    padding-top: calc(var(--fiber-height));
}

/*
|--------------------------------------------
| Fix breakpoint
|--------------------------------------------
*/
/* copy of wp default css to a modified media query */
@media (min-width: 900px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

@media (max-width: 899px) {
	/*.open-on-click.wp-block-navigation-submenu >*/ .wp-block-navigation-submenu__toggle {
		color: #646464 !important;
	}
	
	.wp-block-navigation__submenu-container {
		padding-top: 0 !important;
	}
}

/* neutralize the wp default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

@media (max-width: 781px) {
    .wp-block-navigation__responsive-container {
        font-size: calc(var(--wp--preset--font-size--medium) * 1.25);
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: calc(2rem + 12px);
    }
    .wp-block-navigation__responsive-container-close {
        top: calc(2rem + 12px);
    }
}

/*
|--------------------------------------------
| Top Bar
|--------------------------------------------
*/
.max-mega-menu > li:first-child > a {
	padding-left: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/
footer a:hover > img {
    opacity: 0.8;
}

@media (max-width: 781px) {
    footer .inline-flex {
        display: flex !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
|--------------------------------------------------------------------------
| Display Utilities
|--------------------------------------------------------------------------
*/
body .is-layout-flex.inline-flex,
.inline-flex {
    display: inline-flex;
}

.maxw-30vw {
    /* max-width: 30vw; */
}

.gap {
    gap: var(--wp--style--block-gap);

}
.basis-1 {
    flex: 1;
}
.flex:not(ul) {
    display: flex;
}
.row{
    display: flex;
}
.col{
    display: flex;
    flex-direction: column;
}
.hide{
    display: none;
}
.rwrap{
    flex-wrap: wrap-reverse;
}
.wrap{
    flex-wrap: wrap;
}
.flex-center{
    justify-content: center;
}
.end{
    justify-content: flex-end;
}
.between{
    justify-content: space-between;
}
.around{
    justify-content: space-around;
}
.rel{
    position: relative;
}
.abs{
    position: absolute;
}
.start{
    justify-content: flex-start;
}
.tac{
    text-align: center;
}
.tal{
    text-align: left;
}
.tar{
    text-align: right;
}
.ma{
    margin-left: auto;
    margin-right: auto;
}

.ml-auto {
    margin-left: auto;
}
.point{
    cursor: pointer;
}

.invisible {
	visibility: hidden;
	user-select: none; 
}

.purple{
    color: #8100A8 !important;
}
.blue{
    color: #00A0CC !important;
}
.mblue{
    color: #0076A8;
}
.white{
    color: #ffffff !important;
}
.orange{
    color: #E35205;
}
.yellow{
    color: #ffc72c;
}
.dgray{
    color: #4c4c4c !important;
}
.dblue{
    color: #0377A2;
}
.bcg{
    background-color: #646466;
}
.bco{
    background-color: #E35205;
}
.bcib{
    background-color: #0076A8;
}
.bclg{
    background-color: #b2b2b2 !important;
}
.bcy{
    background-color: #FFC72C !important;
}
.bcp{
    background-color: #8100A8 !important;
}
.bcb{
    background-color: #00A0CC !important;
}

.med{
    font-weight: 500 !important;
}
.bold{
    font-weight: 700 !important;
}
.bbold{
    font-weight: 900;
}
.itl{
    font-style: italic !important;
}

@media (max-width: 781px) {
    /* specificity */
    body .is-layout-constrained > .alignfull-mobile {
        max-width: unset !important;
        margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
        margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
    }

    .no-stack-mobile {
        display: flex;
    }

    .reverse-mobile {
        flex-direction: column-reverse !important;
    }

    .no-stack-mobile.reverse-mobile {
        flex-direction: row-reverse !important;
    }

    .reverse-mobile > .wp-block-column.is-vertically-aligned-bottom,
    .reverse-mobile > .wp-block-column.is-vertically-aligned-center,
    .reverse-mobile > .wp-block-column.is-vertically-aligned-top {
        width: auto !important;
    }
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
.wp-block-button__link.has-primary-background-color {
    color: #fff !important;
}

.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:not(.has-background):active,

.wp-block-button__link.has-primary-background-color:hover,
.wp-block-button__link.has-primary-background-color:focus,
.wp-block-button__link.has-primary-background-color:active,

.wp-block-button__link.has-tertiary-background-color:hover,
.wp-block-button__link.has-tertiary-background-color:focus,
.wp-block-button__link.has-tertiary-background-color:active {
    background-color: var(--wp--preset--color--custom-gray) !important;
    color: #fff !important;
    /* color: var(--wp--preset--color--tertiary); */
}
/*
.wp-block-button__link:focus {
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
}
*/

/* Handle when font-weight is manually overriden */
.wp-block-button[style*="100"] .wp-block-button__link { font-weight: 100; }
.wp-block-button[style*="200"] .wp-block-button__link { font-weight: 200; }
.wp-block-button[style*="300"] .wp-block-button__link { font-weight: 300; }
.wp-block-button[style*="400"] .wp-block-button__link { font-weight: 400; }
.wp-block-button[style*="500"] .wp-block-button__link { font-weight: 500; }
.wp-block-button[style*="600"] .wp-block-button__link { font-weight: 600; }
.wp-block-button[style*="700"] .wp-block-button__link { font-weight: 700; }
.wp-block-button[style*="800"] .wp-block-button__link { font-weight: 800; }
.wp-block-button[style*="900"] .wp-block-button__link { font-weight: 900; }

/*
|--------------------------------------------------------------------------
| Block Color Mods
|--------------------------------------------------------------------------
*/
.has-primary-background-color,
.has-secondary-background-color {
    color: #fff;
}

/* reset margin on background blocks */
body .is-layout-constrained > *:is(.wp-block-cover, .has-background) + *.has-background {
    margin-block-start: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Lists, images, etc.
|--------------------------------------------------------------------------
*/
ul.inline-list {
    padding: 0;
    margin: calc(var(--wp--style--block-gap) - (var(--wp--style--block-gap) * -0.25)) 0 0 calc(var(--wp--style--block-gap) * -1);
    text-align: center;
}

ul.inline-list > li {
    display: inline-block;
    margin-left: var(--wp--style--block-gap);
    margin-top: calc(var(--wp--style--block-gap) * .25);
}

ul.checkmarks {
    list-style: none;
}

ul.checkmarks li:before {
    /* content: '✓'; */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.02 22.42'%3E%3Cpath d='m7.02,22.42c-.69,0-1.33-.35-1.71-.92L.33,13.9c-.62-.94-.35-2.21.59-2.83s2.21-.35,2.83.59l3.1,4.74L15.18,1.07c.54-.99,1.78-1.36,2.77-.82.99.54,1.36,1.78.82,2.77l-9.95,18.34c-.34.63-.99,1.04-1.71,1.07-.03,0-.06,0-.08,0Z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 0.85rem; /* 0.85 wide == 1em tall */
    margin-right: 0.2rem;
    position: relative;
    top: 0.1rem;
}

/* https://codepen.io/sosuke/pen/Pjoqqp */
.yellow-checkmarks li:before {
    filter: invert(82%) sepia(71%) saturate(1551%) hue-rotate(331deg) brightness(101%) contrast(102%);
}

p img {
    vertical-align: top;
}

/*
|--------------------------------------------------------------------------
| Homepage
|--------------------------------------------------------------------------
*/
.home-service > .wp-block-cover {
    height: 20vw;
}

@media (max-width: 781px) {
    .home-service > .wp-block-image,
    .home-service > .wp-block-cover {
        flex: 0 0 60%;
        height: 100%;
    }
    .home-service > .wp-block-image img {
        height: 100%;
        object-fit: cover;
    }

    /* override gradients so they look better on mobile */
    .has-secondary-background-color.home-service .wp-block-cover__background {
        background: radial-gradient(rgba(142, 0, 173, 0) 20%,rgb(142, 0, 174) 70%) !important;
    }

    .has-tertiary-background-color.home-service .wp-block-cover__background {
        background: radial-gradient(rgba(255, 196, 0, 0) 20%,rgb(255, 196, 0) 70%) !important;
    }

    .has-custom-orange-background-color.home-service .wp-block-cover__background {
        background: radial-gradient(rgba(227, 82, 5, 0) 20%,rgb(227, 82, 5) 70%) !important;
    }
}

@media (max-width: 600px) {
	.home-service > .wp-block-image,
    .home-service > .wp-block-cover {
        flex: 0 0 40%;
        height: 100%;
    }
}

@media (max-width: 400px) {
	.no-stack-mobile.reverse-mobile {
		flex-direction: column !important;
	}

	/*
	.home-service .is-vertical.is-content-justification-center.is-layout-flex {
		display: block;
	}
	*/
}

/*
|--------------------------------------------------------------------------
| Accordions
|--------------------------------------------------------------------------
*/
.wp-block-pb-accordion-item h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #454545;
    background-color: #fff;
    /*var(--wp--preset--color--primary) !important;*/
}


.wp-block-pb-accordion-item + .wp-block-pb-accordion-item {
  border-top: 1px solid;
  margin-top: 0;
}

/*
.wp-block-pb-accordion-item h2 + h2 {
    margin-top: 1rem;
}
*/

.c-accordion__title {
    padding: 1.5rem;
    padding-left: 3rem;
    margin: 0;
    color: #4c4c4c;
}
.c-accordion__title:after {
    left: .75rem;
    right: auto;
    color: inherit;
    content: '[+]';
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
}

.is-open > .c-accordion__title:after {
    content: '[–]';
}

.wp-block-pb-accordion-item.is-open h2 {
    background-color: var(--wp--preset--color--secondary);/*#00a0cc;*/
    color: #fff;
}

.c-accordion__content {
    background: #ebebec;
    color: #4c4c4c;
    margin: 0;
    padding: 1.5rem 3rem;
}

/*
|--------------------------------------------------------------------------
| FAQ / Support
|--------------------------------------------------------------------------
*/
/**************************** FROM SUPPORT ************************/
#support-page .answer {
    color: #4c4c4c;
    background-color: #EBEBEC;
    margin-top: 5px;
    margin-bottom: 10px;
}

#support, #support-section1 {
    padding-bottom: 0 !important;
}

#support-section1, #support-section2 {
    padding-top: 60px !important;
}

#support-page .faq-btn {
    /*max-width: 250px;*/
    width: 240px;
    height: 41px;
    background: #EBEBEC 0% 0% no-repeat padding-box;
    opacity: 1;
    font-size: 1.125rem;
    line-height: 41px;
    margin: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

#support-page .faq-btn:hover {
    background-color: #00A0CC;
    color: #ffffff;
}

#support-page .faq-active {
    background-color: #E35205;
    color: #ffffff;
}

#faq-search input {
    max-width: min(441px, calc(100% - 60px));
    height: 60px;
    padding-left: 60px;
}
.search-bar input{
    background-image: url("../../plugins/i3-website-bridge/i3_Website/images/icons/search20.png");
    background-position: left 20px center;
    background-repeat: no-repeat;
    padding-left: 50px;
    font-size: 1.3125em;
    width: 100%;
    height: 48px;
    border: 1px solid #e8e8e9;
    border-radius: 48px;
}

.section-ct{
    padding-top: 6.5em;
    padding-bottom: 6.5em;
    text-align: center;
}
.section-ct h2{
    font-size: 2.25em;
    line-height: 1.2;
}
.section-ct .image-wrapper{
    height: 250px;
}
.section-ct ul{
    margin-left: 50px;
    margin-right: 50px;
}


.section-icons{
    padding-top: 7em;
    padding-bottom: 7em;
}

.section-icons h2{
    font-size: 3.375em;
    font-weight: 700;
    letter-spacing: -.54px;
    line-height: 1.2;
    text-align: center;

}
.section-icons .row{
    flex-wrap: wrap;
    justify-content: center;
}
.section-icons .row .col{
    width: 300px;
    margin-left: 15px;
    margin-right: 15px;
}
.section-icons.icons-wt .row .col{
    width: 375px;
}
.section-icons img{
    width: 130px;
    height: 130px;
}
.section-icons .label{

    text-align: center;
    font-size: 1.875em;
    font-weight: 700;
    letter-spacing: 0px;
}
.section-icons .p3{
    text-align: center;
    margin: 0;
}


/************************* ACCORDION **************************/
.ui-icon.iconOpen {
    background:url('../../plugins/i3-website-bridge/i3_Website/images/icons/icon-accordion-collapse.svg') no-repeat !important;
    /*background-size:20px;*/
    width:25px;
    height:20px;
    margin-top: 0;
}
.ui-icon.iconClosed {
    background:url('../../plugins/i3-website-bridge/i3_Website/images/icons/icon-accordion-expand.svg') no-repeat !important;

    width:25px;
    height:20px;
}
.ui-accordion .ui-accordion-header {
    margin-top: -1px !important;
    padding-top: 1em !important;
    padding-bottom: 1em !important;

}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    color: #4C4C4C !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: none !important;
    background: #00A0CC !important;
    color: #ffffff !important;
}
.ui-widget-content {
    border: none !important;
    background: #EBEBEC !important;

}
.accord h3 span{
    margin-right: 10px;
}

/*
|--------------------------------------------------------------------------
| Careers
|--------------------------------------------------------------------------
*/
.job-posting {
    flex: 1 1 30%;
}

/******************** CAREERS ***************************/
#careers-section1 .image-wrapper{
    height: 100px;
    width: 100px;
}
#careers-section1 .market-button{
    background: #EBEBEC 0% 0% no-repeat padding-box;
    opacity: 1;
    /* height: 41px; */
    padding: 5px 20px;
    font-size: 1.125em;
    text-align: center;
    margin: 5px;
}
.market-button:hover{
    background-color: #00A0CC !important;
    color: #ffffff;
}
.market-button-active{
    background-color: #E35205 !important;
    color: #ffffff !important;
}

/*************** JOB DESCRIPTION *************************/
#job-section ul{
    list-style: square;
    margin-left: 60px;
}
#job-section li{
    color: #00A0CC;
}
#job-section li span{
    color: #4c4c4c;
}



/*
|--------------------------------------------
| Responsive
|--------------------------------------------
*/
@media (max-width: 800px) {
	#flow {
		font-size: 12px !important;
	}

	.pod-btn, .speed-btn, .big-button {
		width: 99px !important;
		height: 99px !important;
	}

	.plr60 {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.hero h1 {
		font-size: 8vw !important;
		padding-bottom: 10vw !important;
	}
	
	#internet-hero h1 {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	#internet-hero h2 {
		font-size: 6vw !important;
	}
	.speed-btn.package-item .pt10 {
		padding-top: 0px !important;
	}
}

@media (max-width: 768px) {
	#flow {
		border-radius: 0 !important;
	}
}
@media (max-width: 550px) {
	#cart-total-amount2, #summary-extra, #referral-form {
		position: unset !important;
	}
	
	#current-address {
		top: 45px !important;
	}
	
	.nav-buttons {
		top: 15px !important;
	}
	
	.text-speed, #phone-txt {
		margin-top: 20px !important;
	}
	
	#next, #back {
		width: 40px !important;
		height: 40px !important;
	}
	
	.circle::after {
		border-width: 12px !important;
	}

	.ga-title,
	.ga-title + .t16.gray {
		padding-left: 65px;
		padding-right: 65px;
	}

	.t10.pl50:not(.pr50) {
		padding-right: 50px;
	}

	#internet-section2 .row .col {
        	width: unset !important;
    	}
	.button a, .button input, .button button {
		height: auto;
	}
	.hero .button a {
		line-height: 1 !important;
		font-size: 1.5em;
	}
	.hero h2{
		line-height: 1.2;
	}
	.h2a{
		font-size: 2.375em !important;
	}
	.span-list{
		text-align: left;
	}
	.section-ct ul {
    	margin-left: 50px;
    	margin-right: 50px;
	}
	.text-speed.plr60{
		padding-left: 0;
		padding-right: 0;
	}
	.text-speed span{
		padding-left:30px;
	}
	.text-pod.plr50{
		padding-left: 0;
		padding-right: 0;
	}
	#phone-txt{
		max-width: unset !important;
	}
	#guide-section1 .mlr110{
		margin-left: 30px !important;
		margin-right: 30px !important;
	}
	#tos-section1 ul.icons strong{
		font-size: 1.75em !important;
	}
	#tos-section1 ul.icons {
    	padding-inline-start: 0px;		
	}
}

@media(max-width: 400px){
	#complete-form input, #pay-form input, #pay-form select {
    	margin-left: 25px !important;
    	margin-right: 25px !important;
	}
	#tv-page .t54{
		font-size: 2.375em !important;
	}
	#pod-buttons{
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}