/**
 * Max English brand palette (loaded after Bexon main.css)
 * Imperial Blue #0A2463 | Blue Bell #3E92CC | Ghost White #FFFAFF
 * Magenta Bloom #D8315B | Carbon Black #1E1B18
 */
:root {
  --max-imperial-blue: #0a2463;
  --max-blue-bell: #3e92cc;
  --max-ghost-white: #fffaff;
  --max-magenta-bloom: #d8315b;
  --max-carbon-black: #1e1b18;

  /* Bexon theme tokens */
  --tj-color-common-white: #fffaff;
  --tj-color-common-black: #1e1b18;
  --tj-color-heading-primary: #1e1b18;
  --tj-color-text-body: #2a2623;
  --tj-color-text-body-2: #5c5652;
  --tj-color-text-body-3: #6e6864;
  --tj-color-text-body-4: #1e1b18;
  --tj-color-text-body-5: rgba(255, 250, 255, 0.88);

  --tj-color-theme-primary: #0a2463;
  --tj-color-theme-bg: #fffaff;
  --tj-color-theme-bg-2: #f2ecf2;
  --tj-color-theme-bg-3: #0a2463;
  /* Keep dark surfaces on original Bexon dark scale */
  --tj-color-theme-dark: #0c1e21;
  --tj-color-theme-dark-2: #18292c;
  --tj-color-theme-dark-3: #364e52;
  --tj-color-theme-dark-4: #67787a;
  --tj-color-theme-dark-5: #676e7a;

  --tj-color-red-1: #d8315b;
  --tj-color-grey-1: #fffaff;
  --tj-color-grey-2: #c8c2c8;
  --tj-color-grey-3: rgba(10, 36, 99, 0.08);

  --tj-color-border-1: #d4cfd8;
  --tj-color-border-2: #3a3531;
  --tj-color-border-3: rgba(30, 27, 24, 0.12);
  --tj-color-border-4: rgba(30, 27, 24, 0.18);
  --tj-color-border-5: rgba(10, 36, 99, 0.22);

  /* Bootstrap 5 (accordions, forms, utilities) */
  --bs-primary: #0a2463;
  --bs-primary-rgb: 10, 36, 99;
  --bs-secondary: #3e92cc;
  --bs-secondary-rgb: 62, 146, 204;
  --bs-danger: #d8315b;
  --bs-danger-rgb: 216, 49, 91;
  --bs-body-bg: #fffaff;
  --bs-body-color: #1e1b18;
  --bs-emphasis-color: #0a2463;
  --bs-link-color: #3e92cc;
  --bs-link-hover-color: #0a2463;
  --bs-border-color: #d4cfd8;
  --bs-focus-ring-color: rgba(62, 146, 204, 0.35);
}

/* Primary CTA: Magenta on hover (palette), icon pill stays dark */
.tj-primary-btn {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tj-primary-btn:hover {
  background-color: var(--max-magenta-bloom);
}

.tj-primary-btn.btn-dark:hover {
  background-color: var(--max-imperial-blue);
}

/* Inline text links in prose areas */
.site-main .blog-content a,
.site-main .tj-blog-details-content a {
  color: var(--max-blue-bell);
}
.site-main .blog-content a:hover,
.site-main .tj-blog-details-content a:hover {
  color: var(--max-imperial-blue);
}

/** Home hero strip only (Home 11): cool blue-grey surface */
.tj-banner-section-2.h11-banner-section {
  background-color: #e9eef8;
}

/** Next section (“Dlaczego Max English”): same family, one step darker for separation */
.tj-choose-section.h11-choose {
  background-color: #e2e7f2;
}

/** “O szkole” section on homepage: lighter blue surface */
.h11-about-section {
  background-color: #e9eef8;
}

/** Home alternating section surfaces */
.h11-project {
  background-color: #e9eef8; /* Ścieżki nauki */
}
.h5-testimonial {
  background-color: #e2e7f2; /* Opinie */
}
.tj-team-section {
  background-color: #e9eef8; /* Zespół */
}
.tj-faq-section {
  background-color: #e9eef8; /* Masz pytania? Zacznij tutaj. */
}

/* Hero fail-safe: keep H1 visible even if any runtime animation races */
.h11-banner-section .banner-content-2 .banner-title {
  opacity: 1;
  visibility: visible;
}

/* FAQ call box: phone + WhatsApp icons side by side */
.call-box .call-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.call-box .call-icons .call-icon {
  margin-bottom: 0;
}
.call-box .call-icons .whatsapp-icon i {
  font-size: 22px;
}
.call-box .call-icons .whatsapp-icon {
  background-color: #25d366;
}

/* Header WhatsApp quick action */
.header-whatsapp {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.header-whatsapp i {
  font-weight: 700;
}
.header-whatsapp:hover {
  color: #fff;
  background-color: #1fb757;
}

/** Home hero headline: slightly smaller than Bexon default (longer Polish line) */
.h11-banner-section .banner-content-2 .banner-title {
  font-size: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h11-banner-section .banner-content-2 .banner-title {
    font-size: 68px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h11-banner-section .banner-content-2 .banner-title {
    font-size: 62px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h11-banner-section .banner-content-2 .banner-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h11-banner-section .banner-content-2 .banner-title {
    font-size: 40px;
  }
}

/**
 * Max logo in h11 header: visually larger without changing bar metrics
 * (transform does not affect flex layout height; slot stays max-width 136px).
 */
.h11-header.header-area .site_logo {
  overflow: visible;
}

.h11-header.header-area .site_logo .logo img {
  transform: scale(1.85);
  transform-origin: left center;
}

/* lg–xl: scaled logo draws past its flex slot (136px) and overlaps the first nav link */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h11-header.header-area .site_logo {
    margin-inline-end: clamp(12px, 2.5vw, 28px);
  }
  .h11-header.header-area .site_logo .logo img {
    transform: scale(1.42);
  }
  .h11-header.header-area .menu-area {
    margin-inline-start: 8px;
  }
  .h11-header.header-area .mainmenu > ul {
    column-gap: 22px;
  }
}

/* 1200–1399px: was the tightest band (nav + phone + WhatsApp + CTA + hamburger). Phone/WhatsApp
   now start at 1400px (xxl) in SiteHeader — keep logo/nav spacing similar to lg so nothing overlaps. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h11-header.header-area .site_logo {
    margin-inline-end: clamp(14px, 2vw, 26px);
  }
  .h11-header.header-area .site_logo .logo img {
    transform: scale(1.48);
  }
  .h11-header.header-area .menu-area {
    margin-inline-start: 10px;
  }
  .h11-header.header-area .mainmenu > ul {
    column-gap: 24px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h11-header.header-area .site_logo .logo img {
    transform: scale(1.3);
  }
}

/* Offcanvas menu logo (dark panel) */
.tj-offcanvas-area .hamburger_logo .mobile_logo,
.hamburger-area .hamburger_logo .mobile_logo {
  max-width: 280px;
}

/* Footer subscribe card logo */
.tj-footer-section .footer-subscribe .subscribe-logo {
  max-width: 290px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section .footer-subscribe .subscribe-logo {
    max-width: 210px;
  }
}

/* Footer award image */
.tj-footer-section .award-logo-area .award-logo {
  max-width: 210px;
}

/* Footer typography/colors: match original Bexon dark theme */
.tj-footer-section {
  --tj-color-common-white: #ffffff;
  --tj-color-text-body-2: #a9b8b8;
  --tj-color-text-body-5: rgba(255, 255, 255, 0.8);
}

/* Footer contact row icon alignment/spacing + white clock icon */
.tj-footer-section .footer-contact-info .contact-item a,
.tj-footer-section .footer-contact-info .contact-item span {
  align-items: center;
}
.tj-footer-section .footer-contact-info .contact-item a i {
  margin-right: 8px;
  display: inline-flex;
  line-height: 1;
}
.tj-footer-section .footer-contact-info .contact-item span i {
  color: var(--tj-color-common-white);
}

/* Footer cookie settings button contrast */
.tj-copyright-area-2 .copyright-menu .cookie-settings-link {
  color: var(--tj-color-text-body-2);
  transition: color 0.25s ease;
}
.tj-copyright-area-2 .copyright-menu .cookie-settings-link:hover,
.tj-copyright-area-2 .copyright-menu .cookie-settings-link:focus-visible {
  color: var(--tj-color-common-white);
}

/* Static legal page surface */
.site-main.privacy-page {
  background-color: #e9eef8;
}
.site-main.contact-page {
  background-color: #e9eef8;
}
.site-main.contact-page .h11-service {
  background-color: transparent;
}
.site-main.contact-page .h11-service .sec-heading .sec-title,
.site-main.contact-page .h11-service .sec-heading .sec-title.text-anim {
  color: var(--tj-color-heading-primary);
}
.site-main.contact-page .h11-service .sec-heading p {
  color: var(--tj-color-text-body);
}
.site-main.contact-page .h11-service .sec-heading .sub-title {
  color: var(--tj-color-heading-primary);
}
.site-main.contact-page .h11-service .h11-service-item .h6-service-content p,
.site-main.contact-page .h11-service .h11-service-item .h6-service-content .text-btn .btn-text span,
.site-main.contact-page .h11-service .h11-service-item .h6-service-content .text-btn:hover .btn-text span {
  color: var(--tj-color-common-white);
}
.site-main.privacy-page article h2 {
  margin-top: 38px;
}
.site-main.privacy-page article ul {
  padding-left: 36px;
  margin: 14px 0 18px;
}
.site-main.privacy-page article li {
  margin-bottom: 8px;
}

/* FAQ accordion state driven by Bootstrap collapsed/expanded class */
.tj-faq .accordion-item .faq-title:not(.collapsed)::after {
  content: "\e918";
}
.tj-faq .accordion-item:has(.faq-title:not(.collapsed)) .faq-title {
  border-bottom: 1px dashed var(--tj-color-border-1);
}
.tj-faq.style-2 .accordion-item:has(.faq-title:not(.collapsed)) {
  background-color: var(--tj-color-theme-primary);
}
.tj-faq.style-2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title {
  color: var(--tj-color-common-white);
  border-color: rgba(255, 255, 255, 0.15);
}
.tj-faq.style-2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title::after {
  color: var(--tj-color-common-white);
  border-color: rgba(255, 255, 255, 0.1);
}
.tj-faq.style-2 .accordion-item:has(.faq-title:not(.collapsed)) .accordion-body p {
  color: var(--tj-color-common-white);
}

/* Guard against stale `.active` class left by template JS */
.tj-faq.style-2 .accordion-item.active:has(.faq-title.collapsed) {
  background-color: transparent;
}
.tj-faq.style-2 .accordion-item.active:has(.faq-title.collapsed) .faq-title {
  color: var(--tj-color-heading-primary);
  border-color: transparent;
}
.tj-faq.style-2 .accordion-item.active:has(.faq-title.collapsed) .faq-title::after {
  content: "\e927";
  color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}

/* Breadcrumb spacing */
.tj-page-link > span {
  display: inline-flex;
  align-items: center;
}
.tj-page-link > span > span {
  display: inline-flex;
  align-items: center;
}
.tj-page-link > span > span:first-child {
  margin-left: 2px;
  margin-right: 8px;
}

/**
 * Customer stack “+” control: magenta hover like .tj-primary-btn; icon is + at rest, rotates to × on hover.
 * Replaces template’s non-interactive span so main.css :last-child span rules do not apply — restyle here.
 */
.customers ul li:last-child a.customers-plus-link {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 0 2px var(--tj-color-common-white);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.customers ul li:last-child a.customers-plus-link i {
  display: inline-flex;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}
.customers ul li:last-child a.customers-plus-link:hover {
  background-color: var(--max-magenta-bloom);
}
.customers ul li:last-child a.customers-plus-link:hover i {
  transform: rotate(45deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .customers ul li:last-child a.customers-plus-link {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 575px) {
  .customers ul li:last-child a.customers-plus-link {
    width: 40px;
    height: 40px;
  }
}