/*
	custom.css
	Site-specific additions on top of main.css (Done-IT).
	Kept separate from the compiled template output so it survives re-generation
	and can be copied as a starting point for sibling Done-IT projects.
*/

/* Self-hosted font (replaces the Google Fonts @import that was removed from
   main.css) so no request to Google's servers happens before cookie consent. */
	@font-face {
		font-family: 'Source Sans Pro';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url('../webfonts/source-sans-pro/source-sans-pro-300-latin.woff2') format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'Source Sans Pro';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url('../webfonts/source-sans-pro/source-sans-pro-300-latin-ext.woff2') format('woff2');
		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	@font-face {
		font-family: 'Source Sans Pro';
		font-style: normal;
		font-weight: 900;
		font-display: swap;
		src: url('../webfonts/source-sans-pro/source-sans-pro-900-latin.woff2') format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'Source Sans Pro';
		font-style: normal;
		font-weight: 900;
		font-display: swap;
		src: url('../webfonts/source-sans-pro/source-sans-pro-900-latin-ext.woff2') format('woff2');
		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

/* Visually-hidden but screen-reader-accessible text.
   Used instead of display:none so icon-only links keep an accessible name. */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.icon > .label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
		display: inline-block !important;
	}

/* Focus visibility (main.css/util removes outlines in places) */
	a:focus-visible,
	button:focus-visible,
	.button:focus-visible {
		outline: 2px solid #9ac8e9;
		outline-offset: 2px;
	}

/* Lead paragraph used for the hero tagline / contact intro */
	p.lead {
		font-weight: 600;
		font-size: 1.15em;
		margin-bottom: 0.75em;
	}

	.reviews-link a {
		font-weight: 600;
	}

/* Mobile navigation toggle (hamburger) ------------------------------------ */

	.nav-toggle {
		display: none;
		position: absolute;
		right: 0.5em;
		top: 0;
		width: 2.5em;
		height: 2.5em;
		margin-top: 0.25em;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.nav-toggle-bar {
		display: block;
		position: absolute;
		left: 0.5em;
		right: 0.5em;
		height: 2px;
		background: #39454b;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.nav-toggle-bar:nth-child(2) { top: 0.7em; }
	.nav-toggle-bar:nth-child(3) { top: 1.15em; }
	.nav-toggle-bar:nth-child(4) { top: 1.6em; }

	.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
		transform: translateY(0.45em) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
		opacity: 0;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) {
		transform: translateY(-0.45em) rotate(-45deg);
	}

	@media screen and (max-width: 736px) {

		.nav-toggle {
			display: block;
		}

		#header nav {
			/* main.css hides #header nav entirely at this breakpoint; restore it
			   so the hamburger toggle (now living inside nav) stays reachable */
			display: block;
			right: 0;
		}

		#header nav ul#navList {
			display: none;
			position: absolute;
			top: 2.5em;
			right: 0;
			left: 0;
			margin: 0;
			padding: 0.5em 0;
			background: #ffffff;
			box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.15);
		}

		#header nav ul#navList.is-open {
			display: block;
		}

		#header nav ul#navList li {
			display: block;
			margin: 0;
		}

		#header nav ul#navList li a {
			display: block;
			height: auto;
			line-height: 2.5em;
			padding: 0 1.25em;
			text-align: left;
		}

	}

/* Gallery hover / focus zoom ------------------------------------------------ */

	.gallery article a.image img {
		transition: transform 0.4s ease;
	}

	.gallery article a.image {
		display: block;
		overflow: hidden;
	}

	.gallery article a.image:hover img,
	.gallery article a.image:focus img {
		transform: scale(1.06);
	}

/* Button micro-interaction */
	.button {
		transition: background-color 0.2s ease-in-out, transform 0.15s ease;
	}

	.button:hover {
		transform: translateY(-1px);
	}

	.button:active {
		transform: translateY(0);
	}

/* Footer: Done-IT credit gets a slow, ambient pulse on mobile only, so it keeps
   a little sustained attention without being an aggressive blinking element. */
	@media screen and (max-width: 736px) {

		.done-it-credit {
			display: inline-block;
			border-radius: 0.25em;
			animation: done-it-pulse 2.6s ease-in-out infinite;
		}

		@keyframes done-it-pulse {
			0%, 100% { text-shadow: 0 0 0 rgba(154,200,233,0); }
			50% { text-shadow: 0 0 0.5em rgba(154,200,233,0.9); }
		}

	}

/* Respect reduced-motion preferences everywhere ---------------------------- */
	@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;
		}

		.gallery article a.image:hover img,
		.gallery article a.image:focus img {
			transform: none;
		}

		.button:hover {
			transform: none;
		}

		.done-it-credit {
			animation: none !important;
			text-decoration: underline;
			font-weight: 900;
		}

	}