/*
zprime short pages, below the fold.

The band is the contact page's body: the design's mid grey, two columns, and a hairline
between blocks. These pages are that page without the form — a column of labels beside a
column of content — so they take the same ground rather than sitting on white, which is
what made them read as a document rather than as part of the site. Linked non-blocking on the pages
zprime_is_simple_page() names — FAQ, τεχνικά φυλλάδια, συντήρηση, όροι χρήσης, cookies,
πολιτική απορρήτου — and nowhere else. The title band above is inlined from
css/critical-contact.css, which is the same band the contact page opens with.

Dependent on zprime-style, so it prints after style.css and can use the tokens there.

These pages are a column of text and nothing else, so this file is small on purpose: a
measure, a heading, a paragraph, a list, a link. Everything here hangs off .selida rather
than off .entry-content, because .entry-content is every page on the site and prose rules
loose in it would reach the front page and the company page too.
*/

.selida {
	padding-inline: var(--zp-pad);
	padding-bottom: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* The opening line, before the rows start. Larger than the body and held to the measure
the product intros use, so the page starts with a sentence rather than with a rule.

Child of .selida, not just .selida__lead: .selida p further down is one class and one
element and so outranks a lone class — the lead would otherwise quietly take a paragraph's
top margin. */
.selida > .selida__lead {
	max-width: max(20rem, 41.0880vw); /* 710px at 1728 */
	margin: 0;
	padding-block: max(2.5rem, 4.6296vw); /* 80px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1rem, 0.85rem + 0.3125vw, 1.1574vw); /* 20px at 1728, 17px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

/* The section has no top padding, so a top margin on whatever comes first collapses
straight out of it and opens a gap under the title band instead of inside the section.
Whatever a page starts with, it starts flush. */
.selida > :first-child {
	margin-top: 0;
}

/* One section: its heading in the narrow column, its text in the wide one. The same 5fr/7fr
the ALUMIL band and the project pages use, so a page of plain text still reads as this site
rather than as a document dropped into it — and the width stops being half empty. The rule
above each row is the hairline the spec grids draw, doing the same job here. */
.selida__row {
	display: grid;
	grid-template-columns: 5fr 7fr;
	column-gap: max(1.5rem, 5.5556vw); /* 96px at 1728 */
	padding-block: max(2rem, 3.7037vw); /* 64px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

.selida__row > * {
	min-width: 0;
	margin: 0;
}

.selida__body > *:first-child {
	margin-top: 0;
}

/* Condensed bold caps, the treatment every section heading on the site takes. It sits at
the top of its column rather than centred: the text beside it can run to any length, and a
heading floating halfway down a column reads as a mistake. */
.selida h2 {
	margin: 0;
	font-size: max(1.25rem, 0.65rem + 1.2500vw, 1.7361vw); /* 30px at 1728, 22px at 768 */
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.selida h3 {
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
	font-size: max(1rem, 1.1574vw); /* 20px at 1728 */
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.selida p,
.selida li {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

.selida p {
	margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
}

/* The list marker is a rule rather than a bullet, drawn with the same hairline the rest of
the site uses — it reads as part of the design instead of as a browser default. */
.selida ul {
	margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
	padding: 0;
	list-style: none;
}

.selida li {
	position: relative;
	padding-left: max(1.25rem, 1.9676vw); /* 34px at 1728 */
}

.selida li + li {
	margin-top: max(0.5rem, 0.7639vw); /* 13px at 1728 */
}

.selida li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: 0;
	width: max(0.625rem, 0.9259vw); /* 16px at 1728 */
	border-top: 1px solid var(--wp--preset--color--muted);
}

/* theme.json colours and underlines every link; the drawn underline is shared from
critical.css, so this only sets the colour relationship on a page that is mostly text. */
.selida a {
	color: var(--wp--preset--color--contrast);
}

.selida a:hover,
.selida a:focus-visible {
	color: var(--wp--preset--color--ink);
}


/* One brochure, shown as its own cover. The first page of each PDF is rendered to a WebP
that lives in the media library; the PDF itself stays on alumil.com and is linked, not
copied — they are ALUMIL's documents, they get revised, and a copy on this server would
quietly go stale. The cover earns its bytes: a technical sheet is recognised by its cover
long before anyone reads the title under it.

No aspect-ratio and no object-fit anywhere here. Every cover inside one grid is the same
page size, so the tiles line up on their own and not one of them is cropped; width and
height on the <img> hold the space before it loads. */
.fylladia {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: max(1rem, 1.8519vw); /* 32px at 1728 */
	row-gap: max(1.5rem, 2.7778vw); /* 48px at 1728 */
	margin-top: max(1.5rem, 2.3148vw); /* 40px at 1728 */
}

/* Two classes deep because theme.json colours and underlines every link at that same
weight; one class would lose the tie and the whole tile would come out blue and ruled. */
.selida .fylladio {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The cover's own box, so the lift on hover is clipped to it instead of spilling over
its neighbours. White ground, because a cover with a white page edge needs something to
sit on once it is over the band's grey. */
.fylladio__frame {
	display: block;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
}

/* The same 1.03 the Έργα cards take, so a picture that is also a link behaves one way
across the site. */
.fylladio__cover {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--zp-motion);
}

.fylladio:hover .fylladio__cover,
.fylladio:focus-visible .fylladio__cover {
	transform: scale(1.03);
}

/* contrast against the band's muted body, so the name reads first and the two lines
under it fall back. */
.fylladio__name {
	display: block;
	margin-top: max(0.75rem, 1.1574vw); /* 20px at 1728 */
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color var(--zp-motion);
}

.fylladio:hover .fylladio__name,
.fylladio:focus-visible .fylladio__name {
	color: var(--wp--preset--color--ink);
}

/* Sentence case and lighter: it describes the system rather than naming it. */
.fylladio__what {
	display: block;
	margin-top: max(0.25rem, 0.3472vw); /* 6px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.8102vw); /* 14px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

/* The file's own facts — format, weight, language. faint fails AA on this band's grey,
so the step down from the description is a smaller size at the same colour rather than a
lighter one. */
.fylladio__meta {
	display: block;
	margin-top: max(0.375rem, 0.5787vw); /* 10px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.6944vw); /* 12px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The general catalogue is not one system's sheet, so it does not stand in the grid of
them. Cover on the left at about the width of a grid tile, its copy beside it — which is
also what keeps a row holding a single item from ending in two thirds of empty band. */
.fylladia-featured {
	grid-template-columns: max(7.5rem, 13.8889vw) 1fr; /* 240px at 1728 */
	column-gap: max(1.25rem, 2.3148vw); /* 40px at 1728 */
	align-items: start;
	margin-top: max(1.5rem, 2.3148vw); /* 40px at 1728, the same as the grid */
}

/* display:grid has to beat the display:block the tile rule sets, and that rule is two
classes deep. */
.selida .fylladia-featured {
	display: grid;
}

/* The copy starts level with the top of the cover rather than a line below it. */
.fylladia-featured .fylladio__name {
	margin-top: 0;
}

.fylladia-featured__copy {
	display: block;
	max-width: max(20rem, 41.0880vw); /* 710px at 1728, the site's measure */
}


/*--------------------------------------------------------------
# Figures table
--------------------------------------------------------------*/

/* Published performance figures are tabular data, so they are a table: a screen reader has
to be able to say which system a number belongs to. The core table block is used rather
than markup of our own so the client can edit a row in Gutenberg, and its figure already
scrolls sideways when the columns will not fit — which is what a phone gets, because three
columns of numbers stacked into blocks stop being a comparison, and comparison is the only
reason the table is here. */
.selida__table {
	margin-top: max(1.5rem, 2.3148vw); /* 40px at 1728 */
	overscroll-behavior-inline: contain;
}

.selida__table table {
	width: 100%;
	min-width: max(20rem, 26.0417vw); /* 450px at 1728 */
	border-collapse: collapse;
}

.selida__table th,
.selida__table td {
	padding: max(0.75rem, 1.1574vw) max(1rem, 1.5046vw) max(0.75rem, 1.1574vw) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	vertical-align: baseline;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-stretch: 75%;
	letter-spacing: 0.05em;
	text-align: left;
}

/* No text-transform here, unlike every other label on the site: one of these headings is
"Uw" and uppercasing it prints UW, which is a different quantity. The caps are written into
the cell instead, so what the client types in Gutenberg is what renders. */
.selida__table th {
	color: var(--wp--preset--color--contrast);
	font-size: max(0.75rem, 0.6944vw); /* 12px at 1728 */
	line-height: 1.3;
	white-space: nowrap;
}

.selida__table td {
	font-size: max(0.75rem, 0.8102vw); /* 14px at 1728 */
	line-height: 1.5;
}

.selida__table tr:last-child td {
	border-bottom: 0;
}

.selida__table th:last-child,
.selida__table td:last-child {
	padding-right: 0;
}

/* The system's name reads first and what it is sits under it, the way it does on a
brochure tile; the number is set at the same weight so the eye can run down the column. */
.selida__cell-name,
.selida__cell-value {
	color: var(--wp--preset--color--contrast);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728 */
	text-transform: uppercase;
}

.selida__cell-name {
	display: block;
}

.selida__cell-value {
	white-space: nowrap;
}

/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/

/* One column, heading above its own text. The row keeps its rule, which is what carries
the rhythm once the two columns are gone. */
@media (max-width: 998px) {
	.selida__row {
		grid-template-columns: 1fr;
		row-gap: max(0.75rem, 1.2153vw); /* 21px at 1728 */
	}
}

/*--------------------------------------------------------------
# Closing call to action
--------------------------------------------------------------*/

/* The band the rest of the site closes on, at the scale these pages want: dark ground,
the question, the line under it, the filled action beside the plain one, then the number,
over the same standing photograph the product pages put behind theirs.

A sibling of .selida rather than a row inside it, so it runs the full width of the page
instead of sitting inside the grey band's column. */
.selida-cta {
	position: relative;
	isolation: isolate;
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 4.6296vw); /* 80px at 1728 */
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* The picture sits at -1 so it paints under the in-flow text but still above the band's
own black, which is what the 30% is mixed against. isolation on the parent keeps it from
sliding out behind the page. Lazy and low priority: it is decoration at the foot of a
short page, never the LCP element. */
.selida-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.selida-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Not a keyword: the two faces span almost the whole height of this band, so centre
	cuts them and top cuts the man's chin. 14.5% down is the only window that holds both
	whole — measured against the rendered band, not guessed. */
	object-position: 50% 14.5%;
	opacity: 0.3;
}

.selida-cta__title {
	max-width: max(20rem, 52.0833vw); /* 900px at 1728 */
	margin: 0 auto;
	font-size: max(1.5rem, 0.65rem + 1.7361vw, 2.3148vw); /* 40px at 1728, 24px at 768 */
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.selida-cta__lead {
	max-width: max(20rem, 41.0880vw); /* 710px at 1728 */
	margin: max(0.75rem, 1.2153vw) auto 0; /* 21px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

.selida-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
}

.selida-cta__quote,
.selida-cta__phone {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw);
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-decoration: none;
}

/* The filled action, in the treatment the top bar's call to action already uses: a solid
plate that empties on hover into its own outline. */
.selida-cta__quote {
	padding: max(0.75rem, 1.2153vw) max(1.5rem, 2.4884vw); /* 21px / 43px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--zp-motion);
}

.selida-cta__quote:hover,
.selida-cta__quote:focus-visible {
	background-color: var(--wp--preset--color--border);
}

/* The second action is words, not a second button — the design's rule wherever two
actions sit together. */
.selida-cta__phone,
.selida-cta__phone:hover {
	color: inherit;
}

.selida-cta__phone:hover,
.selida-cta__phone:focus-visible {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# FAQ accordion
--------------------------------------------------------------*/

/* Two columns filling the width, with the page's own 96px gutter between them so a
question never reads as one absurdly long line.

The grid holds two column elements, NOT the questions themselves. That matters: with the
questions as grid items they share rows across the gutter, so opening one on the left grows
its row and drags the right-hand question down with it. Each column being a single grid item
makes the two independent — opening a question moves only the questions under it. */
.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: max(1.5rem, 5.5556vw); /* 96px at 1728 */
	align-items: start;

	/* The same 80px a lead paragraph takes on the other pages, so content starts at one
	distance from the band's top edge whatever the page is. Without it the first two rules
	land exactly on the seam between the light band and the grey one and read as the edge of
	the section rather than as the top of a question. */
	padding-top: max(2.5rem, 4.6296vw); /* 80px at 1728 */

	/* Lets a transition run to block-size: auto, which is the only way an accordion of
	unknown content length animates without script measuring it first. The property is
	inherited, so it is set here rather than on :root — a page-level sheet has no business
	changing a global. */
	interpolate-size: allow-keywords;
}

/* <details name> is an exclusive accordion in the browser itself: opening one closes the
rest, with no script on the page at all. A browser that does not implement the grouping
simply lets more than one stay open, which is a working page rather than a broken one —
so there is nothing here to polyfill.

The answers stay in the DOM whether open or shut, so they are still indexed. */
.faq-item {
	border-top: 1px solid var(--wp--preset--color--ink);
}

.faq-item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: max(1rem, 1.5046vw); /* 26px at 1728 */
	padding-block: max(1rem, 1.5625vw); /* 27px at 1728 */
	cursor: pointer;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	list-style: none;
}

/* Safari still draws its own triangle without this. */
.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary:hover,
.faq-item[open] summary {
	color: var(--wp--preset--color--ink);
}

/* The marker is two hairlines crossing — a plus that loses its upright and becomes a minus
when the answer is open. Drawn rather than typed so it matches the rules above it. */
.faq-item__mark {
	position: relative;
	flex: none;
	width: max(0.625rem, 0.9259vw); /* 16px at 1728 */
	height: max(0.625rem, 0.9259vw);
	margin-top: 0.15em;
}

.faq-item__mark::before,
.faq-item__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	border-top: 1px solid currentcolor;
	transition: transform var(--zp-motion);
}

.faq-item__mark::after {
	transform: rotate(90deg);
}

.faq-item[open] .faq-item__mark::after {
	transform: rotate(0deg);
}

/* ::details-content is the box the browser wraps a <details> body in, and the only handle
CSS has on it. Animating it needs content-visibility to flip at the right moment, which is
what allow-discrete does: on close it holds the visible value until the transition ends, so
the answer collapses instead of vanishing on the first frame.

A browser without ::details-content ignores all of this and the answer opens instantly —
which is exactly how the page behaved before, not a broken state. And the theme's blunt
prefers-reduced-motion rule already zeroes the duration for anyone who asks for that. */
.faq-item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size var(--zp-motion), content-visibility var(--zp-motion) allow-discrete;
}

.faq-item[open]::details-content {
	block-size: auto;
}

.faq-item__answer {
	margin: 0;
	padding-bottom: max(1rem, 1.5625vw); /* 27px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw);
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

@media (max-width: 767px) {
	.faq-grid {
		grid-template-columns: 1fr;
	}

	/* Three across a phone puts each cover at about 100px, which is below the width at
	which a cover is still legible as one. */
	.fylladia {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
# Legal pages
--------------------------------------------------------------*/

/* The three legal pages read as a document rather than as a layout: a heading, then its
paragraphs under it, in normal flow across the width. No two-column split — on a privacy
policy the heading is part of the sentence that follows it, not a label beside it.

The measure is wider than the 710px the rest of the site sets its prose to, because these
are long texts and a narrow column would run them to an absurd page length. It is still
short of the full content width, which reads worse than it looks. */
.selida-plain {
	max-width: max(20rem, 69.4444vw); /* 1200px at 1728 */
	padding-top: max(2.5rem, 4.6296vw); /* 80px at 1728, the same as every other page */
}

.selida-plain > *:first-child {
	margin-top: 0;
}

/* .selida h2 is margin: 0 because in the row layout the heading has a column to itself and
nothing above it. Here it sits in the flow directly under a paragraph, so it needs the space
back — otherwise every section reads as one run-on block. */
.selida-plain h2 {
	margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
}