/**
 * WordPress reconciliation layer.
 *
 * assets/css/qubi360.css is a byte-for-byte copy of html/css/qubi360.css and must
 * stay that way — it is the source of truth for the design. Everything here maps
 * core block output onto those existing q- classes, so the stylesheet never has
 * to be forked to accommodate WordPress markup.
 *
 * Rule: this file adds selectors, it never restyles. If a value is needed, it is
 * read from the variables qubi360.css already defines.
 */

/* -------------------------------------------------------------------------
 * Header — core/navigation rendered as .q-menu
 *
 * With overlayMenu:"never" the block outputs a plain <nav><ul>, which is the
 * same shape the static header uses. Core's layout system still injects its own
 * flex gap and item padding, so those are neutralised here and the q-menu rules
 * in qubi360.css take over untouched.
 * ---------------------------------------------------------------------- */
nav.q-menu {
	display: block;
	align-items: initial;
}

.q-menu .wp-block-navigation__container {
	gap: 4px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

/* The doubled class is not a typo. wp-block-library ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }` at (0,3,0) specifically to outrank theme styles, so the
   colour rules here have to match that weight. Everything else stays at (0,2,0). */
.q-menu .wp-block-navigation-item__content {
	display: block;
	padding: 9px 15px;
	font-size: .92rem;
	font-weight: 500;
	border-radius: 8px;
	text-decoration: none;
	transition: .18s;
}

.q-menu .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--muted);
}

.q-menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.q-menu .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--navy);
	text-decoration: none;
}

/* Core marks the active item .current-menu-item; the static markup used .q-current. */
.q-menu .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.q-menu .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--navy);
	font-weight: 600;
}

/* The header buttons are core/buttons, which wraps each link in a div. The static
   .q-btn rules target the <a>, so the wrapper has to stop being a layout box. */
.q-actions .wp-block-buttons {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.q-actions .wp-block-button {
	margin: 0;
}

.q-actions .wp-block-button__link {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Mobile — the burger is the static button, unchanged, driven by data-q-nav.
 * qubi360.css already hides .q-menu and shows .q-burger under 940px; the only
 * gap is that the open panel needs its core container to stack.
 * ---------------------------------------------------------------------- */
@media (max-width: 940px) {
	/* qubi360.css hides .q-menu here at (0,1,0). The base rule above is (0,1,1)
	   and would otherwise keep the menu on screen, so restate the hide at that
	   weight rather than reaching for !important. */
	nav.q-menu {
		display: none;
	}

	nav.q-menu.q-open {
		display: block;
	}

	nav.q-menu.q-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	nav.q-menu.q-open .wp-block-navigation-item__content {
		padding: 11px 14px;
	}
}

/* -------------------------------------------------------------------------
 * Footer — three core/navigation columns plus the legal row.
 * ---------------------------------------------------------------------- */
.q-foot .wp-block-navigation__container {
	display: block;
	gap: 0;
}

.q-foot .wp-block-navigation-item {
	margin-bottom: 12px;
	display: block;
}

.q-foot .wp-block-navigation-item__content {
	font-size: .89rem;
	text-decoration: none;
}

/* Doubled for the same reason as the header — see the note above. */
.q-foot .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--muted);
}

.q-foot .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--navy);
}

.q-foot__bot .wp-block-navigation__container {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}

.q-foot__bot .wp-block-navigation-item {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Comments — one rule per comment, not three.
 *
 * qubi360.css carries two ways of drawing a comment. The design's own rule puts
 * the padding and the hairline on `.comment-body`; a fallback further down puts
 * them on the list item instead, for a core Comments block used without that
 * wrapper:
 *
 *     .wp-block-comments.q-comments .wp-block-comment-template li
 *       { padding:24px 0; border-bottom:1px solid var(--line) }
 *
 * single.html builds real `.comment-body` groups, so both applied — and because a
 * reply's <ol> sits inside its parent's <li>, the parent's rule painted after the
 * nested thread had finished. One comment with one reply produced three stacked
 * hairlines at the end of the thread.
 *
 * Turning the fallback off restores the static build exactly: `.comment-list li`
 * has no padding, `.comment-body` owns the padding and the rule.
 * ---------------------------------------------------------------------- */
.q-comments.wp-block-comments .wp-block-comment-template li {
	padding: 0;
	border-bottom: 0;
}

/* `.comment-body` is a 44px/1fr grid built around the avatar. With avatars off
   the first column still reserved its width, so every comment kept a 44px indent
   with nothing in it. Collapse to one column when the avatar is not there.

   `:has()` rather than a body class so this holds however the avatar came to be
   absent; the design already relies on `color-mix()`, which is newer. */
.comment-body:not(:has(.comment-author)) {
	grid-template-columns: 1fr;
}

/* The static form has its notes line above the form; core prints it inside, where
   `.comment-form`'s two-column grid treats it as a cell — which pushed Name into
   column two and Email onto the next row. Spanning it restores the intended
   order: notes, then Name | Email, then Comment, then the button. The design
   already spans `.comment-form-comment` and `.form-submit` the same way. */
.comment-form .comment-notes {
	grid-column: 1 / -1;
}

/* The cookie opt-in is optional (Settings → Discussion) and the static form never
   showed one, so the design has no rule for it. When an admin does switch it on it
   has to sit sensibly in the grid: full width, checkbox beside its label rather
   than above it, and the label at body weight — `.comment-form label` is styled
   for field labels, which reads far too heavy on a sentence this long. */
.comment-form .comment-form-cookies-consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--muted);
}

.comment-form .comment-form-cookies-consent input {
	margin-top: 2px;
	flex: none;
}

.q-foot__bot p {
	margin: 0;
}

/* The footer grid is core/columns; its default flex gap fights the grid columns
   qubi360.css sets on .q-foot__grid. */
.q-foot__grid.wp-block-columns {
	display: grid;
	grid-template-columns: 1.7fr repeat(3, 1fr);
	gap: 48px;
	flex-wrap: nowrap;
}

.q-foot__grid.wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0;
}

@media (max-width: 880px) {
	.q-foot__grid.wp-block-columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.q-foot__grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * core/site-logo — the static header used a plain <img> inside .q-brand.
 * ---------------------------------------------------------------------- */
.q-brand.wp-block-site-logo,
.q-brand .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}

.q-brand img,
.q-foot__brand img {
	display: block;
	height: 32px;
	width: auto;
	max-width: none;
}

.q-foot__brand img {
	height: 30px;
}

/* -------------------------------------------------------------------------
 * Prose — core wrappers the static markup does not have.
 *
 * qubi360.css styles the plain elements (`.q-prose blockquote`, `.q-prose table`).
 * Core adds a level in two places, which changes what those rules land on. Both
 * fixes below only remove a wrapper's effect — no design value is restated.
 * ---------------------------------------------------------------------- */

/* The static blockquote holds its text directly, so `.q-prose blockquote`
   (Manrope 600, navy) applies to it. core/quote nests a <p>, which then picks up
   `.q-prose p {color:#3C4C62}` and loses the quote's colour. */
.q-prose blockquote p {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	margin: 0;
}

/* core/table wraps the table in a <figure>, so `.q-prose figure {margin:40px 0}`
   and `.q-prose table {margin:36px 0}` both applied and the gap doubled. Zeroing
   the figure lets the table's own margin collapse through and own the spacing. */
.q-prose .wp-block-table {
	margin: 0;
}

/* wp-block-library gives table cells a full box border (`.wp-block-table td, th
   {border:1px solid}`). The design rules only ever set a bottom rule, and being
   equal specificity they override that edge alone — leaving core's top, left and
   right sides drawing a grid the static table does not have. Removing the three
   unwanted edges lets `.q-prose th, .q-prose td` own the horizontal rule. */
.q-prose .wp-block-table td,
.q-prose .wp-block-table th {
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

/* Core also rules the section elements — `.wp-block-table thead {border-bottom:3px
   solid}` and the matching tfoot rule. The design draws its header rule on
   `thead th` at 1px, so core's 3px sat under it and the line came out thick. */
.q-prose .wp-block-table thead {
	border-bottom: 0;
}

.q-prose .wp-block-table tfoot {
	border-top: 0;
}

/* -------------------------------------------------------------------------
 * 404 search box.
 *
 * `.q-searchform` is `display:flex; max-width:520px` and sits left-aligned by
 * default. The static 404 centres it inline —
 * `style="margin:0 auto 34px;justify-content:center"` — on a page whose whole
 * layout is centred. core/search has no margin control that produces `auto`, so
 * the two values are lifted from that inline style.
 * ---------------------------------------------------------------------- */
.q-404 .q-searchform {
	margin: 0 auto 34px;
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Contact details column.
 *
 * The left half of `.q-contact` is a plain `.q-rv` div in the static build, not a
 * `.q-head`, and its heading and copy are sized by inline styles rather than any
 * class. core/heading and core/paragraph cannot express those, so the four values
 * are lifted from that markup:
 *
 *   <h2 style="font-size:clamp(1.7rem,2.7vw,2.3rem);letter-spacing:-.036em;margin:16px 0 18px">
 *   <p  style="color:var(--muted);font-size:1rem;max-width:48ch">
 * ---------------------------------------------------------------------- */
.q-contact > .q-rv h2 {
	font-size: clamp(1.7rem, 2.7vw, 2.3rem);
	letter-spacing: -.036em;
	margin: 16px 0 18px;
}

.q-contact > .q-rv p {
	color: var(--muted);
	font-size: 1rem;
	max-width: 48ch;
}

/* -------------------------------------------------------------------------
 * Archive and search hero.
 *
 * `.q-phero .q-wrap` is a two-column grid — the marketing pages put copy on the
 * left and an illustration on the right. The term archive and the search page
 * have no second column, so the static build overrides them inline with
 * `<div class="q-wrap" style="display:block">`. Without that the breadcrumb, the
 * heading and the description each land in a different grid cell: the title
 * jumps to the right-hand column and the description drops below it on the left.
 *
 * Those are the only two files in html/ carrying that override, and both already
 * have the body class this keys off, so the scope matches the source exactly.
 * ---------------------------------------------------------------------- */
.q-page-blog .q-phero .q-wrap,
.q-page-search .q-phero .q-wrap {
	display: block;
}

/* -------------------------------------------------------------------------
 * Article header measures.
 *
 * The static article sets these inline — `<h1 style="max-width:22ch">` and
 * `<p class="q-phero__sub" style="max-width:62ch">` — to keep the title to a
 * couple of lines and the standfirst at a readable measure. core/post-title and
 * core/post-excerpt have no width control, so the same two values live here.
 * They are lifted from the source markup, not invented.
 * ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
 * Sample-extract callout measure.
 *
 * html/resources/buyers-guide.html writes the sample callout as
 * `<div class="q-callout q-rv" style="margin:0;max-width:74ch">`. The margin is
 * a block spacing control on qubi/callout; the measure has no block control, so
 * it lives here. Lifted from the source markup, not invented.
 * ---------------------------------------------------------------------- */
.q-callout--measure {
	max-width: 74ch;
}

/* Same file: the callout's `.q-prose` is written with `style="margin-top:16px"`,
   which is not the 24px `.q-prose > * + *` would give it under the lead-in. */
.q-callout .q-prose {
	margin-top: 16px;
}

.q-arthead h1 {
	max-width: 22ch;
}

.q-arthead .q-phero__sub {
	max-width: 62ch;
}

/* -------------------------------------------------------------------------
 * Listing cards — restoring whole-card clickability.
 *
 * In the static build the entire card is one <a class="q-card2">, so any part of
 * it is clickable. A Query Loop cannot wrap a card in a link, so only the title
 * and the "Read" affordance were clickable here — the hover state fired (:hover
 * works on a div) but most of the card did nothing when clicked.
 *
 * Stretching the title's link over the card restores the original behaviour. No
 * design values are introduced; .q-card2 is already position:relative for its
 * accent bar, and the "Read" link points at the same post.
 * ---------------------------------------------------------------------- */
.q-card2 .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Keep the footer link above the overlay so its own focus ring stays reachable. */
.q-card2 .q-card2__f {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * Template part wrappers.
 *
 * Core wraps every template part in its own element. That box is only as tall
 * as the header itself, and a position:sticky element can never travel outside
 * its parent — so .q-header scrolled away instead of sticking. display:contents
 * removes the wrapper from layout entirely, making .q-header a direct layout
 * child of .wp-site-blocks the way it is a child of <body> in the static build.
 * ---------------------------------------------------------------------- */
.wp-block-template-part {
	display: contents;
}

/* -------------------------------------------------------------------------
 * Layout containers.
 *
 * .q-wrap already sets the max width and gutters. Core group blocks add their
 * own constrained-layout padding on top, which doubles the gutter, so the
 * wrapper opts out.
 * ---------------------------------------------------------------------- */
.q-wrap.wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

.q-header.wp-block-group,
.q-foot.wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

/* -------------------------------------------------------------------------
 * Editor canvas.
 *
 * The Site Editor renders template parts without the front-end body, so the
 * sticky header would float over the canvas and the reveal animation would
 * leave blocks invisible. qubi360.css already neutralises .q-rv in the editor;
 * this handles the header.
 * ---------------------------------------------------------------------- */
/* On the front end `--c` comes from the q-mod-* class on <body> (see
   inc/body-class.php). The editor canvas has no body class, so `--c` is undefined
   and every rule using it is invalid at computed-value time — which silently
   collapses `.q-callout`'s `border-left:3px solid var(--c)` to zero width, and
   would do the same to card rules, icons and bars. Fall back to the palette
   variable the design already defines; q-mod-blue resolves to the same colour. */
.editor-styles-wrapper {
	--c: var(--blue);
}

.editor-styles-wrapper .q-header {
	position: relative;
	background: #fff;
}

.editor-styles-wrapper .q-menu {
	display: block;
}

.editor-styles-wrapper .q-burger {
	display: none;
}

/* -------------------------------------------------------------------------
 * Password-protected posts.
 *
 * `get_the_password_form()` is core markup with one class of its own,
 * `.post-password-form`, and the design never drew it — so a post an admin
 * protects rendered as a bare browser input and button on a white page.
 *
 * Every value here is read from the variables qubi360.css already defines, and
 * the shapes are the comment form's: same 1px --line border, same 10px radius,
 * same blue focus ring, same button. Nothing new is invented, so if the design
 * changes its form language this follows it.
 * ---------------------------------------------------------------------- */
.post-password-form {
	max-width: 520px;
	/* Left, not centred — it sits in the article column and centring it put the
	   form 90px right of the body text above it. */
	margin: 0;
	padding: 32px 0;
}

.post-password-form p {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: .95rem;
}

.post-password-form label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	color: var(--navy);
	margin-bottom: 8px;
}

.post-password-form input[type="password"] {
	width: 100%;
	font-family: 'Inter', sans-serif;
	font-size: .95rem;
	color: var(--navy);
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
}

.post-password-form input[type="password"]:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(22, 143, 242, .13);
}

/* The label wraps the input, so the button needs the gap put back. */
.post-password-form input[type="submit"],
.post-password-form .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .94rem;
	padding: 14px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--blue);
	color: #fff;
	cursor: pointer;
	transition: .22s var(--ease);
}

.post-password-form input[type="submit"]:hover,
.post-password-form .wp-block-button__link:hover {
	background: var(--blue-600);
}

}