/* ============================================================
   Misc pages: 404 / Support / blog-archive fallback — relocated from the
   deleted comps-era sheet (removed 2026-07-27).
   One small sheet instead of three; enqueued on is_404(), the Support page
   template, and the index.php fallback archives (home.php owns the real
   blog index and never uses these classes). Loads after boc-styles.css
   (no cascade flip: Adam's CSS defines no .boc-* classes). Values
   unchanged. Sizes follow the 10px-root rem dialect (pre-scaled x1.6).
   ============================================================ */

/* ------------------------------------------------------------
   404 / NOT FOUND (404.php)
   Two blocks on purpose: the old sheet defined the .boc-404 treatment twice
   (an early pass, then the built-out branded pass at the end of the file).
   Both are preserved in their original order so the later block keeps
   winning exactly the properties it won before.
   ------------------------------------------------------------ */

.boc-404 {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.boc-404__code {
	font-family: var(--boc-font-head);
	font-weight: 700;
	font-size: clamp(5rem, 20vw, 11rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: var(--boc-blue);
	margin: 0;
}

.boc-404__title {
	font-size: 3.2rem;
	margin: var(--boc-space-4) 0 var(--boc-space-2);
	color: var(--boc-ink);
}

.boc-404__text {
	max-width: 54ch;
	margin: 0 auto var(--boc-space-5);
	color: var(--boc-muted);
	font-size: 1.68rem;
	line-height: 1.7;
}

.boc-404__search {
	max-width: 540px;
	margin: 0 auto var(--boc-space-5);
}

/* Category chips */
.boc-404__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--boc-space-2);
	margin: 0 0 var(--boc-space-5);
}

/* Second (branded, built-out) 404 pass — markup in 404.php. */
.boc-404 {
	min-height: 55vh; display: flex; flex-direction: column; align-items: center;
	justify-content: center; text-align: center;
	padding: var(--boc-space-6) var(--boc-space-4);
}
.boc-404__code { font-family: var(--boc-font-head); font-size: 9rem; line-height: 1; color: var(--boc-blue); opacity: 0.14; margin: 0; }
.boc-404__title { font-family: var(--boc-font-head); font-size: 3.2rem; color: var(--boc-ink); margin: var(--boc-space-2) 0 var(--boc-space-3); }
.boc-404__text { color: var(--boc-muted); font-size: 1.6rem; line-height: 1.6; max-width: 52ch; margin: 0 0 var(--boc-space-5); }
.boc-404__search {
	display: flex; width: 100%; max-width: 480px; height: 48px;
	border: 1px solid var(--boc-line); border-radius: var(--boc-radius);
	overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
	margin: 0 0 var(--boc-space-5);
}
.boc-404__search input {
	flex: 1; border: 0; padding: 0 var(--boc-space-3); font-family: inherit;
	font-size: 1.5rem; color: var(--boc-ink); outline: none; min-width: 0;
}
.boc-404__search button {
	border: 0; width: 52px; background: var(--boc-blue); color: #fff;
	display: grid; place-items: center; cursor: pointer; transition: background 0.15s;
}
.boc-404__search button:hover { background: var(--boc-blue-dark); }
.boc-404__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--boc-space-3); margin: 0 0 var(--boc-space-6); padding: 0; list-style: none; }
.boc-404__cats a {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
	border: 1px solid var(--boc-line); border-radius: var(--boc-radius-pill);
	color: var(--boc-blue); font-weight: 600; font-size: 1.4rem;
	transition: background 0.15s;
}
.boc-404__cats a:hover { background: var(--boc-blue-tint); }
.boc-404__cats img { width: 22px; height: 22px; object-fit: contain; }
.boc-404__home {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--boc-red); color: #fff; font-weight: 700; font-size: 1.5rem;
	padding: 0.85em 1.9em; border-radius: var(--boc-radius); transition: filter 0.15s;
}
.boc-404__home:hover { filter: brightness(0.92); }

/* ------------------------------------------------------------
   SUPPORT (template-support.php): contact form + details
   ------------------------------------------------------------ */
.boc-support { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--boc-space-6); align-items: start; }
.boc-contact-card { background: var(--boc-bg-alt); border-radius: var(--boc-radius); padding: var(--boc-space-4); margin-bottom: var(--boc-space-3); }
.boc-contact-card h3 { margin: 0 0 var(--boc-space-1); font-size: 1.6rem; }
.boc-contact-card p { margin: 0; color: var(--boc-muted); font-size: 1.44rem; line-height: 1.6; }

/* Support contact form — Forminator (form id 25), styled to the comp.
   Overrides Forminator's default CSS to match the .boc-* form look; scoped to
   .boc-support__form. The .forminator-custom-form chain raises specificity over
   Forminator's base rules. */
.boc-support__form .forminator-custom-form { margin: 0; font-family: inherit; }
.boc-support__form .forminator-custom-form .forminator-row { margin-bottom: var(--boc-space-3); }
.boc-support__form .forminator-custom-form .forminator-row-last { margin-bottom: 0; }
.boc-support__form .forminator-custom-form .forminator-label {
	/* 1.6rem = 16px (R2-4). font-size needs !important: Forminator's own
	   higher-specificity design rules pin the label to 12px otherwise (same
	   situation as the radio margins below). */
	display: block; font-weight: 600; font-size: 1.6rem !important; margin-bottom: 6px;
	color: var(--boc-ink); font-family: inherit;
}
.boc-support__form .forminator-custom-form .forminator-required { color: var(--boc-red); }
.boc-support__form .forminator-custom-form .forminator-input,
.boc-support__form .forminator-custom-form .forminator-textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--boc-line);
	border-radius: var(--boc-radius); font-family: inherit; font-size: 1.52rem;
	color: var(--boc-ink); background: #fff;
}
.boc-support__form .forminator-custom-form .forminator-textarea { min-height: 140px; resize: vertical; }
.boc-support__form .forminator-custom-form .forminator-input:focus,
.boc-support__form .forminator-custom-form .forminator-textarea:focus {
	outline: 2px solid var(--boc-cta); outline-offset: 1px; border-color: var(--boc-cta);
}
/* Contact-preference radios laid out in a horizontal row (label on its own line) */
.boc-support__form .forminator-custom-form .forminator-field-radio .forminator-field {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--boc-space-4);
}
.boc-support__form .forminator-custom-form .forminator-field-radio .forminator-label { width: 100%; margin-bottom: 0; }
.boc-support__form .forminator-custom-form .forminator-radio {
	/* margin needs !important: Forminator gives each radio a different vertical
	   margin (10/20px first/mid/last variants) from higher-specificity rules,
	   which staircases the flex row. */
	display: inline-flex; align-items: center; gap: 6px; font-size: 1.44rem; margin: 0 !important;
}
.boc-support__form .forminator-custom-form .forminator-radio-label { font-size: 1.44rem; color: var(--boc-ink); }
/* File upload control */
.boc-support__form .forminator-custom-form .forminator-input-file { font-size: 1.44rem; }
/* Submit — an action, not a promo, so it rides --boc-cta (brand blue since the
   2026-07-28 repoint per LAYOUT.md §5.3; this comment's own suggestion). */
.boc-support__form .forminator-custom-form .forminator-button-submit {
	display: inline-flex; align-items: center; justify-content: center; border: 0;
	border-radius: var(--boc-radius); background: var(--boc-cta); color: #fff;
	font-family: inherit; font-weight: 700; font-size: 1.63rem; padding: 0.85em 1.7em;
	cursor: pointer; transition: filter 0.15s;
}
.boc-support__form .forminator-custom-form .forminator-button-submit:hover { filter: brightness(0.92); }

@media (max-width: 900px) {
	.boc-support { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   BLOG-ARCHIVE FALLBACK (index.php — category/tag/date/author archives;
   home.php owns the real blog index)
   ------------------------------------------------------------ */
.boc-post { display: flex; flex-direction: column; }
.boc-post__title { font-size: 1.84rem; line-height: 1.3; margin: 0 0 var(--boc-space-2); color: var(--boc-ink); }
.boc-post__title a { color: inherit; }
.boc-post__title a:hover { color: var(--boc-blue); }
.boc-post__excerpt { color: var(--boc-muted); line-height: 1.6; font-size: 1.52rem; margin: 0 0 var(--boc-space-3); }