/* ==========================================================================
   Hari Gossip 2.1 — theme styles
   Bootstrap 5 handles the grid, navbar, collapse and forms. This file gives
   the theme its look. Sinhala first, English second.

   Type   one family per script, same for headings and body
          Manrope (English) + Noto Sans Sinhala (Sinhala), variable weights
   Colour --hg-primary  deep teal, set in Theme Settings
          --hg-accent   warm amber for highlights
          --hg-ink      dark pine for text and dark surfaces
   ========================================================================== */

:root {
	--hg-primary: #a80c0d;
	--hg-accent: #f2a93b;
	--hg-footer-bg: #242A30;
	--hg-body-size: 16px;

	/* Font sizes. Overridden per device from Hari Gossip Settings → Typography. */
	--hg-fs-title: 28px;
	--hg-fs-content: 17px;
	--hg-fs-list: 20px;
	--hg-fs-side: 15px;
	--hg-fs-hero: 25px;
	--hg-fs-hero-item: 17px;
	--hg-fs-section: 24px;
	--hg-fs-excerpt: 15px;
	--hg-fs-widget: 19px;
	--hg-fs-related: 16px;
	--hg-fs-h2: 25px;
	--hg-fs-h3: 21px;
	--hg-fs-menu: 15px;
	--hg-fs-footer: 14px;
	--hg-thumb-ratio: 16 / 9;

	--hg-ink: #0e2a2c;
	--hg-text: #132a2c;
	--hg-muted: #5f7577;
	--hg-border: #dfeae8;
	--hg-bg: #f3f7f6;
	--hg-card: #ffffff;
	--hg-soft: color-mix(in srgb, var(--hg-primary) 9%, #ffffff);
	--hg-blush: #e3efed;

	--hg-radius-sm: 10px;
	--hg-radius: 10px;
	--hg-radius-lg: 10px;

	/* Bootstrap components (buttons, inputs, dropdowns) use the same radius. */
	--bs-border-radius: 10px;
	--bs-border-radius-sm: 10px;
	--bs-border-radius-lg: 10px;
	--bs-border-radius-xl: 10px;
	--bs-border-radius-pill: 10px;
	--hg-header-h: 90px;

	--hg-font: "Manrope", "Noto Sans Sinhala", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--hg-display: var(--hg-font);

	--hg-ease: cubic-bezier(.2, .7, .2, 1);
}

body.hg-dark {
	--hg-text: #e6f0ef;
	--hg-muted: #97aeac;
	--hg-border: #213b3d;
	--hg-bg: #0a1a1b;
	--hg-card: #102426;
	--hg-soft: color-mix(in srgb, var(--hg-primary) 26%, #102426);
	--hg-blush: #18312f;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/*
 * Safety net: nothing can make the page scroll sideways on phones.
 *
 * html: "hidden" is passed up to the browser window itself, so the html
 * element never becomes a scroll box and the sticky header keeps working.
 * It is also supported by older phone browsers and in-app browsers
 * (Facebook, Instagram) that ignore "clip" on the page.
 *
 * body: "clip" (not hidden) keeps position: sticky working. position:
 * relative makes the body the box that plugin popups are measured from
 * (reCAPTCHA, ad and share scripts add these straight into the body), so
 * the clip catches them too.
 */
html { overflow-x: hidden; }

body {
	position: relative;
	overflow-x: clip;
}

body {
	background: var(--hg-bg);
	color: var(--hg-text);
	font-family: var(--hg-font);
	font-size: var(--hg-body-size);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--hg-primary); text-decoration: none; transition: color .2s var(--hg-ease); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hg-font);
	font-weight: 800;
	line-height: 1.3;
	color: var(--hg-text);
	letter-spacing: -.01em;
}

/* Sinhala needs extra vertical room for its vowel signs above and below. */
body.hg-font-sinhala { line-height: 1.85; }
body.hg-font-sinhala h1,
body.hg-font-sinhala h2,
body.hg-font-sinhala h3,
body.hg-font-sinhala h4 { line-height: 1.5; letter-spacing: 0; font-weight: 700; }

::selection { background: var(--hg-primary); color: #fff; }

:focus-visible {
	outline: 2px solid var(--hg-primary);
	outline-offset: 3px;
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.hg-site {
	background: var(--hg-bg);
	max-width: 1240px;
	margin: 0 auto;
}

body.hg-layout-full .hg-site { max-width: 100%; }

/* Boxed: a framed sheet with a hairline edge on wide screens. */
@media (min-width: 1280px) {
	body.hg-layout-boxed { background: color-mix(in srgb, var(--hg-bg) 70%, var(--hg-border)); }
	body.hg-layout-boxed .hg-site { box-shadow: 0 0 0 1px var(--hg-border); }
}

@media (min-width: 768px) {
	body.hg-layout-boxed .hg-site .container { padding-left: 28px; padding-right: 28px; }
}

.hg-main { padding: 28px 0 56px; }

/* --------------------------------------------------------------------------
   Buttons and forms
   -------------------------------------------------------------------------- */

.btn { font-family: var(--hg-font); }

.btn-primary {
	--bs-btn-bg: var(--hg-primary);
	--bs-btn-border-color: var(--hg-primary);
	--bs-btn-hover-bg: var(--hg-ink);
	--bs-btn-hover-border-color: var(--hg-ink);
	--bs-btn-active-bg: var(--hg-ink);
	--bs-btn-active-border-color: var(--hg-ink);
	--bs-btn-focus-shadow-rgb: 11, 122, 117;
	font-weight: 700;
	border-radius: 10px;
}

body.hg-dark .btn-primary {
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--hg-ink);
}

.form-control {
	border-color: var(--hg-border);
	background: var(--hg-card);
	color: var(--hg-text);
	border-radius: 10px;
	padding: 10px 18px;
}

.form-control:focus {
	border-color: var(--hg-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 18%, transparent);
	background: var(--hg-card);
	color: var(--hg-text);
}

.hg-searchform .form-control { border-radius: 10px 0 0 10px; }
.hg-searchform .btn { border-radius: 0 10px 10px 0; padding: 0 18px; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.hg-topbar {
	background: #242A30;
	color: #d3e3e1;
	font-size: 13px;
	font-weight: 500;
}

.hg-topbar-inner { min-height: 38px; }
.hg-topbar a { color: #d3e3e1; }
.hg-topbar a:hover { color: #fff; }

.hg-topbar-menu a { position: relative; }
.hg-rtl-link { opacity: .8; }

.hg-topbar .hg-social-icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.hg-topbar .hg-social-label { display: none; }

.hg-topbar .hg-social,
.hg-topbar .hg-social:hover {
	background: none;
	color: #d3e3e1;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	filter: none;
}

.hg-topbar .hg-social:hover { background: var(--hg-primary); color: #fff; }

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

.hg-header {
	background: var(--hg-card);
	box-shadow: 0 1px 0 var(--hg-border), 0 10px 30px -24px rgba(14, 42, 44, .45);
	border-bottom: 1px solid var(--hg-border);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

@media (max-width: 600px) {
	body.admin-bar .hg-header { top: 0; }
}

/* Teal-to-amber strip along the top of the header. */
.hg-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hg-primary) 0 70%, var(--hg-accent) 70% 100%);
}

.hg-navbar { padding: 10px 0; }

.hg-branding .site-title {
	font-family: var(--hg-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	display: block;
}

.hg-branding .site-title a { color: var(--hg-text); }
.hg-branding .site-title a:hover { color: var(--hg-primary); }
.hg-branding .site-description { font-size: 12px; color: var(--hg-muted); margin-top: 2px; }
.hg-branding img { max-height: 46px; width: auto; }
.hg-navbar .navbar-brand { margin-right: 0; }

body.hg-dark .hg-branding .custom-logo { filter: brightness(0) invert(1); }

.hg-icon-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text);
	background: var(--hg-bg);
	border: 1px solid var(--hg-border);
}

.hg-icon-btn:hover { color: var(--hg-primary); border-color: var(--hg-primary); background: var(--hg-card); }

.btn.hg-icon-btn.btn-primary { color: #fff; background: var(--hg-primary); border-color: var(--hg-primary); }
.btn.hg-icon-btn.btn-primary:hover { background: var(--hg-ink); border-color: var(--hg-ink); }

.hg-dark-toggle[aria-pressed="true"] { background: var(--hg-ink); color: var(--hg-accent); border-color: var(--hg-ink); }

.navbar-toggler.hg-nav-toggle {
	border: 1px solid var(--hg-border);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The rule above sets display, so hide the menu button again on desktop. */
@media (min-width: 992px) {
	.navbar-toggler.hg-nav-toggle { display: none; }
}

.navbar-toggler.hg-nav-toggle:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 18%, transparent); }
.hg-nav-toggle .navbar-toggler-icon { width: 20px; height: 20px; }
body.hg-dark .hg-nav-toggle .navbar-toggler-icon { filter: invert(1); }

/* Primary menu */

.hg-menu .nav-link {
	position: relative;
	font-size: var(--hg-fs-menu);
	font-weight: 700;
	padding: 10px 0;
}

/*
 * Header menu link colours. Every link is the primary colour in every state
 * (normal, hover, focus, visited, open dropdown), and the current page's
 * link is the dark text colour so visitors can see where they are.
 * !important so Bootstrap's navbar states and plugin or Additional CSS
 * rules cannot change them.
 */
.hg-header .hg-menu .nav-link,
.hg-header .hg-menu .nav-link:hover,
.hg-header .hg-menu .nav-link:focus,
.hg-header .hg-menu .nav-link:visited,
.hg-header .hg-menu .nav-link.show,
body.hg-dark .hg-header .hg-menu .nav-link { color: var(--hg-primary) !important; }

/* Current page: dark text colour (light text colour in dark mode). */
.hg-header .hg-menu .nav-link.active,
.hg-header .hg-menu .active > .nav-link,
.hg-header .hg-menu .current-menu-item > .nav-link,
.hg-header .hg-menu .current-menu-ancestor > .nav-link,
body.hg-dark .hg-header .hg-menu .nav-link.active,
body.hg-dark .hg-header .hg-menu .active > .nav-link,
body.hg-dark .hg-header .hg-menu .current-menu-item > .nav-link,
body.hg-dark .hg-header .hg-menu .current-menu-ancestor > .nav-link { color: var(--hg-text) !important; }

.hg-menu .dropdown-menu {
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	box-shadow: 0 18px 40px -18px rgba(14, 42, 44, .35);
	font-size: 14px;
	padding: 8px;
	min-width: 220px;
}

.hg-menu .dropdown-item {
	padding: 9px 14px;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text);
	font-weight: 600;
}

.hg-menu .dropdown-item:hover,
.hg-menu .dropdown-item:focus { background: var(--hg-soft); color: var(--hg-primary); }

/* --------------------------------------------------------------------------
   Desktop mega menu
   Category menu items show their latest posts in a panel under the header.
   Hidden on phones and tablets, where the normal menu is used.
   -------------------------------------------------------------------------- */

.hg-mega { display: none; }

@media (min-width: 992px) {

	/* Menu links in capitals with a chevron, like the design. */
	.hg-menu .nav-link { text-transform: uppercase; letter-spacing: .02em; }

	.hg-menu .dropdown-toggle::after,
	.hg-menu .hg-mega-toggle::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 7px;
		border: 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		vertical-align: middle;
		transform: translateY(-3px) rotate(45deg);
		transition: transform .2s var(--hg-ease);
	}

	.hg-menu .hg-has-mega:hover > .hg-mega-toggle::after,
	.hg-menu .hg-has-mega:focus-within > .hg-mega-toggle::after { transform: translateY(0) rotate(225deg); }

	/* The panel spans the header container, not just the menu item. */
	.hg-navbar > .container { position: relative; }
	.hg-menu > .hg-has-mega { position: static; }

	/* Sub-category links show inside the panel instead of a dropdown. */
	.hg-menu > .hg-has-mega > .dropdown-menu { display: none !important; }

	.hg-mega {
		display: block;
		position: absolute;
		top: calc(100% + 11px);
		left: calc(var(--bs-gutter-x, 24px) * .5);
		right: calc(var(--bs-gutter-x, 24px) * .5);
		z-index: 60;
		padding: 22px;
		background: var(--hg-card);
		border: 1px solid var(--hg-border);
		border-top: 0;
		border-radius: 0 0 var(--hg-radius) var(--hg-radius);
		box-shadow: 0 24px 40px -24px rgba(14, 42, 44, .35);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .2s var(--hg-ease), transform .2s var(--hg-ease), visibility 0s linear .2s;
	}

	/* Invisible bridge so the panel stays open while the mouse moves down to it. */
	.hg-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 34px;
	}

	.hg-menu > .hg-has-mega:hover > .hg-mega,
	.hg-menu > .hg-has-mega:focus-within > .hg-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: .08s, .08s, 0s;
	}

	.hg-mega-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 0 18px;
		padding: 0 0 16px;
		list-style: none;
		border-bottom: 1px solid var(--hg-border);
	}

	.hg-mega-links a {
		display: inline-block;
		padding: 6px 14px;
		border-radius: 999px;
		background: var(--hg-soft);
		color: var(--hg-text);
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}

	.hg-mega-links a:hover,
	.hg-mega-links a:focus { background: var(--hg-primary); color: #fff; }

	.hg-mega-grid {
		display: grid;
		grid-template-columns: repeat(var(--hg-mega-cols, 5), minmax(0, 1fr));
		gap: 20px;
	}

	.hg-mega-thumb {
		display: block;
		aspect-ratio: 16 / 10;
		border-radius: var(--hg-radius-sm);
		overflow: hidden;
		background: var(--hg-blush);
	}

	.hg-mega-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .4s var(--hg-ease);
	}

	.hg-mega-item:hover .hg-mega-thumb img { transform: scale(1.05); }

	.hg-mega-title {
		margin: 10px 0 0;
		font-family: var(--hg-font);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.hg-mega-title a { color: var(--hg-text); text-decoration: none; }
	.hg-mega-title a:hover,
	.hg-mega-title a:focus { color: var(--hg-primary); }
}

.hg-search-panel { border-top: 1px solid var(--hg-border); background: var(--hg-card); }

.hg-search-panel .hg-searchform { max-width: 520px; margin-left: auto; }

@media (max-width: 575.98px) {
	.hg-search-panel .hg-searchform { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Shared: thumbnails, category pill, meta
   -------------------------------------------------------------------------- */

.hg-thumb {
	display: block;
	position: relative;
	background: var(--hg-blush);
	overflow: hidden;
	border-radius: var(--hg-radius);
	aspect-ratio: var(--hg-thumb-ratio);
	isolation: isolate;
}

.hg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .6s var(--hg-ease);
}

a.hg-thumb:hover img { transform: scale(1.04); }

.hg-thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--hg-primary) 22%, transparent), transparent 60%),
		var(--hg-blush);
}

.hg-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--hg-primary);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--hg-primary) 30%, transparent);
	z-index: 2;
}

.hg-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

/* Category: small teal pill. */
.hg-cat {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--hg-primary);
	background: var(--hg-soft);
	border-radius: 10px;
	padding: 6px 11px 5px;
	margin: 14px 0 8px;
}

.hg-cat:hover { background: var(--hg-primary); color: #fff; }

.hg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--hg-muted);
}

.hg-meta .hg-author { color: var(--hg-text); font-weight: 700; }
.hg-meta .hg-author:hover { color: var(--hg-primary); }

/* The dash separator becomes a small dot. */
.hg-meta .hg-sep {
	font-size: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
	margin: 0 2px;
}

/* --------------------------------------------------------------------------
   Hero — lead photo with a headline card that overlaps its lower edge
   -------------------------------------------------------------------------- */

.hg-hero { padding: 0 0 40px; }

.hg-hero-main { position: relative; height: 100%; display: flex; flex-direction: column; }

.hg-hero-main .hg-thumb {
	border-radius: var(--hg-radius-lg);
	aspect-ratio: var(--hg-thumb-ratio);
}

@media (min-width: 992px) {
	.hg-hero-main .hg-thumb { aspect-ratio: auto; flex: 1 1 auto; min-height: 400px; }
}

.hg-hero-body {
	position: relative;
	z-index: 2;
	margin: -56px 14px 0;
	padding: 20px 20px 22px;
	background: var(--hg-card);
	border-radius: var(--hg-radius);
	box-shadow: 0 22px 44px -26px rgba(14, 42, 44, .55);
	border-top: 4px solid var(--hg-accent);
}

.hg-hero-main .hg-cat { margin: 0 0 10px; background: var(--hg-accent); color: var(--hg-ink); }
.hg-hero-main .hg-cat:hover { background: var(--hg-ink); color: #fff; }

.hg-hero-title {
	font-size: var(--hg-fs-hero);
	line-height: 1.28;
	margin: 0;
	text-wrap: balance;
}

body.hg-font-sinhala .hg-hero-title { line-height: 1.5; }

.hg-hero-title a { color: var(--hg-text); }
.hg-hero-title a:hover { color: var(--hg-primary); }

@media (min-width: 768px) {
	.hg-hero-body { margin: -90px 32px 0; padding: 26px 30px 28px; }
}

/* Side stories */

.hg-hero-side {
	display: grid;
	gap: 0;
	height: 100%;
	align-content: start;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	padding: 6px 18px;
	box-shadow: inset 4px 0 0 var(--hg-primary);
}

.hg-hero-item {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 16px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--hg-border);
}

.hg-hero-item:last-child { border-bottom: 0; }

.hg-hero-item .hg-thumb { aspect-ratio: 1 / 1; border-radius: var(--hg-radius); }
.hg-hero-item .hg-cat { margin: 0 0 6px; padding: 5px 9px 4px; font-size: 11px; }

.hg-hero-item-title {
	font-size: var(--hg-fs-hero-item);
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.hg-font-sinhala .hg-hero-item-title { line-height: 1.45; }

.hg-hero-item-title a { color: var(--hg-text); }
.hg-hero-item-title a:hover { color: var(--hg-primary); }

@media (min-width: 992px) {
	.hg-hero-side { padding: 8px 24px; }
	.hg-hero-item { grid-template-columns: 128px 1fr; padding: 20px 0; }
	.hg-hero-item .hg-thumb { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.hg-section-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 14px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--hg-border);
	position: relative;
}

.hg-section-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	background: linear-gradient(90deg, var(--hg-primary) 0 70%, var(--hg-accent) 70% 100%);
}

.hg-section-title {
	font-size: var(--hg-fs-section);
	font-weight: 800;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hg-section-title a { color: var(--hg-text); display: inline-flex; align-items: center; gap: 10px; }
.hg-section-title a:hover { color: var(--hg-primary); }

.hg-section-title i {
	font-size: 12px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hg-soft);
	color: var(--hg-primary);
}

.hg-archive-desc { color: var(--hg-muted); font-size: 15px; }
.hg-archive-desc p { margin: 0; }

/* --------------------------------------------------------------------------
   Post list
   -------------------------------------------------------------------------- */

.hg-post-list { display: grid; gap: 0; }

.hg-post-list { gap: 18px; }

.hg-list-item {
	--bs-gutter-x: 1.25rem;
	--bs-gutter-y: 1rem;
	margin: 0;
	padding: 14px 14px 18px;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	align-items: center;
	transition: border-color .2s, box-shadow .2s;
}

.hg-list-item:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); box-shadow: 0 16px 34px -26px rgba(14, 42, 44, .5); }

.hg-list-item > [class*="col-"] { margin-top: 0; }

@media (min-width: 768px) {
	.hg-list-item { padding: 14px 22px 14px 14px; }
}

.hg-list-media .hg-thumb { aspect-ratio: 3 / 2; }

@media (min-width: 768px) {
	.hg-list-media { padding-left: 0; }
	.hg-list-item .hg-cat { margin-top: 0; }
}

.hg-list-title {
	font-size: var(--hg-fs-list);
	line-height: 1.35;
	margin: 0 0 8px;
	text-wrap: pretty;
}

body.hg-font-sinhala .hg-list-title { line-height: 1.55; }

.hg-list-title a { color: var(--hg-text); }
.hg-list-title a:hover { color: var(--hg-primary); }

.hg-list-excerpt {
	color: var(--hg-muted);
	font-size: var(--hg-fs-excerpt);
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hg-no-results {
	background: var(--hg-card);
	border: 1px dashed var(--hg-border);
	border-radius: var(--hg-radius-lg);
	padding: 32px;
}

.hg-no-results .hg-searchform { max-width: 420px; margin-top: 16px; }

/* --------------------------------------------------------------------------
   Sidebar and widgets
   -------------------------------------------------------------------------- */

/*
 * The content rows use g-lg-5, which also sets a 3rem vertical gutter: the
 * row is pulled up by 3rem and each column pushed back down. Any column that
 * changes its own top margin then rides up over whatever sits above the row
 * (the header, the hero). The two columns sit side by side on desktop and
 * stack on mobile, so a vertical gutter is never needed. Turning it off makes
 * the row start exactly where it should on every template.
 */
.hg-columns { --bs-gutter-y: 0; }

.hg-col-side { margin-top: 40px; }

/*
 * Sticky sidebar. Bootstrap rows stretch their columns, so the column is
 * pinned to the top with align-self. theme.js sets --hg-side-top: below the
 * header when the sidebar fits on screen, or a negative value when it is
 * taller, so it scrolls with the page until its last widget is in view and
 * then stays put. No inner scrollbar either way.
 */
@media (min-width: 992px) {
	.hg-col-side {
		margin-top: 0;
		position: sticky;
		top: var(--hg-side-top, calc(var(--wp-admin--admin-bar--height, 0px) + var(--hg-header-h) + 20px));
		align-self: flex-start;
	}

	.hg-col-side > .widget:last-child { margin-bottom: 0; }
}

.widget {
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	padding: 22px;
	margin: 0 0 24px;
}

.widget-title,
.hg-widget-title {
	font-size: var(--hg-fs-widget);
	font-weight: 800;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hg-border);
	position: relative;
}

.hg-widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 3px;
	background: linear-gradient(90deg, var(--hg-primary) 0 70%, var(--hg-accent) 70% 100%);
}

.hg-widget-empty { font-size: 14px; color: var(--hg-muted); }
.hg-widget-note { font-size: 12px; font-style: italic; }

/* Follow us buttons */

.hg-social-buttons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.hg-social-buttons a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 6px;
	border-radius: var(--hg-radius);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transition: transform .2s var(--hg-ease), filter .2s;
}

.hg-social-buttons a i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .18);
	font-size: 15px;
}

.hg-social-buttons .hg-social-label {
	flex: 1 1 auto;
	padding-right: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hg-social-buttons a:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }

.hg-social-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.hg-social-buttons .is-facebook,
.hg-footer-social .is-facebook { background: #1877f2; }
.hg-social-buttons .is-twitter,
.hg-footer-social .is-twitter { background: #14171a; }
.hg-social-buttons .is-youtube,
.hg-footer-social .is-youtube { background: #ff0033; }
.hg-social-buttons .is-instagram,
.hg-footer-social .is-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.hg-social-buttons .is-quora,
.hg-footer-social .is-quora { background: #b92b27; }
.hg-social-buttons .is-rss,
.hg-footer-social .is-rss { background: #f29a00; }
.hg-social-buttons .is-tiktok,
.hg-footer-social .is-tiktok { background: #010101; }
.hg-social-buttons .is-whatsapp,
.hg-footer-social .is-whatsapp { background: #1fae54; }
.hg-social-buttons .is-telegram,
.hg-footer-social .is-telegram { background: #229ed9; }

body.hg-dark .hg-social-buttons .is-twitter,
body.hg-dark .hg-social-buttons .is-tiktok { background: #213b3d; }

/* Follow Us widget: Icons only layout */

.widget .hg-social-icons { gap: 10px; }

.widget .hg-social-icons li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	color: #fff;
	font-size: 17px;
	line-height: 1;
	transition: transform .2s var(--hg-ease), filter .2s;
}

.widget .hg-social-icons li a:hover { transform: translateY(-2px); filter: brightness(1.06); }

.widget .hg-social-icons .hg-social-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.widget .hg-social-icons .is-facebook { background: #1877f2; }
.widget .hg-social-icons .is-twitter { background: #14171a; }
.widget .hg-social-icons .is-youtube { background: #ff0033; }
.widget .hg-social-icons .is-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.widget .hg-social-icons .is-quora { background: #b92b27; }
.widget .hg-social-icons .is-rss { background: #f29a00; }
.widget .hg-social-icons .is-tiktok { background: #010101; }
.widget .hg-social-icons .is-whatsapp { background: #1fae54; }
.widget .hg-social-icons .is-telegram { background: #229ed9; }

body.hg-dark .widget .hg-social-icons .is-twitter,
body.hg-dark .widget .hg-social-icons .is-tiktok { background: #213b3d; }

/* Posts widget */

.hg-block-lead { margin: 0 0 6px; }
.hg-block-lead .hg-cat { margin-top: 14px; }
.hg-block-title { font-size: 18px; line-height: 1.35; margin: 0; }
body.hg-font-sinhala .hg-block-title { line-height: 1.55; }
.hg-block-title a { color: var(--hg-text); }
.hg-block-title a:hover { color: var(--hg-primary); }

.hg-block-item {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--hg-border);
}

.hg-block-lead + .hg-block-item { margin-top: 12px; }
.hg-block-item:last-child { padding-bottom: 0; }

.hg-block-item .hg-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3 !important;
	border-radius: var(--hg-radius-sm);
}

.hg-block-item .hg-thumb img,
.hg-related .hg-thumb img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}

.hg-block-item-title {
	font-size: var(--hg-fs-side);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.hg-font-sinhala .hg-block-item-title { line-height: 1.55; }

.hg-block-item-title a { color: var(--hg-text); }
.hg-block-item-title a:hover { color: var(--hg-primary); }

.hg-block-date { display: block; font-size: 12px; color: var(--hg-muted); margin-top: 4px; }

/* Core and plugin widgets, including WP Popular Posts */

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 8px 0; border-top: 1px solid var(--hg-border); }
.widget li:first-child { border-top: 0; padding-top: 0; }
.widget li a { color: var(--hg-text); font-weight: 600; }
.widget li a:hover { color: var(--hg-primary); }

.widget .hg-social-buttons li,
.widget .hg-social-icons li { padding: 0; border: 0; }

.widget .hg-social-buttons li a,
.widget .hg-social-buttons li a:hover,
.widget .hg-social-icons li a,
.widget .hg-social-icons li a:hover { color: #fff; }

.widget select { width: 100%; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); padding: 8px 10px; background: var(--hg-card); color: var(--hg-text); }

.wpp-list { counter-reset: wpp; }
.wpp-list li { display: flex; gap: 14px; align-items: center; padding: 14px 0; }
.wpp-list li a.wpp-post-title { font-weight: 700; font-size: 15px; line-height: 1.45; }
.wpp-list img { border-radius: var(--hg-radius-sm); }
.wpp-list .wpp-excerpt { font-size: 13px; color: var(--hg-muted); }
.wpp-list .post-stats { font-size: 12px; color: var(--hg-muted); display: block; }

/* Tag cloud as pills */
.widget .tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.widget .tagcloud a {
	font-size: 13px !important;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 10px;
	background: var(--hg-bg);
	color: var(--hg-text);
}
.widget .tagcloud a:hover { background: var(--hg-primary); color: #fff; }

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */

.hg-single {
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	padding: 22px 18px 26px;
}

@media (min-width: 768px) {
	.hg-single { padding: 34px 40px 36px; }
}

.hg-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 13px;
	color: var(--hg-muted);
	margin: 0 0 16px;
}

.hg-breadcrumb a { color: var(--hg-muted); font-weight: 600; }
.hg-breadcrumb a:hover { color: var(--hg-primary); }
.hg-breadcrumb .hg-crumb-sep { margin: 0 8px; opacity: .6; }
.hg-breadcrumb .hg-crumb-current { color: var(--hg-text); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hg-single-head { margin-bottom: 8px; }

.hg-single-head .hg-cat { margin-top: 0; }

.hg-single-title {
	font-size: var(--hg-fs-title);
	line-height: 1.3;
	margin: 4px 0 18px;
	text-wrap: balance;
}

body.hg-font-sinhala .hg-single-title { line-height: 1.5; }

.hg-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--hg-border);
	border-bottom: 1px solid var(--hg-border);
	font-size: 14px;
	color: var(--hg-muted);
}

.hg-single-meta-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hg-avatar { display: inline-flex; margin-right: 6px; }
.hg-avatar img { border-radius: 50%; width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--hg-card), 0 0 0 4px var(--hg-soft); }
.hg-single-meta .hg-author { color: var(--hg-text); font-weight: 700; }
.hg-single-meta .hg-author:hover { color: var(--hg-primary); }

.hg-single-meta-right { display: flex; align-items: center; gap: 8px; }

/*
 * Mobile: avatar on the left, "by Author" and the date on two lines next to
 * it, and the views and comments badges inline on the right of the same row.
 */
@media (max-width: 767.98px) {
	.hg-single-meta { flex-wrap: nowrap; gap: 10px; }

	.hg-single-meta-left {
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 6px;
		row-gap: 0;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
	}

	.hg-single-meta-left .hg-avatar { grid-column: 1; grid-row: 1 / span 2; margin-right: 4px; }
	.hg-single-meta-left .hg-by { grid-column: 2; grid-row: 1; }
	.hg-single-meta-left .hg-author {
		grid-column: 3;
		grid-row: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.hg-single-meta-left .hg-sep { display: none; }
	.hg-single-meta-left .hg-date { grid-column: 2 / span 2; grid-row: 2; line-height: 1.4; }

	.hg-single-meta-right { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; gap: 6px; }
}

.hg-single-views,
.hg-single-comments-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 10px;
	background: var(--hg-bg);
	color: var(--hg-muted);
	font-size: 13px;
	font-weight: 600;
}

.hg-single-comments-link { background: var(--hg-soft); color: var(--hg-primary); }
.hg-single-comments-link:hover { background: var(--hg-primary); color: #fff; }

.hg-single-media { margin: 22px 0; }
.hg-single-media img { border-radius: var(--hg-radius); width: 100%; height: auto; display: block; }
.hg-single-media figcaption { font-size: 13px; color: var(--hg-muted); padding-top: 10px; }

/* Reading column */

.hg-single-content {
	padding-top: 10px;
	font-size: var(--hg-fs-content);
	line-height: 1.85;
	max-width: 70ch;
}

body.hg-font-sinhala .hg-single-content { line-height: 2; }

.hg-single-content > p:first-of-type { font-size: 1.08em; color: var(--hg-text); }

.hg-single-content p { margin: 0 0 1.3em; }
.hg-single-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hg-single-content h2 { font-size: var(--hg-fs-h2); margin: 1.6em 0 .6em; }
.hg-single-content h3 { font-size: var(--hg-fs-h3); margin: 1.4em 0 .5em; }
.hg-single-content h4 { font-size: 19px; margin: 1.3em 0 .5em; }
.hg-single-content ul, .hg-single-content ol { padding-left: 22px; margin: 0 0 1.3em; }
.hg-single-content li { margin-bottom: .5em; }
.hg-single-content li::marker { color: var(--hg-primary); }
.hg-single-content img { border-radius: var(--hg-radius); }
.hg-single-content figure { margin: 1.6em 0; }
.hg-single-content figcaption { font-size: 13px; color: var(--hg-muted); text-align: center; margin-top: 8px; }

.hg-single-content blockquote,
.hg-single-content .wp-block-quote {
	margin: 2em 0;
	border-left: 4px solid var(--hg-primary);
	background: var(--hg-soft);
	border-radius: 0 var(--hg-radius) var(--hg-radius) 0;
	padding: 18px 22px 16px 24px;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.6;
	font-style: normal;
	color: var(--hg-text);
}

.hg-single-content blockquote p { margin: 0 0 10px; }

.hg-single-content blockquote cite {
	display: block;
	font-family: var(--hg-font);
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	color: var(--hg-muted);
}

.hg-single-content .wp-block-pullquote { border-color: var(--hg-primary); }

.hg-single-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; }
.hg-single-content th, .hg-single-content td { border: 1px solid var(--hg-border); padding: 10px 14px; text-align: left; }
.hg-single-content th { background: var(--hg-bg); }
.hg-single-content pre { background: var(--hg-bg); padding: 16px; border-radius: var(--hg-radius); overflow-x: auto; font-size: 13px; }
.hg-single-content iframe { max-width: 100%; border-radius: var(--hg-radius); }

.hg-link-pages { margin: 0 0 20px; font-size: 14px; font-weight: 700; }

/* Tags */

.hg-single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 24px 0 0;
	font-size: 13px;
}

.hg-tags-label { font-weight: 800; margin-right: 6px; color: var(--hg-text); }

.hg-single-tags a {
	color: var(--hg-text);
	background: var(--hg-bg);
	border-radius: 10px;
	padding: 6px 12px;
	font-weight: 600;
	text-decoration: none;
}

.hg-single-tags a:hover { background: var(--hg-primary); color: #fff; }
.hg-single-tags .hg-tag-sep { display: none; }

.hg-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 20px; }
.hg-tags a { font-size: 13px; padding: 6px 12px; border-radius: 10px; background: var(--hg-bg); color: var(--hg-text); }

/* Share row */

.hg-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 16px;
	flex-wrap: wrap;
	background: var(--hg-bg);
	border-radius: var(--hg-radius);
}

.hg-share-icon {
	color: #fff;
	background: var(--hg-primary);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.hg-share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.hg-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	min-width: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .2s var(--hg-ease), filter .2s;
}

.hg-share-btn:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.hg-share-btn .hg-share-label { display: none; }
.hg-share-btn.is-wide { min-width: 120px; padding: 0 18px; }
.hg-share-btn.is-wide .hg-share-label { display: inline; }

.hg-share-btn.is-facebook { background: #1877f2; }
.hg-share-btn.is-twitter { background: #14171a; }
.hg-share-btn.is-whatsapp { background: #1fae54; }
.hg-share-btn.is-linkedin { background: #0a66c2; }
.hg-share-btn.is-telegram { background: #229ed9; }
.hg-share-btn.is-email { background: #6e6475; }
.hg-share-btn.is-copy { background: var(--hg-card); color: var(--hg-text); box-shadow: inset 0 0 0 1px var(--hg-border); }
.hg-share-btn.is-copy.is-copied { background: #1fae54; color: #fff; box-shadow: none; }

/* Content locker */

.hg-single-content.hg-locked {
	position: relative;
	overflow: hidden;
	transition: height .5s ease;
}

.hg-locker-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 20px;
	background: linear-gradient(to bottom, transparent, var(--hg-card) 85%);
	pointer-events: none;
}

.hg-locker-btn {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	max-width: calc(100% - 35px);
	padding: 10px 32px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: linear-gradient(135deg, #e53935, #c62828);
	color: #fff;
	font-family: var(--hg-font);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(229, 57, 53, .6);
	transition: transform .2s var(--hg-ease), filter .2s;
}

.hg-locker-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hg-locker-line { font-size: 17px; }

@media (max-width: 575.98px) {
	.hg-locker-btn { padding: 10px 20px; }
	.hg-locker-line { font-size: 18px; }
}

.hg-locker-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	max-width: 90vw;
	padding: 12px 24px;
	border-radius: 10px;
	background: #323232;
	color: #fff;
	font-size: 13px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
}

/* ShareThis reactions: let the buttons wrap instead of overflowing on phones. */
.hg-reactions { max-width: 100%; overflow: hidden; }

.hg-reactions .st-inline-reaction-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	max-width: 100% !important;
}

.hg-reactions .st-inline-reaction-buttons .st-btn { flex: 0 0 auto; }

/* Ad placements */

.hg-ad { margin: 24px 0; text-align: center; overflow: hidden; clear: both; }
.hg-ad img { max-width: 100%; height: auto; }
.hg-ad iframe,
.hg-ad ins,
.hg-ad > div,
.hg-ad video { max-width: 100% !important; }

/* Reaction buttons (ShareThis) */

.hg-reactions { margin: 30px 0 26px; text-align: center; }

.hg-reactions-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--hg-muted);
	margin: 0 0 12px;
}

body.hg-font-sinhala .hg-reactions-title { line-height: 1.6; }

/*
 * Reserve the space the buttons need, so the page does not jump when they
 * arrive, and show a soft placeholder row until ShareThis fills it in.
 */
.hg-reactions .sharethis-inline-reaction-buttons { min-height: 74px; }

.hg-reactions .sharethis-inline-reaction-buttons:empty {
	max-width: 330px;
	margin: 0 auto;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--hg-blush) 0%, var(--hg-bg) 50%, var(--hg-blush) 100%);
	background-size: 200% 100%;
	animation: hg-reactions-loading 1.4s ease-in-out infinite;
}

@keyframes hg-reactions-loading {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hg-reactions .sharethis-inline-reaction-buttons:empty { animation: none; }
}

/* Author box */

.hg-author-box {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 18px;
	margin: 24px 0 0;
	padding: 24px;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
}

@media (min-width: 768px) {
	.hg-author-box { grid-template-columns: 88px 1fr; gap: 22px; padding: 28px 32px; }
	.hg-author-avatar img { width: 88px !important; height: 88px !important; }
}

.hg-author-avatar img { border-radius: 50%; width: 72px; height: 72px; box-shadow: 0 0 0 3px var(--hg-card), 0 0 0 5px var(--hg-accent); }
.hg-author-name { font-size: 20px; margin: 0 0 6px; }
.hg-author-name a { color: var(--hg-text); }
.hg-author-name a:hover { color: var(--hg-primary); }
.hg-author-bio { margin: 0 0 12px; font-size: 14px; color: var(--hg-muted); }

.hg-author-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.hg-author-links a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hg-bg);
	color: var(--hg-muted);
	font-size: 14px;
}

.hg-author-links a:hover { color: #fff; background: var(--hg-primary); }

/* Related posts */

.hg-related {
	margin: 24px 0 0;
	padding: 24px;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
}

@media (min-width: 768px) {
	.hg-related { padding: 28px 32px; }
}

.hg-related .hg-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10 !important;
	border-radius: 10px;
}

.hg-related-title {
	font-size: var(--hg-fs-related);
	line-height: 1.4;
	margin: 12px 0 0;
}

body.hg-font-sinhala .hg-related-title { line-height: 1.55; }

.hg-related-title a { color: var(--hg-text); }
.hg-related-title a:hover { color: var(--hg-primary); }

/* Comments */

.hg-comments {
	margin-top: 24px;
	padding: 24px;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
}

@media (min-width: 768px) {
	.hg-comments { padding: 28px 32px; }
}

.hg-comments-notice { font-size: 14px; color: var(--hg-muted); margin: 0 0 16px; }
.hg-required { color: var(--hg-primary); }
.hg-comment-toggle { padding: 13px 20px; border-radius: 10px !important; }
.hg-comment-form-wrap { padding-top: 18px; }

/*
 * Keep the comments inside the screen on mobile. Long words, URLs, pasted
 * images and embeds in comments, plus the reply form when it moves inside a
 * nested reply, could be wider than the phone and make the page scroll
 * sideways.
 */
.hg-comments,
.hg-comment-list,
.hg-comment-list li,
.hg-comment-list .comment-body,
.hg-comment-form-wrap,
.comment-respond,
.comment-form { min-width: 0; max-width: 100%; }

.hg-comment-list .comment-content,
.hg-comment-list .comment-author,
.hg-comment-list .comment-meta {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hg-comment-list .comment-author { flex-wrap: wrap; }

.hg-comment-list .comment-content img,
.hg-comment-list .comment-content iframe,
.hg-comment-list .comment-content video,
.hg-comment-list .comment-content embed { max-width: 100%; height: auto; }

.hg-comment-list .comment-content pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { max-width: 100%; box-sizing: border-box; }

/*
 * Opening the form focuses the comment box. On phones (iPhone Safari in
 * particular) any field with text smaller than 16px makes the browser zoom
 * in on focus, and the zoomed page can then be dragged left and right.
 * 16px text stops the zoom; resize: vertical stops the box being dragged
 * wider than the screen.
 */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { font-size: max(16px, 1em); }

.comment-form textarea { resize: vertical; display: block; }

.comment-form,
.comment-form p { max-width: 100%; overflow-wrap: anywhere; }

.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; }

/*
 * Hard stop for reply chains: whatever a thread contains, the comments box
 * never pushes past its own edges. Nothing sticky lives inside it, so a
 * plain overflow here is safe and works in older mobile browsers that
 * ignore overflow-x: clip.
 */
.hg-comments { overflow-x: hidden; }

/*
 * "hidden" turns the box into a scroll area, so focusing the comment box can
 * slide its contents sideways. "clip" cuts off the overflow without that.
 */
@supports (overflow: clip) {
	.hg-comments { overflow-x: clip; }
}

.hg-col-main { min-width: 0; }

/*
 * Anti-spam and captcha plugins add their own boxes and iframes to the
 * comment form (reCAPTCHA is a fixed 304px wide). Keep them inside the form.
 */
.comment-form iframe,
.comment-form img,
.comment-form > div,
.comment-form > p > div { max-width: 100%; }

@media (max-width: 374.98px) {
	.comment-form .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
}

/*
 * Stronger 16px rule for the form fields. Plugins that restyle the comment
 * form often set 14px, which brings back the zoom-on-focus on phones.
 */
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"],
#respond .comment-form textarea { font-size: max(16px, 1em); }

/*
 * The main post column never scrolls sideways. Third-party widgets near the
 * comments (ShareThis reactions, ad iframes, embeds) can render wider than
 * a phone after the page has loaded, which widens the page. Nothing sticky
 * lives inside this column, so clipping it is safe. "hidden" is the
 * fallback for older browsers without overflow: clip.
 */
@media (max-width: 991.98px) {
	.hg-col-main { overflow-x: hidden; }

	@supports (overflow: clip) {
		.hg-col-main { overflow-x: clip; }
	}
}

.hg-comment-list .children,
.hg-comment-list .children li { min-width: 0; max-width: 100%; box-sizing: border-box; }

.hg-comment-list .comment-metadata { display: flex; flex-wrap: wrap; gap: 4px 8px; }

@media (max-width: 575.98px) {
	/* Smaller indent per reply level, so deep threads still fit. */
	.hg-comment-list .children { padding-left: 12px; margin-left: 4px; }

	/* From the third level down, stop indenting so long chains keep their width. */
	.hg-comment-list .children .children .children { padding-left: 0; margin-left: 0; border-left: 0; }

	.hg-comment-list .comment-author img { width: 40px; height: 40px; }
	.hg-comments { padding: 20px 16px; }
}

.hg-comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.hg-comment-list .children { list-style: none; padding-left: 22px; margin-left: 8px; border-left: 2px solid var(--hg-border); }
.hg-comment-list li { padding: 16px 0; }
.hg-comment-list > li { border-bottom: 1px solid var(--hg-border); }
.hg-comment-list > li:last-child { border-bottom: 0; }
.hg-comment-list .comment-author { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.hg-comment-list .comment-author img { border-radius: 50%; }
.hg-comment-list .comment-meta { font-size: 13px; color: var(--hg-muted); }
.hg-comment-list .comment-meta a { color: var(--hg-muted); }
.hg-comment-list .comment-content { margin-top: 8px; }
.hg-comment-list .reply a { font-size: 13px; font-weight: 700; }

.comment-form label { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: block; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	padding: 12px 14px;
	font: inherit;
	background: var(--hg-bg);
	color: var(--hg-text);
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: 0;
	border-color: var(--hg-primary);
	background: var(--hg-card);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 18%, transparent);
}

.comment-form .submit,
.comment-form input[type="submit"] {
	background: var(--hg-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 28px;
	font-weight: 700;
}

.comment-form .submit:hover { background: var(--hg-ink); }

/* --------------------------------------------------------------------------
   Contact Form 7
   Matches the comment form. Selectors start with ".wpcf7 .wpcf7-form" so they
   win over the plugin's own stylesheet whichever loads first.
   -------------------------------------------------------------------------- */

.wpcf7 {
	--hg-cf7-error: #d93025;
	--hg-cf7-success: #1f8a4c;
	max-width: 100%;
}

.wpcf7 .hidden-fields-container { border: 0; margin: 0; padding: 0; }

.wpcf7 .wpcf7-form p {
	margin: 0 0 18px;
	max-width: 100%;
	line-height: 1.5;
}

/* Labels: the plugin puts a <br> between the label text and the field. */
.wpcf7 .wpcf7-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--hg-text);
	margin: 0;
}

.wpcf7 .wpcf7-form label br { display: none; }

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
	max-width: 100%;
}

/* Text fields */
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form select,
.wpcf7 .wpcf7-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	padding: 12px 14px;
	font: inherit;
	/* 16px stops phones zooming in when a field is tapped. */
	font-size: max(16px, 1em);
	font-weight: 400;
	line-height: 1.5;
	background: var(--hg-bg);
	color: var(--hg-text);
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.wpcf7 .wpcf7-form textarea {
	resize: vertical;
	min-height: 160px;
}

.wpcf7 .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f7577' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.wpcf7 .wpcf7-form input::placeholder,
.wpcf7 .wpcf7-form textarea::placeholder { color: var(--hg-muted); opacity: 1; }

.wpcf7 .wpcf7-form input:focus,
.wpcf7 .wpcf7-form select:focus,
.wpcf7 .wpcf7-form textarea:focus {
	outline: 0;
	border-color: var(--hg-primary);
	background-color: var(--hg-card);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 18%, transparent);
}

/* File upload */
.wpcf7 .wpcf7-form input[type="file"] {
	max-width: 100%;
	font: inherit;
	font-size: 14px;
	color: var(--hg-muted);
}

.wpcf7 .wpcf7-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	background: var(--hg-card);
	color: var(--hg-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s;
}

.wpcf7 .wpcf7-form input[type="file"]::file-selector-button:hover { border-color: var(--hg-primary); }

/* Checkboxes, radio buttons and the acceptance box */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-acceptance {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.wpcf7 .wpcf7-form .wpcf7-list-item { margin: 0; }

.wpcf7 .wpcf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}

.wpcf7 .wpcf7-form input[type="checkbox"],
.wpcf7 .wpcf7-form input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--hg-primary);
}

/* Submit row */
.wpcf7 .wpcf7-form p:has(.wpcf7-submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 0;
}

.wpcf7 .wpcf7-form .wpcf7-submit {
	background: var(--hg-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 28px;
	font-family: var(--hg-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background .2s var(--hg-ease), color .2s var(--hg-ease);
}

.wpcf7 .wpcf7-form .wpcf7-submit:hover,
.wpcf7 .wpcf7-form .wpcf7-submit:focus-visible { background: var(--hg-ink); color: #fff; }

body.hg-dark .wpcf7 .wpcf7-form .wpcf7-submit:hover,
body.hg-dark .wpcf7 .wpcf7-form .wpcf7-submit:focus-visible { background: #fff; color: var(--hg-ink); }

.wpcf7 .wpcf7-form .wpcf7-submit:disabled,
.wpcf7 .wpcf7-form.submitting .wpcf7-submit { opacity: .65; cursor: wait; }

/* Loading spinner shown while the form sends */
.wpcf7 .wpcf7-spinner {
	margin: 0;
	background-color: var(--hg-primary);
	opacity: 1;
}

/* Field errors */
.wpcf7 .wpcf7-form .wpcf7-not-valid,
.wpcf7 .wpcf7-form [aria-invalid="true"] { border-color: var(--hg-cf7-error); }

.wpcf7 .wpcf7-form .wpcf7-not-valid:focus,
.wpcf7 .wpcf7-form [aria-invalid="true"]:focus {
	border-color: var(--hg-cf7-error);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-cf7-error) 18%, transparent);
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--hg-cf7-error);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* Message shown after sending */
.wpcf7 .wpcf7-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--hg-border);
	border-left-width: 4px;
	border-radius: var(--hg-radius);
	background: var(--hg-card);
	color: var(--hg-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.wpcf7 .wpcf7-form.init .wpcf7-response-output,
.wpcf7 .wpcf7-form.resetting .wpcf7-response-output,
.wpcf7 .wpcf7-form.submitting .wpcf7-response-output { display: none; }

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--hg-cf7-success) 35%, transparent);
	border-left-color: var(--hg-cf7-success);
	background: color-mix(in srgb, var(--hg-cf7-success) 8%, var(--hg-card));
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 .wpcf7-form.payment-required .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--hg-accent) 45%, transparent);
	border-left-color: var(--hg-accent);
	background: color-mix(in srgb, var(--hg-accent) 10%, var(--hg-card));
}

.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--hg-cf7-error) 35%, transparent);
	border-left-color: var(--hg-cf7-error);
	background: color-mix(in srgb, var(--hg-cf7-error) 8%, var(--hg-card));
}

/* Keep captcha boxes and password-manager icons inside the form. */
.wpcf7 .wpcf7-form iframe,
.wpcf7 .wpcf7-form .wpcf7-form-control-wrap > div { max-width: 100%; }

@media (max-width: 575.98px) {
	.wpcf7 .wpcf7-form .wpcf7-submit { flex: 1 1 auto; }
}

@media (max-width: 374.98px) {
	.wpcf7 .wpcf7-form .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
}

/* Previous / next */

.hg-post-nav { margin-top: 24px; }

.hg-post-nav .nav-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	font-size: 14px;
}

@media (min-width: 576px) {
	.hg-post-nav .nav-links { grid-template-columns: 1fr 1fr; }
}

.hg-post-nav .nav-previous a,
.hg-post-nav .nav-next a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 16px 20px;
	background: var(--hg-card);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	color: var(--hg-text);
	font-weight: 700;
}

.hg-post-nav .nav-next a { justify-content: flex-end; }
.hg-post-nav a:hover { border-color: var(--hg-primary); color: var(--hg-primary); }
.hg-post-nav .nav-next { grid-column: -2; text-align: right; }

/* --------------------------------------------------------------------------
   Pages, 404, pagination
   -------------------------------------------------------------------------- */

.hg-404 { text-align: center; padding: 60px 0 80px; }

.hg-404-code {
	font-weight: 800;
	font-size: clamp(96px, 20vw, 180px);
	line-height: 1;
	margin: 0 0 8px;
	color: var(--hg-primary);
}

.hg-404 .hg-searchform { max-width: 420px; margin: 24px auto; }

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 28px 0 0; }

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--hg-border);
	border-radius: 10px;
	background: var(--hg-card);
	color: var(--hg-text);
	font-weight: 700;
	font-size: 14px;
}

.pagination .page-numbers.dots { border: 0; background: none; }

.pagination .page-numbers.current,
.pagination a.page-numbers:hover { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }

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

.hg-footer {
	background: var(--hg-footer-bg);
	color: #c4d8d5;
	margin-top: 20px;
	position: relative;
}

.hg-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hg-primary) 0 70%, var(--hg-accent) 70% 100%);
}

.hg-footer-top { padding-top: 20px; padding-bottom: 40px; }

.hg-footer-name {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
}

.hg-footer-name:hover { color: #fff; }
.hg-footer-brand img { max-height: 46px; width: auto; }

.hg-footer-brand .hg-footer-logo.is-inverted,
.hg-footer-brand .custom-logo { filter: brightness(0) invert(1); }

.footer-widget-title {
	font-size: var(--hg-fs-widget);
	color: #fff;
	margin: 0 0 8px;
}

.hg-footer-text {
	font-size: var(--hg-fs-footer);
	color: #ffffff;
	line-height: 1.8;
}
.hg-footer-text p:last-child { margin-bottom: 0; }
.hg-footer .widget { background: none; border: 0; padding: 0; margin: 0; color: #9bb5b2; }
.hg-footer .widget a { color: #fff; }

.hg-footer-social .hg-social-label { display: none; }
.hg-footer-social .hg-social-icons { gap: 8px; }

@media (min-width: 992px) {
	.hg-footer-brand { display: flex; align-items: center; }
	.hg-footer-about { padding-left: 10px; }
	.hg-footer-social .hg-social-icons { justify-content: flex-end; }
}

.hg-footer-social .hg-social {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--hg-radius-sm);
	color: #fff;
	transition: transform .2s var(--hg-ease);
}

.hg-footer-social .hg-social:hover { transform: translateY(-3px); color: #fff; }

.hg-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13px;
	color: #7f9b98;
	background-color: #1C2327;
}

.hg-footer-bottom .hg-copyright { color: #ffffff; }
.hg-footer-menu a { color: #c4d8d5; font-weight: 600; }
.hg-footer-menu a:hover { color: #fff; }

/* Back to top */

.hg-back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: var(--hg-radius-sm);
	background: var(--hg-primary);
	color: #fff;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--hg-primary) 70%, transparent);
	transition: transform .2s var(--hg-ease), background .2s;
}

.hg-back-to-top:hover,
.hg-back-to-top:focus {
	background: var(--hg-ink);
	color: #fff;
	transform: translateY(-3px);
}

.hg-back-to-top[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
}

@media (min-width: 992px) {
	.hg-menu { gap: 10px; }
	.hg-menu .nav-link { padding: 22px 0; }
	.hg-navbar .hg-nav { margin-left: 40px; }

	.hg-share-btn.is-wide { min-width: 140px; }
}

@media (max-width: 991.98px) {
	.hg-nav {
		margin-top: 10px;
		padding: 6px 4px 14px;
		border-top: 1px solid var(--hg-border);
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}

	.hg-menu .nav-link { padding: 12px 4px; border-bottom: 1px solid var(--hg-border); font-size: 16px; }
	.hg-menu .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 0 14px; background: transparent; }
	.hg-menu .dropdown-item { padding: 10px 6px; }
}

@media (max-width: 575.98px) {
	.hg-main { padding-top: 18px; }
	.hg-hero { padding-bottom: 30px; }
	.widget { padding: 18px; }
	.hg-share-btn.is-wide { min-width: 0; }
	.hg-share-btn.is-wide .hg-share-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	a.hg-thumb:hover img { transform: none; }
}

@media print {
	.hg-topbar, .hg-header, .hg-col-side, .hg-footer, .hg-share, .hg-back-to-top, .hg-related, .hg-comments, .hg-post-nav { display: none !important; }
	.hg-single { border: 0; padding: 0; }
	body { background: #fff; }
}

/* Thumbnail shapes locked on tablet and mobile */
@media (max-width: 991.98px) {
	.hg-block-item { grid-template-columns: 116px 1fr; }
	.hg-block-item .hg-thumb { aspect-ratio: 4 / 3 !important; height: auto; }
	.hg-related .hg-thumb { aspect-ratio: 16 / 10 !important; height: auto; border-radius: 10px; }
}

@media (max-width: 575.98px) {
	.hg-block-item { grid-template-columns: 112px 1fr; }
}