/* =========================================================
   NextFume Child – global styles
   Loaded after KirkiBase. Kirki element styles (.k-*, .kirki-s*)
   are left alone; this file only adds site-wide tokens and fixes.
   ========================================================= */

/* ---- 1. Brand tokens (taken from the live homepage) ---- */
:root {
	--nf-primary:        #6D63FF;
	--nf-primary-dark:   #564CDB;
	--nf-primary-deep:   #4A3FD9;
	--nf-primary-light:  #8A80FF;
	--nf-lavender:       #C9C4FF;
	--nf-lavender-soft:  #EDEBFF;
	--nf-tint:           #F4F3FF;
	--nf-navy:           #0B1E3D;
	--nf-navy-deep:      #070B1C;
	--nf-ink:            #131A2C;
	--nf-body:           #5B6478;
	--nf-muted:          #8892AC;
	--nf-line:           #E4E7F0;
	--nf-surface:        #F5F6FA;
	--nf-white:          #FFFFFF;
	--nf-success:        #15803D;
	--nf-success-bg:     #ECFDF3;
	--nf-danger:         #E5484D;

	--nf-gradient:       linear-gradient(135deg, #8A80FF 0%, #564CDB 100%);
	--nf-font:           "Poppins", "NF Poppins", Arial, sans-serif;

	--nf-radius-sm:      10px;
	--nf-radius:         16px;
	--nf-radius-lg:      24px;
	--nf-shadow:         0 18px 36px rgba(86, 76, 219, 0.10);

	--nf-header-h:       76px;
}
@media (max-width: 991px) {
	:root { --nf-header-h: 64px; }
}

/* ---- 2. Base ---- */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }

/* Text selection in brand colour */
::selection {
	background: var(--nf-lavender);
	color: var(--nf-ink);
}

/* ---- 3. Anchor links land below the sticky header ----
   (#consultation, #services, #faq … are all under a 76px sticky bar) */
section[id],
[id="consultation"],
[id="services"],
[id="faq"] {
	scroll-margin-top: calc(var(--nf-header-h) + 16px);
}
body.admin-bar section[id] {
	scroll-margin-top: calc(var(--nf-header-h) + 48px);
}

/* ---- 4. Accessibility ---- */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.hdr-trig:focus-visible,
.nf-tab:focus-visible {
	outline: 3px solid var(--nf-primary);
	outline-offset: 3px;
	border-radius: 8px;
}
a:focus:not(:focus-visible) { outline: none; }

.nf-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	background: var(--nf-ink);
	color: #fff !important;
	font: 600 14px/1 var(--nf-font);
	padding: 12px 18px;
	border-radius: 10px;
	text-decoration: none;
	transition: top 0.2s ease;
}
.nf-skip-link:focus { top: 12px; }

/* FAQ / service tabs are clickable divs – show they are interactive */
[onclick] { cursor: pointer; }

/* ---- 5. Respect reduced-motion everywhere (marquees, floaters, shimmer) ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- 6. Content styles for blog posts / normal WP pages ---- */
.entry-content,
.wp-block-post-content {
	font-family: var(--nf-font);
	color: var(--nf-body);
	font-size: 17px;
	line-height: 1.75;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4 {
	font-family: var(--nf-font);
	color: var(--nf-ink);
	line-height: 1.25;
	letter-spacing: -0.3px;
	margin: 1.6em 0 0.6em;
}
.entry-content h2, .wp-block-post-content h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.entry-content h3, .wp-block-post-content h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; }
.entry-content a:not(.wp-element-button),
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--nf-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.entry-content a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):hover { color: var(--nf-primary); }
.entry-content blockquote,
.wp-block-quote {
	border-left: 4px solid var(--nf-primary);
	background: var(--nf-tint);
	border-radius: 0 var(--nf-radius) var(--nf-radius) 0;
	padding: 18px 22px;
	color: var(--nf-ink);
	margin: 1.6em 0;
}
.entry-content img,
.wp-block-image img { border-radius: var(--nf-radius); height: auto; }
.entry-content code {
	background: var(--nf-lavender-soft);
	color: var(--nf-primary-dark);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 0.9em;
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--nf-line);
	padding: 10px 12px;
	text-align: left;
}
.entry-content th { background: var(--nf-surface); color: var(--nf-ink); }

/* Gutenberg buttons in brand style */
.wp-block-button__link,
.wp-element-button {
	background: var(--nf-primary);
	color: #fff;
	border-radius: 999px;
	font-family: var(--nf-font);
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(109, 99, 255, 0.28);
	transition: background 0.2s ease, transform 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--nf-primary-deep);
	color: #fff;
	transform: translateY(-2px);
}

/* ---- 7. Utility classes you can add in the Kirki editor ---- */
.nf-gradient-text {
	background: linear-gradient(95deg, #E4E0FF 0%, #B9AEFF 50%, #9C93FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.nf-card {
	background: var(--nf-white);
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius-lg);
	padding: 28px 26px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nf-card:hover {
	transform: translateY(-4px);
	border-color: var(--nf-lavender);
	box-shadow: var(--nf-shadow);
}
.nf-eyebrow {
	display: block;
	font: 700 13px/1.2 var(--nf-font);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--nf-primary-dark);
	margin-bottom: 14px;
}
.nf-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- 8. Print ---- */
@media print {
	#site-header, #footer, .hdr-burger, .nfc, form { display: none !important; }
	body { color: #000; background: #fff; }
}