/* ==========================================================================
     Project:     IQ Brick
     Date:        10/14/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
     --white: #fff;
     --warm-black: #262222;
     --red: #AD2A0C;
     --beige: #F4EDE2;
     --moss-green: #EDEDE8;
     --mushroom: #A78A7F;
}

/* ==========================================================================
     Typopgraphy
========================================================================== */

body {color: var(--warm-black);font-family: "Noto Sans", sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { margin-bottom: 2rem; color: var(--warm-black);font-family: "Noto Sans", sans-serif;font-weight:900}
p {margin-bottom: 1.5rem;}
h2 {position: relative;margin-top: 10px}
h2::after {content:""; position: absolute; top: -10px; left: 0px; width: 50px; height: 3px; background: var(--red);z-index: 0}
h2.text-center::after, .text-center h2::after {left: 50%; transform: translateX(-50%)}
h2.no-line {margin-top: 0px}
h2.no-line::after {content:none}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;overflow-x:hidden;}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--red); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:900;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white)}

/* Header */
.header-wrapper {position: absolute; top: 30px; left: 0px; width: 100%; z-index: 3;}

.headermenu a {text-decoration: none;display:block;transition: color 250ms ease;position: relative;}
.headermenu ul {list-style:none; padding: 0px;}

.headermenu .mainmenu {display:flex; list-style:none; padding: 0px;margin: 0px;position: relative}
.headermenu .mainmenu a:not(.btn) {color: var(--white);font-weight: 900;font-size: .813rem; line-height: 1.25; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: border 250ms ease;}
.headermenu .mainmenu > li {display:inline-block;margin-bottom: -20px; margin-left: 20px; margin-right: 20px;padding-bottom:20px; position: relative;display:flex; align-items: centerurl(http://127.0.0.1:5500/mockups/home.html); text-align:center}
.headermenu .mainmenu > li:hover > a:not(.btn), .headermenu .mainmenu > li a:not(.btn):focus  {color: var(--white); border-bottom: 2px solid var(--red);}

.headermenu .dropdown {visibility: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,.4); opacity: 0; padding: 5px 7.5px;transition: all 250ms ease; top:calc(100% - 5px);text-transform: none;text-align:left; background: var(--white); border-radius: 5px; width: 200px;position: absolute; left: -15px}
.headermenu .dropdown li:not(:last-child) { border-bottom: 1px solid var(--beige)}
.headermenu .dropdown.active {visibility: visible;opacity: 1;top: calc(100% - 10px)}
.headermenu .dropdown a:not(.btn) {padding: 7.5px; color: var(--warm-black); font-size: .75rem; font-weight:700; border:none}
.headermenu .dropdown > li > a:not(.btn):hover, .headermenu .dropdown > li > a:not(.btn):focus {color: var(--red)}
.headermenu .dropdown > li:hover > a:not(.btn), .headermenu .dropdown > li a:not(.btn):focus {border:none; color: var(--red)}

/* Offcanvas */
.offcanvasmenu { position:fixed; visibility:hidden; top: 90px; opacity: 0;width: calc(100% - 1.5rem); max-height:calc(100% - 100px); left: .75rem; background: var(--white); overflow-x:hidden; overflow-y:auto;border-radius: 3px;}
.offcanvas-open .offcanvasmenu {transition: opacity 250ms ease; visibility: visible;opacity: 1}

.offcanvasmenu ul {list-style:none; padding: 0px;margin: 0px;}
.offcanvasmenu .mainmenu {font-weight: 900; font-size: .875rem;}
.offcanvasmenu li {position: relative; }
.offcanvasmenu li:last-child {display:none}
.offcanvasmenu li a[aria-haspopup] {margin-right: 55px;}
.offcanvasmenu li .fa-angle-down {font-size: 1rem; transition: transform 200ms ease-in-out}
.offcanvasmenu li .fa-angle-down.rotate {transform: rotate(-180deg)}
.offcanvasmenu .mainmenu a {color: var(--warm-black); padding: 15px;text-decoration: none;  display: flex; align-items:center;transition: color 250ms ease;}
.offcanvasmenu .mainmenu a:hover, .offcanvasmenu .mainmenu a:focus {color:var(--red); }
.offcanvasmenu .mainmenu > li:not(:last-child) {border-bottom: 1px solid var(--beige)}
.offcanvasmenu .mainmenu .btn-dark-blue {border:none; margin: 5px; border-radius: 5px; width: calc(100% - 10px); color: var(--white); }

.offcanvasmenu .mainmenu > li:nth-last-child(3) {padding: 15px;}
.offcanvasmenu .mainmenu > li:nth-last-child(3) a {padding: 0px}

.offcanvasmenu .btn-toggle-dropdown {position: absolute; top: 10px; right:15px; width: 35px; height:35px;padding: 0px;border-radius: 4px; border: none; background: var(--beige); color: var(--warm-black)}
.offcanvasmenu .btn-toggle-dropdown:hover, .offcanvasmenu .btn-toggle-dropdown:focus {background: color-mix(in srgb, var(--beige) 95%, var(--warm-black));}

.offcanvasmenu .dropdown {border-left: 3px solid var(--red); margin: 0px 15px 15px 15px;font-weight: 400;display:none;}
.offcanvasmenu .dropdown.active {display:block;}
.offcanvasmenu .dropdown a {padding: 10px;}
.offcanvasmenu::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
.offcanvasmenu::-webkit-scrollbar-track-piece {margin: 15px 0px;}
.offcanvasmenu::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}

.btn-toggle-offcanvas {margin: 0px; border-radius: 0px; height: 36px;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity;text-transform:none;color:inherit;border:0;}
.hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:2.5px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3.5px;background-color:var(--white); right: 0px}
.hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
.hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;}
.hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.685,.19); bottom:-8px;}
.btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
.btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0; width: 100%;}
.btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg);width: 100%;}

/* Footer */
.footer-wrapper a {color: var(--white)}
.footer-wrapper a:hover, .footer-wrapper a:focus {color: var(--red)}
.footer-wrapper .brick-3d {position: absolute; bottom: -5px;}

/* Intro */
#intro {scroll-margin-top: -20px}

/* ==========================================================================
     Components
========================================================================== */ 

/* Links */
a {color: var(--red);text-decoration: underline;}
a:hover { text-decoration: none;color: var(--warm-black)}

/* Backgrounds */
.bg-beige {background: var(--beige)}
.bg-moss-green {background: var(--moss-green)}
.bg-warm-black {background: var(--warm-black)}
.bg-radial-gradient-white {position: relative;z-index:0}
.bg-radial-gradient-white::before {content:""; position: absolute; top: 50%; left: -30%; z-index: -1; transform: translateY(-50%); width: 500px; height: 200px; background: radial-gradient(50% 50% at 50% 50%, var(--white) 0%, rgba(255, 255, 255, 0.00) 100%);}
.bg-mushroom {background: var(--mushroom)}
.bg-brick {position: relative;}
.bg-brick::before {background: url(/img/bg-brick-texture.webp); background-size: cover; opacity: .1; z-index: -1; width: 200px; height: 200px; position: absolute; content:""}
.bg-brick-top-left::before {left: -100px; top: 100px;}
.bg-brick-bottom-right::before {right: -100px; bottom: 100px;}
.bg-brick-center-left::before {top: 50%; transform: translateY(-50%); left: -100px}
.bg-white-10 {background: rgba(255,255,255,.1);}

.bg-logomark {position: relative;}
.bg-logomark::after {content:""; position: absolute; z-index: 0; width: 60px; height: 60px; object-fit: cover; background: url(/img/icon-logomark.svg); background-size: cover}
.bg-logomark.bg-logomark-bottom-left::after {left: -34px; bottom: -40px;}
.bg-logomark.bg-logomark-bottom-right::after {right: -35px; bottom: -40px;transform: scaleX(-1)}
.bg-logomark.bg-logomark-top-right::after {right: -36px; top: -40px;transform: scale(-1, -1);}

/* Images */
img {max-width: 100%; height: auto}
p:has(img:only-child) {margin: 0px}
.img-fit {object-fit: cover;width: 100%; height: 100%;}

.aspect-ratio-16-9 {aspect-ratio: 16 / 9; object-fit: cover;width: 100%; display:block;}
.aspect-ratio-1-2 {aspect-ratio: 1 / 2; object-fit: cover;width: 100%; display:block;}

/* Mastheads */
.masthead {position: relative;z-index: 0;  display: flex; align-items: center; justify-content: center;}
.masthead h1 {position: relative; z-index: 1;text-shadow: 0px 0px 15px rgba(0,0,0,.25);}
.masthead img {width: 100%; height: 100%; object-fit: cover;z-index: 0;position: absolute; inset: 0px;}

/* Indexes */
.z-0 {z-index: 0}
.z-1 {z-index: 1}

/* Slideshows */
.cards-slideshow .slick-dots {padding:0px; margin:0px; text-align:center}
.cards-slideshow .slick-dots li {display:inline-block; padding: 0px 4px}
.cards-slideshow .slick-dots button { opacity: .25; width: 7px; height: 7px; display:block; border-radius: 50%;border:none; padding: 0px; background: var(--warm-black)}
.cards-slideshow .slick-dots .slick-active button {opacity: 1; background: var(--warm-black)}
.cards-slideshow .slick-dots button:focus {outline: none}

.features-slideshow .slick-track {display: flex !important;}
.features-slideshow .slick-slide {height: inherit !important;}

.bg-warm-black .cards-slideshow .slick-dots button {background: var(--white)}
.bg-warm-black .cards-slideshow .slick-dots .slick-active button {background: var(--white)}

/* Cards */
.feature-card {border-radius: 3px; border: 1.5px solid var(--mushroom); color: var(--beige); }
.feature-card-content { background: rgba(167,138,127,.15);margin: 6px; padding: 1rem;height: calc(100% - 12px)}
.feature-card h3 {margin-bottom: 1.25rem}
.feature-card .icon-circle {margin-bottom: 1.5rem}

/* Heros */
.hero {position: relative;}

.hero-lg .hero-cta {width: 150px; padding: 7.5px; position: absolute; bottom: 10px; right: -10px;z-index: 1; color: var(--warm-black); line-height: 1.4; font-size: .75rem; font-weight: 900}
.hero-lg .btn-scroll {font-size: 1.75rem; display:block; z-index: 1; color: var(--warm-black); border-radius: 50%; width: 50px; height: 50px; background: var(--beige); position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); -webkit-text-stroke: 1px var(--beige);}
.hero-lg .btn-scroll .fas {position: absolute; top: 10px; left: 50%; transform: translateX(-50%)}

.hero-sm {min-height: 300px}
.hero-sm .hero-img {position: absolute; inset: 0; object-fit: cover; object-position: center top; z-index: 0;  width: 100%; height: 100%;}
.hero-sm::after {content:""; z-index: 1;background: rgba(0,0,0,.6); position: absolute; inset: 0; width: 100%; height: 100%;}
.hero-sm div[class*="container"] {position: relative; z-index: 2;}
.hero-sm .bg-logomark-bottom-right::after {bottom: -32px; right: -38px;}

/* Make hero content block editable. */
.hero > .cms.cms-contentmenu {
     position:absolute;
     left:25%;
     bottom: 0;
     transform: translate(-50%, 0);
     z-index: 2;
}

/* Icons */
.icon-circle {width: 55px; height: 55px;aspect-ratio: 1 / 1;}

/* ==========================================================================
     CMS Classes
========================================================================== */

/* Text */
.text-xxs {font-size: .688rem}
.text-xs {font-size: .75rem}
.text-sm {font-size: .875rem;}
.text-md {font-size: 1.063rem;}
.text-lg {font-size: 1.25rem;}

.text-beige {color: var(--beige)}

/* Buttons & Links */
.btn-red,
.btn-red-border,
.btn-red-border-wtext { border:none; text-decoration:none; padding: 7.5px 25px; transition:all 250ms ease; border-radius: 3px; text-align:center; font-weight:900; font-size: .75rem;}

.btn-red {background: var(--red); color: var(--white);}
.btn-red:hover, .btn-red:focus {background: color-mix(in srgb, var(--red) 50%, var(--warm-black)); color: var(--white);}
.bg-warm-black .btn-red:hover, 
.bg-warm-black .btn-red:focus,
.mainmenu .btn-red:hover,
.mainmenu .btn-red:focus {background: var(--white); color:var(--red)}

.btn-red-border {background: none; border: 1.5px solid var(--red); color: var(--red);}
.btn-red-border:hover, .btn-red-border:focus {background: none; border-color: color-mix(in srgb, var(--red) 50%, var(--warm-black)); color: color-mix(in srgb, var(--red) 50%, var(--warm-black));}

.btn-red-border-wtext {background: none; border: 1.5px solid var(--red); color: var(--white);}
.btn-red-border-wtext:hover, .btn-red-border-wtext:focus {background: none; border-color: var(--white);color: var(--white)}

/* Lists */
.list-red-dots {padding-left: 1rem; margin: 0px}
.list-red-dots li {margin-bottom: 7.5px}
.list-red-dots li::marker {color: var(--red);}

/* ==========================================================================
     CMS Components
========================================================================== */

/* Slideshow  */
.hero .cms-slideshow .item {position: relative;padding: 10px 10px 0px 10px;margin: 0px 5px}
.hero .cms-slideshow .item::before {width: calc(100% - 20px); height: calc(100% - 10px); content:""; position: absolute; top: 0px; left: 0px; background: var(--beige); z-index: 0}
.hero .cms-slideshow img {aspect-ratio: 3 / 2; object-fit: cover; display:block; width: 100% }
.hero .slick-controls {margin-top: 15px}
.hero .slick-controls .slick-dots button, .hero .slick-controls .slick-dots .slick-active button {background: var(--white)}
.hero .slick-controls .slick-dots li {padding: 0px 3px}

/* Photogallery  */
.photogallery .cms-photogallery img {border: 1.5px solid var(--mushroom)}

/* Btns */
.cms-slideshow .btn-primary, .cms-form .btn-primary, form[name=frmSearch] .btn-primary {background: var(--red); color: var(--white);}
.cms-slideshow .btn-primary:active, 
.cms-slideshow .btn-primary:hover, 
.cms-slideshow .btn-primary:focus,
.cms-form .btn-primary:active, 
.cms-form .btn-primary:hover, 
.cms-form .btn-primary:focus,
form[name=frmSearch] .btn-primary:hover,
form[name=frmSearch] .btn-primary:focus, 
form[name=frmSearch] .btn-primary:active {background: color-mix(in srgb, var(--red) 50%, var(--warm-black)); color: var(--white);}

/* Accordions */
.cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
.cms-accordion .card-header {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 25px 50px 25px 50px!important; color: var(--red); font-weight: 900;}
.cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none; cursor: pointer}
.cms-accordion .card-header::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.cms-accordion .card-header[aria-expanded=true] { color: var(--red); border-bottom: none}
.cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
.cms-accordion .card-body a {color: var(--red);}
.cms-accordion .card-body p {color: var(--warm-black);}
.cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden /* This last property will grow this element with it's floated children */ }
.cms-accordion .card-body::after {width: 4px; background: var(--red); content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
.cms-accordion .card-body *:last-child {margin-bottom: 0px}
.cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs .nav {margin-bottom: 0px !important}
.cms-tabs .nav p:hover {cursor: pointer}
.cms-tabs .nav-pills .nav-link {background: var(--warm-black); color: var(--white); font-weight: 900;border-radius: 0px; border:none; padding: 5px 25px}
.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--light-beige);color: var(--warm-black); }
.cms-tabs .tab-content {background: var(--light-beige); padding: 1.5rem;}
.cms-tabs .tab-content *:last-child {margin-bottom: 0px}

/* Calendar */
.cms-calendar .text-primary {color: var(--red) !important}
.cms-calendar .bg-primary {background: var(--red) !important}

/* Forms */
form[name=frmSearch] .btn-primary {border-radius: 0px}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Text */
     .h1, h1 { font-size: 2rem; } 
     .h2, h2 { font-size: 1.75rem; } 
     .h3, h3 { font-size: 1.5rem; } 
     .h4, h4 { font-size: 1.25rem; } 
     .h5, h5 { font-size: 1.0625rem; } 
     .h6, h6 { font-size: 0.9375rem; }

     /* Header */
     .header-wrapper .logo {width: 170px}

     /* Footer */
     .footer-wrapper .brick-3d {right: 0px}

     /* Heros */
     .hero-lg {padding: 120px 0px 40px 0px}
     .hero-lg .hero-cta.bg-logomark::after {content:none}
}

@media (max-width: 767.9px) {    
     /* Offcanvas */
     .offcanvas-open {overflow:hidden;}
     .offcanvas-open::after {content:""; display:block; pointer-events:none; transition: opacity 250ms ease, backdrop-filter 250ms ease; background: rgba(0,0,0,.5); backdrop-filter: blur(5px); z-index: 1; position: fixed; top: 0px; left: 0px; right: 0px; height: 100%}
}

@media (min-width: 768px) {	
     /* Header */
     .header-wrapper .logo {width: 200px}
     .header-wrapper .mainmenu .btn-red {padding: 7.5px 15px}

     /* Text */
     .h1, h1 { font-size: 2.5rem; } 
     .h2, h2 { font-size: 2rem; } 
     .h3, h3 { font-size: 1.75rem; } 
     .h4, h4 { font-size: 1.5rem; }
     .h5, h5 { font-size: 1.25rem; }
     .h6, h6 { font-size: 1rem; }

     /* Heros */
     .hero-lg {padding: 150px 0px 60px 0px}
}

@media (min-width: 992px) {	
     /* Header */
     .header-wrapper .mainmenu .btn-red {padding: 7.5px 25px}

     /* Footer */
     .footer-wrapper .brick-3d {right: -40px}

     /* Cards */
     .feature-card-content {aspect-ratio: 1 / 1;display: flex; flex-direction: column; align-items: center; justify-content: center;transition: background 250ms ease;}
     .feature-card p {opacity: 0; height: 0px; overflow:hidden;transition: all 500ms ease;}
     .feature-card:hover .feature-card-content {background: rgba(167,138,127,.25)}
     .feature-card:hover p {opacity: 1; height: auto; overflow:unset}
     .feature-card:hover .icon-circle {height: 40px; width: 40px;margin-bottom: .5rem}
     .feature-card:hover img {width: 20px}
}

@media (min-width: 1100px) {
     /* Heros */
     .hero-lg .hero-cta.bg-logomark::after {content:""}
}    

@media (min-width: 1200px) {

}    

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}