/*
Theme Name: Sox Wire
Theme URI: https://soxwire.com
Description: A Green Monster theme for Sox Wire — a hand-hung scoreboard nameplate, an aggregator well, and a scoreboard rail. Built for PW Trending News and the Sox Wire Sidebar plugin.
Author: Sox Wire
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sox-wire
Tags: two-columns, right-sidebar, custom-menu, news
*/

:root {
	--wall: #14513a;
	--wall-lo: #0e3d2c;
	--wall-hi: #1a6046;
	--board: #0a2a1f;
	--board-lo: #061c15;
	--plate: #0d3527;
	--plate-edge: #4e7263;
	--cream: #efe9d8;
	--gold: #f2c14e;
	--sox-red: #bd3039;
	--sox-navy: #0c2340;
	--paper: #faf9f6;
	--ink: #191919;
	--muted: #6b6b6b;
	--rule: #e4e0d6;
	--link: #0f4c81;
	--rail-width: 312px;
	--shell: 1180px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var( --paper );
	color: var( --ink );
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: var( --link ); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.sw-skip {
	position: absolute;
	left: -9999px;
}
.sw-skip:focus {
	left: 12px;
	top: 12px;
	z-index: 999;
	background: #fff;
	color: var( --ink );
	padding: 10px 16px;
	border: 2px solid var( --sox-red );
}

/* ================================================================
   THE WALL
   ================================================================ */

.wall {
	position: relative;
	overflow: hidden;
	border-bottom: 5px solid var( --sox-red );
	padding: 38px 20px 0;
	background:
		radial-gradient( circle at 10px 16px, rgba( 0, 0, 0, 0.2 ) 0 1.6px, transparent 2px ) 0 0 / 120px 100%,
		repeating-linear-gradient( 90deg, rgba( 0, 0, 0, 0.2 ) 0 1px, rgba( 255, 255, 255, 0.035 ) 1px 2px, transparent 2px 120px ),
		repeating-linear-gradient( 0deg, rgba( 0, 0, 0, 0.05 ) 0 1px, transparent 1px 46px ),
		linear-gradient( 180deg, var( --wall-hi ) 0%, var( --wall ) 45%, var( --wall-lo ) 100% );
}

/* Weathered paint. Purely decorative. */
.wall::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( ellipse at 18% 25%, rgba( 255, 255, 255, 0.055 ), transparent 55% ),
		radial-gradient( ellipse at 80% 75%, rgba( 0, 0, 0, 0.16 ), transparent 60% );
}

.mast {
	max-width: var( --shell );
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 34px;
}

.nameplate {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.kicker {
	font-size: 10px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: #a9cdbb;
	margin: 0;
}

.tagline {
	font-size: 13px;
	color: #c6ded1;
	font-style: italic;
	margin: 0;
}

/* ---------- the hand-hung nameplate ---------- */

.board {
	background: linear-gradient( 180deg, var( --board ) 0%, var( --board-lo ) 100% );
	border: 4px solid var( --cream );
	box-shadow:
		0 8px 26px rgba( 0, 0, 0, 0.5 ),
		inset 0 0 0 2px #1e4536,
		inset 0 3px 18px rgba( 0, 0, 0, 0.6 );
	padding: 13px 15px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	max-width: 100%;
}

.board a { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; }
.board a:hover { text-decoration: none; }

.tiles { display: flex; gap: 6px; }
.tiles .gap { width: 15px; }

.tile {
	position: relative;
	width: 56px;
	height: 72px;
	background: linear-gradient( 180deg, #154434 0%, var( --plate ) 55%, #071f17 100% );
	border: 1px solid var( --plate-edge );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.16 ),
		inset 0 -2px 6px rgba( 0, 0, 0, 0.6 ),
		0 2px 5px rgba( 0, 0, 0, 0.45 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1;
	color: var( --cream );
	text-shadow: 0 2px 0 rgba( 0, 0, 0, 0.65 ), 0 0 14px rgba( 239, 233, 216, 0.16 );
	transform: scaleX( 0.92 );
}

/* The finger-notch at the base of a real number plate. */
.tile::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX( -50% );
	width: 15px;
	height: 3px;
	background: rgba( 0, 0, 0, 0.5 );
	border-radius: 2px;
}

/* Morse code stripes: TAY and JRY, as painted on the real scoreboard for
   Thomas A. and Jean R. Yawkey. */
/* Height is pinned to the plate height and the marks are distributed
   within it, so the strips never stretch the board taller than the
   letters — TAY is 8 marks and JRY is 11, and both must fit the same box. */
/* JRY is eleven marks and has to sit beside a 72px plate, so the marks are
   small — but a dash stays three times a dot so the code still reads as
   code rather than as a dotted line. */
.morse {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.morse i { display: block; width: 5px; background: var( --cream ); opacity: 0.85; border-radius: 1px; }
.morse i.dot { height: 2px; }
.morse i.dash { height: 6px; }
.morse i.brk { height: 2px; background: none; }

/* ---------- the ladder ---------- */

.ladder { position: relative; width: 74px; height: 190px; flex: 0 0 auto; opacity: 0.92; }
.ladder .rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 8px;
	background: linear-gradient( 90deg, #0a3527 0%, #1d5a44 35%, #2a6d54 55%, #08301f 100% );
	box-shadow: 2px 0 6px rgba( 0, 0, 0, 0.45 ), inset 1px 0 0 rgba( 255, 255, 255, 0.12 );
	border-radius: 2px;
}
.ladder .rail.l { left: 8px; }
.ladder .rail.r { right: 8px; }
.ladder .rung {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 6px;
	background: linear-gradient( 180deg, #2a6d54, #0a3527 );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.4 ), inset 0 1px 0 rgba( 255, 255, 255, 0.14 );
	border-radius: 1px;
}
.ladder .bolt {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 30%, #4d8570, #0a2a1f );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

/* ---------- navigation ---------- */

.topnav {
	max-width: var( --shell );
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.topnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1px;
	flex-wrap: wrap;
}

.topnav a {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #cfe4d9;
	padding: 12px 20px;
	background: rgba( 0, 0, 0, 0.22 );
}

.topnav a:hover { background: rgba( 0, 0, 0, 0.4 ); color: #fff; text-decoration: none; }
.topnav .current-menu-item > a,
.topnav .current_page_item > a { background: var( --paper ); color: var( --wall-lo ); }

.nav-toggle { display: none; }

/* ================================================================
   LAYOUT
   ================================================================ */

.shell {
	max-width: var( --shell );
	margin: 0 auto;
	padding: 26px 20px 44px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --rail-width );
	gap: 32px;
	align-items: start;
}

.shell.no-rail { grid-template-columns: minmax( 0, 1fr ); }

.rail { position: sticky; top: 20px; }

@media ( max-width: 900px ) {
	.shell { grid-template-columns: minmax( 0, 1fr ); }
	.rail { position: static; }
	.tile { width: 44px; height: 57px; font-size: 39px; }


	.ladder { display: none; }
	.mast { padding-bottom: 26px; }
}

@media ( max-width: 420px ) {
	.tile { width: 36px; height: 47px; font-size: 31px; }
	.tiles { gap: 4px; }
	.tiles .gap { width: 9px; }
	.morse { display: none; }
}

/* ---------- well heading ---------- */

.well-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid var( --ink );
	padding-bottom: 9px;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 4px;
}

.well-head h1,
.well-head h2 {
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --sox-navy );
	margin: 0;
	font-weight: 800;
}

.well-head .meta { font-size: 11.5px; color: var( --muted ); }

/* ================================================================
   PW TRENDING NEWS — river styling
   The plugin ships structural CSS; this is the Sox Wire skin over it.
   ================================================================ */

.pwtn-wrap { margin-top: 16px; }

.pwtn-wrap ul.pwtn-list > li.pwtn-item {
	padding: 11px 0 !important;
	border-bottom: 1px solid #f0efec;
}

.pwtn-title {
	font-size: 16.5px;
	line-height: 1.45;
	color: var( --ink );
	font-weight: 500;
}

.pwtn-title:hover { color: var( --link ); }

.pwtn-meta { font-size: 12px; color: var( --muted ); margin-top: 4px; }
.pwtn-sep { color: #c8c8c8; }

.pwtn-new-badge,
.pwtn-pin-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 2px 5px;
	border-radius: 2px;
	text-transform: uppercase;
	margin-right: 7px;
	color: #fff;
	vertical-align: 1px;
}

.pwtn-new-badge { background: var( --sox-red ); }
.pwtn-pin-badge { background: var( --sox-navy ); }

.pwtn-item-pinned { background: #fffdf6; border-left: 3px solid var( --gold ); padding-left: 10px !important; }

.pwtn-toolbar { margin: 16px 0 20px !important; }

.pwtn-panel summary.pwtn-toggle,
.pwtn-search input,
.pwtn-pagination button {
	font-family: inherit;
	font-size: 12.5px;
	border-radius: 4px;
	border: 1px solid #cfd8df;
}

.pwtn-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var( --rule );
}

.pwtn-pagination button {
	background: #f6f8fa;
	padding: 8px 15px;
	color: #1a5d92;
	font-weight: 600;
	cursor: pointer;
}

.pwtn-page-status { font-size: 12px; color: var( --muted ); }

/* ================================================================
   PAGES & POSTS
   ================================================================ */

.entry { margin-bottom: 34px; }
.entry-title { font-size: 30px; line-height: 1.25; margin: 0 0 8px; color: var( --ink ); }
.entry-title a { color: inherit; }
.entry-meta { font-size: 12px; color: var( --muted ); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.entry-content { font-size: 17px; line-height: 1.65; }
.entry-content h2 { font-size: 22px; margin-top: 30px; }
.entry-content h3 { font-size: 18px; margin-top: 24px; }
.entry-content blockquote {
	border-left: 3px solid var( --sox-red );
	margin: 20px 0;
	padding: 4px 0 4px 18px;
	color: #444;
	font-style: italic;
}
.entry-content code {
	background: #f2f0eb;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 0.9em;
}

.pagination { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var( --rule ); }

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

.wall-foot {
	background: var( --wall-lo );
	color: #9dc4b3;
	text-align: center;
	padding: 30px 20px;
	font-size: 11px;
	letter-spacing: 0.1em;
	border-top: 5px solid var( --sox-red );
	margin-top: 20px;
}

.wall-foot .brand {
	color: #fff;
	letter-spacing: 0.24em;
	font-weight: 800;
	font-size: 13px;
	display: block;
	margin-bottom: 14px;
}

.wall-foot a { color: #c6ded1; text-decoration: underline; }
.wall-foot .fine { display: block; margin-top: 12px; opacity: 0.75; line-height: 1.7; }

/* ================================================================
   PRINT
   ================================================================ */

@media print {
	.wall, .topnav, .rail, .wall-foot, .pwtn-toolbar, .pwtn-pagination { display: none; }
	.shell { display: block; max-width: none; padding: 0; }
	body { background: #fff; }
}