/* =========================================================
   04-components.css
   汎用コンポーネント (header / footer / button / card など)
   ========================================================= */

/* ---------- header ---------- */

.nt-header {
	background: var(--nt-color-bg);
	border-bottom: 1px solid var(--nt-color-border);
	transition: box-shadow var(--nt-transition), background-color var(--nt-transition), backdrop-filter var(--nt-transition);
}

/* Sticky header (v0.6 〜)
   Customizer の nt_sticky_header_enabled が ON のときだけ modifier が付く。
   既定は OFF なので、既存サイトに足したときに「いきなり sticky 化」しない。 */
.nt-header--sticky {
	position: sticky;
	top: 0;
	z-index: var(--nt-z-header);
	background-color: color-mix(in srgb, var(--nt-color-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.nt-is-scrolled .nt-header--sticky {
	background-color: var(--nt-color-bg);
	box-shadow: var(--nt-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
	.nt-header,
	.nt-header--sticky {
		transition: none;
	}
}

.nt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nt-gap);
	min-height: var(--nt-header-h);
	padding-block: 12px;
}

.nt-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: var(--nt-fs-md);
	color: var(--nt-color-text);
	text-decoration: none;
}

/* Custom logo sizing.
   WordPress emits `<img width="1" height="1">` for SVG attachments whose
   _wp_attachment_metadata reports width=0/height=0 (the common case for
   SVGs without explicit width/height attributes on the <svg> element, even
   when a viewBox is present). With CSS `height: auto`, browsers still
   honour those HTML width/height attributes as the specified dimensions
   when no absolute intrinsic dimensions are known — the logo renders at
   1×1 px. Pinning an explicit height in CSS forces the rendered height,
   and the SVG viewBox aspect ratio computes the width via `width: auto`. */
.nt-header__logo img,
.nt-header__logo .custom-logo {
	width: auto;
	height: 40px;
	max-width: 240px;
}

.nt-header__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nt-header__menu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-header__menu a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--nt-radius-sm);
	color: var(--nt-color-text);
	text-decoration: none;
	transition: background var(--nt-transition), color var(--nt-transition);
}

.nt-header__menu a:hover,
.nt-header__menu .current-menu-item > a {
	background: var(--nt-color-surface);
	color: var(--nt-color-primary);
}

.nt-header__cta {
	display: inline-flex;
	gap: 8px;
}

/* mobile menu button */
.nt-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: var(--nt-radius-sm);
	border: 1px solid var(--nt-color-border);
	align-items: center;
	justify-content: center;
}

.nt-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.nt-menu-toggle__bar::before,
.nt-menu-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--nt-transition);
}

.nt-menu-toggle__bar::before { top: -6px; }
.nt-menu-toggle__bar::after  { top:  6px; }

body.nt-menu-open .nt-menu-toggle__bar { background: transparent; }
body.nt-menu-open .nt-menu-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
body.nt-menu-open .nt-menu-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.nt-menu-toggle {
		display: inline-flex;
	}
	/* Mobile nav panel slides in from the right edge, not from above
	   the header. Sliding from the top makes the panel visually
	   "pass through" the logo on its way down, which reads as a
	   glitch. Right-edge slide keeps the brand area completely
	   undisturbed while the panel appears alongside it. */
	.nt-header__nav {
		position: fixed;
		inset: var(--nt-header-h) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 24px;
		background: var(--nt-color-bg);
		border-top: 1px solid var(--nt-color-border);
		transform: translateX(100%);
		opacity: 0;
		transition: transform var(--nt-transition), opacity var(--nt-transition);
		overflow-y: auto;
	}
	.nt-header__menu {
		flex-direction: column;
	}
	.nt-header__menu a {
		display: block;
		padding: 14px;
		border-bottom: 1px solid var(--nt-color-border);
		border-radius: 0;
	}
	body.nt-menu-open .nt-header__nav {
		transform: translateX(0);
		opacity: 1;
	}

	/* Respect reduced-motion: instantaneous show/hide instead of
	   the 0.25 s slide. opacity still transitions so the panel
	   doesn't pop in without a smooth visual handoff. */
	@media (prefers-reduced-motion: reduce) {
		.nt-header__nav {
			transition: opacity var(--nt-transition);
		}
	}
}

/* Mobile header (≤ 900px) — deterministic two-column header,
   unified with the hamburger / mobile-nav breakpoint above.

   The hamburger toggle appears and the primary nav becomes a
   position:fixed slide-down panel at exactly the same width. All
   other header-shape concerns — logo sizing, grid layout, mascot
   visibility, sticky backdrop — share the SAME breakpoint so the
   header never has a transitional "broken" state between
   hamburger-on and grid-layout-on (the 601-900 px band previously
   had hamburger active but desktop logo + flex layout).

   Layout:
     grid-template-columns: minmax(0, 1fr) auto;
   - Column 1 (brand): minmax(0, 1fr) takes "everything except the
     toggle", with the 0 minimum letting the logo shrink rather
     than push the row to overflow.
   - Column 2 (toggle): auto sizes to its intrinsic 44 × 44 px.
   - align-items: center → vertical centring of both columns.
   - gap: 12px → predictable spacing, unaffected by
     justify-content.

   Critical at this breakpoint: backdrop-filter on .nt-header--sticky
   is reset to none. Per CSS spec, an element with a non-trivial
   filter / backdrop-filter becomes the containing block for its
   descendants' `position: fixed`. The mobile nav panel relies on
   `position: fixed; inset: var(--nt-header-h) 0 0 0` being
   viewport-relative — the panel slides down from above the
   viewport to cover the page below the header. When the sticky
   header carried `backdrop-filter: blur(8px)` (its desktop styling),
   the nav's fixed positioning became relative to the 72px-tall
   header box; `inset: 72 0 0 0` then collapsed the panel to ~0
   height and the menu appeared not to open. Dropping
   backdrop-filter at this breakpoint restores standard
   viewport-relative behaviour. The desktop band (> 900 px) keeps
   the frosted sticky-header effect. */
@media (max-width: 900px) {
	.nt-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
	}

	.nt-header__brand-wrap,
	.nt-header__brand,
	.nt-header__logo {
		min-width: 0;
		max-width: 100%;
	}

	.nt-header__logo img,
	.nt-header__logo .custom-logo {
		width: auto;
		height: 30px;
		max-width: min(160px, calc(100vw - 112px));
	}

	.nt-menu-toggle {
		justify-self: end;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
	}

	.nt-header--sticky {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ---------- buttons ---------- */

/* Button sizing is centralised through the --nt-button-* token set so
   .nt-btn / .wp-block-button__link / .is-style-outline buttons all
   resolve to the same outer box. See assets/css/01-tokens.css for the
   token group and assets/css/05-blocks.css for the WP block-button
   counterpart that shares this recipe. */
.nt-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--nt-button-min-height);
	padding: var(--nt-button-padding-y) var(--nt-button-padding-x);
	border: var(--nt-button-border-width) solid transparent;
	border-radius: var(--nt-radius-pill);
	font-weight: 600;
	line-height: var(--nt-button-line-height);
	text-decoration: none;
	transition: transform var(--nt-transition), background var(--nt-transition), color var(--nt-transition), border-color var(--nt-transition), box-shadow var(--nt-transition);
	box-shadow: var(--nt-button-shadow);
}

.nt-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.nt-btn--primary {
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
}

.nt-btn--primary:hover {
	color: var(--nt-color-primary-contrast);
	background: color-mix(in srgb, var(--nt-color-primary) 88%, black);
}

.nt-btn--secondary {
	background: var(--nt-color-secondary);
	color: var(--nt-color-secondary-contrast);
}

.nt-btn--secondary:hover {
	color: var(--nt-color-secondary-contrast);
}

.nt-btn--accent {
	background: var(--nt-color-accent);
	color: var(--nt-color-accent-contrast);
}

.nt-btn--ghost {
	background: transparent;
	color: var(--nt-color-text);
	border-color: var(--nt-color-border);
}

.nt-btn--ghost:hover {
	background: var(--nt-color-surface);
}

/* ---------- card ---------- */

.nt-card {
	display: flex;
	flex-direction: column;
	background: var(--nt-card-bg);
	border: 1px solid var(--nt-card-border);
	border-radius: var(--nt-radius-md);
	overflow: hidden;
	transition: box-shadow var(--nt-transition), transform var(--nt-transition);
	height: 100%;
}

.nt-card:hover {
	box-shadow: var(--nt-card-hover-shadow);
	transform: translateY(-2px);
}

.nt-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--nt-color-surface);
}

.nt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.nt-card__category {
	display: inline-block;
	font-size: var(--nt-fs-xs);
	color: var(--nt-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	text-decoration: none;
}

.nt-card__title {
	font-size: var(--nt-fs-md);
	margin: 0;
	line-height: 1.5;
}

.nt-card__title a {
	color: var(--nt-color-text);
	text-decoration: none;
}

.nt-card__title a:hover {
	color: var(--nt-color-primary);
}

.nt-card__excerpt {
	color: var(--nt-color-muted);
	margin: 0;
	font-size: var(--nt-fs-sm);
}

.nt-card__meta {
	margin-top: auto;
	font-size: var(--nt-fs-xs);
	color: var(--nt-color-muted);
}

/* Bottom-anchor the last actionable element in a card body so cards
   with different excerpt lengths still line up their buttons / CTAs
   on the same horizontal baseline. Works for any of the common
   trailing elements (Gutenberg buttons block, theme .nt-actions
   wrapper, or a single .nt-btn link).

   Centring is intentional inside cards: the surrounding card body
   reads better with a centred call to action than a left-aligned
   one. Body copy elsewhere on the page is unaffected because the
   rule is scoped to `.nt-card__body >`. */
.nt-card__body > .wp-block-buttons:last-child,
.nt-card__body > .nt-actions:last-child,
.nt-card__body > .nt-btn:last-child {
	margin-top: auto;
	justify-content: center;
}

.nt-card__body > .nt-btn:last-child {
	align-self: center;
}

/* Preparing-state card overlay.
   Apply `.is-preparing` to a `.nt-card` element when its detail page
   or actual product / content is not yet ready for production traffic.
   The card stays in the grid at its full size (so the row baseline
   does not shift); the inner contents are softly blurred and a
   "準備中" overlay is drawn on top of the card.

   - `pointer-events: none` on the card disables all clicks /
     navigation while the placeholder state is shown.
   - `filter: blur(2px)` is applied to every direct child so both
     `.nt-card__media` and `.nt-card__body` are equally blurred. The
     ::after pseudo-element is NOT a descendant of `> *`, so it stays
     sharp on top.
   - `border-radius: inherit` makes the overlay match the card's
     rounded corners.
   - The label is exposed as a CSS custom property
     (`--nt-preparing-label`) with "Coming soon" as the default. Sites
     that ship in a different locale can override globally, e.g.:
       body { --nt-preparing-label: "準備中"; }
     or per-card via inline / additional CSS. */
.nt-card.is-preparing {
	--nt-preparing-label: "Coming soon";
	position: relative;
	pointer-events: none;
}

.nt-card.is-preparing > * {
	filter: blur(2px);
	opacity: 0.6;
}

.nt-card.is-preparing::after {
	content: var(--nt-preparing-label);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 2;
	background: color-mix(in srgb, var(--nt-color-bg) 72%, transparent);
	color: var(--nt-color-primary);
	font-weight: 700;
	font-size: var(--nt-fs-md);
	letter-spacing: 0.12em;
	border-radius: inherit;
	pointer-events: none;
}

/* ---------- hero / actions / faq ---------- */

.nt-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--nt-stack);
	padding: 0.35em 0.9em;
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-pill);
	background: color-mix(in srgb, var(--nt-color-primary) 8%, var(--nt-color-bg));
	color: var(--nt-color-primary);
	font-size: var(--nt-fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Generic section eyebrow label.
   Apply via Gutenberg paragraph block → "Advanced → Additional CSS
   class(es): nt-eyebrow" to render small uppercase tags above
   section headings (PRODUCTS / PHILOSOPHY / CHILL BIZ etc.).

   Unlike .nt-hero__eyebrow this is a *text* label (no pill chrome)
   so it sits naturally above any h2 / h3 without extra spacing. Uses
   --nt-color-primary so the label inherits the active preset's
   accent blue across Corporate / Friendly / Tech / Dark presets. */
.nt-eyebrow {
	display: block;
	margin: 0 0 0.5em;
	color: var(--nt-color-primary);
	font-size: var(--nt-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* On dark surfaces (CTA, hero-dark, etc.) the primary blue gets too
   close to background; lift the label to the on-CTA foreground so it
   stays visible. Authors who want it specifically tinted can override
   with theme.json / Customizer. */
.nt-cta .nt-eyebrow,
.nt-section--dark .nt-eyebrow {
	color: color-mix(in srgb, var(--nt-color-primary) 35%, var(--nt-fg-cta));
}

.nt-hero__actions,
.nt-actions {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.nt-section__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

/* ---------- front hero layout / media / overlay (v0.6) ----------
   Customizer (Neutrope Theme Settings) の nt_hero_layout / nt_hero_media_type
   などの設定で見た目が切り替わる。CSS custom property
   (--nt-hero-bg-image / --nt-hero-bg-size / --nt-hero-bg-position /
    --nt-hero-overlay-opacity) は template-parts/front-hero.php が
   inline style で動的に注入する (full-bleed の背景画像 / overlay 不透明度のみ)。 */

.nt-front-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.nt-front-hero__container {
	position: relative;
	z-index: 1;
}

.nt-front-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--nt-color-text);
	opacity: var(--nt-hero-overlay-opacity, 0.4);
	pointer-events: none;
	z-index: 0;
}

/* full-bleed: 画面いっぱいの first view (背景画像 / 背景動画 + テキスト) */
.nt-front-hero--layout-full-bleed {
	min-height: 90svh;
	display: flex;
	align-items: center;
	color: var(--nt-color-primary-contrast);
	background-image: var(--nt-hero-bg-image, none);
	background-size: var(--nt-hero-bg-size, cover);
	background-position: var(--nt-hero-bg-position, center center);
	background-repeat: no-repeat;
}

.nt-front-hero--layout-full-bleed .nt-hero__title,
.nt-front-hero--layout-full-bleed .nt-hero__lead {
	color: inherit;
}

.nt-front-hero--layout-full-bleed .nt-hero__lead {
	color: color-mix(in srgb, currentColor 90%, transparent);
}

/* Hero eyebrow pill on full-bleed hero.
   The full-bleed layout flips text colour to --nt-color-primary-contrast
   (white on most presets) so headings remain readable over the
   background image. The base .nt-hero__eyebrow pill uses an
   almost-white background (8% primary on bg) which collapses to
   "white pill / white text" once `color: inherit` is applied — the
   eyebrow disappears. Provide a self-contained colour pairing here:
   translucent light pill backdrop + primary-coloured label, readable
   on light and dark hero imagery alike, independent of any overlay
   opacity. */
.nt-front-hero--layout-full-bleed .nt-hero__eyebrow {
	background: color-mix(in srgb, var(--nt-color-bg) 92%, transparent);
	color: var(--nt-color-primary);
	border-color: color-mix(in srgb, var(--nt-color-primary) 22%, transparent);
}

.nt-front-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	pointer-events: none;
}

/* split: 左テキスト / 右ビジュアル (BtoB / SaaS 向け) */
.nt-front-hero--layout-split .nt-front-hero__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nt-gap);
	align-items: center;
}

@media (min-width: 900px) {
	.nt-front-hero--layout-split .nt-front-hero__container {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.nt-front-hero--layout-split .nt-front-hero__content {
	text-align: left;
}

.nt-front-hero--layout-split .nt-hero__actions,
.nt-front-hero--layout-visual-card .nt-hero__actions {
	justify-content: flex-start;
}

.nt-front-hero__media {
	margin: 0;
}

.nt-front-hero__media--split {
	border-radius: var(--nt-radius-lg);
	overflow: hidden;
	box-shadow: var(--nt-shadow-md);
	background: var(--nt-color-surface);
}

.nt-front-hero__media-image,
.nt-front-hero__media-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* visual-card: 中央テキスト + 下に上品なビジュアルカード */
.nt-front-hero--layout-visual-card .nt-front-hero__container {
	display: grid;
	gap: var(--nt-gap);
	justify-items: center;
}

.nt-front-hero__media--visual-card {
	max-width: 720px;
	width: 100%;
	border-radius: var(--nt-radius-lg);
	overflow: hidden;
	box-shadow: var(--nt-shadow-lg);
	background: var(--nt-color-surface);
}

.nt-front-hero__media--visual-card .nt-front-hero__media-image,
.nt-front-hero__media--visual-card .nt-front-hero__media-video {
	aspect-ratio: 16 / 9;
}

/* minimal: 既存の simple hero と同等。modifier 経由で他レイアウトとの違いを明示する。 */
.nt-front-hero--layout-minimal .nt-front-hero__content,
.nt-front-hero--layout-standard .nt-front-hero__content {
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.nt-front-hero__bg-video,
	.nt-front-hero__media-video {
		display: none;
	}
}

.nt-faq {
	display: grid;
	gap: var(--nt-stack);
}

.nt-faq__item {
	padding: 16px 20px;
}

.nt-faq__item summary {
	cursor: pointer;
}

.nt-faq__item summary > strong {
	display: inline-block;
}

.nt-faq__item[open] summary {
	margin-bottom: 0.5em;
}

/* ---------- LP hero image ---------- */

.nt-lp-hero {
	padding-block: 0;
}

.nt-lp-hero__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

/* ---------- breadcrumbs ---------- */

.nt-breadcrumbs {
	font-size: var(--nt-fs-sm);
	color: var(--nt-color-muted);
	padding-block: 12px;
}

.nt-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nt-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nt-breadcrumbs li + li::before {
	content: "›";
	color: var(--nt-color-muted);
}

.nt-breadcrumbs a {
	color: var(--nt-color-muted);
	text-decoration: none;
}

.nt-breadcrumbs a:hover {
	color: var(--nt-color-primary);
}

.nt-breadcrumbs [aria-current="page"] {
	color: var(--nt-color-text);
}

/* ---------- page hero ---------- */

.nt-page-hero {
	background: var(--nt-bg-hero);
	padding-block: clamp(48px, 8vw, 96px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* プリセット側で --nt-hero-decoration-opacity を上げると装飾が出る。
   既定の opacity は 0 なので corporate / tech / dark には影響しない。 */
.nt-page-hero::before {
	content: "";
	position: absolute;
	right: -8%;
	top: -40%;
	width: 50%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle, var(--nt-color-accent) 0%, transparent 70%);
	opacity: var(--nt-hero-decoration-opacity);
	pointer-events: none;
	z-index: -1;
}

.nt-page-hero__title {
	margin-top: 0;
}

.nt-page-hero__lead {
	color: var(--nt-color-muted);
	max-width: 60ch;
}

.nt-page-hero__media {
	margin: clamp(20px, 4vw, 36px) 0 0;
}

.nt-page-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nt-radius-lg);
}

/* ---------- post meta ---------- */

.nt-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	font-size: var(--nt-fs-sm);
	color: var(--nt-color-muted);
	margin-bottom: 1.5em;
}

.nt-post-meta__category {
	display: inline-block;
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	padding: 2px 12px;
	border-radius: var(--nt-radius-pill);
	font-size: var(--nt-fs-xs);
	text-decoration: none;
	font-weight: 600;
}

.nt-post-meta__label {
	font-weight: 600;
	color: var(--nt-color-text);
}

/* ---------- pagination ---------- */

.nt-pagination {
	margin-block: var(--nt-gap);
}

.nt-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: var(--nt-radius-sm);
	border: 1px solid var(--nt-color-border);
	color: var(--nt-color-text);
	text-decoration: none;
	margin: 2px;
}

.nt-pagination .page-numbers.current {
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	border-color: var(--nt-color-primary);
}

/* Scope the hover background to actual page-number cells (`<a>` / `<span>`)
   only. With `paginate_links( array( 'type' => 'list' ) )` WordPress also
   places `.page-numbers` on the outer `<ul>` wrapper, so a bare
   `.page-numbers:hover` would paint a hover band across the whole list
   row. The element selectors below pin hover behaviour to the clickable
   anchors and the non-current span (the current-page label is
   intentionally excluded so its primary-coloured chip is not repainted). */
.nt-pagination a.page-numbers:hover,
.nt-pagination span.page-numbers:hover:not(.current) {
	background: var(--nt-color-surface);
}

/* Keyboard focus ring for pagination cells. Same element-scoped selectors
   as the hover rule so `<ul.page-numbers>` (the list wrapper produced by
   paginate_links 'type' => 'list') is never targeted. outline-offset 2 px
   plus the higher class specificity also overrides the global
   `a:focus-visible` ring from 02-base.css, so we keep a consistent
   rounded-square focus indicator across all four presets. */
.nt-pagination a.page-numbers:focus-visible,
.nt-pagination span.page-numbers:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

/* ---------- CTA section ---------- */

.nt-cta {
	background: var(--nt-bg-cta);
	color: var(--nt-fg-cta);
	padding-block: var(--nt-section-y);
	text-align: center;
}

.nt-cta__title {
	color: var(--nt-fg-cta);
	margin-top: 0;
}

.nt-cta__lead {
	color: color-mix(in srgb, var(--nt-fg-cta) 80%, transparent);
	max-width: 60ch;
	margin-inline: auto;
}

.nt-cta__actions {
	margin-top: var(--nt-gap);
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* v0.8.3 follow-up — CTA button sizing normalization.
   ---------------------------------------------------------
   PR #64 normalized base WP Button block sizing on every page via the
   `.wp-block-button > .wp-block-button__link` rule in 05-blocks.css
   (specificity 0,2,0) — Hero / DOWNLOAD buttons settled at 40 px
   (2.5 em). But CTA-scoped buttons on heavily-customised pages such as
   Neutrope Biz `/neutrope-starter/` were still rendering ~45.73 px,
   apparently because an upstream rule (WP core block-library, a
   theme.json `core/button` setting, or a page-level block-spacing
   override) wins against the base rule for `.nt-cta`-scoped buttons.

   Defensive fix: re-state the token-based sizing inside an explicit
   `.nt-cta .wp-block-button > .wp-block-button__link` selector
   (specificity 0,3,0) so the box dimensions are pinned regardless of
   source order. Same token values as the base rule, so non-CTA buttons
   are unaffected and CTA buttons end up at the exact same height as
   Hero / DOWNLOAD buttons (40 px at 16 px font-size).

   The two existing CTA colour rules (filled / outline) are left
   untouched — they handle background / color / border-color only and
   never set size. */
.nt-cta .wp-block-button > .wp-block-button__link {
	box-sizing: border-box;
	min-height: var(--nt-button-min-height);
	padding: var(--nt-button-padding-y) var(--nt-button-padding-x);
	border-width: var(--nt-button-border-width);
	line-height: var(--nt-button-line-height);
}

/* CTA section runs on --nt-bg-cta (dark by default), so buttons placed
   inside .nt-cta — whether the theme's .nt-btn or Gutenberg's
   .wp-block-button — need explicit colour pairings in every state to
   stay readable against the dark backdrop. Without this, browsers and
   block themes can fall back to a primary-coloured text on hover that
   disappears into the CTA background. */
.nt-cta .nt-btn--primary,
.nt-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	border-color: transparent;
}

.nt-cta .nt-btn--primary:hover,
.nt-cta .nt-btn--primary:focus-visible,
.nt-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.nt-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--nt-color-primary) 86%, white);
	color: var(--nt-color-primary-contrast);
	border-color: transparent;
}

.nt-cta .nt-btn--ghost,
.nt-cta .is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--nt-fg-cta);
	border-color: color-mix(in srgb, var(--nt-fg-cta) 55%, transparent);
}

.nt-cta .nt-btn--ghost:hover,
.nt-cta .nt-btn--ghost:focus-visible,
.nt-cta .is-style-outline > .wp-block-button__link:hover,
.nt-cta .is-style-outline > .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--nt-fg-cta) 12%, transparent);
	color: var(--nt-fg-cta);
	border-color: var(--nt-fg-cta);
}

/* ---------- footer ---------- */

.nt-footer {
	background: var(--nt-bg-footer);
	color: var(--nt-fg-footer);
}

.nt-footer__main {
	padding-block: clamp(48px, 6vw, 80px);
	display: grid;
	gap: var(--nt-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	/* SP (single column): center every direct child for a natural
	   stacked layout. Per-component overrides below restore left
	   alignment where lists/buttons need it. */
	text-align: center;
}

/* PC (≥ 720 px): two-column layout — brand on the left, nav + contact
   stacked on the right. Switching from the previous 1.4fr 1fr 1fr
   3-column grid to a 2-column "brand vs everything-else" split makes
   long footer menus wrap predictably (they no longer compete with a
   separate share-buttons column for width) and reads as a cleaner
   site-info / navigation pairing. `minmax(0, ...)` on both tracks
   lets either side shrink rather than push the grid to overflow. */
@media (min-width: 720px) {
	.nt-footer__main {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		text-align: left;
	}
}

.nt-footer a {
	color: color-mix(in srgb, var(--nt-fg-footer) 90%, transparent);
	text-decoration: none;
}

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

/* Focus ring on dark footer surfaces. The global a:focus-visible from
   02-base.css uses --nt-color-primary as the outline color, which on the
   dark preset is gold (#c9a44c) and shows clearly on black footer bg.
   On corporate / friendly / tech presets the footer is also dark
   (--nt-bg-footer is a dark navy/brown) so the primary-colored ring
   still pops. Override here only to push outline-offset to 3 px so the
   ring does not touch text on dense footer link lists. */
.nt-footer a:focus-visible {
	outline: 2px solid var(--nt-fg-footer);
	outline-offset: 3px;
	border-radius: 2px;
}

.nt-footer__brand-name {
	font-size: var(--nt-fs-lg);
	font-weight: 700;
	color: var(--nt-fg-footer);
	margin-bottom: 0.5em;
}

.nt-footer__logo {
	display: inline-block;
	margin-bottom: 0.75em;
	text-decoration: none;
}

/* Footer logo should read as a quieter restatement of the header
   brand mark — not larger than the header logo. Header is 40px, so
   the footer cap sits a touch below at 32px.

   See the rationale comment above .nt-header__logo for why an explicit
   height is required (SVGs with no absolute intrinsic dimensions). */
.nt-footer__logo img,
.nt-footer__logo .custom-logo {
	width: auto;
	height: 32px;
	max-width: 200px;
}

.nt-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	font-size: var(--nt-fs-sm);
	/* SP fallback: centered list, but kept as horizontal wrap so very
	   long menus break onto multiple lines cleanly rather than producing
	   a tall single column on narrow viewports. */
	justify-content: center;
}

/* PC (≥ 720 px): the right column hosts both nav and contact stacked
   vertically. The nav itself stays inline-wrap (flex) so menus with
   many items wrap to a second line rather than overflowing — which
   was the principal issue with the old 1fr 1fr 1fr 3-column layout.

   .nt-footer__nav and .nt-footer__contact share the right column via
   `grid-row: span 1` — they participate in the regular grid auto-flow
   so the right column gets two stacked rows (nav, then contact).
   align-self start keeps them anchored to the top of the footer block
   even when the brand column is taller. */
@media (min-width: 720px) {
	.nt-footer__brand {
		grid-row: 1 / span 2;
	}

	.nt-footer__nav,
	.nt-footer__contact {
		grid-column: 2;
		justify-self: end;
		text-align: right;
		max-width: 100%;
	}

	.nt-footer__menu {
		justify-content: flex-end;
		gap: 8px 18px;
	}
}

/* Footer contact area gathers footer share + nt_footer_contact action
   hook output. Match the nav's alignment scheme (centered on SP,
   right-aligned on PC) so multiple action-hook DOM items stack
   cleanly without horizontal jitter. */
.nt-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

@media (min-width: 720px) {
	.nt-footer__contact {
		align-items: flex-end;
	}
}

.nt-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--nt-fg-footer) 15%, transparent);
	padding-block: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: var(--nt-fs-sm);
	color: color-mix(in srgb, var(--nt-fg-footer) 70%, transparent);
}

.nt-footer__utility {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------- footer share (v0.6) ---------- */

.nt-footer-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: var(--nt-fs-sm);
}

.nt-footer-share__label {
	font-weight: 600;
	color: color-mix(in srgb, var(--nt-fg-footer) 80%, transparent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--nt-fs-xs);
}

.nt-footer-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nt-footer-share__item {
	margin: 0;
	padding: 0;
}

.nt-footer-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--nt-radius-pill);
	color: color-mix(in srgb, var(--nt-fg-footer) 85%, transparent);
	background: color-mix(in srgb, var(--nt-fg-footer) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--nt-fg-footer) 18%, transparent);
	text-decoration: none;
	transition: color var(--nt-transition), background var(--nt-transition), border-color var(--nt-transition);
	position: relative;
}

.nt-footer-share__link:hover {
	color: var(--nt-fg-footer);
	background: color-mix(in srgb, var(--nt-fg-footer) 18%, transparent);
	border-color: color-mix(in srgb, var(--nt-fg-footer) 35%, transparent);
	text-decoration: none;
}

.nt-footer-share__link:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

.nt-footer-share__icon {
	width: 18px;
	height: 18px;
	display: block;
}

.nt-footer-share__link--copy.is-copied {
	color: var(--nt-color-primary-contrast);
	background: var(--nt-color-primary);
	border-color: var(--nt-color-primary);
}

/* ---------- post share (v0.7) ---------- */
/* footer share と同じ構造だが、投稿本文上 / 下に置くため
   背景色 (フッター暗色) ではなく本文ライト色に合わせる. */

.nt-post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: var(--nt-fs-sm);
	margin-block: var(--nt-stack);
	padding-block: 12px;
	border-top: 1px solid var(--nt-color-border);
	border-bottom: 1px solid var(--nt-color-border);
}

.nt-post-share--top {
	margin-block-start: 0;
}

.nt-post-share--bottom {
	margin-block-end: 0;
}

.nt-post-share__label {
	font-weight: 600;
	color: var(--nt-color-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--nt-fs-xs);
}

.nt-post-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nt-post-share__item {
	margin: 0;
	padding: 0;
}

.nt-post-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--nt-radius-pill);
	color: var(--nt-color-muted);
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	text-decoration: none;
	transition: color var(--nt-transition), background var(--nt-transition), border-color var(--nt-transition);
	position: relative;
}

.nt-post-share__link:hover {
	color: var(--nt-color-primary-contrast);
	background: var(--nt-color-primary);
	border-color: var(--nt-color-primary);
	text-decoration: none;
}

.nt-post-share__link:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

.nt-post-share__icon {
	width: 18px;
	height: 18px;
	display: block;
}

.nt-post-share__link--copy.is-copied {
	color: var(--nt-color-primary-contrast);
	background: var(--nt-color-primary);
	border-color: var(--nt-color-primary);
}

/* ---------- post table of contents (v0.7) ---------- */
/* シングル投稿の本文 h2/h3 から自動生成される目次。card surface 風で
   本文の邪魔にならず、折りたたみ ON/OFF を Customizer で制御する。 */

.nt-post-toc {
	margin-block: var(--nt-stack);
	padding: 16px 20px;
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-md);
}

.nt-post-toc--after-title {
	margin-block-start: 0;
}

.nt-post-toc__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: transparent;
	color: var(--nt-color-text);
	font-weight: 700;
	font-size: var(--nt-fs-md);
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.nt-post-toc__toggle:hover .nt-post-toc__title {
	color: var(--nt-color-primary);
}

.nt-post-toc__toggle:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

.nt-post-toc__title {
	display: inline-block;
	font-weight: 700;
	font-size: var(--nt-fs-md);
	margin: 0;
}

.nt-post-toc__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	transition: transform var(--nt-transition);
}

.nt-post-toc.is-collapsed .nt-post-toc__icon {
	transform: rotate(-90deg);
}

.nt-post-toc__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.nt-post-toc.is-collapsed .nt-post-toc__list {
	display: none;
}

.nt-post-toc__item {
	margin: 0;
	padding: 4px 0;
}

.nt-post-toc__item--h3 {
	padding-left: 20px;
}

.nt-post-toc__link {
	color: var(--nt-color-text);
	text-decoration: none;
	font-size: var(--nt-fs-sm);
	line-height: 1.5;
}

.nt-post-toc__link:hover {
	color: var(--nt-color-primary);
	text-decoration: underline;
}

.nt-post-toc__link:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.nt-post-toc__icon {
		transition: none;
	}
}

/* ---------- post author card (v0.7) ---------- */
/* シングル投稿の本文後に表示される薄い著者紹介ブロック。
   avatar 丸型 + 本文ライト背景前提の card surface 風。
   モバイルでは縦積み, デスクトップでは avatar が左に並ぶ。 */

.nt-author-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block: var(--nt-stack);
	padding: 20px;
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-md);
}

@media (min-width: 600px) {
	.nt-author-card {
		flex-direction: row;
		align-items: flex-start;
	}
}

.nt-author-card__avatar {
	flex: 0 0 auto;
}

.nt-author-card__avatar-img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: var(--nt-radius-pill);
	object-fit: cover;
}

.nt-author-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.nt-author-card__eyebrow {
	margin: 0 0 4px;
	color: var(--nt-color-muted);
	font-size: var(--nt-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

.nt-author-card__name {
	margin: 0 0 8px;
	font-size: var(--nt-fs-md);
	font-weight: 700;
	line-height: 1.4;
}

.nt-author-card__name a {
	color: var(--nt-color-text);
	text-decoration: none;
}

.nt-author-card__name a:hover {
	color: var(--nt-color-primary);
	text-decoration: underline;
}

.nt-author-card__bio {
	color: var(--nt-color-muted);
	font-size: var(--nt-fs-sm);
	line-height: 1.6;
	margin: 0 0 8px;
}

.nt-author-card__bio p {
	margin: 0 0 0.5em;
}

.nt-author-card__bio p:last-child {
	margin-bottom: 0;
}

.nt-author-card__link {
	display: inline-block;
	font-size: var(--nt-fs-sm);
	color: var(--nt-color-primary);
	text-decoration: none;
	font-weight: 600;
}

.nt-author-card__link:hover {
	text-decoration: underline;
}

.nt-author-card__link:focus-visible {
	outline: 2px solid var(--nt-color-primary);
	outline-offset: 2px;
}

/* ---------- back to top ---------- */

.nt-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: var(--nt-radius-pill);
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--nt-shadow-md);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity var(--nt-transition), transform var(--nt-transition), background var(--nt-transition);
	z-index: var(--nt-z-overlay);
}

.nt-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.nt-back-to-top:hover {
	background: color-mix(in srgb, var(--nt-color-primary) 88%, black);
	color: var(--nt-color-primary-contrast);
}

.nt-back-to-top:focus-visible {
	outline: 2px solid var(--nt-color-primary-contrast);
	outline-offset: 3px;
}

.nt-back-to-top__icon {
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.nt-back-to-top {
		transform: none;
	}
}

/* ---------- comments ---------- */

.nt-comments {
	padding-block: var(--nt-section-y);
	background: var(--nt-color-bg);
}

.nt-comments__title {
	margin-top: 0;
	margin-bottom: var(--nt-stack);
}

.nt-comment-list {
	list-style: none;
	margin: 0 0 var(--nt-gap);
	padding: 0;
}

.nt-comment-list .children {
	list-style: none;
	margin: var(--nt-stack) 0 0;
	padding-left: clamp(16px, 4vw, 32px);
}

.nt-comment-list .comment-body,
.nt-comment-list .pingback .comment-body {
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-md);
	background: var(--nt-color-surface);
	padding: 16px 20px;
	margin-block-end: var(--nt-stack);
}

.nt-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 0.5em;
}

.nt-comment-list .comment-author .avatar {
	border-radius: 50%;
}

.nt-comment-list .comment-meta,
.nt-comment-list .comment-metadata {
	font-size: var(--nt-fs-sm);
	color: var(--nt-color-muted);
	margin-block-end: 0.5em;
}

.nt-comment-list .comment-meta a,
.nt-comment-list .comment-metadata a {
	color: var(--nt-color-muted);
	text-decoration: none;
}

.nt-comment-list .reply {
	margin-top: 0.5em;
	font-size: var(--nt-fs-sm);
}

.nt-comments__pagination {
	margin-block: var(--nt-gap);
}

.nt-comments__closed {
	color: var(--nt-color-muted);
	font-size: var(--nt-fs-sm);
}

.nt-comment-form {
	display: grid;
	gap: 12px;
	margin-block-start: var(--nt-gap);
}

.nt-comment-form__title {
	margin-top: 0;
	margin-bottom: 0.5em;
}

.nt-comment-form .comment-form-comment label,
.nt-comment-form .comment-form-author label,
.nt-comment-form .comment-form-email label,
.nt-comment-form .comment-form-url label {
	display: block;
	font-weight: 600;
	margin-block-end: 4px;
}

.nt-comment-form .comment-notes,
.nt-comment-form .logged-in-as {
	color: var(--nt-color-muted);
	font-size: var(--nt-fs-sm);
}

.nt-comment-form .form-submit {
	margin-block-start: 8px;
}

/* ---------- sidebar / widgets ---------- */

.nt-sidebar {
	display: grid;
	gap: var(--nt-gap);
}

.nt-widget {
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-border);
	border-radius: var(--nt-radius-md);
	padding: 16px 20px;
}

.nt-widget__title {
	font-size: var(--nt-fs-md);
	margin: 0 0 0.5em;
	line-height: 1.4;
}

.nt-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-widget li {
	border-bottom: 1px solid var(--nt-color-border);
	padding-block: 6px;
}

.nt-widget li:last-child {
	border-bottom: 0;
}

.nt-widget a {
	color: var(--nt-color-text);
	text-decoration: none;
}

.nt-widget a:hover {
	color: var(--nt-color-primary);
}

/* ---------- search form ---------- */

.search-form {
	display: flex;
	gap: 8px;
}

.search-form .search-field {
	flex: 1;
}

.search-form .search-submit {
	padding: 0.6em 1.2em;
	background: var(--nt-color-primary);
	color: var(--nt-color-primary-contrast);
	border: 0;
	border-radius: var(--nt-radius-sm);
	font-weight: 600;
}

/* ---------- Contact Form 7: consent / acceptance ---------- */

/* CF7 wraps an acceptance field as
   <span class="wpcf7-acceptance">
     <span class="wpcf7-list-item">
       <label>
         <input type="checkbox" ...>
         <span class="wpcf7-list-item-label">...</span>
       </label>
     </span>
   </span>
   The base input rule used to stretch the checkbox to 100% width
   (now fixed in 02-base.css). This block additionally polishes the
   inline-row look so the checkbox and its label always read as one
   horizontal item, with the label wrapping naturally when long.
   Scoped to .wpcf7-acceptance so it does not affect other CF7 list
   items (radios, regular checkbox groups) where vertical stacking is
   the desired layout. */
.wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
	display: inline-flex;
	/* The acceptance label is almost always a single line ("I agree to
	   the privacy policy"). `align-items: center` puts the checkbox
	   on the optical centre of that line, which reads better than
	   `flex-start` (where line-height padding pushes the visible
	   glyphs below the checkbox top edge and creates a visible offset).
	   For sites with multi-line acceptance copy where the checkbox
	   should stay anchored to the first line instead, switch this rule
	   to `flex-start` and add a small margin-top on the checkbox. */
	align-items: center;
	gap: 0.5em;
	line-height: 1.6;
	cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
	/* Optical nudge.
	   With `align-items: center` the flex layout aligns the bounding
	   boxes — the checkbox box centre and the text line-box centre.
	   Visually the two do not match in most browsers: the rendered
	   checkbox graphic sits slightly above its bounding-box centre,
	   and body-text glyphs sit slightly below their line-box centre.
	   A 1px downward shift on the checkbox brings the two optical
	   centres together.

	   translateY (rather than margin-top) avoids changing the box
	   geometry, so the text wrapping behaviour on narrow viewports is
	   identical to the unshifted case. 1px (rather than em-based) is
	   intentional: the offset is a rendering correction, not a font-
	   metrics correction, so it should stay constant regardless of
	   font-size. */
	transform: translateY(1px);
}