/* ════════════════════════════════════════════════════════════════════
   ClickUpLocal 3.0 design system.
   One set of tokens and components, taken from the canvas mockups.
   Every page is being moved onto these (prefix ui-). Old page styles
   are removed as each page moves over.

   Rules: 5px corners on everything (circles only for avatars), no pill
   shapes, navy + orange on white and light blue, Poppins for headings,
   DM Sans for text, 1280px content width.
   ════════════════════════════════════════════════════════════════════ */

/* Fonts, hosted in the theme (Latin only). Before this, nothing loaded them
   and visitors got a fallback font. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dm-sans.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700.woff2) format('woff2'); }

:root {
	/* Colour */
	--ui-navy:        #1B3A5C;
	--ui-navy-dark:   #152E4A;
	/* One orange (Nov 14 panel): every tap button is the dark orange. The old
	   bright #E87722 measured 2.96:1 behind white text and failed AA. */
	--ui-orange:      #BC5A0E;   /* buttons */
	--ui-orange-dark: #BC5A0E;   /* orange text on white (passes AA) */
	--ui-orange-hover:#9F4B0B;   /* button hover, a shade darker */
	--ui-ink:         #1A1A2E;   /* body text */
	--ui-muted:       #55657A;   /* secondary text */
	--ui-line:        #E3EAF2;   /* card borders, dividers */
	--ui-line-strong: #D0DCE8;   /* input and chip borders */
	--ui-page:        #EEF4FB;   /* light blue page and wells */
	--ui-white:       #FFFFFF;
	--ui-success:     #2D7A4F;
	--ui-success-bg:  #E6F4EC;
	--ui-danger:      #A32D2D;
	--ui-danger-bg:   #FBEAEA;
	--ui-warn:        #9A4A0B;
	--ui-warn-bg:     #FDF0E6;
	--ui-orange-line: #F4D6B8;   /* border on orange-tinted boxes */
	--ui-success-line:#CFE6DA;   /* border on green-tinted boxes */

	/* Type */
	--ui-font:         'DM Sans', system-ui, -apple-system, sans-serif;
	--ui-font-display: 'Poppins', system-ui, sans-serif;
	--ui-text:   1.0625rem;   /* 17px body */
	--ui-small:  0.95rem;
	--ui-xsmall: 0.85rem;
	--ui-h1:  clamp(2rem, 1.5rem + 2vw, 2.6rem);
	--ui-h1-hero: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	--ui-h2:  clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--ui-h3:  1.15rem;

	/* Space (4px steps) */
	--ui-s1: 4px;  --ui-s2: 8px;  --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px;
	--ui-s6: 24px; --ui-s7: 28px; --ui-s8: 32px; --ui-s10: 40px; --ui-s12: 48px;
	--ui-s16: 64px; --ui-s20: 80px;

	/* Shape */
	--ui-radius: 5px;
	--ui-ring:   0 0 0 1px rgba(27, 58, 92, .08);
	--ui-lift:   0 6px 24px rgba(22, 50, 79, .10);

	/* Layout */
	--ui-width:  1280px;
	--ui-gutter: 20px;
	--ui-control: 48px;   /* button and field height */
}
@media (max-width: 600px) {
	:root { --ui-gutter: 16px; }
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.ui-wrap { width: 100%; max-width: var(--ui-width); margin-inline: auto; padding-inline: var(--ui-gutter); box-sizing: border-box; }
.ui-section { padding-block: var(--ui-s16) var(--ui-s6); }
.ui-section--tight { padding-block: var(--ui-s10); }
.ui-section--last { padding-bottom: var(--ui-s20); }
.ui-band { background: var(--ui-page); }
.ui-band--navy { background: var(--ui-navy); color: var(--ui-white); }
.ui-grid { display: grid; gap: var(--ui-s6); }
.ui-grid-2 { display: grid; gap: var(--ui-s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid-3 { display: grid; gap: var(--ui-s6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-4 { display: grid; gap: var(--ui-s5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-split { display: grid; gap: var(--ui-s10); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ui-sidebar-layout { display: grid; gap: var(--ui-s7); grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-s5); }
.ui-row { display: flex; gap: var(--ui-s3); align-items: center; flex-wrap: wrap; }
.ui-between { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ui-s5); flex-wrap: wrap; }
@media (max-width: 1024px) { .ui-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .ui-sidebar-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px)  { .ui-grid-3, .ui-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px)  { .ui-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px)  { .ui-grid-4 { grid-template-columns: minmax(0, 1fr); } .ui-section { padding-block: var(--ui-s10) var(--ui-s4); } }

/* ── Type ───────────────────────────────────────────────────────────── */
.ui-kicker { margin: 0; color: var(--ui-navy); font: 600 .9rem/1.4 var(--ui-font); }
.ui-h1, .ui-h1-hero, .ui-h2, .ui-h3 { margin: 0; font-family: var(--ui-font-display); font-weight: 600; color: var(--ui-navy); letter-spacing: -.015em; text-wrap: balance; }
.ui-h1 { font-size: var(--ui-h1); line-height: 1.15; }
.ui-h1-hero { font-size: var(--ui-h1-hero); line-height: 1.12; font-weight: 700; }
.ui-h2 { font-size: var(--ui-h2); line-height: 1.2; }
.ui-h3 { font-size: var(--ui-h3); line-height: 1.3; }
.ui-lede { margin: 0; color: var(--ui-muted); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
.ui-muted { color: var(--ui-muted); }
.ui-small { font-size: var(--ui-small); }
.ui-on-navy .ui-h1, .ui-on-navy .ui-h1-hero, .ui-on-navy .ui-h2, .ui-on-navy .ui-h3 { color: var(--ui-white); }
.ui-on-navy .ui-lede, .ui-on-navy .ui-muted { color: rgba(255, 255, 255, .85); }
.ui-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ui-s5); margin-bottom: var(--ui-s7); flex-wrap: wrap; }
.ui-link { color: var(--ui-navy); font: 600 1rem var(--ui-font-display); text-decoration: none; }
.ui-link:hover { text-decoration: underline; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2); min-height: var(--ui-control); padding: 0 22px;
	border: 0; border-radius: var(--ui-radius); background: var(--ui-orange); color: var(--ui-white); font: 600 1rem/1 var(--ui-font-display);
	text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background-color .15s ease, box-shadow .15s ease; }
.ui-btn:hover { background: var(--ui-orange-hover); color: var(--ui-white); text-decoration: none; }
.ui-btn:focus-visible { outline: 3px solid rgba(232, 119, 34, .45); outline-offset: 2px; }
.ui-btn--navy { background: var(--ui-navy); }
.ui-btn--navy:hover { background: var(--ui-navy-dark); }
.ui-btn--ghost { background: var(--ui-white); color: var(--ui-navy); box-shadow: inset 0 0 0 1.5px var(--ui-line-strong); }
.ui-btn--ghost:hover { background: var(--ui-white); color: var(--ui-navy); box-shadow: inset 0 0 0 1.5px var(--ui-navy); }
.ui-btn--on-navy { background: transparent; color: var(--ui-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.ui-btn--on-navy:hover { background: rgba(255, 255, 255, .1); }
.ui-btn--sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.ui-card { background: var(--ui-white); border-radius: var(--ui-radius); box-shadow: var(--ui-ring); }
.ui-card--pad { padding: var(--ui-s6); }
.ui-card--pad-lg { padding: var(--ui-s7); }
.ui-card--line { box-shadow: none; border: 1px solid var(--ui-line); }
.ui-card--navy { background: var(--ui-navy); color: var(--ui-white); box-shadow: none; }

/* Media card: photo on top, body below (offers, events, posts). */
.ui-mcard { display: flex; flex-direction: column; background: var(--ui-white); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; color: inherit; text-decoration: none; }
a.ui-mcard:hover { border-color: #B9C9DB; }
.ui-mcard__img { display: block; width: 100%; height: 190px; object-fit: cover; background: #DFE7F0 center / cover no-repeat; }
.ui-mcard__img--ph { background: repeating-linear-gradient(135deg, #E6EDF5 0 14px, #EDF2F8 14px 28px); }
.ui-mcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--ui-s5); }
.ui-mcard__title { margin: 0; font: 600 1.15rem/1.3 var(--ui-font-display); color: var(--ui-navy); }
.ui-mcard__title a { color: inherit; text-decoration: none; }
.ui-mcard__title a:hover { text-decoration: underline; }
.ui-mcard__meta { margin: 0; color: var(--ui-muted); font-size: var(--ui-small); }
.ui-mcard__note { margin: 0; color: var(--ui-navy); font-size: var(--ui-xsmall); font-weight: 600; }
.ui-mcard__foot { margin-top: auto; padding-top: var(--ui-s3); }

/* Row item: small photo left, text right (events, lists). */
.ui-ritem { display: flex; gap: var(--ui-s4); align-items: center; color: inherit; text-decoration: none; }
.ui-ritem__img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--ui-radius); object-fit: cover; background: #DFE7F0 center / cover no-repeat; }
.ui-ritem__when { margin: 0; color: var(--ui-navy); font-weight: 600; font-size: .9rem; }
.ui-ritem__title { margin: 0; font: 600 1.05rem/1.35 var(--ui-font-display); color: var(--ui-navy); }

/* ── Chips (filters, tabs) — square-cornered, never pills ──────────── */
.ui-chips { display: flex; gap: var(--ui-s2); flex-wrap: wrap; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line-strong);
	background: var(--ui-white); color: var(--ui-navy); font: 600 .9rem/1.2 var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-chip:hover { border-color: var(--ui-navy); color: var(--ui-navy); }
.ui-chip.is-on, .ui-chip[aria-current="page"], .ui-chip[aria-pressed="true"] { background: var(--ui-navy); border-color: var(--ui-navy); color: var(--ui-white); }
@media (max-width: 600px) {
	.ui-chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--ui-gutter)); padding-right: var(--ui-gutter); scrollbar-width: none; }
	.ui-chips--scroll::-webkit-scrollbar { display: none; }
}

/* ── Badges and notices ─────────────────────────────────────────────── */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ui-radius); font: 600 .78rem/1.5 var(--ui-font); background: var(--ui-page); color: var(--ui-navy); }
.ui-badge--orange { background: var(--ui-navy); color: var(--ui-white); }
.ui-badge--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-badge--ok { background: var(--ui-success-bg); color: var(--ui-success); }
.ui-notice { padding: 14px 16px; border-radius: var(--ui-radius); background: var(--ui-page); color: var(--ui-ink); font-size: var(--ui-small); }
.ui-notice--ok { background: var(--ui-success-bg); color: var(--ui-success); }
.ui-notice--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-notice--error { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.ui-label { display: block; margin-bottom: 6px; font: 600 .9rem var(--ui-font); color: var(--ui-navy); }
.ui-input, .ui-select, .ui-textarea { display: block; width: 100%; box-sizing: border-box; min-height: var(--ui-control); padding: 0 14px;
	border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius); background: var(--ui-white); color: var(--ui-ink); font: 400 1rem var(--ui-font); }
.ui-textarea { padding: 12px 14px; min-height: 120px; line-height: 1.5; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: 0; border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(27, 58, 92, .12); }
.ui-hint { margin: 6px 0 0; color: var(--ui-muted); font-size: var(--ui-xsmall); }
/* Joined field + button (search, email sign-up, claim box). */
.ui-joined { display: flex; background: var(--ui-white); border-radius: var(--ui-radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
.ui-joined .ui-input { border: 0; border-radius: 0; flex: 1; min-width: 0; box-shadow: none; }
.ui-joined .ui-btn { border-radius: 0; }
.ui-band--navy .ui-joined, .ui-on-navy .ui-joined { box-shadow: none; }

/* ── Page header (kicker, title, lede) ──────────────────────────────── */
.ui-pagehead { padding-block: var(--ui-s16) var(--ui-s6); }
.ui-pagehead .ui-h1 { margin: 6px 0 10px; }
@media (max-width: 600px) { .ui-pagehead { padding-block: var(--ui-s8) var(--ui-s3); } }

/* ── Photo strip used for heroes over images ────────────────────────── */
.ui-hero { position: relative; overflow: hidden; background: var(--ui-navy-dark); color: var(--ui-white); }
.ui-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.ui-hero__inner { position: relative; padding-block: var(--ui-s20); }
@media (max-width: 600px) { .ui-hero__inner { padding-block: var(--ui-s12); } }

/* ── Page defaults ──────────────────────────────────────────────────── */
:where(body) { font-family: var(--ui-font); color: var(--ui-ink); }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--ui-font-display); }

/* ── Page-wide safety: nothing pushes the page sideways on phones ───── */
:where(p, li, dd, td, th, blockquote, h1, h2, h3, h4, figcaption) { overflow-wrap: anywhere; }
:where(img, video, iframe, embed) { max-width: 100%; }
:where(.entry-content, .page-content) table { display: block; max-width: 100%; overflow-x: auto; }

/* ── Utilities ──────────────────────────────────────────────────────── */
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-mt0 { margin-top: 0; } .ui-mt2 { margin-top: var(--ui-s2); } .ui-mt4 { margin-top: var(--ui-s4); } .ui-mt6 { margin-top: var(--ui-s6); }
.ui-center { text-align: center; }