/*
Theme Name: MovieViral 2014
Theme URI: https://movieviral.com
Author: MovieViral.com
Description: Faithful classic-architecture recreation of the 2014 MovieViral.com design (Genesis/Prose era) — black-bordered white page wrap over the blue MV watermark texture, charcoal nav bars with the blue accent strip, blue underlined post titles, and the MovieViral Gear footer. Original MovieViral.com theme designed by Scott Caldwell in New York.
Version: 2.6.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: movieviral2014
*/

/* =====================================================
   Base — 2014-authentic values from prose-minified CSS
   ===================================================== */
* { box-sizing: border-box; }

body {
	/* WP custom-background supplies #076088 + back.jpg; these are safety fallbacks */
	background-color: #076088;
	color: #222222;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.75;
	margin: 0;
	padding: 0;
}

a { color: #076088; }
a:hover { color: #066088; }

img { max-width: 100%; height: auto; }

/* =====================================================
   Page wrap — white box, 5px black border, rounded 10px
   ===================================================== */
#wrap {
	background-color: #ffffff;
	border: 5px solid #000000;
	border-radius: 10px;
	margin: 15px auto 0;
	max-width: 1140px;
	display: flow-root; /* BFC without overflow clipping — keeps the sticky sidebar working */
	padding: 10px;
	position: relative;
}

/* The 2014 blue strips above the top nav and below the subnav */
.blue-strip {
	background-color: #076088;
	height: 8px;
}

.blue-strip-top { margin-bottom: 4px; }
.blue-strip-bottom { height: 10px; margin-top: 4px; }

/* =====================================================
   Nav bars — charcoal, uppercase, blue accents
   ===================================================== */
#nav, #subnav {
	background-color: #525252;
	clear: both;
	font-size: 13px;
	margin: 0 auto;
	overflow: visible;
	text-transform: uppercase;
	width: 100%;
}

/* full-width gray bars with the 2014 1px white inset outline */
#nav .wrap, #subnav .wrap {
	border: 1px solid #ffffff;
	overflow: visible;
	width: 100%;
	display: flow-root;
}

#nav ul.menu, #subnav ul.menu {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav li, #subnav li { float: left; list-style: none; position: relative; }

#nav li a, #subnav li a {
	background-color: #525252;
	color: #ffffff;
	display: block;
	margin: 0;
	padding: 7px 12px 6px;
	text-decoration: none;
}

#nav li a:hover, #nav li a:active,
#nav .current_page_item > a, #nav .current-menu-item > a,
#subnav li a:hover, #subnav li a:active,
#subnav .current_page_item > a, #subnav .current-menu-item > a {
	background-color: #919191;
	color: #066088;
}

/* dropdowns */
#nav li ul, #subnav li ul {
	left: -999em;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	width: 190px;
	z-index: 9999;
}

#nav li:hover > ul, #nav li:focus-within > ul,
#subnav li:hover > ul, #subnav li:focus-within > ul { left: 0; }

#nav li li, #subnav li li { float: none; }

#nav li li a, #subnav li li a {
	background-color: #525252;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	color: #fff;
	padding: 7px 10px 6px;
	text-transform: none;
	width: 100%;
}

#nav li li a:hover, #subnav li li a:hover { background-color: #919191; color: #066088; }

/* search inside the top nav bar */
#nav .nav-search {
	float: right;
	padding: 4px 6px;
}

#nav .nav-search input[type="search"],
#nav .nav-search input[type="text"] {
	border: 1px solid #ddd;
	font-family: inherit;
	font-size: 12px;
	padding: 4px 6px;
	width: 190px;
}

#nav .nav-search input[type="submit"] {
	background: #222;
	border: 1px solid #000;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	text-transform: uppercase;
}

#nav .nav-search input[type="submit"]:hover { background: #919191; color: #066088; }

/* =====================================================
   Header image band
   ===================================================== */
#header { margin: 0 auto; width: 100%; background-color: #17587c; }
#header a { display: block; }
#header img { display: block; margin: 0 auto; width: 100%; max-width: 1120px; height: auto; }

/* =====================================================
   Content area
   ===================================================== */
#inner {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 3.5%;
	margin: 20px auto 0;
	padding: 0 10px;
}

#content { flex: 0 0 65%; min-width: 0; padding: 0 0 20px; }

/* Sidebar column: static main panel, then the optional sticky widget panel. */
.sidebar-col { flex: 1; min-width: 0; }

.side-panel {
	background: #f4f7f9;
	border: 1px solid #e0e7ec;
	border-radius: 4px;
	padding: 18px 18px 8px;
}

#sidebar-sticky {
	margin-top: 20px;
	position: sticky;
	top: 32px;
}

/* =====================================================
   Magazine hero layout — full-width mosaic
   ===================================================== */
#hero-section.mv-magazine {
	display: grid;
	flex: 1 1 100%;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 26px;
}

.mv-magazine .mag-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mv-magazine .mag-small-row { display: grid; flex: 1; gap: 14px; grid-template-columns: 1fr 1fr; }

.mag-card {
	background: #0d3f5c;
	border: 1px solid #e0e7ec;
	border-radius: 4px;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.mag-card > a { display: block; height: 100%; text-decoration: none; }

.mag-hero { aspect-ratio: 1 / 0.96; }
.mag-wide { aspect-ratio: 2.15 / 1; }
.mag-small { min-height: 170px; }

.mag-img, .mag-img img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.mag-card:hover .mag-img img { transform: scale(1.03); }
.mag-img img { transition: transform 0.25s ease; }

.mag-overlay {
	background: linear-gradient(180deg, rgba(6, 40, 60, 0) 42%, rgba(6, 40, 60, 0.88) 100%);
	inset: 0;
	position: absolute;
}

.mag-content {
	bottom: 0;
	display: block;
	left: 0;
	padding: 16px 18px;
	position: absolute;
	right: 0;
}

.mag-badge {
	background: #076088;
	border-radius: 2px;
	color: #ffffff;
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
	padding: 3px 8px;
	text-transform: uppercase;
}

.mag-title {
	color: #ffffff;
	display: block;
	font-weight: bold;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.mag-hero .mag-title { font-size: 27px; }
.mag-wide .mag-title { font-size: 19px; }
.mag-small .mag-title { font-size: 14px; }

.mag-card:hover .mag-title { text-decoration: underline; }

.mag-byline { color: #d7e8f0; display: block; font-size: 12px; margin-top: 7px; }
.mag-small .mag-byline, .mag-wide .mag-byline { font-size: 11px; margin-top: 5px; }

/* =====================================================
   Feed cards (home/archive/search lists only — .hfeed)
   ===================================================== */
.hfeed .post {
	background: #ffffff;
	border: 1px solid #e0e7ec;
	border-radius: 4px;
	margin: 0 0 26px;
	padding: 20px 20px 14px;
	transition: box-shadow 0.15s ease;
}

.hfeed .post:hover { box-shadow: 0 2px 12px rgba(6, 96, 136, 0.10); }

.hfeed .entry-title a, .hfeed .entry-title a:visited { text-decoration: none; }
.hfeed .entry-title a:hover { text-decoration: underline; }

.hfeed .post-info { border-radius: 3px; }

.hfeed .entry-content p { margin-bottom: 6px; }

/* loop featured image: uniform 16:9, center-cropped, softly rounded */
.loop-image { display: block; margin: 0 0 18px; }
.loop-image img {
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.post, .page-entry { margin: 0 0 40px; overflow: hidden; }

.entry-title, #content h1.entry-title { font-size: 26px; line-height: 1.3; margin: 0 0 10px; font-weight: bold; }
.entry-title a, .entry-title a:visited { color: #076088; text-decoration: underline; }
.entry-title a:hover { color: #066088; }

.post-info {
	background-color: #B5B5B5;
	color: #666666;
	font-size: 11px;
	margin: 0 0 20px;
	padding: 5px 10px;
	text-transform: capitalize;
}

.post-info a { color: #444; }

.entry-content p { margin: 0 0 25px; }
.entry-content ul li { list-style-type: square; margin: 0 0 0 30px; }
.entry-content ol li { margin: 0 0 0 35px; }
.entry-content a { color: #076088; text-decoration: underline; }

.more-link { color: #076088; text-decoration: underline; }

/* modernized read-more button, right-aligned on the card */
.hfeed .more-link {
	float: right;
	border: 1px solid #076088;
	border-radius: 3px;
	color: #076088;
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.04em;
	margin: 6px 0 14px;
	padding: 4px 14px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.hfeed .more-link:hover { background: #076088; color: #ffffff; }

.post-meta {
	background-color: transparent;
	border-top: 1px solid #eee;
	clear: both;
	color: #666666;
	font-size: 11px;
	margin: 10px 0 0;
	padding: 8px 0 0;
	text-transform: capitalize;
}

.post-meta a { color: #076088; }

/* pagination */
.navigation { clear: both; font-size: 14px; overflow: hidden; padding: 10px 0 30px; }
.navigation .older { float: right; }
.navigation .newer { float: left; }
.navigation a {
	background: #f5f5f5;
	color: #222;
	padding: 5px 8px;
	text-decoration: none;
}
.navigation a:hover { background: #555; color: #fff; }

/* =====================================================
   Sidebar
   ===================================================== */
#sidebar .widget { margin: 0 0 30px; overflow: hidden; }

#sidebar .widget-title, #sidebar h4 {
	border-bottom: 2px solid #076088;
	color: #222222;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-transform: capitalize;
}

#sidebar .widget ul { list-style: none; margin: 0; padding: 0; }

#sidebar .widget ul li {
	border-bottom: 1px dotted #ddd;
	margin: 0 0 5px;
	padding: 0 0 5px 2px;
	word-wrap: break-word;
}

/* =====================================================
   Footer widgets row (inside wrap)
   ===================================================== */
#footer-widgets {
	border-top: 1px solid #eee;
	clear: both;
	margin: 10px auto 0;
	overflow: hidden;
	padding: 25px 10px 10px;
}

#footer-widgets .footer-widgets-1 { float: left; width: 31%; margin-right: 3%; }
#footer-widgets .footer-widgets-2 { float: left; width: 31%; margin-right: 3%; }
#footer-widgets .footer-widgets-3 { float: right; width: 31%; }

#footer-widgets .widget-title, #footer-widgets h4 {
	border-bottom: 1px solid #ddd;
	color: #222;
	font-family: Georgia, 'Palatino Linotype', serif;
	font-size: 18px;
	font-weight: normal;
	margin: 0 0 12px;
	padding: 0 0 6px;
}

#footer-widgets ul { list-style: none; margin: 0; padding: 0; }

#footer-widgets ul li {
	border-bottom: 1px solid #eee;
	margin: 0 0 8px;
	padding: 0 0 8px 14px;
	position: relative;
}

#footer-widgets ul li::before {
	color: #919191;
	content: "\2023";
	left: 0;
	position: absolute;
}

#footer-widgets a, #footer-widgets a:visited { color: #076088; text-decoration: none; }
#footer-widgets a:hover { color: #066088; text-decoration: underline; }

.mv-gear-fallback img { display: block; margin: 0 0 0 auto; max-width: 250px; height: auto; }

/* =====================================================
   Bottom bar (outside wrap, on the texture)
   ===================================================== */
#footer {
	clear: both;
	color: #222222;
	font-size: 11px;
	font-weight: bold;
	margin: 0 auto;
	max-width: 1140px;
	overflow: hidden;
	padding: 12px 10px 30px;
	text-transform: uppercase;
}

#footer a, #footer a:visited { color: #076088; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#footer .gototop { float: left; }
#footer .creds { float: right; text-align: right; }

/* =====================================================
   Comments
   ===================================================== */
#comments { clear: both; margin: 30px 0 0; }
#comments .comment-list { list-style: none; margin: 0; padding: 0; }
#comments .comment { border-bottom: 1px dotted #ddd; margin: 0 0 15px; padding: 0 0 15px; }
#comments .comment-meta { color: #666; font-size: 11px; }
#comments .children { list-style: none; margin: 15px 0 0 30px; padding: 0; }
#respond textarea, #respond input[type="text"], #respond input[type="email"], #respond input[type="url"] {
	border: 1px solid #ddd;
	font-family: inherit;
	padding: 6px;
	width: 100%;
	max-width: 480px;
}
#respond input[type="submit"] {
	background: #525252;
	border: none;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	padding: 8px 16px;
	text-transform: uppercase;
}
#respond input[type="submit"]:hover { background: #919191; color: #066088; }

/* =====================================================
   Mobile header — modern bar: logo left, hamburger right
   ===================================================== */
#mobile-header {
	align-items: center;
	background: #0d3f5c;
	border-bottom: 3px solid #d7e8f0;
	box-shadow: 0 2px 10px rgba(6, 40, 60, 0.28);
	display: none;
	justify-content: space-between;
	padding: 10px 14px;
	position: sticky;
	top: 0;
	z-index: 10001;
}

/* keep clear of the WP admin bar when logged in */
body.admin-bar #mobile-header { top: 46px; }

#mobile-header .mobile-square img {
	border-radius: 4px;
	display: block;
	height: 40px;
	width: 40px;
}

#mobile-header .mobile-logo {
	display: flex;
	flex: 1;
	justify-content: center;
	min-width: 0;
	padding: 0 10px;
}

#mobile-header .mobile-logo img { display: block; height: 30px; max-width: 100%; object-fit: contain; width: auto; }

#mobile-menu-toggle {
	background: transparent;
	border: 1px solid #d7e8f0;
	border-radius: 4px;
	cursor: pointer;
	height: 40px;
	padding: 9px 8px;
	width: 46px;
}

#mobile-menu-toggle .burger-line {
	background: #d7e8f0;
	border-radius: 1px;
	display: block;
	height: 3px;
	margin: 0 auto 4px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 24px;
}

#mobile-menu-toggle .burger-line:last-of-type { margin-bottom: 0; }

#mobile-menu-toggle.is-open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu-toggle.is-open .burger-line:nth-child(2) { opacity: 0; }
#mobile-menu-toggle.is-open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

#mobile-menu-panel {
	background: #ffffff;
	border: 1px solid #e0e7ec;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 16px rgba(6, 96, 136, 0.14);
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 10000;
}

#mobile-menu-panel .mobile-menu { list-style: none; margin: 0; padding: 6px 0; }
#mobile-menu-panel .mobile-menu ul { list-style: none; margin: 0; padding: 0 0 0 18px; }

#mobile-menu-panel .mobile-menu a {
	border-bottom: 1px solid #f0f4f7;
	color: #076088;
	display: block;
	font-size: 15px;
	font-weight: bold;
	padding: 12px 18px;
	text-decoration: none;
}

#mobile-menu-panel .mobile-menu a:active { background: #f4f7f9; }

#mobile-menu-panel .mobile-search { padding: 12px 18px 16px; }
#mobile-menu-panel .mobile-search input[type="search"] {
	border: 1px solid #d7e0e6;
	border-radius: 3px;
	font-family: inherit;
	padding: 8px 10px;
	width: 68%;
}
#mobile-menu-panel .mobile-search input[type="submit"] {
	background: #076088;
	border: none;
	border-radius: 3px;
	color: #fff;
	font-family: inherit;
	padding: 9px 14px;
	text-transform: uppercase;
}

/* =====================================================
   Responsive (the one deliberate modernization)
   ===================================================== */
@media (max-width: 1180px) {
	#wrap { margin: 15px 12px 0; }
	#footer { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 860px) {
	/* modern mobile header replaces the whole 2014 desktop header stack */
	#mobile-header { display: flex; }
	#nav, #subnav, #header, .blue-strip { display: none; }

	#inner { display: block; }
	#content, .sidebar-col { float: none; width: 100%; }
	#hero-section.mv-magazine { display: block; margin-bottom: 20px; }
	.mv-magazine .mag-hero { aspect-ratio: 16 / 10; margin-bottom: 12px; }
	.mv-magazine .mag-right { gap: 12px; }
	.mv-magazine .mag-wide { aspect-ratio: 21 / 9; }
	.mv-magazine .mag-small-row { display: flex; flex-direction: column; gap: 12px; }
	.mv-magazine .mag-small { aspect-ratio: 21 / 9; min-height: 0; }
	.mv-magazine .mag-wide .mag-title, .mv-magazine .mag-small .mag-title { font-size: 16px; }
	.sidebar-col { margin-top: 10px; }
	#sidebar-sticky { position: static; }
	#footer-widgets .footer-widgets-1,
	#footer-widgets .footer-widgets-2,
	#footer-widgets .footer-widgets-3 { float: none; margin: 0 0 25px; width: 100%; }
	.mv-gear-fallback img { margin: 0 auto; }
	#footer .gototop, #footer .creds { float: none; text-align: center; width: 100%; }
	#footer .gototop { margin-bottom: 6px; }
}