/*
Theme Name: Blocksy Child
Template: blocksy
Version: 3.0
*/

/* ======================================================
   BOTTOMZ UP MEDIA — GLOBAL STYLES
   Dark / metallic / bold news + investigations theme
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{

	--bronze:#b8863b;
	--bronze-light:#d8a15a;
	--bronze-dark:#8a6427;
	--black:#000000;
	--near-black:#0a0a0a;
	--dark:#111111;
	--dark-2:#161616;
	--gray:#1d1d1d;
	--border:#2a2a2a;
	--light:#f5f5f5;
	--muted:#9a9a9a;
	--red:#b50000;
	--red-bright:#e30000;

	--font-display:'Cinzel', Georgia, serif;
	--font-heading:'Oswald', Arial, sans-serif;
	--font-body:'Inter', Arial, sans-serif;

}

/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	background:var(--black);
	color:var(--light);
	font-family:var(--font-body);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

a{
	text-decoration:none;
	color:inherit;
}

img{
	max-width:100%;
	display:block;
}

ul{
	list-style:none;
}

button{
	font-family:inherit;
	cursor:pointer;
}

.container{
	max-width:1500px;
	margin:0 auto;
	padding:0 24px;
}

.site-main{
	width:100%;
}

/* ==========================================
   BUTTONS
========================================== */

.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:13px 26px;
	font-family:var(--font-heading);
	font-weight:600;
	font-size:14px;
	letter-spacing:.5px;
	text-transform:uppercase;
	border-radius:4px;
	border:2px solid transparent;
	transition:.25s ease;
	white-space:nowrap;
}

.btn-red{
	background:var(--red);
	color:#fff;
}

.btn-red:hover{
	background:var(--red-bright);
	transform:translateY(-2px);
}

.btn-outline{
	border-color:var(--light);
	color:var(--light);
	background:transparent;
}

.btn-outline:hover{
	background:var(--light);
	color:var(--black);
}

.btn-gold{
	background:var(--bronze);
	color:#000;
}

.btn-gold:hover{
	background:var(--bronze-light);
}

/* ==========================================
   SECTION TITLE
========================================== */

.section-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-bottom:2px solid var(--red);
	padding-bottom:12px;
	margin-bottom:22px;
}

.section-heading h2{
	font-family:var(--font-heading);
	font-size:20px;
	font-weight:700;
	letter-spacing:1px;
	text-transform:uppercase;
	color:var(--light);
	display:flex;
	align-items:center;
	gap:10px;
}

.section-heading h2::before{
	content:"";
	width:5px;
	height:22px;
	background:var(--red);
	display:inline-block;
}

.section-heading a{
	font-size:13px;
	font-weight:600;
	color:var(--bronze-light);
	text-transform:uppercase;
	letter-spacing:.5px;
}

.section-heading a:hover{
	color:var(--bronze);
}

/* ==========================================
   TOP BREAKING TICKER BAR
========================================== */

.top-ticker{
	background:var(--red);
	color:#fff;
	border-bottom:1px solid #7a0000;
}

.top-ticker .container{
	display:flex;
	align-items:stretch;
	padding:0;
	max-width:100%;
}

.top-ticker .ticker-flag{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:8px;
	background:#8f0000;
	padding:9px 20px;
	font-family:var(--font-heading);
	font-weight:700;
	font-size:12.5px;
	letter-spacing:1px;
	text-transform:uppercase;
	white-space:nowrap;
}

.top-ticker .ticker-viewport{
	flex:1 1 auto;
	overflow:hidden;
	display:flex;
	align-items:center;
}

.top-ticker .ticker-track{
	display:flex;
	align-items:center;
	white-space:nowrap;
	will-change:transform;
}

.top-ticker .ticker-track li{
	display:inline-flex;
	align-items:center;
	padding:9px 28px;
	font-size:13px;
	font-weight:500;
}

.top-ticker .ticker-track li::after{
	content:"•";
	margin-left:28px;
	color:#ffb3b3;
}

.top-ticker .ticker-more{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	padding:9px 20px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.5px;
	text-transform:uppercase;
	white-space:nowrap;
	border-left:1px solid #7a0000;
}

.top-ticker .ticker-more:hover{
	background:#8f0000;
}

/* ==========================================
   SITE HEADER
========================================== */

.site-header{
	background:var(--black);
	border-bottom:1px solid var(--border);
}

.header-main{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	padding:18px 24px;
	flex-wrap:wrap;
}

.header-brand{
	display:flex;
	align-items:center;
	gap:16px;
}

.header-brand .custom-logo-link img,
.header-brand .logo-img{
	max-height:78px;
	width:auto;
}

.header-hosted{
	text-align:right;
	font-family:var(--font-display);
}

.header-hosted .hosted-label{
	display:block;
	font-family:var(--font-body);
	font-size:11px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--muted);
}

.header-hosted .hosted-name{
	display:block;
	font-size:22px;
	color:var(--red-bright);
	font-weight:700;
}

.header-tools{
	display:flex;
	align-items:center;
	gap:22px;
}

.header-social{
	display:flex;
	align-items:center;
	gap:12px;
}

.header-social a{
	width:34px;
	height:34px;
	border-radius:50%;
	background:var(--gray);
	display:flex;
	align-items:center;
	justify-content:center;
	transition:.2s;
}

.header-social a:hover{
	background:var(--bronze);
}

.header-social svg{
	width:16px;
	height:16px;
	fill:#fff;
}

.header-search{
	display:flex;
	align-items:center;
}

.header-search input[type="search"],
.header-search input[type="text"]{
	background:var(--dark-2);
	border:1px solid var(--border);
	border-right:none;
	color:#fff;
	padding:9px 14px;
	font-size:13px;
	width:170px;
	border-radius:4px 0 0 4px;
}

.header-search input::placeholder{
	color:var(--muted);
}

.header-search button{
	background:var(--red);
	border:none;
	color:#fff;
	padding:0 16px;
	border-radius:0 4px 4px 0;
	display:flex;
	align-items:center;
	justify-content:center;
}

.header-search button:hover{
	background:var(--red-bright);
}

.header-search svg{
	width:14px;
	height:14px;
	fill:#fff;
}

/* ==========================================
   PRIMARY NAV
========================================== */

.primary-nav{
	background:var(--near-black);
	border-top:1px solid var(--border);
	border-bottom:3px solid var(--bronze);
}

.primary-nav .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}

.main-menu{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
}

.main-menu li a{
	display:block;
	padding:15px 18px;
	font-family:var(--font-heading);
	font-size:13.5px;
	font-weight:600;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:var(--light);
	border-bottom:3px solid transparent;
	margin-bottom:-3px;
	transition:.2s;
}

.main-menu li a:hover,
.main-menu li.current-menu-item a,
.main-menu li.current-menu-parent a{
	color:#fff;
	background:var(--dark);
	border-bottom-color:var(--red);
}

.main-menu li.menu-item-has-children > a::after{
	content:"▾";
	margin-left:5px;
	font-size:10px;
	color:var(--bronze-light);
}

.main-menu .support-link a{
	color:var(--bronze-light);
	display:flex;
	align-items:center;
	gap:6px;
}

.main-menu .support-link a:hover{
	color:var(--bronze);
	background:transparent;
	border-bottom-color:var(--bronze);
}

/* ==========================================
   CARDS (used site-wide: homepage grid,
   archives, related posts, etc.)
========================================== */

.story-card{
	background:var(--dark-2);
	border:1px solid var(--border);
	border-radius:6px;
	overflow:hidden;
	transition:.25s;
}

.story-card:hover{
	border-color:var(--bronze-dark);
	transform:translateY(-3px);
}

.story-card .story-thumb{
	position:relative;
	aspect-ratio:16/10;
	overflow:hidden;
	background:
		linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
}

.story-card .story-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.story-card .story-thumb .thumb-fallback{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-display);
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--bronze-dark);
	text-align:center;
	padding:10px;
}

.story-card .story-tag{
	position:absolute;
	top:10px;
	left:10px;
	background:var(--red);
	color:#fff;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:4px 9px;
	border-radius:3px;
}

.story-card .story-body{
	padding:16px 18px 18px;
}

.story-card .story-body h3{
	font-family:var(--font-heading);
	font-size:16px;
	font-weight:600;
	line-height:1.35;
	margin-bottom:8px;
}

.story-card .story-body h3 a:hover{
	color:var(--bronze-light);
}

.story-card .story-meta{
	font-size:12px;
	color:var(--muted);
	letter-spacing:.3px;
}

/* trending numbered list */

.trending-list li{
	display:flex;
	gap:14px;
	padding:14px 0;
	border-bottom:1px solid var(--border);
}

.trending-list li:last-child{
	border-bottom:none;
}

.trending-list .trend-num{
	font-family:var(--font-display);
	font-size:22px;
	font-weight:700;
	color:var(--red);
	flex:0 0 auto;
	width:26px;
}

.trending-list .trend-title a{
	font-size:14.5px;
	line-height:1.4;
	font-weight:500;
}

.trending-list .trend-title a:hover{
	color:var(--bronze-light);
}

/* ==========================================
   SITE FOOTER
========================================== */

.site-footer{
	background:var(--near-black);
	border-top:4px solid var(--bronze);
	padding:60px 0 0;
}

.footer-columns{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1.2fr;
	gap:40px;
	padding-bottom:50px;
	border-bottom:1px solid var(--border);
}

.footer-col h4{
	font-family:var(--font-heading);
	font-size:14px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:var(--bronze-light);
	margin-bottom:18px;
}

.footer-col p{
	color:var(--muted);
	font-size:14px;
	margin-bottom:14px;
}

.footer-col ul li{
	margin-bottom:10px;
}

.footer-col ul li a{
	color:#ccc;
	font-size:14px;
}

.footer-col ul li a:hover{
	color:var(--bronze-light);
}

.footer-logo{
	max-height:56px;
	width:auto;
	margin-bottom:16px;
}

.footer-social{
	display:flex;
	gap:10px;
	margin-top:6px;
}

.footer-social a{
	width:36px;
	height:36px;
	border-radius:50%;
	background:var(--gray);
	display:flex;
	align-items:center;
	justify-content:center;
}

.footer-social a:hover{
	background:var(--bronze);
}

.footer-social svg{
	width:16px;
	height:16px;
	fill:#fff;
}

.footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	padding:22px 0 30px;
	font-size:12.5px;
	color:var(--muted);
}

.footer-bottom a{
	color:var(--muted);
}

.footer-bottom a:hover{
	color:var(--bronze-light);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1100px){

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

}

@media(max-width:900px){

	.header-main{
		justify-content:center;
		text-align:center;
	}

	.header-hosted{
		text-align:center;
	}

	.primary-nav .container{
		justify-content:center;
	}

	.main-menu{
		justify-content:center;
	}

}

@media(max-width:640px){

	.header-tools{
		flex-direction:column;
		gap:12px;
	}

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

	.top-ticker .ticker-flag{
		padding:9px 12px;
		font-size:11px;
	}

}