/* CSS Variables - zmienne kolorów */
:root {
  /* Calmer palette (still aligned with existing theme primitives) */
  --color-primary-heading: #2f3f66;
  --color-primary-button: #eb811f;
  --color-primary-button-hover: #d9721c;
  --color-subtitle: #5b6470;
  --color-navbar-bg: #0b2e45;
  --color-nav-main-bg: #f4ba58;
  --color-customsection-bg: #2f3f66; /* section background */
  --color-customsection-text: #ffffff; /* base text color for section */
  --color-customsection-muted: rgba(255, 255, 255, 0.85);

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg-light: #f6f7f9;
  --color-bg-subtle: #f5f7fa;

  /* Text grays */
  --color-text-dark: #1d1d1f;
  --color-text-body: #333333;
  --color-text-medium: #555555;
  --color-text-light: #666666;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
}

body {
  font-family: 'Open Sans', Arial, sans-serif !important;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}
/* Baseline heading rhythm for consistency across frontpage sections */
h1 {
  line-height: 1.2;
}
h2 {
  line-height: 1.25;
}
h3 {
  line-height: 1.3;
}
h4 {
  line-height: 1.35;
}
h5 {
  line-height: 1.4;
}
#page-header {
  min-height: 180px;
  height: auto;
  display: flex;
  align-items: center;
}
#page-header.internalbanner {
  background-position: center center;
  background-size: cover;
}
#page-header > div {
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
}

/* Glassmorphism styling for internal banner card & empty state cleanup */
#page-header.internalbanner .card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
#page-header #internalbannertagline:empty,
#page-header .mini-block:empty {
  display: none !important;
}

/* Course overview cards — taller crop so square course images are less clipped */
.course-card .card-img-top,
.theme-card .card-img-top {
  height: auto;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Course overview list/summary — Moodle defaults .summary-image to 5rem² (too small) */
.block_myoverview .summary-image,
.block_myoverview .list-image {
  width: 100%;
  height: auto;
  min-height: 7.5rem;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Tablet/desktop: enlarge the image column and align it with the summary heading. */
@media (min-width: 768px) {
  .block_myoverview .course-listitem > .row > .col-md-2 {
    flex: 0 0 35%;
    max-width: 35%;
    align-items: flex-start !important;
  }
  .block_myoverview .course-listitem > .row > .col-md-9 {
    flex: 0 0 56.666667%;
    max-width: 56.666667%;
  }
  .block_myoverview .summary-image,
  .block_myoverview .list-image {
    aspect-ratio: 1 / 1;
  }
}
#nav-main > div > div.float-left > a > img {
  max-height: 80px;
}

.navbar.navbar-bootsw {
  height: 80px;
  display: flex;
  align-items: center;
  background: var(--color-navbar-bg);
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

.navbar.navbar-bootsw > * {
  align-items: center;
  display: flex;
}

#nav-main,
#nav-main img {
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 0 !important;
}

.navbar .float-right {
  align-items: center;
  display: flex;
  height: 100%;
}

.navbar .float-right > * {
  align-items: center;
  display: flex;
  height: 100%;
}

.navbar .nav-link,
.navbar .btn,
.navbar .dropdown {
  align-items: center;
  display: flex;
  height: 80px;
}

.navbar .nav-link {
  padding-block: 0;
}

#nav-main {
  background: var(--color-nav-main-bg);
  overflow: visible;
}

#nav-main > div {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  gap: 12px;
  overflow: visible;
}

#nav-main > div > div.float-left {
  margin-right: auto;
}

/* ================================
   Activity navigation — course pages (lean / minimal)
   ================================ */
#region-main > div.mt-5.mb-1.activity-navigation.container-fluid,
#region-main > div.activity-navigation {
  background: var(--color-white);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .row,
#region-main > div.activity-navigation .row {
  align-items: center;
}

/* Cols: prev / select / next in jednej linii */
#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .row
  > [class*='col-'],
#region-main > div.activity-navigation .row > [class*='col-'] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wrapper dla prev/next aby mieć flex + ellipsis */
#region-main .activity-navigation .float-start,
#region-main .activity-navigation .float-end {
  display: flex;
  align-items: center;
}

/* Activity header (jeśli Moodle używa osobnego div.activity-header) */
#region-main > div.activity-header {
  background: var(--color-white);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Stare, agresywne hover/focus dla przycisków nawigacji usunięte
   (transform, duże cienie) – zostawiamy tylko delikatny box-shadow powyżej. */

#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .urlselect,
#region-main > div.activity-navigation .urlselect {
  width: 100%;
}

#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .urlselect
  select,
#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  select.form-select.urlselect,
#region-main > div.activity-navigation .urlselect select,
#region-main > div.activity-navigation select.form-select.urlselect {
  width: 100%;
  height: 50px;
  padding: 0 36px 0 16px;
  border: 2px solid #eee;
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text-dark);
  font-size: 0.95rem;
  font-weight: 400;
  transition: border-color 0.2s ease;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.938 10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .urlselect
  select:hover,
#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  select.form-select.urlselect:hover,
#region-main > div.activity-navigation .urlselect select:hover,
#region-main > div.activity-navigation select.form-select.urlselect:hover {
  border-color: #86868b;
}

#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .urlselect
  select:focus,
#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  select.form-select.urlselect:focus,
#region-main > div.activity-navigation .urlselect select:focus,
#region-main > div.activity-navigation select.form-select.urlselect:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .urlselect
  select
  option {
  padding: 10px;
  color: var(--color-primary-heading);
}

#region-main
  > div.mt-5.mb-1.activity-navigation.container-fluid
  .urlselect
  select
  option:first-child,
#region-main > div.activity-navigation .urlselect select option:first-child {
  color: rgba(3, 42, 71, 0.5);
}

/* Center column alignment */
#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .mdl-align,
#region-main > div.activity-navigation .mdl-align {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Float positioning for prev/next */
#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .float-start,
#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .float-end,
#region-main > div.activity-navigation .float-start,
#region-main > div.activity-navigation .float-end {
  display: flex;
  align-items: center;
  width: 100%;
}

#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .float-start,
#region-main > div.activity-navigation .float-start {
  justify-content: flex-start;
}

#region-main > div.mt-5.mb-1.activity-navigation.container-fluid .float-end,
#region-main > div.activity-navigation .float-end {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid,
  #region-main > div.activity-navigation {
    padding: 24px 22px;
    border-radius: 14px;
  }

  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .row,
  #region-main > div.activity-navigation .row {
    gap: 1rem;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .row
    > [class*='col-'],
  #region-main > div.activity-navigation .row > [class*='col-'] {
    padding: 16px;
    min-height: 90px;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .btn.btn-link,
  #region-main > div.activity-navigation .btn.btn-link,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .prevsection,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .nextsection,
  #region-main > div.activity-navigation .prevsection,
  #region-main > div.activity-navigation .nextsection {
    font-size: 0.9rem;
    padding: 12px 22px;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .urlselect
    select,
  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    select.form-select.urlselect,
  #region-main > div.activity-navigation .urlselect select,
  #region-main > div.activity-navigation select.form-select.urlselect {
    height: 48px;
    font-size: 0.9rem;
  }
}

@media (min-width: 431px) and (max-width: 1199px) {
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid,
  #region-main > div.activity-navigation {
    padding: 26px 28px;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .row
    > [class*='col-'],
  #region-main > div.activity-navigation .row > [class*='col-'] {
    min-height: 100px;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .btn.btn-link,
  #region-main > div.activity-navigation .btn.btn-link,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .prevsection,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .nextsection,
  #region-main > div.activity-navigation .prevsection,
  #region-main > div.activity-navigation .nextsection {
    font-size: 0.95rem;
    padding: 13px 30px;
  }
}

@media (max-width: 430px) {
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid,
  #region-main > div.activity-navigation {
    padding: 20px 18px;
  }

  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .row,
  #region-main > div.activity-navigation .row {
    flex-direction: column;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .row
    > [class*='col-'],
  #region-main > div.activity-navigation .row > [class*='col-'] {
    width: 100%;
    flex: 1 1 100%;
    padding: 14px;
    min-height: auto;
  }

  #region-main
    > div.mt-5.mb-1.activity-navigation.container-fluid
    .btn.btn-link,
  #region-main > div.activity-navigation .btn.btn-link,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .prevsection,
  #region-main > div.mt-5.mb-1.activity-navigation.container-fluid .nextsection,
  #region-main > div.activity-navigation .prevsection,
  #region-main > div.activity-navigation .nextsection {
    width: 100%;
    justify-content: center;
  }
}

/* ================================
   Login page — clear and branded
   ================================ */
.login-page.section,
body.pagelayout-login .login-page.section {
  background: transparent; /* let the site background show */
  padding: 36px 0 40px;
}

.login-page .section-header,
body.pagelayout-login .login-page .section-header {
  margin-bottom: 16px;
}

.login-page .section-title,
body.pagelayout-login .login-page .section-title {
  color: var(--color-primary-heading);
  font-size: 28px; /* normalized */
  font-weight: 700;
  margin: 0 0 8px;
}

.login-page .section-subtitle,
body.pagelayout-login .login-page .section-subtitle {
  color: var(--color-subtitle);
  font-size: 16px; /* normalized */
  margin: 0;
}

/* Card wrapper for core login form */
.login-page .login-card,
body.pagelayout-login .login-card {
  background: rgba(255, 255, 255, 0.94); /* soft glass */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 22px 24px;
  margin-top: 14px;
}

/* Emphasize labels and align inputs to brand */
.login-page .login-card label,
.login-page .login-card .col-form-label,
body.pagelayout-login .login-card label,
body.pagelayout-login .login-card .col-form-label {
  display: block;
  font-weight: 700;
  color: var(--color-primary-heading);
  font-size: 14px;
  line-height: 1.4;
}

.login-page .login-card input[type='text'],
.login-page .login-card input[type='email'],
.login-page .login-card input[type='password'],
.login-page .login-card .form-control,
body.pagelayout-login .login-card input[type='text'],
body.pagelayout-login .login-card input[type='email'],
body.pagelayout-login .login-card input[type='password'],
body.pagelayout-login .login-card .form-control {
  background: var(--color-white);
  border-color: #d1d5db;
  font-size: 16px; /* normalized */
  line-height: 1.4;
}

.login-page .login-card input:focus,
.login-page .login-card .form-control:focus,
body.pagelayout-login .login-card input:focus,
body.pagelayout-login .login-card .form-control:focus {
  border-color: var(--color-primary-button);
  box-shadow: 0 0 0 3px rgba(235, 129, 31, 0.22);
  outline: none;
}

/* Primary action buttons */
.login-page .login-card .btn-primary,
.login-page .login-card button[type='submit'],
body.pagelayout-login .login-card .btn-primary,
body.pagelayout-login .login-card button[type='submit'] {
  background: var(--color-primary-button);
  border-color: var(--color-primary-button);
  font-weight: 700;
  font-size: 16px; /* normalized */
}
.login-page .login-card .btn-primary:hover,
.login-page .login-card button[type='submit']:hover,
body.pagelayout-login .login-card .btn-primary:hover,
body.pagelayout-login .login-card button[type='submit']:hover {
  background: var(--color-primary-button-hover);
  border-color: var(--color-primary-button-hover);
}

/* Links (forgotten password etc.) */
.login-page .login-card a,
body.pagelayout-login .login-card a {
  color: var(--color-primary-heading);
  font-weight: 600;
  font-size: 14px; /* normalized */
  text-decoration: underline;
}
.login-page .login-card a:hover,
body.pagelayout-login .login-card a:hover {
  color: var(--color-primary-button);
}

/* (removed) Brand bar styles; navbar provides the logo on login */

/* Signup wrapper (create account) block on login page */
.login-page .signup-wrapper {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 14px 16px;
  margin-top: 16px;
}

.login-page .login-instructions {
  color: #444;
  font-size: 14px;
  margin-bottom: 10px;
}

.login-page .login-instructions .login-heading {
  color: var(--color-primary-heading);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}

.login-page .login-signup .btn.btn-secondary {
  background: var(--color-primary-button);
  border-color: var(--color-primary-button);
  color: var(--color-white);
  font-weight: 700;
  border-radius: 25px;
  padding: 10px 18px;
}

.login-page .login-signup .btn.btn-secondary:hover {
  background: var(--color-primary-button-hover);
  border-color: var(--color-primary-button-hover);
}

/* Center the cookies notification button */
.login-page .login-card .divider.border-start {
  display: none;
}

.login-page
  .login-card
  button[data-modal][data-modal-title-str*='cookiesenabled'] {
  display: block;
  margin: 10px auto 0; /* center horizontally */
  align-self: center;
}

/* --- Course Intro section (between welcome and categories) --- */
.course-intro-section {
  background: var(--color-white); /* consistent with frontpage white sections */
  padding: 32px 0 28px; /* match .marketingsection rhythm */
}

.course-intro-section .section-header {
  margin-bottom: 12px;
}

.course-intro-section .section-title,
.course-intro-section h2.section-title {
  color: var(--color-primary-heading);
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.2;
}

.course-intro-section .section-body {
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.7;
}

.course-intro-section .section-body p {
  margin: 0 0 12px;
}

.course-intro-section .programs-intro {
  margin-top: 10px;
}

.course-intro-section .programs-intro .h3,
.course-intro-section .programs-intro h3 {
  color: var(--color-primary-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 12px 0 6px;
}

.course-intro-section .programs-intro p {
  color: #444;
  font-size: 15px;
  margin: 0 0 6px;
}

/* ================================
   Static .html pages — minimalist, readable, on-brand
   Scope under .static-page to avoid affecting Moodle pages
   ================================ */
body.static-page {
  background: var(--color-white);
  color: #1f2937; /* neutral dark */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.static-page .container {
  max-width: 960px;
  padding: 20px;
  margin: 0 auto;
}

body.static-page header {
  text-align: center;
  margin: 10px 0 18px;
}
body.static-page header h1 {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  color: var(--color-primary-heading);
  font-weight: 900;
  font-size: 28px;
  margin: 0 0 6px;
}
body.static-page header p {
  color: var(--color-subtitle);
  font-size: 15px;
  margin: 0;
}

body.static-page .content {
  margin-top: 8px;
}

/* Sections reuse frontpage look */
body.static-page .section {
  background: var(--color-white);
  padding: 20px 0;
}
body.static-page .section-title,
body.static-page h2.section-title {
  color: var(--color-primary-heading);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
}
body.static-page p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 12px;
}
body.static-page ul {
  padding-left: 20px;
  margin: 0 0 12px;
}
body.static-page li {
  margin: 6px 0;
}

/* Reuse welcome buttons style for CTAs on static pages */
body.static-page .welcome-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body.static-page .btn-welcome {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary-button);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  white-space: nowrap;
}
body.static-page .btn-welcome:hover {
  background: var(--color-primary-button-hover);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 162, 65, 0.4);
}

/* Contact box */
body.static-page .contact-box {
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 16px 18px;
  margin: 10px 0 12px;
}
body.static-page .contact-box h3 {
  color: var(--color-primary-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
body.static-page .contact-box a {
  color: var(--color-primary-button);
  font-weight: 700;
  text-decoration: none;
}
body.static-page .contact-box a:hover {
  color: var(--color-primary-button-hover);
  text-decoration: underline;
}

/* FAQ list (QA.html) */
body.static-page .faq-item {
  margin: 10px 0 14px;
}
body.static-page .faq-question {
  color: var(--color-primary-heading);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}
body.static-page .faq-answer {
  color: var(--color-text-body);
  font-size: 15px;
  line-height: 1.7;
}

/* Footer in static pages */
body.static-page footer {
  text-align: center;
  color: var(--color-text-light);
  font-size: 14px;
  padding: 16px 0 24px;
}

/* Policy page — reuse gradient hero + card layout used in other static pages */
body.static-page.policy-page {
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--color-text-body);
  line-height: 1.6;
}

.policy-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.policy-hero {
  background: linear-gradient(
    135deg,
    var(--color-navbar-bg) 0%,
    var(--color-primary-heading) 100%
  );
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  color: var(--color-white);
  margin-bottom: 40px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.16);
  position: relative;
  overflow: hidden;
}
.policy-hero__title {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  color: var(--color-white) !important;
}
.policy-hero__subtitle {
  font-size: 20px;
  font-weight: 300;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-white) !important;
}

.policy-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.policy-content__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary-heading);
  margin: 0 0 20px;
}

.policy-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
  padding: 30px;
  margin-bottom: 35px;
  border-left: 4px solid var(--color-primary-button);
}
.policy-section__title {
  background: var(--color-primary-heading);
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  margin: -30px -30px 20px -30px;
  padding: 18px 30px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}
.policy-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  color: var(--color-text-medium);
}
.policy-list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: var(--color-primary-button);
  font-weight: 700;
}

.policy-footer {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-light);
}
.policy-footer p {
  margin: 0 0 6px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .policy-hero {
    padding: 40px 25px;
  }
  .policy-hero__title {
    font-size: 36px;
  }
  .policy-card {
    padding: 30px 20px;
  }
  .policy-section {
    padding: 24px 20px;
  }
  .policy-section__title {
    margin: -24px -20px 16px -20px;
    padding: 14px 20px;
  }
}

/* Welcome / Cel Kursu Section */
.cel-kursu-section {
  padding: 20px 0 15px;
  background: var(--color-white);
}

.cel-kursu-section .section-heading {
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary-heading);
  margin-bottom: 8px;
  line-height: 1.15;
}

.cel-kursu-section .section-subtitle {
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-subtitle);
  margin-bottom: 20px;
}

.cel-kursu-section .welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.cel-kursu-section .btn-welcome {
  display: block;
  width: 100%;
  max-width: 220px;
  padding: 12px 24px;
  background: var(--color-primary-button);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  white-space: nowrap;
}

.cel-kursu-section .btn-welcome:hover {
  background: var(--color-primary-button-hover);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 162, 65, 0.4);
}

.cel-kursu-section .btn-primary,
.cel-kursu-section .btn-secondary {
  background: var(--color-primary-button);
}

.cel-kursu-section .welcome-image {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cel-kursu-section .welcome-image img {
  max-width: 100%;
  height: auto;
}

.quote-container {
  text-align: center;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.quote-text {
  color: #750b06;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
  font-family: Georgia, serif;
}

.quote-author {
  color: #750b06;
  font-size: 18px;
  font-weight: bold;
}

/* Lean Development hero tweaks - compact layout matching wzor.png */
.lean-development-section .container-fluid {
  max-width: 1600px;
  padding-left: 4rem;
  padding-right: 2rem;
}

.lean-development-section .row.no-gutters {
  margin-inline: 0;
}

.lean-development-section .welcome-content {
  padding-right: 2rem;
}

.lean-development-section .content-inner {
  max-width: 480px;
}

.lean-development-section .welcome-image {
  overflow: visible;
  padding-left: 0;
}

.lean-development-section .illustration-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: make image larger to match wzor.png */
@media (min-width: 992px) {
  .lean-development-section .sketch-illustration {
    width: 115%;
    max-width: none;
    height: auto;
    transform: translateX(5%);
  }
}

/* Mobile/tablet: stack and center */
@media (max-width: 991px) {
  .cel-kursu-section {
    padding: 25px 0 15px;
  }

  .cel-kursu-section .welcome-content {
    margin-bottom: 25px;
    text-align: center;
  }

  .cel-kursu-section .section-heading {
    font-size: 28px;
  }

  .cel-kursu-section .welcome-buttons {
    justify-content: center;
  }

  .lean-development-section .container-fluid {
    padding-inline: 1.5rem;
  }

  .lean-development-section .sketch-illustration {
    width: 100%;
    transform: none;
  }

  .lean-development-section .welcome-content {
    text-align: center;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .lean-development-section .content-inner {
    margin: 0 auto;
  }

  .lean-development-section .welcome-buttons {
    justify-content: center;
  }
}

/* LDP5 Promo Banner — compact strip above hero */
.ldp5-promo-banner {
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  border-top: 4px solid var(--color-primary-button);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ldp5-promo-banner:hover,
.ldp5-promo-banner:focus {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ldp5-promo-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 2rem 1rem 4rem;
}

.ldp5-promo-banner__image {
  flex-shrink: 0;
  height: 88px;
  width: auto;
  object-fit: contain;
}

.ldp5-promo-banner__content {
  flex: 1;
  min-width: 0;
}

.ldp5-promo-banner__badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.35rem;
  background: var(--color-primary-button);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.4;
}

.ldp5-promo-banner__title {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-heading);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.ldp5-promo-banner__subtitle {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-subtitle);
  margin: 0;
}

.ldp5-promo-banner__cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary-button);
  color: var(--color-white);
  border-radius: 25px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ldp5-promo-banner:hover .ldp5-promo-banner__cta {
  background: var(--color-primary-button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 162, 65, 0.4);
}

@media (min-width: 768px) and (max-width: 991px) {
  .ldp5-promo-banner__inner {
    padding: 1.5rem;
  }

  .ldp5-promo-banner__image {
    height: 72px;
  }

  .ldp5-promo-banner__title {
    font-size: 18px;
  }

  .ldp5-promo-banner__cta {
    padding: 10px 18px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .ldp5-promo-banner__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.5rem;
    gap: 0.75rem;
  }

  .ldp5-promo-banner__image {
    height: 68px;
  }

  .ldp5-promo-banner__content {
    width: 100%;
  }

  .ldp5-promo-banner__badge,
  .ldp5-promo-banner__title,
  .ldp5-promo-banner__subtitle {
    text-align: center;
  }

  .ldp5-promo-banner__cta {
    margin-left: 0;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 430px) {
  .ldp5-promo-banner__inner {
    padding: 1rem;
  }

  .ldp5-promo-banner__image {
    height: 60px;
  }

  .ldp5-promo-banner__title {
    font-size: 17px;
  }

  .ldp5-promo-banner__subtitle {
    font-size: 13px;
  }
}

/* Marketing section — quote styling like the provided image */
.marketingsection {
  background: var(--color-white);
  padding: 20px 0;
}

.marketingsection .container {
  text-align: center;
}

.marketingsection h3 {
  color: #750b06; /* requested text color */
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  margin: 10px 0;
}

/* If you wrap lines in <em> they'll render like the quote in the image */
.marketingsection h3 em {
  display: block;
  font-style: italic;
  font-weight: 400;
}

/* Wrap author in <strong> to make it bold on its own line */
.marketingsection h3 strong {
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .marketingsection h3 {
    font-size: 22px;
  }
}

/* --- Clients Logo section (Footer top) --- */
.clients-logo {
  /* Make the footer background visible across the full width */
  background: transparent;
  position: relative; /* enable half-white overlay */
  padding: 20px 0;
}

/* Ensure content appears above the overlay */
.clients-logo > .container,
.clients-logo > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Right 50% white panel; left 50% shows the underlying footer artwork */
.clients-logo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--color-white);
  z-index: 0;
  pointer-events: none;
}

.clients-logo .logocl,
.clients-logos-carousel .logocl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}

/* Make all logos visually uniform: same height, keep aspect ratio,
   and add border using primary-heading color */
.clients-logo .logocl img {
  display: block;
  height: 90px; /* ~50% bigger than previous 60px */
  width: 150px; /* fixed tile width so all placeholders look equal */
  max-width: 100%;
  object-fit: contain; /* keep logo proportions inside tile */
  background: var(--color-white);
  border: 2px solid var(--color-primary-heading);
  border-radius: 8px;
  padding: 10px; /* inner breathing so border doesn't touch the logo */
  box-sizing: border-box;
}

/* --- Frontpage Clients Logos Carousel --- */
.clients-logos-section {
  padding: 20px 0 60px;
}

.clients-logos-section .clients-logos-heading {
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--color-primary-heading);
  text-align: center;
}

/* Reuse the same uniform logo tile as in footer */
.clients-logos-carousel .logocl img {
  display: block;
  height: 90px;
  width: 150px;
  max-width: 100%;
  object-fit: contain;
  background: var(--color-white);
  border: 2px solid var(--color-primary-heading);
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 575px) {
  .clients-logo .logocl img {
    height: 72px; /* scale down on small screens keeping ~50% boost */
    width: 120px;
  }

  .clients-logos-carousel .logocl img {
    height: 72px;
    width: 120px;
  }
}

/* --- Custom Section (Zalety Kursu) --- */
.customsection {
  background: var(--color-customsection-bg);
  color: var(--color-customsection-text);
  padding: 40px 0 50px;
}

.customsection .section-header {
  margin-bottom: 24px;
}

.customsection .customsection-title {
  color: var(--color-white);
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Tutors section: convert parent H1 to H2 in child and align size with section titles */
.tutors h2#tutors-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* News section featured heading spacing/scale */
#news h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}

.customsection .box {
  padding: 22px 16px;
}

.customsection .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.customsection .icon-circle .fa-solid {
  color: var(--color-white);
  font-size: 40px;
  line-height: 1;
}

/* Support FA5/FA6 when icon is placed directly in the box (without .icon-circle wrapper) */
.customsection .box > i.fa,
.customsection .box > i.fas,
.customsection .box > i.far,
.customsection .box > i.fab,
.customsection .box > i.fa-solid,
.customsection .box > i.fa-regular,
.customsection .box > i.fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
  color: var(--color-white);
  font-size: 40px; /* make icons big again */
  line-height: 1;
}

.customsection .box-title {
  color: var(--color-white);
  font-weight: 700;
  font-size: 18px;
  margin: 8px 0 6px;
}

/* Ensure white title even if parent sets .customsection .box h5 */
.customsection .box h5.box-title {
  color: var(--color-white);
}

.customsection .box-desc {
  color: var(--color-customsection-muted);
  font-size: 14px;
  margin: 0 auto;
  max-width: 320px;
}

/* Optional CTA button style if added later */
.customsection .btn-cta {
  background: var(--color-nav-main-bg);
  border: none;
  color: #000;
  font-weight: 700;
  border-radius: 28px;
  padding: 12px 28px;
  min-width: 220px;
}

.customsection .btn-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .customsection {
    padding: 30px 0 40px;
  }

  .customsection .customsection-title {
    font-size: 26px;
  }
}

/* --- Footer modern palette aligned with frontpage --- */
#page-footer,
#page-footer.footer-modern {
  background: var(
    --color-customsection-bg
  ); /* dark blue from frontpage section */
  color: var(--color-customsection-muted);

  font-size: 16px; /* improve readability for 40+ */
  line-height: 1.6;
}

#page-footer.footer-modern .footersection h5 {
  color: var(--color-white);
  font-weight: 700;
}

#page-footer.footer-modern .footersection p,
#page-footer.footer-modern .footersection li,
#page-footer.footer-modern .footersection a {
  color: var(--color-customsection-muted);
}

#page-footer.footer-modern .footersection a:hover {
  /* was: color: #fff; */
  color: var(--color-primary-button);
  text-decoration: underline;
}

#page-footer.footer-modern .footer-logo {
  max-height: 64px;
  margin-bottom: 12px;
}

#page-footer.footer-modern .bottom-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 16px;
  padding-top: 12px;
}

#page-footer.footer-modern .list-unstyled li + li {
  margin-top: 6px;
}

/* Developer credit follows the same dark footer palette */
#page-footer .developer-credit {
  background: var(--color-customsection-bg);
  color: var(--color-customsection-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 10px 0;
}
#page-footer .developer-credit a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}
#page-footer .developer-credit a:hover {
  color: var(--color-primary-button);
  text-decoration: underline;
}

.footer-title {
  font-size: 1.2em;
  margin-bottom: 20px;
  font-weight: 700;
}

.logo-container {
  margin-bottom: 20px;
}

.logo-text {
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 18px;
}
.logo-text .logo-acronym {
  color: var(--color-nav-main-bg);
}
.logo-text .logo-sep {
  color: var(--color-white);
  padding: 0 8px;
}
.logo-text .logo-name {
  color: var(--color-white);
}
.logo-text .logo-subline {
  display: block;
  margin-top: 2px;
  font-size: 0.7em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.12em;
}
.logo-text .dot {
  font-size: 1.3em;
  vertical-align: middle;
  padding: 0 4px;
}

.contact-info p,
.address-section p {
  margin: 6px 0;
}
.contact-info p strong {
  font-weight: 700;
}

.footer-section-right .contact-grid {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.right-columns {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center; /* center the two blocks inside the right column */
}
.right-block {
  flex: 1 1 260px;
}
.footer-section-right .column {
  flex: 1 1 260px;
}
.footer-section-right .column-title {
  font-size: 1.1em;
  margin-bottom: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-white);
}
.footer-section-right .footer-title {
  text-align: center;
}
.footer-section-right .right-block {
  text-align: left; /* keep text left-aligned while blocks are centered */
}
.footer-section-right .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.contact-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
}
.contact-list li i {
  color: var(--color-primary-button); /* brand accent */
  width: 1.25em;
  text-align: center;
  line-height: 1.6;
}
.contact-list li a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}
.contact-list a[href^='mailto:'] {
  text-transform: none; /* ensure emails display in lowercase */
}
.contact-list li a:hover {
  color: var(--color-primary-button-hover);
  text-decoration: underline;
}
.footer-section-right .contact-icon {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05em;
  width: 1.25em;
  text-align: center;
  line-height: 1.6;
}
.footer-section-right .contact-item a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}
.footer-section-right .contact-item a:hover {
  color: var(--color-nav-main-bg);
}

/* Desktop: subtle divider between LLW and Yokoten columns */
@media (min-width: 992px) {
  .footer-section-right {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 24px;
  }
}

/* ================================
   Quiz (mod_quiz) — spójność z motywem
   ================================ */
/* Główne scope do widoków quizu */
body.path-mod-quiz {
  --quiz-card-bg: #ffffff;
  --quiz-card-border: rgba(0, 0, 0, 0.08);
  --quiz-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Karty pytań */
body.path-mod-quiz .que {
  background: var(--quiz-card-bg);
  border: 1px solid var(--quiz-card-border);
  border-radius: 10px;
  box-shadow: var(--quiz-shadow);
  padding: 16px 18px;
  margin: 14px 0;
}

/* Tekst pytania i treść */
body.path-mod-quiz .que .qtext,
body.path-mod-quiz .que .formulation {
  color: #1f2937; /* ciemny neutral */
  font-size: 16px;
  line-height: 1.6;
}

/* Pogrubione tytuły/separatory w pytaniach */
body.path-mod-quiz .que h3,
body.path-mod-quiz .que h4,
body.path-mod-quiz .que .no {
  color: var(--color-primary-heading);
  margin-top: 0;
}

/* Odpowiedzi: czytelne etykiety */
body.path-mod-quiz .que .answer label,
body.path-mod-quiz .que .answer .form-check-label {
  font-size: 15px;
  line-height: 1.5;
}

/* Wejścia i focus w pytaniach */
body.path-mod-quiz .que input[type='text'],
body.path-mod-quiz .que input[type='number'],
body.path-mod-quiz .que textarea,
body.path-mod-quiz .que select {
  background: var(--color-white);
  border-color: #d1d5db;
}
body.path-mod-quiz .que input:focus,
body.path-mod-quiz .que textarea:focus,
body.path-mod-quiz .que select:focus {
  border-color: var(--color-primary-button);
  box-shadow: 0 0 0 3px rgba(235, 129, 31, 0.25);
  outline: none;
}

/* Timer — pigułka z akcentem brandowym */
body.path-mod-quiz #mod_quiz_timer,
body.path-mod-quiz #quiz-timer,
body.path-mod-quiz .quiz-timer,
body.path-mod-quiz #quiz-time-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-button);
  color: var(--color-white);
  border-radius: 28px;
  padding: 6px 12px;
  font-weight: 700;
}

/* Przyciski akcji w quizie */
body.path-mod-quiz .submitbtns .btn-primary,
body.path-mod-quiz .btn-primary {
  background: var(--color-primary-button);
  border-color: var(--color-primary-button);
}
body.path-mod-quiz .submitbtns .btn-primary:hover,
body.path-mod-quiz .btn-primary:hover {
  background: var(--color-primary-button-hover);
  border-color: var(--color-primary-button-hover);
}

/* Nawigacja pytań (jeśli występują klasy qn_buttons/qnbutton)
   Uwaga: nie wymuszamy grid, by nie rozjechać układu w zależności od motywu/układu. */
body.path-mod-quiz .qn_buttons {
  display: block; /* zachowaj domyślny układ */
}
body.path-mod-quiz .qn_buttons .qnbutton,
body.path-mod-quiz .qn_buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  background: var(--color-white);
  border: 1px solid var(--quiz-card-border);
  color: #111;
  text-decoration: none;
  font-weight: 600;
  padding: 0 8px;
  margin: 4px;
}
body.path-mod-quiz .qn_buttons .qnbutton:hover,
body.path-mod-quiz .qn_buttons a:hover {
  border-color: var(--color-primary-button);
  color: var(--color-primary-button);
}

/* ================================
   Login — pokaż etykiety pól (labels) i dopasuj do stylu strony
   ================================ */
/* Wiele motywów ukrywa labelki poprzez .sr-only — na ekranie logowania pokazujemy je jawnie. */
body.pagelayout-login label.sr-only,
body.pagelayout-login .col-form-label.sr-only,
body.pagelayout-login .fa-sr-only,
body.pagelayout-login .sr-only-focusable {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  white-space: normal !important;
}

/* Ogólne formatowanie labeli na loginie pod brand (jak na sekcjach frontpage). */
body.pagelayout-login label,
body.pagelayout-login .col-form-label {
  display: block;
  font-weight: 700;
  color: var(--color-primary-heading);
  font-size: 14px;
  line-height: 1.4;
}

/* Dodatkowy odstęp między labelką a polem tekstowym dla czytelności. */
body.pagelayout-login label + input,
body.pagelayout-login .col-form-label + input,
body.pagelayout-login label + .form-control,
body.pagelayout-login .col-form-label + .form-control {
  margin-top: 2px;
}
/* === FOOTER MODIFICATIONS FOR NEW LAYOUT === */

/* Main centered content wrapper */
#page-footer.footer-modern .footer-content-main {
  display: flex !important;
  justify-content: center !important;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/* Title stays centered; office cards align themselves */
#page-footer.footer-modern .footersection {
  margin: 0 auto !important;
  text-align: center;
  max-width: 100%;
  flex: 1 1 100%;
}

/* Update main title */
#page-footer.footer-modern .footer-content-main .footer-title {
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

/* Section headers using existing orange accent */
#page-footer.footer-modern .column-title {
  color: var(
    --color-primary-button
  ); /* brand orange for footer section titles */
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* Social row layout; pill look comes from .footer-privacy-link */
#page-footer.footer-modern .social-media-links {
  display: flex;
  justify-content: center;
  gap: 21px;
  margin: 10px 0 20px;
  flex-wrap: wrap;
}

/* Two office cards: equal height, left-aligned contact details */
#page-footer.footer-modern .footer-offices {
  align-items: stretch;
}

#page-footer.footer-modern .footer-office {
  display: flex;
  margin-bottom: 1rem;
}

#page-footer.footer-modern .footer-office .footer-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 1.25rem 1.4rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

#page-footer.footer-modern .footer-office .column-title {
  margin-bottom: 0.85rem;
}

#page-footer.footer-modern .footer-block .contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#page-footer.footer-modern .footer-block .contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-customsection-muted);
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

#page-footer.footer-modern .footer-block .contact-list li:last-child {
  margin-bottom: 0;
}

#page-footer.footer-modern .footer-block .contact-list i {
  flex: 0 0 1.25em;
  width: 1.25em;
  margin-right: 0;
  margin-top: 0.2em;
  color: var(--color-primary-button);
  text-align: center;
}

#page-footer.footer-modern .footer-block .contact-list span,
#page-footer.footer-modern .footer-block .contact-list a {
  min-width: 0;
  flex: 1 1 auto;
}

#page-footer.footer-modern .footer-block .contact-list a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

/* Hide old left/right column structure */
#page-footer.footer-modern .footer-section-left,
#page-footer.footer-modern .footer-section-right {
  display: none !important;
}

/* Mobile: stack cards, keep inner content left-aligned */
@media (max-width: 767px) {
  #page-footer.footer-modern .footer-content-main {
    padding: 0 15px;
  }

  #page-footer.footer-modern .footer-office .footer-block {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Ensure proper spacing with existing footer elements */
#page-footer.footer-modern .footer-content-main + .bottom-footer {
  margin-top: 2rem;
}

/* Shared pill: same geometry everywhere; color follows the surface */
.footer-privacy-link,
.nav-pub-btn,
.nav-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1.5px solid currentColor;
  color: var(--color-primary-button);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.footer-privacy-link:hover,
.footer-privacy-link:focus-visible,
.nav-pub-btn:hover,
.nav-pub-btn:focus-visible,
.nav-help-btn:hover,
.nav-help-btn:focus-visible {
  background: var(--color-primary-button);
  color: var(--color-white) !important;
  border-color: var(--color-primary-button);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(235, 129, 31, 0.35);
  outline: none;
}

.footer-privacy-link i,
.nav-pub-btn i,
.nav-help-btn i {
  font-size: 16px;
  line-height: 1;
}

.footer-privacy-link .social-label,
.nav-pub-btn .social-label,
.nav-help-btn .social-label {
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

/* Dark surface (footer): orange outline — parent .klassroom-blue a would otherwise win */
#page-footer.footer-modern .social-media-links a {
  color: var(--color-primary-button);
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.1);
}

#page-footer.footer-modern .social-media-links a:hover,
#page-footer.footer-modern .social-media-links a:focus-visible {
  background: var(--color-primary-button);
  color: var(--color-white) !important;
  border-color: var(--color-primary-button);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(235, 129, 31, 0.35);
  outline: none;
}

/* Light surface (gold nav bar + mobile CTA row): navy outline */
#nav-main .nav-help-btn,
#nav-main .nav-pub-btn,
.mobile-banner-actions .nav-help-btn,
.mobile-banner-actions .nav-pub-btn {
  color: var(--color-primary-heading);
  border-color: var(--color-primary-heading);
  background: rgba(255, 255, 255, 0.22);
}

#nav-main .nav-help-btn:hover,
#nav-main .nav-help-btn:focus-visible,
#nav-main .nav-pub-btn:hover,
#nav-main .nav-pub-btn:focus-visible,
.mobile-banner-actions .nav-help-btn:hover,
.mobile-banner-actions .nav-help-btn:focus-visible,
.mobile-banner-actions .nav-pub-btn:hover,
.mobile-banner-actions .nav-pub-btn:focus-visible {
  background: var(--color-primary-heading);
  color: var(--color-white) !important;
  border-color: var(--color-primary-heading);
  box-shadow: 0 6px 16px rgba(47, 63, 102, 0.35);
}

/* Help CTA — email reveal + copy */
.nav-help-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 40;
}

.nav-help-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid rgba(47, 63, 102, 0.14);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-body);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 50;
}

.nav-help-wrap.is-open .nav-help-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-help-email {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary-heading);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nav-help-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-primary-heading);
  background: var(--color-primary-heading);
  color: #ffffff !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.nav-help-copy i,
.nav-help-copy .nav-help-copy-label {
  color: inherit !important;
}

.nav-help-copy:hover,
.nav-help-copy:focus-visible {
  background: #243554;
  border-color: #243554;
  color: #ffffff !important;
  outline: none;
}

.nav-help-copy.is-copied,
.nav-help-copy.is-copied:hover,
.nav-help-copy.is-copied:focus-visible {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff !important;
}

.nav-help-copy i {
  font-size: 12px;
  line-height: 1;
}

/*
 * Focus Mode for Course Activities
 * Hides sidebar/drawer and top navigation on activity pages (body.path-mod)
 * to provide a distraction-free learning environment for students.
 * EXCLUDES: site admins (user-is-siteadmin) and course editors (user-can-edit)
 * so they can still manage the site and course content.
 */
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #nav-main,
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) .navbar,
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) .drawer,
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit)
  [data-region='drawer'],
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) .secondary-navigation,
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #page-header .card,
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit)
  #page-content
  > .columnleft.blockcolumn {
  display: none !important;
}

/* Ensure content takes full width when sidebar is hidden (students only) */
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #page-wrapper {
  padding-inline: 0 !important;
  margin-left: 0 !important;
}

body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) .drawer-toggles {
  display: none !important;
}

/*
 * Center #page-content for Focus Mode
 * Max-width reduced from 1300px to 1200px for optimal readability (66-75 characters per line)
 * Container is centered in viewport via margin:auto + max-width
 * justify-content:center centers flex children horizontally
 */
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #page-content {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* Responsive padding for tablets and mobile - aligned with Bootstrap breakpoints */
@media (max-width: 767px) {
  body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #page-content {
    padding: 0 16px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #page-content {
    padding: 0 12px !important;
  }
}

/* Remove custom max-height/scroll and add padding for focus mode (students only) */
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit) #region-main {
  max-height: none;
  overflow-y: visible;
  padding-top: 20px;
}

/* Make prev/next section buttons bigger and recolored */
#region-main .activity-navigation .btn.btn-link,
#region-main .activity-navigation .prevsection,
#region-main .activity-navigation .nextsection {
  font-size: 1.15rem; /* +15% */
  padding: 0.5rem 1.4rem; /* trochę większe */
  background-color: var(--color-navbar-bg);
  color: var(--color-white);
  border: 2px solid var(--color-navbar-bg);
}

#region-main .activity-navigation .btn.btn-link:hover,
#region-main .activity-navigation .btn.btn-link:focus,
#region-main .activity-navigation .prevsection:hover,
#region-main .activity-navigation .prevsection:focus,
#region-main .activity-navigation .nextsection:hover,
#region-main .activity-navigation .nextsection:focus {
  background-color: var(--color-primary-heading);
  border-color: var(--color-primary-heading);
  color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(47, 63, 102, 0.22);
}

/* Expand main content area when sidebar is hidden */
body.path-mod:not(.user-is-siteadmin):not(.user-can-edit)
  #page-content
  > .columnmiddle {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* ================================
   Cookie policy page specific styles
   ================================ */
/* Cookie category sections */
.cookie-category {
  margin: 20px 0;
}

.cookie-category h4 {
  color: var(--color-primary-heading);
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 10px;
}

/* Cookie banner preview styling */
.cookie-banner-preview {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid var(--color-primary-button);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.banner-content {
  margin-bottom: 20px;
}

.banner-icon {
  font-size: 32px;
  margin: 0 0 10px;
  text-align: center;
}

.banner-text {
  color: var(--color-text-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 15px;
  text-align: center;
}

.banner-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.banner-buttons button {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-accept-all {
  background: var(--color-primary-button);
  color: var(--color-white);
}

.btn-accept-all:hover {
  background: var(--color-primary-button-hover);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

.btn-essential {
  background: var(--color-white);
  color: var(--color-primary-heading);
  border: 2px solid var(--color-primary-heading);
}

.btn-essential:hover {
  background: var(--color-primary-heading);
  color: var(--color-white);
}

.btn-settings {
  background: #f4f4f4;
  color: var(--color-text-body);
  border: 2px solid #ddd;
}

.btn-settings:hover {
  background: #e0e0e0;
}

.implementation-note {
  background: linear-gradient(135deg, #fff8ef 0%, #ffffff 100%);
  border-left: 4px solid var(--color-primary-button);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.implementation-note h4 {
  color: var(--color-primary-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}

.implementation-note p {
  color: var(--color-text-medium);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 767px) {
  .banner-buttons {
    flex-direction: column;
  }

  .banner-buttons button {
    width: 100%;
  }

  .cookie-banner-preview {
    padding: 16px;
  }
}

/* Hide bottom footer */
div.bottom-footer {
  display: none !important;
}

/* Custom Publications Button in Navbar */
.navbar .nav-pub-btn {
  margin-right: 20px;
  font-size: 0.95rem;
}

/* ================================
   Activity Completion "Mark as done" Button Customization
   ================================ */

/* Define the pulse animation */
@keyframes completion-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(117, 11, 6, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(117, 11, 6, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(117, 11, 6, 0);
  }
}

/* Incomplete state (Mark as done) - Red #750B06 */
div.activity-information
  button[data-action='toggle-manual-completion'][data-state='0'],
button[data-action='toggle-manual-completion'][data-state='0'],
button[data-action='toggle-manual-completion'].btn-outline-secondary {
  color: #750b06 !important;
  border-color: #750b06 !important;
  background-color: transparent !important;
  animation: completion-pulse 2s infinite;
}

div.activity-information
  button[data-action='toggle-manual-completion'][data-state='0']:hover,
button[data-action='toggle-manual-completion'][data-state='0']:hover,
button[data-action='toggle-manual-completion'].btn-outline-secondary:hover {
  background-color: #750b06 !important;
  color: var(--color-white) !important;
}

/* Complete state (Done) - Green #066221 */
div.activity-information
  button[data-action='toggle-manual-completion'][data-state='1'],
button[data-action='toggle-manual-completion'][data-state='1'],
button[data-action='toggle-manual-completion'].btn-success {
  background-color: #066221 !important;
  border-color: #066221 !important;
  color: var(--color-white) !important;
  animation: none; /* Stop pulsing when done */
}

div.activity-information
  button[data-action='toggle-manual-completion'][data-state='1']:hover,
button[data-action='toggle-manual-completion'][data-state='1']:hover,
button[data-action='toggle-manual-completion'].btn-success:hover {
  background-color: #05501b !important; /* Slightly darker for hover */
  border-color: #05501b !important;
}

/* Disabled state (processing or no permission) */
button[data-action='toggle-manual-completion'][disabled],
button[data-action='toggle-manual-completion'].disabled {
  opacity: 0.65;
  cursor: not-allowed;
  animation: none !important; /* Stop pulsing when processing */
  pointer-events: none;
  box-shadow: none !important;
}

/* ================================
   Mobile & Tablet RWD Fixes — Frontpage
   Only mobile/tablet view, desktop unchanged.
   Breakpoints: 991px (tablet), 767px (phone lg), 575px (phone), 430px (phone sm)
   ================================ */

/* ==========================================================================
   Responsive: Tablet (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .navbar .nav-pub-btn {
    margin-right: 10px;
    font-size: 0.9rem;
  }
  .navbar .nav-pub-btn .social-label {
    display: none; /* Hide text on smaller screens where space is limited */
  }

  /* Prevent CTA overlap in the orange bar on mobile/tablet;
     buttons are rendered in .mobile-banner-actions below the bar. */
  #nav-main .nav-help-wrap,
  #nav-main .nav-pub-btn {
    display: none !important;
  }

  /* 1. Overflow protection */
  html,
  body {
    overflow-x: hidden;
  }
  #page-wrapper,
  #page {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* 2. Page header — shorter on tablet, keep image readable */
  #page-header {
    min-height: 160px;
    height: auto;
  }
  #page-header > div {
    padding-top: 8px;
  }

  /* 3. Logo bar — keep logo and hamburger in one row */
  #nav-main > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 6px 10px;
    gap: 8px;
  }
  #nav-main > div > div.float-left {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
  }
  #nav-main > div > div.float-left > a {
    display: inline-flex;
    max-width: 100%;
  }
  #nav-main > div > div.float-left > a > img {
    max-height: 48px;
    max-width: 52vw;
    width: auto;
  }
  #nav-main nav.navbar.navbar-bootswatch.float-right {
    float: none !important;
    margin-left: auto;
  }

  /* 4. Navbar — compact and aligned */
  .navbar.navbar-bootswatch {
    height: auto !important;
    min-height: 44px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
  }
  .navbar.navbar-bootswatch .nav-link,
  .navbar.navbar-bootswatch .btn,
  .navbar.navbar-bootswatch .dropdown {
    height: auto;
    font-size: 14px;
    padding: 8px 10px;
  }

  .navbar.navbar-bootswatch .show-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    line-height: 1;
    flex: 0 0 44px;
    box-sizing: border-box;
  }

  /* 6. Course intro sections — smaller title */
  .course-intro-section {
    padding: 20px 0 14px;
  }
  .course-intro-section .section-title {
    font-size: 26px;
  }

  /* 7. Quote — reduce padding */
  .quote-container {
    padding: 28px 20px;
  }

  /* 8. Custom section icons — slightly smaller */
  .customsection .icon-circle,
  .customsection .box > i.fa-solid,
  .customsection .box > i.fas,
  .customsection .box > i.fa,
  .customsection .box > i.far,
  .customsection .box > i.fab,
  .customsection .box > i.fa-regular,
  .customsection .box > i.fa-brands {
    width: 96px;
    height: 96px;
    font-size: 34px;
  }

  /* 9. Clients logos — reduce bottom padding */
  .clients-logos-section {
    padding: 18px 0 36px;
  }

  /* 10. Footer title — slightly smaller */
  #page-footer.footer-modern .footer-content-main .footer-title {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Responsive: Mobile (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Course overview list/summary — full-width thumbnail, readable height */
  .block_myoverview .course-listitem > .row > .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.75rem;
  }
  .block_myoverview .summary-image,
  .block_myoverview .list-image {
    width: 100%;
    min-height: 9rem;
    aspect-ratio: 16 / 9;
  }

  /* 2. Page header — compact on mobile, still show banner crop */
  #page-header {
    min-height: 120px;
    height: auto;
    padding: 8px 0;
  }
  #page-header > div {
    padding-top: 6px;
  }

  /* 3. Logo bar — smaller + hide button labels */
  #nav-main > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  #nav-main > div > div.float-left {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
  }
  #nav-main > div > div.float-left > a {
    display: inline-flex;
    max-width: 100%;
  }
  #nav-main > div > div.float-left > a > img {
    max-height: 44px;
    max-width: 58vw;
    width: auto;
  }
  #nav-main nav.navbar.navbar-bootswatch.float-right {
    float: none !important;
    margin-left: auto;
  }
  /* 4. Navbar — tighter, hamburger left, action buttons right */
  .navbar.navbar-bootswatch {
    height: auto;
    min-height: 44px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex: 0 0 auto;
  }
  .navbar.navbar-bootswatch .nav-link,
  .navbar.navbar-bootswatch .btn,
  .navbar.navbar-bootswatch .dropdown {
    font-size: 13px;
    padding: 6px 8px;
  }
  .navbar.navbar-bootswatch .navbar-brand {
    font-size: 14px;
  }

  /* Hamburger — style as a proper pill button */
  .navbar.navbar-bootswatch .show-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 9999px;
    border: 1.5px solid currentColor;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 44px;
    opacity: 0.9;
    transition: opacity 0.2s;
  }
  .navbar.navbar-bootswatch .show-menu:hover,
  .navbar.navbar-bootswatch .show-menu:focus-visible {
    opacity: 1;
    text-decoration: none;
  }

  /* 5. Hero — reduce padding and heading */
  .lean-development-section .container-fluid {
    padding-inline: 1.25rem;
  }
  .cel-kursu-section .section-heading {
    font-size: 26px;
  }
}

/* ==========================================================================
   Responsive: Small Mobile (max-width: 575px)
   ========================================================================== */
@media (max-width: 575px) {
  /* 5. Hero — full-width buttons, smaller text */
  .lean-development-section .container-fluid {
    padding-inline: 1rem;
  }
  .cel-kursu-section .section-heading {
    font-size: 24px;
  }
  .cel-kursu-section .section-subtitle {
    font-size: 14px;
  }
  .cel-kursu-section .btn-welcome {
    max-width: 100%;
    width: 100%;
  }
  .cel-kursu-section .welcome-buttons {
    align-items: stretch;
  }

  /* 6. Course intro — smaller */
  .course-intro-section {
    padding: 16px 0 12px;
  }
  .course-intro-section .section-title {
    font-size: 22px;
  }
  .course-intro-section .section-body {
    font-size: 15px;
  }
  .course-intro-section .section-body p {
    margin-bottom: 8px;
  }

  /* 7. Quote — compact */
  .quote-container {
    padding: 20px 16px;
  }
  .quote-text {
    font-size: 17px;
  }
  .quote-author {
    font-size: 16px;
  }

  /* 8. Custom section — smaller icons & text */
  .customsection {
    padding: 24px 0 30px;
  }
  .customsection .customsection-title {
    font-size: 22px;
  }
  .customsection .icon-circle,
  .customsection .box > i.fa-solid,
  .customsection .box > i.fas,
  .customsection .box > i.fa,
  .customsection .box > i.far,
  .customsection .box > i.fab,
  .customsection .box > i.fa-regular,
  .customsection .box > i.fa-brands {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }
  .customsection .box {
    padding: 14px 12px;
  }
  .customsection .box-title {
    font-size: 16px;
  }

  /* 9. Clients logos — tighter */
  .clients-logos-section {
    padding: 16px 0 24px;
  }
  .clients-logos-section .clients-logos-heading {
    font-size: 18px;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   Responsive: Extra Small (max-width: 430px)
   ========================================================================== */
@media (max-width: 430px) {
  /* 3. Logo — smallest */
  #nav-main > div > div.float-left > a > img {
    max-height: 40px;
    max-width: 56vw;
  }

  /* 4. Navbar — hide brand text */
  .navbar.navbar-bootswatch .navbar-brand.d-none.d-sm-inline {
    display: none !important;
  }

  /* 10. Footer social — tighter */
  #page-footer.footer-modern .social-media-links {
    gap: 8px;
  }
  #page-footer.footer-modern .social-media-links a {
    padding: 0 8px;
    height: 36px;
    min-width: 36px;
  }
  #page-footer.footer-modern .social-media-links .social-label {
    font-size: 12px;
  }
  #page-footer.footer-modern .footer-content-main .footer-title {
    font-size: 1.15rem;
  }
}

/* Buy CTAs on Publications — compact strips matching .ldp5-promo-banner */
.book-buy-banners {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

a.book-buy-banner {
  display: block;
  text-decoration: none !important;
  color: inherit;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  border-top: 4px solid var(--color-primary-button);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

a.book-buy-banner:visited {
  color: inherit;
}

a.book-buy-banner:hover,
a.book-buy-banner:focus-visible {
  text-decoration: none !important;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

a.book-buy-banner:focus-visible {
  outline: 2px solid var(--color-primary-button);
  outline-offset: 3px;
}

.book-buy-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
}

.book-buy-banner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-primary-heading);
  background: rgba(47, 63, 102, 0.08);
  border-radius: 12px;
}

.book-buy-banner__content {
  flex: 1;
  min-width: 0;
}

.book-buy-banner__badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.35rem;
  background: var(--color-primary-button);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.4;
}

.book-buy-banner__title {
  display: block;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-heading);
  margin: 0 0 0.2rem;
  line-height: 1.25;
}

.book-buy-banner__subtitle {
  display: block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-subtitle);
}

.book-buy-banner__cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary-button);
  color: var(--color-white) !important;
  border-radius: 25px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

a.book-buy-banner:hover .book-buy-banner__cta,
a.book-buy-banner:focus-visible .book-buy-banner__cta {
  background: var(--color-primary-button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 162, 65, 0.4);
}

@media (max-width: 767px) {
  .book-buy-banner__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.25rem;
    gap: 0.75rem;
  }

  .book-buy-banner__title,
  .book-buy-banner__subtitle {
    text-align: center;
  }

  .book-buy-banner__cta {
    margin-left: 0;
    width: 100%;
    max-width: 280px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.book-buy-banner,
  .book-buy-banner__cta {
    transition: none;
  }

  a.book-buy-banner:hover,
  a.book-buy-banner:focus-visible {
    transform: none;
  }

  a.book-buy-banner:hover .book-buy-banner__cta,
  a.book-buy-banner:focus-visible .book-buy-banner__cta {
    transform: none;
  }
}

/* ================================
   Local Static Pages (local_staticpage) — mobile resilience
   Content can include full HTML snippets with desktop inline styles.
   ================================ */
@media (max-width: 991px) {
  body.path-local-staticpage #page-content,
  body.path-local-staticpage #region-main-box,
  body.path-local-staticpage #region-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.path-local-staticpage #region-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.path-local-staticpage #region-main > [role='main'] > body {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.path-local-staticpage
    #region-main
    [style*='max-width: 1200px'][style*='margin: 0 auto'] {
    max-width: 100% !important;
    padding: 16px !important;
  }

  body.path-local-staticpage
    #region-main
    [style*='border-radius: 20px'][style*='padding: 50px'] {
    padding: 26px 18px !important;
    border-radius: 16px !important;
  }

  body.path-local-staticpage #region-main h1,
  body.path-local-staticpage #region-main h2,
  body.path-local-staticpage #region-main h3,
  body.path-local-staticpage #region-main h4 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 767px) {
  body.path-local-staticpage
    #region-main
    [style*='max-width: 1200px'][style*='margin: 0 auto'] {
    padding: 12px !important;
  }

  body.path-local-staticpage
    #region-main
    [style*='border-radius: 20px'][style*='padding: 50px'] {
    padding: 20px 14px !important;
    border-radius: 14px !important;
  }

  body.path-local-staticpage #region-main h2[style*='font-size: 32px'] {
    font-size: 27px !important;
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
    padding: 16px 18px !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.path-local-staticpage #region-main h2[style*='overflow: hidden'] {
    overflow: visible !important;
  }
}

/* ================================
   Mobile CTA Row under #nav-main
   "Czy potrzebujesz pomocy?" + "Publikacje"
   ================================ */
.mobile-banner-actions {
  display: none;
}

@media (max-width: 991px) {
  .mobile-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px 12px;
    background: var(--color-nav-main-bg);
    border-top: 1px solid rgba(47, 63, 102, 0.18);
    overflow: visible;
    position: relative;
    z-index: 35;
  }

  .mobile-banner-actions .nav-help-wrap {
    position: relative;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    z-index: 36;
  }

  /* Open panel takes full row so email + copy fit and stay on-screen. */
  .mobile-banner-actions .nav-help-wrap.is-open {
    flex: 1 1 100%;
    width: 100%;
  }

  .mobile-banner-actions .nav-help-btn,
  .mobile-banner-actions .nav-pub-btn {
    font-size: 13px;
    margin-right: 0 !important;
  }

  .mobile-banner-actions .nav-help-wrap.is-open .nav-help-btn {
    width: 100%;
  }

  .mobile-banner-actions .nav-help-btn i,
  .mobile-banner-actions .nav-pub-btn i {
    font-size: 14px;
    line-height: 1;
  }

  /*
   * Mobile: in-flow panel (not absolute).
   * Avoids clipping from #page { overflow-x: hidden } and keeps
   * the reveal under the button inside the orange CTA row.
   */
  .mobile-banner-actions .nav-help-panel {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin-top: 0;
    max-height: 0;
    padding: 0 12px;
    border-width: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: none;
    pointer-events: none;
    transition:
      max-height 0.22s ease,
      margin-top 0.22s ease,
      padding 0.22s ease,
      opacity 0.2s ease,
      visibility 0.2s ease,
      border-width 0.2s ease,
      box-shadow 0.2s ease;
  }

  .mobile-banner-actions .nav-help-wrap.is-open .nav-help-panel {
    margin-top: 8px;
    max-height: 120px;
    padding: 10px 12px;
    border-width: 1px;
    box-shadow: var(--shadow-md);
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transform: none;
    pointer-events: auto;
  }

  .mobile-banner-actions .social-label {
    display: inline;
    font-size: 13px;
    line-height: 1;
    color: currentColor;
  }
}

@media (max-width: 430px) {
  .mobile-banner-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .mobile-banner-actions .nav-help-wrap,
  .mobile-banner-actions .nav-pub-btn {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }

  .mobile-banner-actions .nav-help-btn {
    width: 100%;
  }

  .mobile-banner-actions .nav-help-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-banner-actions .nav-help-wrap.is-open .nav-help-panel {
    max-height: 160px;
  }

  .mobile-banner-actions .nav-help-copy {
    width: 100%;
  }

  .mobile-banner-actions .social-label {
    font-size: 12px;
  }
}

/* Keep hamburger icon centered in #nav-main on mobile/tablet.
   Parent theme uses stronger rules that can force display:block. */
@media (max-width: 991px) {
  #nav-main > div > nav.navbar.navbar-bootswatch .show-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    line-height: 44px !important;
  }

  #nav-main > div > nav.navbar.navbar-bootswatch .show-menu i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 18px;
  }
}

/* --- LDP programmes + org modules accordion (frontpage) --- */
.ldp-programmes,
.ldp-org-modules {
  margin: 0 auto 0.5rem;
  max-width: 100%;
  min-width: 0;
}

.ldp-org-modules__heading {
  margin: 1.25rem 0 0.75rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-heading, #32487e);
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ldp-org-modules--nested {
  margin: 0 0 0.25rem;
  padding: 0.15rem 0 0;
}

.ldp-org-modules__item {
  box-sizing: border-box;
  border: 1px solid rgba(50, 72, 126, 0.16);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 0.75rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.ldp-org-modules__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--color-primary-heading, #32487e);
  touch-action: manipulation;
}

.ldp-org-modules__summary::-webkit-details-marker,
.ldp-org-modules__summary::marker {
  display: none;
  content: '';
}

.ldp-org-modules__summary::after {
  content: '+';
  margin-left: auto;
  flex-shrink: 0;
  padding-top: 0.1rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary-heading, #32487e);
}

.ldp-org-modules__item[open] > .ldp-org-modules__summary::after {
  content: '–';
}

.ldp-org-modules__id {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(50, 72, 126, 0.08);
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Programme badges (LDP1 / LDP 1) are wider than module ids (2.8–2.13). */
.ldp-programmes
  > .ldp-org-modules__item
  > .ldp-org-modules__summary
  > .ldp-org-modules__id {
  min-width: 4.25rem;
}

.ldp-org-modules__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.ldp-org-modules__body {
  box-sizing: border-box;
  padding: 0 1rem 1.1rem;
  max-width: 100%;
  min-width: 0;
  color: #444;
  font-size: 0.98rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.ldp-org-modules__lead {
  margin: 0 0 0.85rem;
}

.ldp-org-modules__label {
  margin: 0.75rem 0 0.35rem;
  font-weight: 700;
  color: var(--color-primary-heading, #32487e);
}

.ldp-org-modules__why {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.ldp-org-modules__why li {
  margin-bottom: 0.35rem;
}

.ldp-org-modules__outcome {
  margin: 0;
}

.ldp-org-modules--nested .ldp-org-modules__item {
  background: rgba(50, 72, 126, 0.02);
}

@media (max-width: 991px) {
  .ldp-org-modules__heading {
    font-size: 1.08rem;
  }

  .ldp-org-modules__summary {
    padding: 0.85rem 0.9rem;
    gap: 0.6rem;
  }

  .ldp-org-modules__title {
    font-size: 0.98rem;
  }

  .ldp-org-modules__body {
    padding: 0 0.9rem 1rem;
    font-size: 0.96rem;
  }
}

@media (max-width: 767px) {
  .ldp-org-modules__heading {
    font-size: 1.02rem;
    margin: 1rem 0 0.65rem;
  }

  .ldp-org-modules__summary {
    min-height: 44px;
    padding: 0.8rem 0.7rem;
    gap: 0.5rem;
  }

  .ldp-org-modules__summary::after {
    font-size: 1.15rem;
  }

  .ldp-org-modules__id {
    min-width: 2.75rem;
    padding: 0.12rem 0.35rem;
    font-size: 0.78rem;
  }

  .ldp-programmes
    > .ldp-org-modules__item
    > .ldp-org-modules__summary
    > .ldp-org-modules__id {
    min-width: 3.6rem;
  }

  .ldp-org-modules__title {
    font-size: 0.92rem;
  }

  .ldp-org-modules__body {
    padding: 0 0.7rem 0.9rem;
    font-size: 0.92rem;
  }

  .ldp-org-modules__why {
    padding-left: 1.05rem;
  }

  .ldp-org-modules--nested .ldp-org-modules__summary {
    padding: 0.7rem 0.6rem;
  }

  .ldp-org-modules--nested .ldp-org-modules__body {
    padding: 0 0.6rem 0.8rem;
  }
}

@media (max-width: 575px) {
  .ldp-org-modules__heading {
    font-size: 0.98rem;
  }

  .ldp-org-modules__summary {
    padding: 0.7rem 0.6rem;
    gap: 0.4rem;
  }

  .ldp-org-modules__id {
    min-width: 2.5rem;
    font-size: 0.72rem;
  }

  .ldp-programmes
    > .ldp-org-modules__item
    > .ldp-org-modules__summary
    > .ldp-org-modules__id {
    min-width: 3.35rem;
  }

  .ldp-org-modules__title {
    font-size: 0.88rem;
  }

  .ldp-org-modules__body {
    padding: 0 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* Native frontpage carousel is kept in the DOM for parent JS, but is not the public catalog. */
#allcourses,
#frontpage-available-course-list,
#allOurCourses {
  display: none !important;
}

/* Merged LDP catalog (frontpage) */
.ldp-catalog {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--color-white);
  color: var(--color-text-body);
}

.ldp-catalog *,
.ldp-catalog *::before,
.ldp-catalog *::after {
  box-sizing: border-box;
}

.ldp-catalog__top {
  padding: 1.75rem 0 1.25rem;
  background: var(--color-bg-subtle);
}

.ldp-catalog__title {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--color-primary-heading);
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ldp-catalog__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ldp-catalog__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 12.375rem;
  padding: 0;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 2px solid rgba(47, 63, 102, 0.18);
  border-radius: 0;
  background: var(--color-bg-light);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  text-align: left;
}

.ldp-catalog__card:focus-visible {
  outline: 3px solid var(--color-primary-button);
  outline-offset: 2px;
}

.ldp-catalog__card[aria-pressed='true'] {
  border-color: var(--color-primary-button);
  box-shadow:
    0 0 0 3px rgba(235, 129, 31, 0.22),
    var(--shadow-lg);
}

.ldp-catalog__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color-bg-light);
  color: var(--color-primary-heading);
}

.ldp-catalog__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ldp-catalog__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ldp-catalog__label {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 4.6rem;
  padding: 1.6rem 0.75rem 0.75rem;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(
    to top,
    rgba(47, 63, 102, 0.92) 0%,
    rgba(47, 63, 102, 0.55) 62%,
    rgba(47, 63, 102, 0) 100%
  );
  color: var(--color-white);
}

.ldp-catalog__name {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ldp-catalog__panels {
  padding: 1.35rem 0 1.6rem;
  border-top: 4px solid var(--color-primary-button);
  background: var(--color-bg-subtle);
}

.ldp-catalog__panel {
  margin: 0 0 0.75rem;
  border: 0;
  background: transparent;
}

.ldp-catalog__panel-summary {
  cursor: pointer;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--color-primary-heading);
  overflow-wrap: anywhere;
}

.ldp-catalog.is-enhanced .ldp-catalog__panel-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ldp-catalog.is-enhanced .ldp-catalog__panel:not([open]) {
  display: none;
}

.ldp-catalog__panel-body {
  max-width: 1100px;
  margin: 0 auto;
  min-width: 0;
}

.ldp-catalog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ldp-catalog__intro {
  min-width: 0;
  flex: 1 1 auto;
}

.ldp-catalog__heading {
  margin: 0 0 0.4rem;
  color: var(--color-primary-heading);
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ldp-catalog__lead {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ldp-catalog__lead p:last-child {
  margin-bottom: 0;
}

#page a.ldp-catalog__enter,
.ldp-catalog__enter {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-primary-heading);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-primary-heading) !important;
  text-decoration: none;
  font-weight: 700;
}

#page a.ldp-catalog__enter:hover,
#page a.ldp-catalog__enter:focus-visible,
#page a.ldp-catalog__enter:active,
.ldp-catalog__enter:hover,
.ldp-catalog__enter:focus-visible,
.ldp-catalog__enter:active {
  background: var(--color-primary-button);
  border-color: var(--color-primary-button);
  color: var(--color-white) !important;
}

#page a.ldp-catalog__enter .ldp-catalog__enter-label,
#page a.ldp-catalog__enter .ldp-catalog__enter-note,
.ldp-catalog__enter-label,
.ldp-catalog__enter-note {
  color: inherit;
}

.ldp-catalog__enter-note {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
}

.ldp-catalog__modules-heading {
  margin: 1.1rem 0 0.65rem;
  color: var(--color-primary-heading);
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ldp-catalog__modules {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ldp-catalog__module {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(47, 63, 102, 0.16);
  border-radius: 8px;
  background: var(--color-white);
}

.ldp-catalog__module-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary-heading);
  touch-action: manipulation;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.ldp-catalog__module-summary::-webkit-details-marker,
.ldp-catalog__module-summary::marker {
  display: none;
  content: '';
}

.ldp-catalog__module-summary::after {
  content: '+';
  flex: 0 0 auto;
  margin-left: auto;
  padding-top: 0.05rem;
  color: var(--color-primary-heading);
  font-size: 1.25rem;
  line-height: 1;
}

.ldp-catalog__module[open] > .ldp-catalog__module-summary::after {
  content: '–';
}

.ldp-catalog__module-summary:focus-visible {
  outline: 3px solid var(--color-primary-button);
  outline-offset: -3px;
}

.ldp-catalog__module-body {
  padding: 1rem;
  border-top: 1px solid rgba(47, 63, 102, 0.12);
  background: var(--color-white);
  color: var(--color-text-body);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.ldp-catalog__module-title {
  margin: 0 0 0.55rem;
  color: var(--color-primary-heading);
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

.ldp-catalog__module-lead,
.ldp-catalog__module-copy {
  margin: 0 0 0.75rem;
}

.ldp-catalog__module-label {
  margin: 0.75rem 0 0.35rem;
  font-weight: 700;
  color: var(--color-primary-heading);
}

.ldp-catalog__module-list {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
}

.ldp-catalog__module-list li + li {
  margin-top: 0.35rem;
}

@media (max-width: 1439px) {
  .ldp-catalog__title {
    font-size: 1.85rem;
  }
}

@media (max-width: 991px) {
  .ldp-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ldp-catalog__title {
    font-size: 1.7rem;
  }

  .ldp-catalog__header {
    flex-direction: column;
  }

  #page a.ldp-catalog__enter,
  .ldp-catalog__enter {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .ldp-catalog__module-summary {
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
  }

  .ldp-catalog__module-body {
    padding: 0.9rem;
  }
}

@media (max-width: 767px) {
  .ldp-catalog__title {
    font-size: 1.5rem;
  }

  .ldp-catalog__card {
    min-height: 11rem;
  }

  .ldp-catalog__module-summary {
    min-height: 44px;
    gap: 0.5rem;
    padding: 0.8rem 0.7rem;
    font-size: 0.92rem;
  }

  .ldp-catalog__module-summary::after {
    font-size: 1.15rem;
  }

  .ldp-catalog__module-body {
    padding: 0.8rem 0.7rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 374px) {
  .ldp-catalog__grid {
    grid-template-columns: 1fr;
  }

  .ldp-catalog__title {
    font-size: 1.35rem;
  }

  .ldp-catalog__module-summary {
    gap: 0.4rem;
    padding: 0.7rem 0.6rem;
    font-size: 0.88rem;
  }

  .ldp-catalog__module-body {
    padding: 0.75rem 0.6rem;
    font-size: 0.9rem;
  }
}