/*
Theme Name:   NITS Decor
Theme URI:    https://nitsdecor.com/
Author:       Fezey Media
Author URI:   https://fezeymedia.com/
Description:  A standalone, motion-led WordPress theme for NITS Decor — Dubai luxury interior design, interior architecture and turnkey fit-out. Carries its own brand system, seventeen cinematic Elementor widgets, parallax scenes, seamless material section transitions and the signature Drafting Line that travels the full length of the page. No parent theme and no page-builder plugin lock-in: every page, section and element is editable from Elementor, and the header and footer are editable Elementor templates. Requires Elementor.
Version:      2.0.1
Requires PHP: 7.4
Requires at least: 6.0
Tested up to: 6.8
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nits-decor
Tags:         interior design, luxury, architecture, fit-out, elementor, parallax, dubai, portfolio, one page, animation
*/

/* --------------------------------------------------------------------------
   NITS DECOR — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Brand equation:  Luxury Design + Functional Thinking + Technical Expertise
                    + Craftsmanship + Turnkey Execution
   Brand line:      Designed with intention. Executed with precision.
   Visual world:    "European calm x Dubai luxury" — warm limestone plaster,
                    oud-dark joinery, and the gold hairline of the NITS mark.

   Every value below is overridden at runtime by the Customizer
   (Appearance > Customize > NITS Brand), so the palette and type scale
   are fully editable without touching this file.
   -------------------------------------------------------------------------- */

:root {
	/* --- Ground tones ------------------------------------------------- */
	--nits-plaster:      #EEE9DF; /* warm limestone plaster — primary light ground */
	--nits-alabaster:    #FBF8F3; /* raised surfaces, cards, panels             */
	--nits-oud:          #13110E; /* deep warm black — dark ground              */
	--nits-basalt:       #2A2723; /* body copy on light, secondary dark ground  */
	--nits-stone:        #A79E90; /* muted metadata, captions, rules            */

	/* --- Metal (sampled directly from the NITS mark) ------------------- */
	--nits-gold:         #C49A55;
	--nits-gold-light:   #E6CB94;
	--nits-gold-deep:    #9C6F31;
	--nits-foil: linear-gradient(112deg,
		var(--nits-gold-deep)  0%,
		var(--nits-gold)      22%,
		var(--nits-gold-light) 48%,
		var(--nits-gold)      72%,
		var(--nits-gold-deep) 100%);

	/* --- Semantic aliases --------------------------------------------- */
	--nits-ground:       var(--nits-plaster);
	--nits-ink:          var(--nits-basalt);
	--nits-ink-strong:   var(--nits-oud);
	--nits-accent:       var(--nits-gold);
	--nits-rule:         color-mix(in srgb, var(--nits-basalt) 14%, transparent);
	--nits-rule-dark:    color-mix(in srgb, var(--nits-plaster) 16%, transparent);

	/* --- Type --------------------------------------------------------- */
	--nits-font-display: 'Marcellus', 'Times New Roman', serif;
	--nits-font-body:    'Jost', -apple-system, 'Segoe UI', sans-serif;
	--nits-font-utility: 'Jost', -apple-system, 'Segoe UI', sans-serif;

	/* Fluid scale — clamps so nothing ever needs a media query to survive */
	--nits-t-hero:   clamp(3.2rem, 8.2vw, 9.5rem);
	--nits-t-d1:     clamp(2.6rem, 5.4vw, 5.6rem);
	--nits-t-d2:     clamp(2.1rem, 3.8vw, 3.8rem);
	--nits-t-d3:     clamp(1.6rem, 2.4vw, 2.4rem);
	--nits-t-lead:   clamp(1.05rem, 1.35vw, 1.35rem);
	--nits-t-body:   clamp(0.98rem, 1.05vw, 1.075rem);
	--nits-t-label:  0.7rem;

	--nits-track-label: 0.26em;  /* the wide tracking of DECOR in the mark */
	--nits-track-display: -0.015em;

	/* --- Rhythm ------------------------------------------------------- */
	--nits-gutter:  clamp(1.25rem, 5vw, 6.5rem);
	--nits-rail:    clamp(0px, 4.5vw, 92px);   /* left margin rail width   */
	--nits-section: clamp(3.5rem, 7vw, 8rem);  /* vertical section rhythm  */
	--nits-max:     1560px;

	/* --- Radius ------------------------------------------------------- */
	/* Restrained, not rounded-app: enough to read as a considered surface. */
	--nits-radius:    6px;
	--nits-radius-lg: 14px;

	/* --- Motion ------------------------------------------------------- */
	--nits-ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--nits-ease-in:   cubic-bezier(0.6, 0, 0.2, 1);
	--nits-dur:       0.8s;
	--nits-dur-slow:  1.4s;
}

/* Dark ground context — any section can opt in with .nits-ground--dark */
.nits-ground--dark {
	--nits-ground:     var(--nits-oud);
	--nits-ink:        color-mix(in srgb, var(--nits-plaster) 74%, transparent);
	--nits-ink-strong: var(--nits-plaster);
	--nits-rule:       var(--nits-rule-dark);
	background-color:  var(--nits-oud);
	color:             var(--nits-ink);
}

.nits-ground--light {
	--nits-ground:     var(--nits-plaster);
	--nits-ink:        var(--nits-basalt);
	--nits-ink-strong: var(--nits-oud);
	background-color:  var(--nits-plaster);
	color:             var(--nits-ink);
}

.nits-ground--alabaster {
	--nits-ground: var(--nits-alabaster);
	background-color: var(--nits-alabaster);
}

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

body {
	background-color: var(--nits-plaster);
	color: var(--nits-basalt);
	font-family: var(--nits-font-body);
	font-size: var(--nits-t-body);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	 * `clip` rather than `hidden`. `overflow-x: hidden` on the body promotes it
	 * to a scroll container, which stops smooth scrolling (and any library
	 * driving window scroll) from working at all. `clip` trims the overflow
	 * without creating that container.
	 */
	overflow-x: clip;
}

/* Lenis needs these to hand scrolling back correctly. Without them the wheel
   appears dead, because native scroll-behavior fights the library. */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
	font-family: var(--nits-font-display);
	font-weight: 400;
	color: var(--nits-ink-strong);
	letter-spacing: var(--nits-track-display);
	line-height: 1.06;
	margin-top: 0;
}

h1 { font-size: var(--nits-t-d1); }
h2 { font-size: var(--nits-t-d2); }
h3 { font-size: var(--nits-t-d3); }

p { margin-top: 0; }

a { color: inherit; text-decoration: none; transition: color 0.4s var(--nits-ease); }
a:hover, a:focus { color: var(--nits-gold); }

::selection { background: var(--nits-gold); color: var(--nits-oud); }

img { max-width: 100%; height: auto; }

/* Visible, on-brand keyboard focus — never removed */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--nits-gold);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --------------------------------------------------------------------------
   2. SHARED BRAND PRIMITIVES
   These classes are reusable from any Elementor element via the
   "CSS Classes" field, so editors get the system without writing CSS.
   -------------------------------------------------------------------------- */

/* Eyebrow / label — echoes the tracked "DECOR" in the wordmark */
.nits-label {
	font-family: var(--nits-font-utility);
	font-size: var(--nits-t-label);
	font-weight: 500;
	letter-spacing: var(--nits-track-label);
	text-transform: uppercase;
	color: var(--nits-gold);
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	margin: 0 0 1.6rem;
	line-height: 1;
}

.nits-label::before {
	content: "";
	width: clamp(24px, 3vw, 56px);
	height: 1px;
	background: var(--nits-foil);
	flex: 0 0 auto;
}

.nits-label--bare::before { display: none; }

/* Foil text — the gold gradient of the mark, applied to type */
.nits-foil-text {
	background: var(--nits-foil);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Hairline rule with a gold terminal, like a dimension line */
.nits-rule {
	position: relative;
	height: 1px;
	width: 100%;
	background: var(--nits-rule);
}
.nits-rule::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: -1px;
	height: 3px;
	width: 34px;
	background: var(--nits-foil);
}

/* Lead paragraph */
.nits-lead {
	font-size: var(--nits-t-lead);
	font-weight: 300;
	line-height: 1.62;
	max-width: 46ch;
	color: var(--nits-ink);
}

/* Display heading helper */
.nits-display {
	font-family: var(--nits-font-display);
	font-size: var(--nits-t-d1);
	line-height: 1.04;
	letter-spacing: var(--nits-track-display);
	color: var(--nits-ink-strong);
}

.nits-display em,
.nits-display .is-accent {
	font-style: italic;
	background: var(--nits-foil);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Section numeral in the left rail — order genuinely carries meaning here
   (the brand's own six-stage process), so numbering is information. */
.nits-numeral {
	font-family: var(--nits-font-utility);
	font-size: var(--nits-t-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--nits-stone);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */

.nits-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding: 1.15em 2.2em;
	font-family: var(--nits-font-utility);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--nits-ink-strong);
	border: 1px solid var(--nits-rule);
	background: transparent;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	transition: color 0.5s var(--nits-ease), border-color 0.5s var(--nits-ease);
}

/* The fill rises from the baseline — a material being laid, not a hover swap */
.nits-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nits-foil);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.6s var(--nits-ease);
}

.nits-btn:hover,
.nits-btn:focus-visible {
	color: var(--nits-oud);
	border-color: transparent;
}
.nits-btn:hover::before,
.nits-btn:focus-visible::before { transform: scaleY(1); }

.nits-btn__arrow {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	transition: transform 0.5s var(--nits-ease);
}
.nits-btn:hover .nits-btn__arrow { transform: translateX(0.35em); }

.nits-btn--solid {
	background: var(--nits-foil);
	color: var(--nits-oud);
	border-color: transparent;
}
.nits-btn--solid::before { background: var(--nits-oud); }
.nits-btn--solid:hover { color: var(--nits-gold-light); }

.nits-btn--ghost-dark { color: var(--nits-plaster); border-color: var(--nits-rule-dark); }

/* Text link with a rule that draws in from the left */
.nits-link {
	position: relative;
	display: inline-block;
	font-family: var(--nits-font-utility);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding-bottom: 0.55em;
	color: var(--nits-ink-strong);
}
.nits-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 1px; width: 100%;
	background: var(--nits-foil);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s var(--nits-ease);
}
.nits-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   4. LAYOUT RAIL
   The persistent left rail is the architectural device of the whole site:
   a drawing margin that carries section numerals and the Drafting Line.
   -------------------------------------------------------------------------- */

.nits-wrap {
	width: 100%;
	max-width: var(--nits-max);
	margin-inline: auto;
	padding-inline: var(--nits-gutter);
}

.nits-railed {
	display: grid;
	grid-template-columns: var(--nits-rail) minmax(0, 1fr);
	gap: 0;
}

@media (max-width: 900px) {
	.nits-railed { grid-template-columns: minmax(0, 1fr); }
	.nits-railed > .nits-rail-col { display: none; }
}

/* --------------------------------------------------------------------------
   5. SCROLL REVEAL PRIMITIVES
   Elements start hidden only when JS is running, so content is never
   trapped behind a broken script.
   -------------------------------------------------------------------------- */

/*
 * Every variant uses the SAME selector shape, so none can out-specify another
 * and source order decides. This matters: an earlier version qualified the base
 * rule with :not([data-nits-reveal="words"]), which raised it from (0,2,0) to
 * (0,3,0) and made it silently override every declaration in the mask and scale
 * rules below — including their `opacity`, leaving those elements hidden twice
 * over and their transitions replaced. Keep all of these at equal weight.
 */
.nits-js [data-nits-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--nits-dur) var(--nits-ease),
		transform var(--nits-dur) var(--nits-ease);
	transition-delay: var(--nits-reveal-delay, 0s);
}

.nits-js [data-nits-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Words: the container stays put, the individual words do the moving. */
.nits-js [data-nits-reveal="words"] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Material wipe. Uses clip-path rather than opacity, so the image appears to be
   uncovered rather than faded in. */
.nits-js [data-nits-reveal="mask"] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--nits-dur-slow) var(--nits-ease);
	transition-delay: var(--nits-reveal-delay, 0s);
}

.nits-js [data-nits-reveal="mask"].is-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

.nits-js [data-nits-reveal="scale"] {
	opacity: 0;
	transform: scale(1.08);
	transition:
		opacity var(--nits-dur) var(--nits-ease),
		transform var(--nits-dur) var(--nits-ease);
}

.nits-js [data-nits-reveal="scale"].is-revealed {
	opacity: 1;
	transform: scale(1);
}

/*
 * The last line of defence. The motion engine sets this on <html> if anything
 * is still unrevealed after the page has settled, or if the observer is
 * unavailable. Nothing below it can keep content off the screen.
 */
.nits-reveal-all [data-nits-reveal],
.nits-reveal-all .nits-splitword {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
}

/* Word-by-word display reveal, built by JS */
.nits-splitline { display: block; overflow: hidden; }
.nits-splitword {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 1.05s var(--nits-ease);
	transition-delay: var(--nits-word-delay, 0s);
}
.is-revealed .nits-splitword { transform: translateY(0); }

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY — MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nits-js [data-nits-reveal],
	.nits-js [data-nits-reveal="mask"],
	.nits-js [data-nits-reveal="scale"] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.nits-splitword { transform: none !important; transition: none !important; }
	.nits-parallax__inner,
	.nits-float,
	.nits-marquee__track { transform: none !important; animation: none !important; }
	html { scroll-behavior: auto !important; }
}

.nits-screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. ELEMENTOR HARMONISATION
   The theme owns its own document, so there is no parent to quiet. What
   remains is keeping Elementor's containers in step with the brand grid.
   -------------------------------------------------------------------------- */

/* Keep Elementor container widths in step with the brand grid */
.elementor-section.nits-section > .elementor-container { max-width: var(--nits-max); }

/* An Elementor-built page supplies its own rhythm end to end */
.nits-elementor-page .nits-site__content > .elementor { display: block; }

/* Editor safety: motion scenes must stay measurable inside the canvas */
.elementor-editor-active .nits-pin,
.elementor-editor-active .nits-transition__scene { position: relative !important; }

/* --------------------------------------------------------------------------
   8. TYPOGRAPHIC POLISH
   Small things that separate a considered site from a templated one.
   -------------------------------------------------------------------------- */

/* Stop headings breaking with one orphaned word on the last line */
h1, h2, h3,
.nits-display,
.nits-hero__title,
.nits-statement__text { text-wrap: balance; }

.nits-lead,
.nits-prose__body p { text-wrap: pretty; }

/* Proper hyphenation for long body measures, without breaking display type */
.nits-prose__body { hyphens: auto; }
.nits-display, .nits-hero__title, h1, h2, h3 { hyphens: none; }

/* Tabular figures wherever numbers are compared */
.nits-numeral,
.nits-stat__value,
.nits-line__progress { font-variant-numeric: tabular-nums; }

/* Images fade in as they decode, so late-loading media never snaps into place */
.nits-js img { background-color: color-mix(in srgb, var(--nits-stone) 12%, transparent); }

/* Anchored sections clear a fixed header */
:target { scroll-margin-top: clamp(80px, 12vh, 140px); }

/* With smooth scrolling off, in-page anchors still ease — this is the browser
   doing it natively, which never interferes with the wheel. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Print: the legal pages are the ones people actually print */
@media print {
	.nits-line, .nits-cursor, .nits-enquiry-bar, .nits-matter,
	.nits-hero__cue, .nits-marquee { display: none !important; }

	body { background: #fff; color: #000; }
	.nits-block { padding-block: 1.5rem; }
	.nits-prose__block { break-inside: avoid; }
}