/*
 * Pieces shared by several pages (design A): photo gallery 3:4, brochure
 * rows, the dark call-to-action band, the FAQ and the numbered steps.
 * Loaded on every page and in the editor; page-only rules stay in home.css
 * and product.css.
 */

/* Photo gallery: all photos in one row, each cropped to 3:4 whatever its own
   shape, so replacing or adding a photo keeps the layout. */
.torqtek-photos.wp-block-gallery.has-nested-images {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.5rem;
	margin: 0;
}

.torqtek-photos.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0;
}

.torqtek-photos.wp-block-gallery.has-nested-images figure.wp-block-image img {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--custom--color--photo-bg);
}

/* Brochure rows (torqtek-doc-list > torqtek-doc): a thin line between rows,
   title link on the left (600, at least 44px high) and "PDF, English" on the
   right; on narrow screens the note wraps under the title. The note is
   centered on the link (design A: aligned to its top). */
.torqtek-doc-list {
	border-block-start: 1px solid var(--wp--custom--color--rule);
}

.torqtek-doc-list > .torqtek-doc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0;
	padding-block: 0.9rem;
	border-block-end: 1px solid var(--wp--custom--color--rule);
}

/* Core sets the File block text to 0.8em with a bottom margin. */
.torqtek-doc > .wp-block-file.torqtek-doc-file {
	margin: 0;
	font-size: inherit;
}

.torqtek-doc-file a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 600;
}

.torqtek-doc > .torqtek-doc-meta {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Dark call-to-action band (torqtek-quote): lead no wider than 38em, 1rem
   under the H2 and 1.5rem above the button, as in design A. Colors on navy:
   theme.json; the email line: mail.css. */
.torqtek-quote .wp-block-group > .torqtek-quote-lead {
	max-inline-size: var(--wp--custom--measure--text);
	margin-block: 1rem 1.5rem;
}

.torqtek-quote .wp-block-group > .torqtek-quote-actions {
	margin-block: 0;
}

.torqtek-quote-actions > .torqtek-quote-mail {
	margin: 0;
}

/* Anchor links (#video, #quote): the target stops below the sticky header
   (about 69px high) instead of under it. */
.wp-block-post-content [id] {
	scroll-margin-top: 5.5rem;
}

/* FAQ (torqtek-faq > Details blocks): questions no wider than 48rem, a line
   under each, bold navy question at least 48px high with "+" on the right
   ("–" when open), the answer right under it with 1rem of room below, as in
   design A. */
.torqtek-faq {
	max-inline-size: 48rem;
}

.torqtek-faq > .wp-block-details {
	margin-block: 0;
	border-block-end: 1px solid var(--wp--custom--color--rule);
}

.torqtek-faq > .wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-block-size: 48px;
	padding-block: 0.75rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.torqtek-faq > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.torqtek-faq > .wp-block-details > summary::after {
	content: "+";
	margin-inline-start: auto;
	font-size: 1.4rem;
	line-height: 1;
}

.torqtek-faq > .wp-block-details[open] > summary::after {
	content: "\2013";
}

.torqtek-faq > .wp-block-details > :not(summary) {
	margin-block: 0;
}

.torqtek-faq > .wp-block-details > :not(summary) + :not(summary) {
	margin-block-start: 1rem;
}

.torqtek-faq > .wp-block-details > :last-child:not(summary) {
	padding-block-end: 1rem;
}

/* Steps (torqtek-step-list > torqtek-step): numbered frames (H3 + muted
   text), 1 per row on phones and 3 from 768px; the theme numbers them in
   order, so a duplicated or moved step is renumbered by itself, and marks
   them as a list for screen readers (functions.php). Spacing as rendered in
   design A; the number is 17px (design: 16px, no such size in the theme).
   Home and product pages; the room around the list is set per page. */
.torqtek-step-list.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	counter-reset: torqtek-step;
}

@media (min-width: 768px) {
	.torqtek-step-list.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Four steps (torqtek-step-list--four, Become a Customer): 2 + 2 from
   640px and 4 in a row from 1100px, never 3 + 1 (decisions.md,
   2026-10-19). After the rule above, so it wins from 768px. */
@media (min-width: 640px) {
	.torqtek-step-list--four.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.torqtek-step-list--four.wp-block-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.torqtek-step-list > .torqtek-step {
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--preset--border-radius--small);
	counter-increment: torqtek-step;
}

.torqtek-step-list > .torqtek-step::before {
	content: counter(torqtek-step);
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	margin-block-end: 0.75rem;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1;
}

.torqtek-step-list > .torqtek-step > * {
	margin-block: 0;
}

.torqtek-step > p {
	color: var(--wp--preset--color--muted);
}

/* Related parts tiles (torqtek-related-list > torqtek-related, design A
   .pd-related): as many per row as fit, at least 14rem each; a white tile
   with a thin frame, the photo 5x4rem on the left and the part name (bold
   navy, no underline) beside it. The link is stretched over the whole tile,
   so the tile is clicked anywhere (on the site, not in the editor); the
   frame shows the keyboard focus. */
.torqtek-related-list.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1rem;
}

.torqtek-related-list > .torqtek-related {
	position: relative;
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	box-sizing: border-box;
	min-block-size: 5.5rem;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--preset--color--surface);
}

.torqtek-related-list > .torqtek-related > * {
	margin: 0;
}

.torqtek-related > .wp-block-image.torqtek-related-photo img {
	display: block;
	inline-size: 5rem;
	block-size: 4rem;
	object-fit: cover;
	background-color: var(--wp--custom--color--photo-bg);
}

.torqtek-related-link a {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	text-decoration: none;
}

/* Not in the editor: there the photo must stay clickable to be replaced. */
body:not(.editor-styles-wrapper) .torqtek-related-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.torqtek-related-link a:focus-visible {
	outline: none;
}

.torqtek-related:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--steel);
	outline-offset: 2px;
}

/* Ready sections (patterns section-*.php): what the client left empty is
   not shown on the site: empty headings and paragraphs, questions without
   text, steps without a title, brochure rows without a file, galleries
   without photos, inventory cards without a name. In the editor all of it
   stays visible with its hint. */
body:not(.editor-styles-wrapper) .torqtek-psec :is(h2, h3, p):empty,
body:not(.editor-styles-wrapper) .torqtek-faq > .wp-block-details:has(> summary:empty),
body:not(.editor-styles-wrapper) .torqtek-step-list > .torqtek-step:not(:has(> h3:not(:empty))),
body:not(.editor-styles-wrapper) .torqtek-doc-list > .torqtek-doc:not(:has(a)),
body:not(.editor-styles-wrapper) .torqtek-doc-list:not(:has(a)),
body:not(.editor-styles-wrapper) .torqtek-photos:not(:has(img)),
body:not(.editor-styles-wrapper) .torqtek-card--inventory:not(:has(h3:not(:empty))) {
	display: none;
}

/* Languages written right to left (Arabic): a phone number keeps its
   left-to-right order ("+1 780 863 7888", not "7888 863 780 1+"). Buttons
   (Call on the phone bar) carry a word, not the number. */
a[href^="tel:"]:not(.wp-block-button__link) {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Arabic: no letter spacing in headings, it breaks the joined letters. */
:lang(ar) :is(h1, h2, h3, h4) {
	letter-spacing: 0;
}

/* "Enlarge on click" (the WordPress lightbox): the close and the previous /
   next buttons at least 44px, easy to tap (WordPress makes them 40px). */
body .wp-lightbox-overlay .wp-lightbox-close-button,
body .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
body .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	min-inline-size: 44px;
	min-block-size: 44px;
}