/* ==========================================================================
   Mokinkis header v2 — the gold utility bar with navy text, a white navigation bar with
   sentence-case links, a gold underline for the current page, the cart button
   and the two account actions (Prisijungti + Registruotis pamokai) at the right end.
   Overrides the Divi Customizer (uppercase, -1px tracking, gold blocks), so
   selectors carry an extra id or class and !important where Divi uses it.
   ========================================================================== */

/* ---------- utility bar (brand gold, set in the Divi Customizer) ----------
   inc/top-bar.php: the company on the left, the contacts centred, the way in
   for tutors on the right. Hidden below 981px, as Divi's bar was. */
body #page-container #top-header .mk-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 38px;
  padding: 0 !important;
  font: 500 13px/1.3 Montserrat, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #1f2d44;
}
body #page-container #top-header .mk-topbar p { margin: 0; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body #page-container #top-header .mk-topbar-co { justify-self: start; max-width: 100%; }
body #page-container #top-header .mk-topbar-reach { justify-self: center; }
body #page-container #top-header .mk-topbar-join { justify-self: end; }
body #page-container #top-header .mk-topbar a { color: #1f2d44; font-weight: 700; opacity: 1; }
body #page-container #top-header .mk-topbar a:hover { color: #0e1a2d; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body #page-container #top-header .mk-topbar-join a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
body #page-container #top-header .mk-topbar-join svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 980px) {
  body #page-container #top-header .mk-topbar { display: none; }
}

/* ---------- navigation bar ---------- */
body #page-container #main-header {
  border-bottom: 1px solid #ebe4d8;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
}
body #page-container #main-header.et-fixed-header { box-shadow: 0 10px 24px -18px rgba(37, 52, 74, .35); }
/* Keep desktop menu spacing fixed while Divi measures and positions the header. */
@media (min-width: 981px) {
  body #page-container #main-header #et-top-navigation { padding-top: 35px !important; }
  body #page-container #main-header #top-menu > li > a { padding-bottom: 35px !important; }
  /* This header stays the same height on scroll. Divi's shrink compensation
     measures a clone outside #page-container, where our styles do not apply,
     and adds hundreds of pixels of margin. The existing padding reserves
     the header's space; no animated margin is needed. */
  body.et_fixed_nav:not(.et_vertical_nav):not(.et_transparent_nav) #page-container { margin-top: 0 !important; }
}
body #page-container #top-menu li { padding-right: 24px; }
body #page-container #top-menu > li.menu-item-home { display: none; } /* the logo already links home */
body #page-container #top-menu li a,
body #page-container #main-header #top-menu li a {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  color: #25344a;
  opacity: 1;
}
body #page-container #top-menu > li > a:hover { opacity: 1; color: #0e1c30; }
body #page-container #top-menu > li.current-menu-item > a,
body #page-container #top-menu > li.current-menu-ancestor > a,
body #page-container #main-header.et-fixed-header #top-menu > li.current-menu-item > a,
body #page-container #main-header.et-fixed-header #top-menu > li.current-menu-ancestor > a {
  color: #25344a !important;
  box-shadow: inset 0 -2.5px 0 #c39d63;
}
/* Pointing at a destination draws the current page's bar in a paler gold,
   grown from the middle, so the page you are on keeps the strong one; an open
   list keeps its bar too. The cart and „Registruotis pamokai“ are buttons
   with a hover of their own. */
body #page-container #top-menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: #c39d63;
  opacity: .65;
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
body #page-container #top-menu > li > a:hover::before,
body #page-container #top-menu > li > a:focus-visible::before,
body #page-container #top-menu > li.mk-dd-open > a::before { transform: scaleX(1); }
body #page-container #top-menu > li.mk-nav-cta > a::before,
body #page-container #top-menu > li.mk-nav-cart > a::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  body #page-container #top-menu > li > a::before { transition: none; }
}
body #page-container #top-menu .menu-item-has-children > a:first-child:after {
  top: auto;
  right: -2px;
  font-size: 15px;
  color: #8b93a1;
}
body #page-container #top-menu .menu-item-has-children > a:first-child { padding-right: 18px; }

/* dropdowns */
body #page-container #top-menu li ul.sub-menu {
  width: 290px;
  padding: 8px;
  border-top: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 44px -22px rgba(37, 52, 74, .45), 0 0 0 1px rgba(37, 52, 74, .07);
}
body #page-container #top-menu li li { padding: 0; line-height: 1.3; }
body #page-container #main-header #top-menu li li a {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #25344a;
}
body #page-container #main-header #top-menu li li a:hover { background: #f3eee7; opacity: 1; }
body #page-container #top-menu li li.current-menu-item > a { background: #f3eee7; box-shadow: none; }

/* A list opens on click, never on hover (js/header-v2.js adds .mk-click-menu;
   without the script Divi's hover still works). The script also caps an open
   list at the screen's bottom edge — the header is fixed, so the page can't be
   scrolled to reach the last lines — and the list scrolls instead. */
body #page-container #top-menu.mk-click-menu > li.menu-item-has-children > ul.sub-menu { visibility: hidden; opacity: 0; overflow-y: auto; overscroll-behavior: contain; }
body #page-container #top-menu.mk-click-menu > li.mk-dd-open > ul.sub-menu { visibility: visible; opacity: 1; }
body #page-container #main-header #top-menu.mk-click-menu > li.mk-dd-open > a { color: #0e1c30; }
body #page-container #top-menu.mk-click-menu > li.menu-item-has-children > a:first-child:after { transition: transform .2s ease; }
body #page-container #top-menu.mk-click-menu > li.mk-dd-open > a:first-child:after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  body #page-container #top-menu.mk-click-menu > li.menu-item-has-children > a:first-child:after { transition: none; }
}

/* „Pamokos“: one panel of lesson pages in two columns — grades and goals, then
   subjects and the speech therapist — with the lessons page, the price list and
   the calendar along the bottom (inc/nav-order.php mkn_lessons_html()). It sits
   where a submenu would; #top-menu sets line-height 0 and font-size 0, so every
   piece here names its own type. */
body #page-container #top-menu .mk-mega {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 9999;
  width: 600px;
  padding: 22px 28px 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(37, 52, 74, .5), 0 0 0 1px rgba(37, 52, 74, .07);
  font: 500 14px/1.4 Montserrat, Helvetica, Arial, sans-serif;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body #page-container #top-menu.mk-click-menu > li.mk-dd-open > .mk-mega,
body #page-container #top-menu:not(.mk-click-menu) > li:hover > .mk-mega,
body #page-container #top-menu:not(.mk-click-menu) > li:focus-within > .mk-mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
body #page-container #top-menu .mk-mega-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0 28px; }
body #page-container #top-menu .mk-mega-group + .mk-mega-group { margin-top: 18px; }
body #page-container #top-menu .mk-mega-kick { margin: 0 0 6px; padding: 0; font: 700 11.5px/1.3 Montserrat, Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #af6a29; }
body #page-container #main-header #top-menu .mk-mega a { display: block; padding: 0; opacity: 1; transition: background-color .15s ease, color .15s ease; }
body #page-container #main-header #top-menu .mk-mega a.mk-mega-item { margin: 0 -10px; padding: 7px 10px; border-radius: 8px; }
body #page-container #main-header #top-menu .mk-mega a.mk-mega-item:hover,
body #page-container #main-header #top-menu .mk-mega a.mk-mega-item.is-current { background: #f3eee7; }
body #page-container #top-menu .mk-mega-item b { display: block; font: 600 14.5px/1.35 Montserrat, Helvetica, Arial, sans-serif; letter-spacing: -.005em; color: #25344a; }
body #page-container #top-menu .mk-mega-item small { display: block; margin-top: 1px; font: 500 12.5px/1.35 Montserrat, Helvetica, Arial, sans-serif; color: #56627a; }
body #page-container #top-menu .mk-mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px -28px 0; padding: 15px 28px 17px; border-top: 1px solid #efe8de; }
body #page-container #main-header #top-menu .mk-mega a.mk-mega-all { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; border-bottom: 1.5px solid #c39d63; font: 700 14px/1 Montserrat, Helvetica, Arial, sans-serif; color: #25344a !important; }
body #page-container #top-menu .mk-mega-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
body #page-container #top-menu .mk-mega-all:hover svg { transform: translateX(2px); }
body #page-container #top-menu .mk-mega-aux { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
body #page-container #main-header #top-menu .mk-mega-aux a { font: 600 13.5px/1.2 Montserrat, Helvetica, Arial, sans-serif; color: #56627a !important; }
body #page-container #main-header #top-menu .mk-mega-aux a:hover,
body #page-container #main-header #top-menu .mk-mega-aux a[aria-current] { color: #25344a !important; }
body #page-container #main-header #top-menu .mk-mega a:focus-visible { outline: 2px solid #324256; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body #page-container #top-menu .mk-mega, body #page-container #top-menu .mk-mega-all svg { transition: none; transform: none; }
}

/* account actions — the CTA is the same navy button as the page's primary
   action („Rinktis paslaugą“); gold stays the accent (utility bar, underline).
   The colour is !important because Divi's fixed-header link colour is. */
body #page-container #top-menu > li.mk-nav-login { margin-left: 12px; }
body #page-container #top-menu > li.mk-nav-cta { padding-right: 0; }
body #page-container #main-header #top-menu > li.mk-nav-cta > a {
  margin-top: -12px;
  padding: 12px 18px !important;
  border-radius: 8px;
  background: #324256;
  color: #fbf7f1 !important;
  font-weight: 700;
  box-shadow: none;
  transition: background-color .2s ease;
}
body #page-container #main-header #top-menu > li.mk-nav-cta > a:hover { background: #26354a; }

/* ---------- phones and tablets (Divi's mobile menu) ---------- */
body #page-container .mobile_menu_bar:before { color: #25344a !important; }
body #page-container .et_mobile_menu {
  padding: 8px 0 14px;
  border-top: 1px solid #ebe4d8;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 40px -24px rgba(37, 52, 74, .45);
}
body #page-container .et_mobile_menu li a {
  padding: 12px 5%;
  border-bottom: 1px solid #f1ece4;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #25344a;
}
body #page-container .et_mobile_menu li li a { padding-left: 9%; font-weight: 500; font-size: 14px; }
body #page-container .et_mobile_menu li.mk-nav-cta a {
  box-sizing: border-box;
  width: auto !important;
  margin: 12px 5% 4px;
  padding: 14px 18px;
  border: 0;
  border-radius: 8px;
  background: #324256;
  color: #fbf7f1;
  font-weight: 700;
  text-align: center;
}
/* ---------- width: the same header and footer on every page ----------
   Backgrounds stay full width; the inner .container is the page column of the
   homepage and the site pages (--mk-wrap in home-landing.css: min(1200px, 100% - 64px),
   16px gutters from 980px down).
   !important: the site's custom CSS sets `.container { width: 95% !important }` (681–1920px). */
body #page-container #top-header .container,
body #page-container #main-header .container,
body #main-footer > .container,
body #footer-bottom > .container {
  width: min(1200px, calc(100% - 64px)) !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 980px) {
  body #page-container #top-header .container,
  body #page-container #main-header .container,
  body #main-footer > .container,
  body #footer-bottom > .container { width: calc(100% - 32px) !important; }
}

/* Laptop widths: keep the menu on one row. The gaps are measured to leave
   about 12px spare at the narrow end of each band with the cart button in
   the row (1121, 1061, 1021 and 981px). */
@media (max-width: 1320px) and (min-width: 981px) {
  body #page-container #top-menu li { padding-right: 16px; }
  body #page-container #top-menu li a,
  body #page-container #main-header #top-menu li a { font-size: 13.5px; }
}
@media (max-width: 1180px) and (min-width: 1121px) {
  body #page-container #top-menu li { padding-right: 10px; }
}
@media (max-width: 1120px) and (min-width: 981px) {
  body #page-container #top-menu li { padding-right: 8px; }
  body #page-container #top-menu li a,
  body #page-container #main-header #top-menu li a { font-size: 13px; }
  body #page-container #top-menu > li.mk-nav-login { margin-left: 0; }
  body #page-container #main-header #top-menu > li.mk-nav-cta > a { padding: 11px 14px !important; }
}
@media (max-width: 1060px) and (min-width: 981px) {
  body #page-container #top-menu li { padding-right: 6px; }
  body #page-container #top-menu li a,
  body #page-container #main-header #top-menu li a { font-size: 12.5px; }
  body #page-container #top-menu > li.mk-nav-login { margin-left: 0; }
  body #page-container #main-header #top-menu > li.mk-nav-cta > a { padding: 10px 12px !important; }
}

@media (max-width: 1020px) and (min-width: 981px) {
  body #page-container #top-menu li { padding-right: 5px; }
  body #page-container #top-menu li a,
  body #page-container #main-header #top-menu li a { font-size: 12px; }
  body #page-container #main-header #top-menu > li.mk-nav-cta > a { padding: 9px 11px !important; }
  body #page-container #main-header #logo { max-height: 60%; }
}

/* A ninth visible link (for example Mokytojai) otherwise makes Divi wrap the
   registration button and overlap the logo. Keep the original spacing when
   the menu has its usual eight visible links. The hidden Home item is counted. */
@media (min-width: 981px) {
  body #page-container #top-menu:has(> li:nth-child(10)) > li:not(.mk-nav-cta) { padding-right: 10px; }
  body #page-container #top-menu:has(> li:nth-child(10)) > li.mk-nav-login { margin-left: 0; }
}
@media (max-width: 1320px) and (min-width: 981px) {
  body #page-container #top-menu:has(> li:nth-child(10)) > li:not(.mk-nav-cta) { padding-right: 8px; }
}
@media (max-width: 1120px) and (min-width: 981px) {
  body #page-container #top-menu:has(> li:nth-child(10)) > li:not(.mk-nav-cta) { padding-right: 4px; }
}
@media (max-width: 1060px) and (min-width: 981px) {
  body #page-container #top-menu:has(> li:nth-child(10)) > li:not(.mk-nav-cta) { padding-right: 2px; }
}
@media (max-width: 1020px) and (min-width: 981px) {
  body #page-container #main-header:has(#top-menu > li:nth-child(10)) #logo { max-height: 60%; }
}

/* The floating cart bubble (WPC Fly Cart) — the header's cart button replaces it. */
#woofc-count { display: none !important; }

/* ---------- the cart (inc/fly-cart.php) ----------
   Computers: a round button in the menu, before „Registruotis pamokai“: a bag
   with the number of items (the sum is in the drawer; the menu row has no
   room for it at laptop widths). Phones: the bag next to the menu button.
   The selectors go through #et-top-navigation to outrank the menu's own link
   rules (padding, font, colour).
   The spaces between the menu items in the HTML took about 5px each; they go,
   and the button takes that room. */
body #page-container #top-menu { font-size: 0; }
body #page-container #top-menu > li { font-size: 14px; }
/* Centred on the links' text; the negative margins keep the 40px button from
   making the header taller. „middle“ centres on the menu's baseline, since the
   menu's own font size is 0 (above); the text's middle is 5px higher at every
   width (measured 4.5–5px, 1000–1440px), hence the lift. */
body #page-container #top-menu > li.mk-nav-cart { position: relative; top: -5px; vertical-align: middle; margin: -14px 0; }
body #page-container #main-header #et-top-navigation a.mk-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 0;
  padding: 0 15px 0 11px !important;
  border: 1px solid #e0d8cb;
  border-radius: 999px;
  background: #fff;
  color: #25344a !important;
  font: 700 13.5px/1 Montserrat, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  box-shadow: none;
  transition: border-color .2s ease;
}
body #page-container #main-header #et-top-navigation #top-menu > li.mk-nav-cart > a.mk-cart { justify-content: center; width: 40px; padding: 0 !important; }
body #page-container #main-header #et-top-navigation #top-menu .mk-cart-sum { display: none; }
body #page-container #main-header #et-top-navigation a.mk-cart:hover { border-color: #25344a; opacity: 1; }
body #page-container #main-header #et-top-navigation a.mk-cart:focus-visible { outline: 2px solid #324256; outline-offset: 2px; }
body #page-container #main-header #et-top-navigation a.mk-cart.is-empty { justify-content: center; width: 40px; padding: 0 !important; }
body #page-container #main-header #et-top-navigation .mk-cart-bag { position: relative; display: block; flex: none; width: 22px; height: 22px; }
body #page-container #main-header #et-top-navigation .mk-cart-bag svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body #page-container #main-header #et-top-navigation .mk-cart-n {
  position: absolute; top: -7px; right: -9px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #324256;
  color: #fbf7f1;
  font: 700 10.5px/1 Montserrat, Helvetica, Arial, sans-serif;
  box-shadow: 0 0 0 2px #fff;
}
body #page-container #main-header #et-top-navigation a.mk-cart.is-empty .mk-cart-n,
body #page-container #main-header #et-top-navigation a.mk-cart.is-empty .mk-cart-sum { display: none; }
body #page-container #main-header .mk-cart-phone { display: none; }
@media (max-width: 980px) {
  body #page-container #main-header .mk-cart-phone { display: block; float: right; margin: -9px 6px 0 0; }
  body #page-container #main-header #et-top-navigation .mk-cart-phone a.mk-cart { justify-content: center; width: 44px; height: 44px; padding: 0 !important; border: 0; background: transparent; }
  body #page-container #main-header #et-top-navigation .mk-cart-phone .mk-cart-sum { display: none; }
  body #page-container #main-header #et-top-navigation .mk-cart-phone .mk-cart-bag { width: 25px; height: 25px; }
}

/* collapsible submenus in the mobile menu (js/header-v2.js) */
body #page-container #main-header .et_mobile_menu li.mk-collapsed { position: relative; }
body #page-container #main-header .et_mobile_menu li.mk-collapsed > ul.sub-menu { display: none !important; }
body #page-container #main-header .et_mobile_menu li.mk-collapsed.mk-open > ul.sub-menu { display: block !important; }
body #page-container #main-header .et_mobile_menu li.mk-collapsed > a { padding-right: 56px; }
body #page-container .et_mobile_menu .mk-sub-toggle {
  position: absolute; top: 2px; right: 3%;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
body #page-container .et_mobile_menu .mk-sub-toggle::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid #56627a; border-bottom: 2px solid #56627a;
  transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s ease;
}
body #page-container .et_mobile_menu li.mk-open > .mk-sub-toggle::before { transform: translate(-50%, -30%) rotate(-135deg); }
body #page-container .et_mobile_menu li.mk-open > a { background: #f3eee7; }
body #page-container #main-header .et_mobile_menu .menu-item-has-children > a { background: transparent; font-weight: 600; }