/**
 * National Days Child - Ultra-Premium Editorial Stylesheet
 * Strict Brand Palette: Red (#d32726), Blue (#3aa4dc), Rose (#d2395d), Navy (#0f2433)
 * Full Light & Dark Mode, WCAG AA compliant, Fluid Clamp Typography
 */

/* 1. CSS CUSTOM PROPERTIES & ROOT VARIABLES */
:root {
	/* Brand Color Tokens Extracted From Official Logo */
	--nd-primary-red: #E52726; /* Vibrant Red from Logo Star & Text */
	--nd-primary-red-hover: #c41f1e;
	--nd-secondary-blue: #00A6EB; /* Cyan Globe Blue from Logo */
	--nd-secondary-blue-dark: #0077B6; /* WCAG AA accessible contrast on white */
	--nd-accent-rose: #EC1C6F; /* Magenta/Pink from "A" Badge in Logo */
	--nd-navy-dark: #0A1C2C; /* Midnight Navy derived from Logo Palette */
	--nd-navy-light: #15334E;

	/* Soft Section Tints (5-10% opacity) */
	--nd-tint-red: rgba(229, 39, 38, 0.06);
	--nd-tint-blue: rgba(0, 166, 235, 0.08);
	--nd-tint-rose: rgba(236, 28, 111, 0.07);
	--nd-tint-green: rgba(46, 125, 50, 0.07);

	/* Surface & Neutrals */
	--nd-bg-page: #fbfcfe;
	--nd-bg-card: #ffffff;
	--nd-bg-header: #ffffff;
	--nd-text-main: #0a1c2c;
	--nd-text-muted: #576b7c;
	--nd-border-color: #e4edf4;

	/* Gradients from Logo */
	--nd-grad-hero: linear-gradient(135deg, #E52726 0%, #EC1C6F 100%);
	--nd-grad-navy: linear-gradient(135deg, #0A1C2C 0%, #15334E 100%);

	/* Fluid Typography & Scale */
	--nd-font-heading: 'Playfair Display', Georgia, serif;
	--nd-font-body: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
	--nd-font-size-h1: clamp(2rem, 4vw + 1rem, 3.2rem);
	--nd-font-size-h2: clamp(1.6rem, 2.8vw + 0.8rem, 2.4rem);
	--nd-font-size-h3: clamp(1.2rem, 1.8vw + 0.5rem, 1.6rem);
	--nd-font-size-body: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);

	/* Radii & Elevation */
	--nd-radius-card: 18px;
	--nd-radius-sm: 8px;
	--nd-radius-pill: 9999px;
	--nd-shadow-sm: 0 2px 6px rgba(10, 28, 44, 0.04);
	--nd-shadow-md: 0 8px 24px rgba(10, 28, 44, 0.08);
	--nd-shadow-hover: 0 14px 32px rgba(10, 28, 44, 0.12);
	--nd-transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Logo Proportions & Sizing */
	--nd-logo-height: 120px;
	--nd-logo-width: 206px;
	--nd-logo-height-mobile: 78px;
	--nd-logo-width-mobile: 134px;
	--nd-logo-height-shrunk: 68px;
	--nd-logo-width-shrunk: 117px;
	--nd-footer-logo-height: 85px;
	--nd-footer-logo-width: 146px;
}

/* 2. DARK MODE PALETTE */
[data-theme="dark"] {
	--nd-bg-page: #0a1721;
	--nd-bg-card: #0f2433;
	--nd-bg-header: #0d1e2b;
	--nd-text-main: #f0f4f8;
	--nd-text-muted: #9ab1c4;
	--nd-border-color: #1e3a4f;
	--nd-tint-red: rgba(211, 39, 38, 0.15);
	--nd-tint-blue: rgba(58, 164, 220, 0.15);
	--nd-tint-rose: rgba(210, 57, 93, 0.15);
	--nd-tint-green: rgba(46, 125, 50, 0.15);
	--nd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--nd-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--nd-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* 3. BASE RESETS & TYPOGRAPHY */
body {
	background-color: var(--nd-bg-page);
	color: var(--nd-text-main);
	font-family: var(--nd-font-body);
	font-size: var(--nd-font-size-body);
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--nd-text-main);
	font-family: var(--nd-font-heading);
	line-height: 1.25;
	margin-top: 0;
}

a {
	color: var(--nd-secondary-blue-dark);
	text-decoration: none;
	transition: var(--nd-transition);
}
a:hover {
	color: var(--nd-primary-red);
}

.ndc-container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

.text-center { text-align: center; }

/* 4. BUTTONS & UI CONTROLS */
.ndc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: var(--nd-radius-pill);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	border: 2px solid transparent;
	transition: var(--nd-transition);
	text-decoration: none;
}
.ndc-btn-primary {
	background-color: var(--nd-primary-red);
	color: #ffffff !important;
}
.ndc-btn-primary:hover {
	background-color: var(--nd-primary-red-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(211, 39, 38, 0.3);
}
.ndc-btn-secondary {
	background-color: var(--nd-secondary-blue);
	color: #ffffff !important;
}
.ndc-btn-outline {
	background: transparent;
	border-color: var(--nd-border-color);
	color: var(--nd-text-main) !important;
}
.ndc-btn-outline:hover {
	border-color: var(--nd-primary-red);
	color: var(--nd-primary-red) !important;
}
.ndc-btn-sm { padding: 6px 16px; font-size: 0.85rem; }
.ndc-btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.ndc-btn-block { display: block; width: 100%; }

/* 5. STICKY HEADER & DATE STRIP */
.ndc-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--nd-bg-header);
	border-bottom: 1px solid var(--nd-border-color);
	transition: var(--nd-transition);
}
.ndc-header.is-shrunk {
	box-shadow: var(--nd-shadow-md);
}
.ndc-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1320px;
	margin: 0 auto;
	padding: 8px 24px;
	min-height: 96px;
}
.ndc-header-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.ndc-logo-link {
	display: inline-flex;
	align-items: center;
	padding: 2px 0;
	line-height: 1;
}
.ndc-logo-img {
	height: var(--nd-logo-height, 120px);
	width: var(--nd-logo-width, auto);
	max-height: 130px;
	max-width: 240px;
	object-fit: contain;
	display: block;
	transition: var(--nd-transition);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}
.ndc-logo-img:hover {
	transform: scale(1.03);
}
.ndc-header.is-shrunk .ndc-logo-img {
	height: var(--nd-logo-height-shrunk, 68px);
	width: var(--nd-logo-width-shrunk, auto);
	max-height: 72px;
}
.ndc-footer-logo-badge {
	display: inline-block;
	background: #ffffff;
	padding: 12px 20px;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	transition: var(--nd-transition);
}
.ndc-footer-logo-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.ndc-footer-logo {
	height: var(--nd-footer-logo-height, 85px);
	width: var(--nd-footer-logo-width, auto);
	max-height: 95px;
	max-width: 175px;
	object-fit: contain;
	display: block;
}

/* Breadcrumbs Styling */
.ndc-breadcrumbs {
	padding: 16px 0 24px 0;
}
.ndc-breadcrumb-trail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	background: var(--nd-bg-card);
	padding: 6px 16px;
	border-radius: var(--nd-radius-pill);
	border: 1px solid var(--nd-border-color);
	box-shadow: var(--nd-shadow-sm);
}
.ndc-bc-link {
	color: var(--nd-secondary-blue-dark);
	font-weight: 600;
	text-decoration: none;
}
.ndc-bc-link:hover {
	color: var(--nd-primary-red);
}
.ndc-bc-sep {
	color: var(--nd-text-muted);
	font-weight: 400;
}
.ndc-bc-current {
	color: var(--nd-text-main);
	font-weight: 700;
}
.ndc-desktop-nav .ndc-menu-list {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ndc-menu-item {
	position: relative;
}
.ndc-menu-item a,
.ndc-dropdown-btn {
	color: var(--nd-text-main);
	font-weight: 600;
	font-size: 0.95rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ndc-menu-item:hover > a,
.ndc-menu-item:hover > .ndc-dropdown-btn {
	color: var(--nd-primary-red);
}

/* Mega Dropdown */
.ndc-megamenu-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: -150px;
	width: 480px;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	box-shadow: var(--nd-shadow-hover);
	padding: 20px;
	z-index: 100;
}
.ndc-has-megamenu:hover .ndc-megamenu-panel {
	display: block;
}
.ndc-megamenu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.ndc-month-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--nd-bg-page);
	color: var(--nd-text-main) !important;
	font-size: 0.9rem;
}
.ndc-month-chip:hover {
	background: var(--nd-tint-red);
	color: var(--nd-primary-red) !important;
}
.m-num {
	font-weight: 800;
	color: var(--nd-primary-red);
	font-size: 0.8rem;
}

/* Dropdown standard */
.ndc-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: 12px;
	box-shadow: var(--nd-shadow-md);
	list-style: none;
	padding: 8px 0;
	margin: 0;
	z-index: 100;
}
.ndc-has-dropdown:hover .ndc-dropdown-menu {
	display: block;
}
.ndc-dropdown-menu li a {
	padding: 8px 16px;
	display: block;
	font-size: 0.9rem;
}
.ndc-dropdown-menu li a:hover {
	background: var(--nd-tint-blue);
}

/* Header Action Icons */
.ndc-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ndc-icon-btn {
	background: none;
	border: 1px solid var(--nd-border-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--nd-text-main);
	transition: var(--nd-transition);
}
.ndc-icon-btn:hover {
	border-color: var(--nd-primary-red);
	color: var(--nd-primary-red);
}

/* Date Strip Scroller */
.ndc-date-strip {
	background: var(--nd-bg-page);
	border-top: 1px solid var(--nd-border-color);
	border-bottom: 1px solid var(--nd-border-color);
	padding: 8px 0;
}
.ndc-strip-wrapper {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ndc-strip-scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1;
}
.ndc-strip-scroll::-webkit-scrollbar { display: none; }
.ndc-strip-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 18px;
	border-radius: var(--nd-radius-pill);
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	color: var(--nd-text-main) !important;
	white-space: nowrap;
	min-width: 90px;
	font-size: 0.85rem;
}
.ndc-strip-pill.is-today {
	background: var(--nd-primary-red);
	color: #ffffff !important;
	border-color: var(--nd-primary-red);
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(211, 39, 38, 0.3);
}
.ndc-strip-arrow {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* 6. CARDS & GRID SYSTEM */
.ndc-cards-grid {
	display: grid;
	gap: 24px;
}
.ndc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ndc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ndc-grid-1 { grid-template-columns: 1fr; }

.ndc-card {
	background: var(--nd-bg-card);
	border-radius: var(--nd-radius-card);
	border: 1px solid var(--nd-border-color);
	overflow: hidden;
	box-shadow: var(--nd-shadow-sm);
	transition: var(--nd-transition);
	display: flex;
	flex-direction: column;
}
.ndc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nd-shadow-hover);
	border-color: var(--nd-secondary-blue);
}
.ndc-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--nd-navy-dark);
}
.ndc-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.ndc-card:hover .ndc-card-img {
	transform: scale(1.05);
}
.ndc-card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: linear-gradient(135deg, var(--nd-navy-dark), var(--nd-navy-light));
}
.ndc-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 4px 12px;
	border-radius: var(--nd-radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ndc-badge-date {
	background: rgba(15, 36, 51, 0.85);
	backdrop-filter: blur(6px);
	color: #ffffff;
}
.ndc-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ndc-card-categories {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.ndc-cat-chip {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--nd-secondary-blue-dark);
	background: var(--nd-tint-blue);
	padding: 3px 8px;
	border-radius: 6px;
}
.ndc-cat-more {
	font-size: 0.78rem;
	color: var(--nd-text-muted);
}
.ndc-card-title {
	font-size: 1.25rem;
	margin: 0 0 10px 0;
	line-height: 1.35;
}
.ndc-card-excerpt {
	color: var(--nd-text-muted);
	font-size: 0.92rem;
	margin-bottom: 16px;
	flex: 1;
}
.ndc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--nd-primary-red);
}

/* 7. HOMEPAGE SPECIFIC SECTIONS */
.ndc-hero-layout {
	display: grid;
	grid-template-columns: 68% 30%;
	gap: 32px;
	padding-top: 36px;
}
.ndc-slider {
	background: var(--nd-grad-hero);
	border-radius: var(--nd-radius-card);
	padding: 48px;
	color: #ffffff;
	position: relative;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ndc-slide { display: none; }
.ndc-slide.is-active { display: block; animation: fadeIn 400ms ease; }
.ndc-slide-tag {
	font-size: 0.85rem;
	letter-spacing: 1px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.9);
}
.ndc-slide-title {
	color: #ffffff;
	font-size: var(--nd-font-size-h1);
	margin: 14px 0;
}
.ndc-slide-desc {
	font-size: 1.1rem;
	max-width: 600px;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 24px;
}
.ndc-slide-actions {
	display: flex;
	gap: 16px;
}
.ndc-slider-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}
.ndc-slider-prev, .ndc-slider-next {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #ffffff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	cursor: pointer;
}
.ndc-slider-dots .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	margin: 0 4px;
	cursor: pointer;
}
.ndc-slider-dots .dot.is-active {
	background: #ffffff;
	width: 24px;
	border-radius: 12px;
}

/* Hero Sidebar Widget Stack */
.ndc-hero-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ndc-sidebar-card {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 24px;
	box-shadow: var(--nd-shadow-sm);
}
.ndc-scard-title { font-size: 1.2rem; margin-bottom: 8px; }
.ndc-scard-sub { font-size: 0.88rem; color: var(--nd-text-muted); margin-bottom: 14px; }
.ndc-social-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ndc-soc-btn {
	text-align: center;
	padding: 8px;
	border-radius: 8px;
	background: var(--nd-bg-page);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--nd-text-main);
	border: 1px solid var(--nd-border-color);
}
.ndc-soc-btn:hover {
	border-color: var(--nd-primary-red);
	color: var(--nd-primary-red);
}

/* Mini Calendar Component */
.ndc-mini-calendar-widget {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 20px;
	box-shadow: var(--nd-shadow-sm);
}
.ndc-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.ndc-cal-month-title { font-weight: 800; font-size: 1.05rem; }
.ndc-cal-nav {
	background: none;
	border: 1px solid var(--nd-border-color);
	border-radius: 6px;
	padding: 4px 10px;
	cursor: pointer;
}
.ndc-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--nd-text-muted);
	margin-bottom: 8px;
}
.ndc-cal-days-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}
.ndc-cal-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	border-radius: 8px;
	color: var(--nd-text-main);
	text-decoration: none;
}
.ndc-cal-cell:hover:not(.is-empty) {
	background: var(--nd-tint-blue);
	color: var(--nd-secondary-blue-dark);
}
.ndc-cal-cell.is-today {
	background: var(--nd-primary-red);
	color: #ffffff !important;
	font-weight: 800;
}

/* Section Containers & Tints */
.ndc-section { padding: 60px 0; }
.ndc-section-tinted { background: var(--nd-bg-page); }

.ndc-subheading {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--nd-primary-red);
	margin-bottom: 8px;
}
.ndc-section-title { font-size: var(--nd-font-size-h2); margin-bottom: 12px; }
.ndc-section-lead { font-size: 1.1rem; color: var(--nd-text-muted); margin-bottom: 32px; }

/* Split Layout (Coming Up Tomorrow + Recipe) */
.ndc-split-layout {
	display: grid;
	grid-template-columns: 42% 55%;
	gap: 40px;
}
.ndc-thumb-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0;
}
.ndc-thumb-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: 12px;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	color: var(--nd-text-main) !important;
}
.ndc-thumb-item:hover {
	border-color: var(--nd-secondary-blue);
	transform: translateX(4px);
}
.ndc-titem-media {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--nd-navy-dark);
}
.ndc-titem-media img { width: 100%; height: 100%; object-fit: cover; }
.ndc-titem-title { font-size: 0.98rem; margin: 0 0 4px 0; }
.ndc-titem-cat { font-size: 0.82rem; color: var(--nd-text-muted); }

/* Recipe Promo Card */
.ndc-recipe-card {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 32px;
	box-shadow: var(--nd-shadow-sm);
	margin-bottom: 20px;
}
.ndc-recipe-badge {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--nd-accent-rose);
	letter-spacing: 1px;
	margin-bottom: 8px;
}
.ndc-recipe-title { font-size: 1.8rem; margin-bottom: 12px; }
.ndc-recipe-meta {
	display: flex;
	gap: 18px;
	font-size: 0.88rem;
	color: var(--nd-text-muted);
	margin-bottom: 16px;
}
.ndc-recipe-actions { display: flex; gap: 14px; margin-top: 20px; }

/* Word Search / Game Card */
.ndc-game-card {
	background: var(--nd-tint-blue);
	border: 1px solid var(--nd-secondary-blue);
	border-radius: var(--nd-radius-card);
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.ndc-game-icon { font-size: 2.4rem; }
.ndc-game-info h4 { margin: 0 0 6px 0; font-size: 1.15rem; }
.ndc-game-info p { margin: 0; font-size: 0.9rem; color: var(--nd-text-muted); }

/* Year at a Glance Carousel */
.ndc-glance-carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 16px;
	scrollbar-width: thin;
}
.ndc-month-tile {
	min-width: 220px;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 24px;
	color: var(--nd-text-main) !important;
	transition: var(--nd-transition);
}
.ndc-month-tile:hover, .ndc-month-tile.is-active-month {
	border-color: var(--nd-primary-red);
	transform: translateY(-4px);
	box-shadow: var(--nd-shadow-hover);
}
.ndc-tile-badge {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--nd-primary-red);
	font-family: var(--nd-font-heading);
}
.ndc-tile-name { font-size: 1.3rem; margin: 8px 0 4px 0; }
.ndc-tile-theme { font-size: 0.82rem; color: var(--nd-text-muted); margin-bottom: 12px; }
.ndc-tile-count { font-size: 0.85rem; font-weight: 700; color: var(--nd-secondary-blue-dark); }

/* Product Promo Banner (Calendar & Store) */
.ndc-promo-navy-card {
	background: var(--nd-grad-navy);
	border-radius: var(--nd-radius-card);
	padding: 48px;
	color: #ffffff;
}
.ndc-promo-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 40px;
	align-items: center;
}
.ndc-promo-title { color: #ffffff; font-size: var(--nd-font-size-h2); margin: 12px 0 18px 0; }
.ndc-promo-bullets { list-style: none; padding: 0; margin-bottom: 24px; }
.ndc-promo-bullets li { margin-bottom: 10px; font-size: 1.05rem; }
.ndc-calendar-mockup {
	background: #ffffff;
	color: var(--nd-navy-dark);
	border-radius: 14px;
	padding: 30px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	text-align: center;
	position: relative;
}
.mockup-header { font-size: 3rem; font-weight: 900; color: var(--nd-primary-red); }
.mockup-body { font-weight: 800; letter-spacing: 2px; }

/* As Seen On Logos */
.ndc-logos-lead { font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; color: var(--nd-text-muted); }
.ndc-logos-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-top: 24px;
}
.ndc-media-logo {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--nd-text-muted);
	filter: grayscale(100%);
	opacity: 0.6;
	transition: var(--nd-transition);
}
.ndc-media-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
	color: var(--nd-text-main);
}

/* Full Width Newsletter Box */
.ndc-nl-full-box {
	background: var(--nd-tint-red);
	border: 1px solid rgba(211, 39, 38, 0.2);
	border-radius: var(--nd-radius-card);
	padding: 56px 24px;
	max-width: 860px;
	margin: 0 auto;
}
.ndc-nl-input-row {
	display: flex;
	gap: 12px;
	max-width: 520px;
	margin: 20px auto 0 auto;
}
.ndc-nl-input {
	flex: 1;
	padding: 12px 18px;
	border-radius: var(--nd-radius-pill);
	border: 1px solid var(--nd-border-color);
	font-size: 0.95rem;
	background: var(--nd-bg-card);
	color: var(--nd-text-main);
}

/* 8. TODAY & TOMORROW DEDICATED TEMPLATE SECTIONS */
.ndc-daily-header { text-align: center; padding: 40px 0 32px 0; }
.ndc-page-title { font-size: var(--nd-font-size-h1); }
.ndc-block-section {
	border-radius: var(--nd-radius-card);
	padding: 32px;
	margin-bottom: 32px;
	border-left: 6px solid var(--nd-primary-red);
}
.ndc-block-section.block-blue {
	background: var(--nd-tint-blue);
	border-left-color: var(--nd-secondary-blue);
}
.ndc-block-section.block-green {
	background: var(--nd-tint-green);
	border-left-color: #2e7d32;
}
.ndc-block-section.block-rose {
	background: var(--nd-tint-rose);
	border-left-color: var(--nd-accent-rose);
}
.ndc-block-section.block-red {
	background: var(--nd-tint-red);
	border-left-color: var(--nd-primary-red);
}
.ndc-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.ndc-block-title-wrap { display: flex; align-items: center; gap: 14px; }
.ndc-block-badge {
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: var(--nd-radius-pill);
	background: var(--nd-bg-card);
	font-weight: 700;
}
.ndc-explore-pills-bar {
	padding: 32px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ndc-pill-link {
	padding: 8px 20px;
	border-radius: var(--nd-radius-pill);
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--nd-text-main) !important;
}
.ndc-pill-link:hover {
	border-color: var(--nd-primary-red);
	color: var(--nd-primary-red) !important;
}

/* 9. MONTH HUB FEED TEMPLATE */
.ndc-month-hero-header { text-align: center; padding: 40px 0 24px 0; }
.ndc-month-main-title { font-size: clamp(2.4rem, 4vw, 3.8rem); margin-bottom: 8px; }
.ndc-tab-switcher-nav {
	display: inline-flex;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-pill);
	padding: 6px;
	gap: 6px;
	margin-top: 24px;
}
.ndc-tab-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--nd-radius-pill);
	border: none;
	background: none;
	font-weight: 700;
	font-size: 0.92rem;
	cursor: pointer;
	color: var(--nd-text-main);
	transition: var(--nd-transition);
}
.ndc-tab-btn.is-active {
	background: var(--nd-primary-red);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(211, 39, 38, 0.3);
}

/* Days Feed Rows with Sticky Badges */
.ndc-hub-feed-control-card {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 20px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}
.ndc-feed-controls { display: flex; align-items: center; gap: 24px; }
.ndc-week-pill {
	padding: 4px 12px;
	border-radius: 6px;
	background: var(--nd-bg-page);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--nd-text-main) !important;
}
.ndc-col-switcher .col-btn {
	background: var(--nd-bg-page);
	border: 1px solid var(--nd-border-color);
	padding: 6px 12px;
	cursor: pointer;
	font-weight: 700;
}
.ndc-col-switcher .col-btn.is-active {
	background: var(--nd-primary-red);
	color: #ffffff;
}

.ndc-day-feed-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
.ndc-navy-date-badge {
	position: sticky;
	top: 100px;
	background: var(--nd-navy-dark);
	color: #ffffff;
	border-radius: 14px;
	padding: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	box-shadow: var(--nd-shadow-md);
}
.badge-w { font-size: 0.75rem; letter-spacing: 1px; color: var(--nd-secondary-blue); font-weight: 800; }
.badge-d { font-size: 2.2rem; font-weight: 900; line-height: 1; margin: 4px 0; }
.badge-m { font-size: 0.8rem; font-weight: 700; }

/* 10. SINGLE OBSERVANCE & BLOG LAYOUT */
.ndc-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	background: var(--nd-primary-red);
	z-index: 9999;
	width: 0%;
	transition: width 100ms ease;
}
.ndc-single-hero {
	display: grid;
	grid-template-columns: 55% 42%;
	gap: 40px;
	align-items: center;
	padding: 40px 0;
}
.ndc-single-title { font-size: clamp(2.2rem, 3.5vw, 3.2rem); margin: 16px 0; }
.ndc-single-actions-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.ndc-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 24px 0;
}
.ndc-step-card {
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 24px;
	display: flex;
	gap: 16px;
}
.ndc-step-num {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--nd-primary-red);
	font-family: var(--nd-font-heading);
}

/* Single Observance Article Layout */
.ndc-single-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	padding-bottom: 60px;
}
.ndc-single-article {
	min-width: 0;
}
.ndc-article-section {
	margin-bottom: 40px;
	background: var(--nd-bg-card);
	border: 1px solid var(--nd-border-color);
	border-radius: var(--nd-radius-card);
	padding: 36px;
	box-shadow: var(--nd-shadow-sm);
}
.ndc-article-section h2 {
	font-size: 1.8rem;
	margin-bottom: 20px;
	color: var(--nd-text-main);
	border-bottom: 2px solid var(--nd-tint-red);
	padding-bottom: 12px;
}
.ndc-body-prose {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--nd-text-main);
}
.ndc-body-prose p {
	margin-bottom: 1.2em;
}
.ndc-facts-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ndc-facts-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--nd-border-color);
	font-size: 1rem;
}
.ndc-facts-list li:last-child {
	border-bottom: none;
}
.fact-bullet {
	color: var(--nd-primary-red);
	font-size: 1.2rem;
	line-height: 1;
}
.ndc-post-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--nd-border-color);
}
.ndc-pnav-prev a, .ndc-pnav-next a {
	font-weight: 700;
	color: var(--nd-secondary-blue-dark);
}
.ndc-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* 11. FOOTER (NAVY 5-COLUMNS) */
.ndc-footer {
	background-color: var(--nd-navy-dark);
	color: #ffffff;
	padding: 64px 0 24px 0;
	margin-top: 60px;
}
.ndc-footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.ndc-footer-grid {
	display: grid;
	grid-template-columns: 28% 16% 16% 16% 24%;
	gap: 32px;
	margin-bottom: 48px;
}
.ndc-footer-desc { color: #9ab1c4; font-size: 0.92rem; margin: 16px 0; }
.ndc-social-icons { display: flex; gap: 14px; }
.ndc-social-icons a { color: #ffffff; opacity: 0.8; }
.ndc-social-icons a:hover { opacity: 1; color: var(--nd-secondary-blue); }
.ndc-fcol-title { color: #ffffff; font-size: 1.15rem; margin-bottom: 18px; }
.ndc-footer-links { list-style: none; padding: 0; margin: 0; }
.ndc-footer-links li { margin-bottom: 10px; }
.ndc-footer-links li a { color: #9ab1c4; font-size: 0.92rem; }
.ndc-footer-links li a:hover { color: #ffffff; }
.ndc-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.85rem;
	color: #9ab1c4;
}

/* 12. MOBILE BOTTOM BAR & OFF-CANVAS DRAWER */
.ndc-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--nd-bg-header);
	border-top: 1px solid var(--nd-border-color);
	z-index: 998;
	align-items: center;
	justify-content: space-around;
}
.ndc-bnav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--nd-text-main);
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}
.ndc-hamburger { display: none; background: none; border: none; cursor: pointer; }
.ndc-mobile-drawer {
	position: fixed;
	top: 0;
	left: -100%;
	width: 80%;
	max-width: 340px;
	height: 100%;
	background: var(--nd-bg-card);
	z-index: 1000;
	box-shadow: var(--nd-shadow-hover);
	transition: left 300ms ease;
	padding: 24px;
}
.ndc-mobile-drawer.is-open { left: 0; }
.ndc-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ndc-drawer-header img { height: 80px; width: auto; object-fit: contain; }
.ndc-drawer-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; }
.ndc-mobile-menu { list-style: none; padding: 0; margin: 0; }
.ndc-mobile-menu li { margin-bottom: 14px; }
.ndc-mobile-menu li a { font-size: 1.1rem; font-weight: 600; color: var(--nd-text-main); }

/* 13. RESPONSIVE BREAKPOINTS (Mobile-First 480/768/1024/1280) */
@media (max-width: 1024px) {
	.ndc-desktop-nav { display: none; }
	.ndc-hamburger { display: block; }
	.ndc-hero-layout { grid-template-columns: 1fr; }
	.ndc-split-layout { grid-template-columns: 1fr; }
	.ndc-promo-grid { grid-template-columns: 1fr; }
	.ndc-footer-grid { grid-template-columns: repeat(2, 1fr); }
	.ndc-single-hero { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.ndc-header-container { padding: 6px 16px; min-height: 74px; }
	.ndc-logo-img { height: var(--nd-logo-height-mobile, 78px); width: var(--nd-logo-width-mobile, auto); max-height: 82px; }
	.ndc-header.is-shrunk .ndc-logo-img { height: 56px; width: auto; }
	.ndc-footer-logo { height: 72px; width: auto; max-height: 78px; }
	.ndc-grid-3 { grid-template-columns: 1fr; }
	.ndc-bottom-nav { display: flex; }
	.ndc-footer { padding-bottom: 80px; }
	.ndc-day-feed-row { grid-template-columns: 1fr; }
	.ndc-sticky-day-col { position: relative; top: 0; }
	.ndc-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}
}