/* =====================================================================
   OIC-Atif-alabbasi — core.css
   Sections: Reset / Tokens / Base / Layout / A11y / Helpers
   ===================================================================== */

/* =========================
   Reset
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
html, body { overflow-x: clip; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* =========================
   Tokens (placeholders)
   - These map to theme.json palette references.
   - Release 002 will generate tokens-<hash>.css on save.
   ========================= */
:root {
  /* Colors */
  --oic-color-primary: #0b6bcb;
  --oic-color-text: #111827;
  --oic-color-bg: #ffffff;
  --oic-color-bg-1: #f3f4f6;

  /* Typography */
  --oic-font-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --oic-font-secondary: var(--oic-font-primary);

  /* Layout */
  --oic-layout-content-size: 720px;
  --oic-layout-wide-size: 1200px;
  --oic-container-max: var(--oic-layout-wide-size);
  --oic-container-pad: 16px;

  /* Fixed header/footer offsets */
  --oic-header-height: 72px;
  --oic-footer-height: 64px;

  /* UI */
  --oic-radius-md: 10px;
  --oic-radius-sm: 8px;
  --oic-shadow-sm: 0 8px 24px rgba(17, 24, 39, 0.10);
  --oic-focus-ring: 0 0 0 3px rgba(11, 107, 203, 0.28);

  /* Borders */
  --oic-border: rgba(17, 24, 39, 0.12);
  --oic-border-strong: rgba(17, 24, 39, 0.18);
}

@media (min-width: 768px) {
  :root { --oic-container-pad: 24px; }
}


/* =========================
   Base
   ========================= */
body {
  font-family: var(--oic-font-primary);
  color: var(--oic-color-text);
  background: var(--oic-color-bg);
  line-height: 1.7;
  padding-block-start: var(--oic-header-height);
  padding-block-end: var(--oic-footer-height);
}

a { color: var(--oic-color-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 0.75em; }
h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.0rem + 0.8vw, 1.6rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin: 0 0 1em; }

/* =========================
   Content Typography (entry-content)
   - Release 001 / Patch 003
   - Lists / Tables / Quotes / Code / Captions / Align wide & full
   ========================= */
.entry-content {
  overflow-wrap: anywhere;
}

.entry-content > :last-child { margin-block-end: 0; }

.entry-content :where(a) {
  color: var(--oic-color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.entry-content :where(a:hover) {
  text-decoration-thickness: 0.12em;
}
.entry-content :where(a:visited) {
  color: color-mix(in srgb, var(--oic-color-primary) 80%, var(--oic-color-text));
}
.entry-content :where(a:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.entry-content :where(h2, h3, h4, h5, h6) {
  margin-block-start: 1.35em;
}

.entry-content :where(ul, ol) {
  margin: 0 0 1em;
  padding-inline-start: 1.25em;
}

.entry-content :where(li) { margin-block: 0.35em; }

.entry-content :where(hr) {
  border: 0;
  border-top: 1px solid var(--oic-border);
  margin: 1.6em 0;
}

.entry-content :where(figure) { margin: 1.4em 0; }
.entry-content :where(figcaption, .wp-caption-text) {
  font-size: 0.95rem;
  opacity: 0.72;
  margin-block-start: 8px;
}

.entry-content :where(blockquote, .wp-block-quote) {
  margin: 1.2em 0;
  padding: 16px 18px;
  border-inline-start: 4px solid var(--oic-color-primary);
  border-radius: var(--oic-radius-md);
  background: color-mix(in srgb, var(--oic-color-bg-1) 70%, var(--oic-color-bg));
}
.entry-content :where(blockquote p:last-child) { margin-block-end: 0; }

.entry-content :where(code, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

.entry-content :where(p code, li code, td code) {
  padding: 0.15em 0.35em;
  border-radius: 6px;
  border: 1px solid var(--oic-border);
  background: color-mix(in srgb, var(--oic-color-bg-1) 60%, var(--oic-color-bg));
}

.entry-content :where(pre) {
  overflow: auto;
  padding: 14px 16px;
  border-radius: var(--oic-radius-md);
  border: 1px solid var(--oic-border);
  background: color-mix(in srgb, var(--oic-color-bg-1) 65%, var(--oic-color-bg));
  line-height: 1.6;
  font-size: 0.95rem;
}

.entry-content :where(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
}

.entry-content :where(th, td) {
  border: 1px solid var(--oic-border);
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
}

.entry-content :where(th) {
  background: color-mix(in srgb, var(--oic-color-bg-1) 75%, var(--oic-color-bg));
  font-weight: 700;
}

.entry-content :where(tr:nth-child(even) td) {
  background: color-mix(in srgb, var(--oic-color-bg-1) 35%, var(--oic-color-bg));
}

.entry-content :where(.wp-block-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Legacy image alignment (Classic + Gutenberg) */
.entry-content :where(.alignleft) {
  float: left;
  margin: 0.25em 1.25em 1em 0;
  max-width: 50%;
}

.entry-content :where(.alignright) {
  float: right;
  margin: 0.25em 0 1em 1.25em;
  max-width: 50%;
}

.entry-content :where(.aligncenter) {
  display: block;
  margin-inline: auto;
}

.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Gutenberg wide/full alignment */
.entry-content > .alignwide {
  width: min(var(--oic-layout-wide-size), calc(100vw - (2 * var(--oic-container-pad))));
  margin-inline: calc(50% - 50vw + var(--oic-container-pad));
}

.entry-content > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* =========================
   Media & Embeds (entry-content)
   - Release 001 / Patch 004
   - Videos/iframes responsive + baseline galleries
   ========================= */

/* Images */
.entry-content :where(.wp-block-image img, figure img, .wp-caption img) {
  border-radius: var(--oic-radius-md);
}

/* Generic embeds */
.entry-content :where(iframe, embed, object) {
  max-width: 100%;
}

/* Video blocks */
.entry-content :where(.wp-block-video video) {
  width: 100%;
  height: auto;
  border-radius: var(--oic-radius-md);
}

.entry-content :where(.wp-block-audio audio) {
  width: 100%;
}

/* Gutenberg responsive video embeds (YouTube/Vimeo etc.) */
.entry-content :where(.wp-block-embed.is-type-video .wp-block-embed__wrapper) {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--oic-radius-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--oic-color-bg-1) 70%, var(--oic-color-bg));
}

.entry-content :where(.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Gutenberg gallery */
.entry-content :where(.wp-block-gallery) {
  --oic-gallery-gap: 10px;
  gap: var(--oic-gallery-gap);
  margin: 1.4em 0;
}

.entry-content :where(.wp-block-gallery figure) {
  margin: 0;
}

.entry-content :where(.wp-block-gallery img) {
  border-radius: var(--oic-radius-md);
}

/* Legacy gallery (Classic editor) */
.entry-content :where(.gallery) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 1.4em 0;
}

.entry-content :where(.gallery .gallery-item) {
  margin: 0;
  width: auto;
  float: none;
}

.entry-content :where(.gallery img) {
  width: 100%;
  height: auto;
  border-radius: var(--oic-radius-md);
}

/* =========================
   Layout
   ========================= */
.oic-site {
  min-height: 100vh;
}

.oic-header,
.oic-footer {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 9999;
}

.oic-header {
  inset-block-start: 0;
  height: var(--oic-header-height);
  background: var(--oic-color-bg);
  border-block-end: 1px solid var(--oic-border);
}

.oic-footer {
  inset-block-end: 0;
  height: var(--oic-footer-height);
  background: var(--oic-color-bg);
  border-block-start: 1px solid var(--oic-border);
}

.oic-container {
  max-width: var(--oic-container-max);
  margin-inline: auto;
  padding-inline: var(--oic-container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.oic-main {
  max-width: var(--oic-layout-content-size);
  margin-inline: auto;
  padding: 24px var(--oic-container-pad);
}

/* =========================
   Archive Loop UI (Release 001 / Patch 007)
   ========================= */
.oic-archive-header {
  margin: 0 0 1.25rem;
}

.oic-archive-title {
  margin: 0;
  line-height: 1.2;
}

.oic-archive-desc {
  margin-top: 0.5rem;
}

.oic-archive-meta {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.oic-archive-search {
  margin: 0 0 1.25rem;
}

.oic-loop {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.oic-entry {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--oic-border);
}

.oic-loop > .oic-entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.oic-entry__header {
  margin: 0 0 0.5rem;
}

.oic-entry__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.oic-entry__link {
  color: var(--oic-color-text);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.oic-entry__link:hover {
  color: var(--oic-color-primary);
  text-decoration: underline;
}

.oic-entry__link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 3px;
  border-radius: 8px;
}

.oic-entry__meta {
  font-size: 0.95rem;
}

.oic-entry__excerpt {
  margin: 0;
}

.oic-loop-pagination {
  margin-top: 1.25rem;
}

/* Breadcrumbs (Release 001 / Patch 006) */
.oic-breadcrumbs {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 0.9rem;
}

.oic-breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oic-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.oic-breadcrumbs__item:not(:last-child)::after {
  content: "›";
  opacity: 0.55;
}

.is-rtl .oic-breadcrumbs__item:not(:last-child)::after {
  content: "‹";
}

.oic-breadcrumbs__link {
  color: var(--oic-color-text);
  text-decoration: none;
  border-radius: 8px;
}

.oic-breadcrumbs__link:hover {
  color: var(--oic-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.oic-breadcrumbs__link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
}

.oic-breadcrumbs__current {
  opacity: 0.75;
}

/* =========================
   Single Post UI (Release 001 / Patch 008)
   - Title / Meta / Featured image spacing
   - Tags footer (styling only)
   ========================= */
.oic-single__header {
  margin: 0 0 1.25rem;
}

.oic-single__title {
  margin: 0 0 0.55rem;
  line-height: 1.15;
}

.oic-single__meta {
  font-size: 0.95rem;
  opacity: 0.85;
}

.oic-single__meta a {
  color: var(--oic-color-text);
  text-decoration: none;
}

.oic-single__meta a:hover {
  color: var(--oic-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.oic-single__meta a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.oic-single__featured {
  margin: 1.15rem 0 1.35rem;
}

.oic-single__featured-img {
  border-radius: var(--oic-radius-md);
  box-shadow: var(--oic-shadow-sm);
}

.oic-page-links {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oic-page-links .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--oic-border);
  border-radius: 999px;
  color: var(--oic-color-text);
  text-decoration: none;
}

.oic-page-links .post-page-numbers.current {
  border-color: var(--oic-border-strong);
  background: color-mix(in srgb, var(--oic-color-primary) 12%, transparent);
}

.oic-page-links .post-page-numbers:hover {
  border-color: var(--oic-border-strong);
  color: var(--oic-color-primary);
}

.oic-page-links .post-page-numbers:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
}

.oic-single__footer {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--oic-border);
}

.oic-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
}

.oic-single__tags-label {
  opacity: 0.8;
}

.oic-single__tags-items a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--oic-border);
  border-radius: 999px;
  color: var(--oic-color-text);
  background: color-mix(in srgb, var(--oic-color-bg-1) 70%, transparent);
  text-decoration: none;
}

.oic-single__tags-items a:hover {
  border-color: var(--oic-border-strong);
  color: var(--oic-color-primary);
}

.oic-single__tags-items a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
}

/* =========================
   Page UI + Empty States (Release 001 / Patch 009)
   ========================= */
.oic-page__header {
  margin: 0 0 1.25rem;
}

.oic-page__title {
  margin: 0;
  line-height: 1.15;
}

.oic-page__featured {
  margin: 1.15rem 0 1.35rem;
}

.oic-page__featured-img {
  border-radius: var(--oic-radius-md);
  box-shadow: var(--oic-shadow-sm);
}

.oic-page__footer {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--oic-border);
}

.oic-empty {
  padding: 1.25rem;
  border: 1px solid var(--oic-border);
  border-radius: var(--oic-radius-md);
  background: color-mix(in srgb, var(--oic-color-bg-1) 70%, transparent);
}

.oic-empty__title {
  margin: 0 0 0.55rem;
  line-height: 1.15;
}

.oic-empty__text {
  margin: 0 0 1rem;
}

.oic-empty__actions .search-form {
  margin-block: 0;
}

/* Header/Footer navigation (minimal, no JS) */
.oic-brand a {
  color: var(--oic-color-text);
  text-decoration: none;
  font-weight: 700;
}

.oic-nav .oic-menu,
.oic-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oic-nav .oic-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.oic-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--oic-color-text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--oic-radius-sm);
}

.oic-nav a:hover { background: color-mix(in srgb, var(--oic-color-bg-1) 65%, var(--oic-color-bg)); }

.oic-nav a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oic-color-primary) 60%, transparent);
  outline-offset: 2px;
}

.oic-nav .current-menu-item > a,
.oic-nav .current-menu-ancestor > a {
  color: var(--oic-color-primary);
  background: color-mix(in srgb, var(--oic-color-primary) 10%, var(--oic-color-bg));
}

/* Dropdown (depth=2) */
.oic-nav .menu-item {
  position: relative;
}

.oic-nav .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  padding: 8px;
  display: none;
  background: var(--oic-color-bg);
  border: 1px solid var(--oic-border);
  border-radius: var(--oic-radius-md);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  z-index: 10000;
}

body.is-rtl .oic-nav .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }

.oic-nav .menu-item-has-children:hover > .sub-menu,
.oic-nav .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

.oic-nav .sub-menu a {
  width: 100%;
  padding: 8px 10px;
}

.oic-nav .sub-menu .sub-menu {
  inset-block-start: 0;
  inset-inline-start: calc(100% + 8px);
}

body.is-rtl .oic-nav .sub-menu .sub-menu { inset-inline-start: auto; inset-inline-end: calc(100% + 8px); }

/* Footer sizing */
.oic-nav--footer a {
  padding: 6px 8px;
  font-size: 0.95em;
}

/* =========================
   A11y
   ========================= */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 16px;
  background: var(--oic-color-primary);
  color: #fff;
  padding: 8px 12px;
  z-index: 10000;
  transform: translateY(-140%);
}

.skip-link:focus { transform: translateY(0); }

/* =========================
   Helpers
   ========================= */
.oic-muted { opacity: 0.72; }
.oic-divider { height: 1px; background: var(--oic-border); margin: 24px 0; }

/* =========================
   Forms
   - baseline styling for search + comments in Release 001
   ========================= */
:where(input, textarea, select) {
  color: inherit;
  background: var(--oic-color-bg);
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea, select) {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--oic-border-strong);
  border-radius: var(--oic-radius-sm);
  background: color-mix(in srgb, var(--oic-color-bg-1) 55%, var(--oic-color-bg));
}

:where(textarea) { min-height: 120px; resize: vertical; }

:where(button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-block-button__link) {
  appearance: none;
  border: 1px solid var(--oic-border);
  border-radius: var(--oic-radius-sm);
  padding: 10px 14px;
  background: var(--oic-color-primary);
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
}

:where(button:hover, input[type="submit"]:hover, .wp-block-button__link:hover) {
  filter: brightness(0.96);
}

:where(button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .wp-block-button__link:focus-visible) {
  outline: none;
  box-shadow: var(--oic-focus-ring);
  border-color: color-mix(in srgb, var(--oic-color-primary) 55%, var(--oic-border-strong));
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-block: 16px 24px;
}

.search-form label { flex: 1 1 260px; }
.search-form .search-field { width: 100%; }
.search-form .search-submit { flex: 0 0 auto; }

/* =========================
   Comments
   ========================= */
.oic-comments {
  margin-block: 32px;
  padding-block: 24px;
  border-block-start: 1px solid var(--oic-border);
}

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

.oic-comments .comment {
  margin-block: 16px;
  padding: 16px;
  border: 1px solid var(--oic-border);
  border-radius: var(--oic-radius-md);
  background: var(--oic-color-bg);
}

.oic-comments .comment .comment-meta {
  font-size: 0.95rem;
  margin-block-end: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: baseline;
}

.oic-comments .comment .comment-author .fn { font-weight: 700; }
.oic-comments .comment .comment-metadata { opacity: 0.72; }
.oic-comments .comment .comment-content :last-child { margin-block-end: 0; }

.oic-comments .comment .reply a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--oic-border);
  background: color-mix(in srgb, var(--oic-color-bg-1) 55%, var(--oic-color-bg));
  color: var(--oic-color-text);
}

.oic-comments .comment .reply a:hover { text-decoration: none; filter: brightness(0.98); }

.comment-respond {
  margin-block-start: 24px;
  padding: 16px;
  border-radius: var(--oic-radius-md);
  background: color-mix(in srgb, var(--oic-color-bg-1) 65%, var(--oic-color-bg));
}

.comment-respond .comment-reply-title { margin-block-end: 10px; }
.comment-respond .comment-form p { margin: 0 0 12px; }
.comment-respond .comment-form label { display: inline-block; margin-block-end: 6px; }
.comment-respond .comment-form .comment-notes,
.comment-respond .comment-form .logged-in-as,
.comment-respond .comment-form .form-allowed-tags { opacity: 0.72; font-size: 0.95rem; }

/* =========================
   Pagination
   ========================= */
.navigation.pagination {
  margin-block: 24px 8px;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--oic-border);
  background: var(--oic-color-bg);
  color: var(--oic-color-text);
}

.navigation.pagination .page-numbers.current {
  background: var(--oic-color-primary);
  color: #fff;
  border-color: transparent;
}

.navigation.pagination a.page-numbers:hover { text-decoration: none; filter: brightness(0.98); }

/* Comments pagination (when many comments) */
.comment-navigation {
  margin-block: 16px 24px;
}

.comment-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comment-navigation a,
.comment-navigation span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--oic-border);
  background: var(--oic-color-bg);
  color: var(--oic-color-text);
}

.comment-navigation a:hover { text-decoration: none; filter: brightness(0.98); }