/*
 * Help page and article page styles — the shop's OWN style (release 0.2, DESIGN.md §4).
 *
 * The plugin's pages print inside the Oxygen «Page» template, which does not load the
 * product-page stylesheet (`table.tech-specs`, the WooCommerce button) — so every value below
 * is carried by this file itself. All measured on the live shop with getComputedStyle,
 * 2026-09-21 (evidence: mockup-article-in-site.png against ref-product-1440.png, approved by
 * Matteo). Scoped under .ibhelp so nothing here leaks into the rest of the Oxygen page.
 */

.ibhelp {
	/* The template's own section already paints the page ground (rgb(247,247,247)) and the
	   1400px / 18.5px frame around the content — repeating them here would fight the template,
	   so this rule carries text colour only (brief §"Measured values", first bullet). The
	   site's IBM Plex Sans is inherited on purpose — no font-family, no base font-size. */
	--ibhelp-text: rgb( 64, 64, 64 );
	--ibhelp-strong: rgb( 17, 17, 17 );
	--ibhelp-secondary: rgb( 85, 85, 85 );
	/* Links are the shop's green, not its red (Matteo, 2026-09-21: «il rosso proprio non lo posso
	   vedere»). The breadcrumb alone keeps the red, because it copies the shop's own breadcrumb. */
	--ibhelp-link: rgb( 54, 99, 54 );
	--ibhelp-border: rgba( 128, 128, 128, .25 );
	--ibhelp-accent: rgb( 54, 99, 54 );

	color: var( --ibhelp-text );
}

.ibhelp :focus-visible {
	outline: 2px solid var( --ibhelp-accent );
	outline-offset: 2px;
}

.ibhelp a {
	color: var( --ibhelp-link );
	text-decoration: none;
}

.ibhelp a:hover {
	text-decoration: underline;
}

/* The site's global h1 is 75px and global h2 is 56.8px (measured 2026-09-21) — `.ibhelp h1` /
   `.ibhelp h2` (class + element) carries enough specificity to beat a bare `h1`/`h2` site rule
   without `!important`. */
.ibhelp h1 {
	font-family: ABeeZee, sans-serif;
	font-weight: 200;
	font-size: 39.04px;
	line-height: 1.2;
	color: #000;
	margin: 0 0 18px;
}

.ibhelp h2 {
	font-family: ABeeZee, sans-serif;
	font-weight: 200;
	font-size: 24px;
	line-height: 28.8px;
	color: rgb( 31, 31, 31 );
	margin: 0 0 8px;
}

.ibhelp-body h2 {
	margin: 28px 0 8px;
}

/* Not in the brief's measured values (only h1/h2 were measured) — kept modest and consistent
   with the h1/h2 family and weight; flag for measurement if h3 ever appears in a real article
   (neither which-material.md nor which-finish.md uses it today). */
.ibhelp h3 {
	font-family: ABeeZee, sans-serif;
	font-weight: 200;
	font-size: 19px;
	line-height: 1.3;
	color: rgb( 31, 31, 31 );
	margin: 20px 0 8px;
}

.ibhelp-lead {
	color: var( --ibhelp-secondary );
	max-width: 60ch;
	margin: 0 0 24px;
}

/* Card (article main column, related aside, help-page group) */

.ibhelp-card {
	border: 1px solid var( --ibhelp-border );
	border-radius: 12px;
	padding: 28px 32px;
	background: transparent;
}

@media ( max-width: 760px ) {
	.ibhelp-card {
		padding: 20px 18px;
	}
}

/* Spec rows — the shop's `table.tech-specs` look, reproduced under our own class since that
   stylesheet is not loaded here. Two variants share it: a definition table converted from the
   Markdown body (th + td), and a single-column "links" list (related articles, help-page
   groups, search results). */

.ibhelp-specs {
	width: 100%;
	border-collapse: collapse;
}

/* Inside an article the rows need air before the next paragraph (seen on the test shop, 0.2.0). */
.ibhelp-body .ibhelp-specs {
	margin: 8px 0 20px;
}

/* The Oxygen «Page» template gives its section a fluid top padding (70px at 1200, 79px at 1440),
   so the breadcrumb sat about 55px lower than on a product page, where the breadcrumb's own
   section has 25px. `!important` is needed to beat Oxygen's id rule
   `#section-2-101325 > .ct-section-inner-wrap { padding-top: … }` in its generated stylesheet;
   `:has()` keeps it to sections that actually hold a Help page. Nothing is changed in Oxygen. */
.ct-section-inner-wrap:has( .ibhelp ) {
	padding-top: 25px !important;
}

.ibhelp-specs th,
.ibhelp-specs td {
	border-top: 1px solid var( --ibhelp-border );
}

.ibhelp-specs tr:last-child th,
.ibhelp-specs tr:last-child td {
	border-bottom: 1px solid var( --ibhelp-border );
}

.ibhelp-specs th {
	text-align: left;
	vertical-align: top;
	font-weight: 700;
	color: var( --ibhelp-strong );
	padding: 14px 28px 14px 12px;
	width: 38%;
}

.ibhelp-specs td {
	color: var( --ibhelp-secondary );
	padding: 14px 12px;
	line-height: 1.5;
}

.ibhelp-specs--links td {
	padding-left: 0;
}

.ibhelp-specs--links td a {
	display: block;
}

@media ( max-width: 760px ) {
	.ibhelp-specs th,
	.ibhelp-specs td {
		display: block;
		width: auto;
	}

	.ibhelp-specs th {
		padding: 14px 0 2px;
	}

	.ibhelp-specs td {
		padding: 0 0 14px;
	}
}

/* Help page: search */

.ibhelp-search {
	display: block;
	max-width: 760px;
	margin: 0 0 24px;
}

.ibhelp-search input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	background: #fff;
	padding: 14px 16px;
	font: inherit;
	color: var( --ibhelp-text );
}

.ibhelp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

#ibhelp-results {
	max-width: 760px;
	margin-top: 8px;
}

/* Search results are plain <a> elements inserted by help.js (never a <table> — the script
   only ever builds text nodes, see help.js), styled to the same `.ibhelp-specs--links` row
   look: full-width, a top border per row, the last one also carrying the bottom border. */
#ibhelp-results a {
	display: block;
	border-top: 1px solid var( --ibhelp-border );
	padding: 14px 0;
}

#ibhelp-results a:last-of-type {
	border-bottom: 1px solid var( --ibhelp-border );
}

#ibhelp-results small {
	display: block;
	color: var( --ibhelp-secondary );
	font-size: 14px;
}

.ibhelp-none {
	color: var( --ibhelp-secondary );
	padding: 14px 0;
}

/* Help page: groups */

.ibhelp-groups {
	margin-top: 40px;
	display: grid;
	/* min(): on a phone the column is ~364 px wide, and a flat 380 px minimum pushed the
	   cards 16 px past the screen — the whole page then scrolled sideways (Matteo, 2026-09-23). */
	grid-template-columns: repeat( auto-fit, minmax( min( 380px, 100% ), 1fr ) );
	gap: 28px;
}

.ibhelp-contact {
	margin-top: 40px;
	color: var( --ibhelp-secondary );
}

/* Article page */

.ibhelp-crumb {
	font-size: inherit;
	font-weight: 300;
	color: var( --ibhelp-text );
	margin: 0 0 40px;
}

.ibhelp-crumb a {
	color: rgb( 184, 0, 0 );
}

.ibhelp-crumb p {
	margin: 0;
}

.ibhelp-crumb .separator,
.ibhelp-crumb .last {
	color: var( --ibhelp-text );
}

.ibhelp-article__grid {
	display: grid;
	align-items: start;
	grid-template-columns: minmax( 0, 1.9fr ) minmax( min( 280px, 100% ), 1fr );
	gap: 28px;
}

@media ( max-width: 960px ) {
	.ibhelp-article__grid {
		grid-template-columns: 1fr;
	}
}

/* The short answer is the first thing to read: a vertical bar in the shop's red stands before
   it (Matteo, 2026-09-21). The bar is outside the 62ch measure, so the text keeps its width. */
.ibhelp-short {
	font-size: 21px;
	line-height: 1.5;
	color: rgb( 31, 31, 31 );
	max-width: calc( 62ch + 24px );
	margin: 0 0 24px;
	padding: 2px 0 2px 20px;
	border-left: 4px solid rgb( 184, 0, 0 );
}

.ibhelp-body p,
.ibhelp-body ul,
.ibhelp-body ol {
	margin: 0 0 16px;
	max-width: 70ch;
}

.ibhelp-limit {
	background: #fff;
	border: 1px solid var( --ibhelp-border );
	border-radius: 8px;
	padding: 16px 20px;
	margin: 24px 0;
	max-width: 70ch;
}

.ibhelp-limit__label {
	display: block;
	font-weight: 400;
	color: var( --ibhelp-strong );
	margin-bottom: 2px;
}

.ibhelp-limit__text {
	color: var( --ibhelp-secondary );
}

/* `.ibhelp a.ibhelp-next` — element + two classes — beats `.ibhelp a` above so the button
   keeps its own colour and never gets the plain-link underline-on-hover. */
.ibhelp a.ibhelp-next {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 28px;
	margin: 28px 0 0;
	background: var( --ibhelp-accent );
	color: #fff;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.ibhelp a.ibhelp-next:hover {
	filter: brightness( 1.1 );
	text-decoration: none;
}

/* Screenshots (release 0.8): every one exists twice, computer and phone. Which `<img>` shows is
   the viewport width by default; `assets/js/shots.js` can override it at every width by adding
   a class to `.ibhelp-article` once the reader makes a choice. `display:none` on the hidden one
   so its `loading="lazy"` never fetches it. */

.ibhelp-shot {
	margin: 18px 0 26px;
}

.ibhelp-shot__img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid rgba( 128, 128, 128, .25 );
	border-radius: 8px;
}

.ibhelp-shot__img--phone {
	max-width: min( 320px, 100% );
}

/* Default, no choice made yet: desktop from 760px up, phone below it. */
@media ( min-width: 760px ) {
	.ibhelp-shot__img--phone {
		display: none;
	}
}

@media ( max-width: 759px ) {
	.ibhelp-shot__img--desktop {
		display: none;
	}
}

/* An explicit choice wins at every width — two classes on the ancestor beat the single-class
   rules above (default and media-query alike) regardless of source order. */
.ibhelp-article.ibhelp-shots--desktop .ibhelp-shot__img--phone {
	display: none;
}

.ibhelp-article.ibhelp-shots--desktop .ibhelp-shot__img--desktop {
	display: block;
}

.ibhelp-article.ibhelp-shots--phone .ibhelp-shot__img--desktop {
	display: none;
}

.ibhelp-article.ibhelp-shots--phone .ibhelp-shot__img--phone {
	display: block;
}

/* The «Computer / Phone» switch, above the body. `aria-pressed` (set by `assets/js/shots.js`)
   drives the pressed look — no separate class needed. */

.ibhelp-shots-switch {
	display: flex;
	margin: 0 0 18px;
}

.ibhelp-shots-switch__button {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba( 128, 128, 128, .4 );
	padding: 6px 14px;
	font-size: 15px;
	background: transparent;
	color: rgb( 64, 64, 64 );
	cursor: pointer;
}

.ibhelp-shots-switch__button:first-child {
	border-radius: 6px 0 0 6px;
}

.ibhelp-shots-switch__button:last-child {
	border-radius: 0 6px 6px 0;
	margin-left: -1px;
}

.ibhelp-shots-switch__button[aria-pressed="true"] {
	position: relative;
	z-index: 1;
	background: rgb( 54, 99, 54 );
	color: #fff;
	border-color: rgb( 54, 99, 54 );
}

.ibhelp-shots-switch__button:focus-visible {
	outline: 2px solid rgb( 54, 99, 54 );
	outline-offset: 2px;
}