/* =========================================================================
   Puthithu Modern — design tokens
   Palette keeps the original site's editorial red/white/ink identity but
   tightens it into a disciplined token system. Override any of these from
   Appearance > Customize (accent + ink are wired to the Customizer).
   ========================================================================= */
:root {
	/* Colors below are sampled directly (pixel-picked) from the homepage screenshot
	   you provided — not the theme package defaults, which turned out to differ
	   from what's actually live on puthithu.com. */
	--puthithu-header: #1B81B9;      /* header banner + nav strip + ticker badge (all one blue) */
	--puthithu-header-dark: #15678F; /* derived: hover/active state on header */
	--puthithu-primary: #1B81B9;     /* "பிரதான செய்திகள்" + "கட்டுரை" section headers */
	--puthithu-sports: #DD8229;      /* "விளையாட்டு" section header */
	--puthithu-world: #2182B4;       /* "வெளிநாடு" + "ஆசிரியர் கருத்து" section headers */
	--puthithu-more-link: #D14D0D;   /* "மேலும்" (read-more) link color */
	--puthithu-region-heading: #8B0000; /* plain sidebar region-list headings (அம்பாறை, etc.) */

	--puthithu-ink: #262626;         /* body text */
	--puthithu-ink-soft: #6B6B6B;    /* meta/date text */
	--puthithu-ink-faint: #8B8B8B;
	--puthithu-paper: #FFFFFF;
	--puthithu-canvas: #F4F4F4;      /* page background, very light gray */
	--puthithu-line: #E2E2E2;
	--puthithu-line-dotted: #D8D8D8;

	/* Old theme's single Tamil font, modernized (see README for the Droid→Noto note). */
	--font-body: 'Noto Sans Tamil', 'Noto Sans', system-ui, sans-serif;
	--font-display: 'Baloo Thambi 2', 'Noto Sans Tamil', system-ui, sans-serif; /* logo/wordmark only */

	--radius: 4px;
	--container: 1400px;
}

/* =========================================================================
   Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--puthithu-canvas);
	color: var(--puthithu-ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 0; left: 0; z-index: 999;
	background: var(--puthithu-header); color: #fff; padding: 0.75rem 1rem;
	clip: auto; width: auto; height: auto;
}
:focus-visible { outline: 3px solid var(--puthithu-sports); outline-offset: 2px; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

h1, h2, h3, h4 { font-family: var(--font-body); line-height: 1.25; margin: 0 0 0.5em; }

/* =========================================================================
   Breaking news ticker — pixel-matched to the screenshot: a WHITE row with a
   solid blue (same blue as the header) rounded badge on the left reading
   "தலைப்புச் செய்திகள்", and a scrolling list of links in dark text,
   separated by a middle-dot, to its right.
   ========================================================================= */
.breaking-ticker {
	background: var(--puthithu-paper);
	border-bottom: 1px solid var(--puthithu-line);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0.35rem 0;
}
.breaking-ticker__label {
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	color: #fff;
	padding: 0.4rem 1rem;
	background: var(--puthithu-header);
	border-radius: 3px;
	white-space: nowrap;
	margin-left: 1rem;
}
.breaking-ticker__track-wrap { flex: 1 1 auto; overflow: hidden; }
.breaking-ticker__track {
	display: flex;
	gap: 1.5rem;
	white-space: nowrap;
	animation: puthithu-marquee 45s linear infinite;
	padding: 0.5rem 1.25rem;
	width: max-content;
}
.breaking-ticker__track li { position: relative; padding-right: 1.5rem; }
.breaking-ticker__track li::after {
	content: '\00B7';
	position: absolute;
	right: 0.4rem;
	top: -0.35em;
	font-size: 1.3rem;
	color: var(--puthithu-ink-faint);
}
.breaking-ticker__track li a { font-size: 0.88rem; font-weight: 400; color: var(--puthithu-ink); }
.breaking-ticker__track li a:hover { color: var(--puthithu-header); }
.breaking-ticker__track:hover { animation-play-state: paused; }
@keyframes puthithu-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.breaking-ticker__track { animation: none; overflow-x: auto; }
}

/* =========================================================================
   Header — matches the screenshot: a gradient blue banner holding the logo +
   an ad slot, with a slightly darker solid-blue nav strip underneath.
   ========================================================================= */
.site-header { position: relative; z-index: 50; }
.site-header__banner {
	background: linear-gradient(135deg, #2E93C7 0%, var(--puthithu-header) 60%, var(--puthithu-header-dark) 100%);
	padding-block: 1rem;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.site-branding { flex: 0 0 auto; }
.custom-logo { max-height: 85px; width: auto; }
.site-title-link { display: block; color: #fff; }
/* Approximates the site's custom brush-script wordmark using a rounded display
   font + white text with a soft outline-like text-shadow. For a pixel-exact
   match, upload the real logo file via Appearance → Customize → Custom Logo —
   this text fallback only shows when no logo image is set. */
.site-title {
	font-family: var(--font-display);
	font-size: 2.8rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.site-description { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.8); }

.site-header__ad-slot { flex: 0 0 auto; }

.main-navigation { background: var(--puthithu-header-dark); position: sticky; top: 0; z-index: 50; }
.primary-menu { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: #fff;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a { background: rgba(0,0,0,0.15); }
.primary-menu ul {
	position: absolute;
	top: 100%; left: 0;
	background: var(--puthithu-paper);
	border-radius: 0 0 var(--radius) var(--radius);
	min-width: 220px;
	box-shadow: 0 12px 24px rgba(0,0,0,0.15);
	display: none;
	padding: 0.4rem;
	z-index: 60;
}
.primary-menu li:hover > ul,
.primary-menu li:focus-within > ul { display: block; }
.primary-menu ul li { margin: 0; padding: 0; position: relative; }
.primary-menu ul ul { top: 0; left: 100%; border-radius: var(--radius); margin-left: 2px; }
.primary-menu ul li a {
	padding: 0.55rem 0.75rem; border-radius: 4px; display: block;
	color: var(--puthithu-ink); font-weight: 600; font-size: 0.88rem;
	line-height: 1.3; margin: 0;
}
.primary-menu ul li a:hover { background: var(--puthithu-canvas); color: var(--puthithu-header); }

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: var(--radius);
	padding: 0.5rem;
}
.menu-toggle__bar { width: 20px; height: 2px; background: #fff; }

.site-header__search { display: none; } /* the reference design has no visible header search field */

/* =========================================================================
   Layout grids
   ========================================================================= */
.home-layout {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr) 300px;
	gap: 1.75rem;
	padding-block: 1.5rem;
	align-items: start;
}
.layout-2col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2rem;
	align-items: start;
}
.layout-full { padding-block: 2rem; }

/* =========================================================================
   Section headers — color set per-section via inline --section-color
   (see puthithu_category_colors() in inc/template-tags.php).
   ========================================================================= */
.section { margin-bottom: 1.75rem; }
.section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--section-color, var(--puthithu-primary));
	padding: 0.65rem 1rem;
	border-radius: var(--radius) var(--radius) 0 0;
}
.section__title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
.section__more { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; }
.section__more:hover { color: #fff; text-decoration: underline; }

/* =========================================================================
   Primary list — "பிரதான செய்திகள்": full-width rows, thumb + text, each
   with its own "மேலும்" link. This is the homepage's main content pattern.
   ========================================================================= */
.list-rows { background: var(--puthithu-paper); border: 1px solid var(--puthithu-line); border-top: 0; }
.list-row { display: flex; gap: 0.85rem; padding: 0.75rem; border-bottom: 1px solid var(--puthithu-line); }
.list-row:last-child { border-bottom: 0; }
.list-row__thumb { flex: 0 0 160px; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); }
.list-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-row__body { flex: 1 1 auto; min-width: 0; position: relative; }
.list-row__title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.3rem; }
.list-row__title a:hover { color: var(--puthithu-header); }
.list-row__meta { color: var(--puthithu-ink-soft); font-size: 0.8rem; margin-bottom: 0.4rem; }
.list-row__excerpt { color: var(--puthithu-ink-soft); font-size: 0.92rem; margin: 0 5.5rem 0 0; }
.list-row__more {
	position: absolute; right: 0; bottom: 0;
	color: var(--puthithu-more-link); font-weight: 700; font-size: 0.88rem;
}
.list-row__more:hover { text-decoration: underline; }

.section__footer-link { text-align: center; padding: 0.9rem 0; background: var(--puthithu-paper); border: 1px solid var(--puthithu-line); border-top: 0; }
.btn-outline {
	display: inline-block; padding: 0.55rem 1.4rem; border: 1px solid var(--puthithu-line);
	border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--puthithu-ink-soft); background: var(--puthithu-canvas);
}
.btn-outline:hover { border-color: var(--puthithu-header); color: var(--puthithu-header); }

/* =========================================================================
   Rail sections — விளையாட்டு / வெளிநாடு / கட்டுரை / ஆசிரியர் கருத்து:
   one lead list-row (no excerpt) + a 2-up grid of compact items underneath.
   ========================================================================= */
.section--rail .rail-lead .list-row { background: var(--puthithu-paper); border: 1px solid var(--puthithu-line); border-bottom: 0; }
.section--rail .rail-lead .list-row__more { display: none; }
.rail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--puthithu-paper);
	border: 1px solid var(--puthithu-line);
	border-top: 0;
}
.grid-item { display: flex; gap: 0.75rem; padding: 0.9rem; }
.grid-item:nth-child(odd) { border-right: 1px solid var(--puthithu-line); }
.grid-item:nth-child(n+3) { border-top: 1px solid var(--puthithu-line); }
.grid-item__thumb { flex: 0 0 96px; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.grid-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.grid-item__title { font-size: 0.9rem; font-weight: 600; }
.grid-item__title a:hover { color: var(--puthithu-header); }
.grid-item__meta { color: var(--puthithu-ink-faint); font-size: 0.75rem; margin-top: 0.35rem; }

/* =========================================================================
   Optional homepage mid-page banner ("நிறம் மாறாத நினைவுகள்"-style feature)
   ========================================================================= */
.section--banner .section__title--banner {
	background: var(--puthithu-header); color: #fff; font-size: 1.05rem; font-weight: 700;
	padding: 0.65rem 1rem; margin: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.section--banner .widget { border: 1px solid var(--puthithu-line); border-top: 0; background: var(--puthithu-paper); padding: 0; }
.section--banner img { display: block; width: 100%; }

.section__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.section__grid--archive { grid-template-columns: repeat(3, 1fr); }

.news-card { background: var(--puthithu-paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 0 rgba(0,0,0,0.05); border: 1px solid var(--puthithu-line); }
.news-card--card .news-card__thumb { display: block; aspect-ratio: 16/11; overflow: hidden; }
.news-card--card .news-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: 0.85rem 1rem 1rem; }
.news-card__title { font-size: 0.9rem; font-weight: 600; }
.news-card__title a:hover { color: var(--puthithu-header); }
.news-card__meta { color: var(--puthithu-ink-faint); font-size: 0.75rem; margin-top: 0.35rem; display: flex; gap: 0.6rem; }
.news-card__excerpt { color: var(--puthithu-ink-soft); font-size: 0.88rem; margin-top: 0.5rem; }

.news-card--mini { border: 0; border-bottom: 1px dotted var(--puthithu-line-dotted); border-radius: 0; background: transparent; box-shadow: none; }
.news-card--mini .news-card__body { display: flex; gap: 0.75rem; padding: 0.6rem 0; align-items: flex-start; }
.news-card--mini .news-card__mini-thumb { flex: 0 0 76px; width: 76px; aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; }
.news-card--mini .news-card__mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card--mini .news-card__title { font-size: 0.9rem; font-weight: 400; }

/* =========================================================================
   Left sidebar (homepage) — spotlight image, blue-header widgets (matches
   the homepage's "கட்டுரை" box), and plain maroon-heading region lists.
   ========================================================================= */
.widget-area { display: flex; flex-direction: column; gap: 1.5rem; }

.spotlight-slider { position: relative; border-radius: var(--radius); overflow: hidden; }
.spotlight-slider__track { display: flex; transition: transform 0.4s ease-in-out; }
.spotlight-slider__slide { flex: 0 0 100%; min-width: 0; }
.spotlight { position: relative; overflow: hidden; }
.spotlight__link { display: block; position: relative; }
.spotlight__link img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.spotlight__caption {
	position: absolute; top: 0; left: 0; right: 0; z-index: 2;
	background: rgba(60,60,60,0.72); color: #fff;
	font-size: 0.85rem; font-weight: 600; line-height: 1.4;
	padding: 0.7rem 0.9rem;
}
.spotlight-slider__prev, .spotlight-slider__next {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(0,0,0,0.5); color: #fff; border: none;
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; cursor: pointer; z-index: 3; border-radius: 50%; padding-bottom: 3px;
	opacity: 0; transition: opacity 0.3s;
}
.spotlight-slider:hover .spotlight-slider__prev,
.spotlight-slider:hover .spotlight-slider__next { opacity: 1; }
.spotlight-slider__prev { left: 10px; }
.spotlight-slider__next { right: 10px; }
.spotlight-slider__prev:hover, .spotlight-slider__next:hover { background: var(--puthithu-header); }
.spotlight-slider__dots {
	position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
	display: flex; justify-content: center; gap: 6px;
}
.spotlight-slider__dot {
	width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5);
	cursor: pointer; border: none; padding: 0;
}
.spotlight-slider__dot.is-active { background: #fff; }

.widget {
	background: var(--puthithu-paper);
	border: 1px solid var(--puthithu-line);
	border-radius: var(--radius);
	padding: 1.1rem 1.2rem 1.3rem;
}
/* Default: solid-color header bar (blue on the right sidebar, or green when
   used as a homepage "கட்டுரை"-style box — set --widget-color to override). */
.widget-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	background: var(--widget-color, var(--puthithu-header));
	padding: 0.6rem 0.85rem;
	margin: -1.1rem -1.2rem 0.9rem;
	border-radius: var(--radius) var(--radius) 0 0;
}
.widget ul li { padding: 0.5rem 0; border-bottom: 1px dotted var(--puthithu-line-dotted); font-size: 0.9rem; }
.widget ul li:last-child { border-bottom: 0; }
.widget a:hover { color: var(--puthithu-header); }

/* Region-style plain-heading list widget — apply the "widget-plain" CSS
   class to a Custom HTML/Group block widget (Advanced panel → Additional
   CSS class(es)) to reproduce அம்பாறை / மட்டக்களப்பு / வட மாகாணம் etc. */
.widget.widget-plain { border: 0; padding: 0; background: transparent; }
.widget.widget-plain .widget-title {
	background: none; color: var(--puthithu-region-heading);
	font-size: 1.05rem; font-weight: 700;
	margin: 0 0 0.7rem; padding: 0 0 0.5rem;
	border-bottom: 2px solid var(--puthithu-region-heading);
	border-radius: 0;
}
.widget.widget-plain ul li { border-bottom: 1px dashed var(--puthithu-line-dotted); padding: 0.6rem 0; }
.widget-plain__readmore {
	display: block; text-align: center; margin-top: 0.6rem; padding: 0.5rem;
	background: var(--puthithu-canvas); border: 1px solid var(--puthithu-line);
	border-radius: var(--radius); font-size: 0.82rem; font-weight: 600; color: var(--puthithu-ink-soft);
}
.widget-plain__readmore:hover { color: var(--puthithu-header); border-color: var(--puthithu-header); }

/* Video Widget Layout */
.widget-video-list { display: flex; flex-direction: column; }
.video-lead { position: relative; border-radius: 3px; overflow: hidden; margin-bottom: 0.8rem; }
.video-lead__link { display: block; position: relative; color: #fff; }
.video-lead__link img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.video-lead__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 50px; height: 50px; background: #E62117; border-radius: 5px;
	display: flex; align-items: center; justify-content: center; z-index: 2;
}
.video-lead__play::after {
	content: ''; width: 0; height: 0;
	border-style: solid; border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}
.video-lead__overlay {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.5) 70%, transparent);
	padding: 1.5rem 0.8rem 0.8rem;
}
.video-lead__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; line-height: 1.35; }
.video-lead__comments { font-size: 0.75rem; font-weight: 400; color: #ccc; margin-left: 0.5rem; }
.video-lead__meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: #ccc; }
.widget-video-list .news-card--mini .news-card__mini-thumb { position: relative; }
.widget-video-list .news-card--mini .news-card__mini-thumb::after {
	content: ''; position: absolute; top: 5px; left: 5px;
	width: 20px; height: 20px; background: rgba(230,33,23,0.9); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
	background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.widget-video__readmore {
	display: block; text-align: center; margin-top: 0.6rem; padding: 0.5rem;
	background: var(--puthithu-canvas); border: 1px solid var(--puthithu-line);
	border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; color: var(--puthithu-ink-soft);
}
.widget-video__readmore:hover { color: var(--puthithu-header); border-color: var(--puthithu-header); }

/* =========================================================================
   Right sidebar (single post / page / archive) — Facebook box + "Most read".
   ========================================================================= */
.ad-rail { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 5rem; }
.widget--ad { padding: 0; border: 0; background: transparent; }
.widget--ad img { border-radius: var(--radius); }

/* =========================================================================
   Single post / page — matches the article-page screenshot: full-width
   light-gray title bar (outside the 2-col grid), inline ad slot, plain
   featured image, italic left-border blockquote, gray tag pills, and a
   share/print/email box.
   ========================================================================= */
.single-title-bar { background: #E8E8E8; padding: 0.9rem 0; margin-bottom: 1.5rem; }
.single-title-bar__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.3rem; }
.single-title-bar__meta { color: var(--puthithu-ink-soft); font-size: 0.85rem; }

/* Static pages (page.php) render their own title inline, no title bar. */
.single-article__header { margin-bottom: 1.25rem; }
.single-article__title { font-size: 1.6rem; font-weight: 700; margin: 0; }

/* Category/tag/archive/search headers use the same light title-bar treatment
   as single posts, but inline (inside the 2-col grid) since there's no
   single, fixed page title to break out full-width for. */
.archive-header { background: #E8E8E8; padding: 0.9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.archive-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.archive-description { color: var(--puthithu-ink-soft); font-size: 0.9rem; margin-top: 0.4rem; }

.single-ad-slot { margin-bottom: 1.25rem; }
.single-ad-slot img { border-radius: var(--radius); }

.single-article__thumb { margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; }
.single-article__thumb figcaption { font-size: 0.8rem; color: var(--puthithu-ink-soft); padding: 0.5rem 0; }
.single-article__content { font-size: 1.05rem; }
.single-article__content p { margin: 0 0 1.2em; }
.single-article__content img { border-radius: var(--radius); }
.single-article__content blockquote {
	margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--puthithu-ink-faint);
	font-style: italic; color: var(--puthithu-ink);
}

.single-article__footer {
	margin-top: 1.5rem; background: #E8E8E8; border-radius: var(--radius);
	padding: 1.1rem 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;
}
.single-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.single-article__tags-label { font-weight: 700; font-size: 0.85rem; margin-right: 0.2rem; }
.single-article__tags a {
	display: inline-block; padding: 0.3rem 0.75rem;
	background: #929292; color: #fff; border-radius: 2px; font-size: 0.78rem; font-weight: 600;
}
.single-article__tags a:hover { background: var(--puthithu-header); color: #fff; }

.single-article__share { text-align: right; }
.single-article__share-label { display: block; font-size: 0.78rem; color: var(--puthithu-ink-soft); }
.single-article__share-title { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.5rem; }
.share-icons { display: flex; gap: 0.4rem; justify-content: flex-end; margin-bottom: 0.7rem; }
.share-icons a {
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--puthithu-ink-faint);
	display: inline-flex; align-items: center; justify-content: center; color: var(--puthithu-ink-soft);
}
.share-icons a:hover { border-color: var(--puthithu-header); color: var(--puthithu-header); }
.share-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.share-actions button, .share-actions a {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--puthithu-header); color: #fff; border: 0; padding: 0.5rem 0.9rem;
	border-radius: 3px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.share-actions button:hover, .share-actions a:hover { background: var(--puthithu-header-dark); }

/* =========================================================================
   Comments
   ========================================================================= */
.comments-area { margin-top: 2rem; padding-top: 1.5rem; }
.comments-title { font-size: 1.1rem; }
.comment-list { display: flex; flex-direction: column; gap: 1.2rem; }
.comment-body { display: flex; flex-direction: column; gap: 0.5rem; }
.comment-author { display: flex; align-items: center; gap: 0.6rem; }
.comment-author img { border-radius: 50%; }
.comment-content p { margin: 0.4em 0; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--puthithu-line);
	border-radius: var(--radius); font-family: var(--font-body); margin-bottom: 0.8rem;
}
.comment-form button, .comment-form input[type="submit"] {
	background: var(--puthithu-header); color: #fff; border: 0; padding: 0.65rem 1.5rem; border-radius: var(--radius); font-weight: 600;
}

/* =========================================================================
   404 / empty states
   ========================================================================= */
.error-404 { text-align: center; padding: 4rem 1rem; }
.error-404__code { font-size: 5rem; color: var(--puthithu-header); margin: 0; }
.error-404__home-link { display: inline-block; margin-top: 1.2rem; color: var(--puthithu-header); font-weight: 700; }
.no-results { text-align: center; padding: 3rem 1rem; }

/* =========================================================================
   Footer — plain and light, matches the screenshot exactly: white/near-white
   background, thin top rule, gray watermark logo + copyright, gray nav links.
   ========================================================================= */
.site-footer {
	background: var(--puthithu-paper);
	color: var(--puthithu-ink-soft);
	margin-top: 3rem;
	border-top: 1px solid var(--puthithu-line);
}
.site-footer__widgets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding-block: 2rem; }
.site-footer .widget { background: var(--puthithu-canvas); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem; }
.site-footer ul li { border-bottom-color: var(--puthithu-line-dotted); color: var(--puthithu-ink); }
.site-footer__bottom {
	padding-block: 1rem;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
	font-size: 0.82rem;
}
.site-footer__brand { display: flex; align-items: center; gap: 0.75rem; opacity: 0.7; }
.site-footer__brand img { max-height: 34px; width: auto; }
.footer-menu { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-menu a { color: var(--puthithu-header); }
.footer-menu a:hover { text-decoration: underline; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
	.home-layout { grid-template-columns: 300px minmax(0,1fr); }
	.ad-rail { display: none; } /* ad rail folds away before the sidebar does */
}

@media (max-width: 900px) {
	.home-layout, .layout-2col { grid-template-columns: 1fr; }
	.home-main { order: -1; }
	.section__grid { grid-template-columns: repeat(2, 1fr); }
	.section__grid--archive { grid-template-columns: repeat(2, 1fr); }
	.rail-grid { grid-template-columns: 1fr; }
	.grid-item:nth-child(odd) { border-right: 0; }
	.grid-item:nth-child(n+2) { border-top: 1px solid var(--puthithu-line); }
	.site-footer__widgets { grid-template-columns: 1fr; }
	.list-row { flex-direction: column; }
	.list-row__thumb { flex-basis: auto; width: 100%; aspect-ratio: 16/9; }
	.list-row__excerpt { margin-right: 0; }
	.list-row__more { position: static; display: inline-block; margin-top: 0.5rem; }
}

@media (max-width: 680px) {
	.menu-toggle { display: inline-flex; }
	.main-navigation { display: none; }
	.main-navigation.is-open { display: block; }
	.primary-menu { flex-direction: column; padding-inline: 0.5rem; }
	.primary-menu ul { position: static; box-shadow: none; display: block; border: 0; padding-left: 1rem; }
	.site-header__ad-slot { display: none; }
	.section__grid, .section__grid--archive { grid-template-columns: 1fr; }
	.single-title-bar__title { font-size: 1.15rem; }
	.single-article__footer { flex-direction: column; }
	.single-article__share { text-align: left; }
	.share-icons, .share-actions { justify-content: flex-start; }
}

/* =========================================================================
   Single Post
   ========================================================================= */
.single-title-bar {
	background: #EBEBEB;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #DCDCDC;
}
.single-title-bar__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: #222;
}
.single-title-bar__meta {
	font-size: 0.8rem;
	color: #666;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.single-title-bar__meta::before {
	content: ''; display: inline-block; width: 12px; height: 12px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
	background-size: cover;
}
.single-ad-slot { margin-bottom: 1.5rem; text-align: center; }
.single-ad-inline { margin: 1.5rem 0; text-align: center; }
.single-ad-slot .widget, .single-ad-inline, .site-header__ad-slot .widget { background: none; border: none; padding: 0; box-shadow: none; margin: 0; }
.single-ad-slot .widget img, .single-ad-inline img, .site-header__ad-slot .widget img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.site-header__ad-slot figure {margin: 0 0 0}
.single-article__thumb { margin: 0 0 1.5rem; }
.single-article__thumb img { width: 100%; border-radius: 2px; }
/* Drop-cap for the first paragraph */
.single-article__content > p:first-of-type::first-letter {
	float: left; font-size: 3.5rem; line-height: 0.8; margin: 0.15rem 0.5rem 0 0;
	color: var(--puthithu-header); font-family: var(--font-display); font-weight: 700;
}
.single-article__content { font-size: 1.1rem; line-height: 1.7; color: #333; }
.single-article__content p { margin-bottom: 1.4rem; }
.single-article__content img { border-radius: var(--radius); margin-bottom: 1rem; }
.single-article__content blockquote {
	margin: 1.8rem 0; padding: 1rem 1.5rem;
	border-left: 4px solid var(--puthithu-header);
	background: #F9F9F9; border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.1rem; font-weight: 600; color: #444; font-style: italic;
}
.single-article__footer { 
	margin-top: 2.5rem; background: #EBEBEB; padding: 2rem; border-radius: 12px; 
}
.single-article__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.single-article__tags-label { font-size: 0.85rem; font-weight: 700; color: #555; margin-right: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.single-article__tags a {
	background: #ffffff; color: #444; padding: 0.4rem 1.25rem;
	border-radius: 99px; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease;
	text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.single-article__tags a:hover { 
	background: var(--puthithu-header); color: #fff;
	transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.single-article__share {
	width: 100%;
	background: #ffffff; padding: 1.5rem 2rem; border-radius: 12px;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.share-group-left { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.single-article__share-labels { display: flex; flex-direction: column; line-height: 1.4; }
.single-article__share-label { font-size: 0.75rem; color: var(--puthithu-header); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.single-article__share-title { font-size: 1.15rem; color: #111; font-weight: 800; }
.share-icons { display: flex; gap: 0.6rem; align-items: center; }
.share-icons a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #dee2e6;
	color: #555; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-icons a:hover { color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.share-icons a[aria-label="Facebook"]:hover { background: #1877F2; }
.share-icons a[aria-label="Twitter / X"]:hover { background: #000000; }
.share-icons a[aria-label="WhatsApp"]:hover { background: #25D366; }
.share-icons a[aria-label="LinkedIn"]:hover { background: #0A66C2; }

.share-actions { display: flex; gap: 0.75rem; align-items: center; }
.share-actions button, .share-actions a {
	background: #fff; color: #444; border: 1px solid #ced4da; border-radius: 99px;
	padding: 0.5rem 1.25rem; font-size: 0.85rem; font-weight: 600;
	display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-decoration: none; transition: all 0.3s ease;
}
.share-actions button:hover, .share-actions a:hover { 
	background: var(--puthithu-header); color: #fff; border-color: var(--puthithu-header); 
	transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

/* Post Navigation */
.post-navigation {
	margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--puthithu-line);
}
.nav-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nav-previous, .nav-next { flex: 1 1 calc(50% - 0.5rem); min-width: 200px; display: flex; flex-direction: column; }
.nav-next { text-align: right; }
.nav-subtitle { font-size: 0.75rem; color: #777; font-weight: 600; text-transform: uppercase; margin-bottom: 0.3rem; }
.nav-title { font-size: 0.95rem; font-weight: 700; color: var(--puthithu-header); line-height: 1.4; }
.nav-previous a:hover .nav-title, .nav-next a:hover .nav-title { text-decoration: underline; color: var(--puthithu-header-dark); }

/* Floating Sidebar for Single Post */
@media (min-width: 901px) {
	.layout-2col #secondary.widget-area {
		position: sticky;
		top: 5rem;
	}
}