/* ==================================================================
   Alta Computers — theme chrome

   theme.json owns the design tokens (the logo's blue ramp, the IBM
   Plex scale, spacing). This file owns the things theme.json cannot
   express: the sticky masthead, the arch-gradient plate, the card
   and spec-row treatments, and the dark contact block.

   The palette is the logo. Sampling the mark returns one pure blue
   ramp — dominant #0060B0, running #003070 up to #00B0F0, no red
   anywhere in it. Neutrals are tinted toward that blue so nothing on
   the page reads as off-the-shelf grey.
   ================================================================== */

:root {
	--alta-measure: 1120px;
	--alta-shadow-sm: 0 1px 2px rgba(8, 23, 42, .06), 0 2px 8px rgba(8, 23, 42, .05);
	--alta-shadow-lg: 0 18px 48px rgba(0, 40, 79, .20), 0 2px 8px rgba(8, 23, 42, .07);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a):focus-visible,
:where(button):focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-400);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Running text stays near a comfortable measure. */
.alta-prose { max-width: 68ch; }

/* ------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------ */

.alta-masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.admin-bar .alta-masthead { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .alta-masthead { top: 46px; }
}

/* The masthead group renders with a flow layout, so its flex child would
   run edge to edge while every section below sits in a 1120px column.
   Cap the bar to the same content width and give the masthead the same
   gutters, so the header lines up with the content. Both values are read
   from the variables WordPress emits for the layout, with the theme.json
   figures as fallbacks. */
.alta-masthead {
	padding-left: var(--wp--style--root--padding-left, 24px);
	padding-right: var(--wp--style--root--padding-right, 24px);
}

.alta-masthead .alta-bar {
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-inline: auto;
	min-height: 124px;
}

/* Brand block left, navigation and phone pushed right. */
.alta-masthead .alta-bar > :first-child { margin-right: auto; }

.alta-masthead .wp-block-site-logo img { height: 100px; width: auto; }

/* Nav items get an accent underline on hover rather than a colour swap. */
.alta-masthead .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 6px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.alta-masthead .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--brand-400);
	text-decoration: none;
}

.alta-masthead .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--brand-600);
	color: var(--wp--preset--color--ink);
}

.alta-masthead .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface);
	padding: 64px 24px 24px;
}

/* ------------------------------------------------------------------
   Masthead contact block — phone above email, no enclosing box.
   Both lines sit at the same size so they read as one lockup.
   ------------------------------------------------------------------ */

.alta-masthead .alta-contact {
	text-align: right;
	align-items: flex-end;
}

.alta-masthead .alta-contact p {
	margin: 0;
	line-height: 1.15;
}

/* Same face and weight as the site title — the display condensed cut, not
   the mono used for labels elsewhere. Condensed is also roughly 20% narrower
   than the mono at the same size, which buys back masthead room. */
.alta-masthead .alta-contact a {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand-600);
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease;
}

.alta-masthead .alta-contact a:hover {
	color: var(--wp--preset--color--brand-400);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Step down before the block collides with the navigation. Measured: the
   masthead needs 955px of its 1072px at full size, so 28px holds until the
   viewport is near 1020px — the condensed face pushed this breakpoint down
   from the 1180px the wider mono needed. */
@media (max-width: 1020px) {
	.alta-masthead .alta-contact a { font-size: 22px; }
}

@media (max-width: 600px) {
	.alta-masthead .alta-contact { text-align: left; align-items: flex-start; }
	.alta-masthead .alta-contact a { font-size: 18px; }

	/* The site title is set from theme.json, which cannot carry a media
	   query — bring it down with the contact block so the two stay matched
	   on phones. Two classes beat theme.json's single-class rule. */
	.alta-masthead .wp-block-site-title { font-size: 22px; }
}

/* The boxed phone chip is still used on the 404 template. */
.alta-tel-chip a,
a.alta-tel-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--brand-600);
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
	transition: border-color .16s ease, background-color .16s ease;
}

.alta-tel-chip a:hover,
a.alta-tel-chip:hover {
	border-color: var(--wp--preset--color--brand-600);
	background: var(--wp--preset--color--surface-alt);
	text-decoration: none;
}

/* ------------------------------------------------------------------
   Buttons — the outline variant
   ------------------------------------------------------------------ */

.wp-block-button.is-style-outline > .wp-element-button,
.wp-block-button.is-style-alta-ghost > .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule-strong);
}

.wp-block-button.is-style-outline > .wp-element-button:hover,
.wp-block-button.is-style-alta-ghost > .wp-element-button:hover {
	background: transparent;
	border-color: var(--wp--preset--color--brand-600);
	color: var(--wp--preset--color--brand-600);
}

/* On a dark ground the ghost button inverts. */
.alta-on-dark .wp-block-button.is-style-outline > .wp-element-button,
.alta-on-dark .wp-block-button.is-style-alta-ghost > .wp-element-button {
	color: #fff;
	border-color: rgba(255, 255, 255, .38);
}

.alta-on-dark .wp-block-button.is-style-outline > .wp-element-button:hover,
.alta-on-dark .wp-block-button.is-style-alta-ghost > .wp-element-button:hover {
	color: #fff;
	border-color: #fff;
}

/* ------------------------------------------------------------------
   The arch plate — a screenshot sitting on the logo gradient
   ------------------------------------------------------------------ */

.alta-plate,
.is-style-alta-plate {
	background-image: linear-gradient(148deg, #003a72 0%, #0060b0 46%, #00b0f0 100%);
	border-radius: 3px;
	box-shadow: var(--alta-shadow-lg);
	padding: clamp(20px, 3vw, 36px);
}

.alta-plate img,
.is-style-alta-plate img {
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 20, 45, .38);
	display: block;
	width: 100%;
	height: auto;
}

.alta-plate figcaption,
.is-style-alta-plate figcaption {
	color: rgba(255, 255, 255, .84);
	margin-top: 16px;
}

/* ------------------------------------------------------------------
   Edition cards — peers, separated only by a rule off the ramp
   ------------------------------------------------------------------ */

.alta-card,
.is-style-alta-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 3px solid var(--wp--preset--color--brand-700);
	border-radius: 3px;
	box-shadow: var(--alta-shadow-sm);
	overflow: hidden;
	height: 100%;
}

.alta-card-alt { border-top-color: var(--wp--preset--color--brand-400); }

/* The sunk well a screenshot sits in inside a card. */
.alta-well {
	background: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: clamp(16px, 2.4vw, 28px);
}

.alta-well img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1px;
	box-shadow: 0 8px 24px rgba(8, 23, 42, .22);
}


/* ------------------------------------------------------------------
   Hairline grid — capability tiles sharing 1px gutters
   ------------------------------------------------------------------ */

.alta-grid {
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	overflow: hidden;
	gap: 1px;
}

.alta-grid > .wp-block-column,
.alta-grid > .wp-block-group,
.alta-grid > * {
	background: var(--wp--preset--color--surface);
}

.alta-tile { padding: 24px; }


/* ------------------------------------------------------------------
   Dark sections
   ------------------------------------------------------------------ */

.alta-on-dark { color: var(--wp--preset--color--on-dark); }

.alta-on-dark :is(h1, h2, h3, h4) { color: #fff; }

.alta-on-dark p { color: #9cb4cd; }

.alta-on-dark a:not(.wp-element-button) {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.alta-on-dark a:not(.wp-element-button):hover {
	border-bottom-color: var(--wp--preset--color--brand-300);
}

/* The phone number set at display size. */
.alta-tel-big a,
a.alta-tel-big {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(38px, 5.4vw, 60px);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1;
	display: inline-block;
	text-decoration: none;
	border-bottom: 3px solid rgba(255, 255, 255, .28);
	padding-bottom: 6px;
}

.alta-tel-big a:hover,
a.alta-tel-big:hover { border-bottom-color: var(--wp--preset--color--brand-300); }


/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.alta-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.alta-footer,
.alta-footer p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.alta-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.alta-footer a:hover { color: var(--wp--preset--color--brand-600); }

/* ------------------------------------------------------------------
   Editorial detail: the blinking block cursor in the hero eyebrow.
   One flourish, and it yields to prefers-reduced-motion.
   ------------------------------------------------------------------ */

.alta-cursor::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 12px;
	margin-left: 6px;
	background: var(--wp--preset--color--brand-400);
	animation: alta-blink 1.15s steps(1, end) infinite;
}

@keyframes alta-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.alta-cursor::after { animation: none; }
	* { transition: none !important; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 940px) {
	.alta-masthead .alta-bar { flex-wrap: wrap; }
}

/* The masthead is sticky, so a 100px logo would hold a quarter of a
   phone screen permanently. Step it down once the viewport is narrow.
   Delete this block to keep the logo at 100px on every screen. */
@media (max-width: 720px) {
	.alta-masthead .alta-bar { min-height: 84px; }
	.alta-masthead .wp-block-site-logo img { height: 64px; }
}

@media (max-width: 460px) {
	.alta-tel-chip { display: none; }
}

/* ------------------------------------------------------------------
   Block-style aliases

   register_block_style() emits .is-style-<name>. Map each onto the
   hand-written class above so a block styled from the editor sidebar
   and one styled in a pattern render identically.
   ------------------------------------------------------------------ */

/* ==================================================================
   LEGACY — key/value rows built on core/list.

   Kept only so pages already saved with the old <li><span><span>
   markup keep rendering. Do NOT build anything new on these.

   core/list-item stores its whole content in ONE RichText field, which
   means the two halves of a row are not separately editable, the
   editor's typography controls address the <ul> rather than either
   half, and — the fatal one — RichText strips class attributes from
   spans it does not recognise as registered formats, so any class put
   on them disappears the first time someone saves. These selectors are
   positional for exactly that reason: classes cannot survive here.

   The block-based replacement is below.
   ================================================================== */

:is(.alta-specs, .is-style-alta-specs) { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--rule); }
:is(.alta-specs, .is-style-alta-specs) li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--wp--preset--color--rule); font-family: var(--wp--preset--font-family--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
:is(.alta-specs, .is-style-alta-specs) li > :first-child { color: var(--wp--preset--color--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; flex: none; padding-right: 16px; }
:is(.alta-specs, .is-style-alta-specs) li > :last-child { color: var(--wp--preset--color--ink); text-align: right; margin-left: auto; text-transform: none; letter-spacing: normal; }

:is(.alta-rows, .is-style-alta-rows) { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--rule); }
:is(.alta-rows, .is-style-alta-rows) li { display: flex; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--wp--preset--color--rule); }
:is(.alta-rows, .is-style-alta-rows) li > :first-child { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--wp--preset--color--ink); flex: none; display: inline-block; box-sizing: border-box; width: 256px; padding-right: 24px; text-transform: none; }
:is(.alta-rows, .is-style-alta-rows) li > :last-child { font-size: 15.5px; color: var(--wp--preset--color--muted); }

@media (max-width: 640px) {
	:is(.alta-rows, .is-style-alta-rows) li { flex-direction: column; gap: 4px; }
	:is(.alta-rows, .is-style-alta-rows) li > :first-child { width: auto; padding-right: 0; }
}

:is(.alta-lines, .is-style-alta-lines) li { display: flex; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: var(--wp--preset--font-family--mono); font-size: 13.5px; }
:is(.alta-lines, .is-style-alta-lines) li > :first-child { color: rgba(230, 240, 250, .62); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; flex: none; display: inline-block; box-sizing: border-box; width: 112px; padding-right: 24px; padding-top: 2px; }
:is(.alta-lines, .is-style-alta-lines) li > :last-child { text-transform: none; letter-spacing: normal; font-size: 13.5px; }

/* ==================================================================
   Key/value rows, block-based.

   Each row is a flex Group holding two Paragraphs, so both halves are
   real blocks: independently editable, independently styleable, and
   their classes live on block wrappers where WordPress preserves them.

   This section sets LAYOUT ONLY — no font-size, weight, transform or
   colour. All typography is carried on the blocks themselves as
   attributes, which is what makes the editor's controls actually work.
   Adding a font-size here would silently override the sidebar again.
   ================================================================== */

/* The table is a two-column grid whose first track is sized to the widest
   label in the whole table — so the key column fits its content and grows
   with the font size instead of wrapping, and every row still lines up.
   Rows are subgrid, which keeps each row a real box (so its borders and
   padding work, and it stays selectable in the editor) while borrowing the
   table's column tracks.

   To pin the key column instead of letting it fit, set a floor on the
   table: --alta-key-min: 112px. */
/* The class is doubled on purpose — it is not a typo.

   These groups also carry WordPress's own layout classes, and core styles
   .is-layout-flex { display: flex } at the same specificity as a single
   .alta-row would have. Equal specificity means load order decides, and the
   order differs between the two surfaces: on the front end theme.css is
   enqueued last and wins, but inside the editor iframe core's block styles
   load after the theme's and win instead. The row then stayed flex, subgrid
   never applied, and long labels wrapped mid-word in the editor only.

   Doubling the class takes these to 0,2,0 so they beat .is-layout-flex and
   .wp-container-* whatever the order. Cheaper and safer than !important,
   which would block per-block overrides from the editor sidebar. */
.alta-table.alta-table {
	/* Floor keeps today's proportions at the current type sizes; max-content
	   takes over the moment a bigger font needs more room. Override this one
	   value to resize the label column. */
	--alta-key-min: 112px;

	display: grid;
	grid-template-columns: minmax(var(--alta-key-min), max-content) 1fr;
	border-top: 1px solid currentColor;
}

/* Industry rows run a wider label column; spec rows let theirs fit. */
.alta-table:has(.alta-row-wide)  { --alta-key-min: 256px; }
.alta-table:has(.alta-row-split) { --alta-key-min: 0px; }

.alta-row.alta-row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: baseline;
	border-bottom: 1px solid currentColor;
}

/* A label must never shrink below its text — that is what produced the
   mid-word break on "COMPANY" when the row fell back to flex. */
.alta-row.alta-row > .alta-k { min-width: max-content; }

/* The rules take their colour from the container, so one class works on
   both the light cards and the dark contact block. */
.alta-table,
.alta-row { border-color: var(--wp--preset--color--rule); }

.alta-on-dark .alta-table,
.alta-on-dark .alta-row,
.is-style-alta-on-dark .alta-table,
.is-style-alta-on-dark .alta-row { border-color: rgba(255, 255, 255, .18); }

.alta-row > * { margin: 0; }

/* The gutter lives in the key's own padding, so it survives whatever the
   column ends up measuring. */
.alta-row > .alta-k { padding-right: 24px; }

.alta-row > .alta-v { min-width: 0; }

/* Spec rows sit the value against the right edge. The value track is 1fr,
   so aligning its text right is all that is needed. */
.alta-row-split > .alta-k { padding-right: 16px; }
.alta-row-split > .alta-v { text-align: right; }

/* Industry rows stack under their label on small screens. */
@media (max-width: 640px) {
	.alta-table:has(.alta-row-wide) { grid-template-columns: 1fr; }
	.alta-table:has(.alta-row-wide) .alta-row { grid-template-columns: 1fr; gap: 4px; }
	.alta-row-wide > .alta-k { padding-right: 0; }
}

/* Fallback for engines without subgrid: back to the fixed-width flex row.
   Every current browser takes the grid path above. */
@supports not (grid-template-columns: subgrid) {
	.alta-table { display: block; }

	.alta-row { display: flex; }

	.alta-row > .alta-k {
		flex: none;
		box-sizing: border-box;
		width: var(--alta-key-min, 112px);
	}

	.alta-row > .alta-v { flex: 1; }

	.alta-row-wide > .alta-k { width: 256px; }

	.alta-row-split { justify-content: space-between; }
	.alta-row-split > .alta-k { width: auto; }
	.alta-row-split > .alta-v { flex: 0 1 auto; }

	@media (max-width: 640px) {
		.alta-row-wide { flex-direction: column; align-items: flex-start; }
		.alta-row-wide > .alta-k { width: auto; }
	}
}

.is-style-alta-grid { background: var(--wp--preset--color--rule); border: 1px solid var(--wp--preset--color--rule); border-radius: 3px; overflow: hidden; gap: 1px; }
.is-style-alta-grid > * { background: var(--wp--preset--color--surface); }

.is-style-alta-on-dark { color: var(--wp--preset--color--on-dark); }
.is-style-alta-on-dark :is(h1, h2, h3, h4) { color: #fff; }
.is-style-alta-on-dark p { color: #9cb4cd; }

.is-style-alta-cursor::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 12px;
	margin-left: 6px;
	background: var(--wp--preset--color--brand-400);
	animation: alta-blink 1.15s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-alta-cursor::after { animation: none; }
}