/*
Theme Name: Nje Catering
Theme URI: https://njebybuka.com
Author: Nje by Buka
Author URI: https://njebybuka.com
Description: Custom theme for Nje by Buka, the catering arm of Buka Restaurant. Built as a lightweight, Elementor Pro-ready base — all page layouts are built with Elementor & Elementor Pro (Theme Builder, Forms, Nav Menu widget). This stylesheet only carries brand fonts, color tokens, and the minimal structural CSS needed to keep native WordPress/browser chrome (menus, buttons, forms) on-brand outside the Elementor canvas.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nje-catering
*/

/* ==========================================================================
   Brand Design Tokens
   These custom properties are the single source of truth for brand colors.
   Reference them in Elementor's Global Colors (Site Settings) using the
   same hex values so Elementor widgets and any native-CSS fallback markup
   always stay in sync.
   ========================================================================== */

:root {
	/* Core palette (from brand design) */
	--nje-color-maroon: #341620;      /* Deep aubergine/maroon - primary dark surface & wordmark */
	--nje-color-cream: #E0D9CA;       /* Warm cream - primary light surface */
	--nje-color-white: #FFFFFF;
	--nje-color-black: #000000;
	--nje-color-terracotta: #C24921;  /* Burnt orange/terracotta - primary accent, CTAs */
	--nje-color-gold: #9F7D52;        /* Muted gold - secondary accent */

	/* Image overlay gradients (used behind hero text for legibility) */
	--nje-overlay-soft: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%);
	--nje-overlay-mid: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
	--nje-overlay-light: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
	--nje-scrim-80: #00000099;
	--nje-scrim-50: #00000080;
	--nje-scrim-40: #00000066;

	/* Typography */
	--nje-font-display: 'Melodin', serif;             /* Tall condensed display serif - headlines */
	--nje-font-body: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; /* UI / body / nav */

	/* Spacing scale */
	--nje-space-xs: 0.5rem;
	--nje-space-sm: 1rem;
	--nje-space-md: 1.5rem;
	--nje-space-lg: 2.5rem;
	--nje-space-xl: 4rem;
	--nje-space-2xl: 6rem;

	/* Layout */
	--nje-container-width: 1280px;
}

/* ==========================================================================
   Font Face Declarations
   ========================================================================== */

@font-face {
	font-family: 'Melodin';
	src: url('assets/fonts/melodin/Melodin.woff2') format('woff2'),
		 url('assets/fonts/melodin/Melodin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('assets/fonts/sf-pro-display/SFProDisplay-Regular.woff2') format('woff2'),
		 url('assets/fonts/sf-pro-display/SFProDisplay-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('assets/fonts/sf-pro-display/SFProDisplay-Medium.woff2') format('woff2'),
		 url('assets/fonts/sf-pro-display/SFProDisplay-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('assets/fonts/sf-pro-display/SFProDisplay-Semibold.woff2') format('woff2'),
		 url('assets/fonts/sf-pro-display/SFProDisplay-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('assets/fonts/sf-pro-display/SFProDisplay-Bold.woff2') format('woff2'),
		 url('assets/fonts/sf-pro-display/SFProDisplay-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Base / Reset
   Kept intentionally minimal - Elementor Pro's Theme Builder and the page
   editor own layout and visual styling. This just sets sane, on-brand
   defaults for anything rendered outside the builder canvas.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--nje-font-body);
	background-color: var(--nje-color-cream);
	color: var(--nje-color-maroon);
	line-height: 1.5;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

/* Respect reduced-motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visible keyboard focus outline (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--nje-color-terracotta);
	outline-offset: 2px;
}

/* ==========================================================================
   Fallback nav styling
   Only applies if a page/location has no Elementor Pro template assigned
   yet (see inc/theme-builder-fallback.php). Keeps the site from looking
   broken during setup, before the header/footer are built in Theme Builder.
   ========================================================================== */

.nje-fallback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--nje-space-sm) var(--nje-space-lg);
	background-color: var(--nje-color-cream);
	border-bottom: 1px solid var(--nje-color-gold);
}

.nje-fallback-header__logo img {
	height: 40px;
	width: auto;
}

.nje-fallback-nav ul {
	display: flex;
	gap: var(--nje-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nje-fallback-nav a {
	text-decoration: none;
	font-weight: 500;
}

.nje-fallback-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--nje-space-xs);
}

.nje-fallback-nav__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--nje-color-maroon);
}

@media (max-width: 782px) {
	.nje-fallback-nav__toggle {
		display: flex;
	}

	.nje-fallback-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--nje-color-cream);
		padding: var(--nje-space-sm) var(--nje-space-lg);
		border-bottom: 1px solid var(--nje-color-gold);
	}

	.nje-fallback-nav.is-open {
		display: block;
	}

	.nje-fallback-nav ul {
		flex-direction: column;
		gap: var(--nje-space-sm);
	}

	.nje-fallback-header {
		position: relative;
	}
}

.nje-fallback-footer {
	padding: var(--nje-space-xl) var(--nje-space-lg);
	background-color: var(--nje-color-cream);
	border-top: 1px solid var(--nje-color-gold);
	text-align: center;
	font-size: 0.875rem;
}

.nje-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	background: var(--nje-color-maroon);
	color: var(--nje-color-cream);
	padding: var(--nje-space-xs) var(--nje-space-sm);
}

.nje-skip-link:focus {
	left: var(--nje-space-sm);
	top: var(--nje-space-sm);
}