/* =========================================================================
   MyPCB House — content pages
   About, Contact, the policies, blog posts.

   Loaded only on a singular page or post that is not the front page and not
   a product, because none of these classes appear anywhere else. That is
   about 5 KB the shop grid never has to download.

   Everything here is a class an editor can type into the WordPress editor's
   HTML block. There is no page builder and there will not be one: the
   builder is what put 30 pages of [vc_row] into this database, and unpicking
   it took a migration script. A short vocabulary of honest classes does the
   same job and survives a theme change.
   ========================================================================= */

/* ---------- Lead paragraph ---------------------------------------------- */

/* The first sentence of a page carries most of the weight. It gets its own
   size and a copper rule, so a visitor who reads nothing else still learns
   what the page is for. */
.entry-content .lead {
	position: relative;
	margin-block: 0 var(--sp-6);
	padding-inline-start: var(--sp-4);
	border-inline-start: 3px solid var(--c-copper);
	color: var(--c-text);
	font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
	line-height: 1.5;
	max-width: 62ch;
}

/* ---------- Card set ----------------------------------------------------- */

/* Four short claims that should be scannable rather than read. No
   breakpoints: the grid decides how many fit, so this is correct in a full
   width page, in a narrow column, and on a folded phone. */
/* 300px rather than 250px is deliberate. Inside the narrow content column
   250px fits three across, which leaves a fourth card stranded alone on the
   second row. 300px gives a clean two-by-two there and still opens to four
   across in a full-width container. */
.entry-content .prose-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--sp-4);
	margin-block: var(--sp-6);
}

.entry-content .prose-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5) var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.entry-content .prose-card:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
}

/* A copper solder pad in the corner, so the card belongs to the same board
   as the homepage rather than being a generic box. */
.entry-content .prose-card::before {
	content: "";
	width: 10px; height: 10px;
	border-radius: var(--r-full);
	background: var(--c-copper);
	opacity: .8;
}

.entry-content .prose-card h3 {
	margin: 0;
	font-size: 1.02rem;
	color: var(--c-text);
}
.entry-content .prose-card p {
	margin: 0;
	font-size: .925rem;
	line-height: 1.55;
	color: var(--c-text-dim);
}

/* ---------- Questions ---------------------------------------------------- */

/* <details> rather than a scripted accordion. It opens with no JavaScript,
   it is keyboard operable and screen-reader correct for free, and a browser
   will find text inside a closed one when the visitor uses Ctrl+F. The
   plugin version of this was 200 KB of page builder. */
.entry-content .faq {
	display: grid;
	gap: var(--sp-2);
	margin-block: var(--sp-5);
	max-width: 70ch;
}

.entry-content .faq__item {
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease);
}
.entry-content .faq__item[open] { border-color: var(--c-line); }
.entry-content .faq__item:hover { border-color: var(--c-accent); }

.entry-content .faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 52px;                /* a real tap target */
	padding: var(--sp-3) var(--sp-4);
	color: var(--c-text);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;                /* hide the default triangle */
}
.entry-content .faq__item > summary::-webkit-details-marker { display: none; }

/* Our own marker: a plus that becomes a minus. */
.entry-content .faq__item > summary::after {
	content: "";
	flex: none;
	width: 13px; height: 13px;
	background:
		linear-gradient(var(--c-copper), var(--c-copper)) center / 100% 2px no-repeat,
		linear-gradient(var(--c-copper), var(--c-copper)) center / 2px 100% no-repeat;
	transition: transform var(--dur) var(--ease);
}
.entry-content .faq__item[open] > summary::after {
	background: linear-gradient(var(--c-copper), var(--c-copper)) center / 100% 2px no-repeat;
	transform: rotate(180deg);
}

.entry-content .faq__item > *:not(summary) {
	margin: 0;
	padding: 0 var(--sp-4) var(--sp-4);
	color: var(--c-text-dim);
	font-size: .925rem;
	line-height: 1.6;
}

/* ---------- Contact layout ----------------------------------------------- */

.entry-content .contact-grid {
	display: grid;
	gap: var(--sp-5);
	margin-block: var(--sp-6);
	align-items: start;
}
@media (min-width: 900px) {
	.entry-content .contact-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
		gap: var(--sp-6);
	}
}

.entry-content .contact-grid__form h2 { margin-top: 0; }

.entry-content .contact-grid__aside {
	display: grid;
	gap: var(--sp-4);
	min-width: 0;
}

.entry-content .info-card {
	padding: var(--sp-5) var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
}
.entry-content .info-card h2 {
	margin: 0 0 var(--sp-3);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}
.entry-content .info-card__address {
	margin: 0 0 var(--sp-3);
	font-style: normal;
	line-height: 1.6;
	color: var(--c-text);
	font-size: .95rem;
}
.entry-content .info-card__contact { margin: 0; }
.entry-content .info-card__contact a {
	font-family: var(--f-mono);
	font-size: .875rem;
	word-break: break-all;
}
.entry-content .info-card__note {
	margin: var(--sp-3) 0 0;
	color: var(--c-text-faint);
	font-size: .8rem;
	line-height: 1.5;
}

/* Opening hours as a ruled ledger, the way a shop door actually lists them.
   tabular-nums keeps every time on the same vertical rhythm — without it the
   1 in "10:00" is narrower than the 8 in "18:00" and the column wobbles. */
.entry-content .hours { margin: 0; display: grid; gap: 0; }
.entry-content .hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-2);
	border-bottom: 1px dashed var(--c-line-soft);
	font-size: .875rem;
}
.entry-content .hours__row:last-child { border-bottom: 0; }
.entry-content .hours dt { color: var(--c-text-dim); }
.entry-content .hours dd {
	margin: 0;
	color: var(--c-text);
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
}
.entry-content .hours__row.is-closed dd { color: var(--c-text-faint); }

/* ---------- Forms -------------------------------------------------------

   Contact Form 7 ships almost no styling of its own, on the assumption the
   theme will dress it. Nothing did, so the contact form was raw browser
   controls sitting inside a designed page — the one place on the site where
   somebody is about to talk to a human, looking like it had been forgotten.

   Selectors are kept generic (input, textarea, select inside .entry-content)
   so any other form dropped onto a page inherits the same treatment. */

.entry-content .wpcf7 { margin-top: var(--sp-4); }

.entry-content .wpcf7 p { margin: 0 0 var(--sp-4); }

.entry-content .wpcf7 label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-text-dim);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content input[type="search"],
.entry-content select,
.entry-content textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-3);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	color: var(--c-text);
	font: inherit;
	font-size: 16px;               /* 16px stops iOS zooming the page on focus */
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.entry-content textarea {
	min-height: 150px;
	line-height: 1.6;
	resize: vertical;
}
.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: var(--glow);
}
.entry-content ::placeholder { color: var(--c-text-faint); }

.entry-content input[type="submit"],
.entry-content .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 50px;
	padding: 0 var(--sp-6);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	border: 0;
	border-radius: var(--r-md);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--sh-2);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.entry-content input[type="submit"]:hover,
.entry-content .wpcf7-submit:hover { background: var(--c-accent-dim); }
.entry-content input[type="submit"]:active,
.entry-content .wpcf7-submit:active { transform: translateY(1px); }

/* The spinner Contact Form 7 shows while the message is sending. */
.entry-content .wpcf7-spinner { margin-inline-start: var(--sp-3); }

/* Validation. Red on its own is not enough — it fails for the colour blind
   and it fails in bright sun — so the field also gains a thicker edge. */
.entry-content .wpcf7-not-valid {
	border-color: var(--c-danger);
	border-width: 2px;
}
.entry-content .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--sp-1);
	color: var(--c-danger);
	font-size: .82rem;
	font-weight: 600;
}
.entry-content .wpcf7-response-output {
	margin: var(--sp-4) 0 0 !important;
	padding: var(--sp-3) var(--sp-4) !important;
	border-width: 1px !important;
	border-radius: var(--r-md);
	font-size: .9rem;
}
.entry-content .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--c-ok) !important;
	color: var(--c-ok);
}
.entry-content .wpcf7 form.invalid .wpcf7-response-output,
.entry-content .wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--c-danger) !important;
	color: var(--c-danger);
}

/* ---------- Deferred map ------------------------------------------------- */

/* The map used to be a Google iframe that loaded on arrival: several hundred
   kilobytes and a set of third-party cookies, on a page most visitors open to
   find an email address. Now it is a drawn placeholder and the real embed
   only arrives if somebody asks for it. app.js does the swap. */
.entry-content .map-facade {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--sp-3);
	aspect-ratio: 16 / 9;
	max-height: 420px;
	margin-block: var(--sp-4) var(--sp-6);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;

	/* Faint street-grid texture, so the placeholder reads as a map rather
	   than as a failed image. */
	background-image:
		linear-gradient(var(--c-line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
	background-size: 34px 34px, 34px 34px;
}
.entry-content .map-facade.is-loaded {
	display: block;
	background-image: none;
	padding: 0;
}
.entry-content .map-facade iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.entry-content .map-facade__btn {
	display: grid;
	justify-items: center;
	gap: var(--sp-1);
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	color: var(--c-text);
	font: inherit;
	cursor: pointer;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.entry-content .map-facade__btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }

/* A map pin, drawn in CSS. One less image request. */
.entry-content .map-facade__pin {
	width: 20px; height: 20px;
	border: 3px solid var(--c-copper);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	margin-bottom: var(--sp-1);
}

.entry-content .map-facade__label { font-weight: 700; font-size: .95rem; }
.entry-content .map-facade__note { color: var(--c-text-faint); font-size: .75rem; }

.entry-content .map-facade__out {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: .85rem;
	color: var(--c-text-dim);
}
.entry-content .map-facade__out:hover { color: var(--c-accent); }

/* ---------- Courier tracking (ParcelPanel) -------------------------------

   ParcelPanel draws its lookup box with a white hairline and plain buttons.
   Brought onto the board: the shop's line colour, a panel with footprint
   pads, and the primary button for "Track". */
#pp-tracking-page,
#pp-tracking-page * { border-color: var(--c-line) !important; }
#pp-tracking-page > div:first-child,
#pp-tracking-page form {
	border-radius: var(--r-lg);
}
#pp-tracking-page {
	padding: var(--sp-2);
	background: var(--pads), var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
#pp-tracking-page .btn-enter.button {
	min-height: 48px;
	padding: 0 var(--sp-5);
	border: 0 !important;
	border-radius: var(--r-md);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim);
	text-decoration: none;
}
#pp-tracking-page .btn-enter.button:hover { background: color-mix(in oklab, var(--c-accent) 88%, #fff); }
#pp-tracking-page input { font-size: 16px; }

/* WooCommerce's own order-lookup form — what "Track your order" shows when
   ParcelPanel is not connected. Its button had no style and rendered as a
   small grey browser default. */
.entry-content form.track_order {
	max-width: 620px;
	padding: var(--sp-5);
	background: var(--pads), var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.entry-content form.track_order .form-row { display: grid; gap: 6px; margin: 0 0 var(--sp-4); }
.entry-content form.track_order label { color: var(--c-text-dim); font-size: .85rem; font-weight: 600; }
.entry-content form.track_order input.input-text {
	width: 100%; min-height: 50px; padding: var(--sp-3);
	background: var(--c-surface-2); color: var(--c-text);
	border: 1px solid var(--c-line); border-radius: var(--r-md);
	font: inherit; font-size: 16px;
}
.entry-content form.track_order input.input-text:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--glow); }
.entry-content form.track_order button[type="submit"] {
	min-height: 50px; padding: 0 var(--sp-6);
	border: 0; border-radius: var(--r-md);
	background: var(--c-accent); color: var(--c-accent-ink);
	font: inherit; font-weight: 700; cursor: pointer;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim);
}