/* ============================================================
   County-style header for the Employee Portal
   Ported from www.herkimercountyny.gov (atlas.css + custom.css)
   Must load AFTER default.css — includes overrides for the
   legacy portal header/mobile-bar styles in default.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

:root{
  --clr--cadetblue: rgb(76,115,175,1);
  --clr--accent-yellow: #efe544;
}

/* -- Helpers (from atlas.css) -------------------------------- */
.textright{text-align:right;}
@media screen and (min-width:681px){
  header .mobile{display:none;}
  header .desktop{display:block;}
}
@media screen and (max-width:680px){
  header .mobile{display:block;}
  header .desktop{display:none;}
}

/* -- Header frame (overrides legacy fixed header) ------------ */
header{position:relative;float:none;width:100%;top:0;height:auto;margin:0;background:#fff;border-bottom:0;box-shadow:none;z-index:1000;font-family:'Open Sans',sans-serif;}
header .container{position:relative;max-width:1280px;}
header .main-header{height:105px;}
@media screen and (min-width:681px){
  header .main-header{min-height:120px;}
}
header .header-right{float:right;margin:0;}

/* page content no longer sits beneath a fixed header */
.main-content{margin-top:0;}
@media screen and (max-width:965px){
  header{display:block;}       /* default.css hides header here for the old mobile bar */
  .alert-bar{display:block;}   /* default.css hid this in favor of the removed .mobile-bar */
}
@media screen and (max-width:500px){
  .main-content{margin-top:0;}
}

/* -- Top utility bar ------------------------------------------ */
header .topnav{background-color:#f1f1f1;color:#504e4f;}
header .topnav .col{margin-top:0.5em;margin-bottom:0.5em;}
header .topnav a{margin-left:0.5em;margin-right:0.5em;color:#0085CA;}
header .topnav a:hover{color:#302a7e;}
@media screen and (max-width:680px){
  header .topnav{display:none;}
}

/* -- Logo ------------------------------------------------------ */
.logo, .logo img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;}
header .logo{position:absolute;max-width:150px;}
header .logo img{max-width:100%;}
@media screen and (max-width:680px){
  /* match main site: header overlays content, mean-bar menu shows through */
  header{position:absolute;left:0;right:0;background:transparent;box-shadow:none;}
  header .main-header{height:auto;width:170px;margin:0 auto;}
  header .logo{max-width:75px;margin-top:0.25em;margin-left:1.75em;}
}

/* -- CTA pills (used in header, mobile menu, and breadcrumb bar) */
.cta{
  display:inline-block;margin:0 0.125em;padding:0.5em 1.125em;border-radius:2em;
  font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;
  vertical-align:middle;background-color:#3ca9a3;color:#fff;border:0;text-decoration:none;
  transition:all 0.2s ease;}
.cta:hover{background-color:#9ed09d;color:#202020;}
.cta.secondary{background:#ffcd00;}

/* -- Desktop nav (from atlas.css + custom.css) ----------------- */
header nav{clear:both;float:none;width:100%;margin:0;padding:0;font-weight:800;}
@media screen and (min-width:681px){
  header nav{display:block;}
  header nav ul{display:table;float:none;width:100%;margin:0;padding:0;list-style-type:none;text-align:left;}
  header nav ul li{display:inline;float:left;text-align:left;margin:0;padding:0;height:auto;font-size:1em;}
  header nav ul li, header nav ul li:hover{background:transparent;}
  header nav ul li > a{position:relative;display:block;padding:0.5em 0.75em;font-size:1em;text-transform:none;color:#535559;}
  header nav ul li:hover > a, header nav ul li:hover a{color:#3ca9a3;}
  header nav ul li > ul{display:none;position:absolute;top:auto;left:auto;margin:0;padding:0;width:275px;z-index:999;background:#fff;-webkit-box-shadow:0 10px 15px rgba(0,0,0,0.15);box-shadow:0 10px 15px rgba(0,0,0,0.15);}
  header nav ul li:hover > ul{display:block;}
  header nav ul li ul > li{position:relative;display:block;float:none;width:100%;height:auto;margin:0;padding:0;font-size:1em;border-bottom:solid 1px #006396;}
  header nav ul li ul li > a{display:block;margin:0;padding:0.75em 3.25em 0.75em 1.25em;font-size:15px;width:100%;text-transform:none;color:#535559;}
  header nav ul li ul li:hover > a{color:#fff;background-color:#006396;}
  header nav ul li ul li > ul{position:absolute;top:0;left:100%;}
  header nav ul li > a:after{position:absolute;right:0;width:40px;text-align:center;opacity:0.5;font-family:"Font Awesome 6 Free";font-weight:900;content:"\f0da";-webkit-transition:0.15s linear;-moz-transition:0.15s linear;transition:0.15s linear;transform-origin:50% 50%;}
  header nav ul li:hover > a:after{-webkit-transform:rotateZ(90deg);-moz-transform:rotateZ(90deg);transform:rotateZ(90deg);}
  header nav ul li > a:only-child:after{display:none;content:'';}
  header nav ul li ul li > a:only-child{display:block;padding:0.75em 1.25em;}
  header nav.right ul.nav{display:block;width:auto;float:right;}
}
/* nav menu enhancements (from custom.css) */
header nav.right{margin-top:1.75em;}
header nav ul li{font-family:'Montserrat',sans-serif;font-weight:700;}
header nav ul li > a{padding-right:2em;text-transform:uppercase;}
@media screen and (min-width:681px){
  header nav ul li:hover > a, header nav ul li:hover a{color:#ffce07;}
  header nav ul li ul > li{border-bottom:1px solid #302a7e;}
  header nav ul li ul li:last-child{border-bottom:0;}
  header nav ul li ul li > a{background:#fff;}
  header nav ul li:hover ul li a{color:#535559;} /* parent hover must not tint submenu links */
  header nav ul li ul li:hover > a{color:#fff;background:#302a7e;}
  header nav ul li:hover > ul{
    -webkit-box-shadow:0px 0px 15px 0px rgba(32,32,32,0.15);
    -moz-box-shadow:0px 0px 15px 0px rgba(32,32,32,0.15);
    box-shadow:0px 0px 15px 0px rgba(32,32,32,0.15);
    border-radius:10px;}
  header nav ul li:hover ul li:first-child a{border-top-left-radius:10px;border-top-right-radius:10px;}
  header nav ul li:hover ul li:last-child a{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
}
/* responsive nav sizing (from custom.css) */
@media screen and (max-width:1300px) and (min-width:681px){
  header nav ul li > a{font-size:0.9em;padding:0.5em 2em 0.5em 0.75em;}
}
@media screen and (max-width:1190px) and (min-width:681px){
  header nav ul li{padding:0;} /* overrides default.css 20px paddings */
}
@media screen and (max-width:1080px) and (min-width:681px){
  header nav ul li > a{font-size:0.9em;padding:0.5em 2em 0.5em 0.5em;}
}
@media screen and (max-width:780px) and (min-width:681px){
  header nav ul li > a{font-size:0.8em;padding:0.5em 2em 0.5em 0.5em;}
}

/* -- Side social button (from custom.css) ---------------------- */
header .side-social{
  position:fixed;display:block;top:280px;right:10px;margin:0;padding:0.35em 0;width:50px;
  background:#fff;border-radius:2em;
  -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.1);box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
  z-index:9999;}
header .side-social li{display:block;margin:0;padding:0;width:100%;text-align:center;}
header .side-social li a{
  margin:0.1em auto;padding:0.25em 0 0 0;width:40px;height:40px;
  font-size:1.65em !important;font-weight:normal;color:#fff;text-align:center;vertical-align:middle;
  background-color:#302a7e;border-radius:2em !important;border:2px solid #302a7e;transition:all 0.4s ease;}
header .side-social li a:hover{color:#fff;background-color:#ffcd00;border-color:#ffcd00;}
@media screen and (max-width:990px){
  header .side-social{display:none;}
}

/* -- Mobile MeanMenu theming (from atlas.css + custom.css) ------ */
.mean-container a.meanmenu-reveal{top:7px !important;color:#202020 !important;}
.mean-container a.meanmenu-reveal span{color:#202020 !important;background:#202020 !important;}
.mean-container .mean-bar{background:#fff !important;margin-bottom:0;}
.mean-container .mean-nav{background:#302a7e !important;}
.mean-container .mean-nav li{background:#302a7e !important;}
.mean-container .mean-nav ul li{padding:0;}
.mean-container .mean-nav ul li ul li{background:#302a7e !important;} /* overrides default.css #f1f1f1 */
.mean-container .mean-nav ul li a{font-weight:bold;color:#fff !important;}
.mean-container .mean-nav ul li li a{opacity:1 !important;color:#fff;}
.mean-container .mean-nav ul li a.cta{
  border:0;border-radius:0;width:100%;padding:1em 0;text-indent:5%;background:#3ca9a3;color:#fff !important;}
.mean-container .mean-nav ul li a.cta.secondary{background:#ffcd00;}
.mean-container .mean-nav ul li.highlight{display:flex;float:none;margin:0.5em auto;width:90%;border-radius:2em;}
.mean-container .mean-nav ul li.highlight a.cta{text-align:center;font-size:1.25em;border-radius:2em;border:0;}
.mean-container .mean-nav ul li.social a{padding:0.5em 0;text-align:center;color:#fff;font-size:2em;font-weight:normal;}
.mean-container .mean-nav ul li.social a.cta{padding:0.5em 0;}
.mean-container .mean-nav ul li.span12 a{width:100%;}
/* overrides for legacy default.css mean-bar tweaks */
@media screen and (max-width:965px){
  .mean-container .mean-bar{height:auto;}
}
@media screen and (max-width:768px){
  .mean-container .mean-nav{margin-top:65px !important;}
}

/* ============================================================
   County-style footer (ported from atlas.css + custom.css)
   Overrides the legacy portal footer styles in default.css.
   ============================================================ */
footer{width:100%;margin:0;padding:0;color:#fff;background:#302a7e;text-align:left;}
footer .container{max-width:1280px;}
footer a{color:#fff;}
footer a:hover{color:#9ED09D;}
footer .logo{display:inline-block;float:none;margin:0.25em;padding:0;width:45%;max-width:150px;}
footer p{font-size:0.9em;}
footer .col.span5 ul{margin:0.35em 0;padding:0 0 0 40px;list-style:disc;}
footer .col.span5 ul li{display:list-item;margin:0;padding:4px 0;}
footer .copyright{margin:0;padding:1.25em 0;color:#fff;background:rgba(0,0,0,0.3);font-size:0.95em;font-family:inherit;}
footer .copyright a{color:#fff;}
footer .copyright a:hover{color:#eee;}
@media screen and (max-width:965px){
  footer .logo{display:inline-block;} /* default.css hides it here */
}
@media screen and (max-width:680px){
  footer p{text-align:center;}
  footer .col.span5 ul{display:inline;margin:0;padding:0;text-align:center;list-style:none;}
  footer .col.span5 ul li{display:inline;margin:0 0.25em;padding:0;white-space:nowrap;}
  footer .logo{max-width:70%;margin:1em auto 0 auto;}
}

/* -- Return to top button (from atlas.css) --------------------- */
#return-to-top{display:none;position:fixed;bottom:1em;left:1em;width:50px;height:50px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:rgba(0,0,0,0.35);text-decoration:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;z-index:1000;}
#return-to-top i{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);font-size:1.15em;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;}
#return-to-top:hover{background:rgba(0,0,0,0.75);}
#return-to-top:hover i{transform:translate(-50%,-80%);}

/* -- Mobile call CTA bar (from custom.css) --------------------- */
.call-mobile{display:none;position:fixed;bottom:0;width:100%;left:0;right:0;height:80px;z-index:10;}
.call-mobile .cta{
  display:inline-block;float:left;
  font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;
  background-color:#3ca9a3;color:#fff;
  margin:0;padding:1.15em 0 0 0;text-align:center;width:50%;font-size:1.15em;line-height:1em;border:0;border-radius:0;min-height:80px;}
.call-mobile .cta.secondary{background:#ffcd00;}
@media screen and (max-width:680px){
  body{padding-bottom:80px;}
  .call-mobile{display:block;}
}

/* ============================================================
   County-style hero banner (title in white text over image)
   Ported from atlas.css + custom.css ".parallax-banner" /
   ".intro.parallax-banner". Used by templates/hero-home.tpl
   on the portal's main landing page.
   ============================================================ */
.parallax-banner{position:relative;margin:0;padding:0;width:100%;}
.parallax-banner .simpleParallax{position:absolute;width:100%;height:100%;overflow:hidden;}
.parallax-banner img.parallax{position:absolute;width:100%;height:100%;object-fit:cover;}
.parallax-banner .overlay{
  position:absolute;width:100%;height:100%;
  background:rgb(34,44,97);
  background:linear-gradient(45deg, rgba(39,44,97,0.75) 30%, rgba(255,255,255,0) 70%);}
.parallax-banner .container{padding:0 1em;color:#fff;position:relative;}
.parallax-banner h1{margin-top:0;font-size:2.5em;font-weight:normal;line-height:1.1em;color:#fff;font-family:'DM Serif Text',serif;}

.intro.parallax-banner{display:inline-block !important;} /* avoids overlap with open mobile menu */
.intro.parallax-banner .container{display:flex;align-items:center;height:160px;padding:0 1em;}
@media screen and (min-width:681px){
  .intro.parallax-banner .container{height:220px;}
}
@media screen and (max-width:680px){
  .intro.parallax-banner .container{height:130px;}
  .intro.parallax-banner h1{font-size:1.8em;}
}

/* ============================================================
   Breadcrumb / account bar (Main County Site + Employee Portal
   buttons, with the signed-in user's name and logout below).
   Overrides the legacy plain-text ".bread-crumbs" styling in
   default.css.
   ============================================================ */
.bread-crumbs{padding:1.25em 0;}
.bread-crumbs .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.75em 1.5em;}
.bread-crumbs .crumb-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0.6em;}
.bread-crumbs .crumb-nav .cta{margin:0;padding:0.6em 1.5em;font-size:0.95em;}
.bread-crumbs .crumb-current{
  margin-left:0.4em;padding-left:0.9em;border-left:1px solid rgba(255,255,255,0.35);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.95em;color:#ffcd00;}
.bread-crumbs .crumb-account{
  display:flex;align-items:center;flex-wrap:wrap;gap:1em;
  font-family:'Open Sans',sans-serif;}
.bread-crumbs .crumb-welcome{font-size:0.95em;color:#fff;}
.bread-crumbs .crumb-welcome i{margin-right:0.4em;color:#ffcd00;}
.bread-crumbs .crumb-logout{
  display:inline-flex;align-items:center;gap:0.4em;
  padding:0.4em 1em;border-radius:2em;
  background:rgba(255,255,255,0.12);color:#fff;
  font-size:0.9em;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,0.4);
  transition:all 0.2s ease;}
.bread-crumbs .crumb-logout:hover{background:#ffcd00;color:#272c61;border-color:#ffcd00;}
@media screen and (max-width:680px){
  .bread-crumbs .container{justify-content:center;text-align:center;}
  .bread-crumbs .crumb-nav, .bread-crumbs .crumb-account{justify-content:center;width:100%;}
  .bread-crumbs .crumb-current{margin-left:0;padding-left:0;border-left:0;flex-basis:100%;text-align:center;}
}