/*
  Overkado Custom CSS
  -------------------
  Put user/project-specific CSS overrides here.

  This file is loaded after the template core CSS and dynamic settings.
  Future Overkado template updates should preserve this file so your manual
  styling changes are not overwritten.

  The uploaded base.css was checked against Overkado v7.0 and no separate
  manual CSS differences were found, so this file starts clean.
*/

/* Example:
.ok-story-title {
  font-size: clamp(36px, 5vw, 62px) !important;
}
*/

/* Homepage Latest News and Media background image
   Replace this file to change it later:
   templates/overkado/images/backgrounds/news-media-bg.png */
.ok-home-updates {
  --ok-news-bg: url('../images/backgrounds/news-media-bg.png');
  --ok-news-bg-opacity: .78;
}

.ok-home-updates::before {
  background-position: center center !important;
}

/* Overkado offcanvas rebuild: safe step 1 */
.ok-mobile-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(1.01);
  transition: opacity .28s ease, transform .32s ease, visibility 0s linear .32s;
}
body.ok-menu-open .ok-mobile-panel,
body.ok-menu-closing .ok-mobile-panel {
  visibility: visible;
}
body.ok-menu-open .ok-mobile-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
body.ok-menu-closing .ok-mobile-panel {
  opacity: 0;
  transform: translateY(-10px) scale(1.01);
}
body.ok-menu-open .ok-offcanvas-search,
body.ok-menu-open .ok-offcanvas-nav > ul > li,
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li {
  animation: okOffcanvasItemIn .34s ease both;
}
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(1),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(1) { animation-delay: .05s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(2),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(2) { animation-delay: .09s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(3),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(3) { animation-delay: .13s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(4),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(4) { animation-delay: .17s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(5),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(5) { animation-delay: .21s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(6),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(6) { animation-delay: .25s; }
@keyframes okOffcanvasItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ok-offcanvas-nav ul ul,
.ok-offcanvas-nav .ok-offcanvas-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .34s ease, opacity .22s ease, transform .28s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > ul,
.ok-offcanvas-nav li.ok-submenu-open > .ok-offcanvas-submenu {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}
.ok-offcanvas-nav li.parent > a:after,
.ok-offcanvas-nav li.deeper > a:after,
.ok-offcanvas-nav li.parent > span:after,
.ok-offcanvas-nav li.deeper > span:after {
  transition: transform .22s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > a:after,
.ok-offcanvas-nav li.ok-submenu-open > span:after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.ok-offcanvas-nav ul ul a,
.ok-offcanvas-nav ul ul span {
  font-size: clamp(.9rem, 1.1vw, 1.08rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 8px 18px;
  color: rgba(255,255,255,.78);
}
.ok-offcanvas-nav ul ul li {
  border-bottom: 0 !important;
}
.ok-offcanvas-nav ul ul a:hover,
.ok-offcanvas-nav ul ul li.active > a {
  color: var(--brand-accent);
}
.ok-menu-close {
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.ok-menu-close:hover {
  transform: rotate(90deg) scale(1.04);
}

/* Overkado offcanvas rebuild: step 2 animation + editable styling */
.ok-mobile-panel {
  --ok-menu-origin-x: calc(100% - 58px);
  --ok-menu-origin-y: 58px;
  background: var(--offcanvas-overlay-color, #020f1d) !important;
  visibility: hidden;
  opacity: 0;
  transform: none !important;
  clip-path: circle(0 at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
  transition:
    clip-path .58s cubic-bezier(.19, 1, .22, 1),
    opacity .22s ease,
    visibility 0s linear .58s;
  will-change: clip-path, opacity;
}
.ok-mobile-panel::before {
  opacity: var(--offcanvas-bg-opacity, .36) !important;
}
.ok-mobile-panel::after {
  background: linear-gradient(
    90deg,
    rgba(2,16,30,var(--offcanvas-overlay-opacity, .84)),
    rgba(2,16,30,calc(var(--offcanvas-overlay-opacity, .84) - .16)) 48%,
    rgba(2,16,30,calc(var(--offcanvas-overlay-opacity, .84) - .06))
  ) !important;
}
body.ok-menu-open .ok-mobile-panel,
body.ok-menu-closing .ok-mobile-panel {
  visibility: visible;
}
body.ok-menu-open .ok-mobile-panel {
  opacity: 1;
  clip-path: circle(155% at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
  transition-delay: 0s;
}
body.ok-menu-closing .ok-mobile-panel {
  opacity: 0;
  clip-path: circle(0 at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
}

/* Fallback for browsers without clip-path */
@supports not (clip-path: circle(10px at 10px 10px)) {
  .ok-mobile-panel {
    transform: translate(22px, -22px) scale(.98) !important;
    transition: opacity .32s ease, transform .38s ease, visibility 0s linear .38s;
  }
  body.ok-menu-open .ok-mobile-panel {
    transform: translate(0, 0) scale(1) !important;
  }
}

/* Menu content entrance */
body.ok-menu-open .ok-offcanvas-search,
body.ok-menu-open .ok-offcanvas-nav > ul > li,
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li,
body.ok-menu-open .ok-mobile-donate {
  animation: okOffcanvasItemIn .42s cubic-bezier(.19, 1, .22, 1) both;
}
body.ok-menu-open .ok-offcanvas-search { animation-delay: .14s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(1),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(1) { animation-delay: .18s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(2),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(2) { animation-delay: .22s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(3),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(3) { animation-delay: .26s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(4),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(4) { animation-delay: .30s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(5),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(5) { animation-delay: .34s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(6),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(6) { animation-delay: .38s; }
body.ok-menu-open .ok-mobile-donate { animation-delay: .42s; }
@keyframes okOffcanvasItemIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Submenu refine */
.ok-offcanvas-nav ul ul,
.ok-offcanvas-nav .ok-offcanvas-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .34s cubic-bezier(.19, 1, .22, 1), opacity .22s ease, transform .28s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > ul,
.ok-offcanvas-nav li.ok-submenu-open > .ok-offcanvas-submenu {
  max-height: 680px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 10px;
}
.ok-offcanvas-nav ul ul a,
.ok-offcanvas-nav ul ul span {
  font-size: clamp(.92rem, 1vw, 1.08rem) !important;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 7px 18px !important;
  color: rgba(255,255,255,.78) !important;
}
.ok-offcanvas-nav ul ul a:hover,
.ok-offcanvas-nav ul ul li.active > a {
  color: var(--brand-accent) !important;
}
.ok-offcanvas-nav li.parent > a:after,
.ok-offcanvas-nav li.deeper > a:after,
.ok-offcanvas-nav li.parent > span:after,
.ok-offcanvas-nav li.deeper > span:after {
  transition: transform .22s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > a:after,
.ok-offcanvas-nav li.ok-submenu-open > span:after {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* Close + donate button polish */
.ok-menu-close {
  transition: transform .22s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ok-menu-close:hover {
  transform: rotate(90deg) scale(1.04);
  box-shadow: 0 0 0 8px rgba(255,255,255,.06);
}
.ok-mobile-donate {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 50px;
  min-width: var(--offcanvas-donate-min-width, 132px);
  margin: 34px auto 0;
  padding: var(--offcanvas-donate-padding-y, 14px) var(--offcanvas-donate-padding-x, 42px);
  border: 1px solid var(--offcanvas-donate-border, #FFD10F) !important;
  border-radius: var(--offcanvas-donate-radius, 8px) !important;
  background: var(--offcanvas-donate-bg, #FFD10F) !important;
  color: var(--offcanvas-donate-text, #0A223B) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  white-space: nowrap;
  letter-spacing: .03em;
}
.ok-mobile-donate:hover {
  transform: translateY(-2px);
  filter: brightness(.98);
}

@media (max-width: 640px) {
  .ok-mobile-panel {
    --ok-menu-origin-x: calc(100% - 40px);
    --ok-menu-origin-y: 40px;
  }
  .ok-offcanvas-search {
    margin-bottom: 28px !important;
  }
  .ok-mobile-donate {
    margin-top: 24px;
  }
}