/* ==========================================================================
   NetConfig.io — footer, rebuilt for GeneratePress
   Rebuilt from the Blogsy-child version, re-scoped to GeneratePress's real
   footer markup (.site-footer / #footer-widgets / .footer-widgets-container /
   .inside-footer-widgets / .footer-widget-{n} / .site-info /
   .inside-site-info) instead of Blogsy's .blogsy-site-footer /
   .pt-container / .site-default-footer. Colors come from tokens.css's
   --nc-* custom properties (news-portal blue) instead of being hardcoded
   here.
   ========================================================================== */

.site-footer {
	background: var( --nc-bg-paper );
	border-top: 1px solid var( --nc-border );
}

/* --------------------------------------------------------------------------
   1. Footer widget columns — GeneratePress's own #footer-widgets /
      .footer-widgets-container / .inside-footer-widgets / .footer-widget-N
      structure, styled as Burp-light cards.
   -------------------------------------------------------------------------- */
#footer-widgets {
	background: var( --nc-bg-paper );
	padding: 28px 0 22px;
}

/* !important on display/grid-template-columns: GeneratePress's own
   generate-widget-areas.min.css declares `.inside-footer-widgets{display:
   flex}` (plus `>div{flex:1 1 0}` on the children) at the SAME selector
   specificity as this rule, and its stylesheet is enqueued after ours --
   so on an equal-specificity tie the later stylesheet wins the cascade,
   and GP's flex was silently overriding this grid the whole time. That
   went unnoticed because flex:1 1 0 happens to divide the row into ~4
   roughly-equal columns too, until a column's content (the newsletter
   form's email input, the tools list) hit flexbox's default min-width:
   auto floor and refused to shrink -- confirmed via a live Playwright
   check at 820px tablet width, where the row measured 924px wide inside
   an 820px viewport. !important guarantees the intended grid wins
   regardless of enqueue order. */
.inside-footer-widgets {
	display: grid !important;
	grid-template-columns: 1.3fr 0.95fr 1.05fr 1.2fr !important;
	gap: 18px;
	/* "start" instead of grid's default "stretch" -- a shorter column
	   (Pages, Diagnostics & Tools) hugs its own content's height instead
	   of stretching to match the tallest card, which was leaving a lot
	   of empty vertical space inside those two specifically. */
	align-items: start;
}

.inside-footer-widgets > div[class*="footer-widget-"] {
	/* Grid (like flex) gives items an implicit min-width:auto floor, so a
	   column won't shrink below its content's intrinsic minimum width --
	   the other half of the tablet-overflow bug described above. This
	   lets every column actually respect the grid-template-columns
	   ratios instead of being shoved wide by, e.g., the newsletter
	   form's email input. */
	min-width: 0;
	background: var( --nc-bg-panel );
	border: 1px solid var( --nc-border );
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 );
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inside-footer-widgets > div[class*="footer-widget-"]:hover {
	border-color: var( --nc-border-hover );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.05 );
}

/* Pages / Diagnostics & Tools columns read better centered. */
.footer-widget-2, .footer-widget-3 {
	text-align: center;
}

.footer-widget-2 .widget-title, .footer-widget-3 .widget-title {
	justify-content: center;
}

/* Column 1: Brand & Community */
.nc-brand-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.nc-logo-text {
	font-size: 20px;
	font-weight: 800;
	color: var( --nc-ink );
	letter-spacing: -0.02em;
}

.nc-logo-tld {
	color: var( --nc-accent );
}

.nc-brand-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --nc-muted );
	margin: 0 0 18px 0;
}

.nc-social-group {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var( --nc-border-subtle );
}

.nc-social-title {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --nc-muted-light );
	margin-bottom: 10px;
}

.nc-social-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nc-social-btn {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var( --nc-bg-paper );
	border: 1px solid var( --nc-border );
	color: var( --nc-muted ) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.nc-social-btn:hover {
	transform: translateY( -2px );
	color: #ffffff !important;
}

.nc-social--telegram:hover { background: #0088cc; border-color: #0088cc; box-shadow: 0 4px 10px rgba( 0, 136, 204, 0.3 ); }
.nc-social--x:hover { background: var( --nc-ink ); border-color: var( --nc-ink ); box-shadow: 0 4px 10px rgba( 15, 23, 42, 0.3 ); }
.nc-social--reddit:hover { background: #ff4500; border-color: #ff4500; box-shadow: 0 4px 10px rgba( 255, 69, 0, 0.3 ); }
.nc-social--facebook:hover { background: #1877f2; border-color: #1877f2; box-shadow: 0 4px 10px rgba( 24, 119, 242, 0.3 ); }
.nc-social--pinterest:hover { background: #e60023; border-color: #e60023; box-shadow: 0 4px 10px rgba( 230, 0, 35, 0.3 ); }

/* Pages nav list (footer-2 custom-html widget) */
.nc-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nc-nav-list li {
	margin: 0 !important;
	padding: 0 !important;
}

.nc-nav-list a {
	display: block;
	color: var( --nc-ink-soft ) !important;
	font-size: 13.5px;
	font-weight: 500;
	padding: 7px 12px;
	border-radius: 6px;
	text-decoration: none !important;
	transition: all 0.15s ease;
}

.nc-nav-list a:hover {
	color: var( --nc-accent ) !important;
	background: var( --nc-accent-tint );
}

/* Column 4: Newsletter */
.nc-newsletter-intro {
	font-size: 13px;
	line-height: 1.5;
	color: var( --nc-muted );
	margin: 0 0 14px 0;
}

.nc-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nc-email-input {
	width: 100% !important;
	box-sizing: border-box !important;
	background: var( --nc-bg-panel ) !important;
	border: 1px solid var( --nc-border-hover ) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	color: var( --nc-ink ) !important;
	font-size: 13.5px !important;
	outline: none !important;
	transition: all 0.2s ease;
}

.nc-email-input::placeholder {
	color: var( --nc-muted-light ) !important;
}

.nc-email-input:focus {
	border-color: var( --nc-accent ) !important;
	box-shadow: 0 0 0 3px rgba( 0, 158, 219, 0.18 ) !important;
}

.nc-submit-btn {
	width: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	background: linear-gradient( 135deg, var( --nc-accent ) 0%, var( --nc-accent-dark ) 100% ) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 18px !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba( 0, 158, 219, 0.25 );
}

.nc-submit-btn:hover {
	box-shadow: 0 4px 14px rgba( 0, 158, 219, 0.35 );
	transform: translateY( -1px );
}

.nc-btn-arrow {
	font-size: 15px;
	transition: transform 0.15s ease;
}

.nc-submit-btn:hover .nc-btn-arrow {
	transform: translateX( 3px );
}

.nc-privacy-note {
	font-size: 11.5px;
	color: var( --nc-muted-light );
	margin: 8px 0 0 0;
}

.nc-form-status {
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
}

.nc-status--success {
	background: rgba( 16, 185, 129, 0.12 );
	border: 1px solid rgba( 16, 185, 129, 0.3 );
	color: #047857;
}

.nc-status--error {
	background: rgba( 239, 68, 68, 0.1 );
	border: 1px solid rgba( 239, 68, 68, 0.25 );
	color: #b91c1c;
}

/* --------------------------------------------------------------------------
   3. Copyright bar — GeneratePress's own .site-info / .inside-site-info.
   -------------------------------------------------------------------------- */
.site-info {
	background: var( --nc-bg-panel );
	border-top: 1px solid var( --nc-border );
}

.inside-site-info {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	font-size: 13px;
}

.nc-copyright-text {
	color: var( --nc-muted );
	font-weight: 500;
}

.nc-copyright-text a {
	color: var( --nc-ink ) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.nc-copyright-text a:hover {
	color: var( --nc-accent ) !important;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
/* !important here too -- these need to out-rank the base rule's own
   !important grid-template-columns above (a plain declaration can never
   override an !important one, media query or not, regardless of source
   order), or the 4-column desktop layout would never actually collapse
   at these breakpoints. */
@media ( max-width: 1024px ) {
	.inside-footer-widgets {
		grid-template-columns: 1fr 1fr !important;
		gap: 20px;
	}
}

@media ( max-width: 768px ) {
	.inside-footer-widgets {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	#footer-widgets {
		padding: 22px 0 18px;
	}
}