/**
 * PunjabiTime News — Header & Footer polish (FT-inspired, not a copy).
 *
 * ADDITIVE & SAFE. Refines ONLY the masthead/header and footer presentation:
 * spacing, thin newspaper separator lines, navigation readability, a tasteful
 * deep-red accent for hover/active, and a light cream footer.
 *
 * It does NOT:
 *   - change the warm cream page background (#FFF1E5) — left exactly as-is
 *   - change posts, pages, categories, menus, typography, or settings
 *   - redesign homepage cards or article layout
 *   - alter the mobile menu mechanism (body.pt-menu-open toggle is untouched)
 *
 * Accent: deep newspaper red #9b1c1c (hover/active only).
 *
 * Removable: disable / delete the sandbox loader
 * (novamira-sandbox/pt-header-footer-polish.php) and, optionally, this file.
 */

:root {
	--pt-accent-red: #9b1c1c;
	--pt-hairline: #e4ddd5;     /* warm hairline that suits the cream page */
	--pt-header-cream: #fffaf4; /* very light cream, almost white */
}

/* ================================================================== *
 * HEADER
 * ================================================================== */

/* Clean, very-light-cream header that sits gracefully on the cream page,
 * with a crisp hairline rule beneath — a serious-newspaper cue. */
.pt-site-header {
	background: var(--pt-header-cream);
	border-bottom: 1px solid var(--pt-hairline);
}

/* A thin accent rule at the very top of the header for a premium masthead
 * edge (kept subtle, deep red, full width). */
.pt-site-header {
	box-shadow: inset 0 3px 0 0 var(--pt-accent-red);
}

/* More balanced, premium masthead breathing room. */
.pt-masthead {
	padding-top: 30px;
	padding-bottom: 22px;
}

/* Brand wordmark: keep text unchanged, just let it breathe. */
.pt-brand {
	letter-spacing: -0.045em;
}

.pt-tagline {
	margin-top: 10px;
	color: var(--pt-muted, #7e7576);
}

/* Header search field: clean, light, with a tasteful red focus cue. */
.pt-header-search {
	background: #ffffff;
	border-color: var(--pt-hairline);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pt-header-search:focus-within {
	border-color: var(--pt-accent-red);
	box-shadow: 0 0 0 2px rgba(155, 28, 28, 0.12);
}

/* Keep the search button serious; warm to red on hover. */
.pt-header-search button:hover {
	background: var(--pt-accent-red);
}

/* Menu toggle (mobile icon): clean outline, red on hover/focus. */
.pt-menu-toggle {
	border-color: var(--pt-hairline);
	transition: border-color 160ms ease;
}

.pt-menu-toggle:hover,
.pt-menu-toggle:focus-visible {
	border-color: var(--pt-accent-red);
}

/* ---- Primary navigation ----
 * NOTE: we deliberately do NOT touch `.pt-primary-nav { display }` so the
 * mobile toggle (body.pt-menu-open .pt-primary-nav { display:block }) keeps
 * working exactly as before. */
.pt-primary-nav {
	border-top: 1px solid var(--pt-hairline);
}

.pt-menu {
	gap: clamp(18px, 2.4vw, 34px);
	letter-spacing: 0.09em;
}

.pt-menu a {
	padding: 15px 0;
	color: var(--pt-ink-soft, #4c4546);
	position: relative;
	transition: color 150ms ease;
}

/* Subtle red underline that grows on hover/active — a refined news cue. */
.pt-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	background: var(--pt-accent-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.pt-menu a:hover,
.pt-menu .current-menu-item > a,
.pt-menu .current_page_item > a {
	color: var(--pt-accent-red);
}

.pt-menu a:hover::after,
.pt-menu .current-menu-item > a::after,
.pt-menu .current_page_item > a::after {
	transform: scaleX(1);
}

/* ================================================================== *
 * FOOTER
 * ================================================================== */

/* Light, warm, professional footer — NOT heavy black. Matches the cream
 * site with a clean top hairline plus a thin red accent line above it. */
.pt-site-footer {
	background: var(--pt-header-cream);
	border-top: 1px solid var(--pt-hairline);
	box-shadow: inset 0 3px 0 0 var(--pt-accent-red);
	padding-top: 46px;
	padding-bottom: 26px;
}

.pt-footer-grid {
	gap: 40px;
	padding-bottom: 6px;
}

/* Brand line reads as a latest-news publication. */
.pt-footer-title {
	letter-spacing: -0.04em;
	color: var(--pt-black, #000);
}

.pt-footer-brand p {
	max-width: 46ch;
	color: var(--pt-ink-soft, #4c4546);
}

/* Tidy, readable footer links with red hover. */
.pt-footer-links {
	gap: 12px 28px;
}

.pt-footer-links a {
	color: var(--pt-ink-soft, #4c4546);
	transition: color 150ms ease;
}

.pt-footer-links a:hover,
.pt-footer-links a:focus-visible {
	color: var(--pt-accent-red);
}

/* Bottom bar: clean separation, muted, with red link hover. */
.pt-footer-bottom {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--pt-hairline);
}

.pt-footer-bottom a:hover,
.pt-footer-bottom a:focus-visible {
	color: var(--pt-accent-red);
}

/* ================================================================== *
 * RESPONSIVE — header & footer only
 * ================================================================== */
@media (max-width: 820px) {
	.pt-masthead {
		padding-top: 18px;
		padding-bottom: 14px;
	}

	/* In the mobile dropdown, give items clean hairlines and red hover.
	 * Display is still controlled by the theme's toggle rule — untouched. */
	.pt-menu a {
		padding: 14px 0;
		border-bottom: 1px solid var(--pt-hairline);
	}

	/* The animated underline doesn't suit stacked mobile items; hide it. */
	.pt-menu a::after {
		display: none;
	}

	.pt-footer-grid {
		gap: 26px;
	}

	.pt-footer-bottom {
		gap: 10px;
	}
}