/* Forum IPTV — child theme visual system.
   Scoped overrides only; no parent theme or plugin files touched. */

:root {
	--color-primary-dark: #0B1F3A;
	--color-primary: #2563EB;
	--color-primary-hover: #1D4ED8;
	--color-accent: #06B6D4;

	--color-bg: #F6F8FC;
	--color-surface: #FFFFFF;

	--color-text: #10233F;
	--color-text-secondary: #64748B;
	--color-text-muted: #94A3B8;

	--color-border: #E2E8F0;

	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-error: #EF4444;

	--radius: 14px;
	--radius-sm: 8px;
}

/* ===== Base / typography ===== */
body {
	-webkit-font-smoothing: antialiased;
	background-color: var(--color-bg);
	color: var(--color-text);
}
.post-title, h1, h2, h3 {
	letter-spacing: -0.01em;
	color: var(--color-primary-dark);
}
*, *::before, *::after {
	box-sizing: border-box;
}
img, video, iframe {
	max-width: 100%;
	height: auto;
}

/* ===== Links & icons ===== */
a {
	color: var(--color-primary);
}
a:hover {
	color: var(--color-primary-hover);
}
i[class^="icon-"], i[class*=" icon-"] {
	color: var(--color-text-secondary);
}

/* ===== Question cards =====
   Root-cause fix: the parent theme's .article-post rule applies
   margin: 0 -15px (a "bleed to parent edge" technique meant to pair with
   the theme's own padding scheme). Combined with our own padding, and the
   floated ancestor context, this produced an asymmetric right-side gap on
   mobile (verified via CDP: card measured left:0 but right:360 in a 390px
   viewport - a 30px gap on the right only). Fix: explicitly zero the
   margin and force width:100% + border-box, fully decoupling the card
   from that mechanism instead of patching the symptom. */
.article-question {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px 22px;
	margin: 0 0 16px 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
/* The theme's own bleed-margin technique (.question-articles .article-post:not(.question-2-columns)
   { margin-left:-15px; margin-right:-15px }, specificity 0,3,0) outranks a plain .article-question
   rule. Neutralize it at matching specificity, scoped to the same container, rather than reaching
   for !important. */
.question-articles .article-question:not(.question-2-columns) {
	margin-left: 0;
	margin-right: 0;
}
.article-question:hover {
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
	border-color: #d7dcea;
	transform: translateY(-1px);
}
.article-question .post-title a {
	font-weight: 700;
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
	word-break: break-word;
}
.article-question .excerpt-question {
	color: var(--color-text-secondary);
}
.article-question .question-footer {
	border-top: 1px solid var(--color-border);
	margin-top: 14px;
	padding-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.article-question a[href*="/profile/"] {
	color: var(--color-primary);
}
.article-question .post-date, .article-question .byline, .article-question .post-cat {
	color: var(--color-text-secondary);
}
/* status badges (Answered / In progress etc.) */
.article-question .status-question.solved,
.article-question .icon-check {
	color: var(--color-success);
}

/* ===== Filters / discovery tabs =====
   Align exactly with the question-card column below them: same box model,
   no fixed widths, full responsive width. */
.wrap-tabs, .row-tabs-home, #row-tabs-home {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}
.menu-tabs > ul {
	flex-wrap: wrap;
}
.menu-tabs a {
	color: var(--color-text-secondary);
}
.menu-tabs .active-tab a, .menu-tabs a:hover {
	color: var(--color-primary);
}

/* ===== Tags ===== */
.question-tags a, .tagcloud a, .tag-links a, a.tag-cloud-link {
	background: #F1F5F9 !important;
	color: #475569 !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 12px;
	display: inline-block;
	margin: 2px 4px 2px 0;
	text-decoration: none;
}
.question-tags, .tagcloud {
	display: flex;
	flex-wrap: wrap;
}

/* ===== Buttons ===== */
.button-default, .button-default-2 {
	border-radius: var(--radius-sm);
	font-weight: 600;
	transition: filter .15s ease, transform .1s ease, background-color .15s ease;
	border: none;
}
.button-default {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}
.button-default:hover {
	background-color: var(--color-primary-hover) !important;
	border-color: var(--color-primary-hover) !important;
}
.button-default:active {
	transform: translateY(1px);
}
/* Secondary actions */
.button-default-2 {
	background-color: #F1F5F9 !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}
.button-default-2:hover {
	background-color: #E2E8F0 !important;
}
.button-sign-in {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}
.button-sign-in:hover {
	background-color: var(--color-primary-hover) !important;
}
.button-sign-up {
	background-color: #F1F5F9 !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}
.button-sign-up:hover {
	background-color: #E2E8F0 !important;
}

/* ===== Forms ===== */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="number"], textarea, select,
.form-control {
	background-color: var(--color-surface) !important;
	border: 1px solid #CBD5E1 !important;
	color: var(--color-text) !important;
	border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder {
	color: var(--color-text-muted) !important;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus, .form-control:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
	outline: none;
}

/* ===== Logo =====
   Never let HTML width/height attributes distort the artwork - only ONE
   dimension (max-height) is constrained; width stays "auto" so the browser
   derives it from the image's real 1.734:1 ratio at every breakpoint. */
.logo.logo-img img {
	width: auto !important;
	height: auto !important;
	max-height: 44px;
}
@media (max-width: 480px) {
	.logo.logo-img img {
		max-height: 30px;
	}
}
/* Header + logo as ONE component on mobile.
   Root cause (found via DOM inspection): header.header carries
   position:absolute at mobile widths, which is what made it - and the logo
   inside it - invisible/detached from normal flow. The theme's OWN native
   CSS already hides .mid-header (nav) and .button-sign-in/.button-sign-up
   at this breakpoint; only the hamburger, the sign-in lock icon, and the
   logo remain. So the fix is only to let header.header sit back in normal
   document flow - no independent position:fixed/absolute on the logo. */
@media (max-width: 767px) {
	header.header {
		position: static !important;
		height: auto !important;
	}
	header.header .the-main-container.header-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		width: 100%;
		box-sizing: border-box;
	}
	header.header .left-header {
		display: flex;
		align-items: center;
	}
}

/* ===== Header ===== */
header.header {
	background-color: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border);
}
header.header .nav > li > a,
header.header .nav_menu a {
	color: var(--color-text) !important;
}
header.header .nav > li.current-menu-item > a,
header.header .nav > li:hover > a {
	color: var(--color-primary) !important;
}
header.header .icon-menu,
header.header .mobile-menu-click,
header.header .mobile-menu-click i,
header.header .header-search i,
header.header .icon-search,
header.header .icon-lock,
header.header .mobile-bar i,
header.header .mobile-bar a,
header.header .mobile-bar-ask a {
	color: var(--color-text) !important;
}
header.header .mobile-bar-ask a.button-default {
	color: #fff !important;
}

/* ===== Hero ===== */
.call-action-wrap {
	border-radius: var(--radius);
	overflow: hidden;
}
.call-action-unlogged, .call-action-dark {
	position: relative;
}
.call-action-opacity {
	background: linear-gradient(90deg, rgba(11,31,58,0.85) 0%, rgba(11,31,58,0.55) 100%);
}
.call-action-wrap h3, .call-action-wrap h1 {
	color: #fff !important;
}
.call-action-wrap p {
	color: #E2E8F0 !important;
}
.call-action-button {
	border-radius: var(--radius-sm);
	font-weight: 700;
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}
.call-action-button:hover {
	background-color: var(--color-primary-hover) !important;
}

/* ===== Sidebar widgets ===== */
.sidebar .widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 16px;
	width: 100%;
	box-sizing: border-box;
}
.sidebar .widget-title {
	color: var(--color-primary-dark);
}
.stats-card__item .stats-text, .stats__count {
	color: var(--color-primary-dark);
}

/* ===== Mobile navigation drawer (premium dark) ===== */
.mobile-aside.mobile-menu-main {
	background-color: var(--color-primary-dark) !important;
}
.mobile-aside .menu a,
.mobile-aside .nav_menu a {
	color: #FFFFFF !important;
}
.mobile-aside .menu li {
	border-bottom: 1px solid rgba(255,255,255,0.10);
}
.mobile-aside .menu li:hover > a,
.mobile-aside .menu li.active-tab > a {
	color: var(--color-accent) !important;
}
.mobile-aside .mobile-menu-top .button-default,
.mobile-aside .mobile-bar-ask .button-default {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}
.mobile-aside .mobile-menu-top .button-default:hover {
	background-color: var(--color-primary-hover) !important;
}
.mobile-aside-close i {
	color: #fff !important;
}

/* ===== Footer ===== */
.footer {
	background-color: var(--color-primary-dark);
}
.footer .widget-title,
.footer h2 {
	color: #fff !important;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 14px !important;
}
.footer a {
	color: #CBD5E1 !important;
}
.footer a:hover {
	color: var(--color-accent) !important;
}
.footer .menu li {
	margin-bottom: 8px;
	list-style: none;
}
.footer .wp-block-latest-posts li {
	margin-bottom: 10px;
}
.footer, .footer * {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}
.footer .bottom-footer, .footer .footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	color: #CBD5E1;
}

/* ===== Mobile: layout safety net (no horizontal overflow) ===== */
@media (max-width: 767px) {
	html, body {
		max-width: 100vw !important;
		overflow-x: hidden;
	}
	html body [class^="col"],
	html body [class*=" col"],
	html body .call-action-wrap [class^="col"],
	html body .call-action-wrap [class*=" col"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	html body .call-action-wrap {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	html body .the-main-container,
	html body .the-main-inner,
	html body .hide-main-inner,
	html body main.all-main-wrap,
	html body .wrap-tabs,
	html body .menu-tabs,
	html body .header-search,
	html body .header-search form,
	html body .mid-header,
	html body .left-header,
	html body .sidebar,
	html body .sidebar .widget {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	html body .header-search input,
	html body .header-search .form-control {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.article-question *,
	.call-action-wrap *,
	main h1, main h2, main h3, main p, main a {
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100%;
	}
	.article-question {
		padding: 16px;
	}
	.button-default, .button-default-2 {
		min-height: 44px;
	}
}

/* NOTE: a derived compact icon-only logo asset exists
   (assets/forum-iptv-icon-compact.png) but is not wired up - a CSS
   content:url() swap technique to activate it at mobile widths proved
   unreliable in testing and was removed rather than shipped half-working.
   Mobile currently shows the same full desktop lockup, scaled down via
   max-height only - this guarantees the aspect ratio is never distorted. */