/*
Theme Name: Skyfal Security
Theme URI: https://example.com/skyfal-security-theme
Author: Built for Skyfal Security
Author URI: https://example.com
Description: A lightweight, accessible Full Site Editing block theme for Skyfal Security — an enterprise security-systems service, repair, programming and support company. Built with native Gutenberg blocks, a theme.json design system, self-hosted fonts and minimal JavaScript. No page builder, no framework, no external asset requests.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skyfal-security
Tags: full-site-editing, block-patterns, block-styles, accessibility-ready, custom-colors, custom-logo, custom-menu, editor-style, one-column, two-columns, three-columns, wide-blocks, business, portfolio

Skyfal Security WordPress theme, (C) 2026 Skyfal Security.
Skyfal Security is distributed under the terms of the GNU GPL v2 or later.

== Bundled resources ==
Inter (variable, subset) — Copyright (c) 2016 The Inter Project Authors.
Licensed under the SIL Open Font License 1.1. See assets/fonts/OFL.txt.

All SVG artwork in assets/images/ was created originally for this theme and is
distributed under the same GPL v2-or-later licence as the theme itself. No
third-party photography, icon set or stock imagery is bundled.
*/

/*
 * All global design tokens (colour, typography, spacing, layout) live in
 * theme.json so they remain editable from Appearance > Editor > Styles.
 *
 * This file carries only what theme.json cannot yet express: focus-visible
 * treatment, the skip link, reduced-motion handling and a small number of
 * registered block styles. It is deliberately short.
 */

/* ---------------------------------------------------------------------------
   1. Accessibility — focus, skip link, screen-reader text
   ------------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark sections the steel-blue outline loses contrast; lighten it. */
.skyfal-section-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent-light);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 0.85rem 1.35rem;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.skip-link:focus {
	left: 0;
	outline: 3px solid var(--wp--preset--color--accent-light);
	outline-offset: -3px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	top: 5px;
	left: 5px;
	padding: 0.85rem 1.35rem;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	z-index: 100000;
}

html {
	scroll-behavior: smooth;
	/* Keep anchored headings clear of the sticky header. */
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Never let a decorative image block a screen reader or shift layout. */
img,
svg {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   2. Section flow
   ------------------------------------------------------------------------ */

/*
 * Full-bleed sections carry their own vertical padding, so the global block
 * gap between top-level regions would show as a stripe of page background
 * between them. Remove it at the two structural levels and let the sections
 * butt together.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main > .wp-block-post-content > *,
.wp-site-blocks > main > .entry-content > * {
	margin-block-start: 0;
}

/* Inside a section, normal block spacing still applies. */
.wp-block-post-content > .wp-block-group > * {
	margin-block-start: revert;
}

/* ---------------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------------ */

.skyfal-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	background-color: rgba(11, 27, 51, 0.92);
	border-bottom: 1px solid rgba(201, 210, 222, 0.16);
}

.admin-bar .skyfal-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .skyfal-header {
		top: 46px;
	}
}

.skyfal-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.skyfal-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.skyfal-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent-light);
}

/* Submenus: readable panel rather than the default transparent stack. */
.skyfal-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy-mid);
	border: 1px solid rgba(201, 210, 222, 0.18);
	border-radius: 4px;
	box-shadow: 0 12px 34px rgba(6, 13, 26, 0.4);
	padding-block: 0.4rem;
	min-width: 15rem;
}

.skyfal-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1rem;
	border-bottom: 0;
}

/* The eyebrow utility bar above the main nav. */
.skyfal-utility-bar {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.skyfal-utility-bar a {
	text-decoration: none;
}

.skyfal-utility-bar a:hover,
.skyfal-utility-bar a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   4. Section helpers
   ------------------------------------------------------------------------ */

/* Eyebrow label above a section heading. */
.skyfal-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* A hairline rule that reads as a technical divider rather than decoration. */
.skyfal-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--steel-light);
	margin: 0;
	height: 1px;
}

.skyfal-section-dark .skyfal-rule {
	border-top-color: rgba(201, 210, 222, 0.2);
}

/* Fine grid texture for dark sections — pure CSS, no image request. */
.skyfal-grid-texture {
	position: relative;
	isolation: isolate;
}

.skyfal-grid-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(127, 179, 227, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 179, 227, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
}

/* ---------------------------------------------------------------------------
   5. Registered block styles
   ------------------------------------------------------------------------ */

/* Group style: "Card" — used for service, industry and system cards. */
.wp-block-group.is-style-skyfal-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--steel-light);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wp-block-group.is-style-skyfal-card:hover,
.wp-block-group.is-style-skyfal-card:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.wp-block-group.is-style-skyfal-card :where(h2, h3, h4) {
	margin-top: 0;
}

/* Dark variant of the same card, for use inside navy sections. */
.wp-block-group.is-style-skyfal-card-dark {
	background-color: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(201, 210, 222, 0.18);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.wp-block-group.is-style-skyfal-card-dark:hover,
.wp-block-group.is-style-skyfal-card-dark:focus-within {
	border-color: rgba(127, 179, 227, 0.55);
	background-color: rgba(255, 255, 255, 0.06);
}

.wp-block-group.is-style-skyfal-card-dark :where(h2, h3, h4) {
	margin-top: 0;
	color: var(--wp--preset--color--white);
}

/* Group style: "Bordered panel" — a quieter framed block for notices. */
.wp-block-group.is-style-skyfal-panel {
	border-left: 3px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--mist);
	border-radius: 0 4px 4px 0;
	padding: var(--wp--preset--spacing--40);
}

/* Button style: "Outline on dark". */
.wp-block-button.is-style-skyfal-outline-light > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(201, 210, 222, 0.55);
}

.wp-block-button.is-style-skyfal-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-skyfal-outline-light > .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

/* Button style: "Outline on light". */
.wp-block-button.is-style-skyfal-outline-dark > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--steel);
}

.wp-block-button.is-style-skyfal-outline-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-skyfal-outline-dark > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* List style: "Checked" — used for capability lists. */
.wp-block-list.is-style-skyfal-checklist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-skyfal-checklist > li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
}

.wp-block-list.is-style-skyfal-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.85rem;
	height: 0.45rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

.skyfal-section-dark .wp-block-list.is-style-skyfal-checklist > li::before {
	border-color: var(--wp--preset--color--accent-light);
}

/* List style: "Spec" — key/value technical list. */
.wp-block-list.is-style-skyfal-spec {
	list-style: none;
	padding-left: 0;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-list.is-style-skyfal-spec > li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--steel-light);
	margin: 0;
}

.wp-block-list.is-style-skyfal-spec > li:last-child {
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   6. Tables — service-agreement comparison
   ------------------------------------------------------------------------ */

.wp-block-table.is-style-skyfal-compare table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-skyfal-compare th,
.wp-block-table.is-style-skyfal-compare td {
	border: 1px solid var(--wp--preset--color--steel-light);
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-skyfal-compare thead th {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.is-style-skyfal-compare tbody th {
	background-color: var(--wp--preset--color--mist);
	font-weight: 600;
	width: 22%;
}

/* Wide tables must scroll inside their own container, never the page. */
.wp-block-table.is-style-skyfal-compare {
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   7. Placeholder token highlighting (editor + front end)
   ------------------------------------------------------------------------ */

/*
 * Any text wrapped in [[ ]] is unconfirmed business information that must be
 * replaced before launch. Highlighting it makes it impossible to miss.
 */
.skyfal-placeholder {
	background-color: rgba(201, 162, 39, 0.18);
	border-bottom: 1px dotted var(--wp--preset--color--gold);
	padding: 0 0.15em;
}

/* ---------------------------------------------------------------------------
   8. Print
   ------------------------------------------------------------------------ */

@media print {
	.skyfal-header,
	.skyfal-utility-bar,
	.wp-block-navigation,
	.skyfal-no-print {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* ---------------------------------------------------------------------------
   9. Footer navigation lists
   ------------------------------------------------------------------------ */

.skyfal-footer-nav {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.skyfal-footer-nav > li {
	margin: 0 0 0.15rem;
}

.skyfal-footer-nav a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.skyfal-footer-nav a:hover,
.skyfal-footer-nav a:focus-visible {
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------------
   10. Responsive header
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* The strapline is the first thing to go — the contact details matter more. */
	.skyfal-utility-tagline {
		display: none;
	}

	.skyfal-utility-bar {
		font-size: 0.75rem;
	}
}

@media (max-width: 680px) {
	/*
	 * On a phone the header is a single row: mark on the left, menu toggle on
	 * the right. The "Request Service" button is redundant here because the
	 * same call to action is the first thing inside the hero.
	 */
	/*
	 * The selector is deliberately specific: WordPress emits
	 * `body .is-layout-flex { display: flex }`, which outranks a single class.
	 */
	.skyfal-header .wp-block-buttons.skyfal-header-cta {
		display: none;
	}

	.skyfal-header .custom-logo {
		width: 158px;
		height: auto;
	}

	.skyfal-header .wp-block-site-logo {
		width: auto;
	}
}

@media (max-width: 420px) {
	.skyfal-utility-bar {
		font-size: 0.6875rem;
	}
}

/* ---------------------------------------------------------------------------
   11. Tablet — the awkward middle
   ------------------------------------------------------------------------ */

/*
 * Between 782px and roughly 1080px, core keeps columns side by side. For the
 * hero that squeezes the system diagram down to a width where its labels stop
 * being readable, so the hero stacks earlier than core's default breakpoint.
 */
@media (max-width: 1080px) {
	.wp-block-columns.skyfal-hero-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.skyfal-hero-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.skyfal-hero-columns > .wp-block-column:last-child {
		max-width: 34rem;
		margin-inline: auto;
	}
}

@media (max-width: 1140px) and (min-width: 681px) {
	/*
	 * Seven navigation items plus a button will not fit one row here. The
	 * button is dropped rather than shrinking the navigation to an unreadable
	 * size; the same call to action opens the hero directly below.
	 */
	.skyfal-header .wp-block-buttons.skyfal-header-cta {
		display: none;
	}

	.skyfal-header .wp-block-navigation {
		justify-content: flex-start;
	}
}

/* Credibility bar: five across is only readable at desktop widths. */
@media (max-width: 1080px) {
	.wp-block-columns.skyfal-credibility {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}

	.wp-block-columns.skyfal-credibility > .wp-block-column {
		flex-basis: calc(33.333% - 1.7rem) !important;
		flex-grow: 0;
	}
}

@media (max-width: 640px) {
	.wp-block-columns.skyfal-credibility > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
	}
}

/* ---------------------------------------------------------------------------
   12. Image aspect ratios
   ------------------------------------------------------------------------ */

/*
 * The block editor rejects width/height attributes in saved image markup, so
 * the intrinsic box is declared here instead. Without this the hero schematic
 * has no reserved height and the page shifts as it decodes.
 */
.skyfal-section-dark .wp-block-image img[src$="diagram-system-layers.svg"] {
	aspect-ratio: 660 / 600;
	width: 100%;
	height: auto;
}

.wp-block-image img[src$="badge-credential.svg"] {
	aspect-ratio: 264 / 310;
}

/* Separators on dark sections take their colour here rather than as a saved
   block attribute, which keeps the block markup canonical. */
.skyfal-section-dark .wp-block-separator,
.skyfal-section-dark hr.wp-block-separator {
	border-color: rgba(201, 210, 222, 0.17);
	color: rgba(201, 210, 222, 0.17);
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Links inside dark sections.

   theme.json sets the global link colour for light backgrounds. On navy it
   measures 3.2:1, which fails WCAG 2.2 AA for body text, so dark sections get
   the light accent instead. Buttons keep their own styling.
   --------------------------------------------------------------------------- */
.skyfal-section-dark a:where(:not(.wp-block-button__link):not(.wp-block-navigation-item__content)) {
	color: var(--wp--preset--color--accent-light);
}

.skyfal-section-dark a:where(:not(.wp-block-button__link):not(.wp-block-navigation-item__content)):hover,
.skyfal-section-dark a:where(:not(.wp-block-button__link):not(.wp-block-navigation-item__content)):focus-visible {
	color: var(--wp--preset--color--white);
}

/* Accordion questions on service pages. */
.wp-block-details.skyfal-faq-item {
	border-top: 1px solid var(--wp--preset--color--steel-light);
	padding: var(--wp--preset--spacing--40) 0;
}

.wp-block-details.skyfal-faq-item:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--steel-light);
}

.wp-block-details.skyfal-faq-item > summary {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.wp-block-details.skyfal-faq-item > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.skyfal-faq-item > summary::before {
	content: "+";
	font-family: var(--wp--preset--font-family--mono, monospace);
	color: var(--wp--preset--color--accent);
	font-weight: 400;
	flex: 0 0 auto;
}

.wp-block-details.skyfal-faq-item[open] > summary::before {
	content: "\2212";
}

.wp-block-details.skyfal-faq-item[open] > summary {
	margin-bottom: var(--wp--preset--spacing--30);
}