/* --- CandanSaka header ------------------------------------------------------------- */

.theme-candan-saka .ng-topbar--candan-saka { font-size: 12px; letter-spacing: 0.02em; }
.theme-candan-saka .ng-topbar--candan-saka .ng-topbar__middle { font-weight: 500; }

.theme-candan-saka .ng-header--candan-saka .ng-header__inner--candan-saka {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.theme-candan-saka .ng-header--candan-saka .ng-header__brand { justify-self: start; }
.theme-candan-saka .ng-header--candan-saka .ng-header__nav--candan-saka {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 500;
}
.theme-candan-saka .ng-header--candan-saka .ng-header__actions { justify-self: end; }

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px;
}
  border-top: 1px solid var(--ng-color-line);
  padding: 16px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ng-color-muted);
}

@media (max-width: 768px) {
  .theme-candan-saka .ng-header--candan-saka .ng-header__nav--candan-saka { display: none; }
}




/* --- Menu (flat / nested / mega) -------------------------------------------------------- */

.theme-candan-saka .ng-menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.theme-candan-saka .ng-menu__item { position: relative; }
.theme-candan-saka .ng-menu__label { cursor: default; }

.theme-candan-saka .ng-menu__sub {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 200px; padding: 10px 0; margin: 0; list-style: none;
  background: var(--ng-color-bg); border: 1px solid var(--ng-color-line); border-radius: var(--ng-radius-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
}
.theme-candan-saka .ng-menu__item:hover > .ng-menu__sub { opacity: 1; visibility: visible; }
.theme-candan-saka .ng-menu__sub .ng-menu__item { display: block; }
.theme-candan-saka .ng-menu__sub a, .theme-candan-saka .ng-menu__sub .ng-menu__label { display: block; padding: 7px 18px; font-weight: 400; }
.theme-candan-saka .ng-menu__sub--deep { top: 0; left: 100%; }

.theme-candan-saka .ng-menu__mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 40px; padding: 28px 36px;
  background: var(--ng-color-bg); border: 1px solid var(--ng-color-line); border-radius: var(--ng-radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
}
.theme-candan-saka .ng-menu__item--mega:hover > .ng-menu__mega { opacity: 1; visibility: visible; }
.theme-candan-saka .ng-menu__mega-column { display: grid; gap: 8px; align-content: start; min-width: 140px; font-weight: 400; }
.theme-candan-saka .ng-menu__mega-heading { font-weight: 600; margin-bottom: 4px; }

/* With an admin-chosen text colour the primary-colour hover may vanish into the background -
   on the BAR itself, hover becomes a dimming of the colour that is legible, not a jump to one
   that may not be. Scoped to the top level only: dropdown panels keep their own rules. */
.theme-candan-saka .ng-header[data-custom-text] .ng-header__nav > a:hover,
.theme-candan-saka .ng-header[data-custom-text] .ng-menu > .ng-menu__item > a:hover,
.theme-candan-saka .ng-header[data-custom-text] .ng-menu > .ng-menu__item > .ng-menu__label:hover,
.theme-candan-saka .ng-header[data-custom-text] .ng-header__action:hover,
.theme-candan-saka .ng-header[data-custom-text] .ng-language__trigger:hover {
  color: inherit;
  opacity: 0.72;
}

/* The panels a menu opens sit on the theme's own background whatever the bar wears, so their
   text goes back to the theme's colour instead of inheriting the bar's - white on the bar must
   not arrive as white on white in the panel. */
.theme-candan-saka .ng-menu__sub,
.theme-candan-saka .ng-menu__mega {
  color: var(--ng-color-text);
}

/* --- Language dropdown as part of the bar ---------------------------------------------- */

/* The panel is not a floating card near the trigger: it CONTINUES the bar - starts exactly at
   the bar's bottom line and wears the bar's own paint. The header anchors it, the trigger's
   wrapper stands down, and both background and text come from the same variables the bar
   itself is painted with - change the bar in the panel and the dropdown follows for free. */
/* The TRIGGER anchors the panel sideways - a dropdown belongs under the hand that opened it,
   not at the far edge of a full-width bar. The way DOWN to the bar's bottom line is computed:
   the trigger row sits --ng-header-pad-block above it, plus the bar's 1px border. Two anchors,
   one axis each. */
.theme-candan-saka .ng-header .ng-language { position: relative; }

.theme-candan-saka .ng-header .ng-language__menu {
  top: calc(100% + var(--ng-header-pad-block, 18px) + 1px);
  inset-inline-end: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--ng-color-line);
  border-top: none;
  border-radius: 0 0 var(--ng-radius-md) var(--ng-radius-md);
  background: color-mix(in srgb, var(--ng-header-bg, var(--ng-color-bg)) calc(var(--ng-header-opacity, 1) * 100%), transparent);
  backdrop-filter: blur(var(--ng-header-blur, 0px));
  color: inherit;
}

/* The rows and the tick wear the bar's colour too - base.css paints them for a white card,
   and a dark word or a primary-red tick disappears on a primary-red bar. */
.theme-candan-saka .ng-header .ng-language__option { color: inherit; }
.theme-candan-saka .ng-header .ng-language__check { color: currentColor; }

/* A hover tint mixed from the CURRENT text colour, so it reads on any bar - light on dark,
   dark on light - instead of the theme's light grey vanishing on a coloured bar. */
.theme-candan-saka .ng-header .ng-language__option:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}