/*
 * Jay Jagannath Packers – Dark colour layer.
 *
 * Loaded after the parent theme's compiled CSS. The parent's Tailwind utilities read colours
 * from CSS variables, so most of the dark look comes from redefining those variables below.
 * Unlayered rules here override the parent's @layer rules regardless of specificity.
 *
 * Palette: charcoal surfaces, light text, saffron-orange accents.
 */

/* ------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
	color-scheme: dark;

	/* "white" is the raised surface: cards, menus, inputs, header. */
	--color-white: #1a1a1d;

	/* Neutrals, inverted: low numbers are dark surfaces/borders, high numbers are light text. */
	--color-ink-50: #151517;
	--color-ink-100: #202024;
	--color-ink-200: #2c2c31;
	--color-ink-300: #3f3f46;
	--color-ink-400: #8b8b94;
	--color-ink-500: #a3a3ad;
	--color-ink-600: #bdbdc6;
	--color-ink-700: #d6d6dc;
	--color-ink-800: #ececf0;
	--color-ink-900: #fafafa;

	/* Brand becomes the orange family on dark: 50/200 = warm dark tints, 600–900 = bright text. */
	--color-brand-50: #22180f;
	--color-brand-100: #e9e2da; /* mostly used as light text on dark bands */
	--color-brand-200: #4a2e14;
	--color-brand-300: #8b4f1a;
	--color-brand-400: #ffb066;
	--color-brand-500: #ff9a3d;
	--color-brand-600: #ff8c2b;
	--color-brand-700: #ffa04d;
	--color-brand-800: #ffb46e;
	--color-brand-900: #ffcb99;
	--color-brand-950: #0b0b0c; /* top bar, footer, process band */

	--color-accent-50: #2a1a0b;
	--color-accent-100: #3a2310;
	--color-accent-200: #5a3613;
	--color-accent-300: #ffc170;
	--color-accent-400: #ff9c37;
	--color-accent-500: #ff7f10;
	--color-accent-600: #f06306;
	--color-accent-700: #ff8f2e;
	--color-accent-800: #ffb36a;
	--color-accent-900: #ffd4a6;
}

/* ------------------------------------------------------------------
 * 2. Page and text
 * ------------------------------------------------------------------ */
body {
	background-color: #111113;
}

::selection {
	background: #ff7f10;
	color: #111113;
}

/* Real white text (the "white" token is now a dark surface). */
.text-white,
.hover\:text-white:hover,
.\[\&_a\:hover\]\:text-white a:hover,
.section-brand :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

/* Logo: white name, orange tagline. */
a[rel="home"] .text-brand-900 {
	color: #fafafa;
}

/* Heading highlight: softer underline glow on dark. */
.heading-highlight em,
h1 em,
h2 em {
	background-image: linear-gradient(transparent 70%, rgb(255 127 16 / 0.22) 70%);
}

/* ------------------------------------------------------------------
 * 3. Surfaces, borders, gradients
 * ------------------------------------------------------------------ */
.border-white\/10 {
	border-color: rgb(255 255 255 / 0.1);
}

.bg-dots {
	background-image: radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px);
}

.bg-brand-100 {
	background-color: #24190f;
}

.from-brand-100 {
	--tw-gradient-from: #24190f;
}

.media-placeholder {
	background-image: linear-gradient(135deg, #24190f, #1a1a1d 55%, #2a1a0b);
	color: #ffa04d;
}

.icon-badge {
	--tw-ring-color: #3a2612;
}

/* CTA band: deep charcoal gradient (its orange glow comes from the parent markup). */
.from-brand-700.via-brand-800 {
	background-image: linear-gradient(135deg, #222226 0%, #161618 55%, #0b0b0c 100%);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* Contact page business panel: charcoal with an orange accent line. */
.from-brand-700.to-brand-900 {
	background-image: linear-gradient(135deg, #24242a 0%, #17171a 100%);
	border-top: 3px solid #ff7f10;
}

/* Cards and panels get a faint top highlight instead of relying on shadows. */
.card,
.faq-item,
.menu-primary .sub-menu,
.post-nav a {
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px -12px rgb(0 0 0 / 0.6);
}

/* ------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------ */
/* Primary = light button; Accent = orange button with dark text (both pass AA). */
.btn-primary {
	background-color: #f4f4f5;
	color: #111113;
	--tw-shadow-color: rgb(0 0 0 / 0.4);
}

.btn-primary:hover {
	background-color: #ffffff;
}

.btn-accent,
.jjp-form .ff-btn-submit {
	color: #140a02 !important;
}

.btn-whatsapp {
	color: #fff;
}

.btn-ghost-light {
	background-color: rgb(255 255 255 / 0.08);
	color: #fff;
	--tw-ring-color: rgb(255 255 255 / 0.3);
}

.btn-ghost-light:hover {
	background-color: rgb(255 255 255 / 0.16);
}

/* Orange badges with small text: dark text for contrast. */
.bg-brand-700.text-white {
	color: #140a02;
}

/* ------------------------------------------------------------------
 * 5. Enquiry form (Fluent Forms)
 * ------------------------------------------------------------------ */
/* Fluent Forms' own stylesheet loads later and sets a grey text colour, so these win explicitly. */
.jjp-form .ff-el-form-control,
.jjp-form .fluentform .ff-el-form-control {
	background-color: #121214 !important;
	color: #fafafa !important;
}

.jjp-form .ff-el-form-control::placeholder {
	color: #8b8b94;
}

.jjp-form select.ff-el-form-control option {
	background-color: #1a1a1d;
	color: #fafafa;
}

.jjp-form .ff-message-success {
	background-color: #0f2a1b;
	color: #bbf7d0;
	--tw-ring-color: #1f5c3a;
}

.jjp-form .error,
.jjp-form .text-danger {
	color: #fca5a5;
}

/* ------------------------------------------------------------------
 * 6. WordPress core bits
 * ------------------------------------------------------------------ */
/* Image lightbox (Gallery page). */
.wp-lightbox-overlay .scrim {
	background-color: #0b0b0c !important;
}

.wp-lightbox-overlay .close-button {
	fill: #fafafa;
	color: #fafafa;
}

.screen-reader-text:focus {
	color: #111113;
	background-color: #fafafa;
}