/* ==========================================================================
   inbefore — default theme, token layer
   --------------------------------------------------------------------------
   Loaded after styles.css. Nothing here removes an existing rule; these are
   additive overrides that move the surfaces ported from the prototype onto
   the shared design tokens, and style the engagement layer (likes, follows,
   native comments, For you / Following / Sources).

   Structure:
     01. Tokens
     02. Header & nav (incl. mobile search stacking)
     03. Section heads, chips, buttons
     04. Cards & feed
     05. Article: engagement bar, comments
     06. Pages (page.php + custom page templates)
     07. Source directory & profile
     08. Pagination, empty states, ads
     09. Responsive
   ========================================================================== */

/* 01. Tokens ============================================================== */

:root {
  /* Kept in step with theme-system.css: the site's accent is one deep green. */
  --brand: oklch(0.44 0.09 158);
  --brand-hover: oklch(0.37 0.08 158);
  --brand-soft: oklch(0.955 0.022 158);
  --brand-ink: oklch(1 0 0);

  --bg: oklch(0.985 0.002 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.004 260);
  --text: oklch(0.24 0.021 265);
  --text-strong: oklch(0.17 0.024 265);
  --muted: oklch(0.55 0.019 265);
  --muted-2: oklch(0.66 0.015 265);
  --line: oklch(0.918 0.006 265);
  --line-strong: oklch(0.86 0.008 265);
  /* Rule under section and topic heads. A subtle grey rather than a dark bar:
     it separates two blocks of content without out-shouting either of them. */
  --rule-strong: oklch(0.8 0.008 265);

  --accent-good: oklch(0.62 0.16 150);
  --accent-warn: oklch(0.72 0.15 75);
  --accent-danger: oklch(0.58 0.2 25);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 265 / 0.06),
    0 1px 3px oklch(0.2 0.02 265 / 0.04);
  --shadow-md: 0 2px 6px oklch(0.2 0.02 265 / 0.07),
    0 8px 24px oklch(0.2 0.02 265 / 0.06);

  --header-h: 128px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

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

#content {
  color: var(--text);
}

/* 02. Header & nav ======================================================== */

#site-navbar.site-navbar {
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

#site-navbar .row > div {
  display: flex;
  align-items: center;
}

#site-navbar .navbar-logo img.site-logo {
  max-height: 30px;
  width: auto;
}

#site-navbar .home-search-box {
  width: 100%;
}

#site-navbar .home-search-box .form-control {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  min-height: 42px;
  padding-left: 16px;
}

#site-navbar .home-search-box .btn {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  min-height: 42px;
}

#site-navbar .navbar-toggler {
  color: var(--text-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

/* Engagement nav links (For you / Sources / Following) */
.inb-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.inb-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.inb-nav-links a:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.inb-nav-links a.active {
  background: var(--brand-soft);
  color: var(--brand);
}

/* 03. Section heads, chips, buttons ======================================= */

.site-heading,
.sidebar-heading,
.inb-heading {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.site-heading > span,
.sidebar-heading > span {
  display: inline-block;
}

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-ink);
}

.btn-outline-dark {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-outline-dark:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.form-control {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-height: 42px;
}

.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--surface);
  color: var(--text);
}

/* 04. Cards & feed ======================================================== */

.post-item.shadow-sm,
.post-single.shadow,
.sidebar-block,
.inb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

.post-item .post-title {
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.35;
}

.post-item .post-title:hover {
  color: var(--brand);
}

.post-feat-image img.post-feat-img {
  border-radius: var(--radius-xs);
}

/* Source chip on a card */
.inb-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.inb-source-chip img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}

/* Meta row: likes / comments / time */
.inb-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.inb-meta a,
.inb-meta button {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  cursor: pointer;
}

.inb-meta a:hover,
.inb-meta button:hover {
  color: var(--brand);
}

.inb-meta .is-active {
  color: var(--brand);
  font-weight: 600;
}

.inb-meta svg {
  width: 16px;
  height: 16px;
}

/* 05. Article: engagement bar, comments ================================== */

.inb-engagement {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.inb-engagement .inb-spacer {
  margin-left: auto;
}

.inb-like-btn,
.inb-follow-btn,
.inb-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.inb-like-btn:hover,
.inb-follow-btn:hover,
.inb-report-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.inb-like-btn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

.inb-like-btn.is-active svg {
  fill: currentColor;
}

.inb-follow-btn.is-active {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--brand-ink);
}

.inb-like-btn svg,
.inb-follow-btn svg {
  width: 17px;
  height: 17px;
}

/* Comments ---------------------------------------------------------------- */

.inb-comments {
  margin-top: 26px;
}

.inb-comments__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

.inb-comments__head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

.inb-comments__count {
  color: var(--muted);
  font-size: 13.5px;
}

.inb-comment-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 22px;
}

.inb-comment-form .form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.inb-comment-form .form-row > * {
  flex: 1 1 200px;
}

.inb-comment-form textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
}

.inb-comment-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.inb-comment-hint {
  font-size: 12.5px;
  color: var(--muted);
}

.inb-comment-status {
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
}

.inb-comment-status.is-error {
  color: var(--accent-danger);
}

.inb-comment-status.is-ok {
  color: var(--accent-good);
}

.inb-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inb-comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.inb-comment:first-child {
  border-top: 0;
}

.inb-comment__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  object-fit: cover;
}

/* The guest tile is a letter, not a photograph, so the box above needs the
   centring an <img> gets for free. A <span> is inline by default: it ignored
   the 38px box entirely and the initial sat on the tile's first text line,
   high and left of centre, which is why the circle looked empty and the
   letter looked like it belonged to the name beside it. Grid is what makes
   the span a box and one declaration centres the letter in it — the same
   treatment the niguro theme's .nn-av gives its own coloured initials. */
.inb-comment__avatar--letter {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: 0.01em;
  user-select: none;
}

.inb-comment__body {
  flex: 1 1 auto;
  min-width: 0;
}

.inb-comment__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.inb-comment__author {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 14px;
}

.inb-comment__badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
}

.inb-comment__badge--pending {
  background: oklch(0.95 0.06 75);
  color: oklch(0.45 0.12 65);
}

.inb-comment__badge--author {
  background: var(--brand-soft);
  color: var(--brand);
}

.inb-comment__text {
  margin: 6px 0 8px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.inb-comment__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.inb-comment__actions button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.inb-comment__actions button:hover {
  color: var(--brand);
}

.inb-comment__actions button.is-active {
  color: var(--brand);
  font-weight: 600;
}

.inb-comment__actions svg {
  width: 15px;
  height: 15px;
}

.inb-comment__replies {
  list-style: none;
  margin: 12px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--line);
}

.inb-comment__reply-form {
  margin-top: 10px;
  display: none;
}

.inb-comment__reply-form.is-open {
  display: block;
}

.inb-comment__reply-form textarea {
  width: 100%;
  min-height: 76px;
  margin-bottom: 8px;
}

.inb-comments__more {
  margin-top: 16px;
  text-align: center;
}

.inb-comments-empty {
  color: var(--muted);
  padding: 18px 0;
}

/* Social / media embeds produced by the importer */
.inb-social-embed {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.inb-social-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

.inb-social-embed-source {
  font-size: 13px;
  color: var(--muted);
  padding: 8px 12px;
  margin: 0;
  border-top: 1px solid var(--line);
}

.inb-quote {
  margin: 0;
  padding: 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
}

.inb-quote-text {
  margin: 0 0 10px;
  color: var(--text-strong);
}

.inb-quote-meta {
  font-size: 13px;
  color: var(--muted);
}

.inb-media-embed {
  margin: 20px 0;
}

.inb-media-embed audio,
.inb-media-embed video {
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.inb-media-caption {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

/* 06. Pages =============================================================== */

.page-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 22px;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.65;
}

.page-content > *:first-child {
  margin-top: 0;
}

.page-content h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 28px 0 10px;
}

.page-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 24px 0 8px;
}

.page-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-content blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-strong);
}

.page-content ul,
.page-content ol {
  padding-left: 22px;
  margin: 12px 0;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.page-content hr {
  border-color: var(--line);
  margin: 26px 0;
}

.page-header-block {
  margin-bottom: 18px;
}

.page-header-block h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 6px;
}

.page-header-block .page-subtitle {
  color: var(--muted);
  font-size: 15px;
}

.page-header-block .page-rule {
  width: 64px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  margin-top: 12px;
}

/* Contact form (pages/contact-us.php) */
.inb-contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.inb-contact-form .form-group label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.inb-contact-form .form-text {
  font-size: 12.5px;
  color: var(--muted);
}

.inb-contact-form textarea {
  min-height: 150px;
}

/* 07. Source directory & profile ========================================= */

.inb-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.inb-source-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.inb-source-card__logo {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: cover;
}

.inb-source-card__name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-strong);
  display: block;
}

.inb-source-card__meta {
  font-size: 12.5px;
  color: var(--muted);
}

.inb-source-card__actions {
  margin-top: 10px;
}

.inb-profile {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
}

.inb-profile__logo {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: cover;
}

.inb-profile__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 4px;
}

.inb-profile__meta {
  color: var(--muted);
  font-size: 14px;
}

.inb-profile__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 08. Pagination, empty states, ads ====================================== */

.pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0 4px;
  margin: 0;
}

.pagination .page-item .page-link,
.pagination li > a,
.pagination li > span {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 7px 12px;
  display: inline-block;
  font-size: 14px;
}

.pagination .active > a,
.pagination .active > span {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.inb-empty {
  text-align: center;
  padding: 46px 20px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}

.inb-empty h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.inb-empty .btn {
  margin-top: 14px;
}

.adblock .dummy-ad {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.adblock .dummy-ad h5 {
  font-size: 12px;
  letter-spacing: 0.08em;
  padding-top: 18px;
  color: var(--muted-2);
}

/* 09. Responsive ========================================================= */

/* Tablet and mobile: the search form drops onto its own row instead of being
   squeezed between the logo and the menu button. Mirrors the prototype. */
@media (max-width: 900px) {
  /* Two row header: sticking it would eat a third of the screen, so on tablet
     and mobile it scrolls away with the page. */
  #site-navbar.site-navbar {
    position: static;
  }

  #site-navbar .container > .row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  #site-navbar .container > .row > .col-md-2 {
    order: 1;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }

  #site-navbar .container > .row > .col-md-7 {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  #site-navbar .container > .row > .col-md-3 {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }

  #site-navbar .inb-nav-links {
    order: 2;
    margin-left: auto;
  }

  .inb-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .inb-profile__actions {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 148px;
  }

  .page-content {
    padding: 20px 16px;
    font-size: 16px;
  }

  .inb-comment__replies {
    padding-left: 10px;
  }

  .inb-engagement {
    gap: 8px;
  }

  .inb-engagement .inb-spacer {
    display: none;
  }

  .inb-like-btn,
  .inb-follow-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media print {
  #site-navbar,
  .inb-engagement,
  .inb-comments,
  .adblock {
    display: none !important;
  }
}