/*
Theme Name:   ADT Solutions
Theme URI:    https://adt-solutions.com/
Description:  Child theme of GeneratePress for ADT Solutions & Services. Design tokens, header and footer, and block patterns.
Author:       ADT Solutions & Services Pty Ltd
Template:     generatepress
Version:      0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain:  adt
*/

/* ---------- Tokens (design §2–§4) ---------- */
:root {
	--adt-ink: #1E2A36;
	--adt-muted: #4A5563;
	--adt-primary: #336699;
	--adt-primary-dark: #24496F;
	--adt-navy: #1B3550;
	--adt-surface: #FFFFFF;
	--adt-surface-alt: #F4F7FA;
	--adt-border: #D9E1E8;
	--adt-field: #6B7C8F;
	--adt-on-dark-muted: #C9D3DD;
	--adt-teal: #00BAB4;
	--adt-sky: #1BC3F0;
	--adt-orange: #FAA328;
	--adt-yellow: #FFCB14;
	--adt-red: #EF3F38;
	--adt-purple: #B469AA;
	--adt-lime: #BAD54A;
	--adt-wide: 1200px;
	--adt-content: 760px;
	--adt-gutter: 20px;
	--adt-section: 64px;
	--adt-radius: 10px;
	--adt-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--adt-font-head: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 1024px) {
	:root { --adt-gutter: 32px; --adt-section: 96px; }
}

/* ---------- Base ---------- */
body {
	background: var(--adt-surface);
	color: var(--adt-ink);
	font-family: var(--adt-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}
h1, h2, h3, h4 {
	font-family: var(--adt-font-head);
	color: var(--adt-ink);
	line-height: 1.2;
	margin-bottom: .5em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.35rem); font-weight: 600; }
a { color: var(--adt-primary); }
a:hover, a:focus { color: var(--adt-primary-dark); }
:focus-visible { outline: 2px solid var(--adt-navy); outline-offset: 3px; }
mark.adt-todo { background: #FFF4CC; color: var(--adt-ink); font-size: .85em; padding: 1px 6px; border-radius: 4px; }

/* Full-width page content: sections manage their own width. */
.adt-page .inside-article,
.adt-page .site-main,
.adt-page .entry-content { margin: 0; padding: 0; }
.adt-page .entry-content > * { margin-top: 0; margin-bottom: 0; }

/* ---------- Buttons (core Button block) ----------
 * Selectors outrank GeneratePress's a.wp-block-button__link:not(.has-background).
 */
.wp-block-buttons { gap: 12px; }
.wp-block-button a.wp-block-button__link:not(.has-background),
a.adt-btn {
	display: inline-block;
	padding: 14px 22px;
	border-radius: var(--adt-radius);
	border: 2px solid var(--adt-primary);
	background: var(--adt-primary);
	color: #fff;
	font: 600 1rem/1.2 var(--adt-font-body);
	text-decoration: none;
}
.wp-block-button a.wp-block-button__link:not(.has-background):hover,
.wp-block-button a.wp-block-button__link:not(.has-background):focus,
a.adt-btn:hover, a.adt-btn:focus { background: var(--adt-primary-dark); border-color: var(--adt-primary-dark); color: #fff; }
.wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background) { background: #fff; color: var(--adt-primary); }
.wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover { background: var(--adt-surface-alt); color: var(--adt-primary-dark); }
.wp-block-button.adt-btn-accent a.wp-block-button__link:not(.has-background) { background: var(--adt-orange); border-color: var(--adt-orange); color: var(--adt-ink); }
.wp-block-button.adt-btn-accent a.wp-block-button__link:not(.has-background):hover { background: var(--adt-yellow); border-color: var(--adt-yellow); color: var(--adt-ink); }

/* ---------- Header extras (functions.php: generate_menu_bar_items) ---------- */
.adt-header-phone { font-weight: 600; text-decoration: none; white-space: nowrap; margin: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.adt-header-cta { padding: 10px 16px; }
.adt-header-phone svg { width: 20px; height: 20px; stroke: currentColor; }
@media (max-width: 1023px) {
	.adt-header-phone span, a.adt-btn.adt-header-cta { display: none; }
	.adt-header-phone { margin: 0 4px; padding: 10px; border: 2px solid var(--adt-primary); border-radius: var(--adt-radius); }
}

/*
 * GeneratePress is a classic theme, so WordPress wraps each Group's children in
 * .wp-block-group__inner-container. Let grid/flex groups see their real children.
 */
.adt-tiles > .wp-block-group__inner-container,
.adt-reasons > .wp-block-group__inner-container,
.adt-steps > .wp-block-group__inner-container,
.adt-cards > .wp-block-group__inner-container,
.adt-split > .wp-block-group__inner-container,
.adt-hero-art > .wp-block-group__inner-container,
.adt-icon > .wp-block-group__inner-container { display: contents; }

/* GeneratePress pads every inner container (.site-main .wp-block-group__inner-container); our sections set their own spacing. */
.adt-page .site-main [class*="adt-"] > .wp-block-group__inner-container { padding: 0; }

/* ---------- Sections ---------- */
.adt-section { padding: var(--adt-section) 0; }
.adt-section.is-alt { background: var(--adt-surface-alt); }
.adt-wrap { max-width: var(--adt-wide); margin: 0 auto; padding: 0 var(--adt-gutter); }
.adt-narrow { max-width: var(--adt-content); margin-left: auto; margin-right: auto; }
.adt-center { text-align: center; }
.adt-lead { font-size: 1.2rem; color: var(--adt-muted); }

/* Accent per service (design §2) */
.adt-accent--teal { --c: var(--adt-teal); }
.adt-accent--red { --c: var(--adt-red); }
.adt-accent--orange { --c: var(--adt-orange); }
.adt-accent--sky { --c: var(--adt-sky); }
.adt-accent--purple { --c: var(--adt-purple); }
.adt-accent--yellow { --c: var(--adt-yellow); --c-icon: var(--adt-ink); }
.adt-accent--primary { --c: var(--adt-primary); }

/* Icons: CSS masks over the SVGs in assets/icons (decorative). */
.adt-icon {
	width: 48px; height: 48px; border-radius: 12px;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--c, var(--adt-primary)) 16%, white);
	margin-bottom: 16px;
}
.adt-icon::before {
	content: ""; width: 26px; height: 26px;
	background: var(--c-icon, var(--c, var(--adt-primary)));
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.adt-icon--headset { --i: url(assets/icons/headset.svg); }
.adt-icon--shield { --i: url(assets/icons/shield-check.svg); }
.adt-icon--database { --i: url(assets/icons/database.svg); }
.adt-icon--network { --i: url(assets/icons/network.svg); }
.adt-icon--monitor { --i: url(assets/icons/monitor.svg); }
.adt-icon--sparkles { --i: url(assets/icons/sparkles.svg); }

/* PT-01 Hero */
.adt-hero { padding: 56px 0 72px; }
.adt-hero .wp-block-columns { align-items: center; gap: 40px; }
.adt-eyebrow { display: inline-block; font-weight: 600; font-size: .9rem; color: var(--adt-primary); background: var(--adt-surface-alt); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.adt-hero-art { position: relative; max-width: 440px; margin: 0 auto; aspect-ratio: 1; display: grid; place-items: center; }
/* Soft circle behind the logo icon. */
.adt-hero-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--adt-surface-alt); }
/* Coloured dots from the logo's "people" palette (as in the approved mock-up). */
.adt-hero-art::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 14% 10%, var(--adt-orange) 9px, transparent 9.5px),
		radial-gradient(circle at 92.6% 19.4%, var(--adt-teal) 6px, transparent 6.5px),
		radial-gradient(circle at 6.5% 87.5%, var(--adt-purple) 11px, transparent 11.5px),
		radial-gradient(circle at 78.4% 94.4%, var(--adt-lime) 7px, transparent 7.5px),
		radial-gradient(circle at 96.5% 49%, var(--adt-red) 5px, transparent 5.5px);
}
.adt-hero-art .wp-block-image { position: relative; z-index: 1; width: 72%; margin: 0; }
.adt-hero-art img { width: 100%; height: auto; display: block; }

/* PT-02 Page header */
.adt-page-head { background: var(--adt-surface-alt); padding: 56px 0 48px; border-bottom: 4px solid var(--c, var(--adt-primary)); }
.adt-page-head .adt-lead { max-width: 40em; margin: 0; }
.adt-crumbs { font-size: .9rem; color: var(--adt-muted); margin-bottom: 10px; }
.adt-crumbs a { text-decoration: none; }

/* PT-04 Service tiles */
.adt-tiles { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .adt-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adt-tiles { grid-template-columns: repeat(3, 1fr); } }
.adt-tile { background: #fff; border: 1px solid var(--adt-border); border-top: 4px solid var(--c); border-radius: var(--adt-radius); padding: 28px; transition: box-shadow .2s; }
.adt-tile:hover { box-shadow: 0 8px 24px rgba(27, 53, 80, .10); }
.adt-tile p { color: var(--adt-muted); }
.adt-tile .adt-more a { font-weight: 600; text-decoration: none; }
.adt-tiles + .adt-lead { margin-top: 48px; }

/* PT-05 Reasons */
.adt-reasons { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 800px) { .adt-reasons { grid-template-columns: 1fr 1fr; gap: 36px 48px; } }
.adt-reason { position: relative; padding-left: 56px; }
.adt-reason::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%;
	border: 2px solid var(--c); background: #fff;
}
.adt-reason::after {
	content: ""; position: absolute; left: 10px; top: 12px; width: 20px; height: 20px; background: var(--c);
	-webkit-mask: url(assets/icons/check.svg) center / contain no-repeat; mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.adt-reason h3 { font-size: 1.1rem; margin-bottom: 4px; }
.adt-reason p { color: var(--adt-muted); margin: 0; }

/* PT-06 Steps */
.adt-steps { display: grid; gap: 28px; margin-top: 40px; counter-reset: adt-step; }
@media (min-width: 800px) { .adt-steps { grid-template-columns: repeat(3, 1fr); } }
.adt-step { counter-increment: adt-step; }
.adt-step::before {
	content: counter(adt-step); width: 48px; height: 48px; border-radius: 50%;
	background: var(--adt-primary); color: #fff; display: grid; place-items: center;
	font: 700 1.2rem var(--adt-font-head); margin-bottom: 14px;
}
.adt-step p { color: var(--adt-muted); }

/* PT-07 Call-to-action band */
.adt-band { background: var(--adt-navy); color: #fff; }
.adt-band h2 { color: #fff; }
.adt-band h2 em { color: var(--adt-orange); font-style: normal; }
.adt-band p { color: var(--adt-on-dark-muted); font-size: 1.1rem; }
.adt-band a:not(.wp-block-button__link) { color: #fff; }
.adt-band .wp-block-buttons { justify-content: center; }

/* Space between consecutive text sections in a content column (e.g. a list then the next H2). */
.adt-narrow > .wp-block-group__inner-container > h2:not(:first-child),
.adt-narrow > h2:not(:first-child) { margin-top: 48px; }
.adt-narrow > .wp-block-group__inner-container > h3:not(:first-child),
.adt-narrow > h3:not(:first-child) { margin-top: 32px; }

/* PT-08 Tick list */
ul.adt-ticks { list-style: none; margin: 20px 0 1.5em; padding: 0; display: grid; gap: 14px; }
ul.adt-ticks:last-child { margin-bottom: 0; }
ul.adt-ticks li { position: relative; padding-left: 36px; }
ul.adt-ticks li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: var(--adt-primary);
	-webkit-mask: url(assets/icons/check.svg) center / contain no-repeat; mask: url(assets/icons/check.svg) center / contain no-repeat;
}

/* PT-09 Text sections, call-outs */
.adt-callout { margin-top: 28px; padding: 18px 20px; background: #fff; border-left: 4px solid var(--c, var(--adt-primary)); border-radius: 0 var(--adt-radius) var(--adt-radius) 0; }

/* PT-10 / PT-11 Cards */
.adt-cards { display: grid; gap: 20px; }
@media (min-width: 800px) { .adt-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.adt-card { background: #fff; border: 1px solid var(--adt-border); border-radius: var(--adt-radius); padding: 28px; }
.adt-split { display: grid; gap: 40px; }
@media (min-width: 900px) { .adt-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }

/* Forms (Fluent Forms): visible field borders meet 3:1 */
.adt-page input[type="text"], .adt-page input[type="email"], .adt-page input[type="tel"],
.adt-page select, .adt-page textarea { border: 1px solid var(--adt-field); border-radius: 6px; }

/* ---------- Footer (functions.php: adt_footer) ---------- */
.adt-footer { background: var(--adt-navy); color: var(--adt-on-dark-muted); padding: 56px 0 24px; font-size: .95rem; }
.adt-footer .adt-cols { display: grid; gap: 32px; }
@media (min-width: 800px) { .adt-footer .adt-cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.adt-footer img { height: 40px; width: auto; margin-bottom: 14px; }
.adt-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.adt-footer ul { list-style: none; margin: 0; padding: 0; }
.adt-footer li { margin-bottom: 8px; }
.adt-footer a { color: #fff; text-decoration: none; }
.adt-footer a:hover, .adt-footer a:focus { color: #fff; text-decoration: underline; }
.adt-footer :focus-visible { outline-color: #fff; }
.adt-legal { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}