/* ============================================================
   THEME EXTRAS
   ------------------------------------------------------------
   WordPress- and theme-specific styling that isn't part of the
   ported React design system (which lives in global.css /
   service-pages.css). Everything here reuses the design tokens
   from variables.css so it reads as one system.

   Contents
     1. Accessibility (skip link, sr text, focus)
     2. AJAX layer (progress bar, page transition)
     3. Admin bar offset
     4. Block editor alignments + captions
     5. Breadcrumbs + pagination
     6. Blog / archive / search
     7. 404
     8. Comments
   ============================================================ */

/* 1. ACCESSIBILITY ------------------------------------------------ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: calc(var(--z-navbar) + 10);
  background: var(--surface);
  color: var(--ink-strong);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 2. AJAX LAYER -------------------------------------------------- */
/* Top progress bar shown while a page is being fetched. */
.txtswift-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--brand-gradient);
  z-index: calc(var(--z-navbar) + 20);
  opacity: 0;
  pointer-events: none;
}
.txtswift-progress.is-active {
  opacity: 1;
  animation: txtswift-progress 1.4s var(--ease-out) forwards;
}
@keyframes txtswift-progress {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(0.75); }
  100% { transform: scaleX(0.92); }
}

/* Controlled fade for the replaceable main region. */
#site-main {
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  will-change: opacity;
}
body.has-spa-nav #site-main.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .txtswift-progress.is-active { animation: none; transform: scaleX(0.9); }
  #site-main { transition: none; }
  body.has-spa-nav #site-main.is-leaving { opacity: 1; transform: none; }
}

/* 3. ADMIN BAR OFFSET ------------------------------------------- */
body.admin-bar .navbar { top: 32px; }
body.admin-bar .nav-mobile { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
  body.admin-bar .nav-mobile { top: 46px; }
}

/* 4. BLOCK EDITOR ALIGNMENTS + CAPTIONS ------------------------- */
.entry-content { max-width: var(--container-narrow); margin-inline: auto; }
.entry-content > * { margin-block: var(--space-4); }
.entry-content .alignwide { max-width: var(--container-wide); margin-inline: auto; }
.entry-content .alignfull { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content img { height: auto; max-width: 100%; border-radius: var(--radius-lg); }
.entry-content figcaption,
.wp-caption-text { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: var(--space-2); }
.entry-content blockquote {
  border-left: 3px solid var(--teal);
  padding-left: var(--space-4);
  color: var(--ink-strong);
  font-style: italic;
}
.entry-content :where(h2, h3, h4) { color: var(--ink-heading); letter-spacing: var(--tracking-heading); }
.entry-content a { color: var(--teal-dark); text-underline-offset: 2px; }

.content-narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* Shared page scaffolding */
.page-head { padding-block: var(--section-sm); }
.page-title { font-size: var(--fs-h2); color: var(--ink-heading); letter-spacing: var(--tracking-heading); }
.legal-hero { padding-block: var(--section-md) var(--section-sm); }
.legal-hero h1 { font-size: var(--fs-h1); color: var(--ink-heading); letter-spacing: var(--tracking-display); }
.page-content { padding-bottom: var(--section-md); }

/* 5. BREADCRUMBS + PAGINATION ----------------------------------- */
.txtswift-breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; padding: 0; margin: 0 0 var(--space-3);
  font-size: var(--fs-sm); color: var(--muted);
}
.txtswift-breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); }
.txtswift-breadcrumbs a { color: var(--body); text-decoration: none; }
.txtswift-breadcrumbs a:hover { color: var(--teal-dark); }
.txtswift-breadcrumbs [aria-current="page"] { color: var(--ink-strong); }

.txtswift-pagination ul {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; padding: 0; margin: var(--section-sm) 0;
  justify-content: center;
}
.txtswift-pagination a,
.txtswift-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target); height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink-strong); text-decoration: none; font-weight: var(--fw-medium);
}
.txtswift-pagination .current { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.txtswift-pagination a:hover { border-color: var(--teal); color: var(--teal-dark); }

/* 6. BLOG / ARCHIVE / SEARCH ------------------------------------ */
.blog-page, .archive-page, .search-page, .post-list-page { padding-block: var(--section-md); }
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.post-card { overflow: hidden; padding: 0; }
.post-card-media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.post-card-body { padding: var(--space-4); }
.post-card-meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--space-2); }
.post-card-title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.post-card-title a { color: var(--ink-heading); text-decoration: none; }
.post-card-title a:hover { color: var(--teal-dark); }
.post-card-excerpt { color: var(--body); margin-bottom: var(--space-3); }
.post-card-link { color: var(--teal-dark); font-weight: var(--fw-medium); text-decoration: none; }

.search-results, .search-result-item { margin-bottom: var(--space-4); }
.search-result-type { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--teal-dark); margin-bottom: var(--space-1); }
.search-result-title { font-size: var(--fs-h3); }
.search-result-title a { color: var(--ink-heading); text-decoration: none; }
.search-count { color: var(--muted); margin-bottom: var(--space-4); }
.no-results { padding-block: var(--section-sm); }

.post-hero { padding-block: var(--section-md) var(--space-5); }
.post-title { font-size: var(--fs-h1); color: var(--ink-heading); letter-spacing: var(--tracking-display); }
.post-meta { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-3); }
.post-thumbnail { margin-block: var(--space-5); }
.post-thumbnail img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--card-shadow); }
.post-content { padding-bottom: var(--section-md); }
.post-footer { padding-bottom: var(--section-sm); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.post-tags a, .post-cats a { color: var(--body); }

/* 7. 404 --------------------------------------------------------- */
.error-404 { padding-block: var(--section-lg); text-align: center; }
.error-404 h1 { font-size: var(--fs-h1); color: var(--ink-heading); letter-spacing: var(--tracking-display); }
.error-404 p { max-width: var(--measure-body); margin-inline: auto; color: var(--body); }
.error-404 .search-form { max-width: 460px; margin: var(--space-5) auto; }
.error-404-links { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Default search form (outside the navbar) */
.search-form { display: flex; gap: var(--space-2); align-items: stretch; }
.search-form-field { position: relative; flex: 1; display: flex; align-items: center; }
.search-form-icon { position: absolute; left: 12px; color: var(--muted); }
.search-field {
  width: 100%; height: var(--btn-height);
  padding: 0 14px 0 38px;
  border: 1px solid var(--line); border-radius: var(--btn-radius);
  background: var(--surface); color: var(--ink-strong);
}
.search-field:focus { border-color: var(--teal); outline: none; }

/* 8. COMMENTS ---------------------------------------------------- */
.comments-area { padding-block: var(--section-sm); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: var(--space-5); }
.comment-body { padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.comment-author .fn { color: var(--ink-heading); font-weight: var(--fw-semibold); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-strong);
}

/* Post navigation (prev/next) */
.post-navigation { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--section-sm); flex-wrap: wrap; }
.post-navigation .nav-subtitle { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--muted); }
.post-navigation a { color: var(--ink-heading); text-decoration: none; font-weight: var(--fw-medium); }
.post-navigation a:hover { color: var(--teal-dark); }