/*
Theme Name: Noor Shukran
Theme URI: https://example.com/noor-shukran
Author: Noor Shukran
Author URI: https://example.com
Description: Corporate manufacturing and B2B solutions theme. Fully customizable via the WordPress Customizer. Features hero, divisions, sustainability, partnerships, and CTA sections.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noor-shukran
Tags: custom-background, custom-logo, custom-menu, featured-images, theme-options, translation-ready, wide-blocks
*/

/* Customizer CSS variables for brand colors (logo green palette).
 * The five editable colours (primary, accent, brand, background-light,
 * surface-light) are overridden at runtime by the WordPress Customizer via
 * wp_add_inline_style(). The remaining variables are fixed design tokens.
 * All of these drive the compiled Tailwind utilities in assets/css/tailwind.min.css.
 */
:root {
	/* Customizer-editable */
	--ns-primary:           #14532d;
	--ns-accent:            #064e3b;
	--ns-brand:             #14532d;
	--ns-background-light:  #ffffff;
	--ns-surface-light:     #ffffff;

	/* Fixed design tokens */
	--ns-primary-hover:     #064e3b;
	--ns-primary-light:     #f0fdf4;
	--ns-primary-dark:      #022c22;
	--ns-background-dark:   #0f172a;
	--ns-navy:              #0A0E1A;
	--ns-body-grey:         #333333;
	--ns-secondary:         #10b981;
}

body {
	font-family: 'Poppins', sans-serif;
}

/* Tailwind accessibility utility (missing in compiled CSS). */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Products hero: start just below the global header (so green block never hides behind it) */
body.ns-products-archive .ns-products-hero,
body.page-template-page-products .ns-products-hero {
	/* Move the whole hero down so it starts below the header */
	margin-top: 5.5rem;
	/* Internal spacing for the text/content */
	padding-top: 3.5rem !important;
	padding-bottom: 4.25rem !important;
	min-height: 400px;
}

@media (min-width: 640px) {
	body.ns-products-archive .ns-products-hero,
	body.page-template-page-products .ns-products-hero {
		margin-top: 6.25rem;
		padding-top: 3.75rem !important;
		padding-bottom: 5rem !important;
		min-height: 470px;
	}
}

/* Products hero search spacing (pl-12 utility is missing in compiled CSS). */
body.ns-products-archive .ns-products-hero #ns-products-search,
body.page-template-page-products .ns-products-hero #ns-products-search {
	padding-left: 3rem !important;
}

body.ns-products-archive .ns-products-hero .ns-products-search-icon,
body.page-template-page-products .ns-products-hero .ns-products-search-icon {
	width: 3rem;
	justify-content: center;
	padding-left: 0 !important;
}

/* Ensure header stays sticky above all content */
#site-header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* On Products layouts, hard-fix header to viewport so it always stays visible */
body.ns-products-archive #site-header.site-header,
body.page-template-page-products #site-header.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 9999 !important;
}

/* When admin bar is visible, offset fixed header below it on Products layouts */
body.admin-bar.ns-products-archive #site-header.site-header,
body.admin-bar.page-template-page-products #site-header.site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar.ns-products-archive #site-header.site-header,
	body.admin-bar.page-template-page-products #site-header.site-header {
		top: 46px !important;
	}
}

/* Increase header vertical height */
#site-header.site-header .container > .flex {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
}

/* When admin bar is visible, stick header below it */
body.admin-bar #site-header.site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #site-header.site-header {
		top: 46px;
	}
}

.hero-gradient {
	background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.5));
}

.editorial-tile {
	aspect-ratio: 4/5;
}

/* Active item for primary menu when a WP menu is assigned */
.ns-main-nav .current-menu-item > a,
.ns-main-nav .current_page_item > a {
	color: var(--ns-brand);
	border-bottom: 2px solid var(--ns-brand);
	padding-bottom: 0.25rem;
}

/* Insights / blog page: hide scrollbar on topic pill strip */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}
.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* About Us page: hero overlay (slightly greener tint) */
.hero-video-overlay {
	background: linear-gradient(to bottom, rgba(5, 46, 22, 0.4), rgba(15, 23, 42, 0.8));
}

/* Delivery & Logistics page: hero overlay */
.hero-overlay-logistics {
	background: linear-gradient(rgba(12, 74, 110, 0.85), rgba(2, 6, 23, 0.9));
}

/* About Us page: timeline vertical line */
.timeline-line {
	position: relative;
}
.timeline-line::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 100%;
	background: #e2e8f0;
}
.dark .timeline-line::before {
	background: #1e293b;
}
@media (max-width: 767px) {
	.timeline-line::before {
		left: 1.75rem;
		transform: none;
	}
}

/* Footer: scroll-to-top button transition */
.ns-scroll-to-top {
	transition: opacity 0.3s ease, background-color 0.2s ease;
}

/* Terms & Conditions: accordion */
.page-terms .ns-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-out;
}
.page-terms .ns-accordion-item-active .ns-accordion-content {
	max-height: 1200px;
}
.page-terms .ns-accordion-item-active .ns-accordion-chevron {
	transform: rotate(180deg);
}