/**
 * NOUR — late-loading overrides
 *
 * Enqueued after loobek-responsive.css and the Redux-compiled loobek-dynamic-css, so
 * rules here beat theme CSS. Put responsive fixes and anything the theme fights here;
 * put ordinary brand styling in style.css.
 *
 * ⚠️ This file does NOT beat Elementor. Elementor's per-post stylesheet
 * (e.g. `elementor-post-21329`) is enqueued after everything, so any property Elementor
 * also sets — margin, padding, typography on a widget — must be changed in the widget's
 * own settings instead, not here. The footer's stacked-column spacing is set that way
 * (`_margin_tablet` / `_margin_mobile` on nfh1, nfh2, nfh3, nfh5).
 *
 * Palette: gold #C39348 · ink #000 · muted #808080 · border #E5E5E5 · tint #F3EFEB
 */

/* ==========================================================================
   NOUR content-page design layer
   --------------------------------------------------------------------------
   Signature device: THE THREAD.

   Aari embroidery is one continuous chain stitch — each loop locking into the
   last — which is exactly why it can hold a flowing curve where separate
   stitches cannot. The vertical gold hairline running through the Our Craft
   stages is that chain: a single unbroken line with a node at each step. It
   encodes how the craft actually works rather than decorating the page.

   Everything else is kept deliberately quiet: the confirmed palette only, one
   typeface (Plus Jakarta Sans, inherited from the theme), imagery doing the
   heavy lifting. Boldness is spent in one place.
   ========================================================================== */

:root {
	--nour-gold: #C39348;
	--nour-ink: #000;
	--nour-muted: #808080;
	--nour-line: #E5E5E5;
	--nour-tint: #F3EFEB;
}

/* -------------------------------------------------- eyebrow / section label */
.nour-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nour-gold);
	margin: 0 0 0.75rem;
}

/* ------------------------------------------------------ THE THREAD (process) */
.nour-thread {
	position: relative;
	margin: 0;
	padding: 0 0 0 68px;
	list-style: none;
}

/* the continuous chain — one line, never segmented */
.nour-thread::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--nour-gold) 6%, var(--nour-gold) 94%, transparent);
}

/* The theme re-applies a list marker to <ol> children, which printed a stray "4."
   above each stage alongside our counter. Suppress both the marker and any
   theme-supplied list-style. */
.nour-thread > li {
	position: relative;
	padding: 0 0 3rem;
	list-style: none;
}

.nour-thread > li::marker {
	content: none;
}

.nour-thread > li:last-child {
	padding-bottom: 0;
}

/* the loop: each stage links into the thread */
.nour-thread > li::before {
	content: counter(nour-step, decimal-leading-zero);
	counter-increment: nour-step;
	position: absolute;
	left: -68px;
	top: -2px;
	width: 46px;
	height: 46px;
	border: 1px solid var(--nour-gold);
	border-radius: 50%;
	background: #fff;
	color: var(--nour-gold);
	font-size: 12px;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nour-thread {
	counter-reset: nour-step;
}

.nour-thread h3 {
	margin: 0 0 0.5rem;
	font-size: 22px;
	line-height: 1.3;
}

.nour-thread p {
	margin: 0;
	color: #3a3a3a;
}

/* ------------------------------------------ real vs imitation comparison */
.nour-compare {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.nour-compare th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--nour-line);
}

.nour-compare th:first-child { color: var(--nour-gold); }
.nour-compare th:last-child  { color: var(--nour-muted); }

.nour-compare td {
	padding: 1.15rem 1.5rem 1.15rem 0;
	border-bottom: 1px solid var(--nour-line);
	vertical-align: top;
	width: 50%;
}

.nour-compare td:last-child {
	padding-right: 0;
	color: var(--nour-muted);
}

.nour-compare tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- gifting: the price ladder */
.nour-ladder {
	display: grid;
	gap: 1px;
	background: var(--nour-line);
	border: 1px solid var(--nour-line);
}

.nour-tier {
	background: #fff;
	padding: 2rem 1.75rem;
	position: relative;
}

/* the rung: weight increases with the tier, so the ladder reads as ascending */
.nour-tier::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--nour-gold);
}

.nour-tier--1::after { width: 2px; opacity: 0.35; }
.nour-tier--2::after { width: 4px; opacity: 0.65; }
.nour-tier--3::after { width: 7px; opacity: 1; }

.nour-tier .nour-amount {
	display: block;
	font-size: 30px;
	line-height: 1.1;
	margin: 0 0 0.35rem;
}

.nour-tier .nour-for {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nour-muted);
	margin-bottom: 1rem;
}

.nour-tier p { margin: 0; }

@media (min-width: 782px) {
	.nour-ladder { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ pull quote */
.nour-pull {
	border-left: 2px solid var(--nour-gold);
	padding: 0.35rem 0 0.35rem 1.5rem;
	margin: 2rem 0;
	font-size: 20px;
	line-height: 1.6;
}

/* --------------------------------------------------- mobile: thread reflow */
@media (max-width: 600px) {
	.nour-thread { padding-left: 54px; }
	.nour-thread::before { left: 17px; }
	.nour-thread > li::before { left: -54px; width: 36px; height: 36px; font-size: 11px; }
	.nour-compare td { display: block; width: auto; padding-right: 0; }
	.nour-compare thead { display: none; }
	.nour-compare td:first-child::before { content: "Genuine — "; color: var(--nour-gold); }
	.nour-compare td:last-child::before  { content: "Imitation — "; }
}

/* ==========================================================================
   Instagram reels row (home page)
   --------------------------------------------------------------------------
   Facade pattern: each card is a poster image + play control. The Instagram
   iframe is only injected on click, because an Instagram embed pulls roughly a
   megabyte of third-party JS and would otherwise load five times on every visit
   to the home page. Posters themselves load lazily via IntersectionObserver.

   Cards are 9:16 because that is the format reels are shot in — letterboxing
   them into a landscape grid would waste the whole point of the medium.
   ========================================================================== */

.nour-reels {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 1fr);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

@media (min-width: 1025px) {
	.nour-reels {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, 1fr);
		overflow: visible;
	}
}

.nour-reel {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #111;
	scroll-snap-align: start;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: block;
	width: 100%;
}

.nour-reel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(.2, .7, .3, 1), opacity 300ms ease;
}

.nour-reel:hover img,
.nour-reel:focus-visible img {
	transform: scale(1.04);
}

.nour-reel:focus-visible {
	outline: 2px solid #C39348;
	outline-offset: 3px;
}

/* bottom scrim so the caption stays legible over any frame */
.nour-reel::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
	pointer-events: none;
}

.nour-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .85);
	background: rgba(0, 0, 0, .28);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 300ms ease, border-color 300ms ease;
	z-index: 2;
}

.nour-reel:hover .nour-reel__play {
	background: #C39348;
	border-color: #C39348;
}

.nour-reel__play::before {
	content: "";
	border-left: 12px solid #fff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 4px;
}

.nour-reel__label {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 13px;
	z-index: 2;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	text-align: left;
	letter-spacing: 0.01em;
}

.nour-reel__handle {
	display: block;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C39348;
	margin-bottom: 3px;
}

/* once activated the card becomes the player */
.nour-reel.is-playing::after,
.nour-reel.is-playing .nour-reel__play,
.nour-reel.is-playing .nour-reel__label {
	display: none;
}

.nour-reel iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.nour-reels-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.nour-reel img { transition: none; }
	.nour-reel:hover img { transform: none; }
}

/* Footer link rhythm — a touch more space than the theme default so the six-item
   columns read as a list rather than a block of text. */
footer .elementor-widget-icon-list .elementor-icon-list-item {
	line-height: 1.7;
}

/* Legal row sits visually below the copyright line, and picks up the brand gold on
   hover like the rest of the footer links. */
footer .elementor-element-nfl4 .elementor-icon-list-item a {
	opacity: 0.85;
}

footer .elementor-element-nfl4 .elementor-icon-list-item a:hover {
	opacity: 1;
	color: #C39348;
}