/* Site-specific additions layered on top of the "Gray" template's own theme.css.
   Nothing here replaces a template component; each rule extends one for a page
   type or a real content need (real product covers, dark/light switching,
   accessibility) the template didn't ship a control for. */

/* Skip link */
.skip-link {
	position: absolute;
	top: -3em;
	left: 1em;
	z-index: 2000;
	background: black;
	color: white;
	padding: 0.6em 1.2em;
	border-radius: 0.3em;
	font-family: "Roboto Mono", monospace;
	transition: top 0.12s ease-out;
}
.skip-link:focus {
	top: 1em;
}

/* Theme toggle button (header + toggle-menu) */
.theme-toggle {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 2em;
	padding: 0.5em 1em;
	font-family: "Roboto Mono", monospace;
	font-size: 0.85em;
	cursor: pointer;
}
.theme-dark .theme-toggle {
	border-color: rgba(255, 255, 255, 0.25);
	color: white;
}
.tm-bottom .theme-toggle {
	width: 100%;
	text-align: left;
}

/* Phone reveal control */
.phone-reveal {
	background: transparent;
	border: 1px dashed rgba(0, 0, 0, 0.3);
	border-radius: 2em;
	padding: 0.5em 1.2em;
	font-family: "Roboto Mono", monospace;
	cursor: pointer;
}
.theme-dark .phone-reveal {
	border-color: rgba(255, 255, 255, 0.35);
	color: white;
}
.phone-reveal[data-revealed] {
	font-size: 1.1em;
	letter-spacing: 0.5px;
}
.phone-reveal-note {
	font-size: 0.78em;
	opacity: 0.7;
	margin-top: 0.5em;
	max-width: 22em;
}

/* Portfolio captions: the template hides these until hover, which never
   fires on touch devices and hides the primary content (product names) by
   default. Keep the cover image, but make the caption part of normal flow. */
.portfolio-grid .portfolio-box .portfolio-caption {
	position: static;
	visibility: visible;
	opacity: 1;
	margin: 0;
	padding: 1em 0.25em 0;
}
.portfolio-grid .portfolio-box .portfolio-caption * {
	color: inherit;
	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke-width: 0;
}
.portfolio-grid .portfolio-box .portfolio-caption a {
	text-decoration: none;
	color: inherit;
}
.portfolio-grid .portfolio-box:after {
	display: none;
}

/* Typer fallback for reduced motion */
.typer-static {
	display: none;
}
.reduced-motion .typer,
.reduced-motion .cursor {
	display: none;
}
.reduced-motion .typer-static {
	display: inline;
}

@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;
	}
}

/* Qualifications list */
.qual-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.qual-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 1.4em 0;
}
.theme-dark .qual-item {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}
.qual-item:last-child {
	border-bottom: 0;
}

/* Contact challenge hint */
.hint {
	font-size: 0.8em;
	opacity: 0.6;
}