/*
Theme Name:   Kendra News (Kadence)
Theme URI:    https://kendranewsaustralia.com.au
Description:  Kendra News Australia's own look, built on Kadence, by PonteWise. Kadence itself is installed and updated
              from WordPress admin; only these changes live in Git (github.com/treetechsuman/kendranewsaustralia).
Author:       PonteWise
Author URI:   https://pontewise.com.au
Template:     kadence
Version:      0.8.2
Requires PHP: 7.4
Text Domain:  kendranews
*/

/* ---------- Colours (from the logo) and type ----------
   Text colours pass WCAG AA (4.5:1) on the backgrounds they sit on. The logo's own red (#df3c2c) is 4.4:1 on
   white, so it is used for accents only; text and buttons use a darker shade of it. */

:root {
	--kn-red: #df3c2c;        /* logo red: accents, lines */
	--kn-red-strong: #c4301f; /* buttons, red text (5.5:1 on white) */
	--kn-red-dark: #b02a1c;   /* hover */
	--kn-red-light: #ff7a6b;  /* on the dark bar (7:1) */
	--kn-blue: #155f99;       /* links (6.7:1 on white); the logo's blue is #1875bb */
	--kn-orange: #ff914d;     /* the logo's underline: decoration only */
	--kn-ink: #14171c;        /* headings, dark bar */
	--kn-text: #2b3038;       /* body text */
	--kn-muted: #5e6673;      /* dates, small print (5.8:1) */
	--kn-line: #e3e6ea;
	--kn-soft: #f4f5f7;       /* section bands */

	/* Kadence's palette, so its own buttons, links and menus use the same colours. */
	--global-palette1: var(--kn-red-strong);
	--global-palette2: var(--kn-red-dark);
	--global-palette3: var(--kn-ink);
	--global-palette4: var(--kn-text);
	--global-palette5: var(--kn-muted);
	--global-palette6: #8b93a0;
	--global-palette7: #edeff2;
	--global-palette8: var(--kn-soft);
	--global-palette9: #ffffff;
	--global-palette-highlight: var(--kn-blue);
	--global-palette-highlight-alt: var(--kn-red-strong);
	--global-palette-btn-bg: var(--kn-red-strong);
	--global-palette-btn-bg-hover: var(--kn-red-dark);
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;

	--kn-radius: 10px;
	--kn-gap: 1.5rem;
}

/* Mukta covers Nepali (Devanagari) and English in one family, so mixed headlines match. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.site-title,
.main-navigation {
	font-family: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
}

body {
	font-size: 1.0625rem; /* 17px: Devanagari's small marks need a little more size than English */
	line-height: 1.75;
	color: var(--kn-text);
	background: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--kn-ink);
	font-weight: 700;
	line-height: 1.35;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

/* ---------- Header ---------- */

.site-branding a.brand img {
	max-width: 260px;
}

.kn-today {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--kn-muted);
}

/* The dark menu bar, with the logo's orange as a thin line on top. */
.site-bottom-header-wrap .site-header-row-container-inner {
	background: var(--kn-ink);
	border-top: 3px solid var(--kn-orange);
}

.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: #ffffff;
	font-weight: 600;
	font-size: 0.98rem;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--kn-red-light);
}

.site-bottom-header-wrap .search-toggle-open,
.site-bottom-header-wrap .search-toggle-open .kadence-svg-iconset {
	color: #ffffff;
}

.site-bottom-header-wrap .header-button {
	border-radius: 999px;
	padding: 0.4em 1.2em;
	font-weight: 700;
}

/* ---------- News lists (category pages, page 2 onwards) ---------- */

.loop-entry .entry-title {
	font-size: 1.25rem;
	line-height: 1.45;
}

.loop-entry .entry-taxonomies a {
	color: var(--kn-red-strong);
}

/* Category pages: Kadence's big title banner is turned off (functions.php); the title sits above the list,
   styled like the home page's section headings. */
body.archive .content-area {
	margin-top: 2rem;
}

.post-archive-title {
	margin-bottom: 1.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--kn-line);
}

.post-archive-title .archive-title {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 5px solid var(--kn-red);
	font-size: 1.6rem;
	line-height: 1.25;
}

.post-archive-title .archive-description {
	margin-top: 0.5rem;
	color: var(--kn-muted);
}

/* ---------- Donation button (PressPatron widget) ----------
   The widget sets its colours inline, so these need !important: logo red like the other buttons, no black
   border round the circle or the heart. */
#support-heart {
	background-color: var(--kn-red-strong) !important;
	border: 0 !important;
	box-shadow: 0 4px 12px rgba(20, 23, 28, 0.25) !important;
}

#support-heart:hover {
	background-color: var(--kn-red-dark) !important;
}

#support-heart path[stroke] {
	stroke: none;
}

#pp-support-text {
	border: 0 !important;
	border-radius: 8px;
	font-family: inherit;
	color: var(--kn-text) !important;
}

/* ---------- Front page (templates/news-front.php) ---------- */

/* Kadence leaves 5rem above content; the front page starts straight under the menu bar. */
.content-area.kn-front-area {
	margin-top: 1.75rem;
}

.kn-front {
	padding: 0 0 3rem;
}

.kn-front a {
	text-decoration: none;
}

.kn-block {
	margin-bottom: 3rem;
}

/* Section heading: red marker, title, thin rule, "All" link. */
.kn-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.kn-head h2 {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 5px solid var(--kn-red);
	font-size: 1.5rem;
	line-height: 1.2;
}

.kn-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--kn-line);
	order: 1;
}

.kn-all {
	order: 2;
	padding: 0.25rem 0.9rem;
	border: 1px solid var(--kn-line);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kn-blue);
	background: #ffffff;
}

.kn-all:hover {
	border-color: var(--kn-blue);
}

/* Stories */
.kn-link {
	display: block;
	height: 100%;
	color: var(--kn-ink);
}

.kn-image {
	display: block;
	overflow: hidden;
	border-radius: var(--kn-radius);
	background: var(--kn-soft);
}

.kn-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.kn-link:hover .kn-image img {
	transform: scale(1.03);
}

.kn-link:hover .kn-title {
	color: var(--kn-red-strong);
}

.kn-link:focus-visible {
	outline: 3px solid var(--kn-blue);
	outline-offset: 3px;
	border-radius: var(--kn-radius);
}

.kn-title {
	display: block;
	font-weight: 600;
	line-height: 1.45;
	transition: color 0.15s ease;
}

.kn-date {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: var(--kn-muted);
}

/* Card: picture above the headline. */
.kn-card .kn-image {
	aspect-ratio: 16 / 10;
}

.kn-card .kn-title {
	margin-top: 0.7rem;
	font-size: 1.125rem;
}

/* Overlay: headline over a darkened picture. */
.kn-overlay .kn-link {
	position: relative;
	min-height: 280px;
	overflow: hidden;
	border-radius: var(--kn-radius);
	background: var(--kn-ink);
}

.kn-overlay .kn-image {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.kn-overlay .kn-text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3.5rem 1.4rem 1.3rem;
	background: linear-gradient(to top, rgba(10, 12, 16, 0.92) 0%, rgba(10, 12, 16, 0.6) 55%, rgba(10, 12, 16, 0) 100%);
}

.kn-overlay .kn-title,
.kn-overlay .kn-link:hover .kn-title {
	color: #ffffff;
	font-size: 1.35rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.kn-overlay.kn-no-image .kn-text {
	padding-top: 1.3rem;
}

/* Feature: picture beside a large headline. */
.kn-feature .kn-link {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--kn-gap);
	margin-bottom: var(--kn-gap);
	padding: 1rem;
	border-radius: var(--kn-radius);
	background: #ffffff;
}

.kn-feature .kn-image {
	aspect-ratio: 1;
}

.kn-feature .kn-title {
	font-size: 1.6rem;
	line-height: 1.35;
}

/* Row: small picture beside the headline. */
.kn-row .kn-link {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 0.9rem;
	align-items: start;
}

.kn-row .kn-image {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
}

.kn-row .kn-title {
	font-size: 1rem;
	font-weight: 500;
}

.kn-row.kn-no-image .kn-link {
	grid-template-columns: 1fr;
}

/* Layouts */
.kn-top,
.kn-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kn-gap);
}

.kn-top {
	margin-bottom: 3rem;
}

.kn-top .kn-link {
	min-height: 400px;
}

.kn-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--kn-gap);
	margin-bottom: var(--kn-gap);
}

.kn-grid-2 .kn-link {
	min-height: 380px;
}

.kn-grid-2 .kn-title {
	font-size: 1.6rem;
}

.kn-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kn-gap);
}

.kn-list {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.kn-list-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem var(--kn-gap);
	align-content: start;
}

.kn-lead-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.kn-lead-list > .kn-overlay .kn-link {
	min-height: 440px;
}

.kn-lead-list > .kn-overlay .kn-title {
	font-size: 1.6rem;
}

/* Full-width grey band behind Community Events and Culture. */
.kn-band {
	margin-bottom: 3rem;
	padding: 2.5rem 0 0.5rem;
	background: var(--kn-soft);
	box-shadow: 0 0 0 100vmax var(--kn-soft);
	clip-path: inset(0 -100vmax);
}

.kn-two {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
}

.kn-culture .kn-card {
	margin-bottom: 1.25rem;
}

.kn-two-even {
	grid-template-columns: 1fr 1fr;
}

.kn-after-card {
	margin-top: 1.25rem;
}

.kn-banner {
	margin: 0 0 3rem;
}

.kn-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kn-radius);
}

/* ---------- Ads (Google AdSense; see functions.php) ----------
   Space is kept for each ad so the page doesn't jump when it loads. A place Google leaves empty closes up. */

.kn-ad {
	margin: 0 auto 3rem;
	text-align: center;
}

.kn-ad-label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--kn-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kn-ad .adsbygoogle,
.kn-ad-box {
	min-height: 100px;
}

.kn-ad-article-middle .adsbygoogle,
.kn-ad-article-end .adsbygoogle,
.kn-ad-article-middle .kn-ad-box,
.kn-ad-article-end .kn-ad-box {
	min-height: 250px;
}

.kn-ad:has(.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

.kn-ad-wrap .kn-ad {
	margin: 1.5rem auto;
}

.kn-ad-article-middle,
.kn-ad-article-end {
	margin: 2rem auto;
	clear: both;
}

.kn-ad-box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px dashed var(--kn-line);
	border-radius: var(--kn-radius);
	background: var(--kn-soft);
	color: var(--kn-muted);
	font-size: 0.9rem;
}

/* ---------- Share buttons (articles) ---------- */

.kn-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1.5rem;
}

.kn-share-bottom {
	margin: 2rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kn-line);
}

.kn-share-head {
	flex-basis: 100%;
	margin: 0 0 0.25rem;
	color: var(--kn-ink);
	font-weight: 700;
}

.entry-content .kn-share-btn,
.kn-share-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--kn-ink);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.entry-content .kn-share-btn:hover,
.entry-content .kn-share-btn:focus-visible,
.kn-share-btn:hover,
.kn-share-btn:focus-visible {
	color: #fff;
	filter: brightness(1.15);
	text-decoration: none;
}

/* Brand colours, darkened where needed so white text passes 4.5:1. */
.kn-share-whatsapp { background: #128047; }
.kn-share-facebook { background: #1565c0; }
.kn-share-x { background: #000; }
.kn-share-linkedin { background: #0a66c2; }
.kn-share-email { background: var(--kn-muted); }
.kn-share-native { background: var(--kn-red-strong); }

.entry-content .kn-share-copy,
.kn-share-copy {
	border: 1px solid var(--kn-line);
	background: #fff;
	color: var(--kn-ink);
}

.entry-content .kn-share-copy:hover,
.kn-share-copy:hover {
	color: var(--kn-ink);
	background: var(--kn-soft);
}

/* ---------- Page numbers under lists ---------- */

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	text-align: center;
}

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

.kn-button {
	display: inline-block;
	padding: 0.7em 1.8em;
	border-radius: 999px;
	font-weight: 700;
	color: #ffffff;
	background: var(--kn-red-strong);
}

.kn-front a.kn-button:hover {
	color: #ffffff;
	background: var(--kn-red-dark);
}

/* ---------- Footer ---------- */

.kn-footer {
	padding: 3rem 0 2rem;
	color: #d5d9df;
	background: var(--kn-ink);
	border-top: 4px solid var(--kn-red);
}

.kn-footer-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr;
	gap: 2.5rem;
}

.kn-footer h2 {
	margin: 0 0 0.8rem;
	font-size: 1.1rem;
	color: #ffffff;
}

.kn-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-footer li {
	margin-bottom: 0.4rem;
}

.kn-footer a {
	color: #d5d9df;
	text-decoration: none;
}

.kn-footer a:hover {
	color: var(--kn-red-light);
}

.kn-footer-brand img {
	width: 180px;
	height: auto;
	margin-bottom: 0.8rem;
}

.kn-footer-brand p {
	margin: 0 0 1rem;
	max-width: 34ch;
}

.kn-contact li {
	display: flex;
	gap: 0.6rem;
}

.kn-contact span {
	color: var(--kn-red-light);
}

/* Contact page ([kendranews_contact]) */
.kn-contact-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0;
}

.kn-contact-details dt {
	color: var(--kn-ink);
	font-weight: 700;
}

.kn-contact-details dd {
	margin: 0;
}

.kn-footer-brand .kn-business {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Newsletter form (Email Subscribers plugin, form 1). The plugin styles it by element ID (teal, Georgia), so
   these rules include an ID too, to win without !important. Its own heading is hidden: ours says the same. */
#kn-subscribe .es-form-field-container[id] {
	width: auto;
	max-width: 400px;
	padding: 0;
	border: 0;
	color: inherit;
}

#kn-subscribe .es-form-field-container p[id] {
	display: none;
}

#kn-subscribe .gjs-cell {
	margin: 0 0 0.6rem;
}

#kn-subscribe input.es-name[id],
#kn-subscribe input.es-email[id] {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #3a4049;
	border-radius: 6px;
	color: var(--kn-ink);
	background: #ffffff;
	font: inherit;
}

#kn-subscribe label.es-field-label[id] {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-family: inherit;
	font-size: 0.9rem;
	color: #d5d9df;
}

#kn-subscribe .es_gdpr a[id],
#kn-subscribe .es_gdpr a font {
	color: var(--kn-red-light);
}

#kn-subscribe input[type="submit"][id] {
	margin-top: 0.4rem;
	padding: 0.6rem 1.6rem;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	background: var(--kn-red-strong);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

#kn-subscribe input[type="submit"][id]:hover {
	background: var(--kn-red-dark);
}

.site-footer .site-bottom-footer-wrap {
	color: #aab1bb;
	background: #0d0f13;
}

.site-footer .footer-html {
	font-size: 0.9rem;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1024px) {
	.kn-two,
	.kn-lead-list {
		grid-template-columns: 1fr;
	}

	.kn-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.kn-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.site-branding a.brand img {
		max-width: 190px;
	}

	.kn-top,
	.kn-grid-2,
	.kn-grid-3,
	.kn-grid-4,
	.kn-list-2,
	.kn-footer-inner {
		grid-template-columns: 1fr;
	}

	.kn-top .kn-link,
	.kn-grid-2 .kn-link,
	.kn-lead-list > .kn-overlay .kn-link {
		min-height: 260px;
	}

	.kn-overlay .kn-title,
	.kn-grid-2 .kn-title,
	.kn-lead-list > .kn-overlay .kn-title,
	.kn-feature .kn-title {
		font-size: 1.25rem;
	}

	.kn-feature .kn-link {
		grid-template-columns: 1fr;
	}

	.kn-head h2 {
		font-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kn-image img,
	.kn-title {
		transition: none;
	}
}