/*
 * AX Plugins — bespoke styles.
 *
 * Part 1 is the prototype's inline <style> block, moved verbatim into a file.
 * (Injecting CSS through wp_head renders it inline on every page, uncached and
 * unminified — an enqueued stylesheet is cacheable.)
 *
 * Part 2 neutralises GeneratePress's own layout chrome so the prototype's
 * full-bleed sections sit flush. Nothing here restyles the design: tailwind.css
 * owns the look and is copied byte-for-byte from the prototype.
 */

/* ============================================================
   PART 1 — verbatim from the prototype's inline <style>
   (@font-face lives in assets/fonts/fonts.css)
   ============================================================ */

body { font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; color: #1b1f25; background: #f6f7f9; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-display { font-family: Archivo, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.02em; }
/* The product name's arrow: slightly lighter and nudged so it reads as a connector
   between two names rather than as part of either word. */
.arrow { font-weight: 500; padding: 0 0.06em; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; background: #15181c; color: #f6f7f9; padding: .7rem 1rem; border-radius: .5rem; }
/* Focus is a 2px cobalt ring with an offset, never removed. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #1e45d8; outline-offset: 2px; border-radius: 4px; }
.eyebrow { font-family: Archivo, sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; }
/* Tabular figures for prices and version numbers. */
.nums { font-variant-numeric: tabular-nums; }
/* The X lattice — the wordmark's one piece of geometry, repeated. Always painted on an
   absolutely-positioned overlay, never on an element that carries a background colour
   or text, because the fade mask below would take those with it. */
.x-lattice   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2242%22%20height=%2242%22%3E%3Cg%20stroke=%22%232b56f5%22%20stroke-opacity=%220.22%22%20stroke-width=%223.4%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M12%2012L30%2030%22/%3E%3Cpath%20d=%22M30%2012L12%2030%22/%3E%3C/g%3E%3C/svg%3E"); }
.x-lattice-w { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2242%22%20height=%2242%22%3E%3Cg%20stroke=%22%23ffffff%22%20stroke-opacity=%220.1%22%20stroke-width=%223.4%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M12%2012L30%2030%22/%3E%3Cpath%20d=%22M30%2012L12%2030%22/%3E%3C/g%3E%3C/svg%3E"); }
/* Clears the texture off the left, where the copy is, and lets it fill the empty right. */
.x-fade {
  -webkit-mask-image: linear-gradient(95deg, transparent 40%, #000 78%);
          mask-image: linear-gradient(95deg, transparent 40%, #000 78%);
}
/* WCAG 2.2 2.4.11 Focus Not Obscured (Minimum): the header is sticky and 4rem tall, so
   an element scrolled flush to the top of the viewport — by an in-page anchor or by
   tabbing to it — would sit underneath it. axe cannot detect this; scroll-margin keeps
   the focused element and its ring clear of the header in both cases. */
:target, a, button, summary { scroll-margin-top: 5.5rem; }

/* ============================================================
   PART 2 — flatten GeneratePress's layout containers
   ============================================================

   GP is a boxed classic theme: it paints a grey body, constrains .grid-container
   to 1100px and gives .inside-article a white card with 40px of padding. Every
   prototype section is full-bleed with its own inner .max-w-content, so all of
   that has to go. Deliberately NOT done with `width:100vw;
   margin-left:calc(50% - 50vw)` — 100vw includes the scrollbar, so sections sit
   ~7px off each edge, and Playwright then screenshots the page as if clipped on
   the left even though getBoundingClientRect reports it correctly. */

body,
body.wp-singular,
.separate-containers,
.one-container {
	background-color: #f6f7f9;
}

.site.grid-container,
.site.container,
.grid-container {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.site-content,
.site-content.grid-container {
	padding: 0;
	margin: 0;
	display: block;
}

.content-area,
.site-main,
.inside-article,
.entry-content,
article.post,
article.page,
article[class*="type-ax_plugin"] {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* GP prints an entry header/footer wrapper even with the title filtered off. */
.entry-header,
.entry-meta,
.entry-footer,
.post-navigation,
.paging-navigation {
	display: none;
}

/* Belt and braces: if a GP chrome element ever slips back in (a plugin
   re-registering the action, a Customizer change), keep it out of the layout
   rather than letting it paint over the prototype header. */
#masthead.site-header,
.site-footer,
.navigation-branding,
#site-navigation,
#mobile-header {
	display: none !important;
}

/* The prototype's own <header>/<footer> must not inherit the rule above. */
header.sticky,
footer.border-t {
	display: block !important;
}

/* GP's mobile menu toggle script adds this; nothing here uses it. */
.menu-toggle {
	display: none !important;
}

/* WordPress admin bar offsets the sticky header when logged in. Keep the
   prototype's 4rem header flush under it rather than overlapping. */
body.admin-bar header.sticky {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar header.sticky {
		top: 46px;
	}
}

/* ============================================================
   PART 3 — GeneratePress rules that outrank Tailwind
   ============================================================

   Tailwind's preflight is a `*` rule (specificity 0,0,0), so ANY GeneratePress
   rule written against an element or a compound class beats it even though
   tailwind.css loads afterwards. Found by diffing computed styles against the
   prototype element for element rather than by reading stylesheets — each of
   these was silently changing layout while the page still "looked right".
   Specificity here is deliberate: high enough to beat GP, low enough that the
   prototype's own Tailwind utility classes (0,1,0) still win. */

/* GP: `body,button,input,select,textarea{font-size:17px;line-height:1.5}`.
   The prototype inherits the browser default 16px. This matters beyond text
   size because `max-w-prose` is 68ch and `ch` is font-size-relative — at 17px
   every prose column silently grew ~45px wider than the prototype's. */
body,
button,
input,
select,
textarea {
	font-size: 16px;
	line-height: 1.5;
}

/* GP: `.one-container .site-content{padding:40px}` — (0,2,0), which outranks a
   bare `.site-content` reset. It inset every full-bleed section 40px from the
   viewport on all 14 pages: the hero, the cobalt CTA band and the footer all
   stopped running edge to edge. Matched at the same specificity, later in the
   cascade. */
.one-container .site-content,
.one-container .inside-page-header,
.separate-containers .site-content,
.site-content.grid-container {
	padding: 0;
	margin: 0;
	display: block;
}

/* THE BIG ONE. GeneratePress ships an Eric Meyer reset —
   `a,abbr,…,div,…,span,…,table,tbody,td,tfoot,th,thead,tr,tt,ul,var
   {border:0;margin:0;padding:0}` — at specificity (0,0,1), which outranks
   Tailwind preflight's `*{border:0 solid #e5e7eb}` at (0,0,0).

   It sets `border-style:none`, and a computed border-width is ALWAYS 0 when
   the style is none. So every Tailwind border utility was silently dead on
   those elements: the status pills lost their ring, the product cards lost the
   rule above the price, the Requirements <dl> lost its divide-y hairlines and
   the invoice table lost the rule under its header. The utility classes were
   all present in the markup and doing nothing.

   HTML5 elements — article, section, header, footer, nav, main, figure — are
   absent from that reset, which is why the card outline and the header's
   bottom border DID render and the damage looked arbitrary rather than
   systematic. Re-assert preflight's border on exactly GP's element list, at
   matching specificity and later in the cascade, so the utilities (0,1,0) win
   again. */
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code,
dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6,
html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp,
small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr,
tt, ul, var {
	border: 0 solid #e5e7eb;
}

/* GP also styles bare tables: `table,td,th{border:1px solid rgba(0,0,0,.1)}`,
   `td,th{padding:8px}`, `table{border-collapse:separate;margin:0 0 1.5em}`.
   The invoice figure is sized entirely by utility classes, so GP widened the
   cells enough to steal width from the adjacent copy and force a line wrap.
   1px is the user-agent default for a cell, which is what the prototype gets;
   GP's reset had zeroed it. */
td,
th {
	padding: 1px;
}

table {
	margin: 0;
	width: auto;
	border-collapse: collapse;
	border-spacing: 0;
}

/* GP: `dt{font-weight:700}`. The prototype has no UA or Tailwind rule for dt,
   so it inherits. Product pages are unaffected (their dt carries
   `font-semibold`), but the /plugins/ status legend was rendering bold. */
dt {
	font-weight: inherit;
}

/* ------------------------------------------------------------------
   One deliberate divergence from the prototype, for accessibility.

   `text-white/90` on `bg-cobalt-600` (#156cdd) composites to #e7f0fc and
   measures 4.34:1 — below WCAG 2.2 AA's 4.5:1 for normal text, and the band's
   body copy is 17px. This is inherited from the prototype, where axe-core
   could not measure it: the .x-lattice-w overlay behind the text makes the
   background indeterminate, so the rule was skipped rather than failed.

   Full white on the same ground is 4.98:1 and passes. Fixing it here rather
   than in the markup keeps every page's HTML byte-identical to the prototype
   and puts the change where a designer would look for it.

   This should be backported to the prototype's build.mjs.
   ------------------------------------------------------------------ */
.bg-cobalt-600 .text-white\/90 {
	color: #fff;
}