/**
 * PunjabiTime News — Header polish (FT-inspired clean newspaper masthead, not a copy).
 *
 * ADDITIVE & SAFE. Refines ONLY the public header: the breaking-news strip,
 * masthead balance/spacing, the search field, the menu toggle, the primary
 * navigation rule and link readability, and tasteful deep-red hover/active
 * accents. Loaded via the Novamira sandbox loader AFTER main.css, typography,
 * the global cream background, the footer polish, and the earlier header/footer
 * polish stylesheet — so these header rules win.
 *
 * It does NOT:
 *   - change the warm cream PAGE background (#FFF1E5) — left exactly as-is
 *   - touch the dark footer, the (removed) newsletter block, posts, pages,
 *     categories, menus, typography, AdSense, ads.txt, or settings
 *   - alter the mobile menu MECHANISM: the JS toggles body.pt-menu-open and the
 *     rule `body.pt-menu-open .pt-primary-nav { display:block }` is left intact.
 *     We never set `.pt-primary-nav { display }`, so open/close keeps working.
 *   - style or depend on the WordPress admin bar.
 *
 * Accent: deep newspaper red #9e1b1b (hover / active / focus only).
 *
 * TO REVERT: disable / delete the sandbox loader
 * (novamira-sandbox/pt-header-polish.php) and, optionally, this file.
 */

:root {
	--pth-red: #9e1b1b;            /* deep news red accent */
	--pth-red-soft: rgba(158, 27, 27, 0.12);
	--pth-header-bg: #fffaf4;      /* very light cream, almost white */
	--pth-hairline: #e4ddd5;       /* warm hairline that suits the cream page */
	--pth-ink: #1a1a1a;            /* strong masthead ink */
	--pth-ink-soft: #4c4546;       /* nav link ink */
}

/* ================================================================== *
 * BREAKING STRIP
 * Keep it serious and tight; let the red label cue the news brand
 * instead of the existing gold, for a more newspaper-like masthead edge.
 * ================================================================== */
.pt-breaking__inner {
	min-height: 36px;
	gap: 16px;
}

.pt-breaking__label {
	background: var(--pth-red);
	color: #ffffff;
	letter-spacing: 0.10em;
	padding: 4px 10px;
}

/* ================================================================== *
 * HEADER SHELL
 * Light, very-light-cream header sitting gracefully on the cream page,
 * with a thin deep-red rule at the very top and a crisp hairline below.
 * ================================================================== */
.pt-site-header {
	background: var(--pth-header-bg);
	border-bottom: 1px solid var(--pth-hairline);
	box-shadow: inset 0 3px 0 0 var(--pth-red);
}

/* ---- Masthead layout: balanced three-column grid, more breathing room ---- */
.pt-masthead {
	gap: 28px;
	padding: 30px 0 22px;
}

/* Strong, clean wordmark — text unchanged, just refined weight/tracking. */
.pt-brand,
.pt-site-header .pt-brand {
	color: var(--pth-ink);
	letter-spacing: -0.045em;
}

.pt-brand:hover,
.pt-brand:focus-visible {
	color: var(--pth-red);
}

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

/* ================================================================== *
 * HEADER SEARCH
 * Clean light field with a tasteful red focus cue; serious submit button.
 * ================================================================== */
.pt-header-search {
	background: #ffffff;
	border-color: var(--pth-hairline);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pt-header-search:focus-within {
	border-color: var(--pth-red);
	box-shadow: 0 0 0 2px var(--pth-red-soft);
}

.pt-header-search input {
	padding: 10px 12px;
}

.pt-header-search button {
	background: var(--pth-ink);
	border-left-color: var(--pth-hairline);
	padding: 10px 14px;
	letter-spacing: 0.06em;
	transition: background-color 150ms ease;
}

.pt-header-search button:hover,
.pt-header-search button:focus-visible {
	background: var(--pth-red);
}

/* ================================================================== *
 * MENU TOGGLE (mobile icon)
 * Clean outline, red on hover/focus. Display behaviour left to the theme.
 * ================================================================== */
.pt-menu-toggle {
	border-color: var(--pth-hairline);
	border-radius: 2px;
	transition: border-color 150ms ease;
}

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

.pt-menu-toggle:hover .pt-menu-toggle__bar {
	background: var(--pth-red);
}

/* ================================================================== *
 * PRIMARY NAVIGATION
 * Real news-site feel: comfortable spacing, readable links, a refined
 * deep-red underline that grows on hover/active.
 * NOTE: we deliberately do NOT set `.pt-primary-nav { display }`.
 * ================================================================== */
.pt-primary-nav {
	border-top: 1px solid var(--pth-hairline);
}

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

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

/* Subtle red underline that grows on hover/active — a refined news cue. */
.pt-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 2px;
	background: var(--pth-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,
.pt-menu .current-menu-parent > a {
	color: var(--pth-red);
}

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

/* ================================================================== *
 * RESPONSIVE — header only. Keep the mobile menu functional & tidy.
 * The theme already shows the toggle and stacks the nav at <=820px; we
 * only refine spacing and the stacked link affordances here.
 * ================================================================== */
@media (max-width: 820px) {
	.pt-masthead {
		padding: 18px 0 14px;
		gap: 12px;
	}

	/* Stacked mobile items: clean hairlines + red hover. */
	.pt-menu a {
		padding: 14px 0;
		border-bottom: 1px solid var(--pth-hairline);
	}

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