/*
Theme Name:   Alan Carter Design
Theme URI:    https://alancarterdesign.com
Description:  Custom child theme of Ollie for the Alan Carter Design UX/product portfolio. Full design-system override, dark/light mode, filterable portfolio grid, and scroll animations.
Author:       Alan Carter
Author URI:   https://alancarterdesign.com
Template:     ollie
Version:      1.0.7
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  alancarterdesign
*/

/* Block theme styles are driven by theme.json + assets/css. Component styles
   for custom (non-block) markup live below — this file is enqueued site-wide. */

/* ---------- Sticky footer layout ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > main,
main.site-main {
	flex: 1 0 auto;
}

/* ---------- Header ---------- */
.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Dark / light toggle ---------- */
.acd-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.acd-theme-toggle:hover {
	background: var(--wp--preset--color--base-2);
	transform: translateY(-1px);
}
.acd-theme-toggle__moon { display: none; }
[data-theme="dark"] .acd-theme-toggle__sun { display: none; }
[data-theme="dark"] .acd-theme-toggle__moon { display: inline; }

/* ---------- Portfolio filter bar ---------- */
.acd-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.acd-filter__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}
.acd-filter__btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.acd-filter__btn.is-active {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------- Portfolio grid + cards ---------- */
.acd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	gap: var(--wp--preset--spacing--50);
}
.acd-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.acd-card[hidden] { display: none; }
.acd-card__media {
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--base-2);
}
.acd-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.acd-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--wp--preset--color--base-2), color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--base-2)));
}
.acd-card:hover .acd-card__img { transform: scale(1.04); }
.acd-card__body { padding-top: var(--wp--preset--spacing--30); }
.acd-card__cat {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.25rem;
}
.acd-card__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.acd-card:hover .acd-card__title { color: var(--wp--preset--color--accent); }
.acd-grid__empty {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-2);
}

/* Desktop (≥1440px): show the portfolio grid as 3 columns instead of 2.
   Tablet/mobile keep the auto-fill responsive behavior above. */
@media (min-width: 1440px) {
	.acd-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Thoughts pagination ---------- */
.acd-thoughts__pagination ul.page-numbers {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}
.acd-thoughts__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	font-size: 0.9rem;
}
.acd-thoughts__pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.acd-thoughts__pagination .page-numbers:hover:not(.current) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}


/* ---------- Contact form (CF7) ---------- */
.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}
.site-main .wpcf7-form input.wpcf7-form-control,
.site-main .wpcf7-form textarea.wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.9em;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7-form textarea {
	min-height: 160px;
	resize: vertical;
}
.wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--contrast-2);
	opacity: 1;
}
.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}
.wpcf7-submit {
	padding: 0.75em 1.6em;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--accent-hover);
}
.wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------- Contact form response boxes ---------- */
.wpcf7 form .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: 0.85em 1.15em;
	border-radius: 8px;
	border-width: 2px;
	border-style: solid;
	font-size: 0.95rem;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #0f7a45;
	background-color: color-mix(in srgb, #12874f 22%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #c0392b;
	background-color: color-mix(in srgb, #c0392b 18%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
}
.wpcf7-not-valid-tip {
	color: #e05a4b;
	font-size: 0.85rem;
}

/* ---------- Contact form autofill (Chrome/Safari) ----------
   Chrome/WebKit force their own background + text color on autofilled
   fields, ignoring background-color. Paint over it with an inset shadow
   and set the text via -webkit-text-fill-color so it follows the theme. */
.site-main .wpcf7-form input.wpcf7-form-control:-webkit-autofill,
.site-main .wpcf7-form input.wpcf7-form-control:-webkit-autofill:hover,
.site-main .wpcf7-form input.wpcf7-form-control:-webkit-autofill:focus,
.site-main .wpcf7-form input.wpcf7-form-control:-webkit-autofill:active,
.site-main .wpcf7-form textarea.wpcf7-form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
	-webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--base) inset;
	box-shadow: 0 0 0 1000px var(--wp--preset--color--base) inset;
	transition: background-color 9999s ease-in-out 0s;
}