/*
 * AdPulse blog: small layer on top of theme.json.
 * Every colour, radius, space and duration comes from tokens.css. No hex values in this file.
 * Utilities (.ap-*) are the brand-system names, ported from brand-system/src/blueprint.css.
 */

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* ── Brand utilities ───────────────────────────────────────────────────────── */
.ap-label,
.ap-label a {
  font-family: var(--ap-font-mono);
  font-size: var(--ap-text-2xs);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: var(--ap-tracking-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.ap-numeric {
  font-family: var(--ap-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.ap-display {
  font-family: var(--ap-font-sans);
  letter-spacing: var(--ap-tracking-display);
  line-height: 1.02;
  font-weight: 600;
}

.ap-grid {
  background-image:
    linear-gradient(to right, var(--ap-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ap-grid-line) 1px, transparent 1px);
  background-size: var(--ap-grid-size) var(--ap-grid-size);
  background-position: -1px -1px;
}

.ap-dots {
  background-image: radial-gradient(circle at 1px 1px, var(--ap-grid-dot) 1px, transparent 1.5px);
  background-size: var(--ap-grid-dot-size) var(--ap-grid-dot-size);
}

.ap-fade {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
}

.ap-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ap-frame {
  border: 1px dashed var(--ap-frame);
  border-radius: var(--ap-radius-lg);
}

.ap-laser {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--primary) 30%, var(--primary) 70%, transparent);
}

/* ── Structural spacing ────────────────────────────────────────────────────── */
/* Static blocks take padding and margin from their saved HTML, so hand-written templates keep them here, on tokens. */
.wp-site-blocks > main { margin-top: var(--ap-space-6); }
.home .wp-site-blocks > main { margin-top: 0; }
.adp-header { padding-block: var(--ap-space-2); }
.adp-hero { padding-top: var(--ap-space-12); padding-bottom: var(--ap-space-8); }
.adp-footer { margin-top: var(--ap-space-12); padding-top: var(--ap-space-8); padding-bottom: var(--ap-space-6); }
.adp-author-box { padding: var(--ap-space-3); }
.adp-cta { padding: var(--ap-space-6) var(--ap-space-4); }
.ap-frame.ap-grid { padding-block: var(--ap-space-12); }
.wp-block-query-pagination { margin-top: var(--ap-space-6); }

/* ── Header ────────────────────────────────────────────────────────────────── */
.adp-header {
  border-bottom: 1px solid var(--border);
}

.adp-wordmark {
  display: inline-flex;
  line-height: 0;
}

.adp-wordmark img {
  display: block;
  width: 112px; /* brand minimum is 72px */
  height: auto;
}

/* Expanding icon search: input and icon button share one 40px row.
   Without an explicit height the input's padding + line-height inflate the
   flex row, stretching the 40px button and top-aligning its icon. */
.adp-header .adp-search .wp-block-search__inside-wrapper {
  align-items: stretch;
  gap: 0;
}

.adp-header .adp-search .wp-block-search__input {
  min-height: 0;
  height: 40px;
  padding: 0 var(--ap-space-1-5);
  line-height: normal;
  border-radius: var(--ap-radius-md);
}

.adp-header .adp-search .wp-block-search__button {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  height: 40px;
  min-height: 0;
  min-width: 40px;
  padding: 0;
  border-radius: var(--ap-radius-md);
  align-items: center;
}

.adp-header .adp-search .wp-block-search__button svg {
  display: block;
  vertical-align: middle;
}

.adp-header .adp-search .wp-block-search__button:hover { border-color: var(--primary); color: var(--primary); background: transparent; }

/* Expanded: input and button read as one joined control. */
.adp-header .adp-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
  border-radius: var(--ap-radius-md) 0 0 var(--ap-radius-md);
  border-right-width: 0;
}

.adp-header .adp-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
  border-radius: 0 var(--ap-radius-md) var(--ap-radius-md) 0;
}

/* Collapsed: the zero-width input must not contribute height to the row. */
.adp-header .adp-search.wp-block-search__searchfield-hidden .wp-block-search__input {
  height: 0;
  min-height: 0;
  padding-block: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.adp-header .wp-block-button__link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .adp-header .adp-search { display: none; }
  .adp-header .wp-block-button__link { padding-inline: var(--ap-space-2); }
}

/* ── Hero (home): blueprint grid lives here and in empty states only ───────── */
.adp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.adp-hero > *:not(.ap-backdrop) {
  position: relative;
  z-index: 1;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.adp-card .wp-block-post-title {
  margin: 0;
  letter-spacing: var(--ap-tracking-tight);
}

.adp-card .wp-block-post-title a {
  color: var(--foreground);
  text-decoration: none;
  transition: color var(--ap-duration-fast) var(--ap-ease-out);
}

.adp-card .wp-block-post-title a:hover { color: var(--primary); }

.adp-card .wp-block-post-featured-image { margin: 0; }

.adp-card .wp-block-post-featured-image img {
  transition: transform var(--ap-duration-slow) var(--ap-ease-out);
}

.adp-card:hover .wp-block-post-featured-image img { transform: scale(1.02); }

.adp-card .wp-block-post-featured-image { overflow: hidden; border-radius: var(--ap-radius-lg); }

.adp-card .wp-block-post-excerpt p { margin: 0; }
.adp-card .wp-block-post-terms { margin: 0; }

/* Category links are 11px labels; give them a 24px tap target (WCAG 2.2 target size). */
.wp-block-post-terms a {
  display: inline-block;
  line-height: 24px;
}

/* Section heading row on the home topic strips */
.adp-section-head {
  border-top: 1px solid var(--border);
  padding-top: var(--ap-space-2);
}

.adp-section-head h2 a {
  color: var(--foreground);
  text-decoration: none;
}

.adp-section-head h2 a:hover { color: var(--primary); }

/* ── Article ───────────────────────────────────────────────────────────────── */
.adp-article-meta {
  gap: var(--ap-space-1) var(--ap-space-3);
}

.adp-article-meta .wp-block-post-date { margin: 0; }

.wp-block-post-content figcaption,
.wp-block-image figcaption {
  font-size: var(--ap-text-sm);
  color: var(--muted-foreground);
}

.wp-block-post-content table th {
  font-family: var(--ap-font-mono);
  font-size: var(--ap-text-2xs);
  font-weight: 500;
  letter-spacing: var(--ap-tracking-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
}

.wp-block-post-content table th,
.wp-block-post-content table td {
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--ap-space-1) var(--ap-space-1-5);
}

/* Rank Math breadcrumbs: <nav class="rank-math-breadcrumb"><p>…</p></nav> */
.rank-math-breadcrumb p {
  margin: 0;
  font-family: var(--ap-font-mono);
  font-size: var(--ap-text-xs);
  color: var(--muted-foreground);
}

.rank-math-breadcrumb a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.rank-math-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.rank-math-breadcrumb .separator { margin: 0 var(--ap-space-0-5); }

/* Rank Math table of contents block */
.wp-block-rank-math-toc-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--ap-radius-lg);
  padding: var(--ap-space-3);
}

/* ── Share bar: plain links, no scripts ────────────────────────────────────── */
.adp-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ap-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adp-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--ap-radius-md);
  background: var(--card);
  color: var(--foreground);
  text-decoration: none;
  transition: border-color var(--ap-duration-fast) var(--ap-ease-out), color var(--ap-duration-fast) var(--ap-ease-out);
}

.adp-share a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Author box ────────────────────────────────────────────────────────────── */
.adp-author-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--ap-radius-lg);
}

.adp-author-box .wp-block-post-author-name { margin: 0; font-weight: 600; }
.adp-author-box .wp-block-post-author-biography { margin: 0; color: var(--muted-foreground); font-size: var(--ap-text-base); }

/* ── Newsletter / product CTA ──────────────────────────────────────────────── */
.adp-cta {
  background: var(--accent);
  color: var(--accent-foreground);
  border: 1px solid var(--ap-structure-border);
  border-radius: var(--ap-radius-xl);
}

.adp-cta :where(h2, h3, p) { color: var(--accent-foreground); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.adp-footer {
  border-top: 1px solid var(--border);
}

.adp-footer a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.adp-footer a:hover { color: var(--primary); text-decoration: underline; }

.adp-footer ul { list-style: none; margin: 0; padding: 0; }
.adp-footer li + li { margin-top: var(--ap-space-1); }

/* ── Search ────────────────────────────────────────────────────────────────── */
.adp-search .wp-block-search__input {
  border: 1px solid var(--input);
  border-radius: var(--ap-radius-md);
  background: var(--card);
  color: var(--foreground);
  padding: var(--ap-space-1-5) var(--ap-space-2);
  min-height: 44px;
}

.adp-search .wp-block-search__button {
  min-height: 44px;
  border-radius: var(--ap-radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  border: 0;
}

.adp-search .wp-block-search__button:hover { background: var(--ap-primary-hover); }

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.adp-icon { flex: none; vertical-align: middle; }

/* ── Motion ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .adp-card:hover .wp-block-post-featured-image img { transform: none; }
}