/*
Theme Name: Allegheny Software
Theme URI: https://alleghenysoftware.com
Author: Allegheny Software
Author URI: https://alleghenysoftware.com
Description: Child theme of Twenty Twenty-Five for alleghenysoftware.com. A modern, bold, Fueled-inspired design system tailored for a medical software product.
Template: twentytwentyfive
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alleghenysoftware
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, wide-blocks, block-styles, accessibility-ready
*/

/* -----------------------------------------------------------------------------
 * Allegheny Software — global overrides
 *
 * Keep this file lean. Prefer theme.json for design tokens and patterns for
 * structural layout. Use this stylesheet only for behavior that cannot be
 * expressed through the block editor (transitions, sticky/hover states, etc.).
 * -------------------------------------------------------------------------- */

:root {
	--as-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--as-secondary: #284077;
}

/* -----------------------------------------------------------------------------
 * Navigation — override the global-styles underline-on-hover so the nav
 * relies on color change alone for the hover affordance.
 * -------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus,
.wp-block-navigation .wp-block-navigation-item a:focus-visible,
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	text-decoration: none;
}

/* Use the secondary brand blue for the focus ring across the site. */
:focus-visible {
	outline: 2px solid var(--as-secondary);
	outline-offset: 2px;
}

/* Smoother in-page scroll for anchor navigation. */
html {
	scroll-behavior: smooth;
}

/* Link micro-interaction — Fueled-style underline reveal. */
.wp-site-blocks a:where(:not(.wp-block-button__link, .wp-block-navigation-item__content, .wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s var(--as-ease), text-decoration-color 0.2s var(--as-ease);
}

/* Buttons — subtle lift on hover. */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.2s var(--as-ease), background-color 0.2s var(--as-ease), color 0.2s var(--as-ease), box-shadow 0.2s var(--as-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Primary nav — animated underline on hover/focus. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--as-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* -----------------------------------------------------------------------------
 * Image utility classes — applied via the Image block's `className` so that the
 * block's saved markup matches WordPress's serializer (avoids "Resolve Block").
 * -------------------------------------------------------------------------- */

.wp-block-image.as-image-rounded img {
	border-radius: 24px;
}

.wp-block-image.as-image-shadow img {
	box-shadow: 0 30px 60px -20px rgba(11, 27, 43, 0.25);
}

.wp-block-image.as-aspect-portrait img,
.wp-block-image.as-aspect-landscape img,
.wp-block-image.as-aspect-square img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.wp-block-image.as-aspect-portrait img {
	aspect-ratio: 4 / 5;
}

.wp-block-image.as-aspect-landscape img {
	aspect-ratio: 5 / 4;
}

.wp-block-image.as-aspect-square img {
	aspect-ratio: 1 / 1.1;
}

/* -----------------------------------------------------------------------------
 * Hero — floating insight card overlaying the portrait image.
 * -------------------------------------------------------------------------- */

.as-hero-figure {
	position: relative;
}

.as-floating-stat {
	position: absolute;
	left: -1.25rem;
	right: 25%;
	bottom: 1.5rem;
	background: #ffffff;
	border-radius: 18px;
	padding: 1.25rem 1.4rem;
	box-shadow: 0 24px 60px -18px rgba(11, 27, 43, 0.28),
		0 2px 6px rgba(11, 27, 43, 0.06);
	backdrop-filter: saturate(180%) blur(8px);
	max-width: 22rem;
}

.as-floating-stat > * + * {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	.as-floating-stat {
		position: static;
		margin-top: 1.25rem;
		max-width: 100%;
		left: 0;
		right: 0;
	}
}

/* -----------------------------------------------------------------------------
 * Emphasis manifesto band — inline pill chips inside the headline.
 * -------------------------------------------------------------------------- */

.as-emphasis .as-headline {
	max-width: 18ch;
}

.as-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.05em 0.45em;
	margin: 0 0.05em;
	border-radius: 999px;
	font-style: italic;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	transform: translateY(-0.04em);
}

.as-pill-mint {
	background: #ffffff;
	color: var(--wp--preset--color--accent-deep);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

.as-pill-navy {
	background: var(--wp--preset--color--secondary);
	color: #ffffff;
}

.as-pill-outline {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

/* -----------------------------------------------------------------------------
 * Browser chrome — wraps the showcase screenshot.
 * -------------------------------------------------------------------------- */

.as-browser-frame {
	background: #ffffff;
	border-radius: 18px;
	padding: 0;
	box-shadow: 0 30px 60px -20px rgba(11, 27, 43, 0.25),
		0 2px 6px rgba(11, 27, 43, 0.05);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.as-browser-frame::before {
	content: "";
	display: block;
	height: 36px;
	background:
		radial-gradient(circle at 18px 50%, #ff5f57 5px, transparent 5.5px),
		radial-gradient(circle at 38px 50%, #febc2e 5px, transparent 5.5px),
		radial-gradient(circle at 58px 50%, #28c840 5px, transparent 5.5px),
		linear-gradient(180deg, #f4f6fa 0%, #eef1f6 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.as-browser-frame .wp-block-image {
	margin: 0;
}

.as-browser-frame .wp-block-image img {
	border-radius: 0;
	display: block;
}

/* -----------------------------------------------------------------------------
 * Feature cards — subtle lift on hover.
 * -------------------------------------------------------------------------- */

.wp-block-columns > .wp-block-column > .wp-block-group.has-surface-background-color {
	transition: transform 0.25s var(--as-ease), box-shadow 0.25s var(--as-ease), border-color 0.25s var(--as-ease);
}

.wp-block-columns > .wp-block-column > .wp-block-group.has-surface-background-color:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -22px rgba(11, 27, 43, 0.25);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent) !important;
}

/* -----------------------------------------------------------------------------
 * Contact CTA — scoped link styling so anchors inherit on the gradient.
 * -------------------------------------------------------------------------- */

#contact a {
	color: inherit;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	text-underline-offset: 0.25em;
}

#contact a:hover,
#contact a:focus-visible {
	text-decoration-color: currentColor;
}

#contact .as-contact-muted {
	opacity: 0.7;
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wp-element-button,
	.wp-block-button__link,
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}