/*
Theme Name: keaad
Theme URI: https://github.com/Kranson-Enterprises/archangeldefense
Author: Kranson Enterprises
Author URI: https://www.mijug.net
Description: Minimal native Gutenberg block theme for ArchAngelDefense.
Requires at least: 6.9
Tested up to: 6.9.4
Requires PHP: 8.2
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keaad
Tags: block-theme, full-site-editing, accessibility-ready
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * 														    *       
 * 						 Project Start Date: 01/01/2025	    *
 *                       Publication Date:             	    * 
 * 						 Last Modification Date: 06/17/2026	*
 * Kranson Enterprises: May 2026
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.screen-reader-text {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

:root {
	color-scheme: light dark;
	--aad-surface: #ffffff;
	--aad-text: #000000;
	--aad-card: #ffffff;
	--aad-border: #d4d4d4;
	--aad-link: #000000;
	--aad-link-hover: #3a3a3a;
}

body,
.wp-site-blocks {
	background-color: var(--aad-surface);
	color: var(--aad-text);
}

a {
	color: var(--aad-link);
}

a:hover,
a:focus {
	color: var(--aad-link-hover);
}

.has-contrast-background-color a,
.has-contrast-background-color a:visited {
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color a:hover,
.has-contrast-background-color a:focus {
	color: var(--wp--preset--color--accent);
}

.has-primary-background-color,
.has-secondary-background-color,
.has-contrast-background-color {
	color: var(--wp--preset--color--base);
}

.has-primary-background-color :where(p, li, dd, dt, span, strong, em, blockquote, cite, .wp-block-heading),
.has-secondary-background-color :where(p, li, dd, dt, span, strong, em, blockquote, cite, .wp-block-heading),
.has-contrast-background-color :where(p, li, dd, dt, span, strong, em, blockquote, cite, .wp-block-heading) {
	color: inherit;
}

.has-primary-background-color :where(a, a:visited),
.has-secondary-background-color :where(a, a:visited),
.has-contrast-background-color :where(a, a:visited) {
	color: var(--wp--preset--color--base);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.has-primary-background-color :where(a:hover, a:focus),
.has-secondary-background-color :where(a:hover, a:focus),
.has-contrast-background-color :where(a:hover, a:focus) {
	color: var(--wp--preset--color--accent);
	text-decoration-color: currentColor;
}

.screen-reader-text:focus,
.screen-reader-text:active {
	clip: auto;
	clip-path: none;
	height: auto;
	left: 1rem;
	overflow: visible;
	padding: 0.75rem 1rem;
	position: absolute;
	top: 1rem;
	width: auto;
	z-index: 100000;
	background: #111827;
	color: #ffffff;
}

.archangel-widget-card {
	border-radius: 0.25rem;
	background: var(--aad-card);
}

.archangel-widget-card,
.archangel-widget-card .wp-block-heading,
.archangel-widget-card a,
.archangel-widget-card time,
.archangel-widget-card .cat-item {
	color: var(--aad-text) !important;
}

.archangel-widget-card .wp-block-heading {
	margin-top: 0;
}

.archangel-site-header {
	transition: background-image 180ms ease;
}

/* Tight vertical stack for the site title + tagline beside the logo.
   Styling lives here (not inline on the block) so the Group block stays
   valid in the editor. The doubled class outranks the flex layout's
   generated gap rule. */
.archangel-brand-stack.wp-block-group {
	gap: 0.1em;
	margin: 0;
	padding: 0;
	line-height: 1.1;
}

.archangel-hero-tight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	max-width: min(92vw, 62ch);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
}

.archangel-hero-tight p {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

.archangel-card-contrast,
.archangel-card-contrast p,
.archangel-card-contrast strong,
.archangel-card-contrast .wp-block-heading {
	color: var(--aad-text) !important;
}

.archangel-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.archangel-gallery-grid .wp-block-image {
	margin: 0;
}

.archangel-gallery-grid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}


/*
 * Light / dark appearance is driven entirely by the data-aad-theme-resolved
 * attribute on <html>, stamped before first paint by the head script in
 * includes/theme-assets.php. "system" resolves to the device's
 * prefers-color-scheme; the dev-only appearance control can force light/dark.
 * Keying every rule off the resolved attribute — rather than an @media
 * prefers-color-scheme block tied to the real device — is what lets that control
 * simulate either device default pixel-for-pixel.
 */
html[data-aad-theme-resolved="dark"] body,
html[data-aad-theme-resolved="dark"] .wp-site-blocks {
	background-color: var(--aad-surface);
	color: var(--aad-text);
}

html[data-aad-theme-resolved="dark"] .wp-block-cover .archangel-hero-tight,
html[data-aad-theme-resolved="dark"] .wp-block-cover .archangel-hero-tight.wp-block-group {
	background-color: transparent !important;
}

/*
 * Form controls follow the resolved scheme. The ancestor is wrapped in :where()
 * so it contributes no specificity — exactly as the former unscoped @media rule
 * did — leaving the dev appearance control's own <select> styling intact.
 */
:where(html[data-aad-theme-resolved="dark"]) input,
:where(html[data-aad-theme-resolved="dark"]) textarea,
:where(html[data-aad-theme-resolved="dark"]) select,
:where(html[data-aad-theme-resolved="dark"]) button {
	background: var(--aad-surface);
	color: var(--aad-text);
	border: 1px solid var(--aad-border);
}

html[data-aad-theme-resolved="dark"] body.archangel-service-page .wp-site-blocks > * {
	background-color: color-mix(in srgb, var(--aad-surface) 60%, transparent);
}

html[data-aad-theme-resolved="light"] {
	/* Pin the UA scheme to the resolved mode so native controls (form fields,
	   scrollbars) follow the forced/simulated mode rather than the real device,
	   overriding the `color-scheme: light dark` default above. */
	color-scheme: light;
	--aad-surface: #ffffff;
	--aad-text: #000000;
	--aad-card: #ffffff;
	--aad-border: #d4d4d4;
	--aad-link: #000000;
	--aad-link-hover: #3a3a3a;
}

html[data-aad-theme-resolved="dark"] {
	color-scheme: dark;
	--aad-surface: #000000;
	--aad-text: #ffffff;
	--aad-card: #0a0a0a;
	--aad-border: #4a4a4a;
	--aad-link: #ffffff;
	--aad-link-hover: #d4d4d4;
}

html[data-aad-theme-resolved="dark"] body:not(.archangel-service-page) :where(
	.wp-site-blocks,
	.wp-site-blocks > *,
	.wp-block-post,
	.wp-block-group,
	.wp-block-column,
	.wp-block-post-content
):not(.has-background) {
	background-color: var(--aad-surface);
	color: var(--aad-text);
}

html[data-aad-theme-resolved="dark"] .has-sm-font-size strong {
	color: var(--aad-text);
}

.aad-theme-mode-control {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.55rem 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 44%, var(--aad-border));
	border-radius: 999px;
	background: color-mix(in srgb, var(--aad-surface) 94%, transparent);
	backdrop-filter: blur(8px);
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.22),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent) inset;
	font-size: 0.8125rem;
	line-height: 1;
}

.aad-theme-mode-control label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aad-text);
}

.aad-theme-mode-control select {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 50%, var(--aad-border));
	border-radius: 999px;
	padding: 0.38rem 1.75rem 0.38rem 0.75rem;
	background: var(--aad-surface);
	color: var(--aad-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--aad-text) 50%),
		linear-gradient(135deg, var(--aad-text) 50%, transparent 50%);
	background-position:
		calc(100% - 1.05rem) 50%,
		calc(100% - 0.75rem) 50%;
	background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

.aad-theme-mode-control select:hover {
	border-color: var(--wp--preset--color--primary);
}

.aad-theme-mode-control select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.aad-theme-mode-control {
		right: 0.75rem;
		left: 0.75rem;
		justify-content: space-between;
	}
}

@media (max-width: 900px) {
	.archangel-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.archangel-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* Wrapper for responsive video embeds */
.video-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Keep a 16:9 frame while video loads */
.video-container {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 12px;
}

/* Make the video fill the container */
.video-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* use contain if you prefer no crop */
}

/* Optional: tune corner radius on small screens */
@media (max-width: 768px) {
  .video-container {
    border-radius: 8px;
  }
}

/* Breadcrumbs (keaad/breadcrumbs pattern) */
.aad-breadcrumbs {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-left: auto;
	margin-right: auto;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
}

.aad-breadcrumb-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.aad-breadcrumb-list li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.6;
}

.aad-breadcrumb-list [aria-current="page"] {
	opacity: 0.75;
}

/* Related services (keaad/related-services pattern) */
.aad-related-services-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.5rem 1.5rem;
}

.aad-related-services-list li a {
	display: block;
	padding: 0.4rem 0;
}