/**
 * PunjabiTime News — Footer polish (FT-inspired DARK utility footer, not a copy).
 *
 * ADDITIVE & SAFE. Styles ONLY the site footer (.pt-site-footer and children),
 * which uses the multi-column markup in footer.php. Loaded via the Novamira
 * sandbox loader AFTER main.css, typography, the global cream background, and
 * the existing header/footer polish stylesheet, so these footer rules win
 * without editing any of those files.
 *
 * It does NOT touch:
 *   - the header / masthead / primary navigation
 *   - the warm cream page background (#FFF1E5) — left exactly as-is
 *   - posts, pages, categories, menus, typography, AdSense, ads.txt, settings
 *   - homepage layout, post cards, or article layout
 *
 * Design: dark charcoal footer, soft light-grey body text, light column
 * headings, muted-grey links with a subtle hover, four utility columns, a
 * thin deep-red separator rule at the very top, and a clean bottom copyright
 * row with an independent-platform note. Generous, premium spacing.
 *
 * Palette:
 *   --ptf-bg        dark charcoal footer background
 *   --ptf-bg-2      slightly lighter charcoal (bottom row)
 *   --ptf-red       deep newspaper red (top rule)
 *   --ptf-heading   light heading colour
 *   --ptf-text      soft light grey body text
 *   --ptf-link      muted grey links
 *   --ptf-link-hover light hover
 *   --ptf-divider   subtle divider on dark
 *
 * TO REVERT: restore footer.php from its footer.php.bak-* backup, then disable
 * / delete the sandbox loader (novamira-sandbox/pt-footer-polish.php) and,
 * optionally, this file.
 */

:root {
	--ptf-bg: #1f252e;          /* dark charcoal */
	--ptf-bg-2: #1a1f27;        /* deeper charcoal for the bottom row */
	--ptf-red: #9e1b1b;         /* deep news red separator */
	--ptf-heading: #f4f1ec;     /* light cream/white headings */
	--ptf-text: #c3c8d0;        /* soft light grey */
	--ptf-link: #a7adb7;        /* muted grey links */
	--ptf-link-hover: #ffffff;  /* clean light hover */
	--ptf-divider: rgba(255, 255, 255, 0.10);
}

/* ================================================================== *
 * FOOTER SHELL
 * Dark charcoal area that begins after a thin deep-red separator line.
 * Generous, newspaper-grade vertical rhythm.
 * ================================================================== */
.pt-site-footer {
	background: var(--ptf-bg);
	border-top: 0;
	/* Thin deep-red separator at the very top of the footer. */
	box-shadow: inset 0 3px 0 0 var(--ptf-red);
	padding-top: 64px;
	padding-bottom: 0;
	color: var(--ptf-text);
}

/* Keep footer content aligned to the site content width. */
.pt-site-footer .pt-container {
	max-width: var(--pt-max, 1280px);
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================== *
 * TOP GRID — brand on the left, four utility columns on the right
 * ================================================================== */
.pt-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	gap: 48px;
	align-items: start;
	padding-bottom: 48px;
}

/* ---- Brand block ---- */
.pt-footer-brand {
	max-width: 320px;
}

.pt-footer-title {
	display: inline-block;
	font-family: var(--pt-head, Georgia, serif);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ptf-heading);
	transition: color 150ms ease;
}

.pt-footer-title:hover,
.pt-footer-title:focus-visible {
	color: #ffffff;
}

.pt-footer-brand p {
	margin: 14px 0 0;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ptf-text);
}

/* ---- Columns wrapper ---- */
.pt-footer-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.pt-footer-col__title {
	margin: 0 0 14px;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ptf-heading);
}

.pt-footer-col__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-footer-col__links li {
	margin: 0 0 10px;
}

.pt-footer-col__links li:last-child {
	margin-bottom: 0;
}

.pt-footer-col__links a {
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ptf-link);
	transition: color 150ms ease;
}

.pt-footer-col__links a:hover,
.pt-footer-col__links a:focus-visible {
	color: var(--ptf-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ================================================================== *
 * BOTTOM ROW — copyright + independent-platform note
 * Sits on a slightly deeper charcoal band with a subtle top divider.
 * ================================================================== */
.pt-footer-bottom {
	display: block;
	margin-top: 0;
	padding: 22px 0 28px;
	border-top: 1px solid var(--ptf-divider);
	background: transparent;
	font-family: var(--pt-ui, Arial, sans-serif);
}

.pt-footer-copy {
	margin: 0;
	font-size: 13px;
	color: var(--ptf-text);
}

.pt-footer-note {
	margin: 8px 0 0;
	max-width: 760px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ptf-link);
}

/* Make the deeper bottom band span full width while content stays aligned. */
.pt-site-footer {
	position: relative;
}

/* ================================================================== *
 * RESPONSIVE — footer only. Stack neatly; no overflow.
 * ================================================================== */
@media (max-width: 980px) {
	.pt-footer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pt-footer-brand {
		max-width: none;
	}
}

@media (max-width: 700px) {
	.pt-site-footer {
		padding-top: 48px;
	}

	.pt-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}

	.pt-footer-grid {
		padding-bottom: 36px;
	}
}

@media (max-width: 420px) {
	.pt-footer-nav {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}