:root {
  --footerheight: 450px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.0625rem;
}

/* begin theme.simple */
div#navbar.navbar-collapse.in .nav-pills>li{ /*et mobiilivaates display blockist kasu oleks*/
	float: none;	
	margin-top: 2px;
}
.navbar-collapse.in { /* et submenuud näha oleks ilma scrollita */
	overflow-y: visible !important;
	clear: both;
}
/*disable nav collapse animation */

.collapsing { 
    -webkit-transition: none;
    transition: none;
    display: none;
}

.owl-carousel .owl-item .post-inner-image img {
    display: inline;
    width: auto;
}
/* end theme.simple */

/* project specific css */
.post-text img {
	/*padding: 10px;*/
	margin: 0 10px 10px 10px;
	_border: 1px solid #ddd;
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
}


#infoWin{
	overflow-y: auto;
	padding: 10px 10px;
}
#infoWin h3 {
	margin: 0 !important;
}

textarea {
	overflow-x: hidden;	
}

.menu-user-link > a{
	border: 1px solid;
}

.break-text{
  word-wrap: break-word;
  white-space: normal;
}

html, body{
	abackground: #f4f4f4;

	abackground-color: #e6e6e3;
    abackground-image: url(../img/pattern/shop-10-bg.png);
    sbackground-position: top center;
    sbackground-repeat: repeat-x;
}

.fact-border {
    border: 2px dotted #009DFF;
}

.page-header-custom-background {
    border-bottom: 1px solid #e9e9e9;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    background: url(../img/headerbg2.png) top right;
}

.page-header-title{
	color: #aaa;
	font-weight: 200;
	font-size: 2.2rem;
	line-height: 120%;
}

.appname{
	font-weight: 200;
}

.cc {
	width: calc(100% - 10px);
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (min-width: 1200px) {
	.cc {
		max-width: 1300px;
	}
}	

@media screen and (min-width: 768px) {
  .cc {
    width: calc(100% - 30px);
  }
}		

.cryptedmail:before {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

textarea, select, input, button, textarea:focus, select:focus, input:focus, button:focus { outline: none !important}


html {
  font-size: 14px;
  /* Reserves the scrollbar's width up front instead of only once content is tall enough
     to need one. Without this, a scrollbar appearing/disappearing mid-page (e.g. content
     loading in async and growing the page height) shifts the layout viewport width by
     ~15px — right at a Bootstrap breakpoint boundary (992px etc.) that's enough to flip
     a d-lg-* rule and cause a visible re-layout after the page has already rendered. */
  scrollbar-gutter: stable;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 1198px;
}
/*
a.active, a.active:hover {
	color: #007bff !important;
}
*/

/*
iframe
{
   background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23CCCCCC	" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">Loading..</text></svg>') 0px 0px no-repeat;
}
*/

@keyframes scale-out-tr {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
.scale-out-tr {
  -webkit-animation: scale-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: scale-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;       
}	

@keyframes scale-out-height {
  from {     
  	 max-height: 20vh;
  	 opacity: 0;  	 
  }
  to {    
  	max-height: 0vh;  	
  	opacity: 0;
  }
}
.scale-out-height {
  -webkit-animation: scale-out-height 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: scale-out-height 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;        
}

td[align=right]{
  text-align: right;
}
.td-no-wrap td{
  white-space: nowrap;
}
/*
th.tdrotate{
  vertical-align: bottom !important;
}
div.tdrotate{ 
  width: 30px;  
  height: 30px;
  margin-left: auto; 
  white-space: nowrap;
  transform: rotate(-90deg); 
  word-break: normal !important;
  line-height:40px;
}*/

th.tdrotate{
  text-align: center;
  vertical-align: bottom !important;
  height: 200px;
  text-overflow: ellipsis;
}
div.tdrotate{
  text-align: center;
  vertical-align: middle;
  width: 20px;
  margin: 0px;
  padding: 0px;
  padding-left: 3px;
  padding-right: 0px;
  padding-top: 0px;
  white-space: nowrap;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg); 
  text-overflow: ellipsis;  
  margin-left: auto;
}

.nanobar .bar {
  background: orange !important;
}

.nanobar {
  height: 2px;
}


@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}@keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
.authbox {-webkit-animation:bounce-top .9s both;animation:bounce-top .9s both}

.partner-image-container{
  box-shadow: 0px 0px 5px #333;
  background: white;
  background: rgba(255,255,255,0.9);
}

.table-fixed{
  /*table-layout: fixed; teeb colid vordseks, see paha*/
  word-break: break-word
}

.pdf-content ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.pdf-content ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

.pdf-content ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

.pdf-content li ol > li {
  margin: 0;
}

.pdf-content li ol > li:before {
  content: counters(item, ".") " ";
}

.timesNewRoman{
  font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif;
}

.pdf-content{  
  font-size:1rem
}

.body .pdf-content {
  font-size:1.3rem;
}

.product-cover-img{
  height: 12rem;
  width: 100%;
  object-fit: cover;
}

.bg-stadium{ 
  position:absolute;
  bottom: 0px;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: -1;
  overflow:hidden; 
}

.bg-stadium-inner{
     background: url(../img/bwwolf.jpg);
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: blur(6px);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: calc(100% + 20px);
  width:calc(100% + 20px);
  margin: -10px;
}

.cover-hero{
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #111; /* shows briefly while the bg image loads */
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
/* 'wide2' background — a repeating sample of the photo (--cover-tile custom prop,
   set inline per content row), blurred via CSS filter on this ::before rather than
   on .cover-hero-tiled itself, since filter would also blur .cover-hero-fg (a real
   child element sitting on top, not part of this pseudo-element). */
.cover-hero-tiled::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cover-tile);
  background-repeat: repeat;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(1.1); /* hides the unblurred edge blur() leaves at the container bounds */
}
/* Layer 1 — full-bleed, heavily blurred copy of the cover, filling the space the
   crisp/boxed copy (layer 3) doesn't reach either side (Instagram-style letterbox). */
.cover-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-filter: blur(12px) brightness(.7);
  -moz-filter: blur(12px) brightness(.7);
  -ms-filter: blur(12px) brightness(.7);
  filter: blur(12px) brightness(.7);
  transform: scale(1.15); /* hides the unblurred edge blur() leaves at the container bounds */
}
/* Layer 2 — darkens the blurred margins for legibility. Sits above the blur but
   below the crisp image (layer 3), which is opaque and covers/hides it within its
   own footprint — so only the letterbox area ends up dimmed, not the photo itself. */
.cover-hero-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.2) 100%);
}
/* Layer 3 — the same cover image again, unblurred ("boxed" to .container width, the
   free space either side is what the full-bleed blurred bg layer fills — not
   letterboxing inside this box, which is why this is object-fit:cover, same as the
   bg layer, always filling its box at exactly the container's width). */
.cover-hero-fg-wrap{
  position: relative;
  width: 100%;
  height: 100%;
}
.cover-hero-fg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* rem, not px — html's root font-size drops from 16px to 14px below 768px (see
     below), so this scales down with it automatically instead of reading stronger
     on the smaller mobile hero (200px tall) than on desktop (300px). */
  filter: blur(.125rem);
}
/* Layer 4 — title, always on top (highest z-index of the hero's layers). The wrap
   itself stays pointer-events:none (its box spans the full hero, most of which is
   empty flex space — the admin sample-picker in .cover-hero-fg-wrap sits beneath
   it and needs drags to reach it there); pointer-events is re-enabled only on the
   actual title text so it stays selectable. */
.cover-hero-title-wrap{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem 1rem; /* top+bottom sum unchanged from 2rem/2rem — shifts the
    centered content down a bit without affecting the box's own size/position */
  pointer-events: none;
}
.cover-hero-title{
  color: #fff;
  font-weight: 350;
  text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1), 0 0 60px rgba(0,0,0,1), 0 0 100px rgba(0,0,0,1), 0 0 150px rgba(0,0,0,.9);
  margin: 0;
  pointer-events: auto;
}
.cover-hero-subtitle{
  color: #fff;
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: .6rem;
  padding: .35rem .9rem;
  background: rgba(0,0,0,.55);
  border-radius: 20px;
  pointer-events: auto;
}
/* 'wide2' only — bottom-right "Avaldatud/Uuendatud xx.xx.xxxx" (cover_hero_date_label(),
   fns.php). Positioned separately from .cover-hero-title-wrap (which spans the full
   hero) so it doesn't compete with the centered title/subtitle for space. */
.cover-hero-date{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  padding: .3rem .7rem;
  background: rgba(0,0,0,.45);
  border-radius: 20px;
}
/* Admin-only live control (visible when loggedIn()) — adjusts the blurred
   background layer's vertical crop focus (object-position), the only layer
   still cropped by object-fit:cover in this fixed-height container. */
.cover-hero-admin{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  background: rgba(0,0,0,.55);
  border-radius: 8px;
  padding: .6rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: #fff;
  font-size: .7rem;
}
.cover-hero-admin input[type="range"]{
  -moz-orient: vertical; /* Firefox */
  writing-mode: vertical-lr; /* Chromium/WebKit's modern replacement for the deprecated -webkit-appearance: slider-vertical */
  direction: rtl; /* keeps min-at-bottom/max-at-top like slider-vertical did */
  width: 6px;
  height: 100px;
}
/* Toggles .cover-hero-sample-box's visibility (hidden by default — it's only
   needed while actively repositioning the sample, not for normal viewing). */
.cover-hero-sample-toggle{
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  font-size: .7rem;
  cursor: pointer;
  padding: 0;
}
.cover-hero-sample-toggle:hover,
.cover-hero-sample-toggle.active{
  background: rgba(255,255,255,.35);
}
/* Sample-rectangle picker ('wide2' only) — sits directly on the real cover-hero-fg
   image (see bind.coverHeroAdmin in page.phtml for the object-fit:cover coordinate
   mapping this requires), draggable/resizable, marking which patch gets tiled as
   the background. */
.cover-hero-sample-box{
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  background: rgba(255,255,255,.15);
  cursor: move;
}
.cover-hero-sample-handle{
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #333;
  border-radius: 2px;
  cursor: nwse-resize;
}

.send-item.active{
  background: var(--primary)!important;
}
.send-item.active *{
   color: white!important;
}
/*
@media (min-width: 768px) {
  table.table-lg-truncated td, table.table-lg-truncated th {
    
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    amax-width: 1px;
    

  }
  table.table-lg-truncated{
    atable-layout: fixed !important;
    awidth: 150px !important;
  }
}*/
.pane-content{
  transition: max-width 0.5s, min-width 0.5s;
}
.pane-hidden{
  max-width: 40px !important;
  min-width: 40px !important;
}

.pane-hidden .svg-container:hover, .pane-hidden .svg-container:hover svg path{
  background: var(--primary);
  stroke: var(--white);
}
.pane-hidden * {overflow:hidden}

.text-shadow{
  text-shadow: 1px 1px 2px #000000;
}

.initials {
    line-height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    font-size: 1.5rem;
    background: rgb(220, 85, 0) !important;
}

.nav:not(.nav-pills) > .nav-item > .nav-link {
  margin-top: auto;
  margin-bottom: auto;
  color: var(--dark)
}
.nav:not(.nav-pills) > .nav-item > .nav-link.active {
  color: var(--primary);
}

.nav-stacked {
  border-bottom: none;
}
.nav-stacked .nav-item > .nav-link {
  border: none;
}

.header .nav > .nav-item:not(.account-dropdown) > .nav-link:hover {
  background: #777;
  color: white !important;
}
.header .nav > .nav-item {
  display: flex;
}

html {
  overflow-y:scroll;
}

main {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

footer {
  aborder-top-color: black !important;
  aoverflow: hidden;
  position: relative;
  z-index: 1;
  height: var(--footerheight);
  max-height: var(--footerheight);
  margin-top: 100px;

}

footer.footer-bg-repeat {
  background-image: url(../img/footer-bg1.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  display: flex;
  align-items: flex-end;
}

footer.footer-bg-repeat .partner-logo img {
  filter: brightness(0) invert(1);
}

.crooked-block:before {
  atop: -70%;
    transform: skewY(5deg);
    transform-origin: 100%;
    background-color: rgba(0,123,255,0.3);
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    bottom: -8vw;
    height: 16vw;
    max-height: 500px;
    min-height: 300px;
}

.crooked-block:after {
  atop: -70%;
    transform: skewY(5deg);
    transform-origin: 100%;
    background-color: rgba(0,123,255,0.3);
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    bottom: calc(-8vw - 50px);
    height: 16vw;
    max-height: 500px;
    min-height: 300px;
}

.crooked-curtain:before {
  transform: skewY(7deg);
    transform-origin: 100%;
    background-color: rgba(255,255,255,0.35);
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    height: 125px;
    box-shadow: 0 5px 15px white;
}

.crooked-curtain:after {
    transform: skewY(7deg);
    transform-origin: 100%;
    background-color: rgba(255,255,255,0.2);
    content: '';
    display: block;
    box-shadow: 0 5px 15px white;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    height: 75px;
}

@media only screen and (max-width: 600px) {
  #content-wrap img {
    max-width: 100%;
    height: auto;
  }
}

.bg-header {
  background: #FCFCFC;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
}
@media (min-width: 1400px) {
  .header-social {
    display: flex !important;
  }
}
.bg-card {
  background: #FCFCFC;
}

.carousel-item img {
    object-fit: cover;
}

.cta-banner {
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
  padding: 2rem 2.25rem;
  background: white;
}
.impact-widget {
  box-shadow: 0 0 20px rgba(0,0,0,0.12);
}
.insta-thumb {
  transition: transform .2s ease;
}
.insta-thumb:hover {
  transform: scale(1.03);
}

.bg-shadow {
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
}

.cta-banner ul { padding-left: 0; }
.cta-banner li {
  background: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-config-id="auto-svg-2-5" data-path="0.0.0.0.1.1.1.1.0.0"><circle cx="10" cy="10" r="10" fill="%234F46E5" data-path="0.0.0.0.1.1.1.1.0.0.0"></circle><path d="M6 10.6667L8.66667 13.3333L14 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-path="0.0.0.0.1.1.1.1.0.0.1"></path></svg>') no-repeat left 7px;
  padding: 0px 0px 0px 30px;
  list-style: none;
}

.menu-border-right:not(:last-child) {
  border-right: 1px solid #eee;
}

.feedback-btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  bottom: 20px;
  right: 20px;
  border-radius: 20px;
  border: 1px solid #AAAAAA;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  z-index: 5;
  color: #666;
  background: rgba(238,238,238,.5);
  font-size: 1.2rem;
  transition: border-color .15s ease, transform .15s ease;
}
.btn-outline-dark.feedback-btn:hover,
.btn-outline-dark.feedback-btn:not(:disabled):not(.disabled):active {
  color: #666;
  background: rgba(238,238,238,.5);
  border-color: #007bff;
  transform: scale(1.1);
}

/* Flex items default to min-width:auto, which stops them shrinking below their
   content's width — without this, the 'main' menu item's .ellipsis title div never
   actually truncates on desktop (nav.flex-lg-row), it just overflows the flex-fill
   box instead. Not scoped to the mobile media query below since it's needed at the
   lg+ desktop layout too. */
.page-top-menu .nav-item {
  min-width: 0;
}

/* Desktop-only: Bootstrap's .nav defaults to flex-wrap:wrap, which lets a long
   label push the row onto a second line instead of truncating in place. Force a
   single row and ellipsis any label that doesn't fit its flex-shrunk width. */
@media (min-width: 992px) {
  .page-top-menu .nav {
    flex-wrap: nowrap;
  }
  .page-top-menu .nav-item > .nav-link {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* flex:1 1 auto (Bootstrap's .flex-fill) gives each item a flex-basis equal to
     its own content width, then shrinks proportionally to that basis — so the
     'main' item's (now-uncapped) full title inflates its basis far past the
     other short menu labels and unfairly hogs the row instead of everyone
     sharing it evenly. Capping it keeps that one item's basis in line with
     the rest, like the old unconditional inline max-width used to. */
  .page-top-menu .nav-item:first-child .ellipsis {
    max-width: 250px;
  }
}

/* Mobile-only restyle of the content-page top menu (template/main/page.phtml).
   Desktop is untouched — menuu()'s own classUL/classLI/classA params still render
   the original nav.flex-lg-row layout above the lg breakpoint. .page-top-menu is a
   plain wrapper div (not a menuu() class) added just so this can scope to THIS
   specific nav — .overpass-semibold/.nav are shared with the site header nav,
   which must not be affected. */
@media (max-width: 991.98px) {
  .page-top-menu .nav {
    /* !important needed — Bootstrap's own .flex-column/.bg-white utilities
       (part of classUL) are !important themselves, so a plain override here
       would lose to them. */
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important; /* overrides the custom (non-!important) .bg-shadow class */
    border: none !important; /* overrides Bootstrap's .border utility (also !important) */
    margin-top: 0 !important; /* compress vertical height on mobile */
    margin-bottom: 0 !important; /* overrides Bootstrap's .mb-4 (also !important) — was 1rem/.mb-3 equivalent */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .7rem; /* ~30% less than the 1rem column-gap — column-gap stays put, it's load-bearing for the nav-item width calc below */
    column-gap: 1rem;
    padding: .75rem;
  }
  .page-top-menu .nav-item {
    /* !important — overrides Bootstrap's .flex-fill (also !important) from classLI */
    flex: 0 0 auto !important;
    /* 50% minus half the row gap, so two items + the gap between them = exactly
       100% — plain 50% would overflow by one gap-width and push the 2nd item down. */
    width: calc(50% - .5rem);
  }
  /* :first-child:nth-last-child(odd) is a "quantity query" — it only matches the
     first item when it's ALSO odd-counted from the end, i.e. only when the total
     number of items is odd. That item gets the full row instead of half, so an odd
     count doesn't leave one item stranded alone on a half-empty last row. */
  .page-top-menu .nav-item:first-child:nth-last-child(odd) {
    width: 100% !important;
    text-align: center;
  }
  /* This first item's title comes from an inline style="max-width:250px" (the
     'main' menu entry page.phtml prepends, .ellipsis div) — !important needed
     since inline styles otherwise beat any external stylesheet rule regardless
     of selector specificity. */
  .page-top-menu .nav-item:first-child:nth-last-child(odd) .ellipsis {
    max-width: none !important;
  }
  /* Same "quantity query" trick, for exactly 2 items — each gets the full row
     (stacked) instead of sitting side by side at the default 50% width. */
  .page-top-menu .nav-item:first-child:nth-last-child(2),
  .page-top-menu .nav-item:first-child:nth-last-child(2) ~ .nav-item {
    width: 100% !important;
  }
  .page-top-menu .nav-item.menu-border-right:not(:last-child) {
    border-right: none;
  }
  .page-top-menu .nav-item > .nav-link {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 400 !important; /* overrides Bootstrap's .font-weight-bolder (also !important) from classA */
    text-align: center;
    border: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    padding: .4rem 1.75rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: background .15s ease, border-color .15s ease;
  }
  .page-top-menu .nav-item > .nav-link:hover,
  .page-top-menu .nav-item > .nav-link:active,
  .page-top-menu .nav-item > .nav-link.active {
    background: #f1f3f5;
    border-color: rgba(0,0,0,.15);
  }
}

/* Mobile-only: cover hero (template/main/page.phtml, 'wide'/'wide2' cover styles). */
@media (max-width: 991.98px) {
  .cover-hero {
    max-height: 200px;
  }
  .cover-hero-title {
    font-weight: 300;
    font-size: 2rem;
  }
  .cover-hero-subtitle {
    font-size: 1.05rem;
  }
  .cover-hero-date {
    display: none;
  }
}

/* Mobile menu (template/theme.interest/public.phtml #mm-sidebar) — dash-marker nav
   links, social icons pinned to the bottom. Panel slide + backdrop fade transitions
   live in base.css next to #mm-sidebar/#mm-overlay. */
html.mm-open,
body.mm-open {
  overflow: hidden;
}
#mm-sidebar .mm-footer {
  border-top: 1px solid #e1e1e1;
  padding: 1.25rem 0;
}
#mm-sidebar .mm-footer a {
  font-size: 1.35rem;
}
#mm-sidebar .nav-link::before {
  content: '\2013'; /* – */
  margin-right: 1.5rem;
  color: var(--primary, #008FD5);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  #mm-sidebar, #mm-overlay { transition: none; }
}

/* translateY nudges the icon down without affecting the header's own height. */
.mm-toggle-btn {
  transform: translateY(10px);
  color: rgba(0,143,213,.85); /* same brand blue as elsewhere, just muted */
}

/* Hover lift for content cards (card-horizontal.phtml, card-vertical.phtml). */
.card-hover-lift {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover-lift:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 6px 14px rgba(0,0,0,.08) !important;
}

/* Impact widget boxes — very subtle hover, on .impact-col (not .impact-inner, which
   already has its own JS-driven inline transform for the auto-rotate slide; an inline
   style would beat a plain CSS :hover transform on that element anyway). */
.impact-col {
  transition: transform .15s ease;
}
.impact-col:hover {
  transform: translateY(-3px);
}