/* ==========================================================================
   urb-components.css — the brand compile: stamps, cards, header, drawer,
   footer, forms. Owner: the design reviewer. ONE compile, approved by Arnas
   on one page; from then on pages assemble these — only components carry
   the brand. Brand authority: urbanessentials-brand-book.html (v2).
   2026-08-16.
   ========================================================================== */

/* ---- buttons — the stamp system (bold, never quiet) ----------------------- */
.urb-btn {
  display: inline-block;
  font-family: var(--urb-font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 14px;
  line-height: 1;
  padding: 18px 36px;
  border: var(--urb-border-bold) solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.urb-btn:active { transform: translate(1px, 2px); } /* the stamp press */

/* on paper — every colour rule carries the body prefix: the base
   `body.theme--urb a` (0,1,1) would beat a bare class (0,1,0) — scar family */
body.theme--urb .urb-btn--primary { background: var(--urb-purple); color: #fff; border-color: var(--urb-purple); }
body.theme--urb .urb-btn--primary:hover { background: var(--urb-purple-deep); border-color: var(--urb-purple-deep); color: #fff; }
/* secondary on paper: 2px solid border — no ghost hairlines on this site */
body.theme--urb .urb-btn--ghost, /* alias if a template ever emits it */
body.theme--urb .urb-btn--secondary { background: transparent; color: var(--urb-purple); border-color: var(--urb-purple); }
body.theme--urb .urb-btn--ghost:hover,
body.theme--urb .urb-btn--secondary:hover { background: var(--urb-purple); color: #fff; }

/* on purple — inversion, never a second hue */
body.theme--urb .urb-btn--invert { background: #fff; color: var(--urb-purple); border-color: #fff; }
body.theme--urb .urb-btn--invert:hover { background: transparent; color: #fff; border-color: #fff; }
body.theme--urb .urb-btn--invert-ghost { background: transparent; color: #fff; border-color: #fff; }
body.theme--urb .urb-btn--invert-ghost:hover { background: #fff; color: var(--urb-purple); }

/* ---- header + nav --------------------------------------------------------- */
.urb-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--urb-paper);
  border-bottom: 1px solid var(--urb-line);
}
.urb-header__inner {
  display: flex; align-items: center; gap: 26px;
  min-height: 72px;
}
.urb-logo { display: inline-flex; align-items: center; flex: none; }
body.theme--urb .urb-logo__img { height: 34px; width: auto; } /* body prefix: outranks the base img{height:auto} */

.urb-nav { margin-left: auto; }
/* PREFIXED — `body.theme--urb ul { margin: 0 0 1em; padding-left: 1.2em }` is
   (0,1,1) and beat every bare list reset in this theme, so EVERY list was
   silently indented ~19px and carried a bottom margin it never asked for.
   Arnas spotted the symptom in the drawer: the LT/EN row and the socials did
   not line up (2026-08-16). Scar #1, sixth instance. If you add a list
   component, prefix its reset. */
body.theme--urb .urb-nav__list {
  display: flex; gap: 26px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
body.theme--urb .urb-nav__list a {
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: 12.5px; color: var(--urb-ink);
  padding: 6px 0;
  box-shadow: inset 0 -3px 0 0 transparent;
  transition: box-shadow .15s, color .15s;
}
.urb-nav__list a:hover,
.urb-nav__list .current-menu-item > a,
.urb-nav__list .current_page_item > a {
  color: var(--urb-purple);
  box-shadow: inset 0 -3px 0 0 var(--urb-purple); /* 3px bar, not a 1px line */
}

.urb-header__tools { display: flex; align-items: center; gap: 18px; }
/* .urb-header__cta (singular) retired 2026-08-20 — P9a's .urb-header__ctas pair
   replaced it; sizing for the pair lives in the HERO v2 block. */

/* language switcher (Polylang emits li.lang-item) */
body.theme--urb .urb-lang__list,
body.theme--urb .urb-drawer__lang-list {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
}
.urb-lang__list a,
.urb-drawer__lang-list a {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: 11.5px; padding: 5px 8px; color: var(--urb-grey);
  border: 1px solid transparent;
}
.urb-lang__list .current-lang > a { color: var(--urb-purple); border-color: var(--urb-purple); }
.urb-lang__list a:hover { color: var(--urb-purple); }

/* In the DRAWER the same switcher sits on deep purple, and at 11.5px in grey
   it was effectively invisible on a phone — Arnas reported "no LT/EN switch"
   when it was there all along (v0.7.4). Give it the same bordered-stamp
   treatment the header has, in white, at a 44px touch height. */
.urb-drawer__lang-list { gap: 8px; }
body.theme--urb .urb-drawer__lang-list a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px;
  font-size: 13px;
  padding: 0 12px;
  color: #fff;
  border: var(--urb-border-bold) solid rgba(255, 255, 255, .45);
}
body.theme--urb .urb-drawer__lang-list .current-lang > a {
  color: var(--urb-purple);
  background: #fff;
  border-color: #fff;
}

/* burger — three bars: it IS the tag */
.urb-nav-toggle {
  display: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
  margin-left: 4px;
}
.urb-nav-toggle__box { display: block; width: 26px; }
.urb-nav-toggle__bar {
  display: block; height: 3.5px; background: var(--urb-purple);
  margin: 4px 0; width: 100%;
}
.urb-nav-toggle__bar:nth-child(2) { width: 72%; } /* the ≡ silhouette */

@media (max-width: 900px) {
  /* `.urb-header .urb-lang` used to hide the DRAWER's switcher too, because the
     drawer markup lives inside <header> — which is why Arnas saw no LT/EN on
     his phone (v0.7.4). Hide only the bar's own copy, never the drawer's. */
  .urb-nav, .urb-header__inner .urb-lang { display: none; }
  /* `.urb-header__cta` (singular) removed 2026-08-20 — P9a replaced it with the
     .urb-header__ctas pair, so nothing emits that class any more. The pair is
     hidden by the rule in the HERO v2 block instead. */
  .urb-nav-toggle { display: inline-block; }
  /* The burger was landing next to the logo instead of at the right edge
     (v0.7.6). The only thing pushing the header bar's right-hand group over is
     `.urb-nav { margin-left: auto }` — and .urb-nav is display:none here, so
     the auto margin vanished with it and the tools collapsed back against the
     logo. Give the tools their own auto margin at this width. */
  .urb-header__tools { margin-left: auto; }
}

/* ---- drawer — purple panel, one scroll column ----------------------------- */
/* z-index 40 — BELOW the header's 50, and that is the whole point (v0.7.4).
   The drawer markup lives INSIDE <header>, and `.urb-header` is
   position:sticky with z-index:50, so it opens its own stacking context: the
   drawer's z-index:95 is scoped INSIDE the header and the entire header —
   drawer included — stacks at 50. With the overlay at 90 (a sibling of the
   header, in the root context) the veil painted OVER the drawer. That single
   mistake caused all three symptoms Arnas reported from his phone: the nav
   links did nothing (the overlay swallowed every tap), the text looked "too
   dark" (white under a 50% black veil reads grey), and the LT/EN switch
   looked missing. Do not raise this above 50 again without also moving the
   drawer out of the header. */
.urb-drawer-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 27, 30, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s;
}
.urb-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.urb-drawer {
  position: fixed; top: 0; right: 0; z-index: 95;
  width: min(86vw, 380px);
  height: 100vh; height: 100dvh;
  background: var(--urb-purple);
  color: #fff;
  transform: translateX(102%);
  transition: transform .28s;
  visibility: hidden; /* off-screen fixed panels must leave the pannable region */
  display: flex; flex-direction: column;
}
.urb-drawer.is-open { transform: translateX(0); visibility: visible; }
.urb-drawer[hidden] { display: flex; } /* JS drives; keep layout stable */

/* Pages at the top; LT/EN + socials pushed to the BOTTOM as one left-aligned
   group (Arnas, 2026-08-16). A flex COLUMN with `margin-top:auto` on the
   chrome — deliberately NOT grid rows, which is what whatajazz scar #24 was
   about (grid rows in a scroll container collapse and the panel stops
   scrolling). Flex column keeps normal block flow for the children, and when
   the content is taller than the panel the auto margin resolves to 0 and it
   scrolls exactly as before. Verified at 390×844 AND 844×390. */
.urb-drawer__scroll {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  /* the drawer is FIXED to the right edge, so with viewport-fit=cover it needs
     its own safe-area padding: the notch side in landscape, and the home
     indicator at the bottom (v0.7.7) */
  padding: 18px max(22px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) 22px;
  display: flex; flex-direction: column;
}
.urb-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--urb-line-w);
}
body.theme--urb .urb-drawer__logo-img { height: 30px; width: auto; }
.urb-drawer__close {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 30px; line-height: 1; padding: 6px 10px;
}

/* nav links = the main event */
body.theme--urb .urb-drawer__list { list-style: none; margin: 0; padding: 0; }
body.theme--urb .urb-drawer__list a {
  display: block; color: #fff;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: 19px; padding: 11px 0;
}
.urb-drawer__list a:hover { color: rgba(255, 255, 255, .75); }
.urb-drawer__list .sub-menu {
  list-style: none; padding-left: 16px; margin: 0 0 6px;
}
.urb-drawer__list .sub-menu a { font-size: 15px; font-weight: 700; padding: 7px 0; }
.urb-drawer__caret { background: none; border: 0; color: #fff; padding: 6px 10px; cursor: pointer; }

/* chrome steps back */
/* margin-top:auto = the group sits at the bottom of the panel when the menu is
   short, and behaves like a normal 18px gap when it is long enough to scroll */
.urb-drawer__chrome {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--urb-line-w);
}
/* a little air above the divider so the group never touches the last link */
.urb-drawer__nav { margin-bottom: 18px; }

/* THE CTA PAIR, directly under the pages (Arnas, 2026-08-22).
   It used to be one button sitting in __chrome at the very bottom, above the
   language switcher. Arnas wants both CTAs high — under the nav, where a thumb
   arrives after reading the pages — and the bottom left for LT/EN and socials
   alone. __chrome keeps `margin-top:auto`, so those still pin to the floor.

   FULL WIDTH, STACKED. Two buttons at their natural text widths sit ragged
   against each other; full width also doubles the tap target on the surface
   where every visitor is using a thumb.

   NOT A DUPLICATE OF THE BAR, measured: the drawer is min(86vw,380px) and at
   390px it spans x 55→390, while the bar's Bilietai sits at x 280→370 — fully
   underneath it. The two are never on screen together, which is what makes
   repeating Bilietai here honest rather than noisy. */
.urb-drawer__ctas { display: grid; gap: 10px; margin-bottom: 24px; }
.urb-drawer__ctas .urb-btn { width: 100%; text-align: center; }
.urb-drawer__lang { margin-bottom: 14px; }
body.theme--urb .urb-drawer__lang-list a { color: rgba(255, 255, 255, .8); }
.urb-drawer__lang-list .current-lang > a { color: #fff; border-color: #fff; }
.urb-drawer__social { display: flex; gap: 10px; }

/* ---- hero (moved here from urb-front.css in v0.6.1) ------------------------
   Every template that can carry a hero — front-page.php, page.php, single.php,
   single-urb_event.php, page-programa.php — needs these rules, and urb-front
   only loads on the front page. While they lived there, urb_page_hero_bg()'s
   .urb-hero__bg span rendered as a 0×0 inline element and the featured-image
   cover silently did not exist anywhere but the home page. */
.urb-hero {
  position: relative;
  display: flex; align-items: center;
  background: var(--urb-purple);
  color: #fff;
  overflow: hidden;
}
.urb-hero--flagship { min-height: var(--urb-hero-flagship); }

/* THE DOUBLE PADDING (found 2026-08-21). A hero is BOTH `.urb-band` and
   `.urb-hero`, so it was taking `.urb-band { padding: 96px 0 }` on the section
   AND `.urb-hero__content { padding: 76px 0 }` on the flex item inside it —
   344px of air before a single word of content, and then whatever the template
   happened to put in the stack pushed the band taller still. That is why four
   sibling pages had four different hero heights.
   The band padding goes; the content box owns its own air; `min-height` is
   then the only thing setting the height, so every small hero matches.
   `.urb-hero--small` is (0,1,0) exactly as `.urb-band` is, and this sheet
   loads after urb-main.css — the tie breaks on source order, as intended. */
.urb-hero--small {
  min-height: var(--urb-hero-small);
  padding-top: 0; padding-bottom: 0;
}
/* (0,2,0), so it beats both `.urb-hero__content` below and urb-front.css's
   phone override — which, note, only ever loaded on the front page anyway. */
.urb-hero--small .urb-hero__content { padding-top: 30px; padding-bottom: 30px; }

/* The last thing in the stack must not push the band open with its own margin:
   `.urb-hero__meta` carries `margin-bottom: 36px` for the button that follows
   it on the flagship, and on /programa there is no button. (0,2,1) beats
   `body.theme--urb p { margin: 0 0 1em }` at (0,1,1) — scar #1, tenth sighting,
   and this time it is fixed pre-emptively rather than after Arnas spots it. */
body.theme--urb .urb-hero__content > :last-child { margin-bottom: 0; }

/* grain on the hero ground (band policy) */
.urb-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../img/urb-texture.png');
  background-size: 560px;
  opacity: .09;
  pointer-events: none;
}

/* photo / video mode */
.urb-hero__media { position: absolute; inset: 0; }
/* PREFIXED, and it is load-bearing (v0.7.4): `body.theme--urb img { height:
   auto }` is (0,1,1) and beat the bare (0,1,0) class, so the hero photo
   rendered at its natural aspect ratio instead of filling the band. On a wide
   desktop a 3:2 photo at width:100% is taller than the hero anyway, so it
   *looked* fine; on a 390px phone it covered only the top ~260px and the rest
   of the hero was flat purple. Arnas caught it on his phone. Scar #1 again. */
body.theme--urb .urb-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* __bg is a <span> carrying an inline background-image, not an <img>: it needs
   to be laid out explicitly or it collapses to nothing (the v0.6.0 bug). */
.urb-hero__bg {
  position: absolute; inset: 0;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.urb-hero__scrim {
  position: absolute; inset: 0;
  /* darkened a step 2026-08-16 at Arnas's request — was .55 → .30. Deep
     Purple, never black. */
  background: linear-gradient(rgba(74, 31, 94, .68), rgba(74, 31, 94, .44));
}
/* A photo hero carries left-aligned white text over whatever the photographer
   happened to shoot. The flat scrim above is not enough on a bright frame, so
   the photo variant adds a horizontal ramp that is heaviest exactly where the
   text sits. Deep Purple, never black. */
.urb-hero--photo .urb-hero__scrim {
  background:
    linear-gradient(90deg, rgba(74, 31, 94, .86) 0%, rgba(74, 31, 94, .62) 42%, rgba(74, 31, 94, .34) 100%),
    linear-gradient(rgba(74, 31, 94, .30), rgba(74, 31, 94, .30));
}

.urb-hero__content {
  position: relative; z-index: 3;
  /* more air, desktop and phone alike (Arnas, 2026-08-16: the date/title/meta/
     button stack read tight on a phone, and the desktop wanted it too) */
  padding-top: 76px; padding-bottom: 76px;
  width: 100%;
}

/* the date display — Varp image when supplied (Route A), Oswald live text */
body.theme--urb .urb-hero__date { margin: 0 0 20px; }
.urb-hero__date--text {
  font-family: var(--urb-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .95;
  font-size: clamp(44px, 8.5vw, 104px);
}
.urb-hero__date-img { max-width: min(560px, 82vw); height: auto; }

body.theme--urb .urb-hero__title {
  font-size: clamp(30px, 4.4vw, 50px);
  /* All caps, every hero (Arnas, 2026-08-21) — matches the intro band on the
     front page, the nav, the buttons and the mono meta lines. The negative
     tracking that suited mixed-case Oswald goes with it: caps at this size
     need the counters left alone, so it sits at 0. */
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: .38em;
}
body.theme--urb .urb-hero__meta {
  font-family: var(--urb-font-tech);
  font-size: clamp(12px, 1.4vw, 14.5px);
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 36px;
}
.urb-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.urb-hero .urb-whisper { color: rgba(255, 255, 255, .85); }

/* ---- cards ---------------------------------------------------------------- */
/* SCAR #1, twice over (measured 2026-08-16, v0.6.1). Every horizontal inset in
   this block MUST carry the body.theme--urb prefix: `body.theme--urb h3` and
   `body.theme--urb p` in urb-main are (0,1,1) and silently beat a bare
   (0,1,0) component class, so `.urb-card__title { margin: 6px 20px 8px }` was
   rendering as `0 0 .45em` and every card's text sat flush against its own
   border. The front-page event cards escaped only because their rules are
   two-class (0,2,0). Do not un-prefix these. */
.urb-card {
  background: var(--urb-white);
  border: 1px solid var(--urb-line-strong, rgba(28, 27, 30, .22));
  display: flex; flex-direction: column;
  min-width: 0;
  transition: border-color .15s;
}
.urb-card:hover { border-color: var(--urb-purple); }
.urb-band--purple .urb-card { border-color: transparent; }
.urb-band--purple .urb-card:hover { border-color: transparent; }
.urb-card__media { margin: 0; }
.urb-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
body.theme--urb .urb-card > .urb-meta { margin: 0; padding: 18px 20px 0; }
body.theme--urb .urb-card__title {
  font-size: 17px; margin: 8px 20px 10px; line-height: 1.25;
}
.urb-card__title a { color: inherit; }
.urb-card__title a:hover { color: var(--urb-purple); }
body.theme--urb .urb-card__excerpt {
  font-size: 14px; margin: 0 20px 18px; color: var(--urb-grey);
}
/* ---- card tag stamps (P6.5 contract, v0.6.3) --------------------------------
   The event card's old single `date · time · type` meta line is gone; the
   template now emits discrete stamps so type and date read as separate facts,
   the way malmodanceweek.se does it — but with this site's ≡ mark instead of
   their icon set. News cards still emit `.urb-meta`; both live here. */
.urb-card__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px 20px 0;
}
.urb-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--urb-font-tech);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
body.theme--urb .urb-tag--type {
  color: var(--urb-purple);
  background: rgba(102, 43, 130, .08);
  border-color: rgba(102, 43, 130, .28);
}
body.theme--urb .urb-tag--when {
  color: var(--urb-grey);
  background: transparent;
  border-color: var(--urb-line-strong);
}
/* the ≡ mark inside a tag: small, and it must NOT take the purple band's white
   — `.urb-band--purple .urb-bars { color:#fff }` (0,2,0) would paint it white
   on a white card, the same trap that hid the meta line in v0.6.0 */
body.theme--urb .urb-tag .urb-bars { color: inherit; }
.urb-bars--tag { width: 13px; height: 9px; flex: none; vertical-align: 0; }
.urb-bars--tag svg { width: 100%; height: 100%; display: block; }

/* ---- the card's call to action ----------------------------------------------
   Two implementations of one look, on purpose and temporarily: event cards now
   emit a real `.urb-btn urb-btn--ghost urb-card__cta`, news cards still emit
   `.urb-arrow-link`. Keep the two blocks visually identical (padding, size)
   until the news card is converted too — then delete the second one. */
body.theme--urb .urb-card__cta {
  margin: auto 20px 20px;
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 18px;
  font-size: 13px;
}
body.theme--urb .urb-card__cta:active { transform: translateY(1px); }

/* news cards — the interim ghost stamp on the arrow link (see above) */
body.theme--urb .urb-card .urb-arrow-link {
  margin: auto 20px 20px;
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  border: var(--urb-border-bold) solid var(--urb-purple);
  color: var(--urb-purple);
  background: transparent;
  transition: background-color .15s, color .15s, transform .05s;
}
body.theme--urb .urb-card .urb-arrow-link:hover {
  background: var(--urb-purple); color: #fff;
}
body.theme--urb .urb-card .urb-arrow-link:active { transform: translateY(1px); }

/* A white card on the purple band inherits the band's white ink — which made
   the meta line and the CTA invisible on the front page (measured contrast
   1.00:1 against #fff). Re-ink every child that the band recoloured. */
body.theme--urb .urb-band--purple .urb-card .urb-meta { color: var(--urb-grey); }
body.theme--urb .urb-band--purple .urb-card .urb-arrow-link { color: var(--urb-purple); }
body.theme--urb .urb-band--purple .urb-card .urb-arrow-link:hover { color: var(--urb-purple-deep); }

/* ---- team: the faces (P7 contract, v0.6.9) ----------------------------------
   Approved from urb-team-mockup.html, 2026-08-16: five or six portraits with
   photos, then everyone else as a credits block. Square crop — the geometry of
   this site is flat and square everywhere else, and a row of circles would be
   the one rounded thing on the page. */
.urb-people {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.urb-person { min-width: 0; }
.urb-person__media { display: block; margin: 0 0 14px; background: var(--urb-paper); }
/* A row that mixes photographed and photo-less people: without this, the
   photo-less card's name sits at the top of the row while its neighbours'
   names sit under their images, and the row reads as broken (Claude Code
   raised it in the v0.7.0 report; answering it in CSS is the right seat).
   The spacer is TRANSPARENT on purpose — the names line up, and no empty grey
   box appears pretending to be a missing photograph, which the brief forbids.
   `:has()` degrades silently to today's behaviour on anything that lacks it. */
.urb-person:not(:has(.urb-person__media))::before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
}
/* prefixed: `body.theme--urb img { height: auto }` (0,1,1) would beat a bare
   class and undo the square crop — scar #1 */
body.theme--urb .urb-person__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; height: auto;
  filter: grayscale(1);
  transition: filter .2s;
}
.urb-person:hover .urb-person__img { filter: none; }
body.theme--urb .urb-person__name {
  font-size: 17px; margin: 0 0 4px; line-height: 1.2; color: var(--urb-ink);
}
body.theme--urb .urb-person__role {
  font-family: var(--urb-font-tech);
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--urb-grey); margin: 0 0 10px;
}
/* The glyph stays 18px; the TAP TARGET is 44×44. Measured at 390×844 these
   links were 18×18 — under the 24×24 WCAG 2.5.8 minimum and a genuine miss on
   a phone. The row is pulled left by 13px so the first icon still optically
   aligns with the name above it, and the visible spacing is unchanged. */
body.theme--urb .urb-person__links {
  display: flex; gap: 0;
  margin: -8px 0 0 -13px;
}
body.theme--urb .urb-person__links a {
  color: var(--urb-purple);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
body.theme--urb .urb-person__links a:hover { color: var(--urb-purple-deep); }
.urb-person__links svg { width: 18px; height: 18px; }

/* ---- team: the credits block ------------------------------------------------
   Role label + one name per row. This is a festival poster's credit column,
   which is why it belongs here rather than as more photo cards: it scales to
   any number of names without ever competing with the faces. */
.urb-credits { margin-top: 64px; }
.urb-credits__grid {
  display: grid; gap: 34px 36px;
  /* 200px floor so four groups land on ONE row at desktop width — a lone
     fourth column wrapping by itself reads like an afterthought */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.urb-credits__group { min-width: 0; }
body.theme--urb .urb-credits__label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--urb-font-ui);
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; color: var(--urb-purple);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--urb-purple);
}
body.theme--urb .urb-credits__list { list-style: none; margin: 0; padding: 0; }
.urb-credits__list li {
  font-family: var(--urb-font-ui);
  font-size: 15px; font-weight: 600; color: var(--urb-ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--urb-line);
}
.urb-credits__list li:last-child { border-bottom: none; }

/* ---- partners (moved here from urb-front.css in v0.6.9) --------------------- */
/* This band uses a bare centred title rather than `.urb-band__head`, so it
   never inherited that block's 34px gap and the logos crowded the heading
   (Arnas, 2026-08-16). Prefixed: `body.theme--urb h2` would win otherwise. */
body.theme--urb .urb-partners .urb-band__title { margin-bottom: 40px; }
.urb-partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.urb-partners__grid a,
.urb-partners__grid .urb-partner {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--urb-line);
  min-height: 92px; padding: 18px;
}
.urb-partners__grid img {
  max-height: 52px; width: auto; max-width: 100%;
  filter: grayscale(1); opacity: .75;
  transition: filter .15s, opacity .15s;
}
.urb-partners__grid a:hover img { filter: none; opacity: 1; }

/* A touch screen has no hover, so grayscale-until-hover is grayscale forever on
   a phone. Give touch devices the colour outright.
   PARTNERS ARE THE EXCEPTION (Arnas, 2026-08-22): a wall of full-colour partner
   logos on a phone is the loudest thing on the page and pulls the eye straight
   past the festival's own content. He asked for the desktop RESTING state on
   touch instead — grey at .75 — so the strip reads as a credit line rather than
   an advertising block. Team photos keep the colour: a face in greyscale on a
   phone reads as archive material, which is the opposite of what /apie wants. */
@media (hover: none) {
  body.theme--urb .urb-person__img { filter: none; }
}

@media (max-width: 640px) {
  .urb-people { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .urb-credits { margin-top: 44px; }
}

/* ---- video facade (PORT of the whatajazz pattern, v0.7.3) -------------------
   Component-menu row "Video facades": youtube-nocookie, zero requests before
   click. Donor: whatajazz page-stonykla.php / page-atvykimas.php.
   Nothing from YouTube loads until the visitor presses play — which is not
   only fast, it is why this needs no cookie-consent gate at all. Complianz
   would otherwise replace a bare <iframe> with a "accept cookies to view"
   placeholder, and a hero-adjacent promo video behind a banner is no video.
   Works on both grounds: white/paper band and the purple band. */
.urb-video { max-width: 1000px; margin: 0 auto; }
.urb-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--urb-ink);
  overflow: hidden;
}
/* the facade is a real <button>, so it is keyboard-reachable for free */
.urb-video__facade {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; background: none;
  cursor: pointer;
}
body.theme--urb .urb-video__poster {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.82);
  transition: filter .2s;
}
.urb-video__facade:hover .urb-video__poster,
.urb-video__facade:focus-visible .urb-video__poster { filter: none; }
/* the play mark is a stamp, square like every other control on this site */
.urb-video__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px;
  border: var(--urb-border-bold) solid #fff;
  background: rgba(28, 27, 30, .35);
  color: #fff;
  transition: background-color .15s, color .15s;
}
.urb-video__facade:hover .urb-video__play,
.urb-video__facade:focus-visible .urb-video__play {
  background: var(--urb-purple); border-color: var(--urb-purple); color: #fff;
}
.urb-video__play svg { width: 26px; height: 26px; }
.urb-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a caption line under the frame, if the template supplies one */
body.theme--urb .urb-video__note {
  font-family: var(--urb-font-tech);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--urb-grey); margin: 12px 0 0;
}
/* prefixed, or the (0,2,1) rule above wins and the caption stays grey on
   purple — scar #1 caught in this very block by rendering it */
body.theme--urb .urb-band--purple .urb-video__note { color: rgba(255, 255, 255, .75); }

@media (max-width: 640px) {
  .urb-video__play { width: 58px; height: 58px; }
  .urb-video__play svg { width: 20px; height: 20px; }
}
/* landscape phone: the frame must not eat the whole screen */
@media (max-width: 960px) and (max-height: 520px) {
  .urb-video { max-width: min(100%, 76vh * 16 / 9); }
}

/* ---- footer — the purple band --------------------------------------------- */
.urb-footer { color: #fff; }
.urb-footer__inner { padding-top: 8px; }

.urb-footer__news { max-width: 560px; margin-bottom: 44px; }
.urb-footer__news-title { font-size: clamp(22px, 3vw, 30px); margin-bottom: .2em; }
.urb-footer__news-sub { color: rgba(255, 255, 255, .8); font-size: 14px; }

.urb-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  padding-top: 34px;
  border-top: 1px solid var(--urb-line-w);
}
.urb-footer__col-title {
  font-family: var(--urb-font-tech);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 14px;
}
body.theme--urb .urb-footer__logo-img { height: 34px; width: auto; margin-bottom: 14px; }
.urb-footer__meta { font-size: 13px; color: rgba(255, 255, 255, .75); max-width: 34ch; }
body.theme--urb .urb-footer__menu { list-style: none; margin: 0; padding: 0; }
body.theme--urb .urb-footer__menu a {
  display: inline-block; color: #fff; font-weight: 700; font-size: 14px;
  padding: 5px 0;
}
body.theme--urb .urb-footer__menu a:hover { color: rgba(255, 255, 255, .75); }
.urb-footer__social { display: flex; gap: 10px; }

.urb-footer__bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid var(--urb-line-w);
  font-size: 12.5px; color: rgba(255, 255, 255, .65);
}
body.theme--urb .urb-footer__bottom a { color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
  .urb-footer__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- social icons — squares, currentColor --------------------------------- */
body.theme--urb .urb-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
body.theme--urb .urb-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--urb-line-w);
  color: #fff; border-radius: 0;
  transition: background-color .15s, color .15s;
}
body.theme--urb .urb-social__link:hover { background: #fff; color: var(--urb-purple); }
.urb-social__link svg { width: 20px; height: 20px; }
/* on paper grounds (e.g. team cards later) */
body.theme--urb .urb-band--paper .urb-social__link,
body.theme--urb .urb-band--white .urb-social__link { border-color: var(--urb-line); color: var(--urb-ink); }
body.theme--urb .urb-band--paper .urb-social__link:hover,
body.theme--urb .urb-band--white .urb-social__link:hover { background: var(--urb-purple); color: #fff; border-color: var(--urb-purple); }

/* ---- newsletter (inert until Phase 8) ------------------------------------- */
.urb-news-form { display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; }
.urb-news-form__input {
  flex: 1 1 220px;
  font-family: var(--urb-font-ui); font-size: 15px;
  padding: 15px 16px;
  background: #fff; color: var(--urb-ink);
  border: var(--urb-border-bold) solid #fff; border-radius: 0;
}
.urb-news-form__submit { flex: none; }
.urb-news-form--inert .urb-news-form__input,
.urb-news-form--inert .urb-news-form__submit { opacity: .55; cursor: not-allowed; }
.urb-news-form__note {
  flex-basis: 100%;
  font-family: var(--urb-font-tech);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .65); margin-top: 4px;
}
/* Phase 8 will add the real <form> — and .urb-hp: the honeypot hide rule is
   non-negotiable and lives HERE the moment the form exists: */
.urb-hp { position: absolute !important; left: -9999px !important; opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTRATION FORM — Phase 8
   Pre-shipped for the Claude Code build. Lives HERE, not in a page sheet,
   because the form renders on BOTH the event single and /registracija/ — the
   component-layer rule, learned from the hero (which cost three phases by
   living in urb-front.css and computing 0×0 everywhere else).

   Specificity: every rule that sets margin/colour/size on p / a / h* / ul is
   prefixed `body.theme--urb`, because urb-main.css's base rules are (0,1,1)
   and would otherwise beat a bare component class at (0,1,0). Sixth-scar rule.
   ═══════════════════════════════════════════════════════════════════════════ */

.urb-reg { scroll-margin-top: 78px; }              /* the #registracija jump clears the sticky header */

body.theme--urb .urb-reg__lead { max-width: 62ch; margin: 0 0 30px; color: var(--urb-grey); }
body.theme--urb .urb-reg__info,
body.theme--urb .urb-reg__closed {
  max-width: 62ch; margin: 0; padding: 20px 22px;
  border: 2px solid var(--urb-line-strong); background: #fff;
}
body.theme--urb .urb-band--purple .urb-reg__info,
body.theme--urb .urb-band--purple .urb-reg__closed { background: transparent; border-color: #fff; color: #fff; }

.urb-reg__form {
  display: grid; grid-template-columns: 1fr; gap: 0 14px;
  max-width: 660px;
}

/* ── fields ─────────────────────────────────────────────────────────────── */

.urb-field { margin-bottom: 22px; }

body.theme--urb .urb-field__label {
  display: block; margin-bottom: 7px;
  font-family: var(--urb-font-tech); font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--urb-ink);
}
.urb-field__req { color: var(--urb-purple); }

.urb-field__input,
.urb-field__select {
  display: block; width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 16px; line-height: 1.4;   /* 16px: iOS zooms anything smaller */
  color: var(--urb-ink); background: #fff;
  border: 2px solid var(--urb-line-strong); border-radius: 0;
  appearance: none; -webkit-appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.urb-field__select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A1F5E' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
}
.urb-field__input:focus,
.urb-field__select:focus {
  outline: none; border-color: var(--urb-purple);
  box-shadow: inset 0 0 0 1px var(--urb-purple);
}
.urb-field__input::placeholder { color: #9A94A2; }

textarea.urb-field__input { min-height: 120px; resize: vertical; }

body.theme--urb .urb-field__hint {
  margin: 6px 0 0; font-size: 13.5px; color: var(--urb-grey);
}
body.theme--urb .urb-field__error {
  margin: 7px 0 0; font-size: 13.5px; font-weight: 600; color: #B3261E;
}
.urb-field.is-invalid .urb-field__input,
.urb-field.is-invalid .urb-field__select { border-color: #B3261E; }

/* Two across once there's room. Name/surname and birth date/country pair up.
   GRID, not inline-block: inline-block siblings are separated by a whitespace
   text node, and 50% + 50% + gap + that whitespace overflows and wraps. Grid
   has no whitespace to trip over. Measured: inline-block wrapped at 1440. */
@media (min-width: 620px) {
  .urb-reg__form { grid-template-columns: 1fr 1fr; }
  .urb-reg__form > * { grid-column: 1 / -1; }
  .urb-reg__form > .urb-field--half { grid-column: span 1; }
  .urb-reg__submit { justify-self: start; }
}

/* ── workshop day groups ────────────────────────────────────────────────── */

.urb-optgroup { margin: 0 0 26px; padding: 0; border: 0; }

body.theme--urb .urb-optgroup__legend {
  display: block; width: 100%; margin-bottom: 12px; padding: 0;
  font-family: var(--urb-font-tech); font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--urb-purple);
}
.urb-optgroup__items { display: flex; flex-wrap: wrap; gap: 10px; }

/* A class is a bordered stamp, same family as the programme filter chips. */
.urb-opt { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.urb-opt__input { position: absolute; opacity: 0; width: 0; height: 0; }
.urb-opt__label {
  display: block; padding: 11px 15px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  color: var(--urb-ink); background: #fff;
  border: 2px solid var(--urb-line-strong);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.urb-opt:hover .urb-opt__label { border-color: var(--urb-purple); color: var(--urb-purple); }
.urb-opt__input:checked ~ .urb-opt__label {
  background: var(--urb-purple); border-color: var(--urb-purple); color: #fff;
}
.urb-opt__input:focus-visible ~ .urb-opt__label {
  outline: 3px solid var(--urb-purple); outline-offset: 2px;
}
.urb-opt:active .urb-opt__label { transform: translate(1px, 2px); }

/* ── consent / newsletter tickboxes ─────────────────────────────────────── */

.urb-check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.urb-check + .urb-check { margin-top: 14px; }
.urb-check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.urb-check__box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  background: #fff; border: 2px solid var(--urb-line-strong);
  transition: background .12s ease, border-color .12s ease;
}
.urb-check__input:checked ~ .urb-check__box {
  background: var(--urb-purple); border-color: var(--urb-purple);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.urb-check__input:focus-visible ~ .urb-check__box { outline: 3px solid var(--urb-purple); outline-offset: 2px; }
.urb-check__label { font-size: 14.5px; line-height: 1.5; }
body.theme--urb .urb-check__label a { color: var(--urb-purple); text-decoration: underline; }

/* ── submit, turnstile, result ──────────────────────────────────────────── */

.urb-reg__turnstile { margin: 24px 0 0; min-height: 65px; }   /* reserved: no layout shift when the widget paints */

.urb-reg__submit { margin-top: 26px; }
.urb-reg__submit[disabled] { opacity: .55; cursor: not-allowed; }
.urb-reg__submit[disabled]:active { transform: none; }

body.theme--urb .urb-reg__note {
  max-width: 62ch; margin: 16px 0 0; font-size: 13.5px; color: var(--urb-grey);
}

.urb-reg__result { margin-top: 26px; padding: 20px 22px; border: 2px solid var(--urb-line-strong); background: #fff; }
.urb-reg__result--ok   { border-color: var(--urb-purple); }
.urb-reg__result--fail { border-color: #B3261E; }
body.theme--urb .urb-reg__result p { margin: 0 0 .6em; }
body.theme--urb .urb-reg__result p:last-child { margin-bottom: 0; }
/* SCAR #11 — `body.theme--urb p` claims `max-width: 72ch` at (0,1,1) and beats
   any bare component class. The confirmation line needs 773px to sit on one
   row; 72ch resolves to 739px here, so it broke to a second line inside a box
   1036px wide — "cut", as Arnas read it, and he was right that it fits.
   Measured before/after: p 739x51 -> 1036x26, box 95 -> 70. */
body.theme--urb .urb-reg__result p { max-width: none; }

/* ── chooser on /registracija/ when no event is named ───────────────────── */

body.theme--urb .urb-reg__chooser-list { list-style: none; margin: 0; padding: 0; }
.urb-reg__chooser-list li + li { margin-top: 12px; }
body.theme--urb .urb-reg__chooser-list a {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; color: var(--urb-ink); text-decoration: none;
  background: #fff; border: 2px solid var(--urb-line-strong);
  transition: border-color .12s ease;
}
body.theme--urb .urb-reg__chooser-list a:hover { border-color: var(--urb-purple); }

@media (max-width: 640px) {
  .urb-reg { scroll-margin-top: 66px; }
  .urb-optgroup__items { gap: 8px; }
  .urb-opt__label { padding: 10px 13px; font-size: 13.5px; }
  .urb-reg__submit { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO v2 — Malmö layout: title in the paper gap, framed hero, logo on top
   Pre-shipped for the P9a build. INERT until the markup exists — every
   selector below is scoped to a class the theme does not emit yet.

   In components, not urb-front.css: the hero already lives here (moved in P6
   after it computed 0×0 on every non-front template), and the header CTA pair
   is chrome on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · the nav CTA pair ───────────────────────────────────────────────── */

.urb-header__ctas { display: flex; align-items: center; gap: 10px; margin-left: 22px; }
body.theme--urb .urb-header__ctas .urb-btn { font-size: 12px; padding: 11px 18px; white-space: nowrap; }

/* ── 2 · the intro band: title + strapline, on paper, above the hero ────── */

.urb-hero-intro { background: var(--urb-paper); padding: clamp(30px,5.5vw,66px) 0 clamp(24px,4vw,44px); }

body.theme--urb .urb-hero-intro__title {
  font-family: var(--urb-font-display); font-weight: 600; color: var(--urb-ink);
  font-size: clamp(34px,7.4vw,96px); line-height: .98; letter-spacing: -.015em;
  text-transform: uppercase; margin: 0 0 clamp(14px,1.8vw,20px);
}

body.theme--urb .urb-hero-intro__strap {
  font-family: var(--urb-font-tech); color: var(--urb-grey);
  font-size: clamp(11px,1.4vw,13.5px); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.6; margin: 0;
  /* LOAD-BEARING, and it must stay prefixed. urb-main.css sets
     `body.theme--urb p { max-width: 72ch }` — sensible for prose, but at this mono
     size 72ch computes to 583px while the strapline needs ~585px, so it wrapped at
     EVERY width including 1440. A bare class loses (0,1,0) vs (0,1,1).
     Ninth instance of the scar, and the first time `max-width` was the property. */
  max-width: none;
}

/* ── 3 · the framed hero ────────────────────────────────────────────────── */

.urb-hero--framed { --urb-frame: 22px; display: block; padding: 0 var(--urb-frame) var(--urb-frame); background: var(--urb-paper); }
.urb-hero--framed::before { display: none; }               /* kill the full-bleed band's own ground */

.urb-hero--framed .urb-hero__inner {
  position: relative; width: 100%; overflow: hidden;
  min-height: min(62vh, 600px);
  display: flex; align-items: center; justify-content: center;
  /* the poster sits HERE, not on the <video>, so reduced-motion has something
     to fall back to — see §4 */
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

/* No texture overlay on the framed hero (removed 2026-08-20, Arnas).
   The paper grain reads well on flat purple bands — over moving footage it just
   looks like dirt on the lens. The footer keeps its own. */

/* Even scrim, not the old left-weighted ramp: there is no left-aligned text left
   to protect, only the white mark to keep legible against moving footage. */
.urb-hero--framed .urb-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(74,31,94,.42), rgba(74,31,94,.52));
}

.urb-hero--framed .urb-hero__content {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(40px,6vw,70px) clamp(20px,5vw,60px);
}

.urb-hero__logo { display: block; width: min(440px,64vw); height: auto; margin: 0 auto clamp(26px,3.6vw,40px); }

/* PREFIXED — `body.theme--urb img { height:auto }` is (0,1,1) and would leave the
   media at natural aspect with flat purple beneath it. Same failure as the P7.4
   hero photo, which was invisible on desktop and obvious at 390px. */
body.theme--urb .urb-hero__bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* ── 4 · reduced motion — no CSS can pause a video, but it can remove it ── */
@media (prefers-reduced-motion: reduce) {
  body.theme--urb video.urb-hero__bgvid { display: none; }   /* the poster on __inner shows through */
}

/* ── 4b · autoplay refused — hide the film, keep the poster ─────────────────
   iOS will not autoplay in Low Power Mode, with Low Data Mode on, or when the
   visitor has set Auto-Play to Never. That is the phone respecting its owner and
   no markup can override it. What it does instead is render a native play
   triangle over the poster, which on a decorative background loop reads as a
   broken embed.

   So: P9b's script calls play() and, if the promise rejects, puts
   `is-nofilm` on the section. The video goes away and the poster underneath is
   simply the hero — indistinguishable from the photo version. Shipped ahead of
   the JS so the class has somewhere to land. */
body.theme--urb .urb-hero--framed.is-nofilm video.urb-hero__bgvid { display: none; }

@media (max-width: 900px) {
  .urb-header__ctas { margin-left: auto; gap: 8px; }
  .urb-header__ctas .urb-btn--secondary { display: none; }   /* Registracija moves into the drawer */
}
@media (max-width: 640px) {
  .urb-hero--framed { --urb-frame: 12px; }
  .urb-hero--framed .urb-hero__inner { min-height: 56vh; }
  .urb-hero__logo { width: min(300px,76vw); }
  body.theme--urb .urb-header__ctas .urb-btn { font-size: 11.5px; padding: 10px 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE SIDE PROMO — a permanent tab on the right edge that opens one card.
   Phase 12, 2026-08-22. Arnas's brief, from malmodanceweek.se's "MDW Packages
   & deals 2026".

   THE MODEL IS DELIBERATELY DUMBER THAN MALMÖ'S. Theirs is an Elfsight widget
   (a paid third-party script on every page). This is ~40 lines of CSS and a
   dozen of JS, Customizer-driven, and it never remembers anything: the tab is
   always there, the card opens and closes within the pageview, and nothing is
   stored on the visitor's machine. Arnas chose that (2026-08-22) over a
   dismiss-for-7-days rule — no localStorage, no cookie question for Complianz,
   nothing to explain in the privacy page.

   The device on the tab is the ≡ mark, not Malmö's heart: it is the brand's own
   and it already means "there is a list behind this" everywhere else on the site.
   ═══════════════════════════════════════════════════════════════════════════ */

.urb-promo {
  /* z-index 45 — DELIBERATELY BELOW THE HEADER'S 50, and read the drawer note
     ~line 150 before changing it. `.urb-header` is position:sticky with
     z-index:50, so it opens its own stacking context and everything inside it
     — the drawer's z-index:95 included — paints at 50. This element is a body-
     level fixed sibling, so at 60 it painted OVER an open drawer: on a phone
     the tab sat on top of the SOKIU KOVOS button (Arnas, 2026-08-22).
     45 puts it above the drawer overlay (40) and under the drawer itself, so
     the panel covers it with no state coupling and no JS hook. Both are
     right-anchored and the drawer is min(86vw,380px) against a ~30px tab, so
     the cover is total at every width the drawer exists at — measured 390 and
     900. The trade is that the promo now passes UNDER the sticky header on a
     viewport short enough for the two to meet (below ~620px tall on desktop);
     that is the correct winner anyway. */
  position: fixed; z-index: 45;
  top: 50%; right: 0; transform: translateY(-50%);
  display: flex; align-items: center;
  /* The card is laid out to the LEFT of the tab and slid off-screen, so the
     tab never moves when it opens — the anchor a visitor's eye is tracking
     stays exactly where it was. */
  flex-direction: row;
  pointer-events: none;             /* children re-enable; the gap stays clickable-through */
}
.urb-promo > * { pointer-events: auto; }

/* ── PORTING NOTES, written back from the whatajazz port (v2.4.0, 2026-08-22) ──
   Two things bit that port and will bite the next one. Neither is a bug here;
   both are properties of the TARGET theme, so they are invisible until you move.

   1 · A HOST THEME'S GENERIC `button` RULES ARE PART OF THE PORT SURFACE.
       This component renders two bare <button> elements — the tab and the close.
       whatajazz's main.css paints every `button:hover` salmon with !important
       (their scar #23), and gives every `button` `min-height: 48px` plus
       `width: 100%` on phones. The tab inflated to fill its flex row and the ×
       stretched. The resets below are cheap here (they restate the browser
       default, so they change nothing on UE) and they save the next port a
       debugging session. State rules may still need arming against !important.

   2 · WHITE-ON-ACCENT DOES NOT SURVIVE AN ACCENT SWAP. Measured:
         white on #662B82 (UE Tag Purple)   9.41:1  — passes AA comfortably
         white on #E87224 (family orange)   3.06:1  — FAILS AA for normal text
         #141414 on #E87224                 6.02:1  — passes
       whatajazz substituted dark ink for the tab's open/hover text and was
       right to. **Re-check the ratio after substituting the accent** rather
       than carrying `#fff` across; the tab label is small text, so 4.5:1 is
       the bar, not 3:1.
   ──────────────────────────────────────────────────────────────────────────── */

/* ---- the tab ---------------------------------------------------------------- */
.urb-promo__tab {
  /* see PORTING NOTES 1 — no-ops on UE, load-bearing on a theme with generic
     button rules */
  width: auto; min-height: 0; flex: none;
  display: flex; align-items: center; gap: 10px;
  writing-mode: vertical-rl;
  background: var(--urb-white); color: var(--urb-purple);
  border: 1px solid var(--urb-line); border-right: 0;
  padding: 18px 9px;
  font-family: var(--urb-font-ui); font-weight: 800;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 18px rgba(28, 27, 30, .10);
  transition: color .15s, background .15s;
}
.urb-promo__tab:hover { background: var(--urb-purple); color: #fff; }
/* OPEN is a state, not a leftover hover. Without this the tab is purple only
   because the pointer happens to be resting on it, and it goes white again the
   moment the mouse moves — so the one element telling you which panel is open
   stops telling you. */
.urb-promo.is-open .urb-promo__tab { background: var(--urb-purple); color: #fff; }
/* The ≡ device, drawn not imported — three bars, same proportions as the logo's. */
.urb-promo__tab::before {
  content: ""; flex: none;
  width: 13px; height: 9px;
  background: currentColor;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
  mask: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
  transform: rotate(180deg);        /* upright inside the vertical writing mode */
}

/* ---- the card --------------------------------------------------------------- */
.urb-promo__card {
  width: min(300px, 78vw);
  /* The close button is absolutely positioned against this box. The `transform`
     below already establishes the containing block — Claude Code checked that
     rather than assuming, and was right — but `position: relative` is one
     declaration of insurance against a future edit that removes the transform
     and silently throws the × onto the tab. */
  position: relative;
  background: var(--urb-white);
  border: 1px solid var(--urb-line);
  box-shadow: 0 10px 40px rgba(28, 27, 30, .16);
  /* Slid out by its OWN width plus the shadow's reach, so no smear is left
     hanging at the edge of a page that has not opened it. */
  transform: translateX(calc(100% + 48px));
  visibility: hidden;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), visibility 0s .34s;
}
.urb-promo.is-open .urb-promo__card {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}

/* A square image, always — the brief said "small square image", and a fixed
   ratio is what lets Arnas drop any poster in without the card resizing.
   PREFIXED: `body.theme--urb img { height: auto }` is (0,1,1) and would beat a
   bare class, which is scar #1 and has bitten this project ten times. */
body.theme--urb .urb-promo__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
}

.urb-promo__body { padding: 18px 18px 20px; }

/* PREFIXED: h3 carries a base margin. */
body.theme--urb .urb-promo__title {
  font-family: var(--urb-font-ui); font-weight: 800;
  font-size: 17px; line-height: 1.15; letter-spacing: -.005em;
  color: var(--urb-ink);
  margin: 0 0 8px;
}
/* PREFIXED, twice over: p carries BOTH `margin` and `max-width: 72ch`, and at
   this size 72ch is far wider than the card — the text would not wrap where the
   card ends. Ninth-instance territory; fixed before it could happen. */
body.theme--urb .urb-promo__text {
  font-size: 13.5px; line-height: 1.5;
  color: var(--urb-grey);
  margin: 0 0 16px; max-width: none;
}
.urb-promo__cta { width: 100%; text-align: center; }

/* ---- close ------------------------------------------------------------------ */
.urb-promo__close {
  position: absolute; top: 8px; right: 8px;
  /* see PORTING NOTES 1 */
  width: 30px; min-width: 0; min-height: 0; flex: none;
  height: 30px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: var(--urb-ink);
  border: 1px solid var(--urb-line);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.urb-promo__close:hover { background: var(--urb-purple); color: #fff; border-color: var(--urb-purple); }

/* ---- phones: the same tab, smaller (Arnas's call, 2026-08-22) --------------- */
@media (max-width: 640px) {
  .urb-promo__tab { padding: 14px 7px; font-size: 11px; letter-spacing: .08em; gap: 8px; }
  .urb-promo__tab::before { width: 11px; height: 8px; }
  .urb-promo__card { width: min(272px, 74vw); }
  .urb-promo__body { padding: 14px 14px 16px; }
  body.theme--urb .urb-promo__title { font-size: 15.5px; }
  body.theme--urb .urb-promo__text { font-size: 13px; }
}

/* A sideways phone is ~375px tall: a vertically-centred card with a square
   image cannot fit, and it would cover the whole screen.
   HIDE THE WHOLE COMPONENT, not just the card (corrected 2026-08-22 after
   measuring). Hiding only the card left the tab clickable: it took the
   `is-open` class and set `aria-expanded="true"` while `display:none` meant
   nothing appeared — so a screen-reader user was told a panel had opened that
   was not there, and focus had nowhere to go and stayed on the tab. A control
   that cannot open anything is worse than no control. */
/* THE NUMBER SHOULD MATCH THE HOST'S OWN LANDSCAPE BLOCK, not this file.
   960 is UE's band edge (urb-fixes.css); whatajazz measured 932 — Display-Zoom
   iPhones report 932x430 — and used that so one number governs both their
   blocks. Both are correct for their own site. Copying this literal into a
   third theme without checking its landscape block is the mistake. */
@media (max-width: 960px) and (max-height: 520px) {
  .urb-promo { display: none; }
}

/* The slide is decoration; the card still opens, it just arrives. */
@media (prefers-reduced-motion: reduce) {
  .urb-promo__card { transition: none; }
  .urb-promo.is-open .urb-promo__card { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — privacy policy + cookie policy.  Phase 16, 2026-08-22.

   Markup comes from page-legal.php (ported from whatajazz v1.2.0). No hero,
   no CTA: these are the only pages on the site with no marketing job.

   THE JS CONTRACT. Three classes are applied by the template's script and are
   load-bearing here — if the script stops setting them, these rules go quiet:
     .urb-legal--toc   on the root once the menu has 2+ entries
     .is-legal-top     on every heading at the document's SHALLOWEST level
     .is-legal-first   on the opening heading, only when nothing precedes it
   The ramp below keys on `.is-legal-top`, NEVER on the literal `h2` — whatashag's
   privacy page is written entirely in h3 and every h2-keyed rule matched nothing.

   SPECIFICITY, twice over:
   1. Ours vs the theme. urb-main.css claims margin on h1–h5, margin AND
      max-width:72ch on p, colour on a, and margin+padding-left on ul/ol, all at
      (0,1,1). A legal page is nothing BUT headings, paragraphs and lists, so
      almost every rule here carries `body.theme--urb`. (Scar list: see
      `urbanessentials-css-scar` — eleven instances and counting.)
   2. Ours vs Complianz. Its heaviest selector is
      `#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div` (0,1,2,1).
      `body.theme--urb #cmplz-document …` outranks it on element count WITHOUT
      !important — preferred, because a rule that merely loses goes quiet and is
      debuggable, while an !important war is not.
   ═══════════════════════════════════════════════════════════════════════════ */

.urb-legal { background: var(--urb-paper); }
.urb-legal__wrap {
  max-width: var(--urb-wrap);
  margin: 0 auto;
  padding: 64px max(22px, env(safe-area-inset-left)) 96px max(22px, env(safe-area-inset-right));
}

/* ---- head ---------------------------------------------------------------- */
.urb-legal__head { border-bottom: var(--urb-border-bold) solid var(--urb-ink); padding-bottom: 22px; margin-bottom: 40px; }
.urb-legal__eyebrow {
  display: block;
  font-family: var(--urb-font-tech);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--urb-purple);
  margin-bottom: 10px;
}
/* The H1 joins the ramp: Oswald, uppercase. Canon §3.1 — "all headings
   UPPERCASE, enforced by CSS text-transform, never typed" — and it is also what
   every other title on this site does (the heroes force-uppercase too). Without
   this the page title sits in the UI face while its own sections are in the
   display face, which reads as two documents stapled together. */
body.theme--urb .urb-legal__head h1 {
  margin: 0 0 12px;
  font-family: var(--urb-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.02;
}
/* `p` claims margin AND max-width:72ch — the date is one short line and the
   72ch cap is harmless, but the margin is not. Prefix. */
body.theme--urb .urb-legal__updated {
  margin: 0;
  font-family: var(--urb-font-tech);
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--urb-grey);
}

/* ---- two columns --------------------------------------------------------- */
.urb-legal__cols { display: block; }
.urb-legal__side { display: none; }          /* no sidebar until there is a menu */
.urb-legal--toc .urb-legal__side { display: block; }

@media (min-width: 900px) {
  .urb-legal--toc .urb-legal__cols {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  /* top:100px clears the sticky header (73px) with air. The header opens its
     own stacking context at z-index 50 (see the drawer note ~line 150); this
     sidebar is inside <main>, so it simply scrolls under it — correct. */
  .urb-legal__toc { position: sticky; top: 100px; }
}

/* ---- the "on this page" menu --------------------------------------------- */
.urb-legal__toc-label {
  display: block;
  font-family: var(--urb-font-tech);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--urb-grey);
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--urb-line);
}
body.theme--urb .urb-legal__toc ul { margin: 0; padding-left: 0; list-style: none; }
.urb-legal__toc li { margin: 0 0 2px; }
.urb-legal__toc li.is-sub { padding-left: 14px; }
body.theme--urb .urb-legal__toc a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px; line-height: 1.35;
  color: var(--urb-grey);
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color .15s, border-color .15s;
}
body.theme--urb .urb-legal__toc a:hover { color: var(--urb-ink); }
body.theme--urb .urb-legal__toc a.is-current {
  color: var(--urb-purple);
  border-left-color: var(--urb-purple);
  font-weight: 700;
}
/* Below the sidebar breakpoint the menu stacks above the document, boxed so it
   reads as a control rather than as the first paragraph. */
@media (max-width: 899px) {
  .urb-legal__toc {
    background: var(--urb-white);
    border: 1px solid var(--urb-line);
    padding: 16px 18px;
    margin-bottom: 32px;
  }
}

/* ---- the document itself -------------------------------------------------- */
body.theme--urb .urb-legal__body { max-width: 72ch; }
body.theme--urb .urb-legal__body p { max-width: none; }   /* the column already limits it */

/* The section ramp keys on .is-legal-top, not on a tag. */
body.theme--urb .urb-legal__body .is-legal-top {
  font-family: var(--urb-font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--urb-line);
}
body.theme--urb .urb-legal__body .is-legal-top.is-legal-first {
  margin-top: 0; padding-top: 0; border-top: 0;
}
body.theme--urb .urb-legal__body h3,
body.theme--urb .urb-legal__body h4 { margin: 28px 0 8px; }
body.theme--urb .urb-legal__body ul,
body.theme--urb .urb-legal__body ol { margin: 0 0 1em; padding-left: 1.15em; }
body.theme--urb .urb-legal__body li { margin-bottom: .3em; }
body.theme--urb .urb-legal__body a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .urb-legal__wrap { padding-top: 40px; padding-bottom: 64px; }
  body.theme--urb .urb-legal__body .is-legal-top { margin-top: 38px; padding-top: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPLIANZ'S GENERATED DOCUMENT — the cookie policy's own markup.
   Rewritten 2026-08-22 after measuring the plugin's real CSS. The first draft
   of this block was WRONG in a way a screenshot would not have shown, and the
   correction is the useful part:

   ⚠️ DO NOT OVERRIDE THE GRID. "Placed cookies" is not a <table> — it is
   <details>/<summary> per service wrapping a CSS grid — but it is a grid laid
   out with **named template areas**, not plain columns:

       .cookies-per-purpose { grid-template-columns: 1fr 1fr 1fr;
                              grid-template: "purpose purpose purpose"
                                             "header1 header2 header3" auto; }
       .purpose { grid-area: purpose }  .name-header { grid-area: header1 } …

   Push `grid-template-columns: 160px 1fr` at that (as the first draft did) and
   two things go wrong: the named areas desync from the column count, and the
   rule loses anyway — the plugin ships
   `#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose`
   at (0,1,3,0), heavier than anything sanely written here. It also already
   reflows itself to `100px 1fr` at its own 600px breakpoint. Leave the geometry
   alone; it is not broken.

   ⚠️ DO NOT REPAINT THE CELLS EITHER. The zebra striping is
   `…​.cookies-per-purpose div:nth-child(12n+2)` through `(12n+7)` at (0,1,3,1) —
   winning that needs either an id of our own or !important, and the prize is
   swapping #f7f7f7 for --urb-paper (#F4F2F3). Two hex values apart. Not worth
   an !important war: a rule that merely loses goes quiet and is debuggable,
   an !important war is not.

   So this block styles ONLY what the plugin leaves plain — the disclosure
   chrome, the headings and the links — and lets the table be the table.

   NOT HERE, deliberately: `.cmplz-fmail-domain` lives in urb-fixes.css because
   the decoy domain printing inline is a correctness bug, not a look. And
   §"Manage consent" is the BANNER's markup, JS-populated only once consent
   exists — an empty preview looks identical to a broken one, so do not chase it.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme--urb #cmplz-document { font-size: 15.5px; }
body.theme--urb #cmplz-document h2,
body.theme--urb #cmplz-document h3 { font-family: var(--urb-font-display); text-transform: uppercase; }
body.theme--urb #cmplz-document a { color: var(--urb-purple); text-decoration: underline; text-underline-offset: 2px; }
body.theme--urb #cmplz-document a:focus-visible { outline: 2px solid var(--urb-purple); outline-offset: 2px; }

/* the disclosure chrome — the one part the plugin leaves unstyled */
body.theme--urb #cmplz-document details {
  background: var(--urb-white);
  border: 1px solid var(--urb-line);
  margin: 0 0 10px;
}
body.theme--urb #cmplz-document summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--urb-font-ui);
  font-weight: 700;
  list-style: none;
}
/* NO ::after MARKER HERE. The plugin already draws its own chevron inside the
   <summary>, so adding one gives every service row two indicators side by side —
   measured on the collapsed YOUTUBE row before this comment existed. Hiding the
   UA marker is still right (Safari/Chrome draw a disclosure triangle on top of
   the plugin's chevron otherwise); supplying a replacement is not. */
body.theme--urb #cmplz-document summary::-webkit-details-marker { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPLIANZ — THE CONSENT BANNER                                    v0.9.10
   ───────────────────────────────────────────────────────────────────────────
   HOW THIS WORKS, AND WHY IT DOES NOT FIGHT THE PLUGIN

   Complianz renders the banner from a GENERATED stylesheet at
   `wp-content/uploads/complianz/css/banner-1-optin.css`, rebuilt every time
   Complianz → Sutikimo reklamjuostė → Išvaizda is saved. Every visual rule in
   that file reads a custom property, and all of them are declared in ONE
   `:root { … }` block.

   So we do not override its selectors. We redeclare its variables on an
   ancestor of the banner, and win by INHERITANCE — no specificity involved,
   nothing to out-count, and nothing that breaks when the plugin bumps a
   selector. The eleven-instance specificity scar does not apply here.

   ⚠ IT MUST BE `body.theme--urb`, NOT `:root`. The UE tokens are declared on
   `body.theme--urb` (the token-scope trap). Written at `:root`,
   `var(--urb-purple)` resolves to nothing and every colour below falls back
   to the plugin's blue — silently, which is the worst kind.

   ⚠ CONSEQUENCE FOR ARNAS: these values now beat the colour pickers in
   Complianz → Išvaizda. Changing a colour there will appear to do nothing.
   Change it here instead, or delete the matching line below first.

   Only three things below are real rules rather than variables — the banner's
   type, its shadow and the category rows — because the plugin exposes no
   variable for them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — the plugin's own variables, re-pointed at UE tokens */
body.theme--urb {
  /* the card */
  --cmplz_banner_background_color: var(--urb-white);
  --cmplz_banner_border_color: var(--urb-purple);
  --cmplz_banner_border_width: 2px 2px 2px 2px;   /* --urb-border-bold: "bold, not hairline" */
  --cmplz_banner_border_radius: 0 0 0 0;          /* UE is square. Everywhere. */
  --cmplz_button_border_radius: 0 0 0 0;

  /* text */
  --cmplz_text_color: var(--urb-ink);
  --cmplz_hyperlink_color: var(--urb-purple);
  --cmplz_title_font_size: 17px;
  --cmplz_text_font_size: 13px;
  --cmplz_link_font_size: 12px;
  --cmplz_category_body_font_size: 12px;
  --cmplz_category_header_title_font_size: 13px;
  --cmplz_button_font_size: 12px;                /* uppercase + .07em tracking needs
                                                    the smaller size to fit three
                                                    buttons across 526px */

  /* Accept = .urb-btn--primary · Deny = .urb-btn--secondary.
     DELIBERATE: the plugin ships Accept as a saturated solid and Deny as a
     washed grey, which is the shape of a dark pattern. Giving Deny the same
     size, weight and border as Accept is both on-brand and the more
     defensible reading of "equally prominent" under GDPR. Settings stays
     quieter because it is a third path, not the refusal. */
  --cmplz_button_accept_background_color: var(--urb-purple);
  --cmplz_button_accept_border_color: var(--urb-purple);
  --cmplz_button_accept_text_color: var(--urb-white);

  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--urb-purple);
  --cmplz_button_deny_text_color: var(--urb-purple);

  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--urb-line-strong);
  --cmplz_button_settings_text_color: var(--urb-grey);

  /* the preferences view */
  --cmplz_slider_active_color: var(--urb-purple);
  --cmplz_slider_inactive_color: var(--urb-grey);
  --cmplz_category_header_always_active_color: var(--urb-grey);
}

/* 2 — type. The plugin exposes sizes as variables but not family, weight or
   transform, so these are real rules. Specificity: the plugin's heaviest
   button selector is `.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept`
   at (0,4,0); `body.theme--urb …` below is (0,4,1) and takes it on element
   count. Measured, not assumed. */
body.theme--urb .cmplz-cookiebanner .cmplz-title {
  font-family: var(--urb-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.theme--urb .cmplz-cookiebanner .cmplz-message,
body.theme--urb .cmplz-cookiebanner .cmplz-description {
  font-family: var(--urb-font-ui);
}
body.theme--urb .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: var(--urb-font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-width: var(--urb-border-bold);
  border-style: solid;
  min-height: 48px;
  padding: 12px 8px;
  transition: background-color .15s, color .15s, border-color .15s;
}
body.theme--urb .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  background-color: var(--urb-purple-deep);
  border-color: var(--urb-purple-deep);
}
body.theme--urb .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
  background-color: var(--urb-purple);
  color: var(--urb-white);
}
body.theme--urb .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
body.theme--urb .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  border-color: var(--urb-ink);
  color: var(--urb-ink);
}
body.theme--urb .cmplz-cookiebanner .cmplz-category-title {
  font-family: var(--urb-font-ui);
  font-weight: 700;
}

/* 3 — the category rows and the shadow, the two remaining hardcoded values.
   The plugin sets its shadow three times, the heaviest being
   `.cmplz-cookiebanner.cmplz-show:hover` at (0,2,1) — hence (0,3,1) here.
   A modal that grows a bigger shadow when the pointer crosses it is noise;
   UE is a flat, graphic system, so one steady shadow does the separating. */
body.theme--urb .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--urb-paper);
}
body.theme--urb .cmplz-cookiebanner,
body.theme--urb .cmplz-cookiebanner.cmplz-show,
body.theme--urb .cmplz-cookiebanner.cmplz-show:hover {
  box-shadow: 0 18px 44px rgba(28, 27, 30, .20);
}
body.theme--urb #cmplz-manage-consent .cmplz-manage-consent {
  box-shadow: 0 -6px 24px rgba(28, 27, 30, .16);
  font-family: var(--urb-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

/* 4 — focus. The plugin ships a blue ring on the category checkboxes only. */
body.theme--urb .cmplz-cookiebanner a:focus-visible,
body.theme--urb .cmplz-cookiebanner button:focus-visible,
body.theme--urb .cmplz-cookiebanner .cmplz-btn:focus-visible {
  outline: 2px solid var(--urb-purple);
  outline-offset: 2px;
}

/* 5 — A PLUGIN BUG, ON LANDSCAPE PHONES ONLY. Complianz has two media blocks
   that overlap and contradict each other:

     @media (max-height: 400px) { .cmplz-cookiebanner { display: flex;
                                    flex-direction: column; zoom: .6; … } }
     @media (min-width:  768px) { .cmplz-cookiebanner { display: grid; … } }

   A landscape phone matches BOTH (852 wide, 393 tall). The min-width block is
   later in the generated file, so `display: grid` wins, the banner keeps
   `grid-template-rows: minmax(0, 1fr)`, and the header — a grid item in a 1fr
   row — stretches to 147px. Measured: a ~90px hole between the title and the
   message at 852×393, with everything else correct.

   Restoring the column flex the short-screen block intended is enough; the
   zoom and the button sizing in that block are the plugin's business and are
   left alone. Both selectors below are (0,2,1) and (0,3,1) against the
   plugin's (0,1,0) and (0,2,0). */
@media (max-height: 400px) and (min-width: 768px) {
  body.theme--urb .cmplz-cookiebanner {
    display: flex;
    flex-direction: column;
  }
  body.theme--urb .cmplz-cookiebanner .cmplz-header {
    max-height: none;
    margin-bottom: 6px !important;
  }
}