/*
Theme Name: Nome
Theme URI: https://nometechnologies.com
Author: Nome Technologies LLC
Description: The Nome Technologies theme. A block theme with no demo content, no
  placeholder links and no patterns we do not use. Everything it ships with is
  something the site actually needs.
Version: 1.1.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nome
*/

/* =========================================================================
   1. Base
   ========================================================================= */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Full-bleed sections are built with the 100vw / negative-margin trick, which
   spills horizontally the moment a scrollbar takes width. clip contains it
   without creating a scroll container the way hidden would. */
body {
	overflow-x: clip;
}

img,
svg,
video,
canvas {
	max-width: 100%;
}

img,
svg,
video {
	height: auto;
}

/* =========================================================================
   2. Accessibility
   ========================================================================= */

/* The skip link is the first focusable element in the document. It is off
   screen until focused rather than display:none, which would take it out of
   the tab order entirely and defeat the point. */
.nome-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 0.85rem 1.25rem;
	background: var(--wp--preset--color--accent, #7C8CF8);
	color: #0B0B0C;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
	transform: translateY(-120%);
}

.nome-skip-link:focus {
	transform: translateY(0);
}

/* A visible focus ring everywhere, on the keyboard only. Several blocks ship
   outline:none, so this is stated with enough weight to survive them. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #7C8CF8) !important;
	outline-offset: 3px !important;
	border-radius: 2px;
}

#nome-main:focus {
	outline: none;
}

/* Honor the reduced-motion preference globally rather than per animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Hidden from sight, still read aloud. */
.nome-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   3. The mobile menu
   -------------------------------------------------------------------------
   The block ships a white overlay with small links, which on an otherwise
   black site reads as a bug. This makes it part of the site.
   ========================================================================= */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0B0B0C !important;
	color: var(--wp--preset--color--ink, #F4F2EF) !important;
	padding: 0 !important;
	/* A single off-centre wash of the accent, so the panel has depth without
	   anything so decorative it needs explaining. */
	background-image:
		radial-gradient(90rem 48rem at 88% -12%, rgba(124, 140, 248, 0.16), transparent 62%),
		radial-gradient(60rem 40rem at -10% 112%, rgba(124, 140, 248, 0.09), transparent 60%) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	padding: 1.15rem 1.5rem 2.5rem;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* The close control: a real 44px target with a ring, not a bare glyph.
   Scoped to the open overlay — unscoped, the !important below overrides the
   block's own rule that keeps this button hidden on desktop. */
.is-menu-open .wp-block-navigation__responsive-container-close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	align-self: flex-end;
	border: 1px solid #2E2E34;
	border-radius: 999px;
	color: var(--wp--preset--color--ink, #F4F2EF) !important;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--accent, #7C8CF8);
	background: rgba(124, 140, 248, 0.1);
}

.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 1.1rem;
	height: 1.1rem;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	justify-content: flex-start !important;
	padding-top: 2.5rem;
}

.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	counter-reset: nome-nav;
}

.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid #1C1C20;
}

.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 1px solid #1C1C20;
}

.is-menu-open .wp-block-navigation-item__content {
	display: flex !important;
	align-items: baseline;
	gap: 1rem;
	width: 100%;
	/* Comfortably past the 44px minimum target. */
	padding: 1.3rem 0.25rem !important;
	font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--ink, #F4F2EF) !important;
	text-decoration: none !important;
	transition: color 0.2s ease, padding-left 0.25s ease;
}

/* A quiet index. It gives the list structure and a bit of engineering
   character without adding a word of copy. */
.is-menu-open .wp-block-navigation-item__content::before {
	counter-increment: nome-nav;
	content: counter(nome-nav, decimal-leading-zero);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent, #7C8CF8);
	opacity: 0.75;
	flex: none;
	min-width: 1.75rem;
}

.is-menu-open .wp-block-navigation-item__content:hover,
.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: #FFFFFF !important;
	padding-left: 0.75rem !important;
}

.is-menu-open .wp-block-navigation-item__content:hover::before {
	opacity: 1;
}

/* The mark, very low, bottom right — the panel's only ornament. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close::after {
	content: "";
	display: block;
	margin-top: auto;
	align-self: flex-end;
	width: min(16rem, 52vw);
	aspect-ratio: 16 / 9;
	background: url(assets/nome-mark.svg) right bottom / contain no-repeat;
	opacity: 0.1;
	pointer-events: none;
}

/* Items arrive one after another. Cheap, and it makes the panel feel built. */
@media (prefers-reduced-motion: no-preference) {
	.is-menu-open .wp-block-navigation-item {
		opacity: 0;
		transform: translateY(0.6rem);
		animation: nome-nav-in 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
	}

	.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
	.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.10s; }
	.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.16s; }
	.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.22s; }
	.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.28s; }
}

@keyframes nome-nav-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* The hamburger itself, so it is a proper target and matches the close ring.
   Confined to the breakpoint where the block actually uses it. */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-right: -0.5rem;
		color: var(--wp--preset--color--ink, #F4F2EF) !important;
		border-radius: 999px;
	}
}

/* =========================================================================
   4. Small screens
   ========================================================================= */

@media (max-width: 781px) {
	/* Stop the header crowding the edge on a phone. */
	.wp-site-blocks > header .wp-block-group.alignwide {
		gap: 0.75rem;
	}

	/* Any block that opted into a flex row should wrap rather than squeeze. */
	.wp-block-group.is-layout-flex {
		flex-wrap: wrap;
	}

	/* Tables are the one block that genuinely cannot reflow. */
	.wp-block-table {
		overflow-x: auto;
		display: block;
	}
}

/* Never let a form control be small enough to trigger iOS zoom-on-focus. */
@media (max-width: 781px) {
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* =========================================================================
   5. Launch state
   -------------------------------------------------------------------------
   Pages carry both the pre-launch and the launched wording. The body class set
   in functions.php decides which one is shown, so launch day is one constant.
   ========================================================================= */

.styl-is-prelaunch .when-launched {
	display: none !important;
}

.styl-is-launched .when-prelaunch {
	display: none !important;
}