/* ==========================================================================
   Templified skin — layered over stock Copenhagen style.css (loaded after it
   from document_head.hbs). Brand-settings colors arrive as --tpl-* custom
   properties set inline in document_head.hbs; everything dark-chrome is a
   fixed token here because the dark header/hero/footer IS the theme identity.
   ========================================================================== */

:root {
  /* dark chrome */
  --tpl-ink-0: #09090b;
  --tpl-ink-1: #0f0f12;
  --tpl-ink-2: #18181b;
  --tpl-ink-3: #232328;
  --tpl-line-dark: #26262b;
  --tpl-text-on-dark: #e4e4e7;
  --tpl-muted-on-dark: #a1a1aa;
  --tpl-faint-on-dark: #71717a;

  /* light content zone */
  --tpl-surface: #ffffff;
  --tpl-line: #e4e4e7;
  --tpl-muted: #52525b;
  --tpl-faint: #71717a;

  --tpl-glow: rgba(200, 255, 60, 0.14);
  --tpl-radius: 14px;
  --tpl-radius-sm: 10px;
  --tpl-shadow-card: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px -12px rgba(9, 9, 11, 0.12);
  --tpl-shadow-card-hover: 0 2px 4px rgba(9, 9, 11, 0.05), 0 16px 40px -16px rgba(9, 9, 11, 0.22);

  --tpl-font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tpl-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tpl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  background-color: var(--tpl-bg);
}

body {
  font-family: var(--tpl-font-body);
  color: var(--tpl-text);
  background-color: var(--tpl-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tpl-font-display);
  letter-spacing: -0.01em;
  color: var(--tpl-text);
}

::selection {
  background: var(--tpl-brand);
  color: var(--tpl-brand-text);
}

a {
  color: var(--tpl-link);
}
a:hover, a:focus {
  color: var(--tpl-link-hover);
}

/* ==========================================================================
   Header — dark chrome
   ========================================================================== */

/* Full-bleed dark band: the header element is width-constrained (1160px),
   so paint the band on a ::before spanning exactly the viewport, centered
   on the (centered) header. Offset box-shadows leave gaps when the offset
   exceeds the element width; offset boxes beyond 100vw create horizontal
   page scroll — this does neither. z-index: 0 makes the header a stacking
   context so the ::before sits behind its content but above the body
   background. */
header.header {
  background: transparent;
  z-index: 0;
}
header.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--tpl-ink-0);
  border-bottom: 1px solid var(--tpl-line-dark);
  box-sizing: border-box;
  z-index: -1;
  pointer-events: none;
}

.logo a {
  display: inline-flex;
  align-items: center;
}

.logo img {
  max-height: 32px;
}

.logo span {
  color: #ffffff;
  font-family: var(--tpl-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 12px;
}

.user-nav-list a,
.user-nav a {
  color: var(--tpl-muted-on-dark);
  font-weight: 500;
}
.user-nav-list a:hover,
.user-nav-list a:focus,
.user-nav a:hover,
.user-nav a:focus {
  color: #ffffff;
  text-decoration: none;
}

[dir=ltr] .user-nav-list > li {
  margin-right: 24px;
}

/* "Submit a request" as the chartreuse CTA pill */
.user-nav .submit-a-request,
.user-nav-list .submit-a-request {
  background: var(--tpl-brand);
  color: var(--tpl-brand-text);
  font-family: var(--tpl-font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.user-nav .submit-a-request:hover,
.user-nav .submit-a-request:focus,
.user-nav-list .submit-a-request:hover,
.user-nav-list .submit-a-request:focus {
  color: var(--tpl-brand-text);
  filter: brightness(1.08);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Ask AI ghost pill */
.ask-ai {
  color: var(--tpl-text-on-dark);
  border: 1px solid var(--tpl-line-dark);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ask-ai:hover, .ask-ai:focus {
  color: #ffffff;
  border-color: var(--tpl-brand);
  text-decoration: none;
}
.ask-ai .ask-ai-icon {
  color: var(--tpl-brand);
}

/* Signed-in user dropdown trigger */
.user-info .dropdown-toggle {
  color: var(--tpl-muted-on-dark);
}
.user-info .dropdown-toggle:hover,
.user-info .dropdown-toggle:focus,
.user-info .dropdown-toggle[aria-expanded=true] {
  color: #ffffff;
}

/* Mobile menu — dark panel */
.menu-button-mobile {
  color: var(--tpl-text-on-dark);
  border-color: var(--tpl-line-dark);
}
.menu-list-mobile {
  background-color: var(--tpl-ink-1);
  border: 1px solid var(--tpl-line-dark);
  border-radius: var(--tpl-radius-sm);
}
.menu-list-mobile .item a,
.menu-list-mobile a {
  color: var(--tpl-text-on-dark);
}
.menu-list-mobile .nav-divider {
  border-top: 1px solid var(--tpl-line-dark);
}
.user-nav[aria-expanded=true] {
  background-color: var(--tpl-ink-1);
  border-color: var(--tpl-line-dark);
}

/* Skip link readable on dark */
.skip-navigation {
  background: var(--tpl-brand);
  color: var(--tpl-brand-text);
}

/* ==========================================================================
   Hero — dark field, chartreuse glow, grid texture
   ========================================================================== */

.hero {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 84px 20px 96px;
  background-color: var(--tpl-ink-0);
  background-position: center;
  background-size: cover;
  overflow: hidden;
  /* bleed past the body gutter to full viewport width */
  box-shadow: 100vmax 0 0 var(--tpl-ink-0), -100vmax 0 0 var(--tpl-ink-0);
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, var(--tpl-glow) 0%, transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* glow box-shadow trick stretches sideways; let the glow div span beyond too */
.hero .hero-glow {
  left: -50vw;
  right: -50vw;
}

.hero-inner {
  position: relative;
  top: auto;
  transform: none;
  max-width: 680px;
}

.hero-title {
  margin: 0 0 14px;
  font-family: var(--tpl-font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.hero-tagline {
  margin: 0 auto 36px;
  max-width: 520px;
  color: var(--tpl-muted-on-dark);
  font-size: 17px;
  line-height: 1.55;
}

.hero-search {
  position: relative;
  max-width: 610px;
  margin: 0 auto;
}

/* dark glass search control */
.hero .search {
  background-color: rgba(24, 24, 27, 0.85);
  border: 1px solid #3f3f46;
  border-radius: var(--tpl-radius);
  backdrop-filter: blur(8px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero .search:focus-within {
  border-color: var(--tpl-brand);
  box-shadow: 0 0 0 4px rgba(200, 255, 60, 0.18), 0 12px 40px -12px rgba(200, 255, 60, 0.25);
}
.hero .search input[type=search],
.hero .search .clear-button {
  background-color: transparent;
  border-radius: var(--tpl-radius);
}
.hero .search input[type=search] {
  height: 56px;
  font-size: 16px;
  font-family: var(--tpl-font-body);
  color: #ffffff;
}
.hero .search input[type=search]:focus {
  color: #ffffff;
}
.hero .search input[type=search]::placeholder {
  color: var(--tpl-faint-on-dark);
}
.hero .search input[type=search]:-webkit-autofill,
.hero .search input[type=search]:-webkit-autofill:hover,
.hero .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tpl-ink-2) inset;
  -webkit-text-fill-color: #ffffff;
}
.hero .search .clear-button {
  color: var(--tpl-muted-on-dark);
}
.hero .search .clear-button:hover {
  background-color: var(--tpl-brand);
  color: var(--tpl-brand-text);
}
.hero .search-icon {
  color: var(--tpl-brand);
  width: 20px;
  height: 20px;
  left: 18px;
}
[dir=rtl] .hero .search-icon {
  left: auto;
  right: 18px;
}
[dir=ltr] .hero .search input[type=search] {
  padding-left: 48px;
}
[dir=rtl] .hero .search input[type=search] {
  padding-right: 48px;
}

/* ==========================================================================
   Buttons & pagination
   ========================================================================== */

.button, .button-large,
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link,
.hbs-form input[type=submit] {
  font-family: var(--tpl-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--tpl-radius-sm);
  transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

/* Stock outline buttons render $brand_color text/border — chartreuse fails
   contrast on white. Neutral resting state; stock hover (chartreuse fill +
   near-black text) stays. */
.button,
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button {
  color: var(--tpl-text);
  border-color: #d4d4d8;
}
.button.button-primary:hover,
.button-large:hover,
.hbs-form input[type=submit]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.button-secondary {
  border: 1px solid var(--tpl-ink-3);
  color: var(--tpl-text);
  border-radius: var(--tpl-radius-sm);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  background-color: var(--tpl-ink-0);
  color: #ffffff;
}

/* ==========================================================================
   Home page — category cards
   ========================================================================== */

.blocks-item {
  position: relative;
  background: var(--tpl-surface);
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  color: var(--tpl-text);
  text-align: left;
  box-shadow: var(--tpl-shadow-card);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* chartreuse edge that sweeps in on hover */
.blocks-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tpl-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.blocks-item:hover, .blocks-item:focus-within, .blocks-item:active {
  background-color: var(--tpl-surface);
  border-color: #d4d4d8;
  transform: translateY(-3px);
  box-shadow: var(--tpl-shadow-card-hover);
}
.blocks-item:hover::before, .blocks-item:focus-within::before {
  transform: scaleX(1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: var(--tpl-text);
}

.blocks-item-link {
  color: var(--tpl-text);
  padding: 26px 28px;
  justify-content: flex-start;
}
.blocks-item-link:focus {
  box-shadow: inset 0 0 0 2px var(--tpl-brand);
}

.blocks-item-title {
  font-family: var(--tpl-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--tpl-ink-0);
}

.blocks-item-description {
  color: var(--tpl-muted);
  font-size: 14px;
  line-height: 1.55;
}
.blocks-item:hover .blocks-item-description {
  color: var(--tpl-muted);
}

/* section headings on home */
.section h2 {
  font-family: var(--tpl-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* promoted articles */
.promoted-articles-item a {
  color: var(--tpl-text);
  font-weight: 500;
}
.promoted-articles-item a:hover {
  color: var(--tpl-link);
}

/* recent activity */
.recent-activity-item-link {
  color: var(--tpl-link);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs li {
  font-size: 12px;
  font-family: var(--tpl-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tpl-faint);
}
.breadcrumbs li a {
  color: var(--tpl-muted);
}
.breadcrumbs li a:hover {
  color: var(--tpl-link);
}

/* ==========================================================================
   Article page
   ========================================================================== */

.article-title {
  font-family: var(--tpl-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--tpl-ink-0);
}

.article-body {
  font-size: 16px;
  line-height: 1.7;
  color: #27272a;
}

.article-body h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--tpl-line);
}

.article-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 1.6em;
}

.article-body a {
  color: var(--tpl-link);
  text-decoration: underline;
  text-decoration-color: rgba(63, 98, 18, 0.35);
  text-underline-offset: 3px;
}
.article-body a:hover {
  color: var(--tpl-link-hover);
  text-decoration-color: var(--tpl-brand);
}

.article-body img {
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius-sm);
  box-shadow: var(--tpl-shadow-card);
}

.article-body code {
  font-family: var(--tpl-font-mono);
  font-size: 0.875em;
  background: #f4f4f5;
  border: 1px solid var(--tpl-line);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}

.article-body pre {
  background: var(--tpl-ink-1);
  color: var(--tpl-text-on-dark);
  border: 1px solid var(--tpl-ink-3);
  border-radius: var(--tpl-radius-sm);
  padding: 16px 20px;
  overflow-x: auto;
}
.article-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.article-body blockquote {
  border-left: 3px solid var(--tpl-brand);
  margin-left: 0;
  padding: 4px 0 4px 18px;
  color: var(--tpl-muted);
}

.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
}
/* .article-content sets word-wrap: break-word (stock), which mid-word-breaks
   terms in narrow cells ("Templ ate"); wrap at spaces only inside tables */
.article-body th, .article-body td {
  word-break: normal;
  overflow-wrap: normal;
  word-wrap: normal;
  hyphens: none;
}
/* narrow screens: let wide tables scroll instead of crushing columns */
@media (max-width: 767px) {
  .article-body table {
    display: block;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.article-body th {
  font-family: var(--tpl-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tpl-muted);
  background: #f4f4f5;
  border: 1px solid var(--tpl-line);
  padding: 10px 14px;
}
.article-body td {
  border: 1px solid var(--tpl-line);
  padding: 10px 14px;
  vertical-align: top;
}
.article-body tr:nth-child(even) td {
  background: #fafafa;
}

/* sidebar / section nav */
.collapsible-sidebar-title,
.sidenav-title {
  font-family: var(--tpl-font-display);
  font-weight: 700;
}

.section-tree a,
.collapsible-sidebar-body a,
.sidenav-item {
  color: var(--tpl-muted);
}
.section-tree a:hover,
.collapsible-sidebar-body a:hover {
  color: var(--tpl-ink-0);
}

.sidenav-item.current-article,
.section-tree .current-article a {
  box-shadow: inset 3px 0 0 var(--tpl-brand);
  background: #f4f4f5;
  color: var(--tpl-ink-0);
  font-weight: 600;
}

/* article meta + votes */
.article-meta, .meta-data {
  color: var(--tpl-faint);
}

.article-votes .button {
  border-radius: var(--tpl-radius-sm);
}

/* ==========================================================================
   Search results
   ========================================================================== */

.search-result-title a {
  font-family: var(--tpl-font-display);
  font-weight: 600;
  color: var(--tpl-ink-0);
}
.search-result-title a:hover {
  color: var(--tpl-link);
}
.search-results-description {
  color: var(--tpl-muted);
}
.search-result-description em {
  background: rgba(200, 255, 60, 0.35);
  font-style: normal;
  border-radius: 3px;
  padding: 0 2px;
}

/* ==========================================================================
   Striped lists (section/category indexes)
   ========================================================================== */

.striped-list-title a {
  color: var(--tpl-text);
  font-weight: 500;
}
.striped-list-title a:hover {
  color: var(--tpl-link);
}

/* ==========================================================================
   Footer — dark chrome
   ========================================================================== */

footer.footer {
  background-color: var(--tpl-ink-0);
  box-shadow: 100vmax 0 0 var(--tpl-ink-0), -100vmax 0 0 var(--tpl-ink-0);
  border-top: 1px solid var(--tpl-line-dark);
  margin-top: 80px;
  padding: 36px 0;
}

.footer a {
  color: var(--tpl-muted-on-dark);
  font-family: var(--tpl-font-display);
  font-weight: 600;
}
.footer a:hover {
  color: #ffffff;
}
.footer-language-selector button {
  color: var(--tpl-muted-on-dark);
}
.footer-language-selector button:hover {
  color: #ffffff;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: var(--tpl-faint-on-dark);
}

/* ==========================================================================
   Misc
   ========================================================================== */

/* notifications keep readable on light bg; tighten radius */
.notification {
  border-radius: var(--tpl-radius-sm);
}

/* horizontal page divider under header should disappear — dark band handles it */
.container-divider {
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .blocks-item,
  .blocks-item::before,
  .button, .button-large,
  .user-nav .submit-a-request,
  .hero .search {
    transition: none;
  }
}