/*
Theme Name: iVerified
Theme URI: https://verified-infra-foundation.lovable.app
Author: Built for iVerified Data PrivateStorage Solutions Holdings Ltd.
Description: The iVerified corporate site — enterprise data infrastructure, private storage, AI infrastructure and technology procurement. Dark navy throughout with two deliberate light bands on the front page, Outfit headings, Inter body and Bebas Neue numerals. Ports the approved Lovable build to WordPress.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
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: iverified
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/*
 * Almost nothing belongs in this file.
 *
 * The design's whole vocabulary is in assets/css/app.css, the stylesheet the
 * original build compiled. That sheet already carries the :root palette, the
 * base layer — including the body's own background, colour, family and 1.7
 * line-height — and all 1,169 utility selectors the templates use. It is a
 * fixed artefact: a class that is not already in it has no styles at all, and
 * nothing on the page says so.
 *
 * Two things it does NOT carry, and this file supplies:
 *
 *   1. @font-face. The sheet names Outfit, Inter and Bebas Neue through
 *      --font-display, --font-sans and --font-numeric, and contains no
 *      @font-face and no @import anywhere. The live site got its typefaces
 *      purely from a Google Fonts <link>. assets/css/fonts.css replaces that.
 *
 *   2. Anything WordPress itself renders — the admin bar's offset against a
 *      fixed header, and the comment and search markup the theme does not
 *      otherwise draw.
 *
 * A note for anyone editing this design: shadcn claims --accent for itself, and
 * on this site --accent resolves to --bg-elevated (#111A2B), which is very
 * nearly black. The brand's blue is --accent-color. Reading var(--accent) and
 * expecting blue is the single easiest mistake to make here.
 */

@layer components {

	/* ------------------------------------------------------------------
	 * The fixed header, and the admin bar above it
	 *
	 * The header is position:fixed, so every page wrapper carries
	 * pt-[68px] lg:pt-[88px] to clear it. When WordPress adds its admin bar
	 * that clearance is 32px short and the first band slides underneath.
	 * --------------------------------------------------------------- */

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

	@media screen and (max-width: 782px) {

		.admin-bar .iv-header {
			top: 46px;
		}
	}

	/* ---------------------------------------------------------------
	 * A link to a section lands below the header, not behind it
	 *
	 * Every band carries an id, so any of them can be linked to. Without
	 * this the browser scrolls the band's top edge to the top of the window,
	 * where the fixed header is already sitting, and the heading is the part
	 * that disappears.
	 * --------------------------------------------------------------- */

	[id^="iv-band-"],
	#iv-main {
		scroll-margin-top: 88px;
	}

	@media (max-width: 1023px) {

		[id^="iv-band-"],
		#iv-main {
			scroll-margin-top: 76px;
		}
	}

	/* ------------------------------------------------------------------
	 * Focus
	 *
	 * The brief asks for accessible focus states and WCAG AA contrast. The
	 * compiled sheet has focus utilities but nothing applies them globally,
	 * so a keyboard user tabbing through a dark page sees the browser's own
	 * outline, which is nearly invisible on #05070D.
	 * --------------------------------------------------------------- */

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

	/* ------------------------------------------------------------------
	 * Motion
	 *
	 * The brief: "respect prefers-reduced-motion". The fade-up on scroll is
	 * driven by a class the script adds; this makes the whole thing a no-op
	 * for anyone who has asked for less movement, rather than a faster
	 * version of the same movement.
	 * --------------------------------------------------------------- */

	.iv-fade {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 600ms ease-out, transform 600ms ease-out;
	}

	.iv-fade.is-in {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {

		.iv-fade,
		.iv-fade.is-in {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	/*
	 * Without JavaScript nothing would ever add .is-in, so the content would
	 * be permanently invisible. The script removes this class on load; if it
	 * never runs, the fade never applies.
	 */
	.no-js .iv-fade {
		opacity: 1;
		transform: none;
	}

	/* ------------------------------------------------------------------
	 * The mobile drawer
	 *
	 * Open and closed are a class on <body> rather than an inline style, so
	 * the scroll lock and the panel cannot disagree about which state they
	 * are in.
	 * --------------------------------------------------------------- */

	body.iv-menu-open {
		overflow: hidden;
	}

	/* ------------------------------------------------------------------
	 * Long prose from the editor
	 *
	 * Only reached by a page somebody writes in wp-admin rather than through
	 * the fields. The utilities cannot be applied to markup the theme never
	 * sees, so the few elements TinyMCE emits are given the site's type here.
	 * --------------------------------------------------------------- */

	.iv-prose > * + * {
		margin-top: 1rem;
	}

	.iv-prose h2,
	.iv-prose h3,
	.iv-prose h4 {
		color: var(--text-primary);
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.02em;
		margin-top: 2rem;
	}

	.iv-prose h2 {
		font-size: 1.75rem;
	}

	.iv-prose h3 {
		font-size: 1.375rem;
	}

	.iv-prose a {
		color: var(--accent-bright);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.iv-prose ul,
	.iv-prose ol {
		padding-left: 1.25rem;
	}

	.iv-prose ul {
		list-style: disc;
	}

	.iv-prose ol {
		list-style: decimal;
	}

	.iv-prose li + li {
		margin-top: 0.5rem;
	}

	.iv-prose strong {
		color: var(--text-primary);
		font-weight: 600;
	}

	/* ------------------------------------------------------------------
	 * Form controls
	 *
	 * The quote wizard and the contact form are drawn with utilities, but a
	 * select and a file input carry browser furniture that no utility can
	 * reach — and on a dark ground the defaults are unreadable.
	 * --------------------------------------------------------------- */

	.iv-field select option {
		background: var(--bg-surface);
		color: var(--text-primary);
	}

	.iv-field input[type="file"]::file-selector-button {
		background: transparent;
		border: 1px solid var(--border-strong);
		border-radius: 8px;
		color: var(--text-secondary);
		cursor: pointer;
		font: inherit;
		margin-right: 0.75rem;
		padding: 0.4rem 0.9rem;
	}

	.iv-field input[type="file"]::file-selector-button:hover {
		border-color: var(--accent-bright);
		color: var(--text-primary);
	}

	/* A date input's calendar picker is black-on-black in Chrome. */
	.iv-field input[type="date"]::-webkit-calendar-picker-indicator {
		filter: invert(1);
		opacity: 0.6;
	}

	.iv-field input::placeholder,
	.iv-field textarea::placeholder {
		color: var(--text-muted);
	}
}

/* -------------------------------------------------------------------------
 * Unlayered: rules that must beat a compiled utility
 *
 * Everything above sits in @layer components, which loses to the utilities
 * layer by design — that is what lets a utility override a component style.
 * The rules below have to win against one, so they stay outside every layer,
 * where the cascade puts them above all of them.
 * ------------------------------------------------------------------------- */

/*
 * The six-step timeline needs room for six steps.
 *
 * The compiled sheet switches this grid to six columns at 1280px, and that
 * measurement is against the window. The timeline does not get the window: it
 * sits in the middle third of a three-panel band and gets about 40% of it,
 * which at 1280px is roughly 82px a step. "Requirements" and "Configuration"
 * are both wider than that, so from 1280px to about 1600px the labels ran into
 * their neighbours.
 *
 * The design's own answer below 1280px is two rows of three. This extends that
 * answer up to the width where six columns genuinely fit, rather than inventing
 * a new layout. Above 1600px nothing here applies.
 */
@media (min-width: 1280px) and (max-width: 1599px) {

	.iv-timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}