/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 04 2026 | 10:44:35 */
/* =====================================================================
   Młoda Nauka UMW – BeBuilder design kit            mnu-theme.css v1.2
   ---------------------------------------------------------------------
   Simple Custom CSS and JS → Add Custom CSS
     Linking type:   External File
     Where on page:  Header
     Where in site:  In Frontend
   Paste the whole file as is.

   NO GOOGLE FONTS: the kit uses fonts already installed on the visitor's
   device (San Francisco on Apple, Segoe UI on Windows, Roboto on Android),
   chosen to look close to the original Bricolage Grotesque / Instrument
   Sans / JetBrains Mono. Nothing is downloaded from Google.

   HOW CLASSES ARE USED
   Every BeBuilder Section, Wrap and Element has
   "Advanced → Custom CSS classes". Type the class names there,
   separated with spaces, e.g.   mn-section mn-section--mist
   All classes start with  mn-  so they never clash with BeTheme or with
   the old .ys mini-app that still runs on not-yet-migrated pages.

   Contents
    0  Tokens + colour contexts       9  Stats / numbers
    1  Base typography                10 Steps, checks, chips, notice
    2  Text classes                   11 Quote, accordion, tabs
    3  Sections + hero                12 Blog/post cards, rail slider
    4  Layout helpers (wraps)         13 Forms (Contact Form 7)
    5  Buttons + links                14 Header (Header Builder)
    6  Cards                          15 Footer (Footer Builder)
    7  Program tiles                  16 Language (Polylang + PL/EN)
    8  Events list                    17 Motion + utilities
                                      18 Consent lock (Google content)
   ===================================================================== */


/* =====================================================================
   0. TOKENS + COLOUR CONTEXTS
   ===================================================================== */
:root {
  --mn-navy-950: #0F0E36;
  --mn-navy: #16145B;
  --mn-navy-hover: #0F0E46;
  --mn-ink: #12123A;
  --mn-text: #3B3C5A;
  --mn-meta: #5C5D7B;
  --mn-line: #E2E3EE;
  --mn-line-strong: #C9CBDD;
  --mn-border: #B9BBD2;
  --mn-mist: #F4F5FA;
  --mn-chip: #ECEDF6;
  --mn-chip-text: #2B2C52;
  --mn-gold: #D0A53D;
  --mn-gold-hover: #DDB550;
  --mn-gold-on-dark: #E3BD5A;
  --mn-gold-soft: #FBF1D3;
  --mn-gold-soft-text: #6E5208;
  --mn-gold-text: #8A6A12;
  --mn-on-dark: #C9CAE2;

  /* local system fonts only (no Google Fonts) */
  --mn-font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --mn-font-text: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --mn-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, 'Roboto Mono', 'Liberation Mono', monospace;

  --mn-content: 1240px;                          /* content width */
  --mn-gutter: clamp(20px, 4vw, 40px);           /* page side padding */
  --mn-gap: 20px;                                /* gap between columns/cards */
  --mn-section-pad: clamp(64px, 8vw, 104px);
  --mn-section-pad-tight: clamp(36px, 4.4vw, 56px);
  --mn-radius: 24px;
  --mn-radius-sm: 16px;
  --mn-sticky: 0px;                              /* set by JS when header is sticky */
}

/* Colour context: components below read these, so the same class works on
   white, mist, navy and gold backgrounds. */
:root,
.mn-section,
.mn-card,
.mn-tile,
.mn-light {
  --mn-fg: var(--mn-ink);
  --mn-fg-soft: var(--mn-text);
  --mn-fg-label: var(--mn-meta);
  --mn-fg-link: var(--mn-navy);
  --mn-fg-link-hover: var(--mn-gold-text);
  --mn-rule: var(--mn-line-strong);
  --mn-dot: var(--mn-navy);
}
.mn-section--dark,
.mn-section--navy,
.mn-hero--dark,
.mn-card--dark,
.mn-card--navy,
.mn-tile--dark,
.mn-tile--navy,
.mn-footer,
.mn-on-dark {
  --mn-fg: #FFFFFF;
  --mn-fg-soft: var(--mn-on-dark);
  --mn-fg-label: var(--mn-gold-on-dark);
  --mn-fg-link: #FFFFFF;
  --mn-fg-link-hover: var(--mn-gold-on-dark);
  --mn-rule: rgba(255, 255, 255, 0.22);
  --mn-dot: #FFFFFF;
}
.mn-section--gold,
.mn-card--gold,
.mn-tile--gold {
  --mn-fg: var(--mn-ink);
  --mn-fg-soft: var(--mn-ink);
  --mn-fg-label: var(--mn-gold-soft-text);
  --mn-fg-link: var(--mn-ink);
  --mn-fg-link-hover: var(--mn-navy);
  --mn-rule: rgba(18, 18, 58, 0.2);
}


/* Old .ys pages: use the same local fonts instead of Google Fonts */
html .ys {
  --ys-font-display: var(--mn-font-display);
  --ys-font-text: var(--mn-font-text);
  --ys-font-mono: var(--mn-font-mono);
}

/* During the migration: pages that still contain the old .ys mini-app draw
   their own header/footer, so hide the new BeBuilder header/footer there. */
body:has(.ys-page) :is(#mfn-header-template, .mfn-header-tmpl, #mfn-footer-template, .mfn-footer-tmpl) { display: none !important; }


/* =====================================================================
   1. BASE TYPOGRAPHY (whole site; old .ys pages keep their own styles)
   ===================================================================== */
body {
  font-family: var(--mn-font-text);
  color: var(--mn-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--mn-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mn-fg);
  text-transform: none;
}
body :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }

.mn-section,
.mn-hero,
.mn-header,
.mn-footer {
  font-family: var(--mn-font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mn-fg);
}
:is(.mn-section, .mn-hero, .mn-footer) :is(p, li, .column_attr, .desc) {
  color: var(--mn-fg-soft);
}
:is(.mn-section, .mn-hero, .mn-footer) a:not(.button) {
  color: var(--mn-fg-link);
  text-decoration: none;
}
:is(.mn-section, .mn-hero, .mn-footer) a:not(.button):hover { color: var(--mn-fg-link-hover); }
:is(.mn-section, .mn-hero) strong { font-weight: 600; color: var(--mn-fg); }

:where(.mn-section, .mn-hero, .mn-header, .mn-footer) :focus-visible {
  outline: 3px solid var(--mn-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Heading element default margin off (spacing is handled by the wrap) */
:is(.mn-section, .mn-hero) .column_heading .title { margin-bottom: 0; }


/* =====================================================================
   2. TEXT CLASSES  – put on a Heading / Column / Plain text element
   ---------------------------------------------------------------------
   mn-h1  mn-h1--xl  mn-h2  mn-h2--xl  mn-h2--sm  mn-h3  mn-h3--sm
   mn-lead  mn-text  mn-text--lg  mn-small  mn-label  mn-label--sm
   mn-eyebrow  mn-breadcrumb  mn-prose  mn-measure
   ===================================================================== */
.mn-h1 :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h1 {
  font-family: var(--mn-font-display);
  font-weight: 700;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-fg);
  text-wrap: balance;
  margin: 0;
}
.mn-h1--sm :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h1--sm { font-size: clamp(36px, 4.4vw, 62px); }

.mn-h2 :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h2 {
  font-family: var(--mn-font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mn-fg);
  text-wrap: balance;
  margin: 0;
}
.mn-h2--xl :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h2--xl { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; }
.mn-h2--sm :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h2--sm { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }

.mn-h3 :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h3 {
  font-family: var(--mn-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mn-fg);
  margin: 0;
}
.mn-h3--sm :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(h1, h2, h3, h4, h5, h6, p, span).mn-h3--sm { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }

.mn-lead :is(p, .title, h1, h2, h3, h4, h5, h6, .desc),
.mn-lead .column_attr,
p.mn-lead {
  max-width: 560px;
  font-family: var(--mn-font-text);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--mn-fg-soft);
  text-wrap: pretty;
}
.mn-lead--wide :is(p, .title, .desc), .mn-lead--wide .column_attr { max-width: 680px; }

.mn-text :is(p, li, .desc), .mn-text .column_attr, p.mn-text {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--mn-fg-soft);
}
.mn-text--lg :is(p, li, .desc), .mn-text--lg .column_attr { font-size: 17.5px; line-height: 1.65; }
.mn-small :is(p, li, .desc), .mn-small .column_attr { font-size: 14.5px; line-height: 1.45; color: var(--mn-fg-soft); }

/* mono, uppercase, letter-spaced label ("PROGRAMY", "21 PAŹ 2026") */
.mn-label :is(h1, h2, h3, h4, h5, h6, .title, p, .desc),
.mn-label .column_attr,
:is(span, p, div, h2, h3, h4, h5, h6).mn-label {
  font-family: var(--mn-font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--mn-fg-label);
  margin: 0;
}
.mn-label--sm :is(h1, h2, h3, h4, h5, h6, .title, p), :is(span, p, div).mn-label--sm { font-size: 11.5px !important; letter-spacing: 0.12em !important; }

/* eyebrow = label + the three brand dots in front */
.mn-eyebrow :is(h1, h2, h3, h4, h5, h6, .title, p),
:is(span, p, div, h2, h3, h4, h5, h6).mn-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mn-font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--mn-fg-label);
}
.mn-eyebrow :is(h1, h2, h3, h4, h5, h6, .title, p)::before,
:is(span, p, div, h2, h3, h4, h5, h6).mn-eyebrow::before {
  content: "";
  flex: 0 0 29px;
  height: 7px;
  background:
    radial-gradient(circle 3.5px at 3.5px 3.5px, var(--mn-gold) 98%, transparent 100%),
    radial-gradient(circle 3.5px at 14.5px 3.5px, var(--mn-dot) 98%, transparent 100%),
    radial-gradient(circle 3.5px at 25.5px 3.5px, var(--mn-dot) 98%, transparent 100%);
}
:is(.mn-section--dark, .mn-hero--dark, .mn-on-dark, .mn-footer) .mn-eyebrow :is(h1, h2, h3, h4, h5, h6, .title, p)::before {
  background:
    radial-gradient(circle 3.5px at 3.5px 3.5px, var(--mn-gold-on-dark) 98%, transparent 100%),
    radial-gradient(circle 3.5px at 14.5px 3.5px, #fff 98%, transparent 100%),
    radial-gradient(circle 3.5px at 25.5px 3.5px, #fff 98%, transparent 100%);
}

/* breadcrumb: Plain text element  <a href="/">Młoda Nauka</a> <span>/</span> <span class="is-current">Mentoring</span> */
.mn-breadcrumb :is(.desc, .column_attr, p) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mn-breadcrumb :is(a, span) {
  font-family: var(--mn-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mn-fg-soft) !important;
}
.mn-breadcrumb a:hover, .mn-breadcrumb .is-current { color: var(--mn-fg) !important; }

/* long-form text (Column element on article-like pages) */
.mn-prose .column_attr, .mn-prose .desc, div.mn-prose { font-size: 17px; line-height: 1.7; color: var(--mn-text); max-width: 760px; }
.mn-prose :is(p, ul, ol, blockquote, figure) { margin: 0 0 1.1em; }
.mn-prose :is(h2, h3, h4) { margin: 1.6em 0 0.5em; line-height: 1.12; }
.mn-prose h2 { font-size: clamp(26px, 2.6vw, 34px); }
.mn-prose h3 { font-size: 23px; font-weight: 600; }
.mn-prose h4 { font-size: 19px; font-weight: 600; }
.mn-prose :is(h2, h3, h4):first-child { margin-top: 0; }
.mn-prose ul { list-style: none; padding: 0; }
.mn-prose ul li { position: relative; padding-left: 22px; margin-bottom: 0.45em; }
.mn-prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--mn-gold); }
.mn-prose ol { padding-left: 1.3em; }
.mn-prose ol li { margin-bottom: 0.45em; padding-left: 4px; }
.mn-prose ol li::marker { font-family: var(--mn-font-mono); font-size: 0.85em; color: var(--mn-gold-text); }
.mn-prose a:not(.button) { color: var(--mn-navy); text-decoration: underline; text-decoration-color: var(--mn-gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.mn-prose a:not(.button):hover { color: var(--mn-gold-text); }
.mn-prose blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--mn-gold); font-family: var(--mn-font-display); font-size: 21px; line-height: 1.35; color: var(--mn-ink); background: none; }
.mn-prose img { border-radius: var(--mn-radius-sm); }

.mn-measure :is(p, .desc, .column_attr, .title) { max-width: 640px; }
.mn-measure--narrow :is(p, .desc, .column_attr, .title) { max-width: 480px; }


/* =====================================================================
   3. SECTIONS + HERO  – put on a Section
   ---------------------------------------------------------------------
   mn-section  + modifiers: --mist --dark --navy --gold --tight --first
                            --flush (no padding)  --rings (circle decor)
   mn-hero     + modifiers: --dark --plain
   ===================================================================== */
.mcb-section:is(.mn-section, .mn-hero) {
  position: relative;
  padding-top: var(--mn-section-pad);
  padding-bottom: var(--mn-section-pad);
  background-color: #FFFFFF;
  scroll-margin-top: calc(var(--mn-sticky) + 80px);
  /* tighter, even column gaps inside our sections */
  --mfn-column-gap-left: calc(var(--mn-gap) / 2);
  --mfn-column-gap-right: calc(var(--mn-gap) / 2);
  --mfn-column-gap-bottom: 16px;
}
.mcb-section:is(.mn-section, .mn-hero) > .section_wrapper {
  max-width: calc(var(--mn-content) + 2 * var(--mn-gutter));
  padding-left: calc(var(--mn-gutter) - var(--mn-gap) / 2);
  padding-right: calc(var(--mn-gutter) - var(--mn-gap) / 2);
  box-sizing: border-box;
}
.mcb-section.mn-section--mist { background-color: var(--mn-mist); }
.mcb-section.mn-section--dark { background-color: var(--mn-navy-950); color: #fff; }
.mcb-section.mn-section--navy { background-color: var(--mn-navy); color: #fff; }
.mcb-section.mn-section--gold { background-color: var(--mn-gold); color: var(--mn-ink); }
.mcb-section.mn-section--tight { padding-top: var(--mn-section-pad-tight); padding-bottom: var(--mn-section-pad-tight); }
.mcb-section.mn-section--first { padding-top: clamp(20px, 2.2vw, 28px); }
.mcb-section.mn-section--flush { padding-top: 0; padding-bottom: 0; }
.mcb-section.mn-section--no-top { padding-top: 0; }
.mcb-section.mn-section--no-bottom { padding-bottom: 0; }
.mcb-section.mn-section--wide > .section_wrapper { max-width: none; }

/* two white sections (or two mist / two dark) in a row: no double padding */
.mcb-section.mn-section--mist + .mcb-section.mn-section--mist,
.mcb-section.mn-section--dark + .mcb-section.mn-section--dark,
.mcb-section.mn-section:not(.mn-section--mist, .mn-section--dark, .mn-section--navy, .mn-section--gold)
  + .mcb-section.mn-section:not(.mn-section--mist, .mn-section--dark, .mn-section--navy, .mn-section--gold) {
  padding-top: 0;
}

/* decorative circles (like the dark hero) */
.mcb-section:is(.mn-section--rings, .mn-hero--dark) { overflow: hidden; }
.mcb-section:is(.mn-section--rings, .mn-hero--dark)::before,
.mcb-section:is(.mn-section--rings, .mn-hero--dark)::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.mcb-section:is(.mn-section--rings, .mn-hero--dark)::before { width: 620px; height: 620px; right: -150px; top: -180px; }
.mcb-section:is(.mn-section--rings, .mn-hero--dark)::after { width: 980px; height: 980px; right: -330px; top: -360px; border-color: rgba(255, 255, 255, 0.07); }
.mcb-section:is(.mn-section--rings, .mn-hero--dark) > .section_wrapper { z-index: 1; }
.mcb-section.mn-section--rings:not(.mn-section--dark, .mn-section--navy)::before,
.mcb-section.mn-section--rings:not(.mn-section--dark, .mn-section--navy)::after { border-color: var(--mn-line-strong); }

/* hero (top of a sub-page) */
.mcb-section.mn-hero {
  background-color: var(--mn-mist);
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(36px, 4.6vw, 60px);
}
.mcb-section.mn-hero--dark { background-color: var(--mn-navy-950); color: #fff; }
.mcb-section.mn-hero--plain { background-color: #fff; padding-bottom: clamp(32px, 4vw, 48px); }
.mn-hero .mn-lead :is(p, .desc, .title), .mn-hero .mn-lead .column_attr { max-width: 600px; }


/* =====================================================================
   4. LAYOUT HELPERS  – put on a Wrap (or Section where noted)
   ---------------------------------------------------------------------
   mn-stack       elements inside the wrap stacked with a 16px gap
   mn-stack--lg   … with a 26px gap         mn-stack--sm  … 10px gap
   mn-head        section header row: title left, link right (bottom-aligned)
   mn-row         elements side by side (wrapping), vertically centred
   mn-actions     buttons side by side
   mn-center      centre everything in the wrap
   mn-vcenter     centre the wrap's content vertically
   mn-equal       (Section) all wraps in the row get equal height
   ===================================================================== */
.mcb-wrap:is(.mn-stack, .mn-stack--sm, .mn-stack--lg, .mn-card, .mn-tile, .mn-step) > .mcb-wrap-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
}
.mcb-wrap.mn-stack--sm > .mcb-wrap-inner { gap: 10px; }
.mcb-wrap.mn-stack--lg > .mcb-wrap-inner { gap: 26px; }
.mcb-wrap:is(.mn-stack, .mn-stack--sm, .mn-stack--lg, .mn-card, .mn-tile, .mn-step, .mn-head, .mn-row, .mn-actions) > .mcb-wrap-inner > .mcb-column {
  width: 100%;
  float: none;
}
.mcb-wrap:is(.mn-stack, .mn-stack--sm, .mn-stack--lg, .mn-head, .mn-row, .mn-actions) > .mcb-wrap-inner > .mcb-column > .mcb-column-inner {
  margin: 0 var(--mfn-column-gap-right, 10px) 0 var(--mfn-column-gap-left, 10px);
  height: auto;
}
/* inside cards the card padding is the gutter */
.mcb-wrap:is(.mn-card, .mn-tile, .mn-step) > .mcb-wrap-inner > .mcb-column > .mcb-column-inner {
  margin: 0;
  height: auto;
}
.mcb-wrap:is(.mn-stack, .mn-stack--sm, .mn-stack--lg, .mn-card, .mn-tile, .mn-step) > .mcb-wrap-inner > .mcb-wrap-background-overlay { display: none; }

.mcb-wrap.mn-head > .mcb-wrap-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 48px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.mcb-wrap.mn-head > .mcb-wrap-inner > .mcb-column { width: auto; flex: 0 1 auto; }
.mcb-wrap.mn-head > .mcb-wrap-inner > .mcb-column:first-of-type { flex: 1 1 420px; min-width: 0; }
.mcb-wrap.mn-head--center > .mcb-wrap-inner { align-items: center; }

.mcb-wrap.mn-row > .mcb-wrap-inner,
.mcb-wrap.mn-actions > .mcb-wrap-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.mcb-wrap:is(.mn-row, .mn-actions) > .mcb-wrap-inner > .mcb-column { width: auto; flex: 0 1 auto; }
@media (max-width: 640px) {
  .mcb-wrap.mn-actions > .mcb-wrap-inner > .mcb-column { flex: 1 1 100%; }
  .mcb-wrap.mn-actions > .mcb-wrap-inner > .mcb-column .button { width: 100%; }
}

.mcb-wrap.mn-center > .mcb-wrap-inner { align-items: center; justify-content: center; text-align: center; }
.mcb-wrap.mn-center :is(.mn-lead, .mn-measure) :is(p, .desc, .title) { margin-left: auto; margin-right: auto; }
.mcb-wrap.mn-vcenter > .mcb-wrap-inner { align-content: center; justify-content: center; }

.mcb-section.mn-equal > .section_wrapper { display: flex; flex-wrap: wrap; align-items: stretch; }
.mcb-section.mn-equal > .section_wrapper > .mcb-wrap { display: flex; }
.mcb-section.mn-equal > .section_wrapper > .mcb-wrap > .mcb-wrap-inner { height: auto; }

/* push the last element of a stacked wrap/card to the bottom (e.g. a button) */
.mcb-column.mn-push-bottom { margin-top: auto !important; }


/* =====================================================================
   5. BUTTONS + LINKS  – put on a Button element (or on any <a>)
   ---------------------------------------------------------------------
   mn-btn (navy)  mn-btn--gold  mn-btn--ghost  mn-btn--ghost-dark
   mn-btn--white  mn-btn--text  mn-btn--sm  mn-btn--block  mn-btn--arrow
   mn-link (bold link with →)   mn-link--back (←)   mn-iconbtn (round →)
   ===================================================================== */
:is(.mn-btn .button, a.mn-btn, button.mn-btn) {
  --mfn-button-bg: var(--mn-navy);
  --mfn-button-bg-hover: var(--mn-navy-hover);
  --mfn-button-color: #fff;
  --mfn-button-color-hover: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 14px 26px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--mn-navy) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--mn-font-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
:is(.mn-btn .button, a.mn-btn, button.mn-btn) .button_label { padding: 0 !important; color: inherit !important; font: inherit !important; }
:is(.mn-btn .button, a.mn-btn, button.mn-btn) .button_icon { margin: 0 !important; background: none !important; border: 0 !important; color: inherit !important; padding: 0 !important; }
:is(.mn-btn .button, a.mn-btn, button.mn-btn) .button_icon i { color: inherit !important; }
:is(.mn-btn .button, a.mn-btn, button.mn-btn):hover { background: var(--mn-navy-hover) !important; color: #fff !important; }

:is(.mn-btn--gold .button, :is(a, button).mn-btn--gold) { background: var(--mn-gold) !important; color: var(--mn-ink) !important; }
:is(.mn-btn--gold .button, :is(a, button).mn-btn--gold):hover { background: var(--mn-gold-hover) !important; color: var(--mn-ink) !important; }

:is(.mn-btn--white .button, :is(a, button).mn-btn--white) { background: #fff !important; color: var(--mn-ink) !important; }
:is(.mn-btn--white .button, :is(a, button).mn-btn--white):hover { background: var(--mn-mist) !important; color: var(--mn-ink) !important; }

:is(.mn-btn--ghost .button, :is(a, button).mn-btn--ghost) { background: transparent !important; border-color: var(--mn-border) !important; color: var(--mn-ink) !important; }
:is(.mn-btn--ghost .button, :is(a, button).mn-btn--ghost):hover { background: #fff !important; border-color: var(--mn-navy) !important; color: var(--mn-ink) !important; }

:is(.mn-btn--ghost-dark .button, :is(a, button).mn-btn--ghost-dark) { background: transparent !important; border-color: rgba(255, 255, 255, 0.38) !important; color: #fff !important; }
:is(.mn-btn--ghost-dark .button, :is(a, button).mn-btn--ghost-dark):hover { background: rgba(255, 255, 255, 0.08) !important; border-color: #fff !important; color: #fff !important; }

:is(.mn-btn--text .button, :is(a, button).mn-btn--text) { padding: 14px 8px !important; background: transparent !important; color: var(--mn-fg-link) !important; }
:is(.mn-btn--text .button, :is(a, button).mn-btn--text):hover { background: transparent !important; color: var(--mn-fg-link-hover) !important; }

:is(.mn-btn--sm .button, :is(a, button).mn-btn--sm) { min-height: 44px; padding: 10px 20px !important; font-size: 15.5px !important; }
:is(.mn-btn--block .button, :is(a, button).mn-btn--block) { width: 100%; }
:is(.mn-btn--arrow .button, :is(a, button).mn-btn--arrow)::after { content: "→"; font-weight: 400; transition: transform .15s ease; }
:is(.mn-btn--arrow .button, :is(a, button).mn-btn--arrow):hover::after { transform: translateX(3px); }

/* text link with arrow — Heading/Plain text element containing a link, or a link itself */
.mn-link a, a.mn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mn-font-text);
  font-weight: 600 !important;
  font-size: 15.5px;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--mn-fg-link) !important;
  text-decoration: none !important;
}
.mn-link a::after, a.mn-link::after { content: "→"; transition: transform .15s ease; }
.mn-link a:hover, a.mn-link:hover { color: var(--mn-fg-link-hover) !important; }
.mn-link a:hover::after, a.mn-link:hover::after { transform: translateX(3px); }
.mn-link--back a::after, a.mn-link--back::after { content: none; }
.mn-link--back a::before, a.mn-link--back::before { content: "←"; }
.mn-link--wrap a, a.mn-link--wrap { white-space: normal; }

/* round arrow button, e.g. inside cards */
.mn-iconbtn a, a.mn-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%;
  color: var(--mn-fg) !important; font-size: 18px; line-height: 1; text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mn-iconbtn a:hover, a.mn-iconbtn:hover { background: var(--mn-gold); border-color: var(--mn-gold); color: var(--mn-ink) !important; }


/* =====================================================================
   6. CARDS  – put on a Wrap
   ---------------------------------------------------------------------
   mn-card  + --mist --dark --navy --gold --flat (no border) --link (hover)
            + --pad-lg  --pad-sm  --shadow
   mn-card__media  (Image element inside a card: bleeds to card edges, top)
   Cards always stack their elements (see mn-stack).
   ===================================================================== */
.mcb-wrap.mn-card > .mcb-wrap-inner,
.mcb-wrap.mn-tile > .mcb-wrap-inner {
  position: relative;
  width: calc(100% - var(--mn-gap));
  margin: 0 calc(var(--mn-gap) / 2) var(--mn-gap);
  padding: 30px;
  border-radius: var(--mn-radius);
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--mn-line-strong);
  color: var(--mn-fg);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mcb-section.mn-equal .mcb-wrap:is(.mn-card, .mn-tile) > .mcb-wrap-inner { height: calc(100% - var(--mn-gap)); }

.mcb-wrap.mn-card--mist > .mcb-wrap-inner { background-color: var(--mn-mist); box-shadow: none; }
.mcb-wrap.mn-card--dark > .mcb-wrap-inner { background-color: var(--mn-navy-950); box-shadow: none; }
.mcb-wrap.mn-card--navy > .mcb-wrap-inner { background-color: var(--mn-navy); box-shadow: none; }
.mcb-wrap.mn-card--gold > .mcb-wrap-inner { background-color: var(--mn-gold-soft); box-shadow: none; }
.mcb-wrap.mn-card--flat > .mcb-wrap-inner { box-shadow: none; }
.mcb-wrap.mn-card--outline-dark > .mcb-wrap-inner { background-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.mcb-wrap.mn-card--shadow > .mcb-wrap-inner { box-shadow: 0 24px 60px rgba(15, 14, 54, 0.18); }
.mcb-wrap.mn-card--pad-lg > .mcb-wrap-inner { padding: clamp(28px, 3.4vw, 48px); }
.mcb-wrap.mn-card--pad-sm > .mcb-wrap-inner { padding: 22px; }
.mcb-wrap.mn-card--pad-0 > .mcb-wrap-inner { padding: 0; }

.mcb-wrap:is(.mn-card--link, .mn-tile) > .mcb-wrap-inner { cursor: pointer; }
.mcb-wrap.mn-card--link > .mcb-wrap-inner:hover { box-shadow: 0 0 0 1px var(--mn-navy); }
.mcb-wrap.mn-card--link:is(.mn-card--dark, .mn-card--navy, .mn-card--gold, .mn-card--mist) > .mcb-wrap-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(15, 14, 54, 0.2);
}

/* image at the top of a card, bleeding to the edges */
.mcb-wrap:is(.mn-card, .mn-tile) .mn-card__media { margin: -30px -30px 6px; width: calc(100% + 60px) !important; }
.mcb-wrap.mn-card--pad-sm .mn-card__media { margin: -22px -22px 6px; width: calc(100% + 44px) !important; }
.mn-card__media :is(.image_frame, .image_wrapper) { border: 0; border-radius: 0; margin: 0; }
.mn-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

@media (max-width: 640px) {
  .mcb-wrap.mn-card > .mcb-wrap-inner { padding: 24px; }
  .mcb-wrap:is(.mn-card, .mn-tile) .mn-card__media { margin: -24px -24px 6px; width: calc(100% + 48px) !important; }
}


/* =====================================================================
   7. PROGRAM TILES  – big rounded link tiles (home page "Programy")
   ---------------------------------------------------------------------
   Wrap:     mn-tile  + --dark --navy --gold (default white)
   Inside:   Heading  mn-tile__title
             Text     mn-tile__text
             Text     mn-tile__stat   (HTML: <strong>37</strong> <span>mentorów</span>)
             Image    mn-tile__art    (sits at the bottom, can bleed out)
   Put a link on the heading (or any element): the whole tile becomes
   clickable via mnu-theme.js and gets the round → in the corner.
   ===================================================================== */
.mcb-wrap.mn-tile > .mcb-wrap-inner {
  min-height: 395px;
  padding: 24px 22px 0;
  gap: 10px;
  border-radius: 24px;
}
.mcb-wrap.mn-tile--dark > .mcb-wrap-inner { background-color: var(--mn-navy-950); box-shadow: none; }
.mcb-wrap.mn-tile--navy > .mcb-wrap-inner { background-color: var(--mn-navy); box-shadow: none; }
.mcb-wrap.mn-tile--gold > .mcb-wrap-inner { background-color: var(--mn-gold-soft); box-shadow: none; }
.mcb-wrap.mn-tile > .mcb-wrap-inner:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--mn-navy), 0 24px 48px rgba(15, 14, 54, 0.16); }
.mcb-wrap:is(.mn-tile--dark, .mn-tile--navy) > .mcb-wrap-inner:hover { box-shadow: 0 24px 48px rgba(15, 14, 54, 0.3); }
.mcb-wrap.mn-tile--gold > .mcb-wrap-inner:hover { box-shadow: 0 24px 48px rgba(110, 82, 8, 0.2); }

/* the round arrow in the top-right corner */
.mcb-wrap.mn-tile > .mcb-wrap-inner::after {
  content: "→";
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: var(--mn-fg);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.mcb-wrap.mn-tile > .mcb-wrap-inner:hover::after { background: var(--mn-gold); border-color: var(--mn-gold); color: var(--mn-ink); transform: translateX(4px); }
.mcb-wrap.mn-tile--no-arrow > .mcb-wrap-inner::after { content: none; }

.mn-tile__title :is(h1, h2, h3, h4, h5, h6, .title) {
  padding-right: 54px;
  font-family: var(--mn-font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 28px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  color: var(--mn-fg) !important;
  text-wrap: balance;
  margin: 0;
}
.mn-tile__title a { color: inherit !important; }
.mn-tile--lg .mn-tile__title :is(h1, h2, h3, h4, h5, h6, .title) { font-size: clamp(30px, 3.3vw, 46px) !important; line-height: 1.02 !important; }
.mn-tile__text :is(p, .desc), .mn-tile__text .column_attr { font-size: 15px; line-height: 1.45; color: var(--mn-fg) !important; opacity: 0.86; }
.mn-tile__stat :is(p, .desc), .mn-tile__stat .column_attr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--mn-fg) !important; }
.mn-tile__stat strong {
  font-family: var(--mn-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--mn-fg) !important;
}
.mn-tile--lg .mn-tile__stat strong { font-size: clamp(44px, 4.4vw, 60px); }
.mn-tile__stat span { font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--mn-fg) !important; }
.mcb-column.mn-tile__art { margin-top: auto !important; align-self: center; width: min(250px, 92%) !important; }
.mn-tile__art :is(.image_frame, .image_wrapper) { border: 0; background: none; margin: 0; }
.mn-tile__art img { display: block; width: 100%; height: auto; margin-bottom: -2px; transition: transform .25s ease; }
.mcb-wrap.mn-tile > .mcb-wrap-inner:hover .mn-tile__art img { transform: translateY(-6px); }
@media (max-width: 767px) {
  .mcb-wrap.mn-tile > .mcb-wrap-inner { min-height: 0; padding-bottom: 24px; }
  .mcb-wrap.mn-tile > .mcb-wrap-inner:has(.mn-tile__art) { padding-bottom: 0; }
  .mcb-column.mn-tile__art { width: min(200px, 70%) !important; }
}


/* =====================================================================
   8. EVENTS LIST  (dark "Najbliższe wydarzenia" box)
   ---------------------------------------------------------------------
   Wrap:  mn-card mn-card--navy  (or --dark)
   Plain text / Column element:  mn-events  with this HTML:
     <ul>
       <li><a href="…">
         <span class="mn-events__day">5</span><span class="mn-events__mon">LIS</span>
         <span class="mn-events__meta">Czwartek · 17:00</span>
         <span class="mn-events__title">Wizyta w laboratorium P.U.M.A.</span>
       </a></li>
     </ul>
   ===================================================================== */
.mn-events ul { list-style: none; margin: 0; padding: 0; }
.mn-events li { margin: 0; padding: 0; border-top: 1px solid var(--mn-rule); }
.mn-events li:first-child { border-top: 0; }
.mn-events a {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 14px 0;
  color: var(--mn-fg) !important;
  text-decoration: none !important;
}
.mn-events a:hover .mn-events__title { color: var(--mn-fg-link-hover); }
.mn-events__day { grid-column: 1; grid-row: 1; font-family: var(--mn-font-display); font-weight: 700; font-size: 34px; line-height: 0.9; letter-spacing: -0.03em; color: var(--mn-fg); }
.mn-events__mon { grid-column: 1; grid-row: 2; font-family: var(--mn-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn-fg-label); }
.mn-events__meta { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--mn-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn-fg-label); }
.mn-events__title { grid-column: 2; grid-row: 2; font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--mn-fg); transition: color .15s ease; }


/* =====================================================================
   9. STATS / NUMBERS
   ---------------------------------------------------------------------
   Column/Plain text element:  mn-num  (+ --gold for the gold top line)
     HTML:  <strong>37</strong><span>mentorów, 21 z wolnymi miejscami</span>
   Add  mn-count  to animate the number when it scrolls into view.
   Also works on BeTheme's "Counter" element.
   ===================================================================== */
.mn-num :is(.desc, .column_attr),
div.mn-num {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--mn-navy);
  min-width: 0;
}
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark, .mn-on-dark) .mn-num :is(.desc, .column_attr) { border-top-color: rgba(255, 255, 255, 0.3); }
.mn-num--gold :is(.desc, .column_attr), div.mn-num--gold { border-top-color: var(--mn-gold) !important; }
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark) .mn-num--gold :is(.desc, .column_attr) { border-top-color: var(--mn-gold-on-dark) !important; }
.mn-num strong, .mn-num .number {
  font-family: var(--mn-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(52px, 5.6vw, 80px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.045em;
  color: var(--mn-fg) !important;
}
.mn-num--sm strong, .mn-num--sm .number { font-size: clamp(40px, 4vw, 56px) !important; }
.mn-num :is(.desc, .column_attr) > span, .mn-num .title { font-size: 15.5px; line-height: 1.4; color: var(--mn-fg-soft) !important; font-family: var(--mn-font-text); font-weight: 400; }
.mn-num b { font-weight: 600; color: var(--mn-fg); }
/* BeTheme Counter element */
.mn-num .counter { padding: 18px 0 0; border-top: 2px solid var(--mn-navy); background: none; text-align: left; }
.mn-num .counter .icon_wrapper { display: none; }
.mn-num .counter .desc_wrapper { margin: 0; padding: 0; text-align: left; }
@media (max-width: 520px) {
  .mn-num strong, .mn-num .number { font-size: 44px !important; }
  .mn-num :is(.desc, .column_attr) > span { font-size: 13.5px; }
}


/* =====================================================================
   10. STEPS, CHECK LIST, CHIPS, TAGS, BADGE, NOTICE, STRIP, RULE
   ===================================================================== */
/* Steps: put mn-step on each Wrap in a row (first one also mn-step--first) */
.mcb-wrap.mn-step > .mcb-wrap-inner {
  position: relative;
  gap: 12px;
  width: calc(100% - var(--mn-gap));
  margin: 0 calc(var(--mn-gap) / 2) var(--mn-gap);
  padding: 30px 32px 0 0;
  border-top: 2px solid var(--mn-navy);
}
.mcb-wrap.mn-step > .mcb-wrap-inner::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--mn-navy);
  border: 4px solid #fff;
}
.mcb-section.mn-section--mist .mcb-wrap.mn-step > .mcb-wrap-inner::before { border-color: var(--mn-mist); }
.mcb-wrap.mn-step--first > .mcb-wrap-inner::before { background: var(--mn-gold); }
.mcb-wrap.mn-step--first .mn-label :is(.title, p, h1, h2, h3, h4, h5, h6) { color: var(--mn-gold-text); }
.mcb-wrap.mn-step :is(h3, h4) { font-weight: 600; font-size: 26px; line-height: 1.12; letter-spacing: -0.012em; }
.mcb-wrap.mn-step p { font-size: 16px; line-height: 1.55; }

/* Check list: Column element with a normal <ul> */
.mn-checks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mn-checks li { position: relative; margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.5; color: var(--mn-fg-soft); }
.mn-checks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--mn-gold); }
.mn-checks li strong { color: var(--mn-fg); }

/* Chips: <span class="mn-chip">Mentoring</span> inside any text,
   or the class on a Heading element */
.mn-chip, .mn-chip :is(.title, p, h1, h2, h3, h4, h5, h6) {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mn-chip);
  color: var(--mn-chip-text) !important;
  font-family: var(--mn-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.mcb-column.mn-chip { padding: 0; background: none; }
.mcb-column.mn-chip .mcb-column-inner { display: flex; }
.mn-chip--gold, .mn-chip--gold :is(.title, p, h1, h2, h3, h4, h5, h6),
.mn-chip--status, .mn-chip--status :is(.title, p) { background: var(--mn-gold-soft); color: var(--mn-gold-soft-text) !important; }
.mn-chip--navy, .mn-chip--navy :is(.title, p, h1, h2, h3, h4, h5, h6) { background: var(--mn-navy); color: #fff !important; }
.mn-chip--on-dark, .mn-chip--on-dark :is(.title, p, h1, h2, h3, h4, h5, h6) { background: rgba(255, 255, 255, 0.12); color: #fff !important; }
.mn-chip--open, .mn-chip--open :is(.title, p, h1, h2, h3, h4, h5, h6) { background: #E2F1E7; color: #1F5A37 !important; }
.mn-chip--closed, .mn-chip--closed :is(.title, p, h1, h2, h3, h4, h5, h6) { background: #F3E3E0; color: #7A2318 !important; }
:is(span.mn-chip--status, .mn-chip--status :is(.title, p))::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mn-gold-text); }
.mcb-column:is(.mn-chip--gold, .mn-chip--navy, .mn-chip--open, .mn-chip--closed, .mn-chip--status, .mn-chip--on-dark) { background: none; }

/* Tags (outlined pills) — <span class="mn-tag">Onkologia</span> */
.mn-tag { display: inline-flex; padding: 5px 12px; border: 1px solid var(--mn-line-strong); border-radius: 999px; color: var(--mn-chip-text) !important; font-size: 13.5px !important; font-weight: 500; line-height: 1.4 !important; }
.mn-tags :is(.desc, .column_attr, p) { display: flex; flex-wrap: wrap; gap: 8px; }

/* Badge: round number/letter — <span class="mn-badge">1</span> */
.mn-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mn-navy); color: #fff !important; font-family: var(--mn-font-display) !important; font-size: 20px !important; font-weight: 700; line-height: 1 !important; }
.mn-badge--gold { background: var(--mn-gold); color: var(--mn-ink) !important; }

/* Notice: soft gold message box (Column / Plain text element) */
.mn-notice :is(.desc, .column_attr), div.mn-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 20px;
  border-radius: var(--mn-radius-sm);
  background: var(--mn-gold-soft);
  color: var(--mn-gold-soft-text) !important;
  font-size: 15.5px;
  line-height: 1.5;
}
.mn-notice :is(p, strong, span) { margin: 0; color: var(--mn-gold-soft-text) !important; }
.mn-notice a { color: inherit !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.mn-notice--dot strong::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--mn-gold); vertical-align: 1px; }
.mcb-column.mn-notice--fit :is(.desc, .column_attr) { width: fit-content; max-width: 100%; }

/* Strip: grey rounded bar with text + link (Column / Plain text element) */
.mn-strip :is(.desc, .column_attr), div.mn-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding: 20px 26px; border-radius: 18px; background: var(--mn-mist); font-size: 15.5px; line-height: 1.5; color: var(--mn-ink);
}
.mn-strip p { margin: 0; flex: 1 1 420px; min-width: 0; }

/* Divider element */
.mn-rule hr, hr.mn-rule, .mn-rule .hr_color { height: 1px; border: 0; margin: 0; background: var(--mn-rule); }


/* =====================================================================
   11. QUOTE, ACCORDION / FAQ, TABS
   ===================================================================== */
/* Quote: Column element:
   <blockquote>„Dobre pytanie i solidna metoda…”</blockquote>
   <p><strong>lek. Wojciech Szlasa</strong> · Młoda Nauka</p>   */
.mn-quote :is(.desc, .column_attr) { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 920px; margin: 0 auto; text-align: center; }
.mn-quote--left :is(.desc, .column_attr) { align-items: flex-start; text-align: left; margin: 0; }
.mn-quote blockquote {
  margin: 0; padding: 0; border: 0; background: none; quotes: none;
  font-family: var(--mn-font-display); font-style: normal; font-weight: 600;
  font-size: clamp(24px, 2.7vw, 36px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--mn-fg); text-wrap: balance;
}
.mn-quote blockquote::before, .mn-quote blockquote::after { content: none; display: none; }
.mn-quote blockquote p { color: inherit !important; font: inherit; margin: 0; }
.mn-quote p { font-size: 15.5px; line-height: 1.45; color: var(--mn-fg-soft); }

/* Accordion / FAQ: put mn-faq on BeTheme "Accordion" or "FAQ" element.
   Or use plain HTML: <details class="mn-fold"><summary>Q</summary><div>A</div></details>
   + mn-faq--card for the boxed version */
.mn-faq .mfn-acc, .mn-faq .faq .mfn-acc { border: 0; background: none; }
.mn-faq :is(.accordion, .faq) .question { margin: 0; border: 0; border-top: 1px solid var(--mn-rule); background: none !important; border-radius: 0; }
.mn-faq :is(.accordion, .faq) .question:last-child { border-bottom: 1px solid var(--mn-rule); }
.mn-faq :is(.accordion, .faq) .question > .title {
  position: relative;
  padding: 18px 50px 18px 0 !important;
  background: none !important;
  border: 0;
  font-family: var(--mn-font-text);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--mn-fg) !important;
}
.mn-faq :is(.accordion, .faq) .question > .title > i,
.mn-faq :is(.accordion, .faq) .question > .title .num,
.mn-faq :is(.accordion, .faq) .question > .title .acc-icon-plus,
.mn-faq :is(.accordion, .faq) .question > .title .acc-icon-minus { display: none !important; }
.mn-faq :is(.accordion, .faq) .question > .title::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: -15px;
  border: 1px solid currentColor; border-radius: 50%;
  font-weight: 400; font-size: 18px; line-height: 1;
  transition: transform .2s ease;
}
.mn-faq :is(.accordion, .faq) .question.active > .title::after { transform: rotate(45deg); }
.mn-faq :is(.accordion, .faq) .question .answer { padding: 0 0 20px !important; background: none; border: 0; color: var(--mn-fg-soft); font-size: 16px; line-height: 1.6; }
.mn-faq--card :is(.accordion, .faq) .question { margin-bottom: 12px; padding: 0 24px; border: 1px solid var(--mn-line-strong) !important; border-radius: 20px; background: #fff !important; }
.mn-faq--card :is(.accordion, .faq) .question > .title { font-family: var(--mn-font-display); font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.01em; }

details.mn-fold, .mn-fold details { border-top: 1px solid var(--mn-rule); }
:is(details.mn-fold, .mn-fold details) > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0; list-style: none; cursor: pointer;
  font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--mn-fg);
}
:is(details.mn-fold, .mn-fold details) > summary::-webkit-details-marker { display: none; }
:is(details.mn-fold, .mn-fold details) > summary::after {
  content: "+"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%;
  font-weight: 400; font-size: 18px; line-height: 1; transition: transform .2s ease;
}
:is(details.mn-fold, .mn-fold details)[open] > summary::after { transform: rotate(45deg); }
:is(details.mn-fold, .mn-fold details) > :not(summary) { padding: 0 0 16px; color: var(--mn-fg-soft); }

/* Tabs: put mn-tabs on BeTheme "Tabs" element → pill switcher */
.mn-tabs .ui-tabs { border: 0; background: none; padding: 0; }
.mn-tabs .ui-tabs .ui-tabs-nav {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 24px;
  border: 0; border-radius: 999px; background: var(--mn-mist);
}
.mcb-section.mn-section--mist .mn-tabs .ui-tabs .ui-tabs-nav { background: #fff; }
.mn-tabs .ui-tabs .ui-tabs-nav li { float: none; margin: 0 !important; border: 0 !important; background: none !important; }
.mn-tabs .ui-tabs .ui-tabs-nav li a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px !important;
  border-radius: 999px; background: transparent; color: var(--mn-text) !important;
  font-family: var(--mn-font-text); font-weight: 600; font-size: 15px; line-height: 1.2;
}
.mn-tabs .ui-tabs .ui-tabs-nav li a:hover { color: var(--mn-ink) !important; }
.mn-tabs .ui-tabs .ui-tabs-nav li.ui-state-active a { background: var(--mn-navy) !important; color: #fff !important; }
.mn-tabs .ui-tabs .ui-tabs-panel { padding: 0 !important; border: 0; background: none; }


/* =====================================================================
   12. BLOG / POST CARDS + RAIL SLIDER
   ---------------------------------------------------------------------
   mn-posts  on BeTheme "Blog" element (Style: Grid)  → rounded cards
   mn-rail   on a Section → its wraps scroll sideways with ‹ • • • ›
             (+ mn-rail--2 / --3 / --4 = how many wraps are visible)
   ===================================================================== */
.mn-posts .posts_group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--mn-gap); }
.mn-posts .posts_group .post-item {
  float: none; width: auto !important; margin: 0 !important; padding: 0;
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--mn-line-strong);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mn-posts .posts_group .post-item:hover { box-shadow: 0 0 0 1px var(--mn-navy), 0 18px 40px rgba(15, 14, 54, 0.12); transform: translateY(-3px); }
.mn-posts .post-item .image_frame { margin: 0; border: 0; border-radius: 0; }
.mn-posts .post-item .image_frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mn-posts .post-item :is(.image_links, .post-links .icon-comment-line, .post-comments, .love) { display: none !important; }
.mn-posts .post-item .post-desc-wrapper { padding: 22px 24px 24px; }
.mn-posts .post-item .post-desc { padding: 0; }
.mn-posts .post-item .post-meta, .mn-posts .post-item .date_label {
  font-family: var(--mn-font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn-meta); background: none;
}
.mn-posts .post-item .date_label::after { display: none; }
.mn-posts .post-item .post-title :is(h2, h3, h4) { margin: 8px 0 10px; font-size: 22px !important; line-height: 1.18 !important; letter-spacing: -0.012em; }
.mn-posts .post-item .post-title a { color: var(--mn-ink) !important; }
.mn-posts .post-item .post-title a:hover { color: var(--mn-gold-text) !important; }
.mn-posts .post-item .post-excerpt { font-size: 15.5px; line-height: 1.55; color: var(--mn-text); margin: 0; }
.mn-posts .post-item .post-footer { margin-top: 14px; padding: 0; border: 0; background: none; }
.mn-posts .post-item .post-footer .post-links { border: 0; padding: 0; }
.mn-posts .post-item .post-footer .post-more { font-weight: 600; color: var(--mn-navy); }
.mn-posts .pager_wrapper .pages a, .mn-posts .pager_wrapper .pages .page { border-radius: 999px; }
.mn-posts .pager_wrapper .pages a.active { background: var(--mn-navy); color: #fff; }

/* rail: the section's wraps become a horizontal, swipeable row */
.mcb-section.mn-rail > .section_wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.mcb-section.mn-rail > .section_wrapper::-webkit-scrollbar { display: none; }
.mcb-section.mn-rail > .section_wrapper > .mcb-wrap {
  flex: 0 0 var(--mn-rail-item, 85%);
  width: auto !important;
  max-width: none;
  scroll-snap-align: start;
}
.mcb-section.mn-rail--2 { --mn-rail-item: 50%; }
.mcb-section.mn-rail--3 { --mn-rail-item: 33.333%; }
.mcb-section.mn-rail--4 { --mn-rail-item: 25%; }
@media (max-width: 960px) { .mcb-section:is(.mn-rail--2, .mn-rail--3, .mn-rail--4) { --mn-rail-item: 70%; } }
@media (max-width: 640px) { .mcb-section.mn-rail { --mn-rail-item: 88% !important; } }

/* the ‹ • • • › controls are added by mnu-theme.js */
.mn-rail__nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 10px; }
.mn-rail__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--mn-line-strong); border-radius: 50%;
  background: #fff; color: var(--mn-ink); font-size: 17px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.mn-rail__btn:hover:not(:disabled) { border-color: var(--mn-navy); }
.mn-rail__btn:disabled { opacity: 0.4; cursor: default; }
.mn-rail__dots { display: flex; gap: 6px; }
.mn-rail__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--mn-line-strong); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.mn-rail__dot.is-active { width: 22px; background: var(--mn-navy); }
:is(.mn-section--dark, .mn-section--navy) .mn-rail__btn { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
:is(.mn-section--dark, .mn-section--navy) .mn-rail__dot { background: rgba(255, 255, 255, 0.3); }
:is(.mn-section--dark, .mn-section--navy) .mn-rail__dot.is-active { background: var(--mn-gold-on-dark); }


/* =====================================================================
   13. FORMS (Contact Form 7)  – put mn-form on the element/wrap with the form
   ===================================================================== */
.mn-form :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea) {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 18px;
  border: 1px solid var(--mn-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--mn-ink) !important;
  font-family: var(--mn-font-text) !important;
  font-size: 16px !important;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mn-form textarea { min-height: 150px; resize: vertical; }
.mn-form :is(input, select, textarea):focus { border-color: var(--mn-navy) !important; box-shadow: 0 0 0 3px rgba(208, 165, 61, 0.35) !important; outline: 0; }
.mn-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; color: var(--mn-ink); }
.mn-form .wpcf7-form p { margin: 0 0 16px; }
.mn-form .wpcf7-list-item { margin: 0 16px 0 0; }
.mn-form :is(input[type=submit], button[type=submit]), .mn-form .wpcf7-submit {
  min-height: 52px; padding: 14px 30px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--mn-navy) !important; color: #fff !important;
  font-family: var(--mn-font-text) !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer;
}
.mn-form :is(input[type=submit], button[type=submit]):hover { background: var(--mn-navy-hover) !important; }
.mn-form .wpcf7-not-valid-tip { font-size: 13.5px; color: #A12A1C; }
.mn-form .wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 16px !important; border-radius: 12px; font-size: 15px; }


/* =====================================================================
   14. HEADER  (Betheme → Templates → Header, built with BeBuilder)
   ---------------------------------------------------------------------
   Section:       mn-header  (white bar with bottom line)
   Menu element:  mn-nav     (pill menu)
   In Appearance → Menus → Screen options → enable "CSS Classes", then:
     first item "Strona główna" → CSS class  mn-home  (navy pill, gold when active)
     a CTA item                 → CSS class  mn-cta   (gold pill)
   Language: Polylang "Language switcher" menu items are styled
   automatically, or use a Plain text element with <div class="mn-lang"></div>
   ===================================================================== */
.mcb-section.mn-header {
  background-color: #fff;
  border-bottom: 1px solid var(--mn-line);
  font-size: 15.5px;
  --mfn-column-gap-left: 4px;
  --mfn-column-gap-right: 4px;
  --mfn-column-gap-bottom: 0px;
}
.mcb-section.mn-header > .section_wrapper {
  max-width: calc(var(--mn-content) + 2 * var(--mn-gutter));
  padding-left: var(--mn-gutter);
  padding-right: var(--mn-gutter);
  box-sizing: border-box;
}
.mn-header .logo img, .mn-header .column_header_logo img { max-height: 52px; width: auto; }
.is-sticky .mn-header, .mn-header.is-sticky, .mfn-header-tmpl.mfn-header-sticky-active .mn-header { box-shadow: 0 6px 24px rgba(15, 14, 54, 0.06); }

/* menu items – works for the Header Builder menu and plain WP menus */
.mn-nav :is(.mfn-header-menu, ul.menu) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px !important;
  border-radius: 999px;
  background: transparent;
  color: var(--mn-ink) !important;
  font-family: var(--mn-font-text) !important;
  font-weight: 500 !important;
  font-size: 15.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.mn-nav :is(.mfn-header-menu, ul.menu) > li > a :is(.menu-label, span) { color: inherit !important; font: inherit !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li > a .menu-item-helper { display: none; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li:hover > a,
.mn-nav :is(.mfn-header-menu, ul.menu) > li > a[aria-expanded=true] { background: var(--mn-mist); color: var(--mn-ink) !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current-page-ancestor):not(.mn-home, .lang-item) > a {
  box-shadow: inset 0 -2px 0 var(--mn-gold);
  border-radius: 12px 12px 0 0;
}
.mn-nav :is(.mfn-header-menu, ul.menu) > li:is(.current-menu-item, .current-menu-ancestor):not(.mn-home, .lang-item):hover > a { border-radius: 999px; box-shadow: none; }

/* "Strona główna" – navy pill, gold on the home page */
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-home > a { margin-right: 6px; padding: 10px 18px 10px 14px !important; background: var(--mn-navy) !important; color: #fff !important; font-weight: 600 !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-home > a::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-home > a:hover { background: var(--mn-navy-hover) !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-home:is(.current-menu-item, .current_page_item) > a { background: var(--mn-gold) !important; color: var(--mn-ink) !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-home:is(.current-menu-item, .current_page_item) > a:hover { background: var(--mn-gold-hover) !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-cta > a { background: var(--mn-gold) !important; color: var(--mn-ink) !important; font-weight: 600 !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.mn-cta > a:hover { background: var(--mn-gold-hover) !important; }

/* dropdown */
.mn-nav :is(.mfn-submenu, ul.sub-menu) {
  min-width: 260px;
  padding: 8px !important;
  border: 1px solid var(--mn-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 48px rgba(15, 14, 54, 0.14) !important;
}
.mn-nav :is(.mfn-submenu, ul.sub-menu) li { border: 0 !important; background: none !important; }
.mn-nav :is(.mfn-submenu, ul.sub-menu) li > a {
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--mn-ink) !important;
  font-family: var(--mn-font-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
.mn-nav :is(.mfn-submenu, ul.sub-menu) li > a:hover,
.mn-nav :is(.mfn-submenu, ul.sub-menu) li.current-menu-item > a { background: var(--mn-mist) !important; }
.mn-nav :is(.mfn-submenu, ul.sub-menu) li.current-menu-item > a { box-shadow: inset 3px 0 0 var(--mn-gold); }

/* header icons (search / burger) as round buttons */
.mn-header :is(.column_header_icon, .column_header_burger, .column_header_search) a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--mn-ink) !important;
  transition: background-color .15s ease;
}
.mn-header :is(.column_header_icon, .column_header_burger, .column_header_search) a:hover { background: var(--mn-mist); }

/* small header button (Button element in header) */
.mn-header .mn-btn .button { min-height: 44px; padding: 10px 20px !important; font-size: 15.5px !important; }


/* =====================================================================
   15. FOOTER  (Betheme → Templates → Footer, built with BeBuilder)
   ---------------------------------------------------------------------
   Section:   mn-footer               (dark navy, light text)
              + mn-footer--top        (brand row with a line below)
              + mn-footer--bottom     (small © row with a line above)
   Heading:   mn-label                (gold column titles, e.g. PROGRAMY)
   Column / Plain text with a <ul> of links:  mn-footer-links
   Footer brand text:  mn-footer-name  (Heading)  +  mn-small (Text)
   ===================================================================== */
.mcb-section.mn-footer {
  background-color: var(--mn-navy-950);
  color: var(--mn-on-dark);
  font-size: 15.5px;
  line-height: 1.5;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  --mfn-column-gap-left: calc(var(--mn-gap));
  --mfn-column-gap-right: calc(var(--mn-gap));
  --mfn-column-gap-bottom: 14px;
}
.mcb-section.mn-footer > .section_wrapper {
  max-width: calc(var(--mn-content) + 2 * var(--mn-gutter));
  padding-left: calc(var(--mn-gutter) - var(--mn-gap));
  padding-right: calc(var(--mn-gutter) - var(--mn-gap));
  box-sizing: border-box;
}
.mcb-section.mn-footer--top { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 0; }
.mcb-section.mn-footer--top > .section_wrapper::after {
  content: "";
  display: block;
  visibility: visible;
  height: 1px;
  width: calc(100% - 2 * var(--mn-gap));
  margin: 26px var(--mn-gap) 0;
  background: rgba(255, 255, 255, 0.14);
}
.mcb-section.mn-footer--bottom { padding-top: 0; padding-bottom: 28px; font-size: 14px; }
.mcb-section.mn-footer--bottom > .section_wrapper::before {
  content: "";
  display: block;
  height: 1px;
  width: calc(100% - 2 * var(--mn-gap));
  margin: 0 var(--mn-gap) 22px;
  background: rgba(255, 255, 255, 0.14);
}
.mcb-section.mn-footer + .mcb-section.mn-footer { padding-top: clamp(32px, 4vw, 48px); }
.mcb-section.mn-footer + .mcb-section.mn-footer--bottom { padding-top: 0; }

.mn-footer :is(p, li, span, .desc, .column_attr) { color: var(--mn-on-dark); }
.mn-footer a:not(.button) { color: #fff !important; text-decoration: none; }
.mn-footer a:not(.button):hover { color: var(--mn-gold-on-dark) !important; }
.mn-footer .mn-label :is(.title, h1, h2, h3, h4, h5, h6, p) { color: var(--mn-gold-on-dark) !important; margin-bottom: 4px; }
.mn-footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mn-footer-links li { margin: 0; padding: 0; line-height: 1.35; }
.mn-footer-links--inline ul { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.mn-footer-name :is(.title, h1, h2, h3, h4, h5, h6) { font-family: var(--mn-font-display); font-weight: 700; font-size: 24px !important; line-height: 1.1 !important; letter-spacing: -0.01em; color: #fff !important; }
.mn-footer .image_frame { border: 0; background: none; margin: 0; }

/* logo-sized images (Image element): mn-logo = 52px high, mn-logo--sm = 40px */
.mn-logo img, img.mn-logo { max-height: 52px; width: auto !important; }
.mn-logo--sm img, img.mn-logo--sm { max-height: 40px; }
.mcb-column.mn-logo { width: auto; }
.mn-footer .mn-logo-box img, .mn-logo-box img { padding: 8px 12px; border-radius: 12px; background: #fff; }
.mn-footer .widget { margin: 0; }


/* =====================================================================
   16. LANGUAGE  (Polylang free + optional PL/EN-on-one-page mode)
   ---------------------------------------------------------------------
   mn-pl / mn-en  on any Section, Wrap, Element or <span>:
                  shown only when the page language is PL / EN.
                  (Language = <html lang="…">, set by Polylang, or by
                  mnu-theme.js in toggle mode.)
   mn-lang        <div class="mn-lang"></div> → PL | EN pill switcher
   Polylang "Language switcher" menu items (li.lang-item) are styled as
   the same pill automatically.
   ===================================================================== */
html[lang^="en"] .mn-pl,
html:not([lang^="en"]) .mn-en { display: none !important; }

.mn-lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mn-line-strong);
  border-radius: 999px;
  background: #fff;
}
.mn-lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mn-meta) !important;
  font-family: var(--mn-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mn-lang__btn:hover { background: var(--mn-mist); color: var(--mn-ink) !important; }
.mn-lang__btn.is-active, .mn-lang__btn.is-active:hover { background: var(--mn-navy); color: #fff !important; }
.mn-lang__btn.is-missing { opacity: 0.55; }
:is(.mn-footer, .mn-on-dark) .mn-lang { background: transparent; border-color: rgba(255, 255, 255, 0.3); }
:is(.mn-footer, .mn-on-dark) .mn-lang__btn { color: var(--mn-on-dark) !important; }
:is(.mn-footer, .mn-on-dark) .mn-lang__btn.is-active { background: #fff; color: var(--mn-ink) !important; }

/* Polylang menu items (Appearance → Menus → Language switcher) */
.mn-nav li.lang-item { margin: 0 !important; }
.mn-nav :is(.mfn-header-menu, ul.menu) > li.lang-item > a {
  min-width: 40px; min-height: 36px !important;
  padding: 6px 10px !important;
  margin: 3px 0;
  justify-content: center;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--mn-font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mn-meta) !important;
}
.mn-nav :is(.mfn-header-menu, ul.menu) > li.lang-item.current-lang > a { background: var(--mn-navy) !important; color: #fff !important; }
.mn-nav li.lang-item img { display: none; }   /* hide flags, keep the code */
/* draw the outer pill around consecutive language items */
.mn-nav li.lang-item { position: relative; padding: 0 1px; border-top: 1px solid var(--mn-line-strong); border-bottom: 1px solid var(--mn-line-strong); }
.mn-nav li:not(.lang-item) + li.lang-item,
.mn-nav li.lang-item:first-child { margin-left: 12px !important; padding-left: 3px; border-left: 1px solid var(--mn-line-strong); border-radius: 999px 0 0 999px; }
.mn-nav li.lang-item:not(:has(+ li.lang-item)) { padding-right: 3px; border-right: 1px solid var(--mn-line-strong); border-radius: 0 999px 999px 0; }


/* =====================================================================
   17. MOTION + UTILITIES
   ---------------------------------------------------------------------
   mn-reveal      fade-up when scrolled into view (JS)  (+ mn-reveal--d1..d3 delay)
   mn-img-round   rounded image      mn-img-cover  image fills its box (4:3)
   mn-avatar      round photo        mn-shadow     soft shadow
   mn-hide-mobile / mn-hide-desktop  mn-text-center  mn-text-right
   mn-mb-0 (no gap below)            mn-mt-auto (push to bottom)
   mn-white / mn-gold / mn-navy      text colour
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.mn-js .mn-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  html.mn-js .mn-reveal.is-in { opacity: 1; transform: none; }
  html.mn-js .mn-reveal--d1 { transition-delay: .08s; }
  html.mn-js .mn-reveal--d2 { transition-delay: .16s; }
  html.mn-js .mn-reveal--d3 { transition-delay: .24s; }
  html.mn-js .mn-reveal--d4 { transition-delay: .32s; }
  html { scroll-behavior: smooth; }
}
/* never hide content inside the BeBuilder editor */
body.mfn-ui .mn-reveal, .mfn-be-editor .mn-reveal, html.mn-editor .mn-reveal { opacity: 1 !important; transform: none !important; }

.mn-img-round img, img.mn-img-round, .mn-img-round .image_frame { border-radius: 22px; overflow: hidden; }
.mn-img-round .image_frame { border: 0; }
.mn-img-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mn-img-cover--wide img { aspect-ratio: 16 / 9; }
.mn-img-cover--square img { aspect-ratio: 1; }
.mn-avatar img, img.mn-avatar { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(15, 14, 54, 0.18); }
.mn-avatar .image_frame { border: 0; background: none; }
.mn-shadow > .mcb-wrap-inner, .mn-shadow img { box-shadow: 0 24px 60px rgba(15, 14, 54, 0.16); }

.mn-text-center, .mn-text-center :is(.title, p, .desc, .column_attr) { text-align: center; }
.mn-text-right, .mn-text-right :is(.title, p, .desc, .column_attr) { text-align: right; }
.mcb-column.mn-mb-0 > .mcb-column-inner { margin-bottom: 0 !important; }
.mcb-column.mn-mt-auto { margin-top: auto !important; }
.mn-white, .mn-white :is(.title, p, h1, h2, h3, h4, h5, h6, .desc) { color: #fff !important; }
.mn-gold, .mn-gold :is(.title, p, h1, h2, h3, h4, h5, h6, .desc) { color: var(--mn-gold-text) !important; }
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark) :is(.mn-gold, .mn-gold :is(.title, p, h1, h2, h3, h4, h5, h6)) { color: var(--mn-gold-on-dark) !important; }
.mn-navy, .mn-navy :is(.title, p, h1, h2, h3, h4, h5, h6, .desc) { color: var(--mn-navy) !important; }
.mn-nowrap { white-space: nowrap; }

@media (max-width: 767px) { .mn-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .mn-hide-desktop { display: none !important; } }

/* skip link (add as first element of the header if you want it) */
.mn-skip a, a.mn-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 12px 18px; border-radius: 999px; background: var(--mn-navy); color: #fff !important; font-weight: 600; }
.mn-skip a:focus, a.mn-skip:focus { top: 12px; }


/* =====================================================================
   18. CONSENT LOCK  – Google content waits for the BeTheme GDPR 2.0 consent
   ---------------------------------------------------------------------
   Plain text / Code element:
     <div class="mn-consent" data-mn-service="Google Calendar"
          data-mn-link="https://calendar.google.com/calendar/u/0/r?cid=…">
       <template> …the original <iframe> / embed code… </template>
     </div>
   or simply rename  src=  to  data-mn-src=  on any <iframe>.
   Until the visitor accepts marketing cookies, mnu-theme.js shows this
   placeholder instead and nothing is loaded from Google.
   ===================================================================== */
iframe[data-mn-src]:not([src]) { display: none !important; }
.mn-consent { position: relative; width: 100%; }
.mn-consent.is-unlocked > .mn-consent__box { display: none; }
.mn-consent iframe { display: block; max-width: 100%; border: 0; }
.mn-consent__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-height: var(--mn-consent-height, 320px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--mn-line-strong);
  border-radius: var(--mn-radius);
  background: var(--mn-mist);
  color: var(--mn-ink);
  box-sizing: border-box;
  font-family: var(--mn-font-text);
}
.mn-consent__box p { margin: 0; max-width: 560px; }
.mn-consent__title { font-family: var(--mn-font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--mn-ink) !important; }
.mn-consent__text { font-size: 15.5px; line-height: 1.55; color: var(--mn-text) !important; }
.mn-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 4px; }
.mn-consent__box .mn-link { white-space: normal; }
.mcb-section.mn-section--mist .mn-consent__box { background: #fff; }
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark) .mn-consent__box { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); }
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark) .mn-consent__title { color: #fff !important; }
:is(.mn-section--dark, .mn-section--navy, .mn-hero--dark) .mn-consent__text { color: var(--mn-on-dark) !important; }