/*
Theme Name:   Night Owls
Theme URI:    https://nightowls.co.nz
Description:  Voxel child theme for Night Owls (Ruru). Midnight design: ink navy ground, amber accent, Space Grotesk + Inter.
Author:       Night Owls
Template:     voxel
Version:      0.1.0
Text Domain:  nightowls
*/

/* ==========================================================================
   1. Design tokens
   Mirror these in Elementor > Site Settings > Global Colours / Global Fonts
   so Voxel widgets styled in Elementor use the same values.
   ========================================================================== */

:root {
	/* Colour */
	--no-ink:          #0E1424; /* page background */
	--no-ink-2:        #131A2D; /* alternate band background */
	--no-surface:      #161E33; /* cards, panels, inputs on ink */
	--no-line:         #26304A; /* borders, dividers */
	--no-line-strong:  #3A4663; /* ghost button + input borders */
	--no-text:         #EEF1F7; /* primary text */
	--no-text-soft:    #C9D1E0; /* nav links */
	--no-muted:        #A9B3C7; /* secondary text (passes 4.5:1 on ink) */
	--no-accent:       #F5B841; /* ruru amber */
	--no-accent-hover: #FFD27A;
	--no-on-accent:    #0E1424; /* text on amber */

	/* Type */
	--no-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--no-font-body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--no-size-hero: clamp(2.75rem, 1.6rem + 4.2vw, 4.25rem);
	--no-size-h2:   clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
	--no-size-h3:   1.375rem;
	--no-size-lead: 1.25rem;
	--no-size-body: 1rem;
	--no-size-small: 0.875rem;

	/* Shape + space */
	--no-radius-sm:   12px;
	--no-radius-md:   16px;
	--no-radius-lg:   20px;
	--no-radius-xl:   28px;
	--no-radius-pill: 999px;
	--no-container:   1200px;
	--no-gutter:      32px;
	--no-section-y:   clamp(4rem, 3rem + 4vw, 6.5rem);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { background: var(--no-ink); }

body {
	background: var(--no-ink);
	color: var(--no-text);
	font-family: var(--no-font-body);
	font-size: var(--no-size-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--no-font-display);
	color: var(--no-text);
	letter-spacing: -0.02em;
	line-height: 1.08;
}

h1 { letter-spacing: -0.03em; line-height: 1.02; }

a { color: var(--no-accent); }
a:hover { color: var(--no-accent-hover); }

::selection { background: var(--no-accent); color: var(--no-on-accent); }

:focus-visible {
	outline: 2px solid var(--no-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Layout helpers (add as CSS classes on Elementor containers)
   ========================================================================== */

.no-container {
	max-width: var(--no-container);
	margin-inline: auto;
	padding-inline: var(--no-gutter);
}

.no-section { padding-block: var(--no-section-y); }

.no-band {
	background: var(--no-ink-2);
	border-block: 1px solid var(--no-line);
}

.no-muted, .no-muted p { color: var(--no-muted); }
.no-lead, .no-lead p { font-size: var(--no-size-lead); color: var(--no-muted); max-width: 35em; }

/* ==========================================================================
   4. Components
   Add the class to the Elementor widget (Advanced > CSS Classes).
   ========================================================================== */

/* Buttons: works on a plain <a class="no-btn"> or an Elementor Button widget */
a.no-btn,
.no-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--no-radius-pill);
	background: var(--no-accent);
	color: var(--no-on-accent);
	font-family: var(--no-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

a.no-btn:hover,
.no-btn .elementor-button:hover {
	background: var(--no-accent-hover);
	color: var(--no-on-accent);
}

a.no-btn--ghost,
.no-btn--ghost .elementor-button {
	background: transparent;
	border-color: var(--no-line-strong);
	color: var(--no-text);
	font-weight: 500;
}

a.no-btn--ghost:hover,
.no-btn--ghost .elementor-button:hover {
	background: var(--no-surface);
	color: var(--no-text);
}

/* Dark button for use on the amber CTA panel */
a.no-btn--ink,
.no-btn--ink .elementor-button {
	background: var(--no-ink);
	color: var(--no-text);
}

a.no-btn--ink:hover,
.no-btn--ink .elementor-button:hover {
	background: var(--no-surface);
	color: var(--no-text);
}

/* Cards */
.no-card {
	background: var(--no-surface);
	border: 1px solid var(--no-line);
	border-radius: var(--no-radius-lg);
	padding: 24px;
	color: var(--no-text);
}

a.no-card,
.no-card--link {
	display: block;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

a.no-card:hover,
.no-card--link:hover { border-color: var(--no-line-strong); color: var(--no-text); }

.no-card__title {
	display: block;
	font-family: var(--no-font-display);
	font-size: 1.25rem;
	font-weight: 600;
}

.no-card__meta {
	display: block;
	margin-top: 6px;
	font-size: var(--no-size-small);
	color: var(--no-muted);
}

/* Badges: status pills on brief and Owl cards */
.no-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--no-radius-pill);
	background: var(--no-line);
	color: var(--no-accent);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.no-badge--solid { background: var(--no-accent); color: var(--no-on-accent); }

/* Eyebrow above the hero headline */
.no-eyebrow {
	margin: 0 0 20px;
	color: var(--no-accent);
	font-size: var(--no-size-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* "How it works" step numbers */
.no-step-num {
	margin: 0;
	font-family: var(--no-font-display);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--no-accent);
}

/* Amber "Join as an Owl" panel */
.no-cta-panel {
	background: var(--no-accent);
	color: var(--no-on-accent);
	border-radius: var(--no-radius-xl);
	padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3rem);
}

.no-cta-panel h2,
.no-cta-panel .elementor-heading-title,
.no-cta-panel p { color: var(--no-on-accent); }

/* Search bar panel */
.no-search {
	background: var(--no-surface);
	border: 1px solid var(--no-line);
	border-radius: var(--no-radius-lg);
	padding: 20px;
}

/* Native inputs inside Night Owls panels (Voxel's own forms are styled in Elementor) */
.no-search input,
.no-search select,
.no-form input,
.no-form select,
.no-form textarea {
	min-height: 52px;
	border: 1px solid var(--no-line-strong);
	border-radius: var(--no-radius-sm);
	background: var(--no-ink);
	color: var(--no-text);
	padding: 0 14px;
	font: inherit;
}

.no-form textarea { padding-block: 12px; min-height: 140px; }

/* Placeholder blocks while real photography is sourced */
.no-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	background: var(--no-line);
	color: var(--no-muted);
	font-size: 0.8125rem;
	border-radius: var(--no-radius-md);
}

/* ==========================================================================
   5. Header + footer (Elementor/Voxel header template: add class no-header)
   ========================================================================== */

.no-header { border-bottom: 1px solid var(--no-line); background: var(--no-ink); }

.no-header nav a,
.no-header .elementor-nav-menu a { color: var(--no-text-soft); text-decoration: none; }

.no-header nav a:hover,
.no-header .elementor-nav-menu a:hover { color: var(--no-text); }

.no-footer {
	border-top: 1px solid var(--no-line);
	color: var(--no-muted);
	font-size: var(--no-size-small);
}

.no-footer a { color: var(--no-muted); text-decoration: none; }
.no-footer a:hover { color: var(--no-text); }

/* ==========================================================================
   6. Night Owls Tools plugin output
   ========================================================================== */

.no-requested-owl {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid var(--no-line);
	border-radius: var(--no-radius-md);
	background: var(--no-surface);
	color: var(--no-text);
}

.no-owl-only-fallback {
	padding: 20px;
	border: 1px dashed var(--no-line-strong);
	border-radius: var(--no-radius-md);
	color: var(--no-muted);
}