/*
Theme Name: hctv stay in the know
Theme URI: https://horseandcountry.tv/
Author: HCTV
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: horse-country
*/

:root{
  --hc-orange:#F5A200;
  --hc-orange-dark:#C77700;
  --hc-black:#1a1a1a;
  --hc-gray-bg:#f4f4f4;
  --hc-text-gray:#6b6b6b;
  --hc-border:#e3e3e3;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Helvetica Neue',Arial,sans-serif;color:var(--hc-black);background:#fff; max-width:1330px;margin:auto;}
img{max-width:100%;display:block;}
.placeholder{
  background:linear-gradient(135deg,#d8d8d8 25%,#c9c9c9 25%,#c9c9c9 50%,#d8d8d8 50%,#d8d8d8 75%,#c9c9c9 75%,#c9c9c9 100%);
  background-size:28px 28px;
  display:flex;align-items:center;justify-content:center;
  color:#8a8a8a;font-size:13px;text-align:center;
  width:100%;height:100%;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* Header */
header.site-header{
  display:grid;grid-auto-flow: column;align-items:center;grid-template-columns: 1fr 5fr 2fr;
  padding:14px 40px;border-bottom:1px solid var(--hc-border);
  flex-wrap:wrap;gap:7rem;
}
.logo{font-weight:800;font-size:26px;color:var(--hc-orange);line-height:1;}
.logo small{display:block;font-size:9px;letter-spacing:1px;color:var(--hc-orange);font-weight:700;}
nav.main-nav ul{display:flex;gap:28px;font-size:14px;font-weight:600;flex-wrap:wrap;}
.header-right{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;}
.search-icon{width:18px;height:18px;border:2px solid var(--hc-black);border-radius:50%;position:relative;display:inline-block;}
.search-icon::after{content:'';position:absolute;width:7px;height:2px;background:var(--hc-black);bottom:-4px;right:-4px;transform:rotate(45deg);}
.join-btn{background:var(--hc-orange);color:#fff;padding:10px 18px;border-radius:4px;font-weight:700;}

/* Hero banner */
.hero-banner{
  /* background:linear-gradient(90deg,#2a1c00 0%,#7a5200 30%,var(--hc-orange) 100%); */
  color:#00000080;
}
.hero-banner h1{font-size:16px;font-weight:800;margin-bottom:26px;}
.hero-tabs{display:flex;gap:26px;font-size:15px;font-weight:600;}
.hero-tabs a.active{text-decoration:underline;text-underline-offset:6px;}
.hero-search-row{display:flex;justify-content:flex-end;margin-top:-58px;}
.search-box{display:flex;background:#e8b95a;border-radius:4px;overflow:hidden;width:280px;}
.search-box input{flex:1;border:none;background:transparent;padding:12px 14px;font-size:14px;outline:none;color:#3a2a00;}
.search-box input::placeholder{color:#5a4620;}
.search-box button{background:transparent;border:none;padding:0 16px;cursor:pointer;color:#3a2a00;font-size:16px;}

/* Featured grid */
.featured-section-h2{font-size:26px;font-weight:800;padding:0px 40px;margin-top:30px;}
.featured-section{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:24px 40px}
.featured-main{position:relative;border-radius:4px;overflow:hidden;height:390px;}

.featured-main img,.featured-main .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.badge{
  position:absolute;top:20px;left:20px;background:var(--hc-orange);color:#fff;
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:2px;letter-spacing:0.5px;
}
.featured-main .caption{
  position:absolute;bottom:0;left:0;right:0;padding:20px;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  color:#fff;font-size:24px;font-weight:700;line-height:1.3;
}
.featured-side{display:flex;flex-direction:column;gap:14px; max-width: 388px;}
.featured-side .card{position:relative;border-radius:4px;overflow:hidden;flex:1;min-height:180px;}
.featured-side .card img,.featured-side .card .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.featured-side .caption{
  position:absolute;bottom:0;left:0;right:0;padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  color:#fff;font-size:16px;font-weight:700;line-height:1.3;
}

/* Trending Now */
.trending-section{
  background:#FCF2E4;
  padding:40px;margin-top:30px;color:#000;
}
.trending-section h2{font-size:28px;font-weight:800;margin-bottom:28px;}
.trending-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.trending-item{text-align:left;}
.trending-circle{
  width:210px;height:210px;border-radius:50%;overflow:hidden;margin:0 auto 16px;
  border:4px solid rgba(255,255,255,0.15);
}
.trending-circle img,.trending-circle .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.trending-item p{font-size:15px;font-weight:700;line-height:1.35; text-align: center;}

/* Latest News */
.latest-news{padding:40px; margin-top:30px;}
.latest-news h2{font-size:26px;font-weight:800;margin-bottom:20px;}
.latest-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hc-border);border-radius:4px;overflow:hidden;margin-bottom:20px;
}
.latest-feature .img-wrap{height:320px;}
.latest-feature .img-wrap img,.latest-feature .img-wrap .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.latest-feature .content{padding:30px;display:flex;flex-direction:column;justify-content:center;}
.latest-feature .content h3{font-size:22px;font-weight:800;margin-bottom:14px;}
.latest-feature .content p{color:var(--hc-text-gray);font-size:15px;line-height:1.6;}
.latest-feature .content p strong{color:var(--hc-black);}

.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.news-card{border:1px solid var(--hc-border);border-radius:4px;overflow:hidden;}
.news-card .thumb{height:150px;}
.news-card .thumb img,.news-card .thumb .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.news-card .thumb.dark{background:#3a2a10;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;}
.news-card h4{font-size:15px;font-weight:700;padding:14px;line-height:1.35;}

/* Category tabs */
.category-tabs{display:flex;gap:12px;padding:0 40px 30px;flex-wrap:wrap;margin-top:30px;}
.category-tabs a{padding:10px 22px;border-radius:24px;font-size:14px;font-weight:700;border:1px solid var(--hc-border);}
.category-tabs a.active{background:var(--hc-orange);color:#fff;border-color:var(--hc-orange);}

/* Expert Advice */
.expert-advice{padding:0 40px 50px;margin-top:30px}
.expert-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.expert-header h2{font-size:26px;font-weight:800;}
.expert-header a{color:var(--hc-orange);font-weight:700;font-size:14px;}
.expert-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;}
.expert-main{border:1px solid var(--hc-border);border-radius:4px;overflow:hidden;}
.expert-main .img-wrap{height:260px;}
.expert-main .img-wrap img,.expert-main .img-wrap .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.expert-main .content{padding:20px;}
.expert-main .content h3{font-size:18px;font-weight:800;margin-bottom:10px;}
.expert-main .content p{color:var(--hc-text-gray);font-size:14px;line-height:1.5;}
.expert-side-grid{display:grid;grid-template-rows:1fr 1fr;gap:18px;}
.expert-side-grid .expert-small{border:1px solid var(--hc-border);border-radius:4px;overflow:hidden;}
.expert-small .thumb{height:150px;}
.expert-small .thumb img,.expert-small .thumb .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.expert-small h4{font-size:14px;font-weight:700;padding:12px;line-height:1.35;}
.wp-block-image{display: flex;place-content: center; padding:30px}
/* Single Post */

.single-post {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 32px 64px;
}

.post-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.post-title {
	font-size: 34px;
	line-height: 1.25;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 16px;
}

.post-meta {
	color: #8a8a8a;
	font-size: 15px;
}

.meta-dot {
	margin: 0 6px;
}

.post-featured-image {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 32px;
}

.post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.post-author-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin-bottom: 12px;
}

.post-author-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.post-author-avatar img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.post-author-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.post-author-name {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: underline;
}

.post-author-role {
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	color: #f2a729;
}

.post-author-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.author-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.author-social-icon img,
.author-social-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.post-content {
	max-width: 1400px;
	font-size: 17px;
	line-height: 1.7;
	color: #1a1a1a;
}

.post-content p {
	margin: 0 0 20px;
}

.post-content h2,
.post-content h3 {
	margin: 32px 0 16px;
}

.post-content a {
	color: #f2a729;
}

@media (max-width: 900px) {
	.post-top {
		grid-template-columns: 1fr;
	}
}

/* Category Archive */

.archive-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 32px;
}

.archive-heading {
	font-size: 26px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 24px;
}

.archive-featured {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px;
	margin-bottom: 56px;
}

.archive-featured-main {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
}

.archive-featured-main img,
.archive-featured-main .placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.archive-featured-main-content {
	padding: 16px;
}

.archive-featured-main-content h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: #1a1a1a;
}

.archive-featured-main-content p {
	margin: 0;
	font-size: 14px;
	color: #8a8a8a;
}

.archive-featured-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.archive-grid-item {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
}

.archive-grid-thumb img,
.archive-grid-thumb .placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.archive-grid-item h4 {
	margin: 0;
	padding: 12px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}

.archive-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 40px;
}

.archive-list-item {
	display: flex;
	gap: 24px;
	text-decoration: none;
	color: inherit;
}

.archive-list-thumb {
	flex: 0 0 auto;
	width: 320px;
}

.archive-list-thumb img,
.archive-list-thumb .placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}

.archive-list-content h3 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: #1a1a1a;
}

.archive-list-content p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #8a8a8a;
}

.archive-view-more {
	text-align: center;
}

.view-more-btn {
	display: inline-block;
	background: #f2a729;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	padding: 14px 40px;
	border-radius: 8px;
}

.view-more-btn:hover {
	background: #dd9520;
}

@media (max-width: 900px) {
	.archive-featured {
		grid-template-columns: 1fr;
	}

	.archive-list-item {
		flex-direction: column;
	}

	.archive-list-thumb {
		width: 100%;
	}
}

/* Footer */

.site-footer {
	background: #ffffff;
	padding: 48px 0 32px;
	margin-top: 32px;
}

.footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
}

.footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 48px;
}

.footer-left {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
  flex-direction: column;
  max-width: 50%;
}

.footer-brand {
	display: flex;
	gap: 16px;
}

.footer-logo svg,
.footer-brand .logo svg {
	display: block;
	height: 32px;
	width: auto;
}

.footer-join-btn {
	display: inline-block;
	background: #f2a729;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	padding: 14px 28px;
	border-radius: 8px;
	white-space: nowrap;
  width: 100%;
}

.footer-join-btn:hover {
	background: #dd9520;
}

.footer-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 56px;
}

.footer-menu-list li {
	break-inside: avoid;
	margin-bottom: 24px;
}

.footer-menu-list a {
	color: #1a1a1a;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}

.footer-menu-list a:hover {
	color: #f2a729;
}

.footer-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-end;
  max-width: max-content;
}

.footer-app-badges {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 16px;
}

.app-badge {
	display: inline-flex;
	align-items: center;
	max-width: 160px;
}

.app-badge img {
	height: 48px;
	width: auto;
	display: block;
}

.badge-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-width: 140px;
	padding: 0 16px;
	border: 1px dashed #cccccc;
	border-radius: 6px;
	font-size: 12px;
	color: #888888;
	text-align: center;
}

.footer-social-links {
	display: flex;
	gap: 16px;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	opacity: 0.35;
}

.social-icon:hover {
	opacity: 1;
}

.social-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

.footer-bottom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 48px;
  justify-content: center;
}

.footer-copyright-icon {
	color: #cccccc;
}

.footer-copyright {
	margin: 0;
	font-size: 16px;
	color: #1a1a1a;
}

@media (max-width: 900px) {
	.footer-top {
		flex-direction: column;
	}

	.footer-right {
		align-items: flex-start;
	}

	.footer-menu-list {
		column-count: 2;
	}
	
}

@media (max-width: 560px) {
	.footer-menu-list {
		column-count: 1;
	}

	
}

/* Single post / page fallback */
.single-content{padding:40px;max-width:800px;margin:0 auto;}
.single-content h1{font-size:32px;font-weight:800;margin-bottom:20px;}
.single-content .featured-image{margin-bottom:24px;border-radius:4px;overflow:hidden;height:400px;}
.single-content .entry-content{font-size:16px;line-height:1.7;}
.single-content .entry-content p{margin-bottom:1em;}

@media(max-width:900px){
  .featured-section{grid-template-columns:1fr;}
  .trending-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .expert-grid{grid-template-columns:1fr;}
  .latest-feature{grid-template-columns:1fr;}
  header.site-header{flex-wrap:wrap;gap:14px;}
  nav.main-nav ul{width:100%;justify-content:space-between;}
}

/* Mobile nav (hamburger + off-canvas menu) */

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.menu-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--hc-black);
}

.mobile-nav-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.mobile-nav-close-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: var(--hc-black);
}

.mobile-nav-close-bar:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-nav-close-bar:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: #ffffff;
	overflow-y: auto;
	padding: 24px;
}

body.mobile-nav-open .mobile-nav-overlay {
	display: block;
}

body.mobile-nav-open {
	overflow: hidden;
}

.mobile-nav-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 20px;
	font-weight: 700;
	margin-top: 56px;
	margin-bottom: 32px;
}

.mobile-nav-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mobile-nav-actions .header-login {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 12px;
}

.mobile-nav-actions .join-btn {
	text-align: center;
}

.header-search-toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Tablet (≤1024px) */

@media (max-width: 1024px) {

	header.site-header {
		padding: 14px 24px;
	}
	.menu-toggle {
		display: flex;
		order: 1;
	}
		header.site-header {
		padding: 12px 16px;
		flex-wrap: nowrap;
	}

	

	.logo {
		order: 2;
		margin: 0 auto;
	}

	.logo svg {
		width: 72px;
		height: auto;
	}

	.header-right {
		order: 3;
		gap: 14px;
	}

	.header-right .join-btn {
	display: none;
	}

	nav.main-nav {
		display: none;
	}


	.trending-grid {
		grid-template-columns: repeat(3, minmax(160px, 1fr));
		overflow-x: auto;
		gap: 18px;
	}

	.trending-circle {
		width: 160px;
		height: 160px;
	}

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

	.expert-grid {
		grid-template-columns: 1fr;
	}

	.expert-side-grid {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.featured-section {
		grid-template-columns: 1fr;
	}

	.featured-side {
		flex-direction: row;
	}
	.footer-app-badges {
		grid-template-columns: repeat(2, auto);
	}
}

/* Mobile (≤600px) */

@media (max-width: 600px) {

	.hero-banner {
		padding: 28px 20px;
	}

	.hero-banner h1 {
		font-size: 26px;
		margin-bottom: 16px;
	}

	.hero-tabs {
		gap: 18px;
		font-size: 14px;
	}

	.featured-section-h2 {
		padding: 20px;
		font-size: 20px;
	}

	.featured-section {
		grid-template-columns: 1fr;
		padding: 16px;
		gap: 12px;
	}

	.featured-main {
		height: 260px;
	}

	.featured-main .caption {
		font-size: 18px;
	}

	.featured-side {
		max-width: none;
		flex-direction: column;
	}

	.featured-side .card {
		min-height: 160px;
	}

	.trending-section {
		padding: 28px 16px;
	}

	.trending-section h2 {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.trending-grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		gap: 16px;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.trending-item {
		flex: 0 0 auto;
		width: 140px;
		scroll-snap-align: start;
	}

	.trending-circle {
		width: 140px;
		height: 140px;
		margin-bottom: 12px;
	}

	.trending-item p {
		font-size: 13px;
	}

	.latest-news {
		padding: 24px 16px;
	}

	.latest-news h2 {
		font-size: 20px;
	}

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

	.latest-feature .img-wrap {
		height: 220px;
	}

	.latest-feature .content {
		padding: 18px;
	}

	.latest-feature .content h3 {
		font-size: 18px;
	}

	.news-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
	}

	.news-card {
		flex: 0 0 auto;
		width: 100%;
		scroll-snap-align: start;
	}

	.news-card .thumb {
		height: 120px;
	}

	.category-tabs {
		padding: 0 16px 20px;
		flex-wrap: wrap;
		gap: 10px;
	}

	.category-tabs a {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 8px 16px;
		font-size: 13px;
	}

	.expert-advice {
		padding: 0 16px 32px;
	}

	.expert-header h2 {
		font-size: 20px;
	}

	.expert-grid {
		grid-template-columns: 1fr;
	}

	.expert-main .img-wrap {
		height: 200px;
	}

	.expert-side-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
	}

	.expert-small .thumb {
		height: 110px;
	}

	.footer-inner {
		padding: 0 20px;
	}

	.footer-top {
		gap: 32px;
	}

	.footer-left {
		max-width: none;
		gap: 32px;
	}

	.footer-brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.footer-brand .logo svg {
		width: 72px;
		height: auto;
	}

	.footer-right {
		max-width: none;
		align-items: flex-start;
	}

	.app-badge img {
		height: 40px;
	}

	.footer-social-links {
		gap: 20px;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 4px;
	}
}