/**
 * AnteEnti Telugu Q&A UI - Home Page Shell Layout
 *
 * Purpose:
 * - Create the main homepage structure
 * - Add hero section layout
 * - Add topic category area
 * - Add desktop 3-column layout:
 *   Left sidebar + Center feed + Right sidebar
 *
 */


/* ---------------------------------------------------------
   1. Home Page Main Wrapper
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-home {
	width: 100%;
	background: var(--anteenti-color-bg);
	padding-bottom: var(--anteenti-space-2xl);
}

body.anteenti-qa-page-home .anteenti-home-inner {
	width: min(100% - 32px, var(--anteenti-container-width));
	margin-inline: auto;
}


/* ---------------------------------------------------------
   2. Hero Section
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-home-hero {
	position: relative;
	margin-top: var(--anteenti-space-lg);
	margin-bottom: var(--anteenti-space-xl);
	padding: clamp(28px, 5vw, 56px);
	background:
		radial-gradient(circle at top left, rgba(201, 138, 31, 0.18), transparent 34%),
		linear-gradient(135deg, #fffaf1 0%, #f8ead6 100%);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-xl);
	box-shadow: var(--anteenti-shadow-card);
	overflow: hidden;
}

body.anteenti-qa-page-home .anteenti-home-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 220px;
	height: 220px;
	background: rgba(122, 31, 43, 0.08);
	border-radius: 999px;
	pointer-events: none;
}

body.anteenti-qa-page-home .anteenti-home-hero-content {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

body.anteenti-qa-page-home .anteenti-home-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--anteenti-space-sm);
	padding: 6px 12px;
	background: var(--anteenti-color-primary-soft);
	color: var(--anteenti-color-primary-dark);
	border-radius: var(--anteenti-radius-pill);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
}

body.anteenti-qa-page-home .anteenti-home-title {
	margin-bottom: var(--anteenti-space-sm);
	color: var(--anteenti-color-primary-dark);
	font-size: clamp(2rem, 4.8vw, 4rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

body.anteenti-qa-page-home .anteenti-home-description {
	max-width: 680px;
	margin-bottom: var(--anteenti-space-lg);
	color: var(--anteenti-color-text-soft);
	font-size: clamp(1rem, 1.7vw, 1.18rem);
	line-height: 1.8;
}

body.anteenti-qa-page-home .anteenti-home-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--anteenti-space-sm);
}


/* ---------------------------------------------------------
   3. Search Area Shell
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-home-search {
	display: flex;
	align-items: center;
	gap: var(--anteenti-space-sm);
	width: min(100%, 720px);
	margin-top: var(--anteenti-space-lg);
	padding: 8px;
	background: #ffffff;
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-pill);
	box-shadow: var(--anteenti-shadow-xs);
}

body.anteenti-qa-page-home .anteenti-home-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--anteenti-color-bg-soft);
	color: var(--anteenti-color-primary);
}

body.anteenti-qa-page-home .anteenti-home-search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--anteenti-color-text);
	font-family: var(--anteenti-font-main);
	font-size: 1rem;
}

body.anteenti-qa-page-home .anteenti-home-search-input::placeholder {
	color: var(--anteenti-color-muted);
}


/* ---------------------------------------------------------
   4. Topic Categories Section
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-topic-section {
	margin-bottom: var(--anteenti-space-xl);
}

body.anteenti-qa-page-home .anteenti-topic-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--anteenti-space-md);
	margin-bottom: var(--anteenti-space-md);
}

body.anteenti-qa-page-home .anteenti-topic-title {
	margin-bottom: 0;
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	color: var(--anteenti-color-text);
}

body.anteenti-qa-page-home .anteenti-topic-view-all {
	color: var(--anteenti-color-primary);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}

body.anteenti-qa-page-home .anteenti-topic-view-all:hover {
	color: var(--anteenti-color-primary-dark);
}

body.anteenti-qa-page-home .anteenti-topic-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--anteenti-space-sm);
}

body.anteenti-qa-page-home .anteenti-topic-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 112px;
	padding: var(--anteenti-space-md);
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-lg);
	box-shadow: var(--anteenti-shadow-xs);
	text-decoration: none;
	transition:
		transform var(--anteenti-transition-fast),
		box-shadow var(--anteenti-transition-fast),
		border-color var(--anteenti-transition-fast);
}

body.anteenti-qa-page-home .anteenti-topic-card:hover {
	transform: translateY(-2px);
	border-color: var(--anteenti-color-border-strong);
	box-shadow: var(--anteenti-shadow-sm);
	text-decoration: none;
}

body.anteenti-qa-page-home .anteenti-topic-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: var(--anteenti-space-sm);
	border-radius: var(--anteenti-radius-md);
	background: var(--anteenti-color-primary-soft);
	color: var(--anteenti-color-primary);
	font-size: 1.15rem;
}

body.anteenti-qa-page-home .anteenti-topic-name {
	color: var(--anteenti-color-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

body.anteenti-qa-page-home .anteenti-topic-count {
	margin-top: 4px;
	color: var(--anteenti-color-muted);
	font-size: 0.85rem;
	line-height: 1.3;
}


/* ---------------------------------------------------------
   5. Desktop Main Layout
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-home-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 280px;
	gap: var(--anteenti-space-lg);
	align-items: start;
}

body.anteenti-qa-page-home .anteenti-home-left,
body.anteenti-qa-page-home .anteenti-home-right {
	position: sticky;
	top: 96px;
}

body.anteenti-qa-page-home .anteenti-home-feed {
	min-width: 0;
}


/* ---------------------------------------------------------
   6. Sidebar Shell Cards
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-sidebar-card {
	margin-bottom: var(--anteenti-space-md);
	padding: var(--anteenti-space-md);
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-lg);
	box-shadow: var(--anteenti-shadow-xs);
}

body.anteenti-qa-page-home .anteenti-sidebar-title {
	margin-bottom: var(--anteenti-space-sm);
	color: var(--anteenti-color-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

body.anteenti-qa-page-home .anteenti-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.anteenti-qa-page-home .anteenti-sidebar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--anteenti-space-sm);
	padding: 9px 10px;
	color: var(--anteenti-color-text-soft);
	border-radius: var(--anteenti-radius-sm);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--anteenti-transition-fast),
		color var(--anteenti-transition-fast);
}

body.anteenti-qa-page-home .anteenti-sidebar-link:hover {
	background: var(--anteenti-color-bg-soft);
	color: var(--anteenti-color-primary);
	text-decoration: none;
}

body.anteenti-qa-page-home .anteenti-sidebar-count {
	color: var(--anteenti-color-muted);
	font-size: 0.8rem;
}


/* ---------------------------------------------------------
   7. Feed Header Shell
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-feed-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--anteenti-space-md);
	margin-bottom: var(--anteenti-space-md);
	padding: var(--anteenti-space-md);
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-lg);
	box-shadow: var(--anteenti-shadow-xs);
}

body.anteenti-qa-page-home .anteenti-feed-title {
	margin-bottom: 0;
	color: var(--anteenti-color-text);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

body.anteenti-qa-page-home .anteenti-feed-filter {
	display: flex;
	align-items: center;
	gap: 8px;
}


/* ---------------------------------------------------------
   8. Tablet Layout
--------------------------------------------------------- */

@media (max-width: 1100px) {
	body.anteenti-qa-page-home .anteenti-topic-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.anteenti-qa-page-home .anteenti-home-layout {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	body.anteenti-qa-page-home .anteenti-home-right {
		display: none;
	}
}


/* ---------------------------------------------------------
   9. Mobile Layout
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-page-home .anteenti-home {
		padding-bottom: 88px;
	}

	body.anteenti-qa-page-home .anteenti-home-inner {
		width: min(100% - 24px, var(--anteenti-container-width));
	}

	body.anteenti-qa-page-home .anteenti-home-hero {
		margin-top: var(--anteenti-space-sm);
		margin-bottom: var(--anteenti-space-lg);
		padding: var(--anteenti-space-lg);
		border-radius: var(--anteenti-radius-lg);
	}

	body.anteenti-qa-page-home .anteenti-home-title {
		font-size: clamp(1.8rem, 9vw, 2.6rem);
		line-height: 1.18;
	}

	body.anteenti-qa-page-home .anteenti-home-description {
		font-size: 1rem;
		line-height: 1.7;
	}

	body.anteenti-qa-page-home .anteenti-home-actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.anteenti-qa-page-home .anteenti-home-actions .anteenti-btn {
		width: 100%;
	}

	body.anteenti-qa-page-home .anteenti-home-search {
		border-radius: var(--anteenti-radius-lg);
	}

	body.anteenti-qa-page-home .anteenti-topic-header {
		align-items: center;
	}

	body.anteenti-qa-page-home .anteenti-topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--anteenti-space-xs);
	}

	body.anteenti-qa-page-home .anteenti-topic-card {
		min-height: 104px;
		padding: var(--anteenti-space-sm);
		border-radius: var(--anteenti-radius-md);
	}

	body.anteenti-qa-page-home .anteenti-home-layout {
		display: block;
	}

	body.anteenti-qa-page-home .anteenti-home-left,
	body.anteenti-qa-page-home .anteenti-home-right {
		display: none;
	}

	body.anteenti-qa-page-home .anteenti-feed-header {
		padding: var(--anteenti-space-sm);
		border-radius: var(--anteenti-radius-md);
	}

	body.anteenti-qa-page-home .anteenti-feed-filter {
		display: none;
	}
}


/* ---------------------------------------------------------
   10. Small Mobile
--------------------------------------------------------- */

@media (max-width: 420px) {
	body.anteenti-qa-page-home .anteenti-topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.anteenti-qa-page-home .anteenti-topic-name {
		font-size: 0.94rem;
	}

	body.anteenti-qa-page-home .anteenti-topic-count {
		font-size: 0.8rem;
	}
}


/* ---------------------------------------------------------
   11. Safety
--------------------------------------------------------- */

/**
 * This file expects future markup classes like:
 *
 * .anteenti-home
 * .anteenti-home-inner
 * .anteenti-home-hero
 * .anteenti-topic-grid
 * .anteenti-home-layout
 * .anteenti-home-left
 * .anteenti-home-feed
 * .anteenti-home-right
 *
 * This file does NOT style:
 * - Neve header
 * - Neve menu
 * - AnsPress question list
 * - AnsPress forms
 * - AnsPress single question template
 */
/* ---------------------------------------------------------
   12. Hide Default WordPress/Neve Page Title on Q&A Home
--------------------------------------------------------- */

/**
 * Hide only the default page title area on the Q&A homepage.
 * This does not touch the Neve menu/header.
 */

body.anteenti-qa-page-home .nv-page-title-wrap,
body.anteenti-qa-page-home .entry-header,
body.anteenti-qa-page-home .page-header {
	display: none;
}

/**
 * Remove extra top spacing created by the default page template.
 */
body.anteenti-qa-page-home .site-main,
body.anteenti-qa-page-home .nv-single-page-wrap,
body.anteenti-qa-page-home .nv-content-wrap {
	margin-top: 0;
	padding-top: 0;
}
/* ---------------------------------------------------------
   13. Home Page Content Alignment
--------------------------------------------------------- */

body.anteenti-qa-page-home .anteenti-home {
	margin-top: 0;
}

body.anteenti-qa-page-home .anteenti-home-inner {
	max-width: var(--anteenti-container-width);
}
/* ---------------------------------------------------------
   14. Mobile Topic Slider
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-page-home .anteenti-topic-section {
		margin-bottom: var(--anteenti-space-lg);
	}

	body.anteenti-qa-page-home .anteenti-topic-grid {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 2px 2px 10px;
		margin-inline: -2px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	body.anteenti-qa-page-home .anteenti-topic-grid::-webkit-scrollbar {
		display: none;
	}

	body.anteenti-qa-page-home .anteenti-topic-card {
		flex: 0 0 132px;
		min-height: 104px;
		scroll-snap-align: start;
	}

	body.anteenti-qa-page-home .anteenti-topic-icon {
		width: 34px;
		height: 34px;
		font-size: 1rem;
	}

	body.anteenti-qa-page-home .anteenti-topic-name {
		font-size: 0.95rem;
	}

	body.anteenti-qa-page-home .anteenti-topic-count {
		font-size: 0.8rem;
	}
}
/* ---------------------------------------------------------
   15. Mobile Footer Spacing
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-page-home .anteenti-home {
		padding-bottom: 120px;
	}
}
/* ---------------------------------------------------------
   16. Mobile Topic Slider Refinement
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-page-home .anteenti-topic-section {
		margin-bottom: var(--anteenti-space-lg);
		overflow: hidden;
	}

	body.anteenti-qa-page-home .anteenti-topic-header {
		padding-inline: 0;
	}

	body.anteenti-qa-page-home .anteenti-topic-grid {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 2px 2px 12px 2px;
		margin-inline: 0;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	body.anteenti-qa-page-home .anteenti-topic-grid::-webkit-scrollbar {
		display: none;
	}

	body.anteenti-qa-page-home .anteenti-topic-card {
		flex: 0 0 118px;
		width: 118px;
		min-height: 94px;
		padding: 12px;
		border-radius: var(--anteenti-radius-md);
		scroll-snap-align: start;
	}

	body.anteenti-qa-page-home .anteenti-topic-icon {
		width: 30px;
		height: 30px;
		margin-bottom: 8px;
		border-radius: 10px;
		font-size: 0.95rem;
	}

	body.anteenti-qa-page-home .anteenti-topic-name {
		font-size: 0.92rem;
		line-height: 1.25;
	}

	body.anteenti-qa-page-home .anteenti-topic-count {
		margin-top: 3px;
		font-size: 0.78rem;
		line-height: 1.2;
	}
}
body.anteenti-qa-ui .anteenti-home-search {
  scroll-margin-top: 90px;
}