/* ==========================================================================
   allwhere Help Center — design layer over Copenhagen 4.50.4

   Loaded AFTER Copenhagen's style.css (see templates/document_head.hbs), so
   these rules win. Copenhagen's own stylesheet is untouched, which keeps future
   Zendesk theme updates easy to merge.

   Palette + type follow the allwhere Product Design System:
   amber #F9C54D · ink #131414 · cream #FCFAF6 · white hairline cards
   PP Pangram Sans (display) + Inter (UI) · Material Symbols icons
   ========================================================================== */

:root {
  --aw-amber: #F9C54D;
  --aw-amber-press: #F0B638;
  --aw-ink: #131414;
  --aw-teal: #4DB7C6;
  --aw-moss: #53853C;
  --aw-cream: #FCFAF6;
  --aw-surface: #FFFFFF;
  --aw-muted: #F5F5F5;
  --aw-line: rgba(19, 20, 20, 0.09);
  --aw-line-2: #EEEEEE;
  --aw-fg: #131414;
  --aw-fg-2: rgba(19, 20, 20, 0.62);
  --aw-fg-3: rgba(19, 20, 20, 0.45);
  --aw-hairline: 0 0 0 1px var(--aw-line);
  --aw-lift: 0 0 0 1px var(--aw-line), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14);
  --aw-display: "PP Pangram Sans", "Inter", system-ui, sans-serif;
  --aw-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --aw-ease: cubic-bezier(.4, 0, .2, 1);
  --aw-max: 1160px;
}

/* --- Base ---------------------------------------------------------------- */

body {
  background: var(--aw-cream);
  color: var(--aw-fg);
  font-family: var(--aw-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .page-header h1, .article-title {
  font-family: var(--aw-display);
  color: var(--aw-fg);
  letter-spacing: -.01em;
}

a { color: var(--aw-fg); }
a:hover, a:focus { color: var(--aw-fg); }
a:visited { color: var(--aw-fg); }

.container, .container-fluid { max-width: var(--aw-max); }
.container-divider { display: none; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* Buttons (Copenhagen .button / .button-primary) */
.button, .button-primary, input[type="submit"], button.button-large {
  border-radius: 999px;
  font-family: var(--aw-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2);
  background: transparent;
  color: var(--aw-fg);
  padding: 10px 20px;
  transition: background var(--aw-ease) 120ms;
}
.button:hover, button.button-large:hover { background: rgba(0,0,0,.04); color: var(--aw-fg); }
.button-primary, input[type="submit"] {
  background: var(--aw-amber);
  color: var(--aw-ink);
  box-shadow: none;
}
.button-primary:hover, input[type="submit"]:hover { background: var(--aw-amber-press); color: var(--aw-ink); }
:focus-visible { outline: 2px solid var(--aw-amber); outline-offset: 2px; }

/* --- Header -------------------------------------------------------------- */

.header {
  max-width: none;
  /* Mirror Copenhagen's .container box exactly: min(1160px, 90%) centered, so
     the wordmark lines up with the breadcrumb and article column at any width. */
  padding: 0 calc((100% - min(var(--aw-max), 90%)) / 2);
  flex-wrap: nowrap;
  height: 72px;
  background: var(--aw-cream);
  border-bottom: 1px solid rgba(19,20,20,.08);
  position: sticky; top: 0; z-index: 30;
}
.logo { height: auto; flex: none; }
/* Copenhagen colors .header .logo a with the brand color — override it so the
   wordmark stays ink, not amber. */
.header .logo a,
.header .logo a:hover,
.header .logo a:visited { color: var(--aw-ink); text-decoration: none; }
.aw-wordmark { display: flex; align-items: center; gap: 10px; }
.aw-wordmark__img { height: 20px; width: auto; display: block; }
.header .logo a .aw-wordmark__brand { font-family: var(--aw-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--aw-ink); }
.header .logo a .aw-wordmark__suffix { font-family: var(--aw-display); font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: rgba(19,20,20,.4); }

.user-nav-list { gap: 8px; align-items: center; }
.user-nav a, .nav-wrapper-desktop a {
  font-size: 13.5px; font-weight: 500;
  color: rgba(19,20,20,.66);
  padding: 8px 12px;
  border-radius: 999px;
  transition: background var(--aw-ease) 120ms, color var(--aw-ease) 120ms;
}
.user-nav a:hover { color: var(--aw-fg); background: rgba(19,20,20,.05); }
.aw-portal-link { white-space: nowrap; }
.aw-portal-link::after {
  content: "north_east";
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  margin-left: 5px;
  vertical-align: -2px;
  opacity: .55;
}
.user-nav a::after, .user-nav-list a::after { display: none; }  /* kill the underline indicator */

.user-nav .submit-a-request,
.nav-wrapper-mobile .submit-a-request {
  background: var(--aw-amber);
  color: var(--aw-ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.user-nav .submit-a-request:hover { background: var(--aw-amber-press); color: var(--aw-ink); }

.ask-ai {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.18);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--aw-fg);
}
.ask-ai:hover { background: rgba(0,0,0,.04); }
.ask-ai-icon { color: var(--aw-ink); }

/* User menu: quiet pill, no garish default avatar tile */
.user-info { margin-left: 10px; position: relative; }
.user-info::before {
  content: "";
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 22px;
  background: rgba(19,20,20,.14);
}
.user-info .dropdown-toggle, .dropdown-toggle { color: rgba(19,20,20,.7); font-size: 13.5px; }
.user-info .dropdown-toggle {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 8px 0 14px;
  border: none; border-radius: 999px;
  background: transparent;
  font-weight: 500;
  max-width: 220px;
  transition: background var(--aw-ease) 120ms;
}
.user-info .dropdown-toggle:hover { background: rgba(19,20,20,.05); color: var(--aw-fg); }
.user-info .dropdown-toggle > span {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-info .dropdown-chevron-icon { flex: none; opacity: .5; }
/* Zendesk's default avatar is a multi-color letter tile — replace it with a
   flat amber initial circle. Real uploaded photos still show through. */
/* Zendesk's default avatar is a multi-color letter tile. Keep the header pill
   text-only; real photos still appear in profiles and comments. */
.user-info .dropdown-toggle .user-avatar { display: none; }
.user-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(19,20,20,.12);
  object-fit: cover;
}
.dropdown-menu {
  border: none;
  border-radius: 8px;
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14);
  padding: 6px;
}
.dropdown-menu a { border-radius: 4px; font-size: 13.5px; padding: 9px 12px; }
.dropdown-menu a:hover { background: rgba(0,0,0,.04); }

/* --- Search field (Copenhagen {{search}} markup) ------------------------- */

.search-container, .aw-searchwrap { position: relative; }
.search-container .search-icon, .aw-searchwrap .search-icon { display: none; }

form.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 18px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(19,20,20,.1);
}
form.search::before {
  content: "search";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: rgba(19,20,20,.4);
  flex: none;
}
form.search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none !important;
  outline: none;
  background: transparent;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  font-family: var(--aw-sans);
  font-size: 15px;
  color: var(--aw-fg);
  box-shadow: none !important;
}
form.search input[type="search"]::placeholder { color: rgba(19,20,20,.4); }
form.search input[type="submit"], form.search button[type="submit"] {
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--aw-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
form.search input[type="submit"]:hover { background: #000; }
.search-full, form.search.search-full { max-width: 520px; }
.search-results-column form.search { max-width: 380px; }
/* Compact field for the breadcrumb row on section and article pages */
.sub-nav form.search {
  max-width: 300px;
  height: 40px;
  padding: 0 14px;
  gap: 8px;
}
.sub-nav form.search::before { font-size: 18px; }
.sub-nav form.search input[type="search"] { font-size: 14px; }
/* Copenhagen centers its search wrappers; keep ours left-aligned in flow */
.search-container, .sub-nav .search-container, .search-results-column .search-container { text-align: left; }
form.search { margin-left: 0; margin-right: auto; }

/* Instant-search dropdown */
.search-results-instant, .instant-results {
  border-radius: 8px;
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14);
  border: none;
}

/* --- Home: hero ---------------------------------------------------------- */

.aw-hero {
  position: relative;
  overflow: hidden;
  background: #F7EBC8;
  background-image: none;
  min-height: 0;
  padding: 0;
  margin: 0;
}
.aw-hero__ring { display: none; }
.aw-hero__inner {
  position: relative;
  max-width: var(--aw-max);
  margin: 0 auto;
  padding: 72px 40px 64px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.aw-hero__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.aw-hero__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--aw-display);
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--aw-ink);
}
.aw-hero__sub { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: rgba(19,20,20,.74); }
.aw-hero form.search { height: 56px; padding-left: 20px; max-width: 520px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.1); }
.aw-hero form.search input[type="search"] { font-size: 15.5px; }
.aw-hero form.search input[type="submit"] { height: 40px; padding: 0 20px; background: var(--aw-amber); color: var(--aw-ink); }
.aw-hero form.search input[type="submit"]:hover { background: var(--aw-amber-press); }

.aw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.aw-chips__label { font-size: 12.5px; color: rgba(19,20,20,.55); }
.aw-chip {
  font-size: 12.5px; font-weight: 500; padding: 5px 12px;
  border-radius: 999px; background: rgba(255,255,255,.55); color: var(--aw-ink);
}
.aw-chip:hover { background: #fff; color: var(--aw-ink); }

/* Hero art: globe + paper plane + sparkles (see templates/home_page.hbs) */
.aw-hero__art {
  flex: none;
  position: relative;
  width: 430px; height: 380px;
}
.aw-globe { position: absolute; left: 70px; top: 76px; width: 290px; height: 290px; }
.aw-globe__ring { position: absolute; inset: 0; border-radius: 999px; background: #F27058; border: 2px solid var(--aw-ink); }
.aw-globe__face { position: absolute; inset: 38px; border-radius: 999px; background: #4DB7C6; border: 2px solid var(--aw-ink); overflow: hidden; }
.aw-globe__land { position: absolute; background: #53853C; }
.aw-globe__land--a { left: -14px; top: 24px; width: 112px; height: 70px; border-radius: 52% 48% 44% 56%; }
.aw-globe__land--b { right: -2px; bottom: 22px; width: 100px; height: 84px; border-radius: 46% 54% 58% 42%; }
.aw-globe__land--c { left: 88px; top: 108px; width: 62px; height: 48px; border-radius: 50% 50% 46% 54%; }
.aw-globe__smiley { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); width: 76px; height: 73px; }
.aw-plane { position: absolute; left: -58px; top: 56px; width: 252px; height: 180px; overflow: visible; }
.aw-sparkle { position: absolute; }
.aw-sparkle--1 { right: 16px;  top: 96px;     width: 34px; height: 34px; }
.aw-sparkle--2 { right: 66px;  top: 52px;     width: 22px; height: 22px; }
.aw-sparkle--3 { right: 36px;  top: 172px;    width: 16px; height: 16px; }
.aw-sparkle--4 { left: 22px;   bottom: 74px;  width: 26px; height: 26px; }
.aw-sparkle--5 { left: 56px;   bottom: 26px;  width: 15px; height: 15px; }
.aw-sparkle--6 { right: 106px; bottom: 36px;  width: 19px; height: 19px; }
.aw-hero__art img { display: block; }
.aw-error__art {
  flex: none;
  width: 200px; height: 190px;
  border-radius: 16px;
  background: rgba(249,197,77,.16);
  display: flex; align-items: center; justify-content: center;
}
  left: 36px; top: 44px; width: 118px; height: 118px;
  border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.aw-art__disc {
  width: 118px; height: 118px;
  border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* --- Home: topic grid (Copenhagen .blocks-*) ---------------------------- */

.section.knowledge-base { margin-top: 52px; }
.aw-sectionhead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.aw-sectionhead h2 { margin: 0; font-size: 22px; font-weight: 500; }
.aw-sectionhead span { font-size: 13px; color: var(--aw-fg-3); }

.blocks-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.blocks-item { width: auto; margin: 0; border: none; border-radius: 8px; }
.blocks-item-link:focus { box-shadow: 0 0 0 1px var(--aw-line), 0 0 0 3px var(--aw-amber); }
.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
  height: 100%;
  min-height: 122px;
  padding: 22px;
  border: none;
  border-radius: 8px;
  background: var(--aw-surface);
  box-shadow: var(--aw-hairline);
  text-align: left;
  transition: box-shadow var(--aw-ease) 200ms;
}
.blocks-item-link:hover { box-shadow: var(--aw-lift); }
.blocks-item-icon {
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  color: var(--aw-ink);
  margin-bottom: auto;
}
.blocks-item-title {
  font-family: var(--aw-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--aw-fg);
}
.blocks-item-description { display: none; }   /* topic names carry the page; descriptions live on the section */

/* Promoted articles + recent activity */
.section.knowledge-base .articles { margin-top: 56px; }
.section.knowledge-base .articles h2 {
  margin: 0 0 22px;
  font-family: var(--aw-display);
  font-size: 22px; font-weight: 500;
}
.promoted-articles, .article-list, .recent-activity-list { list-style: none; padding: 0; }
.promoted-articles {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Copenhagen puts these in three 33% columns; we want full-width rows */
.promoted-articles-item {
  border-bottom: 1px solid var(--aw-line-2);
  width: 100% !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  padding: 0 !important;
}
.promoted-articles-item:last-child { border-bottom: none; }
.promoted-articles-item:hover { background: rgba(0,0,0,.02); }
.promoted-articles-item a {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 22px !important;
  border-bottom: none !important;
  font-size: 14.5px; font-weight: 500;
}
.promoted-articles-item a::after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: rgba(19,20,20,.28);
  margin-left: auto;
  flex: none;
}
.recent-activity-item-link {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; padding: 12px 0;
  border-bottom: 1px solid var(--aw-line-2);
}
.section.home-section h2, .recent-activity-header { font-size: 22px; font-weight: 500; }
.section.home-section { margin-top: 56px; }

/* Contact strip */
.aw-contact {
  margin: 56px 0 0;
  background: var(--aw-surface);
  box-shadow: var(--aw-hairline);
  border-radius: 12px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.aw-contact__stars { flex: none; width: 96px; height: 45px; }
.aw-contact__title { margin: 0 0 6px; font-family: var(--aw-display); font-size: 20px; font-weight: 500; color: var(--aw-fg); }
.aw-contact__sub { margin: 0; font-size: 14px; color: var(--aw-fg-2); }
.aw-contact__mail { font-size: 13.5px; font-weight: 500; color: var(--aw-fg); border-bottom: 1px solid rgba(249,197,77,.9); }
.aw-contact__mail:hover { color: var(--aw-fg); border-bottom-color: var(--aw-ink); }
.aw-contact .aw-btn-amber {
  background: var(--aw-amber); color: var(--aw-ink);
  padding: 11px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; flex: none;
}
.aw-contact .aw-btn-amber:hover { background: var(--aw-amber-press); color: var(--aw-ink); }
.aw-spacer { flex: 0 0 0; }
/* The mail link carries the auto margin; a greedy flex:1 spacer would push the
   button onto its own line before the row is actually full. */
.aw-contact__mail { margin-left: auto; flex: none; }

/* Small globe-and-sparkle mark, used in section headers */
.section-content { position: relative; }
.aw-minimark {
  position: absolute; right: 0; top: 14px;
  width: 140px; height: 106px; pointer-events: none;
}
.aw-minimark__ring { position: absolute; right: 0; top: 12px; width: 94px; height: 94px; border-radius: 999px; background: #F27058; border: 2px solid var(--aw-ink); }
.aw-minimark__face { position: absolute; right: 17px; top: 29px; width: 60px; height: 60px; border-radius: 999px; background: #4DB7C6; border: 2px solid var(--aw-ink); overflow: hidden; }
.aw-minimark__land { position: absolute; background: #53853C; }
.aw-minimark__land--a { left: -6px; top: 9px; width: 38px; height: 24px; border-radius: 52% 48% 44% 56%; }
.aw-minimark__land--b { right: 0; bottom: 6px; width: 33px; height: 24px; border-radius: 46% 54% 58% 42%; }
.aw-minimark__sparkle { position: absolute; }
.aw-minimark__sparkle--a { left: 14px; top: 0; width: 26px; height: 26px; }
.aw-minimark__sparkle--b { left: 36px; bottom: 8px; width: 17px; height: 17px; }

/* Sparkle cluster before the article vote prompt */
.aw-votes-sparkle { flex: none; width: 34px; height: 24px; display: block; }

/* Paper plane in the article header (markup lives in article_page.hbs) */
.article-header { position: relative; }
.aw-article-plane {
  position: absolute;
  right: 0; top: -14px;
  width: 190px; height: 110px;
  pointer-events: none;
}
@media (max-width: 1040px) {
  .aw-minimark, .aw-article-plane { display: none; }
}

.sub-nav {
  border: none;
  padding: 24px 0 0;
  margin-bottom: 22px;
  background: transparent;
  box-shadow: none;
}
.breadcrumbs { margin: 0; font-size: 12.5px; }
.breadcrumbs li { color: rgba(19,20,20,.5); }
.breadcrumbs li:last-child a, .breadcrumbs li:last-child { font-weight: 500; color: var(--aw-fg); }
.breadcrumbs li + li::before { content: "›"; opacity: .5; }

/* Subsections rendered with their articles inline (section_page.hbs) */
.aw-subsection + .aw-subsection { margin-top: 26px; }
.aw-subsection__head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 10px;
}
.aw-subsection__head--loose { margin-top: 26px; }
.aw-subsection__title {
  font-family: var(--aw-display);
  font-size: 18px; font-weight: 500;
  color: var(--aw-fg);
}
a.aw-subsection__title:hover { color: var(--aw-fg); }
.aw-subsection__all {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  font-size: 12.5px; font-weight: 500;
  color: var(--aw-fg-3);
}
.aw-subsection__all:hover { color: var(--aw-fg); }

/* Escape hatch under the section article list */
.aw-section-prompt {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px; padding: 18px 22px;
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
}
.aw-section-prompt .material-symbols-outlined { font-size: 20px; color: var(--aw-fg-3); flex: none; }
.aw-section-prompt__text { flex: 1; font-size: 14px; color: var(--aw-fg-2); }
.aw-section-prompt__btn {
  flex: none; white-space: nowrap;
  padding: 9px 17px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2);
  font-size: 13px; font-weight: 500; color: var(--aw-fg);
}
.aw-section-prompt__btn:hover { background: rgba(0,0,0,.04); color: var(--aw-fg); }

/* --- Section page ------------------------------------------------------- */

.section-container { display: flex; gap: 56px; align-items: flex-start; }
.section-content { flex: 1; min-width: 0; }
.page-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; padding-right: 150px; }
.page-header h1 { margin: 0; font-size: 36px; font-weight: 500; display: flex; align-items: center; gap: 14px; }
.aw-title-icon { font-size: 27px; color: var(--aw-ink); flex: none; }
.page-header-description { margin: 0; max-width: 78ch; font-size: 15.5px; line-height: 1.65; color: var(--aw-fg-2); }
.section-subscribe { order: 3; }

.article-list, .section-list {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  overflow: hidden;
  margin: 0;
}
.article-list-item, .section-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-bottom: 1px solid var(--aw-line-2);
}
.article-list-item:last-child, .section-list-item:last-child { border-bottom: none; }
.article-list-item:hover, .section-list-item:hover { background: rgba(0,0,0,.02); }
.article-list-link, .section-list-item a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  font-size: 14.5px;
  font-weight: 500;
  border: none;
}
.article-list-link::after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: rgba(19,20,20,.28);
  margin-left: auto;
  flex: none;
  transition: transform var(--aw-ease) 120ms, color var(--aw-ease) 120ms;
}
.article-list-item:hover .article-list-link::after { color: var(--aw-fg); transform: translateX(2px); }
.article-list-item .icon-star { margin-left: 22px; color: var(--aw-amber); }
.article-list-item .icon-lock { margin-right: 22px; color: var(--aw-fg-3); }

/* Topic sidebar (injected by allwhere.js) */
.aw-side { order: -1; flex: none; width: 252px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.aw-side__card { background: var(--aw-surface); border-radius: 8px; box-shadow: var(--aw-hairline); overflow: hidden; }
.aw-side__head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--aw-line-2);
}
.aw-side__head .material-symbols-outlined { font-size: 17px; color: rgba(19,20,20,.45); }
.aw-eyebrow {
  font-family: var(--aw-display);
  font-size: 11px; font-weight: 700; letter-spacing: .083em;
  text-transform: uppercase; color: var(--aw-fg-3);
}
.aw-side__nav { padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.aw-side__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 4px;
  font-size: 13.5px; color: rgba(19,20,20,.7);
}
.aw-side__nav a .material-symbols-outlined { font-size: 17px; color: rgba(19,20,20,.38); }
.aw-side__nav a:hover { background: rgba(0,0,0,.045); color: var(--aw-fg); }
.aw-side__nav a[aria-current="true"] {
  background: rgba(249,197,77,.22);
  font-weight: 600;
  color: var(--aw-fg);
}
.aw-side__nav a[aria-current="true"] .material-symbols-outlined { color: var(--aw-ink); }
.aw-side__support { padding: 0 4px; display: flex; flex-direction: column; gap: 8px; }
.aw-side__support p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--aw-fg-3); }
.aw-side__support a {
  display: block; text-align: center;
  padding: 9px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2);
  font-size: 12.5px; font-weight: 500;
}
.aw-side__support a:hover { background: rgba(0,0,0,.04); }

/* --- Article page ------------------------------------------------------- */

.article-container { display: flex; gap: 48px; align-items: flex-start; }
.article-sidebar { flex: none; width: 252px; position: sticky; top: 96px; }
.collapsible-sidebar {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  padding: 0;
  border: none;
}
.collapsible-sidebar-title, .sidenav-title {
  display: block;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--aw-line-2);
  font-family: var(--aw-display);
  font-size: 11px; font-weight: 700; letter-spacing: .083em;
  text-transform: uppercase; color: var(--aw-fg-3);
}
.collapsible-sidebar-body { padding: 8px; }
.collapsible-sidebar-body ul { list-style: none; margin: 0; padding: 0; }
.sidenav-item {
  display: block;
  padding: 9px 11px;
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(19,20,20,.7);
  border: none;
}
.sidenav-item:hover { background: rgba(0,0,0,.045); color: var(--aw-fg); }
.article-sidebar-item {
  display: block;
  padding: 11px 11px 4px;
  font-family: var(--aw-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--aw-fg);
  border: none;
}
.article-sidebar-item:hover { color: var(--aw-fg); text-decoration: underline; text-underline-offset: 3px; }
.sidenav-item.current-article, .sidenav-item.current, .sidenav-item[aria-current] {
  background: rgba(249,197,77,.22);
  font-weight: 600;
  color: var(--aw-fg);
}

.article { flex: 1; min-width: 0; max-width: 760px; }
.article-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; position: relative; padding-right: 210px; }
.article-title { margin: 0; font-size: 38px; font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.article-author { align-items: center; gap: 10px; }
.article-avatar img { border-radius: 999px; }
.article-meta, .meta-data { font-size: 12.5px; color: var(--aw-fg-3); }

/* Author-written body: everything below styles plain editor output */
.article-body { font-size: 15.5px; line-height: 1.7; color: rgba(19,20,20,.82); }
.article-body > * + * { margin-top: 18px; }
.article-body h2 {
  margin: 34px 0 0;
  scroll-margin-top: 96px;
  font-family: var(--aw-display);
  font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -.005em;
  color: var(--aw-fg);
}
.article-body h3 {
  margin: 26px 0 0;
  scroll-margin-top: 96px;
  font-family: var(--aw-sans);
  font-size: 17px; font-weight: 700;
  color: var(--aw-fg);
}
.article-body h4 { margin: 22px 0 0; font-family: var(--aw-sans); font-size: 15px; font-weight: 600; }
.article-body p { margin: 0; }
.article-body ul, .article-body ol { margin: 0; padding-left: 22px; }
.article-body li { line-height: 1.65; margin-bottom: 8px; }
.article-body strong { font-weight: 600; color: var(--aw-fg); }
.article-body a { color: var(--aw-fg); border-bottom: 1px solid rgba(249,197,77,.9); text-decoration: none; }
.article-body a:hover { border-bottom-color: var(--aw-ink); }
.article-body img { border-radius: 8px; box-shadow: var(--aw-hairline); }
.article-body hr { border: none; border-top: 1px solid var(--aw-line-2); margin: 30px 0; }
.article-body blockquote {
  margin: 0; padding: 20px 24px;
  background: rgba(77,183,198,.10);
  border-radius: 0 8px 8px 0;
  border: none;
  border-left: 4px solid var(--aw-teal);
  color: rgba(19,20,20,.82);
}
.article-body blockquote p:first-child { margin-top: 0; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--aw-muted);
  padding: 2px 6px; border-radius: 4px;
}
.article-body pre {
  background: var(--aw-ink); color: #fff;
  padding: 18px; border-radius: 8px;
  overflow-x: auto; font-size: 13px; line-height: 1.6;
}
.article-body pre code { background: none; color: inherit; padding: 0; }

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  box-shadow: var(--aw-hairline);
  border-radius: 8px;
  overflow: hidden;
}
.article-body table th, .article-body table td { border: none; }
.article-body thead th {
  background: var(--aw-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #E0E0E0;
  font-family: var(--aw-sans);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--aw-fg-3);
}
.article-body tbody td { padding: 11px 12px; border-bottom: 1px solid var(--aw-line-2); }
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody td:first-child { font-weight: 500; color: var(--aw-fg); }
.article-body th:not(:first-child), .article-body td:not(:first-child) { text-align: center; }

/* Native accordions — work inside article bodies with no JS */
.article-body details {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  overflow: hidden;
}
.article-body details + details { margin-top: 12px; }
.article-body summary {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--aw-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--aw-fg);
}
.article-body summary::-webkit-details-marker { display: none; }
.article-body summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  margin-left: auto;
  font-size: 22px;
  color: var(--aw-fg-3);
  transition: transform var(--aw-ease) 200ms;
}
.article-body details[open] summary::after { transform: rotate(180deg); }
.article-body details > *:not(summary) { padding-left: 20px; padding-right: 20px; }
.article-body details > *:not(summary):first-of-type { border-top: 1px solid var(--aw-line-2); padding-top: 16px; margin-top: 0; }
.article-body details > *:last-child { padding-bottom: 20px; }

/* Author snippet classes — documented in AUTHORING.md */
.aw-callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 8px;
  background: rgba(249,197,77,.16);
  color: rgba(19,20,20,.72);
  font-size: 14.5px; line-height: 1.6;
}
.aw-callout::before {
  content: "info";
  font-family: "Material Symbols Outlined";
  font-size: 20px; color: var(--aw-ink); flex: none;
}
.aw-callout--warning { background: rgba(249,197,77,.14); box-shadow: inset 0 0 0 1px rgba(249,197,77,.55); }
.aw-callout--warning::before { content: "warning"; color: #7A5C08; }
.aw-callout--info { background: var(--aw-muted); }
.aw-callout__title { display: block; font-weight: 600; color: var(--aw-fg); margin-bottom: 4px; }

.aw-status {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.aw-status--supported { background: rgba(83,133,60,.12); color: var(--aw-moss); }
.aw-status--beta { background: rgba(249,197,77,.3); color: #7A5C08; }
.aw-status--none { color: rgba(19,20,20,.32); }

.aw-filterable__input {
  width: 100%; max-width: 320px; margin-bottom: 12px;
  padding: 10px 16px; border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.18);
  font-family: var(--aw-sans); font-size: 14px;
}
.aw-filterable__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--aw-amber); }

/* Table of contents (injected by allwhere.js) */
.aw-toc { margin-top: 14px; background: var(--aw-surface); border-radius: 8px; box-shadow: var(--aw-hairline); }
.aw-toc__title { display: block; padding: 14px 16px 12px; border-bottom: 1px solid var(--aw-line-2); }
.aw-toc ul { list-style: none; margin: 0; padding: 8px; }
.aw-toc a { display: block; padding: 7px 11px; border-radius: 4px; font-size: 13px; line-height: 1.45; color: rgba(19,20,20,.7); }
.aw-toc a:hover { background: rgba(0,0,0,.045); color: var(--aw-fg); }

/* Article footer bits */
/* Social share icons — hidden */
.share, .article-sharing { display: none !important; }

.article-votes {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  padding: 18px 20px;
  border: none;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin-top: 8px;
}
.article-votes-question {
  font-family: var(--aw-sans);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  flex: none;
}
.article-votes-controls { display: flex; gap: 8px; flex: none; }
.article-vote {
  border-radius: 999px;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2);
  background: transparent;
  color: var(--aw-fg);
  font-family: var(--aw-sans);
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  padding: 0 16px;
  width: auto;
  min-width: 0;
}
.article-vote:hover { background: rgba(0,0,0,.04); }
.article-vote.article-voted { background: rgba(249,197,77,.28); box-shadow: inset 0 0 0 1px var(--aw-amber); }
.article-votes-count {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--aw-fg-3);
  flex: none;
}
.article-more-questions, .article-return-to-top { font-size: 13.5px; color: var(--aw-fg-2); }
.article-relatives {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.article-relatives h3, .related-articles h3, .recent-articles h3 {
  font-family: var(--aw-display); font-size: 11px; font-weight: 700;
  letter-spacing: .083em; text-transform: uppercase; color: var(--aw-fg-3);
  margin: 0 0 12px;
}
.related-articles-list, .recent-articles-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.related-articles-list a, .recent-articles-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 0;
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.related-articles-list a::after, .recent-articles-list a::after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  color: rgba(19,20,20,.28);
  margin-left: auto;
  flex: none;
}
.related-articles-list a:hover, .recent-articles-list a:hover { background: rgba(0,0,0,.02); }
.article-comments, .comment { border-color: var(--aw-line-2); }
.comment-heading { font-size: 22px; font-weight: 500; }

/* --- Search results ---------------------------------------------------- */

.search-results { display: flex; gap: 48px; align-items: flex-start; }
.search-results-sidebar { flex: none; width: 252px; }
.search-results-column { flex: 1; min-width: 0; }
.search-results-subheading {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--aw-sans); font-size: 13.5px; font-weight: 400;
  color: rgba(19,20,20,.55);
  margin-bottom: 18px;
}
.aw-results-sparkle { flex: none; width: 16px; height: 16px; }
.search-results-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.search-results-list > li {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  padding: 18px 20px;
  border: none;
}
.search-results-list > li:hover { background: rgba(0,0,0,.015); }
/* Copenhagen prints title → meta → description; the design leads with the
   breadcrumb, so reorder visually rather than editing the template. */
.search-results-list article { display: flex; flex-direction: column; gap: 7px; }
.search-results-list header { display: flex; flex-direction: column; gap: 6px; }
.search-result-meta-container { order: -1; }
.search-result-title { margin: 0; }
.search-result-title a { font-family: var(--aw-display); font-size: 17px; font-weight: 500; }
.search-result-description { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--aw-fg-2); }
.search-result-breadcrumbs { margin: 0; font-size: 11.5px; color: var(--aw-fg-3); }
.search-result-breadcrumbs a { color: var(--aw-fg-3); }
.search-result-meta-container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search-result-author, .search-result-updated, .search-result-meta-container time { font-size: 11.5px; color: var(--aw-fg-3); }
.no-results { padding: 44px 34px; background: var(--aw-surface); border-radius: 8px; box-shadow: var(--aw-hairline); }
.no-results .headline { font-family: var(--aw-display); font-size: 22px; font-weight: 500; color: var(--aw-fg); }
/* Replace Copenhagen's line-art with the allwhere star sticker */
.no-results svg { display: none; }
.no-results::before {
  content: "";
  display: block;
  width: 118px; height: 55px;
  margin-bottom: 16px;
  background: url("aw-stars.png") no-repeat center / contain;
}
.multibrand-filter-list a { border: none; }

/* --- Forms (new request, wysiwyg bundle) ------------------------------- */

.form, #new-request-form {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  padding: 28px;
  max-width: 760px;
}
.form input[type="text"], .form input[type="email"], .form select, .form textarea,
#new-request-form input[type="text"], #new-request-form textarea, #new-request-form select {
  border-radius: 4px;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2);
  font-family: var(--aw-sans);
  font-size: 14px;
}
.form label, #new-request-form label { font-size: 13px; font-weight: 500; color: var(--aw-fg); }

/* Per-form description box (injected by new_request_page.hbs) */
.aw-form-description {
  background: rgba(249,197,77,.16);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 16px 0 8px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(19,20,20,.78);
}
.aw-form-description p { margin: 0; }
.aw-form-description a { color: var(--aw-fg); border-bottom: 1px solid rgba(19,20,20,.35); }

/* --- 404 --------------------------------------------------------------- */

.error-page {
  max-width: var(--aw-max);
  margin: 40px auto 80px;
  padding: 64px 48px;
  background: var(--aw-surface);
  border-radius: 12px;
  box-shadow: var(--aw-hairline);
  display: flex;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.aw-error__copy { flex: 1; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.error-page h1 { margin: 0; font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.error-page h2 { margin: 0; font-family: var(--aw-sans); font-size: 16px; font-weight: 500; color: var(--aw-fg-2); }
.error-page p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--aw-fg-2); }
.aw-error__actions { display: flex; gap: 10px; margin-top: 6px; }
.aw-error__actions a {
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
}
.aw-error__actions a:first-child { background: var(--aw-ink); color: #fff; }
.aw-error__actions a:first-child:hover { background: #000; color: #fff; }
.aw-error__actions a + a { box-shadow: inset 0 0 0 1px rgba(19,20,20,.2); }
.aw-error__actions a + a:hover { background: rgba(0,0,0,.04); }
.aw-error__art img { display: block; }

/* --- Footer ------------------------------------------------------------ */

.footer {
  background: #F7EBC8;
  color: rgba(19,20,20,.7);
  margin-top: 64px;
  padding: 0;
  border: none;
}
.footer .aw-footer-brand { display: inline-flex; align-items: center; }
.footer-inner {
  max-width: var(--aw-max);
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer a, .footer .dropdown-toggle { color: rgba(19,20,20,.7); font-size: 13px; }
.footer .aw-footer-wordmark { height: 26px; width: auto; display: block; }
.footer a:hover { color: var(--aw-ink); }
.footer .language-selector .dropdown-toggle { font-family: var(--aw-sans); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.footer-language-selector { margin-left: auto; }

/* --- Community ---------------------------------------------------------- */

.community-hero {
  background: #F7EBC8;
  background-image: none;
  height: auto;
  min-height: 0;
  padding: 44px 0;
  margin: 0;
  text-align: left;
}
.community-hero .hero-inner {
  max-width: var(--aw-max);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
}
.community-hero .search-icon { display: none; }
.community-hero form.search { max-width: 520px; height: 52px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.08); }

.page-header.community-header {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-right: 0;
  margin-bottom: 22px;
}
.community-header .dropdown-toggle {
  display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; padding: 0;
  cursor: pointer;
}
.community-header .title {
  margin: 0;
  font-family: var(--aw-display);
  font-size: 30px; font-weight: 500; letter-spacing: -.015em;
  color: var(--aw-fg);
}
.post-to-community { margin-left: auto; }
.post-to-community .button-large,
.community-footer .button-large {
  background: var(--aw-amber);
  color: var(--aw-ink);
  box-shadow: none;
  padding: 11px 20px;
  white-space: nowrap;
}
.post-to-community .button-large:hover,
.community-footer .button-large:hover { background: var(--aw-amber-press); color: var(--aw-ink); }

/* Topic cards keep their descriptions and counts, unlike the home tiles */
.topics-list .blocks-item-link { min-height: 150px; justify-content: flex-start; gap: 8px; }
.topics-list .blocks-item-icon { display: none; }
.topics-list .blocks-item-title { font-size: 18px; }
.topics-list .blocks-item-description {
  display: block;
  font-size: 13px; line-height: 1.55;
  color: var(--aw-fg-2);
}
.topics-list .meta-group {
  display: flex; gap: 14px;
  margin: auto 0 0; padding: 0;
  list-style: none;
}
.topics-list .meta-data { font-size: 12px; color: var(--aw-fg-3); }

/* Post list */
.posts-list.striped-list {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  overflow: hidden;
  margin: 0;
}
.posts-list ul { list-style: none; margin: 0; padding: 0; }
.striped-list-item {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--aw-line-2);
  background: transparent;
}
.posts-list li:last-child .striped-list-item { border-bottom: none; }
.striped-list-item:hover { background: rgba(0,0,0,.02); }
.striped-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.striped-list-title {
  font-family: var(--aw-display);
  font-size: 16px; font-weight: 500;
  color: var(--aw-fg);
}
.striped-list-info .meta-group { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.striped-list-info .meta-data { font-size: 12px; color: var(--aw-fg-3); }
.striped-list-count { display: flex; gap: 22px; flex: none; }
.striped-list-count-item {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: var(--aw-fg-3);
}
.striped-list-number {
  font-family: var(--aw-display);
  font-size: 17px; font-weight: 500;
  color: var(--aw-fg);
}
.post-featured { background: rgba(249,197,77,.08); }
.no-posts-with-filter { padding: 32px 22px; font-size: 14px; color: var(--aw-fg-2); }

/* Status pills */
.status-label {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--aw-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--aw-muted);
  color: var(--aw-fg-2);
}
.status-label-pinned, .status-label-featured { background: rgba(249,197,77,.3); color: #7A5C08; }
.status-label-answered, .status-label-completed { background: rgba(83,133,60,.12); color: var(--aw-moss); }
.status-label-official { background: var(--aw-ink); color: #fff; }
.status-label-pending, .status-label-pending-moderation { background: var(--aw-muted); color: var(--aw-fg-2); }

/* Featured posts + footer */
.community-featured-posts { margin-top: 56px; }
.community-featured-posts .title,
.community-activity .recent-activity-header {
  font-family: var(--aw-display);
  font-size: 22px; font-weight: 500;
  margin: 0 0 22px;
  text-align: left;
}
.community-footer {
  margin-top: 56px;
  padding: 34px;
  background: var(--aw-surface);
  border-radius: 12px;
  box-shadow: var(--aw-hairline);
  text-align: center;
}
.community-footer-title {
  font-family: var(--aw-display);
  font-size: 20px; font-weight: 500;
  margin: 0 0 16px;
}

/* Post page */
.post {
  background: var(--aw-surface);
  border-radius: 12px;
  box-shadow: var(--aw-hairline);
  padding: 30px 34px;
}
.post-header { display: flex; align-items: flex-start; gap: 20px; }
.post-title h1 {
  margin: 0;
  font-family: var(--aw-display);
  font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -.015em;
}
.post-info-container { margin-top: 18px; }
.post-author { display: flex; align-items: center; gap: 12px; }
.post-avatar .user-avatar, .comment-avatar .user-avatar { width: 34px; height: 34px; }
.post-meta { display: flex; flex-direction: column; gap: 3px; }
.post-meta .meta-group { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.post-meta .meta-data { font-size: 12px; color: var(--aw-fg-3); }
.post-body { font-size: 15.5px; line-height: 1.7; color: rgba(19,20,20,.82); }
.post-body > * + * { margin-top: 16px; }
.post-body a { color: var(--aw-fg); border-bottom: 1px solid rgba(249,197,77,.9); text-decoration: none; }
.post-footer { border-top: 1px solid var(--aw-line-2); margin-top: 22px; padding-top: 18px; }
.post-comment-count { font-size: 13px; color: var(--aw-fg-2); }

.vote a, .vote button {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.18);
  color: var(--aw-fg);
}
.vote-voted { background: rgba(249,197,77,.3); box-shadow: inset 0 0 0 1px var(--aw-amber); }
.vote-sum { font-family: var(--aw-display); font-weight: 500; }

/* Comments */
.comment-heading { font-family: var(--aw-display); font-size: 22px; font-weight: 500; }
.comment-callout { font-size: 13.5px; color: var(--aw-fg-3); }
.comment-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.comment { border: none; padding: 0; }
.comment-wrapper {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  padding: 20px 22px;
}
.comment-official.comment-wrapper,
.comment-wrapper.comment-official { box-shadow: 0 0 0 1px var(--aw-amber); background: rgba(249,197,77,.07); }
.comment-author { display: flex; align-items: center; gap: 12px; }
.comment-meta .meta-data, .comment-info .meta-data { font-size: 12px; color: var(--aw-fg-3); }
.comment-body { font-size: 15px; line-height: 1.65; color: rgba(19,20,20,.82); margin-top: 12px; }
.comment-body a { color: var(--aw-fg); border-bottom: 1px solid rgba(249,197,77,.9); }
.comment-form .comment-container { background: var(--aw-surface); border-radius: 8px; box-shadow: var(--aw-hairline); padding: 20px; }

/* Badges + content tags */
.community-badge-titles, .community-badge-achievements { display: flex; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.community-badge-title {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(249,197,77,.28); color: #7A5C08;
  padding: 2px 8px; border-radius: 999px;
}
.content-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.content-tag-item a {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 999px;
  background: var(--aw-muted); color: var(--aw-fg);
}
.content-tag-item a:hover { background: rgba(19,20,20,.08); }

/* Filters row */
.topic-header { margin-bottom: 16px; }
.topic-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.topic-filters .dropdown-toggle {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.18);
  background: transparent;
  font-size: 13px; font-weight: 500; color: var(--aw-fg);
  cursor: pointer;
}
.topic-filters .dropdown-toggle:hover { background: rgba(0,0,0,.04); }

/* Article summary block (Zendesk's <zd-summary-block> custom element) */
zd-summary-block {
  display: block;
  background: rgba(77, 183, 198, .1) !important;
  border: none !important;
  border-left: 4px solid var(--aw-teal) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 18px 22px !important;
  margin: 0 0 4px;
  color: rgba(19,20,20,.82);
}
zd-summary-block > *:first-child { margin-top: 0 !important; }
zd-summary-block > *:last-child { margin-bottom: 0 !important; }
zd-summary-block p { margin: 0; font-size: 15.5px; line-height: 1.65; }
zd-summary-block p + p { margin-top: 12px; }
zd-summary-block a { color: var(--aw-fg); border-bottom: 1px solid rgba(249,197,77,.9); text-decoration: none; }

/* --- Legacy HTML articles ----------------------------------------------
   Older articles were authored with hardcoded inline styles (their own fonts,
   navy blocks, centered table cells). Inline styles beat normal rules, so these
   overrides use !important to pull them back onto the allwhere system without
   editing every article. Remove this block if you ever clean the HTML up.
   ---------------------------------------------------------------------- */

/* 1. Fonts: ignore any hardcoded family, keep our pairing */
.article-body [style*="font-family"] { font-family: var(--aw-sans) !important; }
.article-body h1[style*="font-family"],
.article-body h2[style*="font-family"],
.article-body h3[style*="font-family"],
.article-body h4[style*="font-family"] { font-family: var(--aw-display) !important; }

/* 2. Tables: left-align and top-align every cell, kill fixed widths */
.article-body table[style] { width: 100% !important; max-width: 100% !important; }
.article-body td, .article-body th,
.article-body td[style], .article-body th[style] {
  text-align: left !important;
  vertical-align: top !important;
}
.article-body td[style*="center"], .article-body th[style*="center"] { text-align: left !important; }
/* status pills stay centered in their column */
.article-body td[align="center"]:has(.aw-status) { text-align: center !important; }

/* 3. Dark blocks: remap off-brand navies/purples to allwhere ink */
.article-body [style*="#3D3A6B" i],
.article-body [style*="#403C6B" i],
.article-body [style*="#3F3B6B" i],
.article-body [style*="#33306B" i],
.article-body [style*="rgb(61, 58, 107)"],
.article-body [style*="rgb(64, 60, 107)"] {
  background: var(--aw-ink) !important;
  border-radius: 8px !important;
}

/* 4. Summary / accent blocks: light allwhere teal instead of grey-blue */
.article-body [style*="border-left"] {
  border-left: 4px solid var(--aw-teal) !important;
  background: rgba(77,183,198,.10) !important;
  padding: 20px 24px !important;
  border-radius: 0 8px 8px 0 !important;
}
.article-body [style*="border-left"] p:first-child { margin-top: 0 !important; }
.article-body [style*="border-left"] p:last-child { margin-bottom: 0 !important; }

/* 5. Hardcoded greys/blues for body text → our ink scale */
.article-body p[style*="color"],
.article-body li[style*="color"],
.article-body span[style*="color"] { color: rgba(19,20,20,.82) !important; }
.article-body a[style*="color"] { color: var(--aw-fg) !important; }

/* 6. Radii and hairlines on inline-styled cards (never override an accent bar) */
.article-body div[style*="border"]:not([style*="border-left"]) { border-color: var(--aw-line-2) !important; }
.article-body div[style*="border-radius"] { border-radius: 8px !important; }

/* 7. Summary / accent blocks win last: light allwhere teal, teal bar */
.article-body blockquote,
.article-body [style*="border-left"],
.article-body [style*="border-Left"],
.article-body [style*="BORDER-LEFT"] {
  background: rgba(77,183,198,.10) !important;
  border-left: 4px solid var(--aw-teal) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 20px 24px !important;
  color: rgba(19,20,20,.82) !important;
}

/* --- Requests / My activities (Zendesk Garden React app) ----------------
   These pages are rendered by Zendesk's request-list module, so they can only
   be restyled through CSS. Garden's data-garden-id attributes are the hooks.
   ---------------------------------------------------------------------- */

.my-activities-header { margin: 32px 0 26px; }
.my-activities-header h1 {
  margin: 0;
  font-family: var(--aw-display);
  font-size: 36px; font-weight: 500; letter-spacing: -.015em;
}

/* Tabs */
[data-garden-id="tabs.tab_list"] {
  border-bottom: 1px solid var(--aw-line-2);
  gap: 4px;
}
[data-garden-id="tabs.tab"] {
  font-family: var(--aw-sans);
  font-size: 14px; font-weight: 500;
  color: var(--aw-fg-2);
  border: none !important;
  border-radius: 6px 6px 0 0;
  padding: 12px 16px;
  background: transparent !important;
}
[data-garden-id="tabs.tab"]:hover { color: var(--aw-fg); background: rgba(0,0,0,.03) !important; }
[data-garden-id="tabs.tab"][aria-selected="true"] {
  color: var(--aw-fg);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--aw-ink) !important;
}
[data-garden-id="tabs.tab"]:focus-visible { outline: 2px solid var(--aw-amber); outline-offset: -2px; }

/* Inputs, selects, buttons */
[data-garden-id="forms.faux_input"],
[data-garden-id="dropdowns.select"],
[data-garden-id="forms.media_input"] {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.18) !important;
  border-radius: 999px !important;
  font-family: var(--aw-sans) !important;
  font-size: 14px !important;
  color: var(--aw-fg) !important;
  background: #fff !important;
  min-height: 42px;
}
/* the real input sits inside faux_input/media_input — keep it chrome-free so
   the wrapper's ring isn't doubled */
[data-garden-id="forms.input"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: var(--aw-sans) !important;
  font-size: 14px !important;
  color: var(--aw-fg) !important;
}
[data-garden-id="forms.input"]:focus,
[data-garden-id="forms.faux_input"]:focus-within,
[data-garden-id="dropdowns.select"]:focus {
  box-shadow: none !important;
}
[data-garden-id="forms.faux_input"]:focus-within,
[data-garden-id="forms.media_input"]:focus-within,
[data-garden-id="dropdowns.select"]:focus {
  box-shadow: inset 0 0 0 2px var(--aw-amber) !important;
}
[data-garden-id="buttons.button"] {
  font-family: var(--aw-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(19,20,20,.2) !important;
  background: transparent !important;
  color: var(--aw-fg) !important;
  min-height: 42px;
  padding: 0 20px !important;
}
[data-garden-id="buttons.button"]:hover { background: rgba(0,0,0,.04) !important; color: var(--aw-fg) !important; }
[data-garden-id="buttons.button"][data-garden-version]:is([aria-pressed="true"]) { background: rgba(19,20,20,.06) !important; }
/* primary action keeps the amber */
[data-garden-id="buttons.button"].is-primary,
[data-garden-id="buttons.button"][type="submit"] {
  background: var(--aw-amber) !important;
  color: var(--aw-ink) !important;
  box-shadow: none !important;
}

/* Result count line */
#main-content [data-garden-id="typography.span"],
.request-table-count { font-size: 13.5px; color: var(--aw-fg-2); }

/* Table as a card */
[data-garden-id="tables.table"] {
  background: var(--aw-surface);
  border-radius: 8px;
  box-shadow: var(--aw-hairline);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--aw-sans);
}
[data-garden-id="tables.head"] { background: var(--aw-muted); }
[data-garden-id="tables.header_cell"] {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aw-fg-3) !important;
  border-bottom: 1px solid #E0E0E0 !important;
  padding: 12px 16px !important;
}
[data-garden-id="tables.row"] { border-bottom: 1px solid var(--aw-line-2); background: transparent !important; }
[data-garden-id="tables.row"]:hover { background: rgba(0,0,0,.02) !important; }
[data-garden-id="tables.cell"] {
  font-size: 14px !important;
  color: var(--aw-fg) !important;
  border: none !important;
  padding: 14px 16px !important;
  vertical-align: middle;
}
[data-garden-id="tables.cell"] a, [data-garden-id="tables.row"] a {
  color: var(--aw-fg) !important;
  text-decoration: none !important;
  font-weight: 500;
}
[data-garden-id="tables.cell"] a:hover, [data-garden-id="tables.row"] a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249,197,77,.9) !important;
  text-decoration-thickness: 2px;
}
[data-garden-id="tables.sortable_cell"] { color: var(--aw-fg-3) !important; }

/* Status tags → brand pills */
[data-garden-id="tags.tag"] {
  border-radius: 999px !important;
  font-family: var(--aw-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 4px 12px !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Pagination */
[data-garden-id="pagination.pagination"] { font-family: var(--aw-sans); margin-top: 24px; }
[data-garden-id="pagination.page"] {
  border-radius: 999px !important;
  font-size: 13px !important;
  color: var(--aw-fg) !important;
}
[data-garden-id="pagination.page"][aria-current="true"] {
  background: var(--aw-ink) !important;
  color: #fff !important;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1040px) {
  .blocks-list { grid-template-columns: repeat(2, 1fr); }
  .article-relatives { grid-template-columns: 1fr; }
  .topics-list { grid-template-columns: repeat(2, 1fr); }
  .section-container, .article-container, .search-results { flex-direction: column; gap: 32px; }
  .aw-side, .article-sidebar, .search-results-sidebar { position: static; width: 100%; order: 0; }
  .aw-hero__art { display: none; }
  .article { max-width: none; }
  .aw-toc { display: none; }
}

@media (max-width: 720px) {
  .article-votes { flex-wrap: wrap; }
  .article-votes-count { margin-left: 0; }
  .aw-section-prompt { flex-wrap: wrap; }
  .post-to-community { margin-left: 0; }
  .aw-contact { flex-wrap: wrap; }
  .aw-contact__mail { margin-left: 0; }
  .striped-list-item { flex-direction: column; align-items: flex-start; gap: 12px; }
  .post { padding: 22px; }
  .community-hero .hero-inner { padding: 0 20px; }
  .header { height: 64px; }
  .aw-hero__inner { padding: 44px 20px 40px; }
  .aw-hero__title { font-size: 34px; }
  .page-header h1, .article-title { font-size: 28px; }
  .blocks-list { grid-template-columns: 1fr; }
  .error-page { padding: 32px 24px; flex-direction: column; }
  .aw-error__art { display: none; }
  .aw-contact { flex-direction: column; align-items: flex-start; }
  .article-body table { display: block; overflow-x: auto; }
}

@media print {
  .header, .footer, .aw-side, .article-sidebar, .article-votes, .aw-contact, .sub-nav { display: none; }
  body { background: #fff; }
}