/*
Theme Name: TV Punjab
Theme URI: https://tvpunjab.com
Author: TV Punjab
Description: Block theme for TV Punjab, a Punjabi-language news broadcaster in Surrey, British Columbia. Gurmukhi-first typography, a headline stroke drawn from the sirlekh, and a palette taken from the channel's own mark.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tvpunjab
Tags: news, blog, block-patterns, full-site-editing, right-sidebar
*/

/* -------------------------------------------------------------------------
   Gurmukhi typography

   The single most important rule in this file is line-height. Gurmukhi stacks
   matras both above and below the headstroke, so Latin display leading (1.05
   to 1.15) collides them. Nothing here goes below 1.4 on headings or 1.7 on
   body text. If a future edit tightens these, the script breaks.
   ------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, .wp-block-post-title) {
	line-height: 1.42;
	text-wrap: balance;
}

.wp-block-post-content p {
	line-height: 1.78;
	margin-block: 1.15em;
}

/* Plugins that turn posts with video into playable cards (EmbedPlus and
   similar) stamp a play button over the thumbnail. On a story card that
   promises inline playback and instead navigates to the article, so it is
   suppressed here. The article page keeps its real embed.

   Matched on "play" rather than a specific class because the naming varies
   between plugins — play-button, playhover, play-overlay. Scoped inside
   .tvp-card / .tvp-grid so it can't reach a real player elsewhere. */
.tvp-card [class*="play"],
.tvp-card [id*="play"],
.tvp-grid [class*="play"],
.tvp-card .epyt-video-wrapper::after,
.tvp-card .wp-block-post-featured-image::after,
.tvp-card .wp-block-post-featured-image::before {
	display: none !important;
}

/* A failed or still-loading thumbnail should read as an empty frame, not a
   black slab. */
.tvp-card img,
.tvp-grid .wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--paper-warm);
}

.tvp-card .wp-block-post-featured-image,
.tvp-grid .wp-block-post-featured-image {
	background-color: var(--wp--preset--color--paper-warm);
}

/* -------------------------------------------------------------------------
   The sirlekh — the headline stroke

   Gurmukhi is written beneath a continuous horizontal line. Every story on
   this site sits under one too. Weight carries meaning: heavy red for the
   lead, thin ink for everything else, gold for editorial furniture.
   ------------------------------------------------------------------------- */

/* Core styles .wp-block-separator with width:100px, max-width:100px and a
   reduced opacity, and centres it with auto margins. All four have to be
   undone or the stroke renders as a short faded dash. The selectors below are
   deliberately specific enough to beat core without !important. */
/* Core sets width:100px via .wp-block-separator:not(.is-style-wide):not(.is-style-dots)
   — three classes of specificity. An element+2-class selector loses to that, so
   the :not() chain is repeated here to outrank it rather than reaching for
   !important. */
.wp-block-separator.tvp-stroke:not(.is-style-wide):not(.is-style-dots),
.wp-block-separator.tvp-stroke-lead:not(.is-style-wide):not(.is-style-dots),
.wp-block-separator.tvp-stroke-gold:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.tvp-stroke,
hr.wp-block-separator.tvp-stroke-lead,
hr.wp-block-separator.tvp-stroke-gold,
.tvp-stroke,
.tvp-stroke-lead,
.tvp-stroke-gold {
	display: block;
	width: 100%;
	max-width: none;
	border: 0;
	border-top: 0;
	border-bottom: 0;
	opacity: 1;
	margin: 0 0 0.55rem;
}

.wp-block-separator.tvp-stroke:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.tvp-stroke,
.tvp-stroke { height: 2px; background-color: var(--wp--preset--color--ink); }

.wp-block-separator.tvp-stroke-lead:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.tvp-stroke-lead,
.tvp-stroke-lead { height: 5px; background-color: var(--wp--preset--color--brand); }

.wp-block-separator.tvp-stroke-gold:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.tvp-stroke-gold,
.tvp-stroke-gold { height: 1px; background-color: var(--wp--preset--color--gold); }

/* -------------------------------------------------------------------------
   Masthead

   The logo is a self-contained plate with a hard border and its own red
   field. It only looks deliberate with clear space around it on a light
   surface, so this is enforced here rather than left to the editor.
   ------------------------------------------------------------------------- */

.tvp-masthead {
	background: var(--wp--preset--color--paper);
	text-align: center;
	padding-block: clamp(1.1rem, 3vw, 1.75rem);
}

.tvp-masthead .wp-block-site-logo img {
	width: clamp(190px, 42vw, 300px);
	height: auto;
	margin-inline: auto;
}

.tvp-nav {
	background: var(--wp--preset--color--ink);
	border-top: 1px solid var(--wp--preset--color--gold);
}

.tvp-nav .wp-block-navigation {
	font-size: var(--wp--preset--font-size--medium);
}

/* theme.json sets link colour to ink globally, which is correct on paper and
   invisible on the dark footer and schedule. Anything inside .tvp-on-dark
   inverts. */
.tvp-on-dark :where(a, a:visited) {
	color: var(--wp--preset--color--paper);
}

.tvp-on-dark :where(a:hover, a:focus-visible) {
	color: var(--wp--preset--color--gold-light);
}

.tvp-on-dark ul {
	list-style: none;
	padding-inline-start: 0;
	margin-block-start: 0.4rem;
}

/* Every link in the bar, not just the ones inside the navigation block. The
   live link sits outside it and was rendering in ink on black. */
.tvp-nav,
.tvp-nav :where(a, a:visited) {
	color: #E4E2DC;
}

.tvp-nav :where(a:hover, a:focus-visible),
.tvp-nav .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--gold-light);
}

.tvp-nav .wp-block-navigation a {
	padding-block: 0.65rem;
}

/* The bar spans the viewport but its contents line up with the content
   column, so the menu doesn't sit against the screen edge while the stories
   sit centred. The menu itself centres; search and live stay right. */
.tvp-nav > .wp-block-group {
	min-height: 3rem;
	align-items: center;
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	position: relative;
}

.tvp-nav .wp-block-navigation {
	flex: 1 1 auto;
	justify-content: center;
}

.tvp-nav-right {
	flex: 0 0 auto;
	gap: 0.9rem;
}

/* Search sits on near-black, so the core light-mode field styles have to go. */
.tvp-nav .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #E4E2DC;
	padding: 0.35rem;
	min-width: 0;
}

.tvp-nav .wp-block-search__button:hover {
	color: var(--wp--preset--color--gold-light);
}

.tvp-nav .wp-block-search__button svg { fill: currentColor; }

.tvp-nav .wp-block-search__input {
	background: #1B2426;
	border: 1px solid #333D3F;
	color: var(--wp--preset--color--paper);
	border-radius: 3px;
	padding: 0.35rem 0.6rem;
	font-family: var(--wp--preset--font-family--gurmukhi);
	font-size: 0.9rem;
}

.tvp-nav .wp-block-search__input::placeholder {
	color: #7C8688;
	opacity: 1;
}

.tvp-nav .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--gold);
	outline: none;
}

/* On a phone the menu collapses to a hamburger; centring it there leaves the
   burger stranded mid-bar, so it returns to the left. */
@media (max-width: 781px) {
	.tvp-nav .wp-block-navigation { justify-content: flex-start; }
	.tvp-nav .tvp-live-link { display: none; }
}

.tvp-nav .wp-block-navigation a:hover,
.tvp-nav .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--gold-light);
}

/* -------------------------------------------------------------------------
   Section labels and utility text
   ------------------------------------------------------------------------- */

.tvp-eyebrow {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin: 0 0 0.3rem;
}

.tvp-eyebrow-lead { color: var(--wp--preset--color--brand); }

.tvp-live-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--live);
	margin-inline-end: 0.4em;
	vertical-align: 0.05em;
}

/* Gold never carries small text. At #C49A3F on paper it measures about 3:1,
   which is fine for rules and large display and unreadable at body size. */
.tvp-on-dark .tvp-eyebrow { color: var(--wp--preset--color--gold); }

/* -------------------------------------------------------------------------
   Story grids
   ------------------------------------------------------------------------- */

.tvp-lead .wp-block-post-title {
	font-size: var(--wp--preset--font-size--lead);
	margin-block: 0 0.45rem;
}

.tvp-lead .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.65;
}

.tvp-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block: 0 0.35rem;
}

.tvp-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   Schedule strip
   ------------------------------------------------------------------------- */

.tvp-schedule {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.tvp-schedule-row {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.6rem;
	border-bottom: 1px solid #2A3134;
}

.tvp-schedule-row:last-child { border-bottom: 0; }

.tvp-schedule-time {
	font-family: var(--wp--preset--font-family--utility);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gold-light);
	min-width: 3.2em;
}

.tvp-schedule-now { color: var(--wp--preset--color--live); }

/* -------------------------------------------------------------------------
   Article furniture produced by the Newsroom plugin
   ------------------------------------------------------------------------- */

.tvpn-dek {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

.tvpn-keypoints {
	background: var(--wp--preset--color--paper-warm);
	border-top: 3px solid var(--wp--preset--color--brand);
	padding: 1.1rem 1.3rem;
	margin-block: 1.75rem;
}

.tvpn-keypoints h2 {
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--utility);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.tvpn-keypoints ul { margin: 0; padding-inline-start: 1.1rem; }
.tvpn-keypoints li { margin-block: 0.4rem; line-height: 1.65; }

.tvpn-faq {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-block-start: 2.5rem;
	padding-block-start: 1.25rem;
}

.tvpn-faq h3 {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-block: 1.25rem 0.35rem;
}

/* -------------------------------------------------------------------------
   Quality floor
   ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, .wp-block-navigation a):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.skip-link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.7rem 1rem;
	z-index: 999;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 600px) {
	.tvp-lead .wp-block-post-title { line-height: 1.38; }
	.tvp-nav .wp-block-navigation { justify-content: flex-start; }
}