/*
Theme Name: TamilanGuide
Theme URI: https://tamilanguide.in/
Author: TamilanGuide
Description: Fast, AdSense-friendly theme for tamilanguide.in — calm white, navy and blue colours that keep ads easy to see, compact logo, CLS-safe ad slots and a swipeable category bar on mobile. Your post tables are left exactly as you made them (optional theme table design in the Customiser).
Version: 1.0.3
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tamilanguide
*/

/* ---------- Tokens ---------- */
@font-face {
	font-family: "Bitter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/bitter-latin-800-normal.woff2") format("woff2");
}

:root {
	/* Calm palette: white page, navy structure, one blue for everything clickable.
	   Red is kept only for the logo and "last day" warnings so ads are never out-shouted. */
	--tg-accent: #1558d6;
	--tg-accent-dark: #0e44ab;
	--tg-accent-tint: #eaf1fe;
	--tg-link: #1a0dab;
	--tg-urgent: #d0121b;
	--tg-ink: #0f2a4a;
	--tg-text: #1f2937;
	--tg-muted: #5f6b7a;
	--tg-line: #e1e6ee;
	--tg-row: #f6f8fb;
	--tg-soft: #2b4468;
	--tg-paper: #fff;
	--tg-amber: #f5b400;
	--tg-amber-tint: #fff6d9;
	--tg-green: #128c4a;
	--tg-tele: #1d8fcf;
	--tg-head: "Bitter", "Rockwell", "Roboto Slab", Georgia, serif;
	--tg-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Tamil", Arial, sans-serif;
	--tg-wrap: 1180px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
	margin: 0;
	background: var(--tg-paper);
	color: var(--tg-text);
	font: 17px/1.65 var(--tg-body);
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--tg-link); text-underline-offset: 2px; }
a:hover { color: var(--tg-accent-dark); }
:focus-visible { outline: 3px solid var(--tg-amber); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--tg-head); font-weight: 800; color: var(--tg-ink); line-height: 1.25; margin: 1.6em 0 .6em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 99; width: auto; height: auto; clip: auto;
	background: var(--tg-ink); color: #fff; padding: 10px 14px;
}
.tg-wrap { max-width: var(--tg-wrap); margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.tg-masthead { background: #fff; border-bottom: 1px solid var(--tg-line); }
.tg-masthead .tg-wrap { display: flex; align-items: center; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
.tg-logo-left .tg-masthead .tg-wrap { justify-content: flex-start; }
.tg-logo-right .tg-masthead .tg-wrap { justify-content: flex-end; }
.tg-logo-left .tg-sitename { text-align: left; }
.tg-logo-right .tg-sitename { text-align: right; }
.tg-logo img, .custom-logo { display: block; width: auto; height: auto; max-height: 56px; max-width: 100%; }
.tg-sitename {
	font-family: var(--tg-head); font-weight: 800; font-size: clamp(30px, 6vw, 52px);
	color: var(--tg-urgent); text-decoration: none; line-height: 1.1; text-align: center;
}
.tg-sitename small { display: block; font-size: .42em; color: var(--tg-ink); }

.tg-nav { background: var(--tg-ink); }
.tg-nav .tg-wrap { display: flex; align-items: stretch; }
.tg-menu {
	display: flex; flex: 1; gap: 2px; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tg-menu::-webkit-scrollbar { display: none; }
.tg-menu li { flex: 0 0 auto; }
.tg-menu a {
	display: block; padding: 13px 14px 11px; color: #fff; text-decoration: none;
	font-weight: 600; font-size: 15px; white-space: nowrap; border-bottom: 3px solid transparent;
}
.tg-menu a:hover, .tg-menu .current-menu-item > a, .tg-menu .current-post-ancestor > a,
.tg-menu .current-category-ancestor > a, .tg-menu .current-menu-parent > a {
	color: #fff; border-bottom-color: #7fb0ff; background: rgba(255,255,255,.08);
}
.tg-menu .sub-menu { display: none; }

.tg-search { position: relative; flex: 0 0 auto; }
.tg-search summary {
	list-style: none; cursor: pointer; color: #fff; padding: 12px 14px; display: flex; align-items: center; height: 100%;
}
.tg-search summary::-webkit-details-marker { display: none; }
.tg-search[open] summary { background: var(--tg-accent); }
.tg-search .tg-searchbox {
	position: absolute; right: 0; top: 100%; z-index: 20; width: min(92vw, 380px);
	background: #fff; padding: 12px; border: 2px solid var(--tg-ink); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.search-form { display: flex; gap: 6px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 4px;
}
.search-submit {
	font: inherit; font-weight: 700; background: var(--tg-accent); color: #fff; border: 0; padding: 10px 16px; border-radius: 4px; cursor: pointer;
}

/* On phones, a fade on the right edge hints the category bar can be swiped */
@media (max-width: 760px) {
	.tg-nav .tg-wrap { padding: 0; }
	.tg-menu-holder { position: relative; flex: 1; min-width: 0; display: flex; }
	.tg-menu-holder::after {
		content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px;
		background: linear-gradient(90deg, rgba(15,42,74,0), var(--tg-ink)); pointer-events: none;
	}
}
@media (min-width: 761px) { .tg-menu-holder { flex: 1; display: flex; } }

/* ---------- Layout ---------- */
.tg-main { padding: 20px 0 40px; }
.tg-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
	.tg-grid.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}
.tg-article { min-width: 0; }

/* ---------- Ad slots (space reserved to stop layout shift) ---------- */
.tg-ad { margin: 18px auto; text-align: center; min-height: 280px; overflow: hidden; }
.tg-ad::before {
	content: "Advertisement"; display: block; font-size: 11px; color: #999; letter-spacing: .04em; margin-bottom: 4px;
}
.tg-ad--header { min-height: 100px; }
@media (min-width: 761px) { .tg-ad { min-height: 250px; } .tg-ad--header { min-height: 90px; } }

/* ---------- Single post / page ---------- */
.tg-crumbs { font-size: 14px; color: var(--tg-muted); margin-bottom: 8px; }
.tg-crumbs a { color: var(--tg-muted); }
.tg-title { font-size: clamp(25px, 4.2vw, 36px); margin: 0 0 10px; }
.tg-meta {
	display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--tg-muted);
	padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); margin-bottom: 18px;
}
.tg-meta strong { color: var(--tg-ink); }
.tg-meta .tg-updated { color: var(--tg-green); font-weight: 600; }
.tg-thumb { margin: 0 0 18px; }
.tg-thumb img { display: block; width: 100%; aspect-ratio: 1200 / 675; object-fit: cover; border-radius: 6px; background: #f1eded; }

/* Join box */
.tg-join { display: grid; gap: 8px; margin: 0 0 20px; }
.tg-join a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; border-radius: 6px; color: #fff; font-weight: 700; text-decoration: none;
}
.tg-join a span:last-child { background: rgba(255,255,255,.2); padding: 3px 12px; border-radius: 20px; font-size: 14px; }
.tg-join .is-wa { background: var(--tg-green); }
.tg-join .is-tg { background: var(--tg-tele); }
@media (min-width: 761px) { .tg-join { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* Content typography */
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
	font-size: clamp(21px, 3vw, 26px); padding-bottom: 8px;
	border-bottom: 3px solid var(--tg-ink); position: relative;
}
.entry-content h2::after {
	content: ""; position: absolute; left: 0; bottom: -3px; width: 72px; height: 3px; background: var(--tg-accent);
}
.entry-content h3 { font-size: 20px; }
.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1.1em; }
.entry-content li { margin-bottom: .35em; }
.entry-content blockquote {
	margin: 1.4em 0; padding: 12px 16px; background: var(--tg-accent-tint); border-left: 4px solid var(--tg-accent);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img { border-radius: 4px; }
.entry-content .wp-block-button__link, .tg-button {
	display: inline-block; background: var(--tg-accent); color: #fff; font-weight: 700; padding: 10px 20px;
	border-radius: 6px; text-decoration: none;
}

/* ---------- Tables: only a sideways-scroll box so wide tables never break the page.
   Your own table colours and layout are left exactly as saved in each post.
   The optional theme table design lives in assets/css/tables.css. ---------- */
.tg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.6em; max-width: 100%; }
.entry-content table { width: 100%; border-collapse: collapse; line-height: 1.45; }
.entry-content th, .entry-content td { padding: 6px 8px; vertical-align: middle; }

/* ---------- Post list (archives, search, blog) ---------- */
.tg-archive-head { margin-bottom: 18px; }
.tg-archive-head h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 32px); }
.tg-archive-head p { margin: 0; color: var(--tg-muted); }
.tg-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--tg-ink); }
.tg-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--tg-line); }
.tg-stamp {
	flex: 0 0 58px; height: 62px; text-align: center; border: 2px solid var(--tg-ink); border-radius: 4px;
	overflow: hidden; line-height: 1; background: #fff;
}
.tg-stamp b { display: block; background: var(--tg-accent); color: #fff; font-size: 12px; padding: 5px 0 4px; font-weight: 700; }
.tg-stamp span { display: block; font-family: var(--tg-head); font-weight: 800; font-size: 24px; color: var(--tg-ink); padding-top: 7px; }
.tg-item h2 { font-size: 18px; margin: 0 0 4px; line-height: 1.35; }
.tg-item h2 a { color: var(--tg-ink); text-decoration: none; }
.tg-item h2 a:hover { color: var(--tg-accent); text-decoration: underline; }
.tg-item p { margin: 0; font-size: 15px; color: var(--tg-muted); }
.tg-cat { font-size: 13px; font-weight: 700; color: var(--tg-accent); text-decoration: none; }

.tg-pagination { margin: 24px 0 0; }
.tg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-pagination .page-numbers {
	display: inline-block; min-width: 42px; text-align: center; padding: 8px 12px; border: 2px solid var(--tg-ink);
	color: var(--tg-ink); text-decoration: none; font-weight: 700; border-radius: 4px;
}
.tg-pagination .page-numbers.current, .tg-pagination a.page-numbers:hover { background: var(--tg-accent); border-color: var(--tg-accent); color: #fff; }

/* Related */
.tg-related { margin-top: 32px; }
.tg-related h2 { font-size: 22px; margin: 0 0 8px; }

/* Tags / share */
.tg-tags { margin: 24px 0 0; font-size: 14px; }
.tg-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border: 1px solid var(--tg-line); border-radius: 20px; color: var(--tg-text); text-decoration: none; }
.tg-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; align-items: center; font-weight: 700; }
.tg-share a { padding: 7px 14px; border-radius: 6px; color: #fff; text-decoration: none; font-size: 14px; }
.tg-share .is-wa { background: var(--tg-green); }
.tg-share .is-tg { background: var(--tg-tele); }
.tg-share .is-fb { background: #1f5bd0; }

/* ---------- Sidebar ---------- */
.tg-sidebar { min-width: 0; }
.tg-sidebar .widget { margin: 0 0 26px; }
.tg-sidebar .widget-title,
.tg-sidebar h2, .tg-sidebar h3, .tg-sidebar h4,
.tg-sidebar .wp-block-heading,
.tg-sidebar .wp-block-search__label,
.tg-sidebar .widget > label {
	display: block; font-family: var(--tg-head); font-weight: 800; font-size: 17px; line-height: 1.3;
	color: #fff !important; background: var(--tg-ink) !important; margin: 0 !important;
	padding: 10px 12px !important; border-left: 5px solid var(--tg-accent); text-align: left;
}
.tg-sidebar .widget-title a, .tg-sidebar h2 a, .tg-sidebar h3 a, .tg-sidebar h4 a { color: #fff !important; text-decoration: none; }
.tg-sidebar .widget { background: #fff; }
.tg-sidebar .wp-block-group, .tg-sidebar .wp-block-group__inner-container { margin: 0; padding: 0; }
.tg-sidebar .wp-block-search__inside-wrapper { display: flex; gap: 6px; padding: 10px; border: 1px solid var(--tg-line); border-top: 0; }
.tg-sidebar .wp-block-search__input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #c8d0dc; border-radius: 4px; }
.tg-sidebar .wp-block-search__button { flex: 0 0 auto; margin: 0; font: inherit; font-weight: 700; background: var(--tg-accent); color: #fff; border: 0; border-radius: 4px; padding: 8px 12px; }
.tg-sidebar p { margin: 0; padding: 10px 12px; border: 1px solid var(--tg-line); border-top: 0; font-size: 15px; }
.tg-sidebar ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tg-line); border-top: 0; }
.tg-sidebar li { padding: 10px 12px; border-bottom: 1px solid var(--tg-line); font-size: 15px; line-height: 1.4; }
.tg-sidebar li:last-child { border-bottom: 0; }
.tg-sidebar li a { color: var(--tg-link); text-decoration: none; }
.tg-sidebar li a:hover { text-decoration: underline; }
@media (min-width: 1000px) { .tg-sticky { position: sticky; top: 12px; } }

/* ---------- Footer ---------- */
.tg-footer { background: var(--tg-ink); color: #c9d4e3; font-size: 15px; margin-top: 24px; border-top: 4px solid var(--tg-accent); }
.tg-footer .tg-wrap { padding-top: 32px; padding-bottom: 16px; }
.tg-footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 761px) { .tg-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.tg-footer h3 { color: #fff; font-size: 17px; margin: 0 0 10px; }
.tg-footer p { margin: 0 0 8px; }
.tg-footer a { color: #fff; text-decoration: none; }
.tg-footer a:hover { color: #9cc3ff; text-decoration: underline; }
.tg-footer ul { list-style: none; margin: 0; padding: 0; }
.tg-footer li { margin: 0 0 7px; }
.tg-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tg-social a { border: 1px solid var(--tg-soft); padding: 5px 11px; border-radius: 20px; font-size: 14px; }
.tg-social a:hover { border-color: var(--tg-accent); background: var(--tg-accent); text-decoration: none; color: #fff; }
.tg-copy { border-top: 1px solid var(--tg-soft); margin-top: 22px; padding-top: 14px; font-size: 14px; color: #9fb0c6; }

/* ---------- Misc ---------- */
.tg-404 { text-align: center; padding: 30px 0; }
.tg-404 h1 { font-size: 34px; margin-top: 0; }
.tg-404 .search-form { max-width: 460px; margin: 18px auto 0; }
.alignleft { float: left; margin: 0 16px 10px 0; }
.alignright { float: right; margin: 0 0 10px 16px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: 14px; color: var(--tg-muted); text-align: center; }
.comments-area { margin-top: 30px; }

@media (max-width: 760px) {
	body { font-size: 16px; }
	.tg-masthead .tg-wrap { padding-top: 8px; padding-bottom: 8px; }
	.tg-logo img, .custom-logo { max-height: 40px; }
	.tg-join { gap: 6px; }
	.tg-join a { padding: 8px 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .tg-nav, .tg-ad, .tg-sidebar, .tg-footer, .tg-join, .tg-share { display: none !important; } }