/* ── breakpoints (source of truth) ───────────────────────────
   CSS custom properties can't be referenced inside an @media
   condition (no browser supports it, and this file has no build/
   preprocessing step to substitute one at build time) - so this
   comment block, not a CSS variable, IS the shared token. Every
   `@media` rule below is tagged with which of these two it uses;
   any new wpc- component's own responsive CSS should reuse one of
   these exact numbers rather than picking a new one.

     - 768px  "tablet"  - layout reflow (grid/flex direction changes,
       zones collapsing into the nav hamburger, multi-column ->
       single-column). Use this for "does the STRUCTURE change".
     - 480px  "phone"   - vertical real estate only (e.g. clamping an
       editor-set fixed height so it doesn't eat the whole screen).
       Use this for "does a SIZE get clamped", not structure - a
       component already reflowing at 768px shouldn't also carry a
       480px rule unless it needs a further size-only adjustment.
   ──────────────────────────────────────────────────────────── */

/* ── public page shell ──────────────────────────────────────
   The wrapper div page_detail.js's shared mountPublicPage()
   (public_page_renderer.js) generates once per top-level placed
   component. Carries NO spacing of its own, ever - a component's
   rendered margin/padding must be fully explained by its own props
   (every wpc-* component applies its own padding/margin prop to its
   own root element already) or its own component-scoped CSS default,
   never by this wrapper. A hardcoded `padding: 16px 32px` lived here
   per-portal until 2026-10-05: a banner configured for zero
   margin/padding in its own props still rendered with visible
   whitespace around it, because this wrapper kept adding its own
   padding behind the editor's back regardless of what the props
   said - found on pieri's homepage. */
.public-page-component {
    width: 100%;
    box-sizing: border-box;
    /* The placement's own `layout` envelope (layout.js layoutStyle()):
       a max width + alignment, per device. Unset vars fall back to
       full width, no auto margins - how every placement rendered
       before `layout` existed. */
    --wpc-lw: var(--wpc-lw-d);
    --wpc-lml: var(--wpc-lml-d);
    --wpc-lmr: var(--wpc-lmr-d);
    max-width: var(--wpc-lw, none);
    margin-left: var(--wpc-lml, 0);
    margin-right: var(--wpc-lmr, 0);
}
/* A component's own inner content wrapper (the `content_layout` prop -
   Nav Panel and Footer Panel): the same width cap + alignment as
   .public-page-component above, but inside the component's full-width
   root so that root's background keeps spanning the page. Its own
   --wpc-cw/-cml/-cmr variables (layout.js contentLayoutStyle()), never
   the --wpc-lw family: custom properties inherit, and sharing names
   would apply the placement wrapper's cap here a second time when this
   wrapper has none of its own. Unset = full width, no auto margins. */
.wpc-content-layout {
    width: 100%;
    box-sizing: border-box;
    --wpc-cw: var(--wpc-cw-d);
    --wpc-cml: var(--wpc-cml-d);
    --wpc-cmr: var(--wpc-cmr-d);
    max-width: var(--wpc-cw, none);
    margin-left: var(--wpc-cml, 0);
    margin-right: var(--wpc-cmr, 0);
}
/* Only a structural concern (making `position: sticky` actually
   engage), not a spacing one: the nav panel (and only the nav - the
   footer is deliberately NOT given this class, see the renderer's
   isNav(), so a component that expands over it stays on top) is
   ALSO position:sticky on its own root element, but that alone can
   never actually stick - this wrapper sizes to exactly fit its one
   child, giving the component zero extra room in its own immediate
   containing block to stay pinned within as the page scrolls. A
   sticky element can't stick past its parent's own box, and here
   parent height == child height, so there's no valid range where it
   can. Declaring sticky HERE instead, one level up, gives it a
   containing block that's actually the whole tall page
   (.public-page-container), which is what makes it work. */
.public-page-component--nav {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* No scroll anchoring on the page: the nav panel shrinks (and its
   in-flow height drops by ~100px+) once scrollY passes a few pixels
   (wpc-nav-panel.js's `scrolled`). The browser's scroll anchoring then
   "compensates" for the content that just moved up by pulling scrollY
   back toward 0, which un-scrolls the panel, which grows it again, which
   anchoring compensates the other way... a flicker loop at that one
   scroll position. Found on pieri 2026-10-13. */
.public-page-container {
    overflow-anchor: none;
}

/* ── placement layout (per-device spacing) ─────────────────
   Every wpc- component's `padding`/`margin` props reach its root
   element as inline custom properties, one per side per device
   (--wpc-mt-d/-t/-p = margin-top desktop/tablet/phone, --wpc-pl-* =
   padding-left, ...), plus an inline `margin-top: var(--wpc-mt)` etc.
   - see layout.js spacingStyle(). Inline, so an explicitly-set value
   still always beats the component's own CSS default, exactly as the
   old plain inline px did; this rule only decides WHICH device's
   value --wpc-mt currently means. The root must carry `wpc-spacing`.
   Same pattern for .public-page-component's --wpc-lw/--wpc-lml/
   --wpc-lmr (the `layout` prop) above. */
.wpc-spacing {
    --wpc-mt: var(--wpc-mt-d); --wpc-mr: var(--wpc-mr-d);
    --wpc-mb: var(--wpc-mb-d); --wpc-ml: var(--wpc-ml-d);
    --wpc-pt: var(--wpc-pt-d); --wpc-pr: var(--wpc-pr-d);
    --wpc-pb: var(--wpc-pb-d); --wpc-pl: var(--wpc-pl-d);
}
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    .wpc-spacing {
        --wpc-mt: var(--wpc-mt-t); --wpc-mr: var(--wpc-mr-t);
        --wpc-mb: var(--wpc-mb-t); --wpc-ml: var(--wpc-ml-t);
        --wpc-pt: var(--wpc-pt-t); --wpc-pr: var(--wpc-pr-t);
        --wpc-pb: var(--wpc-pb-t); --wpc-pl: var(--wpc-pl-t);
    }
    .public-page-component {
        --wpc-lw: var(--wpc-lw-t);
        --wpc-lml: var(--wpc-lml-t);
        --wpc-lmr: var(--wpc-lmr-t);
    }
    .wpc-content-layout {
        --wpc-cw: var(--wpc-cw-t);
        --wpc-cml: var(--wpc-cml-t);
        --wpc-cmr: var(--wpc-cmr-t);
    }
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    .wpc-spacing {
        --wpc-mt: var(--wpc-mt-p); --wpc-mr: var(--wpc-mr-p);
        --wpc-mb: var(--wpc-mb-p); --wpc-ml: var(--wpc-ml-p);
        --wpc-pt: var(--wpc-pt-p); --wpc-pr: var(--wpc-pr-p);
        --wpc-pb: var(--wpc-pb-p); --wpc-pl: var(--wpc-pl-p);
    }
    .public-page-component {
        --wpc-lw: var(--wpc-lw-p);
        --wpc-lml: var(--wpc-lml-p);
        --wpc-lmr: var(--wpc-lmr-p);
    }
    .wpc-content-layout {
        --wpc-cw: var(--wpc-cw-p);
        --wpc-cml: var(--wpc-cml-p);
        --wpc-cmr: var(--wpc-cmr-p);
    }
}

/* ── wpc-banner ──────────────────────────────────────────── */
.wpc-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--t-primary);
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    /* height is an editor-set inline style (wpc-banner.js's `height`
       prop, default 400px) with no upper bound tied to the viewport -
       doesn't cause horizontal overflow (width is always 100%), but
       on a small phone it can occupy most of the visible screen
       before any real content appears. max-height (a separate
       property from the inline `height`) clamps it without touching
       the component's own JS/props - found during the step-1 mobile
       audit, 2026-09-16. */
    .wpc-banner { max-height: 60vh; }
}
.wpc-banner-link {
    display: block;
    height: 100%;
}
.wpc-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── wpc-banner-internal-text ────────────────────────────── */
.wpc-banner-internal-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    gap: 16px;
    background: var(--t-primary);
}
.wpc-banner-internal-text__img {
    display: block;
    max-width: 64px;
    max-height: 64px;
    width: auto;
    height: auto;
}
.wpc-banner-internal-text__text {
    display: block;
    color: var(--t-surface);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
/* Per-device sizes (`font_size_tablet/_phone`, `image_size_tablet/_phone`):
   wpc-banner-internal-text.js sets --wpc-bt-fs-d/-t/-p and --wpc-bt-is-d/-t/-p
   inline (only for the devices that have a value) and reads
   var(--wpc-bt-fs, 1.5rem) / var(--wpc-bt-is, auto|64px); these rules pick
   the one for the current breakpoint. Without a tablet/phone value the
   component sets none of this. */
.wpc-banner-internal-text__text { --wpc-bt-fs: var(--wpc-bt-fs-d); }
.wpc-banner-internal-text__img { --wpc-bt-is: var(--wpc-bt-is-d); }
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    .wpc-banner-internal-text__text { --wpc-bt-fs: var(--wpc-bt-fs-t); }
    .wpc-banner-internal-text__img { --wpc-bt-is: var(--wpc-bt-is-t); }
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    .wpc-banner-internal-text__text { --wpc-bt-fs: var(--wpc-bt-fs-p); }
    .wpc-banner-internal-text__img { --wpc-bt-is: var(--wpc-bt-is-p); }
}

/* ── wpc-carousel ────────────────────────────────────────── */
.wpc-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--t-primary);
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    /* Same fixed-height-eats-the-viewport issue as wpc-banner above,
       same fix - found in the same audit. */
    .wpc-carousel { max-height: 60vh; }
}
.wpc-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .4s ease;
}
.wpc-carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}
.wpc-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wpc-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgb(var(--t-primary-ch) / .75) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 40px;
}
.wpc-carousel-title {
    color: var(--t-surface);
    font-size: 28px;
    margin: 0 0 8px;
}
.wpc-carousel-desc {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    margin: 0 0 16px;
    max-width: 600px;
}
.wpc-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .2);
    border: none;
    color: var(--t-surface);
    font-size: 32px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.wpc-carousel-nav:hover { background: rgba(255, 255, 255, .35); }
.wpc-carousel-nav.prev { left: 16px; }
.wpc-carousel-nav.next { right: 16px; }
.wpc-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.wpc-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 0;
    transition: background .15s;
}
.wpc-carousel-dot.active { background: var(--t-surface); }

/* ── wpc-header ──────────────────────────────────────────── */
.wpc-header { padding: 32px 0 16px; }
.wpc-header.align-left { text-align: left; }
.wpc-header.align-center { text-align: center; }
.wpc-header.align-right { text-align: right; }
.wpc-header-title {
    margin: 0;
    color: var(--t-primary);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.wpc-header-subtitle {
    margin: 8px 0 0;
    color: var(--t-secondary);
    font-size: 16px;
}

/* ── wpc-text-box ────────────────────────────────────────── */
.wpc-text-box { padding: 16px 0; }
.wpc-text-box.align-left { text-align: left; }
.wpc-text-box.align-center { text-align: center; }
.wpc-text-box.align-right { text-align: right; }
/* `stretch_background`: paint the colour out to the page edges while the
   box (and so the text) keeps the width the placement's `layout` gave it.
   A huge box-shadow does the painting, so it adds no scrollable width
   (a 100vw breakout would give a horizontal scrollbar), and the clip
   keeps it from spilling above and below the box. */
.wpc-text-box--stretch {
    box-shadow: 0 0 0 100vmax var(--wpc-tb-bg);
    clip-path: inset(0 -100vmax);
}
/* A phone-only `margin-left/right: 0 !important` override lived here
   until 2026-10-06 (an editor-set desktop side margin left a few px of
   text on a phone). Superseded by per-device spacing (see "placement
   layout" above): traki_webpage migration 0004 moved those placements'
   side margins onto `layout`/tablet+phone overrides, and an
   !important here would now silently beat a developer's explicit
   phone margin. */
.wpc-text-box-body {
    margin: 0;
    color: var(--t-text);
    font-size: 15px;
    line-height: 1.6;
    /* `content` is HTML now (t-rich-text.js), but a page saved before
       that (plain text, raw newlines, no tags) still has to render
       its own line breaks correctly - pre-wrap handles that legacy
       shape for free without conflicting with the <p>/<ul>/<li>
       block spacing set below for genuinely HTML content. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.wpc-text-box-body p { margin: 0 0 1em; }
.wpc-text-box-body p:last-child,
.wpc-text-box-body div:last-child { margin-bottom: 0; }
.wpc-text-box-body ul,
.wpc-text-box-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.wpc-text-box-body a { color: inherit; text-decoration: underline; }

/* ── wpc-nav-panel (nav bar shell) ──────────────────────── */
/* --wpc-nav-panel-bg is injected per-page when a PortalColor is set */
.wpc-nav-panel {
    position: sticky;
    top: 0;
    z-index: 100;
    /* The full-width shell: background, border, padding, sticky and
       the scrolled/shrink states live here. Its one child,
       .wpc-nav-panel__inner below, holds the zones' own row (and the
       content_layout width cap); this flex only keeps that child
       vertically centered inside the min-height. */
    display: flex;
    align-items: center;
    /* wpc-nav-panel.js always supplies its own inline top/bottom
       padding (from the component's `padding` prop, itself defaulting
       to 0 - see traki_uicomponent.config's 'Nav Panel' seed) - the
       `0` here is only the pre-hydration fallback shown for the
       instant before Vue mounts. Was `0 24px`, a second independent
       place carrying the same stray 24px default the JS-side one had
       - fixed together (found on pieri, 2026-09-15). */
    padding-top: 0;
    padding-bottom: 0;
    /* Left/right are different: base padding + side_content_margin
       (general_config) ABOVE the mobile breakpoint, base padding
       ALONE below it (see the 768px override further down) - a large
       editor-set margin is meant for spreading content out on a big
       screen, not for eating into an already-tight phone width. The
       two pieces arrive as separate custom properties (not pre-added
       into one padding value) specifically so this media query can
       drop just the margin term. */
    padding-left: calc(
        var(--wpc-nav-base-padding-left, 0px) +
        var(--wpc-nav-side-content-margin, 0px)
    );
    padding-right: calc(
        var(--wpc-nav-base-padding-right, 0px) +
        var(--wpc-nav-side-content-margin, 0px)
    );
    background: var(--wpc-nav-panel-bg, var(--t-surface));
    color: var(--wpc-nav-panel-fg, var(--t-text));
    border-bottom: 1px solid var(--t-divider);
    min-height: 60px;
    transition: box-shadow .2s, min-height .2s, padding .2s;
}
/* The zones' row (left/center/right/bottom). Width cap + alignment come
   from .wpc-content-layout (content_layout prop); unset = it fills the
   shell, exactly as the zones used to fill .wpc-nav-panel directly. Keep
   it non-positioned: below 1024px the center/bottom zones are
   position:absolute against .wpc-nav-panel and must keep spanning the
   whole bar, not just the capped content. */
.wpc-nav-panel__inner {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.wpc-nav-panel--scrolled {
    box-shadow: 0 2px 8px rgb(0 0 0 / .08);
}
/* shrink_on_scroll (general_config) - the panel's one fixed compact
   treatment once scrolled (`scrolled && shrink_on_scroll`, see
   wpc-nav-panel.js's `shrunk` computed): shorter panel, the bottom
   zone (the "menu row") folding up onto the SAME row as left/right
   instead of forcing its own line below, and (further down this file)
   a smaller logo and tighter dropdowns. `order` reshuffles left/
   center/bottom/right into that single row purely visually - no DOM
   change needed. Vertical padding itself is set inline by
   wpc-nav-panel.js (it already computes padding-top/bottom from
   props), not here. */
.wpc-nav-panel--shrink {
    /* 48px like the official tu-sofia.bg bar. border-box, so the bar's
       1px bottom border is inside that height, not on top of it. */
    box-sizing: border-box;
    min-height: var(--wpc-nav-shrink-height, 48px);
}
/* The compact bar has no vertical padding (wpc-nav-panel.js): its row
   fills the bar's height, so a `fill_height` dropdown can reach both
   edges; every other item stays vertically centered as before. */
.wpc-nav-panel--shrink .wpc-nav-panel__inner,
.wpc-nav-panel--shrink .wpc-nav-zone--bottom {
    align-self: stretch;
}
/* One line, always: the base .wpc-nav-panel__inner wraps, and wrap
   decides by each item's UNSHRUNK size - so on a window a little too
   narrow for the dropdowns' full widths the right zone (icons) dropped
   onto a second line (found on pieri at ~1072px, 2026-10-16) instead
   of the dropdowns shrinking. nowrap lets the fixed-width dropdowns /
   icon buttons (flex: 0 1 <width>) shrink, their labels re-fitting
   (fit-text.js). The bottom zone does NOT shrink below its content:
   the dropdowns are label-sized here, so a row that does not fit shows
   up as the inner row's overflow, which wpc-nav-panel.js reads to
   switch to the hamburger. */
.wpc-nav-panel--shrink .wpc-nav-panel__inner { flex-wrap: nowrap; }
.wpc-nav-panel--shrink .wpc-nav-zone--bottom {
    flex-shrink: 0;
}
.wpc-nav-panel--shrink .wpc-nav-zone--left { order: 1; }
.wpc-nav-panel--shrink .wpc-nav-zone--center {
    order: 2;
    /* Base rule below gives this zone flex:1 for the UNSHRUNK layout,
       where it's meant to soak up the row's free space. Left as-is
       here, an empty center zone would still claim that space itself
       (flex:1 applies even to an empty flex item), shoving the
       dropdowns in the bottom zone right up against the icons on the
       right instead of leaving them clustered right after the logo -
       the actual bug behind "dropdowns end up at the end, not the
       start" once shrunk. */
    flex: 0 0 auto;
}
.wpc-nav-panel--shrink .wpc-nav-zone--bottom {
    order: 3;
    flex-basis: auto;
    padding: 0;
}
.wpc-nav-panel--shrink .wpc-nav-zone--right {
    order: 4;
    margin-left: auto;
}
/* content_justify: 'center' (general_config) - overrides the zones'
   own spread-apart flex/margin rules below so left/center/right pack
   together as one centered group instead. */
.wpc-nav-panel--content-center .wpc-nav-panel__inner {
    justify-content: center;
}
.wpc-nav-panel--content-center .wpc-nav-zone--center {
    flex: 0 1 auto;
}
.wpc-nav-panel--content-center .wpc-nav-zone--right {
    margin-left: 0;
}
.wpc-nav-zone--left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.wpc-nav-zone--center {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
}
.wpc-nav-zone--right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.wpc-nav-zone--bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-basis: 100%;
    padding: 0;
}

/* ── wpc-nav-logo ────────────────────────────────────────── */
.wpc-nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 16px;
}
.wpc-nav-logo img {
    display: block;
    transition: max-height .2s;
}
.wpc-nav-logo-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: inherit;
    transition: font-size .2s;
}
/* shrink_on_scroll - one fixed compact size for any logo, regardless
   of its configured `height` prop, so this stays generic across
   portals/logos rather than needing a per-panel "shrunk height". */
.wpc-nav-panel--shrink .wpc-nav-logo img {
    max-height: 36px;
    width: auto;
}
.wpc-nav-panel--shrink .wpc-nav-logo-text {
    font-size: 0.95rem;
}
/* image_url_small (wpc-nav-logo.js): a compact logo that replaces the
   normal one while scrolled. Hidden otherwise; the rules are 3-class deep
   to beat `.wpc-nav-logo img` / the generic shrink cap above. */
.wpc-nav-logo .wpc-nav-logo__img--small {
    display: none;
}
.wpc-nav-panel--shrink .wpc-nav-logo--has-small .wpc-nav-logo__img--full {
    display: none;
}
.wpc-nav-panel--shrink .wpc-nav-logo--has-small .wpc-nav-logo__img--small {
    display: block;
    height: var(--wpc-nav-logo-small-height, 36px);
    max-height: none;
    width: auto;
}
/* The Nav Logo placement's vertical margin (8px top, 16px bottom on pieri)
   makes room in the tall normal bar; in the compact one it would make the
   LEFT zone, and so the whole bar, 24px taller than its 40px logo (60px
   instead of 48px). The margin reaches the element as
   `margin-top: var(--wpc-mt)` (an inline style, see layout.js), so the
   compact bar redefines the variable instead of fighting the inline rule.
   Horizontal margins stay. Desktop only: below 1025px the bar is the
   hamburger layout. */
@media (min-width: 1025px) {
    .wpc-nav-panel--shrink .wpc-nav-logo.wpc-spacing {
        --wpc-mt: 0px;
        --wpc-mb: 0px;
    }
    /* The compact logo is 40px like the official bar (36px below); a
       placement's `height_small` (wpc-nav-logo.js) still wins. */
    .wpc-nav-panel--shrink .wpc-nav-logo--has-small
            .wpc-nav-logo__img--small {
        height: var(--wpc-nav-logo-small-height, 40px);
    }
}

/* ── wpc-nav-links ───────────────────────────────────────── */
.wpc-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--wpc-links-gap, 0.25rem);
}
.wpc-nav-links--horizontal {
    flex-direction: row;
    align-items: center;
}
.wpc-nav-links--vertical { flex-direction: column; }
.wpc-nav-links a {
    display: block;
    padding: 0.5em 1em;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background .15s, font-size .2s;
}
/* shrink_on_scroll - same proportional step as wpc-nav-dropdown above */
.wpc-nav-panel--shrink .wpc-nav-links a {
    font-size: 0.82em;
    line-height: 1.2;
}
.wpc-nav-links--small a { font-size: 0.75rem; }
.wpc-nav-links--medium a { font-size: 0.9rem; }
.wpc-nav-links--large a { font-size: 1.2rem; }
.wpc-nav-links a:hover {
    background: rgb(var(--t-primary-ch) / .08);
}
/* `title` prop: the list moves into a group with a real <h3> above it.
   Untitled lists keep their bare <ul> and none of these rules apply. */
.wpc-nav-links-group {
    display: flex;
    flex-direction: column;
}
.wpc-nav-links__title {
    margin: 0 0 var(--wpc-links-gap, 1rem);
    font-size: var(--wpc-links-title-size, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--wpc-links-title-color, inherit);
}

/* ── wpc-nav-dropdown ────────────────────────────────────── */
.wpc-nav-dropdown {
    position: relative;
}
/* width prop (px, wpc-nav-dropdown.js) - the flex-basis, not a hard
   width: a row of fixed-width dropdowns too wide for the viewport
   shrinks every one of them proportionally (labels ellipsized, see
   __label below) rather than overflowing the panel. */
.wpc-nav-dropdown--fixed-width {
    flex: 0 1 var(--wpc-nav-dropdown-width);
    min-width: 0;
}
.wpc-nav-dropdown--fixed-width .wpc-nav-dropdown__trigger {
    width: 100%;
}
.wpc-nav-dropdown__trigger {
    display: flex;
    align-items: center;
    /* Label left, chevron pinned right - identical to the old packed
       layout at auto width, and what a fixed width needs. */
    justify-content: space-between;
    box-sizing: border-box;
    /* height prop - unset var falls back to auto (natural height). */
    height: var(--wpc-nav-dropdown-height, auto);
    gap: 0.375em;
    /* em, not rem: font-size below is this element's own, so padding
       (the container's size) scales together with the text instead of
       staying fixed while only the text grows/shrinks with
       dropdown_size - see NavPanel.general_config.dropdown_size. */
    padding: 0.5em 1em;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    /* A <button> does not inherit the page font on its own (it rendered
       in Arial). */
    font-family: inherit;
    font-size: var(--wpc-nav-dropdown-font-size, 1.1rem);
    font-weight: 500;
    border-radius: var(--wpc-nav-dropdown-radius, 4px);
    transition: background .15s, font-size .2s;
    white-space: nowrap;
}
/* min-width:0 lets the label narrow to the room its fixed-width
   trigger leaves, so fit-text.js can measure it and shrink the font
   until the label fits on one line; the ellipsis is only a fallback
   below fit-text.js's MIN_FIT_SCALE. */
.wpc-nav-dropdown__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* shrink_on_scroll - one proportional step down from whatever
   dropdown_size already set; padding stays in em (see above) so it
   shrinks right along with this smaller font-size. A fixed width/
   height takes the same step; when their var is unset the calc() is
   invalid at computed-value time and the property falls back to its
   initial value (auto), i.e. exactly the unset-prop behaviour. */
.wpc-nav-panel--shrink .wpc-nav-dropdown__trigger {
    font-size: calc(var(--wpc-nav-dropdown-font-size, 1.1rem) * 0.82);
    height: calc(var(--wpc-nav-dropdown-height) * 0.82);
    /* A tight line, so a large dropdown_size cannot make the label plus
       its em padding taller than the compact bar (it grew it to 49px+). */
    line-height: 1.2;
}
/* The compact bar sizes every dropdown by its own label, never by the
   editor's fixed `width` (which is the roomy two-row layout's design):
   the label is always shown in full, and when the row cannot hold
   everything wpc-nav-panel.js switches the bar to the hamburger
   (.wpc-nav-panel--collapsed) instead of squeezing or ellipsizing it. */
.wpc-nav-panel--shrink .wpc-nav-dropdown--fixed-width {
    flex: 0 0 auto;
}
.wpc-nav-panel--shrink .wpc-nav-dropdown--fixed-width
.wpc-nav-dropdown__trigger {
    width: auto;
}
.wpc-nav-panel--shrink .wpc-nav-dropdown__label {
    overflow: visible;
    text-overflow: clip;
}
/* Hover only: an open dropdown keeps its colour, like the official bar
   (the trigger and the menu hanging from it read as one shape). */
.wpc-nav-dropdown__trigger:hover {
    background: rgb(var(--t-primary-ch) / .1);
}
/* background_color_scrolled prop: the colors arrive as variables (no
   inline background), normal first, the compact bar's own after. */
.wpc-nav-dropdown--scrolled-bg .wpc-nav-dropdown__trigger {
    background-color: var(--wpc-nav-dropdown-bg);
}
.wpc-nav-panel--shrink .wpc-nav-dropdown--scrolled-bg
.wpc-nav-dropdown__trigger {
    background-color: var(--wpc-nav-dropdown-bg-scrolled);
}
/* ...but hovering the dropdown (or its open menu) in the compact bar
   brings the normal `background_color` back. Hover is taken on the whole
   dropdown, not just the button, so the color stays while the pointer is
   on the menu below it. */
.wpc-nav-panel--shrink .wpc-nav-dropdown--scrolled-bg:hover
.wpc-nav-dropdown__trigger,
.wpc-nav-panel--shrink .wpc-nav-dropdown--scrolled-bg.wpc-nav-dropdown--open
.wpc-nav-dropdown__trigger {
    background-color: var(--wpc-nav-dropdown-bg);
}
/* fill_height prop: as tall as the row (the panel's bottom zone, or the
   compact bar), overriding both the fixed `height` and its scrolled
   0.82 step; the menu then hangs from the bar's bottom edge. */
.wpc-nav-dropdown--fill-height {
    align-self: stretch;
    display: flex;
}
.wpc-nav-dropdown--fill-height .wpc-nav-dropdown__trigger,
.wpc-nav-panel--shrink .wpc-nav-dropdown--fill-height
.wpc-nav-dropdown__trigger {
    height: auto;
    align-self: stretch;
}
.wpc-nav-dropdown__chevron {
    /* em, same reasoning as .wpc-nav-dropdown__trigger's padding */
    width: 0.875em;
    height: 0.875em;
    flex-shrink: 0;
    transition: transform .2s;
}
.wpc-nav-dropdown--open .wpc-nav-dropdown__chevron {
    transform: rotate(180deg);
}
.wpc-nav-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(var(--t-primary-ch) / .14);
    z-index: 200;
    padding: 6px 0;
}
/* Never narrower than its own trigger once the trigger has a set
   width - the 180px floor alone left a short panel under a wide
   trigger (pieri, 2026-10-08). */
.wpc-nav-dropdown--fixed-width .wpc-nav-dropdown__panel {
    min-width: 100%;
}
.wpc-nav-dropdown__item {
    display: block;
    padding: 10px 20px;
    color: var(--wpc-nav-dropdown-item-color, var(--t-text));
    text-decoration: none;
    font-size: var(--wpc-nav-dropdown-item-font-size, 0.9rem);
    transition: background .12s;
    white-space: nowrap;
}
/* Hovered link: NavPanel.general_config's submenu_hover_background /
   submenu_hover_text (variables set on the <nav> by wpc-nav-panel.js);
   without them the theme's own look. Same for the mega menu below. */
.wpc-nav-dropdown__item:hover {
    background: var(--wpc-nav-submenu-hover-bg, var(--t-surface-alt));
    color: var(
        --wpc-nav-submenu-hover-color,
        var(--wpc-nav-dropdown-item-color, var(--t-text))
    );
}
/* panel_style: 'attached' - trigger and panel read as one shape: the
   panel hangs flush from the trigger (no gap, no border), trigger
   rounded on top only, panel on the bottom only. With a fixed width
   the panel is exactly the trigger's width and long items wrap,
   instead of the panel growing to the longest item. */
.wpc-nav-dropdown--attached .wpc-nav-dropdown__trigger {
    border-radius:
        var(--wpc-nav-dropdown-radius, 4px)
        var(--wpc-nav-dropdown-radius, 4px) 0 0;
}
.wpc-nav-dropdown--attached .wpc-nav-dropdown__panel {
    top: 100%;
    min-width: 100%;
    border: none;
    border-radius:
        0 0 var(--wpc-nav-dropdown-radius, 4px)
        var(--wpc-nav-dropdown-radius, 4px);
    box-shadow: 0 8px 16px rgb(0 0 0 / .12);
}
.wpc-nav-dropdown--attached .wpc-nav-dropdown__item {
    padding: 11px 16px;
}
.wpc-nav-dropdown--attached.wpc-nav-dropdown--fixed-width
.wpc-nav-dropdown__panel {
    width: 100%;
    box-sizing: border-box;
}
.wpc-nav-dropdown--attached.wpc-nav-dropdown--fixed-width
.wpc-nav-dropdown__item {
    white-space: normal;
}

/* ── wpc-nav-dropdown: mega menu ─────────────────────────── */
/* An item with `children` turns the dropdown into the official
   tu-sofia.bg mega menu: one wide panel hanging from the bar, a column
   per item (bold heading, its links below). Left/width come from
   wpc-nav-dropdown.js (measureMega): the panel spans the nav's content
   box, not the narrow trigger it hangs from. */
.wpc-nav-dropdown__mega {
    position: absolute;
    top: 100%;
    z-index: 200;
    box-sizing: border-box;
    display: flex;
    gap: 2rem;
    padding: 3rem;
    /* The official panel is never shorter than 400px, however few links
       its columns hold. */
    min-height: 400px;
    max-height: 75vh;
    overflow-y: auto;
    background: var(--t-surface);
    color: var(--t-text);
    /* Neutral gray, not the theme's bluish --t-border. */
    border-top: 1px solid var(--wpc-nav-mega-border, #e5e5e5);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    white-space: normal;
}
.wpc-nav-dropdown__mega-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wpc-nav-dropdown__mega-heading {
    display: block;
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
}
a.wpc-nav-dropdown__mega-heading:hover { color: var(--t-primary); }
.wpc-nav-dropdown__mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wpc-nav-dropdown__mega-link {
    /* 18px text in 44px rows (8px padding, 28px line), 48px apart with
       the list's 4px gap - the official tu-sofia.bg measurements. */
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    color: var(--wpc-nav-dropdown-item-color, #6b7280);
    font-size: var(--wpc-nav-dropdown-item-font-size, 1.125rem);
    line-height: 1.75rem;
    text-decoration: none;
}
.wpc-nav-dropdown__mega-link:hover {
    background: var(--wpc-nav-submenu-hover-bg, var(--t-surface-alt));
    color: var(--wpc-nav-submenu-hover-color, var(--t-primary));
}

/* ── wpc-nav-panel: mobile menu ──────────────────────────── */
/* Full-screen menu opened by the hamburger (<= 1024px, see the block
   above). Same look and drill-down as the tu-sofia.bg mobile menu: a
   bar with back arrow / title / close, then a plain list. fixed + a
   high z-index so it covers the sticky bar and the page. */
.wpc-nav-scroll-lock { overflow: hidden; }
/* While the menu is open it must beat everything that floats over a
   page (a portal's edit button, ...). The nav's own z-index only counts
   inside its page wrapper (a sticky stacking context of its own), so the
   wrapper is the one that has to rise. */
.wpc-nav-panel--menu-open,
.public-page-component--nav:has(.wpc-nav-panel--menu-open) {
    z-index: 10001;
}
.wpc-nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #374151;
    overflow: hidden;
}
.wpc-nav-mobile__header {
    flex: 0 0 76px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--wpc-nav-panel-bg, var(--t-primary));
    color: var(--wpc-nav-panel-fg, #fff);
    border-bottom: 2px solid rgb(255 255 255 / .2);
}
.wpc-nav-mobile__title {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpc-nav-mobile__icon-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}
.wpc-nav-mobile__icon-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wpc-nav-mobile__list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px;
    background: #fff;
}
.wpc-nav-mobile__item {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px;
    border: none;
    background: none;
    color: #374151;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.wpc-nav-mobile__item:hover,
.wpc-nav-mobile__item:focus-visible { background: #f9fafb; }
.wpc-nav-mobile__item--text { cursor: default; }
.wpc-nav-mobile__chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #9ca3af;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── wpc-nav-portal-link ─────────────────────────────────── */
.wpc-nav-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--t-surface);
    border: 1.5px solid var(--t-border-strong);
    border-radius: 4px;
    color: var(--t-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.wpc-nav-portal-link:hover {
    background: var(--t-surface-alt);
    border-color: var(--t-secondary);
}
.wpc-nav-portal-link__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* ── wpc-nav-icon-link ───────────────────────────────────── */
.wpc-nav-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* --wpc-nav-icon-box / --wpc-nav-icon-size: the icon_size/box_size
       props (wpc-nav-icon-link.js); unset = the original 36px / 20px. */
    width: var(--wpc-nav-icon-box, 36px);
    height: var(--wpc-nav-icon-box, 36px);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}
.wpc-nav-icon-link:hover {
    background: rgb(var(--t-primary-ch) / .1);
}
.wpc-nav-icon-link svg,
.wpc-nav-icon-link__icon {
    width: var(--wpc-nav-icon-size, 20px);
    height: var(--wpc-nav-icon-size, 20px);
}
/* The icon is a mask in the link's text colour (icons.js), not inline SVG. */
.wpc-nav-icon-link__icon {
    display: block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* Compact bar, desktop layout: the official tu-sofia.bg bar drops its
   icons to a bare 20px with 16px between them, whatever size they have
   unscrolled. The hit area stays 32px wide through the ::after. (Phones
   have their own sizes in the 480px block below.) */
@media (min-width: 1025px) {
    .wpc-nav-panel--shrink .wpc-nav-zone--right { gap: 16px; }
    .wpc-nav-panel--shrink .wpc-nav-icon-link {
        position: relative;
        width: 20px;
        height: 20px;
    }
    .wpc-nav-panel--shrink .wpc-nav-icon-link svg,
    .wpc-nav-panel--shrink .wpc-nav-icon-link__icon {
        width: 20px;
        height: 20px;
    }
    .wpc-nav-panel--shrink .wpc-nav-icon-link::after {
        content: '';
        position: absolute;
        inset: -6px;
    }
}

/* ── wpc-nav-icon-button ─────────────────────────────────── */
.wpc-nav-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* height/font_size props (wpc-nav-icon-button.js) - unset vars
       fall back to the original natural height / 0.9rem. */
    height: var(--wpc-nav-icon-button-height, auto);
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    /* Overridden inline per-placement (see the component's own
       contentColor computed prop) - this is only a pre-hydration
       fallback so a solid dark default fill (see JS component's
       background_color default) doesn't render illegibly dark-on-dark
       for the instant before Vue mounts. */
    color: #fff;
    font-size: var(--wpc-nav-icon-button-font-size, 0.9rem);
    font-weight: 600;
    white-space: nowrap;
    transition: filter .15s, background-color .15s, color .15s;
}
.wpc-nav-icon-button:hover { filter: brightness(1.12); }
/* hover_color prop - the fill and the readable text/icon colour are
   set as custom properties; !important because the placement's own
   fill and text colour are inline styles. */
.wpc-nav-icon-button--hover-fill:hover {
    filter: none;
    background-color: var(--wpc-nav-icon-button-hover-bg) !important;
    color: var(--wpc-nav-icon-button-hover-color) !important;
}
/* width prop - flex-basis, shrinks with the row like
   .wpc-nav-dropdown--fixed-width. */
.wpc-nav-icon-button--fixed-width {
    flex: 0 1 var(--wpc-nav-icon-button-width);
    min-width: 0;
}
/* fill_height prop - as tall as the row it sits in, so in the nav
   panel's bottom zone it reaches the panel's bottom edge. */
.wpc-nav-icon-button--fill-height {
    align-self: stretch;
    height: auto;
}
.wpc-nav-panel--shrink .wpc-nav-icon-button:not(
    .wpc-nav-icon-button--fill-height) {
    height: calc(var(--wpc-nav-icon-button-height) * 0.82);
}
.wpc-nav-panel--shrink .wpc-nav-icon-button--fixed-width {
    flex-basis: calc(var(--wpc-nav-icon-button-width) * 0.82);
}
.wpc-nav-icon-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wpc-nav-icon-button__icon {
    width: var(--wpc-nav-icon-button-icon-size, 18px);
    height: var(--wpc-nav-icon-button-icon-size, 18px);
    flex-shrink: 0;
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* ── wpc-nav-separator ───────────────────────────────────── */
.wpc-nav-separator {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    background: currentColor;
    opacity: 0.25;
    margin: 8px 4px;
}

/* ── wpc-nav-lang-switcher ───────────────────────────────── */
.wpc-nav-lang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* The thin vertical line before the switcher (`show_divider` prop), like
   the official tu-sofia.bg bar's. */
.wpc-nav-lang__divider {
    flex: none;
    width: 1px;
    height: 20px;
    background: currentColor;
}
@media (max-width: 767px) {
    .wpc-nav-lang__divider { display: none; }
}
.wpc-nav-lang__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid rgb(var(--t-primary-ch) / .3);
    border-radius: 20px;
    background: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}
.wpc-nav-lang__trigger:hover,
.wpc-nav-lang--open .wpc-nav-lang__trigger {
    border-color: currentColor;
    background: rgb(var(--t-primary-ch) / .08);
}
.wpc-nav-lang__globe {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* Chevron after the language name; turns over while the list is open. */
.wpc-nav-lang__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .5;
    transition: transform .2s;
}
.wpc-nav-lang--open .wpc-nav-lang__chevron {
    transform: rotate(180deg);
}
.wpc-nav-lang__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 120px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(var(--t-primary-ch) / .14);
    z-index: 200;
    padding: 4px 0;
}
.wpc-nav-lang__item {
    display: block;
    padding: 8px 16px;
    color: var(--t-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background .12s;
}
.wpc-nav-lang__item:hover { background: var(--t-surface-alt); }

/* breakpoint: phone (480px) - hides the trigger's language name
   (e.g. "Български"), leaving just the globe icon. Found on pieri
   2026-09-25: on narrow phones the right zone's icons (search, mail,
   account, this switcher, the hamburger) left too little room for
   the logo, which kept shrinking past legibility and overlapping the
   icons above it (see wpc-nav-panel's own 1024px block - the logo is
   the one flexible item, everything else stays fixed-size). This is
   a SIZE adjustment (less content in the same trigger), not a
   structural one, hence 480 not 768 - the trigger keeps behaving
   exactly the same, just narrower. */
@media (max-width: 480px) {
    .wpc-nav-lang__trigger-text,
    .wpc-nav-lang__chevron { display: none; }
    .wpc-nav-lang__trigger {
        gap: 0;
        padding: 4px 8px;
    }
}

/* ── wpc-nav-edit-button ─────────────────────────────────── */
.wpc-nav-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    background: rgb(var(--t-primary-ch) / .1);
    color: var(--t-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background .15s;
}
.wpc-nav-edit-btn:hover { background: rgb(var(--t-primary-ch) / .18); }
.wpc-nav-edit-btn-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── hamburger ───────────────────────────────────────────── */
.wpc-nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    transition: background .15s;
}
.wpc-nav-hamburger:hover {
    background: rgb(var(--t-primary-ch) / .08);
}
.wpc-nav-hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    /* Hardcoded rather than currentColor/--wpc-nav-panel-fg: this
       component is built for the dark-navbar reference design, where
       the hamburger icon is always white regardless of the panel's
       auto light/dark contrast heuristic. */
    background: #ffffff;
    border-radius: 1px;
}

/* ── wpc-nav-panel's own breakpoint: 1024px, NOT the shared 768px
   "tablet" token above ─────────────────────────────────────
   Deliberate, scoped exception: tu-sofia.bg (the reference design
   this component is built to match) collapses its own nav into the
   compact hamburger layout at 1024px (confirmed with Playwright -
   full desktop menu still rendered at 1024px itself, hamburger-only
   at 1023px and below, matching a plain Tailwind `lg:` breakpoint),
   not 768px. Using 768px here left a dead zone (roughly 768-1023px,
   930px is where this was actually found) where pieri still rendered
   its desktop two-row layout - side_content_margin and all - at a
   width tu-sofia.bg already treats as mobile. Every selector in this
   block is `.wpc-nav-*`-scoped, so this doesn't touch any other
   component's own use of the shared 768px/480px tokens. */
@media (max-width: 1024px) {
    /* nowrap, not wrap: center/bottom are display:none/position:
       absolute below (out of normal flow whenever closed), so left
       and right are the ONLY two flex children left in the row at
       this breakpoint - flex-wrap:wrap on just those two was the
       actual bug behind "icons drop below the logo instead of the
       logo shrinking". CSS flexbox decides which items fit on a line
       using each item's UNSHRUNK hypothetical size, not the size it
       could shrink down to - so once the logo's own natural width no
       longer left room for the right zone, the browser wrapped right
       onto its own line FIRST and only then let the (now alone on its
       line) logo shrink to fill it, regardless of how much smaller
       flex-shrink could have made it if given the chance. nowrap
       removes that escape valve, so flex-shrink on
       .wpc-nav-zone--left/.wpc-nav-logo/its img below actually gets
       to do its job and the two zones share the row all the way down. */
    .wpc-nav-panel {
        position: relative;
        /* Drops side_content_margin entirely below this breakpoint -
           see the base rule's own comment above. */
        padding-left: var(--wpc-nav-base-padding-left, 0px);
        padding-right: var(--wpc-nav-base-padding-right, 0px);
    }
    .wpc-nav-panel__inner { flex-wrap: nowrap; }
    .wpc-nav-hamburger { display: flex; }
    /* The center and bottom zones (links, dropdowns, icon buttons) are
       never shown in this layout: the hamburger opens the full-screen
       .wpc-nav-mobile menu that wpc-nav-panel.js builds from those same
       items (drill-down: item -> submenu -> links, like tu-sofia.bg).
       Items flagged `hide_on_mobile` (right zone icons) go too. */
    .wpc-nav-zone--center,
    .wpc-nav-zone--bottom { display: none; }
    .wpc-nav-hide-mobile { display: none !important; }
    /* At this breakpoint the center/bottom zones are already gone
       (collapsed into the hamburger above), leaving only the logo
       (left) and account/lang-switcher/hamburger (right) on the row.
       left's flex-shrink:0 (see its base rule above the 768px block)
       meant that row could still overflow as the viewport kept
       narrowing below 768px, wrapping the right zone onto its own
       line the moment the logo's own width stopped leaving room -
       reference design instead shrinks the logo continuously and
       keeps everything on one row all the way down. Belongs in THIS
       768px block, not a narrower one: the overflow starts exactly
       where this layout starts, not at some smaller width below it. */
    .wpc-nav-zone--left {
        flex-shrink: 1;
        min-width: 0;
    }
    /* .wpc-nav-logo is ITSELF a flex item (nested inside the now-
       shrinkable zone above) with the flexbox-default min-width:auto,
       which floors it at its own min-content size regardless of the
       parent allowing shrinkage - the classic "flex item won't shrink
       past its content" trap. Without this, the previous rule alone
       does nothing: the zone can shrink, but the logo inside it still
       can't. */
    .wpc-nav-logo {
        min-width: 0;
    }
    /* No fixed max-height: letting the browser shrink the image via
       its own flex negotiation (max-width against its now-shrinkable
       parent, height following via aspect ratio) means it only gets
       smaller than its configured `height` prop by exactly as much as
       the row actually needs, continuously as the viewport narrows -
       not a hard jump-cut the moment this breakpoint is entered. */
    .wpc-nav-logo img {
        max-width: 100%;
        width: auto;
        height: auto;
        /* Floor so a wide-aspect logo + a large editor-set
           side_content_margin on a very narrow phone can't compress it
           all the way to 0 (invisible) - past this point the row can
           overflow horizontally instead, which is the lesser problem. */
        min-width: 24px;
    }
}

/* ── wpc-nav-panel--collapsed: the hamburger layout at ANY width ──
   Set by wpc-nav-panel.js when the bar's content does not fit its row
   (or a dropdown label would be clipped), so a label is never squeezed
   or overlapped - the same layout the 1024px block above gives phones.
   Mirrors that block's rules; unlike it, the bar stays `sticky`, since
   this can happen on a wide desktop window. Keep the two in step. */
.wpc-nav-panel--collapsed .wpc-nav-panel__inner { flex-wrap: nowrap; }
.wpc-nav-panel--collapsed .wpc-nav-hamburger { display: flex; }
.wpc-nav-panel--collapsed .wpc-nav-zone--center,
.wpc-nav-panel--collapsed .wpc-nav-zone--bottom { display: none; }
.wpc-nav-panel--collapsed .wpc-nav-hide-mobile { display: none !important; }
.wpc-nav-panel--collapsed .wpc-nav-zone--left {
    flex-shrink: 1;
    min-width: 0;
}
.wpc-nav-panel--collapsed .wpc-nav-logo { min-width: 0; }
.wpc-nav-panel--collapsed .wpc-nav-logo img {
    max-width: 100%;
    width: auto;
    height: auto;
    min-width: 24px;
}

/* breakpoint: phone (480px) - shrinks the right zone's own icon
   buttons (search/mail, account, lang switcher, hamburger), on top
   of the 1024px block above. Found on pieri 2026-09-25 alongside the
   lang-switcher text hide (see wpc-nav-lang-switcher's own 480px
   rule): even with that text gone, a narrow phone's right zone
   (every icon here plus the hamburger) could still add up to enough
   fixed width to squeeze the logo uncomfortably small before
   overlap stopped happening. This is a SIZE adjustment to
   already-reflowed (1024px) markup, not a structural one, hence 480
   not 768/1024 - every button here keeps its exact layout, just
   smaller. */
@media (max-width: 480px) {
    .wpc-nav-zone--right { gap: 2px; }
    .wpc-nav-icon-link {
        width: 30px;
        height: 30px;
    }
    .wpc-nav-icon-link svg,
    .wpc-nav-icon-link__icon {
        width: 17px;
        height: 17px;
    }
    .wpc-nav-account__trigger {
        width: 30px;
        height: 30px;
    }
    .wpc-nav-account__avatar {
        width: 24px;
        height: 24px;
    }
    .wpc-nav-account__icon {
        width: 19px;
        height: 19px;
    }
    .wpc-nav-hamburger {
        width: 30px;
        height: 30px;
    }
    .wpc-nav-hamburger-bar { width: 16px; }
}

/* ── wpc-hero ────────────────────────────────────────────── */
.wpc-hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--t-primary-ch) / 0.9);
    padding: 3rem 1.5rem;
}
.wpc-hero--image {
    background-size: cover;
    background-position: center;
    position: relative;
}
.wpc-hero--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--t-primary-ch) / 0.6);
}
.wpc-hero__content {
    position: relative;
    text-align: center;
    max-width: 700px;
    color: #fff;
}
.wpc-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.15;
}
.wpc-hero__subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    margin: 0 0 1.5rem;
}
.wpc-hero__cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #fff;
    color: var(--t-primary);
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.wpc-hero__cta:hover { opacity: 0.9; }

/* ── wpc-news-list ───────────────────────────────────────── */
.wpc-news-list {
    padding: 2rem 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}
.wpc-news-list__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t-primary);
    margin-bottom: 1.5rem;
}
.wpc-news-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.wpc-news-list__item {
    border-bottom: 1px solid var(--t-border-light);
    padding-bottom: 1rem;
}
.wpc-news-list__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-decoration: none;
}
.wpc-news-list__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-primary);
}
.wpc-news-list__title:hover { text-decoration: underline; }
.wpc-news-list__date {
    font-size: 0.8rem;
    color: var(--t-text);
    white-space: nowrap;
    flex-shrink: 0;
}
.wpc-news-list__excerpt {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--t-text);
    line-height: 1.5;
}

/* ── wpc-accordion ───────────────────────────────────────── */
.wpc-accordion {
    max-width: 860px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.wpc-accordion__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t-primary);
    margin-bottom: 1.5rem;
}
.wpc-accordion__item {
    border-bottom: 1px solid var(--t-border-light);
}
.wpc-accordion__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-primary);
    cursor: pointer;
    gap: 1rem;
}
.wpc-accordion__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    color: var(--t-secondary);
}
.wpc-accordion__body {
    padding: 0 0 1rem;
    color: var(--t-text);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.wpc-accordion__body p { margin: 0; }

/* ── wpc-stat-strip ──────────────────────────────────────── */
.wpc-stat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 4rem;
    padding: 2.5rem 1.5rem;
    background: var(--t-surface-alt);
}
.wpc-stat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.wpc-stat-strip__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--t-primary);
    line-height: 1;
}
.wpc-stat-strip__label {
    font-size: 0.85rem;
    color: var(--t-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── wpc-step-sequence ───────────────────────────────────── */
.wpc-step-sequence {
    background: var(--t-secondary);
}
/* The steps sit in a `.wpc-content-layout` wrapper (the `content_layout`
   prop; unset = it fills the band): the flex row is its, the band's colour
   and padding stay the root's. */
.wpc-step-sequence__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}
.wpc-step-sequence__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 160px;
    text-align: center;
}
.wpc-step-sequence__number {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--t-surface);
    line-height: 1;
}
.wpc-step-sequence__number-img {
    display: block;
    height: 2.75rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.wpc-step-sequence__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--t-surface);
}
.wpc-step-sequence__subtitle {
    font-size: 0.8rem;
    color: rgb(255 255 255 / .85);
}
/* The one arrow, as in the Figma design (measured at 1440: 54 x 24px, a 2px
   line, an open head); an editor does not change it. */
.wpc-step-sequence__arrow {
    width: 54px;
    height: 24px;
    flex-shrink: 0;
    color: var(--t-surface);
    align-self: center;
    margin-top: 1.25rem;
}
/* Per-device sizes (`<name>_tablet/_phone` of number_size, step_image_size,
   title_size, subtitle_size, step_gap, step_width): wpc-step-sequence.js sets
   --wpc-ss-{ns,is,ts,ss,gap,sw}-d/-t/-p inline (only for the devices that have
   a value, and only when a tablet or phone value is set) and reads
   var(--wpc-ss-xx, <stylesheet default>); these rules pick the one for the
   current breakpoint. */
.wpc-step-sequence__inner { --wpc-ss-gap: var(--wpc-ss-gap-d); }
.wpc-step-sequence__step { --wpc-ss-sw: var(--wpc-ss-sw-d); }
.wpc-step-sequence__number { --wpc-ss-ns: var(--wpc-ss-ns-d); }
.wpc-step-sequence__title { --wpc-ss-ts: var(--wpc-ss-ts-d); }
.wpc-step-sequence__subtitle { --wpc-ss-ss: var(--wpc-ss-ss-d); }
.wpc-step-sequence__number-img { --wpc-ss-is: var(--wpc-ss-is-d); }
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    .wpc-step-sequence__inner { --wpc-ss-gap: var(--wpc-ss-gap-t); }
    .wpc-step-sequence__step { --wpc-ss-sw: var(--wpc-ss-sw-t); }
    .wpc-step-sequence__number { --wpc-ss-ns: var(--wpc-ss-ns-t); }
    .wpc-step-sequence__title { --wpc-ss-ts: var(--wpc-ss-ts-t); }
    .wpc-step-sequence__subtitle { --wpc-ss-ss: var(--wpc-ss-ss-t); }
    .wpc-step-sequence__number-img { --wpc-ss-is: var(--wpc-ss-is-t); }
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    .wpc-step-sequence__inner { --wpc-ss-gap: var(--wpc-ss-gap-p); }
    .wpc-step-sequence__step { --wpc-ss-sw: var(--wpc-ss-sw-p); }
    .wpc-step-sequence__number { --wpc-ss-ns: var(--wpc-ss-ns-p); }
    .wpc-step-sequence__title { --wpc-ss-ts: var(--wpc-ss-ts-p); }
    .wpc-step-sequence__subtitle { --wpc-ss-ss: var(--wpc-ss-ss-p); }
    .wpc-step-sequence__number-img { --wpc-ss-is: var(--wpc-ss-is-p); }
}
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    /* flex-wrap alone wraps steps 2-per-row on narrow viewports,
       stranding each row's connecting arrow at the start of the next
       row - it ends up pointing at a step from empty space instead
       of from the previous step, breaking the read order (found on
       pieri, 2026-09-16). Force a single column and rotate the
       arrows to point down between stacked steps instead. */
    .wpc-step-sequence__inner {
        flex-direction: column;
        align-items: center;
    }
    /* The arrow is more than twice as wide as it is high: turned down it
       sticks out above and below by (width - height) / 2 = 15px, so give it
       that room. */
    .wpc-step-sequence__arrow {
        transform: rotate(90deg);
        margin-block: 15px;
    }
}
/* breakpoint: phone (480px) */
@media (max-width: 480px) {
    /* A smaller arrow on a phone: 40 x 18px, (40 - 18) / 2 = 11px of room. */
    .wpc-step-sequence__arrow {
        width: 40px;
        height: 18px;
        margin-block: 11px;
    }
}

/* ── wpc-breadcrumbs ─────────────────────────────────────── */
/* Two full-width bands: the trail, and an optional page title under
   it. Band backgrounds come from the crumbs_background/title_background
   props via inline style, and so does the text color (dark or white by
   contrast, see wpc-breadcrumbs.js) through --wpc-bc-ink/--wpc-bc-hover.
   The narrow-screen rules key on the component's OWN width (container
   query), not the viewport's, so a breadcrumb placed in a narrow column
   on a wide screen still gets the small paddings.
   The CONTENT of each band (the trail, the title) sits in a
   `.wpc-content-layout` wrapper (`.wpc-breadcrumbs__inner`, the
   `content_layout` prop: 1440px centred in the catalog seed) that also
   carries the side padding, so the band keeps its colour edge to edge while
   the text stays in the column; below the cap the wrapper fills the band and
   the look is what it always was. */
.wpc-breadcrumbs {
    container-type: inline-size;
    container-name: wpc-bc;
    width: 100%;
    box-sizing: border-box;
}
.wpc-breadcrumbs__crumbs {
    box-sizing: border-box;
    padding: 45px 0 37px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--wpc-bc-ink, var(--t-text));
}
.wpc-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wpc-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.wpc-breadcrumbs__sep {
    display: block;
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.75em;
    margin: 0 1em;
    opacity: 0.6;
}
.wpc-breadcrumbs__home {
    display: block;
    flex: 0 0 auto;
    width: 0.875em;
    height: 0.875em;
    margin-right: 0.75em;
}
.wpc-breadcrumbs__link,
.wpc-breadcrumbs__current {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.wpc-breadcrumbs__link {
    transition: color 0.2s;
}
.wpc-breadcrumbs__link:hover,
.wpc-breadcrumbs__link:focus-visible {
    color: var(--wpc-bc-hover, var(--t-primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wpc-breadcrumbs__link:focus-visible {
    outline: 2px solid var(--wpc-bc-hover, var(--t-primary));
    outline-offset: 2px;
    border-radius: 2px;
}
.wpc-breadcrumbs__title-band {
    box-sizing: border-box;
    padding: 32px 0 48px;
}
.wpc-breadcrumbs__inner {
    padding: 0 75px;
}
.wpc-breadcrumbs__title {
    margin: 0;
    padding: 0;
    font-size: clamp(24px, 6.92cqw, 36px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--t-text);
    overflow-wrap: break-word;
}
@container wpc-bc (max-width: 719px) {
    .wpc-breadcrumbs__crumbs {
        padding: 20px 0;
    }
    .wpc-breadcrumbs__title-band {
        padding: 20px 0 28px;
    }
    .wpc-breadcrumbs__inner {
        padding: 0 16px;
    }
}

/* ── wpc-icon-btn-sequence ───────────────────────────────── */
.wpc-icon-btn-sequence {
    display: flex;
    justify-content: center;
}
/* The rounded card holding the tiles - background/radius come from
   the outer_fill_color/panel_fill_color/corner_radius props via
   inline style (wpc-icon-btn-sequence.js), not hardcoded here. */
.wpc-icon-btn-sequence__panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    width: 100%;
    padding: 1.75rem 2rem;
    border: 1px solid var(--t-border-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.wpc-icon-btn-sequence__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 110px;
    text-align: center;
    text-decoration: none;
}
.wpc-icon-btn-sequence__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-primary);
    font-size: 1.4rem;
    transition: transform .15s;
}
.wpc-icon-btn-sequence__item:hover .wpc-icon-btn-sequence__icon-tile {
    transform: translateY(-3px);
}
.wpc-icon-btn-sequence__label {
    color: var(--t-primary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ── wpc-footer ──────────────────────────────────────────── */
.wpc-footer {
    background: var(--t-surface-alt);
    border-top: 1px solid var(--t-border);
    padding: 2rem 1.5rem 1rem;
    margin-top: auto;
}
.wpc-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.wpc-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wpc-footer__portal-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-text);
}
.wpc-footer__university-name {
    font-size: 0.8rem;
    color: var(--t-text);
}
.wpc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.wpc-footer__links a {
    font-size: 0.875rem;
    color: var(--t-text);
    text-decoration: none;
}
.wpc-footer__links a:hover { color: var(--t-primary); }
.wpc-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--t-border-light);
    padding-top: 1rem;
    font-size: 0.75rem;
    color: var(--t-text);
}
.wpc-footer__bottom a { color: inherit; }

/* ── wpc-footer-brand ────────────────────────────────────── */
.wpc-footer-brand {
    display: flex;
    flex-direction: column;
    /* Centers the logo row and the social-icons row relative to each
       other (horizontally - this is a column flex, so align-items is
       the cross/horizontal axis), each shrinking to its own content
       width instead of stretching full-width and left-packing within
       that. Written for the common case where `name` is left empty
       because the uploaded logo image is itself a combined mark+
       wordmark graphic (so there's nothing else in the logo row to
       keep left-aligned against) - found live on pieri, 2026-10-06.
       With `name` actually set, this still centers the logo+name row
       over the icon row as one unit; it does not center the name
       text *within* that row - this never stretches to the anchor's
       full width to begin with. The `align: start` prop (below)
       left-aligns it instead. */
    align-items: center;
    gap: 1rem;
}
/* align: start - logo row on top, social row pushed to the bottom of
   the column (the brand column is stretched to the row's height by
   .wpc-footer-panel__zone--columns). Below 1024px the brand block is
   centered again, like the official footer. */
.wpc-footer-brand--align-start {
    align-items: flex-start;
}
.wpc-footer-brand--align-start .wpc-footer-brand__social {
    margin-top: auto;
}
.wpc-footer-brand__logo-row {
    display: flex;
    align-items: center;
    max-width: 100%;
    gap: var(--wpc-footer-logo-gap, 0.75rem);
    text-decoration: none;
    color: inherit;
}
.wpc-footer-brand__logo {
    display: block;
    height: var(--wpc-footer-logo-height, 40px);
    width: auto;
    /* a very wide logo shrinks instead of overflowing a phone */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
}
.wpc-footer-brand__name {
    font-size: var(--wpc-footer-name-size, 0.9rem);
    font-weight: var(--wpc-footer-name-weight, 700);
    color: var(--wpc-footer-name-color, var(--t-primary));
    line-height: 1.25;
    white-space: pre-line;
}
.wpc-footer-brand__social {
    display: flex;
    gap: var(--wpc-footer-social-gap, 0.75rem);
}
.wpc-footer-brand__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wpc-footer-social-size, 32px);
    height: var(--wpc-footer-social-size, 32px);
    border-radius: 50%;
    background: var(--t-surface-alt);
    color: var(--wpc-footer-social-color, var(--t-primary));
    font-size: 0.9rem;
    transition: background .15s, color .15s;
}
.wpc-footer-brand__social-link svg {
    width: 62%;
    height: 62%;
}
.wpc-footer-brand__social-link:hover {
    background: var(--t-primary);
    color: var(--t-surface);
}
/* social_style: plain - bare icons, no round button: the icon fills
   the box and only the color changes on hover. */
.wpc-footer-brand--social-plain .wpc-footer-brand__social-link {
    border-radius: 0;
    background: none;
}
.wpc-footer-brand--social-plain .wpc-footer-brand__social-link svg {
    width: 100%;
    height: 100%;
}
.wpc-footer-brand--social-plain .wpc-footer-brand__social-link:hover {
    background: none;
    color: var(--t-primary);
}

/* ── wpc-footer-social ───────────────────────────────────── */
/* The official tu-sofia.bg footer's icon row: 28px icons, 32px apart,
   grey (the footer's text color), a network's own color on hover. */
.wpc-footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wpc-footer-social-gap, 32px);
}
.wpc-footer-social--align-center {
    justify-content: center;
}
.wpc-footer-social__link {
    display: inline-flex;
    width: var(--wpc-footer-social-size, 28px);
    height: var(--wpc-footer-social-size, 28px);
    color: var(--wpc-footer-social-color,
        var(--wpc-footer-text-color, #737373));
    transition: color .2s;
}
.wpc-footer-social__link svg {
    width: 100%;
    height: 100%;
}
.wpc-footer-social__link:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.wpc-footer-social--brand-hover .wpc-footer-social__link--facebook:hover {
    color: #1877f2;
}
.wpc-footer-social--brand-hover .wpc-footer-social__link--instagram:hover {
    color: #e4405f;
}
.wpc-footer-social--brand-hover .wpc-footer-social__link--youtube:hover {
    color: #f00;
}

/* ── wpc-footer-panel ────────────────────────────────────── */
.wpc-footer-panel {
    width: 100%;
    background: var(--t-surface);
    border-top: 1px solid var(--wpc-footer-border-color, var(--t-border));
    /* Base padding + side_content_margin (Footer.side_content_margin)
       ABOVE the mobile breakpoint, base padding ALONE below it (see
       the 768px override further down) - same split, same reasoning,
       as .wpc-nav-panel's own left/right padding above: a large
       editor-set margin is meant to inset content on a big screen
       (matching tu-sofia.bg's own footer, whose content sits clear of
       the page edges rather than flush to them), not to eat into an
       already-tight phone width. Arrives as two separate custom
       properties, not one pre-added padding value, specifically so
       the breakpoint can drop just the margin term. */
    padding-left: calc(
        var(--wpc-footer-base-padding-left, 0px) +
        var(--wpc-footer-side-content-margin, 0px)
    );
    padding-right: calc(
        var(--wpc-footer-base-padding-right, 0px) +
        var(--wpc-footer-side-content-margin, 0px)
    );
}
/* Wraps both zones. Width cap + alignment come from .wpc-content-layout
   (content_layout prop); the footer's own background, border and
   padding stay on .wpc-footer-panel, so they keep spanning the page. */
.wpc-footer-panel__inner {
    min-width: 0;
}
/* Desktop (>= 1024px): one row - the pinned brand (first child, see
   wpc-footer-panel.js), then the link columns sharing the rest equally.
   The gap between all of them is the Footer's own `columns_gap` (inline
   style on the zone and the group). Matches the official tu-sofia.bg
   footer: 1440px container -> brand 374 + three 323px columns, 32px
   apart. The brand's width is fitted to the official one measured at
   977 / 1233 / 1440px containers (334 / 359 / 374px): 250px + 8.64%. */
.wpc-footer-panel__zone--columns {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}
.wpc-footer-panel__zone--columns > .wpc-footer-brand,
.wpc-footer-panel__zone--columns > .wpc-footer-panel__anchor {
    flex: 0 0 calc(250px + 8.64%);
    min-width: 0;
    max-width: 100%;
}
/* The anchor column when a Footer Social Links is placed right after
   Footer Brand: the brand on top, the icons at the bottom of the column
   (the column is stretched to the link columns' height), like the
   official footer. */
.wpc-footer-panel__anchor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}
.wpc-footer-panel__columns-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
}
.wpc-footer-panel__columns-group > .wpc-nav-links--vertical,
.wpc-footer-panel__columns-group > .wpc-nav-links-group {
    flex: 1 1 0;
    min-width: 0;
}
.wpc-footer-panel__columns-group > .wpc-nav-links--vertical {
    gap: 0.5rem;
}
.wpc-footer-panel__columns-group .wpc-nav-links--vertical a {
    padding: 0;
    color: var(--t-text);
    font-weight: 400;
}
.wpc-footer-panel__columns-group .wpc-nav-links--vertical a:hover {
    background: none;
    color: var(--t-primary);
}
/* Bottom bar: the copyright line, then optional smaller link lines,
   centered one under the other. No divider line - the official
   footer has none - just the gap below the columns. */
.wpc-footer-panel__zone--bottom {
    width: 100%;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.wpc-footer-panel__zone--bottom .wpc-text-box { padding: 0; }
.wpc-footer-panel__zone--bottom .wpc-text-box-body {
    color: var(--wpc-footer-text-color, var(--t-text));
    font-size: 1rem;
}
.wpc-footer-panel__zone--bottom .wpc-nav-links {
    justify-content: center;
}
.wpc-footer-panel__zone--bottom .wpc-nav-links a {
    padding: 0;
    color: var(--wpc-footer-text-color, var(--t-text));
    font-size: 0.875rem;
    font-weight: 400;
    /* underlined like the official footer's bottom links */
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.wpc-footer-panel__zone--bottom .wpc-nav-links a:hover {
    background: none;
    color: var(--t-primary);
}
/* breakpoint: below 1024px - brand block on top (centered), then the
   link columns in one row underneath */
@media (max-width: 1023px) {
    .wpc-footer-panel__zone--columns { flex-direction: column; }
    .wpc-footer-panel__zone--columns > .wpc-footer-brand {
        flex: 0 0 auto;
        align-self: center;
        align-items: center;
    }
    .wpc-footer-panel__zone--columns > .wpc-footer-brand
        .wpc-footer-brand__social {
        margin-top: 0;
    }
    .wpc-footer-panel__zone--columns > .wpc-footer-panel__anchor {
        flex: 0 0 auto;
        align-self: center;
        align-items: center;
        gap: 1.5rem;
    }
    .wpc-footer-panel__anchor .wpc-footer-social {
        justify-content: center;
    }
    /* the official footer insets the link columns another 16px here */
    .wpc-footer-panel__columns-group {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    /* Drops side_content_margin entirely below this breakpoint - see
       .wpc-footer-panel's own base rule above. */
    .wpc-footer-panel {
        padding-left: var(--wpc-footer-base-padding-left, 0px);
        padding-right: var(--wpc-footer-base-padding-right, 0px);
    }
}
/* breakpoint: narrow phones - the link columns stack too */
@media (max-width: 599px) {
    .wpc-footer-panel__columns-group {
        flex-direction: column;
        align-items: stretch;
    }
    .wpc-footer-panel__columns-group > .wpc-nav-links--vertical,
    .wpc-footer-panel__columns-group > .wpc-nav-links-group {
        flex: 0 0 auto;
    }
}

/* link_size / link_color props (wpc-nav-links.js). Deliberately AFTER
   the footer rules above: they have the same specificity as the footer
   columns' and bottom bar's own link size/color, so source order lets an
   explicitly set prop win over those defaults. Unset = no rule applies. */
.wpc-nav-links.wpc-nav-links--custom-size a {
    font-size: var(--wpc-links-size);
    line-height: 1.5;
}
.wpc-nav-links.wpc-nav-links--custom-color a {
    color: var(--wpc-links-color);
}

/* ── wpc-nav-account ─────────────────────────────────────── */
.wpc-nav-account {
    position: relative;
    display: flex;
    align-items: center;
}
.wpc-nav-account__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    /* icon_size/box_size props (wpc-nav-account.js); unset = the
       original 36px box, 22px icon, 28px avatar. */
    width: var(--wpc-nav-icon-box, 36px);
    height: var(--wpc-nav-icon-box, 36px);
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s;
}
.wpc-nav-account__trigger:hover {
    background: rgb(var(--t-primary-ch) / 0.08);
}
.wpc-nav-account__avatar {
    width: var(--wpc-nav-icon-size, 28px);
    height: var(--wpc-nav-icon-size, 28px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.wpc-nav-account__icon {
    width: var(--wpc-nav-icon-size, 22px);
    height: var(--wpc-nav-icon-size, 22px);
}
.wpc-nav-account__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
}
.wpc-nav-account__item {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: var(--t-primary);
    text-decoration: none;
    transition: background 0.12s;
}
.wpc-nav-account__item:hover {
    background: rgb(var(--t-primary-ch) / 0.06);
}

/* ── wpc-banner-double-col-image ─────────────────────────── */
/* The component's root is only the band that carries `background_color`
   (wpc-banner-double-col-image.js); the grid below sits inside it, in a
   `.wpc-content-layout` wrapper, and is what the component always was.
   `stretch_background`: same trick as .wpc-text-box--stretch - a huge
   box-shadow paints the colour out to the page edges without adding
   scrollable width, and the clip keeps it from spilling above and below. */
.wpc-banner-double-col-image-band--stretch {
    box-shadow: 0 0 0 100vmax var(--wpc-bdci-bg);
    clip-path: inset(0 -100vmax);
}
.wpc-banner-double-col-image {
    display: grid;
    /* `image_width` sets --wpc-bdci-img (a variable, not an inline column
       list, so the stacked and @media rules below still win). */
    grid-template-columns: 1fr var(--wpc-bdci-img, 260px);
    gap: 24px 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}
/* The 1100px cap above is the component's legacy width: it applies only while
   the placement is full width with no `content_layout`. A placement `layout`
   that caps the width (`.wpc-layout-capped`, public_page_renderer.js) or a
   `content_layout` (`--fills`) is the single source of the width instead: the
   grid fills it. (An inline `margin` of 0, which a saved margin prop emits,
   beat the auto centring and left the capped grid hugging the left side.) */
.wpc-layout-capped .wpc-banner-double-col-image,
.wpc-banner-double-col-image--fills {
    max-width: none;
}
.wpc-banner-double-col-image__content {
    grid-column: 1;
    grid-row: 1;
}
.wpc-banner-double-col-image__title {
    margin: 0 0 12px;
    color: var(--t-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.wpc-banner-double-col-image__subtitle {
    margin: 0 0 16px;
    color: var(--t-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}
.wpc-banner-double-col-image__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.wpc-banner-double-col-image__col {
    flex: 1 1 240px;
    margin: 0;
    color: var(--t-text);
    font-size: 0.9rem;
    line-height: 1.6;
    /* `text` is HTML now (t-rich-text.js via t-columns-editor.js),
       same treatment as .wpc-text-box-body's own comment: pre-wrap
       keeps a placement saved before this change (plain text, raw
       newlines, no tags) rendering its own line breaks correctly,
       without conflicting with the <p>/<ul>/<li> block spacing below
       for genuinely HTML content. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.wpc-banner-double-col-image__col p { margin: 0 0 1em; }
.wpc-banner-double-col-image__col p:last-child,
.wpc-banner-double-col-image__col div:last-child { margin-bottom: 0; }
.wpc-banner-double-col-image__img {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid var(--t-primary);
}
.wpc-banner-double-col-image__bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 24px 0 0;
    color: var(--t-text);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}
/* Stacked layout: driven by the component's OWN width via the
   --stacked class (wpc-banner-double-col-image.js `stack_below`,
   widthAwareMixin) - a placement narrowed by its layout/margins on a
   wide screen has to stack too, which no viewport query can see. The
   768px @media copy is only the first-paint fallback before the
   ResizeObserver has reported. */
.wpc-banner-double-col-image--stacked {
    grid-template-columns: 1fr;
}
.wpc-banner-double-col-image--stacked .wpc-banner-double-col-image__img {
    grid-column: 1;
    grid-row: 2;
    max-width: 240px;
    margin: 0 auto;
}
.wpc-banner-double-col-image--stacked .wpc-banner-double-col-image__bottom {
    grid-row: 3;
}
/* breakpoint: tablet (768px) */
@media (max-width: 768px) {
    .wpc-banner-double-col-image {
        grid-template-columns: 1fr;
    }
    .wpc-banner-double-col-image__img {
        grid-column: 1;
        grid-row: 2;
        max-width: 240px;
        margin: 0 auto;
    }
    .wpc-banner-double-col-image__bottom {
        grid-row: 3;
    }
}

/* ── wpc-card-image-icon-text ────────────────────────────── */
.wpc-card-image-icon-text {
    width: 100%;
    padding: 24px 24px 40px;
    box-sizing: border-box;
}
.wpc-card-image-icon-text__heading {
    margin: 0 0 24px;
    color: var(--t-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.wpc-card-image-icon-text__grid {
    display: flex;
    flex-wrap: wrap;
}
.wpc-card-image-icon-text__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .06);
    padding: 16px;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}
.wpc-card-image-icon-text__card:hover {
    box-shadow: 0 8px 20px rgb(0 0 0 / .1);
    transform: translateY(-2px);
}
.wpc-card-image-icon-text__external {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--t-secondary);
}
.wpc-card-image-icon-text__external svg {
    width: 16px;
    height: 16px;
}
.wpc-card-image-icon-text__media {
    position: relative;
    flex: 0 0 40%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--t-surface-alt);
}
.wpc-card-image-icon-text__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wpc-card-image-icon-text__icon {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--t-surface);
    box-shadow: 0 2px 6px rgb(0 0 0 / .18);
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}
.wpc-card-image-icon-text__text {
    flex: 1;
    color: var(--t-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ── wpc-card-grid ────────────────────────────────────────── */
.wpc-card-grid {
    width: 100%;
    box-sizing: border-box;
}
.wpc-card-grid__heading {
    margin: 0 0 24px;
    color: var(--t-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.wpc-card-grid__grid {
    display: grid;
}
.wpc-card-grid__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .06);
    padding: 20px;
    box-sizing: border-box;
}
.wpc-card-grid__eyebrow {
    color: var(--t-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.wpc-card-grid__person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wpc-card-grid__avatar {
    /* width/height/border-radius come from the component's own
       avatar_size/avatar_shape props (inline style) */
    object-fit: cover;
    flex-shrink: 0;
}
.wpc-card-grid__person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wpc-card-grid__role {
    color: var(--t-text);
    font-size: 0.8rem;
    font-weight: 600;
}
.wpc-card-grid__name {
    color: var(--t-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}
.wpc-card-grid__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background: var(--t-border);
}
.wpc-card-grid__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.wpc-card-grid__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t-text);
    font-size: 0.85rem;
}
.wpc-card-grid__meta-icon {
    color: var(--t-secondary);
    /* font-size comes from the component's own icon_size prop
       (inline style) */
}
.wpc-card-grid__phones {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wpc-card-grid__phone-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--t-text);
    font-size: 0.85rem;
}
.wpc-card-grid__phone-icon {
    color: var(--t-secondary);
    /* font-size comes from the component's own icon_size prop
       (inline style) */
}
.wpc-card-grid__phone-label {
    font-weight: 600;
}
.wpc-card-grid__email {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--t-primary);
    font-size: 0.85rem;
    text-decoration: none;
}
.wpc-card-grid__email:hover {
    text-decoration: underline;
}
.wpc-card-grid__email-icon {
    color: var(--t-secondary);
    /* font-size comes from the component's own icon_size prop
       (inline style) */
}
.wpc-card-grid__more-link {
    color: var(--t-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.wpc-card-grid__more-link:hover {
    text-decoration: underline;
}

/* ── wpc-buttons-with-text ───────────────────────────────── */
/* Colours, radius, text size and the per-button width reach this block as
   `--wbt-*` custom properties set by wpc-buttons-with-text.js (from its
   props), so only the fallbacks below live here. The layout reacts to the
   width the component got (container queries), not to the viewport. */
.wpc-buttons-with-text {
    box-sizing: border-box;
    width: 100%;
}
.wpc-buttons-with-text__title {
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #374151;
}
.wpc-buttons-with-text__title--spaced { margin-bottom: 48px; }
.wpc-buttons-with-text__wrap {
    container-type: inline-size;
    container-name: wbt;
    display: flex;
    width: 100%;
}
.wpc-buttons-with-text__grid {
    display: flex;
    flex-direction: column;
    row-gap: 33px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wpc-buttons-with-text__grid--narrow { display: none; }
.wpc-buttons-with-text__row {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 17px;
    width: 100%;
}
.wpc-buttons-with-text__btn {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* Its own width, shrinking proportionally when the row does not fit. */
    flex: 0 1 var(--wbt-w, 300px);
    width: var(--wbt-w, 300px);
    min-width: var(--wbt-min-w, 0);
    min-height: 47px;
    padding: 9px 28px;
    border: 1px solid var(--wbt-border, #111928);
    border-radius: var(--wbt-radius, 999px);
    background: var(--wbt-fill, #fff);
    color: var(--wbt-text, #6b7280);
    font-family: inherit;
    font-size: var(--wbt-font, 18px);
    line-height: 1.5;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    overflow-wrap: break-word;
    transition: background-color .2s, border-color .2s, color .2s;
}
.wpc-buttons-with-text__btn--compact { padding: 9px 16px; }
.wpc-buttons-with-text__btn:hover,
.wpc-buttons-with-text__btn:focus-visible {
    background-color: var(--wbt-hover-bg, #eceff5);
    color: var(--wbt-hover-text, #193782);
}
.wpc-buttons-with-text__btn:focus-visible {
    outline: 2px solid var(--wbt-hover-text, #193782);
    outline-offset: 2px;
}
.wpc-buttons-with-text__desc {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
}
.wpc-buttons-with-text__desc--spaced { margin-top: 44px; }
.wpc-buttons-with-text__desc p { margin: 0 0 .75em; }
.wpc-buttons-with-text__desc > :last-child { margin-bottom: 0; }
.wpc-buttons-with-text__desc ul,
.wpc-buttons-with-text__desc ol { margin: 0 0 .75em; padding-left: 1.4em; }
.wpc-buttons-with-text__desc a { color: inherit; text-decoration: underline; }
/* 3-4 columns: below ~1060px the wide grid gives way to 2 buttons per row. */
@container wbt (max-width: 1059px) {
    .wpc-buttons-with-text__grid--wide[data-cols="3"],
    .wpc-buttons-with-text__grid--wide[data-cols="4"] { display: none; }
    .wpc-buttons-with-text__grid--narrow { display: flex; }
}
/* Narrow: one full-width button per line, whatever its size. */
@container wbt (max-width: 559px) {
    .wpc-buttons-with-text__row { flex-wrap: wrap; row-gap: 16px; }
    .wpc-buttons-with-text__row > .wpc-buttons-with-text__btn {
        width: 100%;
        flex-basis: 100%;
    }
    .wpc-buttons-with-text__grid { row-gap: 16px; }
}

/* ── wpc-tabs ────────────────────────────────────────────── */
/* The tab bar and panel are `t-tabs` (traki_uicomponent base.css); this is
   only the content area, whose first and last component keep their own
   spacing. */
.wpc-tabs { width: 100%; }
.wpc-tabs__content { min-height: 1px; }
.wpc-tabs__state {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--t-secondary);
}
.wpc-tabs__state--error { color: var(--t-error); }
.wpc-tabs__retry {
    margin-left: 8px;
    padding: 2px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--t-primary);
    background: transparent;
    border: 1px solid var(--t-primary);
    border-radius: 4px;
    cursor: pointer;
}