/**
 * Moonlight Interactive overrides.
 *
 * The original moonlightmultimedia SCSS source could not be recovered (only
 * the already-compiled style.css/style.min.css exist) - see CLAUDE.md. New
 * rules for this rebrand go here as plain, hand-written CSS instead of
 * risking a blind edit of the minified base file.
 */

/* Safety net against horizontal scroll on mobile: grid/flex children
   default to min-width:auto (their content's min-content size), so a
   card whose content can't shrink below the track width pushes the grid
   wider than the viewport instead of wrapping. overflow-x on html/body is
   a second line of defence for anything else that slips past this. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

.featured__services__steps__step,
.featured__workstyle__steps__step {
	min-width: 0;
}

/* Header/footer logo: no SVG logo yet, so header.php/footer.php render the
   site name as text inside the element the base stylesheet styled as a
   masked background-image logo. Override that masking so the text shows. */
.header__navigation__logo {
	display: flex;
	align-items: center;
	width: auto;
	height: 75px;
	mask-image: none;
	-webkit-mask-image: none;
	background-color: transparent !important;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

.sticky .header__navigation__logo,
body:not(.home) .header__navigation__logo {
	color: #000;
}

@media screen and (max-width: 979px) {
	.header__navigation__logo {
		height: 25px;
		font-size: 18px;
		color: #000;
	}
}

.footer__top__logo__image {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 55px;
	mask-image: none;
	-webkit-mask-image: none;
	background-color: transparent !important;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

/* Hero tech-stack badge list (replaces the removed brand-logo grid) */
.frame__content__tech-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.frame__content__tech-stack li {
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Social icons in the footer, now Font Awesome icons instead of missing
   image files. */
.socials {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.socials__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	color: #000;
	font-size: 16px;
}

/**
 * Design refresh - cards, section rhythm, hover polish.
 * Deliberately does NOT touch .frame/.frame__sky/.frame__asset/.night-sky
 * (the hero background/clouds/shuttle/star animation) - only the sections
 * below the hero.
 */

/* Alternate section backgrounds for visual rhythm, instead of every
   section sitting on the same flat white. */
.about-us,
.featured__services {
	background: #f6f9fc;
}

/* .featured-content (about-us's section wrapper) only ever gets a broken
   "margin-bottom:rhythm(1)" from the base stylesheet - an unresolved Sass
   function left in the compiled CSS, so it's invalid and ignored - and no
   top/bottom padding at all. .featured__services/.featured__workstyle get
   real "padding:80px 0" from that same stylesheet; match it here so
   about-us doesn't sit flush against the sections above/below it. */
.about-us {
	padding: 80px 0;
}

/* Service cards: give each step its own card instead of bare text
   floating in a grid cell. */
.featured__services__steps__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.featured__services__steps__step:hover,
.featured__services__steps__step.hovered {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.featured__services__steps__step__number {
	margin-bottom: 16px;
}

.featured__services__steps__step__number__icon {
	color: #00a2ff;
	font-size: 28px;
}

.featured__services__steps__step__text__title {
	margin-bottom: 8px;
}

.featured__services__steps__step__text__description {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6em;
}

/* Workstyle steps: same card treatment, quieter (no hover lift - these
   aren't links). */
.featured__workstyle__steps__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.featured__workstyle__steps__step__number__icon {
	color: #00a2ff;
	font-size: 28px;
}

.featured__workstyle__steps__step__text__title {
	margin-bottom: 8px;
}

.featured__workstyle__steps__step__text__description {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6em;
}

/* Section titles: a touch more breathing room under the refreshed cards. */
.featured__services__title,
.featured__workstyle__title,
.featured-content__title {
	margin-bottom: 48px;
}

/* Buttons: keep the existing pill shape/colours, add a soft hover lift to
   match the new card treatment. */
.button {
	box-shadow: 0 4px 14px rgba(0, 162, 255, 0.25);
	transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease, box-shadow .2s ease;
}

.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 162, 255, 0.32);
}

.button.white {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.button.white:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Hero tech-stack badges: subtle glass effect to sit better on the
   night-sky background. */
.frame__content__tech-stack li {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/**
 * Modernization pass 2: bigger type, glass nav, gradient accents, dark
 * footer. Still deliberately leaves .frame/.frame__sky/.frame__asset/
 * .night-sky alone (the hero background/clouds/shuttle/star animation).
 */

/* Hero copy: the base stylesheet's 35px title reads small/dated for a
   full-bleed hero. Go bigger and tighter, with room to breathe. */
.frame__content__title {
	font-size: 60px;
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.1em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.frame__content__description {
	max-width: 520px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* A soft fade at the base of the hero into the section below it, layered
   on top of (not replacing) the existing sky/clouds/star markup. */
.frame.main {
	position: relative;
}

.frame.main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 10, 20, 0.35) 100%);
	pointer-events: none;
}

/* Nav: glass instead of flat white, on both the scrolled/sticky state and
   the always-solid state used on non-home pages. */
.sticky,
body:not(.home) .header {
	background-color: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 30px rgba(15, 23, 42, 0.08);
}

body:not(.home) .header {
	border-bottom: none;
}

.header__navigation__nav__items > .menu-item.lets-talk {
	border-radius: 999px;
	overflow: hidden;
	transition: transform .2s ease;
}

.header__navigation__nav__items > .menu-item.lets-talk:hover {
	transform: translateY(-1px);
}

/* Buttons: flat single colour -> gradient with a livelier hover. */
.button {
	background: linear-gradient(135deg, #00a2ff 0%, #0074ff 100%);
}

.button:hover {
	transform: translateY(-2px) scale(1.02);
}

.button.white {
	background: #fff;
}

/* Section titles: bigger, bolder, with a small gradient accent bar - a
   clearer visual anchor than plain centred text. */
.featured__services__title,
.featured__workstyle__title,
.featured-content__title {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -0.5px;
}

.featured__services__title::before,
.featured__workstyle__title::before,
.featured-content__title::before {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin: 0 auto 22px;
	border-radius: 2px;
	background: linear-gradient(90deg, #00a2ff, #6dd5ff);
}

@media screen and (max-width: 979px) {
	.featured__services__title,
	.featured__workstyle__title,
	.featured-content__title {
		font-size: 28px;
	}
}

/* Service/workstyle icons: give each one a soft rounded container instead
   of a bare glyph floating above the text, and flip it to solid on hover. */
.featured__services__steps__step__number,
.featured__workstyle__steps__step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(0, 162, 255, 0.14), rgba(0, 162, 255, 0.04));
	transition: background .2s ease;
}

.featured__services__steps__step__number__icon,
.featured__workstyle__steps__step__number__icon {
	font-size: 22px;
}

.featured__services__steps__step:hover .featured__services__steps__step__number {
	background: linear-gradient(135deg, #00a2ff, #0074ff);
}

.featured__services__steps__step:hover .featured__services__steps__step__number__icon {
	color: #fff;
}

/* About us: read as a set editorial block instead of a loose centred
   paragraph - narrower measure, a left accent bar, larger type. */
.about-us__text {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
	padding-left: 28px;
	text-align: left;
}

.about-us__text::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, #00a2ff, #6dd5ff);
}

.about-us__text p {
	font-size: 19px;
	line-height: 1.7em;
	color: #1f2937;
}

@media screen and (max-width: 979px) {
	.about-us__text {
		padding-left: 20px;
	}

	.about-us__text p {
		font-size: 17px;
	}
}

/* The two full-width "eyecatch" CTA strips (eyecatch-innovation.php,
   eyecatch-contact.php) point at background images that were never part
   of this fork (frame_innovation.jpg/frame_contact.jpg don't exist) - the
   base stylesheet's .frame{background:#000} was showing through as a flat
   black box. Replace with a gradient that matches the rest of the palette
   instead of leaving a broken-looking void. */
.frame.innovation .frame__image,
.frame.contact .frame__image {
	background-image: none;
	opacity: 1;
	background: radial-gradient(circle at 20% 20%, rgba(0, 162, 255, 0.35), transparent 55%),
		linear-gradient(135deg, #050b16 0%, #0b1f3a 55%, #003a66 100%);
}

/* Contact ribbon: flat blue -> a touch of depth. */
.ribbon.contact {
	background: linear-gradient(135deg, #0074ff 0%, #00a2ff 55%, #22c1ff 100%);
}

/* Footer: plain white/bordered -> dark, to bookend the page with the same
   depth as the hero instead of ending on a flat, dated-looking strip. */
.footer {
	background: #0b1220;
	border-top: none;
	margin-top: 0;
	padding: 64px 0 32px;
}

.footer__top__logo__description {
	color: #93a0b4;
}

.footer__content__title {
	color: #fff;
	font-weight: 700;
	margin-bottom: 10px;
}

.footer__copyright {
	color: #64748b;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: 20px;
	padding-top: 20px !important;
}

.socials__item a {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background .2s ease, transform .2s ease;
}

.socials__item a:hover {
	background: #00a2ff;
	transform: translateY(-2px);
}

/* Mobile compactness: the modernization pass above used desktop-scale
   section/card padding everywhere, which on a phone just means more
   scrolling per section instead of a denser, easier-to-skim layout. */
@media screen and (max-width: 979px) {
	.about-us,
	.featured__services,
	.featured__workstyle {
		padding: 48px 0;
	}

	.featured__services__title,
	.featured__workstyle__title,
	.featured-content__title {
		margin-bottom: 28px;
	}

	.featured__services__title::before,
	.featured__workstyle__title::before,
	.featured-content__title::before {
		margin-bottom: 14px;
	}

	/* Base stylesheet's padding-top:5rem above the steps is never scaled
	   down at any breakpoint, leaving a large gap under the title on
	   mobile on top of the margin-bottom above. */
	.featured__services__steps,
	.featured__workstyle__steps {
		padding-top: 24px;
	}

	/* Base stylesheet keeps a 2-column grid all the way down to 380px -
	   with 10 service cards that's 5 cramped, wrapping-text rows instead
	   of a scannable single column. */
	.featured__services__steps {
		grid-template-columns: 1fr;
		grid-gap: 16px;
	}

	.featured__services__steps__step,
	.featured__workstyle__steps__step {
		padding: 22px 20px;
	}

	.featured__services__steps__step__number,
	.featured__workstyle__steps__step__number {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		margin-bottom: 12px;
	}

	.featured__services__steps__step__number__icon,
	.featured__workstyle__steps__step__number__icon {
		font-size: 18px;
	}

	.frame__content__title {
		font-size: 28px;
	}

	.frame__content__description {
		padding-top: 12px;
	}

	.frame.main::after {
		height: 90px;
	}

	.footer {
		padding: 40px 0 20px;
	}

	.footer__top {
		padding-bottom: 12px;
	}
}