/* =============================================================================
   Gulliver Robotics — what token VALUES cannot express.
   -----------------------------------------------------------------------------
   Every rule here is a structural difference from the base's components, not a
   colour or a size (those live in skin.css). Keep it that way: a rule that only
   changes a value belongs in the skin.
   ========================================================================== */

/* The whole site is dark: native controls and scrollbars follow. */
:root { color-scheme: dark; }

/* ---------- Typography ---------- */

/* Eyebrow: small mono kicker, regular weight (the base draws it at caption
   size, semibold). */
.eyebrow { font-size: var(--fs-micro); font-weight: var(--weight-regular); }

/* The shared heading (gvn_head(), used by the site's blocks) puts the lead
   right under the title: the design leaves air between them. */
.section__head > :where(h1, h2, h3) + .lead { margin-top: var(--space-5); }

/* Hero title: light, with the highlighted words in semibold. */
.gsec__title--hero { font-weight: 300; }
.gsec__title--hero .hl { font-weight: var(--weight-semibold); }

/* ---------- Buttons: pills ---------- */
.btn, .header__cta { border-radius: var(--radius-full); }

/* Outline = the design's ghost button: hairline, light text. */
.btn--outline { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn--outline:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }

/* ---------- Section backgrounds ---------- */

/* The secondary background comes with a hairline above and below. */
.section--alt { border-block: var(--border-width) solid var(--border-default); }

/* Two sections in a row on the same secondary background read as ONE section
   (the robot selector and its four benefits): no line, no second top padding. */
.section--alt:has(+ .section--alt) { border-bottom: 0; }
.section--alt + .section--alt { border-top: 0; padding-top: 0; }

/* gvn/section prints its heading wrapper even when the heading is empty (a grid
   of cards with no title): without content it must not take space. */
.gsec__head:not(:has(*)) { display: none; }

/* Coral background: DARK ink, as in the design. Light text on this coral is
   about 3:1 — not readable enough for body text. */
.section--action,
.section--action :where(h1, h2, h3, h4) { color: var(--on-action); }
.section--action .eyebrow,
.section--action .lead { color: color-mix(in srgb, var(--on-action) 78%, transparent); }
/* The contact card on coral is the design's navy box. */
.section--action .gsec__card { background: var(--color-secondary); border-color: transparent; color: var(--on-secondary); }

/* ---------- Header: wordmark, quiet links ---------- */

/* Without a logo image the base prints the site name: here it is the pixel
   wordmark, and the text next to the logo continues it in coral. */
.logo-text,
.header__loc {
	font-family: var(--wp--preset--font-family--pixel, "Courier New", monospace);
	font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase;
	white-space: nowrap;
}
.logo-text { color: var(--text-primary); }
.header__logo { gap: 0.5em; }
.header__loc { color: var(--color-action); padding-left: 0; border-left: 0; }

/* Language selector (gulliver_robotics_language_switcher()): a pill of codes,
   the current one filled. It stays in the bar on phones too. */
.gr-lang {
	display: flex; gap: 2px; padding: 3px;
	border: var(--border-width) solid var(--border-default); border-radius: var(--radius-full);
}
.gr-lang a, .gr-lang span {
	padding: 5px 8px; border-radius: var(--radius-full);
	font-family: var(--font-accent); font-size: var(--fs-micro); font-weight: var(--weight-semibold);
	letter-spacing: 0.06em; line-height: 1; color: var(--text-secondary); text-decoration: none;
}
.gr-lang a:hover { color: var(--text-primary); }
.gr-lang [aria-current] { background: var(--text-primary); color: var(--surface-page); }

.nav { gap: 18px; }
.nav a { color: var(--text-secondary); font-size: var(--fs-small); font-weight: var(--weight-regular); border-bottom: 0; }
.nav a:hover, .nav a.is-active { color: var(--text-primary); }
.header__cta { padding: 9px 14px; font-size: var(--fs-small); }

/* ---------- Footer: the page background, muted text ---------- */
.footer {
	background: var(--surface-page); color: var(--text-secondary);
	border-top: var(--border-width) solid var(--border-default);
	font-size: var(--fs-small);
}
.footer :where(h4) {
	color: var(--text-primary); font-size: var(--fs-small); font-weight: var(--weight-semibold);
	text-transform: none; letter-spacing: 0; margin-bottom: 12px;
}
.footer a, .footer .footer__email { color: var(--text-secondary); }
.footer a:hover { color: var(--text-primary); }
.footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; padding-block: 56px 0; }
.footer__logo .header__loc { color: var(--color-action); border-left: 0; }
.footer__tag-line { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-secondary); }
.footer__tag-line--accent { color: var(--color-action); font-weight: var(--weight-regular); }
.footer__office p { color: var(--text-secondary); }
.footer__bar { margin-top: 40px; border-top-color: var(--border-default); }
.footer__bar-inner {
	justify-content: flex-start; gap: 8px 28px;
	padding-block: 20px 40px; font-size: var(--fs-micro); color: var(--text-secondary);
}

/* Two columns down to the smallest screens, brand on its own row (as in the
   design). This rule comes after base.css, so it also wins over the base's
   single column under 768px. */
@media (max-width: 900px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.footer__grid > :first-child { grid-column: 1 / -1; }
}