/**
 * TuliRytmika header v3 (desktop 88 px / mobile 64 px), mobile menu and sticky offer bar.
 * Overrides the EduBlink "theme-header-3" header; 1rem = 10px (html { font-size: 62.5% } in style.css).
 * Markup: parent theme header + custom/header/templates/*.php (HeaderActions, HeaderNavigation, StickyOfferBar).
 */

:root {
  --tr-header-height: 8.8rem;
  --tr-header-logo-height: 8rem; /* as before on production (max-height 8rem), 4 px of clearance top and bottom */
  --tr-offer-bar-height: 6.4rem;
  --tr-cta-shadow: 0 0.6rem 1.6rem rgba(1, 88, 222, 0.18);
}

@media (max-width: 767px) {
  :root {
    --tr-header-height: 6.4rem;
    --tr-header-logo-height: 5.6rem; /* same 4 px clearance as on desktop */
  }
}

/* ── Header frame ── */
.site-header.theme-header-3,
.site-header.theme-header-3.edublink-header-sticky {
  /* 1 px line instead of the parent's blurred shadow; inset so the header stays exactly 88/64 px */
  box-shadow: inset 0 -1px 0 var(--color-line);
}

.edublink-header-area.edublink-navbar .site-branding {
  height: var(--tr-header-height);
  line-height: var(--tr-header-height);
  margin-right: 4rem;
}

@media (max-width: 767px) {
  .edublink-header-area.edublink-navbar .site-branding {
    margin-right: 1.2rem; /* the right side is flush with the edge anyway; the margin only matters when space runs out */
  }
}

/* Mobile/tablet: the sticky header hides while scrolling down and comes back on scroll up
   (assets/js/sticky-header.js); the bottom offer bar stays as the persistent CTA. The parent
   animates transform (headerSticky, fill-mode forwards), so the header is hidden via top, not transform. */
@media (max-width: 1199px) {
  body .site-header.edublink-header-sticky {
    transition: top 0.25s ease;
  }

  body .site-header.edublink-header-sticky.tr-header-hidden {
    top: calc(-1 * var(--tr-header-height) - 2rem); /* 2rem of headroom for the shadow */
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-header.edublink-header-sticky {
    transition: none;
  }
}

/* once the parent makes the header position: fixed (scroll > 120 px), keep its height reserved in the flow */
body:has(header.edublink-header-sticky)::before {
  content: '';
  display: block;
  height: var(--tr-header-height);
}

/* ── Logo (header and mobile menu top bar) ── */
.logo-wrapper {
  max-width: none;
  max-height: var(--tr-header-logo-height);
}

.logo-wrapper .navbar-brand.site-main-logo {
  display: flex;
  align-items: center;
  max-height: inherit;
}

.logo-wrapper .site-logo {
  height: var(--tr-header-logo-height);
  width: auto;
  max-width: none;
}

/* ── Desktop navigation (typography unchanged from production: Grandstander 600, 2rem) ── */
.edublink-header-area.edublink-navbar-expand-lg ul.edublink-navbar-nav > li > a.nav-link {
  height: var(--tr-header-height);
  line-height: var(--tr-header-height);
  font-family: var(--edublink-font-secondary);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primary-black);
}

.edublink-header-area.edublink-navbar-expand-lg ul.edublink-navbar-nav > li:hover > a.nav-link,
.edublink-header-area.edublink-navbar-expand-lg ul.edublink-navbar-nav > li > a.nav-link:focus-visible,
.edublink-header-area.edublink-navbar-expand-lg ul.edublink-navbar-nav > li.current-menu-item > a.nav-link {
  color: var(--color-primary-blue);
}

/* ── Right side of the header ── */
/* spacing rhythm as in the navigation: 26 px link padding + 26 px before the first action = 52 px, the same as between menu items */
.theme-header-3 .edublink-header-right-side {
  margin-left: 0;
}

.edublink-header-area .quote-icon.edublink-theme-nav-responsive {
  margin-left: 0;
}

.tr-header-actions {
  display: flex;
  align-items: center;
  padding-left: 2.6rem;
}

.tr-header-actions__group {
  display: flex;
  align-items: center;
}

.tr-header-actions__group--desktop {
  gap: 5.2rem; /* same rhythm as between menu items (26 px + 26 px link padding) */
}

.tr-header-actions__group--mobile {
  display: none;
  gap: 0.4rem;
}

@media (max-width: 1199px) {
  .tr-header-actions {
    padding-left: 0;
  }

  .tr-header-actions__group--desktop {
    display: none;
  }

  .tr-header-actions__group--mobile {
    display: flex;
  }
}

/* typography as the navigation items, secondary colour (a link, not a button) */
.tr-header-login {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  font-family: var(--edublink-font-secondary);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tr-header-login:hover,
.tr-header-login:focus-visible {
  color: var(--color-primary-blue);
}

/* icon raised by 3 px: Grandstander has a low x-height and g/j descenders, so the geometric centre of the line sits below the optical centre of the letters */
.tr-header-login svg {
  flex-shrink: 0;
  margin-top: -0.3rem;
}

.tr-header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 -1rem; /* the 44 px touch target extends 10 px beyond the 24 px icon on each side; spacing is measured from the icon, not the target */
  color: var(--color-primary-black);
  transition: color 0.2s ease;
}

.tr-header-cart:hover,
.tr-header-cart:focus-visible {
  color: var(--color-primary-blue);
}

.tr-header-cart svg {
  margin-top: -0.2rem; /* bottom of the bag on the navigation baseline, like the icon next to "Zaloguj" */
}

.tr-header-cart__count {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  box-sizing: border-box;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.5rem;
  border-radius: 0.9rem;
  background: var(--color-primary-red);
  color: var(--edublink-color-white);
  font-family: var(--edublink-font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.8rem;
  text-align: center;
}

.tr-header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  text-decoration: none;
}

/* desktop: a logged-in user without access gets the avatar in place of "Zaloguj"; the 44 px target extends 4 px beyond the 36 px circle on each side */
.tr-header-actions__group--desktop .tr-header-avatar {
  margin: 0 -0.4rem;
}

/* Logged-in user with a package in the cart: the "Dokończ zakup" pill + avatar + hamburger do not fit next to
   the 56 px logo below ~400 px. Finishing the purchase takes priority; the account stays under "Moje konto"
   in the mobile menu. */
@media (max-width: 419px) {
  .tr-header-actions__group--mobile:has(.tr-btn--pill) .tr-header-avatar {
    display: none;
  }
}

/* ── Header buttons (30px 5px radius as in the theme, Grandstander 700) ── */
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: 4.8rem;
  padding: 0 2.4rem;
  border: 0;
  border-radius: 3rem 0.5rem;
  background: var(--color-primary-blue);
  color: var(--edublink-color-white);
  font-family: var(--edublink-font-secondary);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.4s ease;
}

.tr-btn:hover,
.tr-btn:focus-visible {
  border-radius: 0.5rem 3rem;
  background: var(--color-primary-blue-hover);
  color: var(--edublink-color-white);
}

.tr-btn__icon {
  font-size: 1.2rem;
}

.tr-btn--primary {
  box-shadow: var(--tr-cta-shadow); /* shadow only under the primary CTA */
}

.tr-btn--account {
  gap: 1rem;
  padding: 0 2.2rem 0 1rem;
}

.tr-btn--pill {
  height: 4.4rem;
  padding: 0 1.6rem;
  font-size: 1.5rem;
}

.tr-btn--pill:has(svg) {
  padding-left: 1.4rem;
}

.tr-btn svg {
  flex-shrink: 0;
  margin-top: -0.1rem; /* as above, optical alignment with the letters */
}

.tr-btn--outline {
  border: 2px solid var(--color-primary-blue);
  background: var(--edublink-color-white);
  color: var(--color-primary-blue);
  font-size: 1.6rem;
}

.tr-btn--outline:hover,
.tr-btn--outline:focus-visible {
  background: var(--color-primary-blue);
  color: var(--edublink-color-white);
}

.tr-btn--block {
  display: flex;
  width: 100%;
}

.tr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--edublink-color-white);
  color: var(--color-primary-blue);
  font-family: var(--edublink-font-secondary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.tr-avatar--solid {
  width: 3.6rem;
  height: 3.6rem;
  background: var(--color-primary-blue);
  color: var(--edublink-color-white);
  font-size: 1.6rem;
}

/* ── Hamburger and close: bare 44×44 icon, no outline ── */
.edublink-header-area .edublink-mobile-hamburger-menu,
.edublink-mobile-menu .edublink-mobile-hamburger-menu {
  height: auto;
  line-height: 1;
}

.edublink-mobile-hamburger-menu a,
.edublink-mobile-menu-close a {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-primary-black);
}

.edublink-mobile-hamburger-menu a svg,
.edublink-mobile-menu-close a svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* ── Mobile menu (parent drawer, full width on phones) ── */
.edublink-mobile-menu-nav-wrapper {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .edublink-mobile-menu-nav-wrapper {
    width: 100%;
  }
}

.edublink-mobile-menu-nav-wrapper .responsive-header-top {
  flex: 0 0 auto;
  height: var(--tr-header-height);
  padding: 0 0.8rem 0 1.6rem;
  border-bottom: 1px solid var(--color-line);
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item {
  flex: 0 0 auto;
  padding: 0.8rem 1.6rem 0;
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li + li {
  border-top: 0;
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.6rem;
  padding: 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--edublink-font-secondary);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary-black);
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li > a:hover,
.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li.current-menu-item > a {
  color: var(--color-primary-blue);
}

/* Chevron on the items that lead somewhere else. The current page (blue, no chevron) then reads as
   "you are here" instead of as the only link in the list. Drawn with borders: no icon asset. */
.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li > a::after,
.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item .tr-mobile-menu__section::after {
  content: "";
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.5rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li.current-menu-item > a::after {
  display: none;
}

/* Sections of /kurs/ under the "Kurs" item (HeaderNavigation::append_course_sections): the group
   shares one bottom line, so the "Kurs" link loses its own. */
.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item > li:has(> .tr-mobile-menu__sections) > a {
  border-bottom: 0;
}

.tr-mobile-menu__sections {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-line);
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item .tr-mobile-menu__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.6rem;
  padding: 0 0 0 2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-primary-black);
}

.edublink-mobile-menu-nav-wrapper ul.edublink-mobile-menu-item .tr-mobile-menu__section::after {
  width: 0.7rem;
  height: 0.7rem;
}

.tr-mobile-menu__account {
  padding: 2.4rem 1.6rem 0;
}

/* Guest: a text link, so the outlined button does not compete with the one CTA of the drawer
   (Clarity 2026-10: 9 logins vs 32 drawer openings in 30 days on mobile). */
.tr-mobile-menu__account--guest {
  padding-top: 1.2rem;
}

.tr-mobile-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.tr-mobile-menu__login svg {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.tr-mobile-menu__login strong {
  font-weight: 600;
  color: var(--color-primary-blue);
}

.tr-mobile-menu__offer {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: auto;
  padding: 2rem 1.6rem 2.4rem;
  border-top: 1px solid var(--color-line);
}

/* Title, price and one line of context as one link to the pricing (in Clarity people tapped the
   price itself). */
.tr-mobile-menu__offer-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-primary-black);
}

.tr-mobile-menu__offer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}

.tr-mobile-menu__offer-title {
  font-family: var(--edublink-font-secondary);
  font-size: 1.8rem;
  font-weight: 700;
}

.tr-mobile-menu__offer-price {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  white-space: nowrap;
}

.tr-mobile-menu__offer-note {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.tr-mobile-menu__offer .tr-btn--block {
  height: 5.2rem;
}

/* Package in the cart: the drawer CTA follows the header pill ("Dokończ zakup" to the cart) instead of
   "Zobacz pakiety". The state travels in the WooCommerce fragment .tr-header-actions, so the swap holds
   after AJAX cart changes and on cached pages. Kept as separate rules: without :has() support the
   "Zobacz pakiety" button simply stays. */
.tr-mobile-menu__offer-cta--cart {
  display: none;
}

body:has(.tr-header-actions[data-package-in-cart="1"]) .tr-mobile-menu__offer-cta--packages {
  display: none;
}

body:has(.tr-header-actions[data-package-in-cart="1"]) .tr-mobile-menu__offer-cta--cart {
  display: flex;
}

/* ── Sticky offer bar (bottom of the screen, home page and /kurs/, below 1200 px) ── */
/* On desktop the sticky header already has the full button; the bar would duplicate it. */
@media (min-width: 1200px) {
  .tr-offer-bar {
    display: none;
  }
}

.tr-offer-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98; /* below the sticky header (99) and the menu drawer (1020) */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--edublink-color-white);
  /* 1 px inset line (the bar stays exactly 64 px) + a soft shadow above the bar */
  box-shadow: inset 0 1px 0 var(--color-line), 0 -0.2rem 1.2rem rgba(20, 20, 19, 0.05);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.tr-offer-bar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}

.edublink-mobile-menu-active .tr-offer-bar {
  transform: translateY(110%);
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tr-offer-bar {
    transition: none;
  }
}

.tr-offer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  height: var(--tr-offer-bar-height);
}

.tr-offer-bar__text {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  min-width: 0;
  margin: 0;
}

.tr-offer-bar__title {
  font-family: var(--edublink-font-secondary);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary-black);
  white-space: nowrap;
}

.tr-offer-bar__meta {
  font-size: 1.5rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tr-offer-bar .tr-btn {
  flex-shrink: 0;
  height: 4.4rem;
  padding: 0 2.2rem;
  font-size: 1.6rem;
  box-shadow: none;
}

/* Package in the cart: "Dokończ zakup" is already in the sticky header and a second identical CTA is noise,
   so the bar disappears together with the space reserved for it. The state travels in the WooCommerce
   fragment .tr-offer-bar__state, so it is correct on cached pages too. */
body:has(.tr-offer-bar__state[data-package-in-cart="1"]) .tr-offer-bar {
  display: none;
}

@media (max-width: 1199px) {
  body.tr-has-offer-bar:not(:has(.tr-offer-bar__state[data-package-in-cart="1"])) {
    padding-bottom: calc(var(--tr-offer-bar-height) + 1.6rem + env(safe-area-inset-bottom));
  }

  /* the parent's "back to top" button (devsblink) above the bar, not under it. The bar grows by the
     safe-area inset (iPhone home indicator once Safari collapses its toolbar), so the offset includes it. */
  body.tr-has-offer-bar:not(:has(.tr-offer-bar__state[data-package-in-cart="1"])) .devsblink-progress-parent {
    bottom: calc(var(--tr-offer-bar-height) + 1.6rem + env(safe-area-inset-bottom));
  }

  /* CookieFirst "privacy settings" button (loaded through GTM, fixed bottom-left, 46 px) would cover the
     bar text; lift it above the bar while the bar is shown, to the same height as the back-to-top button.
     !important: the widget injects its own styles at runtime, after ours. */
  body.tr-has-offer-bar:has(.tr-offer-bar.is-visible):not(:has(.tr-offer-bar__state[data-package-in-cart="1"])) .cookiefirst-root [data-cookiefirst-action="open-preferences"] {
    bottom: calc(var(--tr-offer-bar-height) + 1.6rem + env(safe-area-inset-bottom)) !important;
    transition: bottom 0.25s ease;
  }

  /* Open menu drawer: the floating buttons have a higher z-index than the drawer (back to top 99999,
     CookieFirst ~1e9), so they would show through it. Hide them while the drawer is open. */
  .edublink-mobile-menu-active .devsblink-progress-parent,
  .edublink-mobile-menu-active .cookiefirst-root [data-cookiefirst-action="open-preferences"] {
    visibility: hidden !important;
  }
}

@media (max-width: 767px) {
  .tr-offer-bar__inner {
    gap: 1.2rem;
  }

  .tr-offer-bar__text {
    flex-direction: column;
    gap: 0.1rem;
  }

  .tr-offer-bar__title,
  .tr-offer-bar__meta {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tr-offer-bar__title {
    font-size: 1.5rem;
  }

  .tr-offer-bar__meta {
    font-size: 1.3rem;
  }

  .tr-offer-bar .tr-btn {
    padding: 0 1.8rem;
    font-size: 1.5rem;
  }

  .tr-offer-bar .tr-btn__icon {
    display: none;
  }
}