/*
Theme Name: My IT Giant
Theme URI: https://myitgiant.com/
Author: My IT Giant
Description: Minimal black and phosphor-green block theme for My IT Giant, a managed service provider. Includes home, information (pricing and about) and contact pages, plus a built-in appointment request form.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-it-giant
*/

:root {
	color-scheme: dark;
	--mig-green: var(--wp--preset--color--phosphor, #4dff7a);
	--mig-muted: var(--wp--preset--color--phosphor-muted, #2bc255);
	--mig-dim: var(--wp--preset--color--phosphor-dim, #155c2a);
	--mig-wash: var(--wp--preset--color--phosphor-wash, #03140a);
	--mig-alert: #ffb000;
	--mig-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
}

::selection {
	background: var(--mig-green);
	color: #000;
}

:where(a, button, input, select, textarea, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--mig-green);
	outline-offset: 3px;
}

.mig-muted,
.mig-muted a {
	color: var(--mig-muted);
}

/* Header ----------------------------------------------------------------- */

.mig-header {
	border-bottom: 1px solid var(--mig-dim);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.mig-brand {
	gap: 0.75rem;
}

.mig-brand .wp-block-site-logo img {
	display: block;
}

.mig-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.35rem 0;
}

.mig-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.mig-nav .mig-nav-cta > .wp-block-navigation-item__content {
	border: 2px solid var(--mig-green);
	border-radius: 3px;
	padding: 0.45rem 0.9rem;
}

.mig-nav .mig-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--mig-green);
	color: #000;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: #000 !important;
	color: var(--mig-green) !important;
	padding: 1.25rem;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.375rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.5rem;
	font-size: 1.375rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--mig-green);
	padding: 0.5rem;
	margin: -0.5rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

/* Layout ----------------------------------------------------------------- */

.mig-main {
	padding-bottom: var(--wp--preset--spacing--60);
}

.mig-main > .wp-block-post-content > * + * {
	margin-block-start: 0;
}

.mig-page-title {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--mig-muted);
}

.mig-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--mig-dim);
}

.mig-section--first {
	border-top: 0;
}

.mig-split {
	gap: var(--wp--preset--spacing--50);
}

.mig-split h2 {
	margin-top: 0;
}

/* Hero: the one loud moment on the site ----------------------------------- */

.mig-hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.mig-prompt {
	font-family: var(--mig-mono);
	font-size: 0.95rem;
	color: var(--mig-muted);
	margin: 0;
}

.mig-prompt::before {
	content: "> ";
	color: var(--mig-green);
}

.mig-hero__title {
	max-width: 15ch;
	margin-top: 1rem;
	text-shadow: 0 0 22px rgba(77, 255, 122, 0.35);
}

.mig-hero__title::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.9em;
	margin-left: 0.15em;
	vertical-align: -0.08em;
	background: var(--mig-green);
	box-shadow: 0 0 16px rgba(77, 255, 122, 0.5);
	animation: mig-blink 1.1s steps(1, end) infinite;
}

@keyframes mig-blink {
	50% { opacity: 0; }
}

.mig-hero__lede {
	max-width: 36em;
	line-height: 1.55;
}

.mig-actions {
	margin-top: 2rem;
	gap: 0.75rem;
}

.mig-hero__art {
	text-align: center;
}

.mig-hero__logo img {
	width: min(100%, 360px);
	height: auto;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.mig-hero__title::after { animation: none; }
}

/* Buttons ---------------------------------------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--mig-green);
	border: 2px solid var(--mig-green);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--mig-green);
	color: #000;
}

.wp-block-button__link {
	text-decoration: none;
}

/* Services and steps ----------------------------------------------------- */

.mig-service {
	border-top: 1px solid var(--mig-dim);
	padding-top: 1.25rem;
	padding-bottom: 0.5rem;
}

.mig-service:first-child {
	border-top: 0;
	padding-top: 0;
}

.mig-service h3 {
	margin: 0 0 0.5rem;
}

.mig-service p {
	margin: 0;
	max-width: 62ch;
}

.mig-steps {
	list-style: none;
	counter-reset: mig-step;
	padding: 0;
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.mig-steps li {
	counter-increment: mig-step;
	position: relative;
	padding-top: 3.25rem;
}

.mig-steps li::before {
	content: counter(mig-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	font-family: var(--mig-mono);
	font-weight: 600;
	border: 2px solid var(--mig-green);
	border-radius: 3px;
}

.mig-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.125rem;
	left: 3rem;
	right: -0.75rem;
	border-top: 1px dashed var(--mig-dim);
}

.mig-steps strong {
	display: block;
	font-family: var(--mig-mono);
	margin-bottom: 0.35rem;
}

@media (max-width: 900px) {
	.mig-steps {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.mig-steps li {
		padding-top: 0;
		padding-left: 3.25rem;
	}

	.mig-steps li:not(:last-child)::after {
		top: 2.75rem;
		left: 1.125rem;
		right: auto;
		bottom: -1rem;
		border-top: 0;
		border-left: 1px dashed var(--mig-dim);
	}
}

.mig-cta {
	background: var(--mig-wash);
	border: 1px solid var(--mig-dim);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.mig-cta h2 {
	margin-top: 0;
}

/* Information page ------------------------------------------------------- */

.mig-facts {
	list-style: none;
	padding: 0;
	margin-top: 1.5rem;
}

.mig-facts li {
	padding: 0.6rem 0 0.6rem 1.5rem;
	border-top: 1px solid var(--mig-dim);
	position: relative;
}

.mig-facts li::before {
	content: "+";
	position: absolute;
	left: 0;
	font-family: var(--mig-mono);
}

.mig-edit-note {
	font-family: var(--mig-mono);
	font-size: 0.9rem;
	color: var(--mig-alert);
	border: 1px dashed var(--mig-alert);
	border-radius: 3px;
	padding: 0.6rem 0.9rem;
	display: inline-block;
}

.mig-plans {
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.mig-plan {
	border: 1px solid var(--mig-dim);
	border-radius: 4px;
	padding: 1.5rem;
}

.mig-plan--featured {
	border: 2px solid var(--mig-green);
	background: var(--mig-wash);
}

.mig-plan h3 {
	margin-top: 0;
}

.mig-price {
	font-family: var(--mig-mono);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0.75rem 0 0.25rem;
}

.mig-price span {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--mig-muted);
}

.mig-plan ul {
	padding-left: 1.1rem;
	margin-bottom: 0;
}

.mig-plan li + li {
	margin-top: 0.35rem;
}

.mig-faq {
	border-bottom: 1px solid var(--mig-dim);
	padding: 0.9rem 0;
}

.mig-faq:first-child {
	padding-top: 0;
}

.mig-faq summary {
	font-family: var(--mig-mono);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.mig-faq summary::-webkit-details-marker {
	display: none;
}

.mig-faq summary::after {
	content: "+";
	flex: none;
}

.mig-faq[open] summary::after {
	content: "\2212";
}

.mig-faq p {
	margin: 0.75rem 0 0;
	max-width: 62ch;
}

/* Contact and booking form ----------------------------------------------- */

.mig-contact {
	gap: var(--wp--preset--spacing--50);
}

.mig-contact h2 {
	margin-top: 0;
}

.mig-contact__aside {
	border-left: 1px solid var(--mig-dim);
	padding-left: var(--wp--preset--spacing--50);
}

.mig-contact__aside h3 {
	font-size: 1rem;
	color: var(--mig-muted);
	margin-bottom: 0.25rem;
}

.mig-contact__aside h3:first-child {
	margin-top: 0;
}

.mig-phone {
	font-family: var(--mig-mono);
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0;
}

.mig-phone a {
	text-decoration: none;
}

@media (max-width: 781px) {
	.mig-contact__aside {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--mig-dim);
		padding-top: var(--wp--preset--spacing--40);
	}

	.mig-hero__art {
		display: none;
	}
}

.mig-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
	margin-top: 1.5rem;
}

.mig-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.mig-field--full {
	grid-column: 1 / -1;
}

.mig-field label,
.mig-field legend {
	font-family: var(--mig-mono);
	font-size: 0.9rem;
	font-weight: 600;
}

.mig-field .mig-optional {
	font-weight: 400;
	color: var(--mig-muted);
}

.mig-form input[type="text"],
.mig-form input[type="email"],
.mig-form input[type="tel"],
.mig-form input[type="date"],
.mig-form select,
.mig-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #000;
	color: var(--mig-green);
	border: 1px solid var(--mig-muted);
	border-radius: 3px;
	padding: 0.7rem 0.8rem;
	font: inherit;
	min-height: 2.9rem;
}

.mig-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.mig-form ::placeholder {
	color: var(--mig-muted);
	opacity: 1;
}

.mig-form :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--mig-alert);
}

.mig-form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.mig-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding-top: 0.25rem;
}

.mig-radios label {
	font-family: inherit;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.mig-radios input {
	accent-color: var(--mig-green);
	width: 1.1rem;
	height: 1.1rem;
}

.mig-field-error {
	color: var(--mig-alert);
	font-size: 0.9rem;
	margin: 0;
}

.mig-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mig-form button[type="submit"] {
	justify-self: start;
	cursor: pointer;
	background: var(--mig-green);
	color: #000;
	border: 2px solid var(--mig-green);
	border-radius: 3px;
	padding: 0.8rem 1.4rem;
	font-family: var(--mig-mono);
	font-weight: 600;
	font-size: 1rem;
}

.mig-form button[type="submit"]:hover {
	background: #000;
	color: var(--mig-green);
}

.mig-notice {
	border: 1px solid var(--mig-green);
	background: var(--mig-wash);
	border-radius: 3px;
	padding: 1rem 1.1rem;
	margin-top: 1.5rem;
}

.mig-notice--error {
	border-color: var(--mig-alert);
	color: var(--mig-alert);
}

.mig-notice strong {
	font-family: var(--mig-mono);
	display: block;
}

@media (max-width: 600px) {
	.mig-form {
		grid-template-columns: 1fr;
	}

	.mig-form button[type="submit"] {
		justify-self: stretch;
	}

	.mig-actions .wp-block-button {
		width: 100%;
	}

	.mig-actions .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Footer ----------------------------------------------------------------- */

.mig-footer {
	border-top: 1px solid var(--mig-dim);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.mig-footer__heading {
	font-size: 0.95rem;
	color: var(--mig-muted);
	margin: 0 0 0.5rem;
}

.mig-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mig-footer__links li + li {
	margin-top: 0.35rem;
}

.mig-footer__legal {
	margin-top: var(--wp--preset--spacing--40);
}