/*
Theme Name: Ask Pete
Theme URI: https://askpete.uk
Author: Peter Dingle
Description: A friendly, accessible block theme for Ask Pete, home tech help across Norfolk. Every section of the home page is a block pattern you can edit in the Site Editor, with a built in contact form that emails you and keeps a copy of every enquiry.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
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: ask-pete
*/

/* ---------- Base ---------- */
:root {
	--ap-navy: var(--wp--preset--color--navy);
	--ap-navy-deep: var(--wp--preset--color--navy-deep);
	--ap-navy-soft: var(--wp--preset--color--navy-soft);
	--ap-orange: var(--wp--preset--color--orange);
	--ap-orange-light: var(--wp--preset--color--orange-light);
	--ap-orange-tint: var(--wp--preset--color--orange-tint);
	--ap-orange-dark: var(--wp--preset--color--orange-dark);
	--ap-ink: var(--wp--preset--color--ink);
	--ap-muted: var(--wp--preset--color--muted);
	--ap-mist: var(--wp--preset--color--mist);
	--ap-sky: var(--wp--preset--color--sky);
	--ap-cloud: var(--wp--preset--color--cloud);
	--ap-line: var(--wp--preset--color--line);
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block-start: 0; }
.ap-main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 3px solid var(--ap-orange);
	outline-offset: 3px;
}

/* ---------- Sections ---------- */
.ap-section { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 781px) { .ap-section { padding-top: 56px; padding-bottom: 56px; } }
.ap-white { background: #fff; }
.ap-sky { background: var(--ap-sky); }
.ap-cloud { background: var(--ap-cloud); }
.ap-navy { background: var(--ap-navy); color: #fff; }
.ap-navy :where(h1, h2, h3) { color: #fff; }
.ap-navy a:where(:not(.wp-element-button)) { color: var(--ap-orange-light); }

.ap-section h2 { margin-top: 0; }
.ap-lead { font-size: 1.25rem; color: var(--ap-muted); max-width: 680px; }
.ap-navy .ap-lead { color: var(--ap-mist); }
.ap-intro { margin-bottom: 40px !important; }
.ap-intro > * { max-width: 680px; }
.ap-intro > * + * { margin-top: 12px !important; }
.ap-section > h2 + .ap-grid { margin-top: 40px !important; }

.ap-badge {
	width: fit-content;
	margin-bottom: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--ap-navy-soft);
	color: var(--ap-orange-light);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.ap-badge-white { background: #fff; color: var(--ap-navy); }
.ap-badge-orange { background: var(--ap-orange-tint); color: var(--ap-orange-dark); }

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--ap-ink);
	padding: 14px 26px;
}
.ap-navy .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; }
.ap-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.wp-block-button.is-style-navy > .wp-block-button__link { background: var(--ap-navy); color: #fff; }
.wp-block-button.is-style-navy > .wp-block-button__link:hover { background: var(--ap-navy-deep); }
.wp-block-button.is-style-white > .wp-block-button__link { background: #fff; color: var(--ap-ink); }
.wp-block-button.is-style-white > .wp-block-button__link:hover { background: var(--ap-orange-tint); color: var(--ap-ink); }

/* ---------- Tick lists ---------- */
.ap-trust, .ap-ticks { list-style: none; padding-left: 0; }
.ap-trust li, .ap-ticks li { position: relative; padding-left: 30px; }
.ap-trust li::before, .ap-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 20px;
	height: 20px;
	background: url("assets/icons/tick.svg") center / 20px no-repeat;
}
.ap-trust { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 1.0625rem; color: var(--ap-mist); margin-top: 28px !important; }
.ap-trust li::before { background-image: url("assets/icons/tick-light.svg"); }
.ap-ticks { display: flex; flex-direction: column; gap: 10px; font-size: 1.0625rem; color: var(--ap-muted); margin: 18px 0 0; }

/* ---------- Hero ---------- */
.ap-hero { padding-top: 80px; }
.wp-block-columns.ap-hero-cols { align-items: center !important; gap: 56px; }
.ap-hero-cols > .wp-block-column:first-child > * + * { margin-top: 24px; }
.ap-hero .ap-lead { font-size: 1.375rem; max-width: 560px; }
.ap-hero .wp-block-buttons { margin-top: 32px; gap: 14px; }
.ap-hero-image { margin: 0; }
.ap-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(0, 0, 0, .3);
}

/* ---------- Cards ---------- */
.ap-grid { gap: 20px; }
.ap-card { background: var(--ap-cloud); border-radius: 20px; padding: 26px; }
.ap-card > * { margin: 0; }
.ap-card > * + * { margin-top: 12px !important; }
.ap-card h3 { font-size: 1.375rem; }
.ap-card p { font-size: 1.0625rem; color: var(--ap-muted); }
.ap-grid-white .ap-card { background: #fff; }
.ap-icon {
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 14px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ap-icon img { width: 28px !important; height: 28px !important; }
.ap-icon .components-resizable-box__container { width: auto !important; height: auto !important; }
.ap-grid-white .ap-icon { background: var(--ap-cloud); }
.ap-card-dark { background: var(--ap-navy-soft); padding: 24px; }
.ap-card-dark .ap-icon { width: auto; height: auto; background: none; justify-content: flex-start; }
.ap-card-dark .ap-icon img { width: 26px; height: 26px; }
.ap-card-dark h3 { font-size: 1.25rem; }
.ap-card-dark p { color: var(--ap-mist); font-size: 1rem; }

/* ---------- Websites and AI ---------- */
.wp-block-columns.ap-split { align-items: flex-end !important; gap: 24px 48px; margin-bottom: 36px; }
.ap-split > .wp-block-column:first-child { flex-grow: 2; }
.ap-split > .wp-block-column:first-child > * + * { margin-top: 12px; }
.ap-buttons-end { justify-content: flex-end; }
@media (max-width: 781px) { .ap-buttons-end { justify-content: flex-start; } }
.wp-block-columns.ap-ai-cols { align-items: center !important; gap: 40px 56px; }
.ap-ai-cols > .wp-block-column:first-child > * + * { margin-top: 16px; }
.ap-ai-cols .wp-block-buttons { margin-top: 24px; }

/* ---------- How it works ---------- */
.ap-step > * { margin: 0; }
.ap-step > * + * { margin-top: 14px !important; }
.ap-step h3 { font-size: 1.625rem; }
.ap-step p { font-size: 1.125rem; color: var(--ap-muted); }
.ap-step .ap-step-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ap-navy);
	color: #fff;
	font-size: 1.625rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- About ---------- */
.wp-block-columns.ap-about-cols { gap: 56px; align-items: flex-start !important; }
@media (min-width: 782px) {
	.ap-about-cols > .wp-block-column:first-child { flex: 0 1 320px; }
	.ap-about-cols > .wp-block-column:last-child { flex: 1 1 520px; }
}
.ap-about-cols p { color: var(--ap-muted); }
.ap-stat { background: #fff; border-radius: 28px; padding: 36px; }
.ap-stat > * { margin: 0 !important; }
.ap-stat .ap-stat-label { font-size: 1.0625rem; font-weight: 600; color: var(--ap-navy); }
.ap-stat .ap-stat-number { font-size: 4.5rem; font-weight: 800; line-height: 1.05; color: var(--ap-ink); }
.ap-stat .ap-stat-note { font-size: 1.0625rem; margin-top: 6px !important; }
.ap-small-heading { font-size: 1.25rem !important; margin-top: 28px; }
.ap-chips { gap: 10px; margin-top: 14px; }
.ap-chips .ap-chip {
	margin: 0;
	padding: 9px 18px;
	border: 1px solid #D5DCE6;
	border-radius: 999px;
	background: #fff;
	color: var(--ap-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Prices ---------- */
.ap-price-card { background: #fff; color: var(--ap-ink); border-radius: 22px; padding: 32px; }
.ap-price-card > * { margin: 0; }
.ap-navy .ap-price-card h3 { color: var(--ap-ink); font-size: 1.5rem; }
.ap-price-card .ap-price { margin-top: 14px; font-size: 2.75rem; font-weight: 800; line-height: 1; }
.ap-price-card .ap-price-unit { margin-top: 4px; font-size: 1.125rem; font-weight: 500; color: #4A5568; }

/* ---------- FAQ ---------- */
.ap-narrow > h2 { margin-bottom: 28px; }
.ap-faq-list > * { margin: 0 !important; }
.ap-faq-list .wp-block-details { border-top: 1px solid var(--ap-line); padding: 24px 0; }
.ap-faq-list .wp-block-details:last-child { border-bottom: 1px solid var(--ap-line); }
.ap-faq-list summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding-right: 44px;
	font-size: 1.4375rem;
	font-weight: 700;
	line-height: 1.3;
}
.ap-faq-list summary::-webkit-details-marker { display: none; }
.ap-faq-list summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: -2px;
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--ap-orange);
}
.ap-faq-list details[open] summary::after { content: "\2212"; }
.ap-faq-list details p { margin-top: 10px; font-size: 1.125rem; color: var(--ap-muted); }

/* ---------- Contact ---------- */
.wp-block-columns.ap-contact-cols { gap: 48px; }
@media (min-width: 782px) {
	.ap-contact-cols > .wp-block-column:first-child { flex: 1 1 360px; }
	.ap-contact-cols > .wp-block-column:last-child { flex: 1 1 520px; }
}
.ap-contact-cols > .wp-block-column:first-child > * + * { margin-top: 20px; }
.ap-contact {
	padding-left: 36px;
	background: no-repeat left 2px / 24px;
	font-weight: 700;
	margin-top: 14px !important;
}
.ap-contact-mail { background-image: url("assets/icons/mail.svg"); margin-top: 28px !important; }
.ap-contact-call { background-image: url("assets/icons/call.svg"); }
.ap-contact-pin { background-image: url("assets/icons/pin.svg"); }
.ap-contact a { color: var(--ap-ink); text-decoration: none; }
.ap-contact a:hover { text-decoration: underline; }
.ap-note { font-size: 1.0625rem; color: #4A5568; margin-top: 28px !important; }

.ap-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 36px;
	border: 1px solid var(--ap-line);
	border-radius: 24px;
	background: var(--ap-cloud);
}
@media (max-width: 600px) { .ap-form { padding: 24px 20px; } }
.ap-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ap-field { display: flex; flex-direction: column; gap: 8px; }
.ap-field label, .ap-form legend { font-size: 1.0625rem; font-weight: 700; }
.ap-field input, .ap-field textarea {
	font: inherit;
	font-size: 1.125rem;
	padding: 12px 14px;
	min-height: 52px;
	box-sizing: border-box;
	border: 2px solid #C6CFDB;
	border-radius: 12px;
	background: #fff;
	color: var(--ap-ink);
	width: 100%;
}
.ap-field textarea { resize: vertical; min-height: 140px; }
.ap-field input:focus, .ap-field textarea:focus { border-color: var(--ap-navy); }
.ap-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.ap-form legend { padding: 0 0 10px; }
.ap-radio { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; min-height: 44px; cursor: pointer; }
.ap-radio input { width: 22px; height: 22px; accent-color: var(--ap-navy); margin: 0; }
.ap-form button {
	align-self: flex-start;
	font: inherit;
	font-size: 1.1875rem;
	font-weight: 700;
	min-height: 52px;
	padding: 16px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--ap-navy);
	color: #fff;
	cursor: pointer;
}
.ap-form button:hover { background: var(--ap-navy-deep); }
.ap-form-small { margin: 0; font-size: .9375rem; color: #4A5568; }
.ap-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ap-form-notice { margin-bottom: 20px; padding: 18px 22px; border-radius: 16px; font-size: 1.0625rem; }
.ap-form-success { background: #E6F4EA; color: #14532D; border: 1px solid #A7D7B5; }
.ap-form-error { background: var(--ap-orange-tint); color: #7A2E05; border: 1px solid #F3C4A3; }

/* ---------- Header ---------- */
.ap-header { background: #fff; border-bottom: 1px solid var(--ap-line); padding-top: 14px; padding-bottom: 14px; }
.ap-header-inner { gap: 16px; }
.ap-logo { margin: 0; }
.ap-logo img { display: block; height: 56px !important; width: auto !important; max-width: none; }
.ap-logo .components-resizable-box__container { width: auto !important; height: auto !important; }
@media (max-width: 600px) {
	.ap-logo img { height: 40px; }
	.ap-header-inner, .ap-header-right { flex-wrap: nowrap !important; }
	.ap-header-right { gap: 12px; }
	.ap-header-cta .wp-block-button__link { padding: 10px 18px; min-height: 44px; font-size: 1.0625rem; }
}
.ap-header-right { gap: 8px 28px; }
.ap-nav { font-size: 1.125rem; gap: 8px 28px; }
.ap-nav a { color: var(--ap-ink); text-decoration: none; }
.ap-nav a:hover { color: var(--ap-orange-dark); text-decoration: underline; }
.ap-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 32px 24px; }
.ap-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 1.375rem; }
.ap-header-cta .wp-block-button__link { padding: 12px 22px; min-height: 48px; white-space: nowrap; }

/* ---------- Footer ---------- */
.ap-footer { background: var(--ap-navy); color: var(--ap-mist); padding-top: 48px; padding-bottom: 48px; font-size: 1rem; }
.wp-block-columns.ap-footer-cols { align-items: center !important; gap: 24px; }
.ap-footer p { margin: 0; }
.ap-footer p + p { margin-top: 4px; }
.ap-footer .ap-footer-name { font-size: 1.375rem; font-weight: 800; color: #fff; }
.ap-footer a { color: var(--ap-orange-light); font-weight: 700; }
.ap-footer a:hover { color: #fff; }
@media (min-width: 782px) { .ap-footer-aside { text-align: right; } }

/* ---------- Plain pages ---------- */
.ap-page h1 { font-size: clamp(2.25rem, 4vw, 3rem); }