/* ==========================================================================
   Count On Sheep - shared site chrome (header + footer), copied from the
   homepage (site/index.html) so hub/course pages match countonsheep.com.
   Sources:
   - hubfs/hub_generated/module_assets/1/192817924168/.../module_Header.min.css
   - hubfs/hub_generated/template_assets/.../template_style.min.css (vars, buttons)
   - hubfs/hub_generated/template_assets/.../template_layout.min.css (container)
   - homepage inline blocks: cos-diy-dropdown-fix v1, cos-nav-fit v2
   The header is rendered permanently in the homepage "sticky" (scrolled)
   state: solid white background, dark logo, dark nav links.
   ========================================================================== */

@import url("../css2@family=Inter%253Aital,opsz,wght@0,14..32,100..900%3B1,14..32,100..900&display=swap.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");

:root{--primary-font:"Inter",sans-serif;--color-black:#303030;--color-green:#b1e358;--color-blue-variant:#02454e;--container-padding:15px}

/* Fixed header needs room; header-row min-height is 110px */
body{padding-top:110px}

/* Base bits the header markup relies on (from template_layout/template_style) */
#header{font-family:var(--primary-font);font-size:18px;line-height:1.38}
#header *{box-sizing:border-box}
#header .container{margin:0 auto;padding:0 var(--container-padding)}
#header a{transition:.3s ease}
#header a:hover{text-decoration:none}
#header p.nav-text a:hover{text-decoration:underline}
#header img{height:auto;max-width:100%}
#header a.btn-white{align-items:center;background:#fff;border-radius:0;color:var(--color-black);display:inline-flex;font-size:20px;font-weight:600;height:110px;justify-content:center;line-height:1;padding:0;text-align:center;text-decoration:none;width:237px}
#header a.btn-white:hover{background:var(--color-green);color:var(--color-black);opacity:1}
#header a.btn-green{align-items:center;background:#9cec13;border-radius:12px;color:var(--color-black);display:inline-flex;font-family:Inter;font-size:14px;font-style:normal;font-weight:700;line-height:20px;padding:8px 20.5px;text-align:center;text-decoration:none}
#header a.btn-green:hover{opacity:.85}

/* ---- module_Header.min.css (verbatim copy; border-gradient image swapped
       for a plain gradient so no legacy asset path is needed) ---- */
#header{border-bottom:1px solid hsla(0,0%,100%,.5);position:fixed;top:0;width:100%;z-index:10000}
#header,#header.sticky{transition:all .3s ease}
#header.sticky{background-color:#fff;box-shadow:0 4px 12px hsla(0,0%,100%,.8)}
#header .logo img{max-width:100%}
#header .logo-white img{height:auto;width:237px}
#header .logo-dark,#header.sticky .logo-white{display:none}
#header.sticky .logo-dark{display:inline-block}
#header.sticky .logo-dark img{height:auto;width:237px}
.header-logo-container{margin-right:5%}
@media (max-width:1340px){.header-logo-container{margin-right:0}}
#header .container{max-width:100%;width:1500px}
.header-row{gap:80px;min-height:110px;padding:0;position:relative;width:100%}
#nav,.header-row{align-items:center;display:flex}
#nav{gap:24px}
#nav ul{display:flex;gap:35px;list-style:none;margin:0;padding:0}
#nav ul li{position:relative}
#nav ul li a{align-items:center;color:#fff;display:inline-flex;font-size:15px;font-weight:500;padding:10px;text-decoration:none}
.sticky #nav ul li a{color:var(--color-black)}
#header #nav ul li a.active,#nav ul li a:hover,.sticky #nav ul li a:hover{color:var(--color-green)}
#nav ul li.hs-item-has-children>a:after{content:"\f078";font-family:"Font Awesome 6 Free";font-size:12px;font-weight:900;margin-left:6px;margin-top:5px;transition:transform .3s ease}
#header .hs-menu-children-wrapper{background:#fff;box-shadow:0 10px 20px rgba(0,0,0,.1);display:none;left:0;min-width:300px;opacity:0;padding:15px 0;pointer-events:none;position:absolute;top:100%;transition:opacity .2s ease,visibility .2s ease;visibility:hidden;z-index:99}
#header .hs-menu-item.hs-item-has-children .hs-menu-children-wrapper a{font-size:18px;padding-left:20px}
#header .hs-menu-item.hs-item-has-children:hover .hs-menu-children-wrapper{display:block;opacity:1;pointer-events:auto;visibility:visible}
#header a.btn-white{bottom:0;margin:0 -25px 0 0;position:absolute;right:0}
#header ul.header-social{display:flex;flex-wrap:wrap;gap:20px}
#header ul.header-social li a{color:#fff;display:inline-block;text-decoration:none}
.header-social li a:hover{color:var(--color-green)}
.menu-toggle{display:none}
@media (max-width:1260px){.header-row{gap:18px;justify-content:space-between}#header a.btn-cta{position:static}#nav ul{gap:18px}}
@media (max-width:991px){
#header{border-bottom:0;box-shadow:none!important}
#header .container{padding:0}
#header.open{background:#fff;background:rgba(0,0,0,.8)}
.menu-toggle{-webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;display:block;height:37px;line-height:0;margin-right:20px;padding:0;position:relative;width:37px;z-index:9999;-webkit-tap-highlight-color:transparent;color:#fff;pointer-events:auto}
.menu-toggle .icon{display:block;height:32px;pointer-events:none;width:32px}
.menu-toggle .icon--close,.menu-toggle.open .icon--menu{display:none}
.menu-toggle.open .icon--close{display:block}
#header.sticky .menu-toggle{color:var(--color-black,#111)}
#header.open .menu-toggle{color:#fff}
.menu-toggle .icon line{vector-effect:non-scaling-stroke}
#nav{background:#fff;background:rgba(0,0,0,.8);display:none;flex-direction:column;left:0;min-height:100vh;padding:20px;position:absolute;top:100%;width:100%}
#nav ul,#nav.open{display:block}
#nav ul li.hs-item-has-children>a:after{content:"\f078"}
#nav ul li.open>a:after{content:"\f077"}
#header .hs-menu-children-wrapper{box-shadow:none;display:none!important;opacity:1;padding-left:15px;pointer-events:auto;position:static;visibility:visible}
#header .hs-menu-item.open .hs-menu-children-wrapper{display:block!important}
#header .btn-white,#header a.btn-white{display:none}
#header .mobile-nav .btn-white,#header .mobile-nav a.btn-white{display:inline-block}
#header .logo{margin-left:20px}
#nav ul li a{display:block;font-size:25px;font-weight:500;padding-bottom:15px}
#nav ul li a.active{font-weight:700}
.sticky #nav ul li a{color:#fff}
#header #nav ul li a.active,#nav ul li a:hover,.sticky #nav ul li a:hover{color:var(--color-green)}
#nav ul{text-align:left}
#nav{padding-left:40px;padding-right:40px}
.border-gradient{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent);display:block;height:1px;margin:15px auto;max-width:100%;text-align:center;width:100%}
p.nav-text{align-items:center;color:#fff;display:flex;font-size:16.4px;font-weight:400;line-height:1.281;margin-bottom:5px;margin-top:25px;text-align:left}
p.nav-text img{margin-right:12px}
p.nav-text a{color:#fff;text-decoration:none}
p.nav-text a:hover{text-decoration:underline}
#header .btn-green{margin:12px 0 14px;padding:13px 63px}
.header-row{border-bottom:1px solid hsla(0,0%,100%,.5)}
}
@media (max-width:360px){p.nav-text{display:block}p.nav-text span{display:inline-block}}
@media (min-width:992px){#nav ul li.hs-item-has-children:hover>a:after{transform:rotate(180deg)}.mobile-nav{display:none}}

/* ---- cos-diy-dropdown-fix v1 (homepage inline block) ---- */
#header .hs-menu-children-wrapper{min-width:240px;padding:10px 0;border-radius:8px}
#header .hs-menu-item.hs-item-has-children .hs-menu-children-wrapper a{color:#0f3a3a!important;font-size:16px!important;font-weight:500;padding:10px 22px!important;display:block;white-space:nowrap;transition:color .15s ease,background .15s ease}
#header .hs-menu-item.hs-item-has-children .hs-menu-children-wrapper a:hover{color:#B1E358!important;background:rgba(177,227,88,0.08)}

/* ---- cos-nav-fit v2 (homepage inline block) ---- */
@media (min-width:1024px){#nav .hs-menu-wrapper>ul[role="menu"]{margin-right:235px;gap:6px}#nav .hs-menu-wrapper>ul[role="menu"]>li>a{white-space:nowrap;padding-left:18px;padding-right:18px}}

/* ---- Footer: markup carries homepage inline styles; keep Inter like the
        homepage (its inline font-family:inherit resolves to Inter there) ---- */
#footer{font-family:var(--primary-font)!important}
#footer *{box-sizing:border-box}