/* ==========================================================================
   urb-main.css — tokens, reset, base type, structure.
   Owner: the design reviewer (Cowork). Claude Code never edits this file.
   Brand authority: urbanessentials-brand-book.html (v2, approved 2026-08-16).
   Everything scoped to body.theme--urb. Cascade: fonts → THIS → components →
   page sheet → fixes. 2026-08-16.
   ========================================================================== */

body.theme--urb {
  /* colour — measured from the supplied artwork */
  --urb-purple: #662B82;        /* Tag Purple — THE colour */
  --urb-purple-deep: #4A1F5E;   /* hover, scrims, depth */
  --urb-paper: #F4F2F3;
  --urb-white: #FFFFFF;
  --urb-ink: #1C1B1E;
  --urb-grey: #5A555E;
  --urb-line: rgba(28, 27, 30, .14);
  --urb-line-strong: rgba(28, 27, 30, .22); /* card frames — v0.6.1 */
  --urb-line-w: rgba(255, 255, 255, .22);
  --urb-border-bold: 2px;       /* buttons, tag underlines — bold, not hairline */

  /* type */
  --urb-font-display: 'Oswald', 'Arial Narrow', sans-serif;      /* 600 — titles, dates, times */
  --urb-font-tech: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* meta, info lines */
  --urb-font-ui: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* 800 head/buttons, 400 body */

  /* rhythm */
  --urb-s-section: 96px;
  --urb-s-section-m: 56px;
  --urb-hero-flagship: clamp(520px, 72vh, 680px);
  /* A DEFINITE height, not a floor (2026-08-21, Arnas). Every small hero used
     to be content-driven, so /apie (title only) came out at ~417px, /naujienos
     and /registracija (title + whisper) at ~454px and /programa (title +
     whisper + meta) at ~514px — three different bands on four sibling pages.
     420px is /apie's measured height, so the page he approved does not move
     and the other three come down to meet it. Paired with the padding rules in
     urb-components.css, which shrink the content box far enough that this
     min-height wins on every template. */
  --urb-hero-small: 420px;
  --urb-wrap: 1140px;
}

/* The small hero steps down twice — a 420px band is 48% of a 390x844 phone.
   Redefining the custom property (rather than the rule) keeps ONE knob, so
   urb-fixes.css's landscape override still wins on source order.
   THE SELECTOR IS `body.theme--urb`, NOT `:root`, and that is load-bearing:
   this theme declares its whole token block on the body, so an override on
   :root sets the property on <html>, body re-declares 420px one level down,
   and the phone silently keeps the desktop height. Measured 2026-08-21 —
   html computed 280px while body computed 420px, which is exactly what an
   inherited property being re-specified underneath you looks like. */
@media (max-width: 900px) { body.theme--urb { --urb-hero-small: 340px; } }
@media (max-width: 640px) { body.theme--urb { --urb-hero-small: 280px; } }

/* ---- base ---------------------------------------------------------------- */
body.theme--urb {
  margin: 0;
  background: var(--urb-paper);
  color: var(--urb-ink);
  font-family: var(--urb-font-ui);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none; /* labels never faux-bold */
}
body.theme--urb *,
body.theme--urb *::before,
body.theme--urb *::after { box-sizing: border-box; }

body.theme--urb img { max-width: 100%; height: auto; display: block; border-radius: 0; }
body.theme--urb figure { margin: 0; }

/* headings — Montserrat 800, tight */
body.theme--urb h1, body.theme--urb h2, body.theme--urb h3,
body.theme--urb h4, body.theme--urb h5 {
  font-family: var(--urb-font-ui);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 .45em;
  color: inherit;
}
body.theme--urb h1 { font-size: clamp(34px, 4.6vw, 52px); }
body.theme--urb h2 { font-size: clamp(26px, 3.4vw, 36px); }
body.theme--urb h3 { font-size: 19px; }

body.theme--urb p { margin: 0 0 1em; max-width: 72ch; }
body.theme--urb a { color: var(--urb-purple); text-decoration: none; }
/* prose links get the 3px bar underline on hover — the tag device voice */
body.theme--urb .urb-prose a {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 rgba(102, 43, 130, .35);
}
body.theme--urb .urb-prose a:hover { box-shadow: inset 0 -3px 0 0 var(--urb-purple); }

body.theme--urb ul, body.theme--urb ol { margin: 0 0 1em; padding-left: 1.2em; }

/* focus — bold, purple, square */
body.theme--urb :focus-visible {
  outline: var(--urb-border-bold) solid var(--urb-purple);
  outline-offset: 2px;
  border-radius: 0;
}
.urb-band--purple :focus-visible,
.urb-drawer :focus-visible { outline-color: #fff; }

/* screen-reader-only text — the standard WP rule; themes must define it.
   Was missing since Phase 3 (footer newsletter label rendered as literal
   text) — measured in the P6 report §4.1, fixed here 2026-08-16. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* skip link */
.urb-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--urb-purple); color: #fff;
  font-weight: 700; padding: 12px 20px;
}
.urb-skip-link:focus { left: 0; }

/* ---- structure ----------------------------------------------------------- */
.urb-wrap {
  max-width: var(--urb-wrap);
  margin: 0 auto;
  /* max(gutter, safe-area) — on a notched phone in LANDSCAPE the viewport now
     runs edge to edge (viewport-fit=cover in header.php), so backgrounds reach
     the screen edges while text stays clear of the notch and the rounded
     corners. Before cover, iOS inset the viewport itself and painted the
     margins with the body background, leaving pale gutters beside every
     full-bleed band — which is what Arnas photographed (v0.7.7).
     HARMLESS WITHOUT THE META: env() resolves to 0px, so these collapse to the
     plain 28/20px gutters this site has always had. */
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
@media (max-width: 640px) {
  .urb-wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* bands — the page is made of these */
.urb-band { padding: var(--urb-s-section) 0; position: relative; }
.urb-band--paper  { background: var(--urb-paper);  color: var(--urb-ink); }
.urb-band--white  { background: var(--urb-white);  color: var(--urb-ink); }
.urb-band--purple { background: var(--urb-purple); color: #fff; }
.urb-band--photo  { background: var(--urb-purple-deep); color: #fff; }

/* the grain — band-level policy (D4): one tile, derived from the artwork.
   Purple bands only; content stays above it. Never on photos, logo, cards. */
.urb-band--purple::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../img/urb-texture.png');
  background-size: 560px;
  opacity: .08;
  pointer-events: none;
}
.urb-band--purple > * { position: relative; }

.urb-band__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 34px;
}
/* The band's "see everything" link, BELOW the cards rather than beside the
   title. Phase 19, at Arnas's call, and he is right about why: at 390px the
   head wraps, so the link landed under the title and ABOVE the cards — you
   were offered the whole programme before you had seen one event of it. A
   "more" affordance only means anything once there is a "these" to be more
   than, so it belongs after the row in reading order.

   It is a real element, not a CSS reorder: the link lives inside
   `.urb-band__head` in the markup and CSS cannot reparent. front-page.php
   emits `<div class="urb-band__foot">` after the scroller / grid in the EVENTS
   and NEWS bands. The ABOUT band keeps its link inline in the split body —
   there the link follows prose, which already reads correctly.

   Left-aligned on purpose: it lines up with the band title and the first card,
   and the arrow then points the way the eye is already travelling. The
   vertical padding is a tap target, not air — the link's own line box is 13px
   and that is not thumb-sized. */
.urb-band__foot { margin-top: 30px; }
.urb-band__foot .urb-arrow-link { display: inline-block; padding: 8px 0; }

.urb-band__title { margin: 0; font-size: clamp(26px, 3.4vw, 36px); }
.urb-band__title--center { text-align: center; width: 100%; }
.urb-band__empty {
  font-family: var(--urb-font-tech);
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--urb-grey); margin: 0;
}
.urb-band--purple .urb-band__empty { color: rgba(255, 255, 255, .7); }

/* grid + horizontal scroller */
.urb-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.urb-scroller {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(320px, 78vw);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Room for the scrollbar to live BELOW the cards rather than against them.
     10px was not enough: a classic macOS/Windows scrollbar is ~15px tall and
     draws inside this padding, so it touched the card edge (Arnas, 2026-08-16).
     Machines with overlay scrollbars just see a little more air. */
  padding-bottom: 26px;
  -webkit-overflow-scrolling: touch;
  /* dress it in the theme's ink instead of the OS's black */
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 27, 30, .38) rgba(28, 27, 30, .10);
}
.urb-scroller > * { scroll-snap-align: start; }
/* WebKit/Blink still needs the pseudo-elements; square, never rounded */
.urb-scroller::-webkit-scrollbar { height: 8px; }
.urb-scroller::-webkit-scrollbar-track { background: rgba(28, 27, 30, .10); }
.urb-scroller::-webkit-scrollbar-thumb { background: rgba(28, 27, 30, .38); border-radius: 0; }
.urb-scroller::-webkit-scrollbar-thumb:hover { background: rgba(28, 27, 30, .55); }

/* 50/50 split */
.urb-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.urb-split__media { min-width: 0; }
.urb-split__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.urb-split__placeholder {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--urb-purple);
  background-image: url('../img/urb-texture.png');
  background-size: 560px;
}
.urb-split__body { min-width: 0; }
.urb-split__text { max-width: 52ch; }
@media (max-width: 880px) {
  .urb-split { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- the shared voices --------------------------------------------------- */
/* the ≡ tag device — inline SVG 24×16, currentColor */
.urb-bars { display: inline-block; vertical-align: -2px; color: var(--urb-purple); }
.urb-band--purple .urb-bars, .urb-drawer .urb-bars, .urb-footer .urb-bars { color: #fff; }
.urb-bars--eyebrow { margin-right: 10px; }

/* the whisper — one line per band, lowercase, spaced */
.urb-whisper {
  font-family: var(--urb-font-ui);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: lowercase;
  font-size: 15px;
  margin: 0 0 .8em;
}

/* the vertical motto strips (aria-hidden) — edge-mounted, quiet */
.urb-motto {
  position: absolute; top: 50%; z-index: 2;
  writing-mode: vertical-rl;
  font-weight: 400; letter-spacing: .34em; text-transform: lowercase;
  font-size: 12.5px; color: rgba(255, 255, 255, .5);
  white-space: nowrap; pointer-events: none;
}
.urb-motto--left  { left: 16px;  transform: translateY(-50%) rotate(180deg); }
.urb-motto--right { right: 16px; transform: translateY(-50%); }
@media (max-width: 1000px) { .urb-motto { display: none; } }

/* meta — the data voice */
.urb-meta {
  font-family: var(--urb-font-tech);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--urb-grey);
}
.urb-band--purple .urb-meta { color: rgba(255, 255, 255, .75); }

/* arrow links — bold, tracked, no underline */
body.theme--urb .urb-arrow-link {
  font-family: var(--urb-font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  color: var(--urb-purple);
  text-decoration: none;
  white-space: nowrap;
}
body.theme--urb .urb-arrow-link:hover { color: var(--urb-purple-deep); }
body.theme--urb .urb-band--purple .urb-arrow-link { color: #fff; }
body.theme--urb .urb-band--purple .urb-arrow-link:hover { color: rgba(255, 255, 255, .8); }

/* pagination */
.urb-pagination, .urb-pagelinks { margin-top: 34px; font-weight: 700; }
.urb-pagination .page-numbers {
  display: inline-block; min-width: 40px; text-align: center;
  padding: 8px 10px; border: 1px solid var(--urb-line); color: var(--urb-ink);
}
.urb-pagination .page-numbers.current { background: var(--urb-purple); color: #fff; border-color: var(--urb-purple); }