/*
Theme Name: NewEU
Theme URI: https://neweu.eu
Author: NewEU Editorial
Description: A bold, high-contrast European political newsletter theme combining Jacobin's editorial gravitas with NY Post's tabloid energy. Features a vertical sidebar navigation, dark ink backgrounds, crimson accents, slab-serif typography, and aggressive uppercase headlines. Built for editorial submissions, opinion pieces, and newsletter subscriptions.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neweu
Tags: blog, news, one-column, custom-colors, custom-menu, editor-style, block-patterns, full-site-editing, wide-blocks
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ==========================================================================
   Reset & Base Overrides
   ========================================================================== */

:root,
body,
.wp-site-blocks {
	overflow: visible;
}

/* Ensure dark ink surface is the foundation */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography Polish
   ========================================================================== */

/* Tighter heading rhythm — slab-serif uppercase headlines need visual weight */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	text-wrap: balance;
}

/* Body text — Georgia-rooted slab for long-form readability on dark */
.wp-block-paragraph,
.wp-block-list {
	text-wrap: pretty;
}

/* Drop-cap treatment — tabloid / Jacobin style */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--slab-serif);
	font-weight: 900;
	color: var(--wp--preset--color--crimson);
	font-size: 3.8em;
	line-height: 0.85;
	margin-right: 0.06em;
	float: left;
}

/* Monospace utility text — datelines, bylines, metadata */
.wp-block-post-date,
.wp-block-post-terms,
figcaption,
.wp-element-caption {
	text-wrap: nowrap;
}

/* ==========================================================================
   Link Treatments
   ========================================================================== */

/* Body links: crimson underline on hover only */
.wp-block-paragraph a,
.wp-block-list a {
	text-decoration: none;
	color: var(--wp--preset--color--crimson);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.wp-block-paragraph a:hover,
.wp-block-list a:hover {
	color: var(--wp--preset--color--crimson-dark);
	border-bottom-color: var(--wp--preset--color--crimson-dark);
}

/* Post title links — stark white to crimson on hover */
.wp-block-post-title a {
	text-decoration: none;
	transition: color 0.15s ease;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--crimson);
}

/* ==========================================================================
   Button Variants
   ========================================================================== */

/* Base button transitions */
.wp-block-button .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.wp-block-button .wp-block-button__link:active {
	transform: translateY(1px);
}

/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 3px solid var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--crimson);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--crimson);
}

/* Double-border CTA accent — the NY Post "extra" energy */
.wp-block-button.has-cta-border .wp-block-button__link {
	position: relative;
}

.wp-block-button.has-cta-border .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 2px solid var(--wp--preset--color--white);
	pointer-events: none;
}

/* ==========================================================================
   Image Treatments
   ========================================================================== */

/* High-contrast grayscale with crimson duotone feel */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 0;
}

/* Grayscale filter class for editorial imagery */
.wp-block-image.is-style-editorial img,
.wp-block-post-featured-image.is-style-editorial img {
	filter: grayscale(100%) contrast(1.4) brightness(0.9);
	transition: filter 0.4s ease;
}

.wp-block-image.is-style-editorial:hover img,
.wp-block-post-featured-image.is-style-editorial:hover img {
	filter: grayscale(40%) contrast(1.2) brightness(1);
}

/* Cover block — ensure high contrast overlays */
.wp-block-cover {
	border-radius: 0;
}

.wp-block-cover img {
	filter: grayscale(100%) contrast(1.6) brightness(0.7);
}

/* ==========================================================================
   Separator / Divider Polish
   ========================================================================== */

.wp-block-separator {
	border: none;
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 120px;
}

.wp-block-separator.is-style-dots::before {
	color: var(--wp--preset--color--crimson);
}

/* ==========================================================================
   Quote & Pullquote Polish
   ========================================================================== */

.wp-block-quote {
	font-style: normal;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--muted);
	font-style: normal;
	font-weight: 700;
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-pullquote {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Navigation — Vertical Sidebar Styles
   ========================================================================== */

/* Sticky sidebar — the left wp:column containing the header template part.
   The column is a flex child of wp:columns (nowrap row). Setting sticky +
   align-self:start + height:100vh makes it pin at the viewport top while
   the right column scrolls freely. overflow-y:auto gives the sidebar its
   own scroll rail when the nav outgrows the viewport. */
.wp-block-columns > .wp-block-column:first-child:has(> header.wp-block-template-part) {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	align-self: start;
	z-index: 100;
	flex-shrink: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--crimson) var(--wp--preset--color--surface);
}

/* Also target by flex-basis for browsers where :has() isn't supported */
.wp-block-columns > .wp-block-column[style*="flex-basis:260px"] {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	align-self: start;
	z-index: 100;
	flex-shrink: 0;
}

/* Make the header template-part inside the sidebar fill the full column height */
.wp-block-columns > .wp-block-column:first-child > header.wp-block-template-part {
	min-height: 100%;
}

/* Right-side content column — fills remaining space edge to edge */
.wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
}

/* Remove root padding so the sidebar+content layout goes edge to edge.
   Individual page sections handle their own horizontal padding. */
.wp-site-blocks {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Make sure all content inside the right column stretches full width */
.wp-block-columns > .wp-block-column:last-child > *,
.wp-block-columns > .wp-block-column:last-child main.wp-block-group,
.wp-block-columns > .wp-block-column:last-child footer.wp-block-template-part {
	max-width: 100%;
}

/* Sidebar nav menu items — aggressive left-border hover */
.sidebar-nav .wp-block-navigation-item {
	border-left: 5px solid var(--wp--preset--color--crimson);
	transition: border-left-width 0.15s ease, background-color 0.15s ease;
}

.sidebar-nav .wp-block-navigation-item:hover {
	border-left-width: 14px;
	background-color: var(--wp--preset--color--crimson);
}

.sidebar-nav .wp-block-navigation-item:hover a {
	color: var(--wp--preset--color--white);
}

.sidebar-nav .wp-block-navigation-item a {
	transition: color 0.15s ease, padding-left 0.15s ease;
}

/* Sidebar brand double-rule treatment */
.sidebar-brand-rule {
	position: relative;
	border-bottom: 4px solid var(--wp--preset--color--ink);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.sidebar-brand-rule::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--wp--preset--color--crimson);
}

/* Sidebar crimson right-border accent */
.sidebar-border-right {
	border-right: 6px solid var(--wp--preset--color--crimson);
}

/* Navigation vertical layout override for sidebar */
.sidebar-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.sidebar-nav .wp-block-navigation-item a {
	display: block;
	padding: 0.85rem var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Navigation submenu on sidebar */
.sidebar-nav .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	box-shadow: none;
	border: none;
	padding-left: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
}

/* ==========================================================================
   Hero Section Effects
   ========================================================================== */

/* Halftone dot overlay utility class */
.has-halftone-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 1.5px at 4px 4px, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px);
	background-size: 8px 8px;
	pointer-events: none;
	z-index: 2;
}

/* Scan-line overlay utility class — tabloid print texture */
.has-scanlines::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 3px,
			rgba(0, 0, 0, 0.04) 3px,
			rgba(0, 0, 0, 0.04) 4px
		);
	pointer-events: none;
	z-index: 1;
}

/* Diagonal band utility */
.has-diagonal-band {
	position: relative;
	overflow: hidden;
}

.diagonal-band {
	position: absolute;
	bottom: 0;
	left: -5%;
	right: -5%;
	transform: skewY(-3deg);
	transform-origin: left bottom;
	z-index: 8;
}

.diagonal-band-inner {
	transform: skewY(3deg);
}

/* Hero title dramatic angle */
.hero-tilt {
	transform: rotate(-1.5deg);
	transform-origin: left center;
	text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}

/* Issue stamp circle badge */
.issue-stamp {
	width: 90px;
	height: 90px;
	border: 4px solid var(--wp--preset--color--white);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(12deg);
	opacity: 0.7;
}

/* Vertical text utility */
.vertical-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	opacity: 0.35;
}

/* ==========================================================================
   Post / Article Card Styling
   ========================================================================== */

/* Card hover lift */
.wp-block-post {
	transition: transform 0.2s ease;
}

.wp-block-post:hover {
	transform: translateY(-2px);
}

/* Category tags inline — crimson badges */
.wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--crimson);
	transition: color 0.15s ease;
}

.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--crimson-dark);
}

/* ==========================================================================
   Form / Input Styling (newsletter subscribe)
   ========================================================================== */

input[type="email"],
input[type="text"],
textarea,
.wp-block-search__input {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: none;
	padding: 0.75rem 1.2rem;
	font-family: var(--wp--preset--font-family--slab-serif);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
	outline: none;
	border-radius: 0;
}

input[type="email"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder,
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--x-small);
}

/* Search block button match */
.wp-block-search__button {
	background-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
	border: 3px solid var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab-serif);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--crimson-dark);
}

/* ==========================================================================
   Table Styling
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--slab-serif);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--x-small);
	background-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: left;
}

.wp-block-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table tr:nth-child(even) td {
	background-color: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Footer Styling
   ========================================================================== */

.wp-block-template-part[data-slug="footer"] a {
	text-decoration: none;
	transition: color 0.15s ease;
}

/* ==========================================================================
   Selection Color
   ========================================================================== */

::selection {
	background-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
}

::-moz-selection {
	background-color: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Mobile Header & Hamburger
   ========================================================================== */

/* Desktop & tablet: hide mobile toggle bar */
.neweu-mobile-toggle-bar {
	display: none !important;
}

/* Mobile: sidebar becomes a fixed overlay toggled by a hamburger */
@media (max-width: 991px) {
	/* The sidebar column becomes a fixed overlay, off-screen left by default */
	.wp-block-columns > .wp-block-column:first-child:has(> header.wp-block-template-part),
	.wp-block-columns > .wp-block-column[style*="flex-basis:260px"] {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 300px !important;
		max-width: 85vw !important;
		height: 100vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		z-index: 10000 !important;
		transform: translateX(-100%) !important;
		transition: transform 0.3s ease !important;
		flex-basis: 300px !important;
		flex-shrink: 0 !important;
	}

	/* When open, slide in */
	.wp-block-columns > .wp-block-column:first-child:has(> header.wp-block-template-part).neweu-sidebar-open,
	.wp-block-columns > .wp-block-column[style*="flex-basis:260px"].neweu-sidebar-open {
		transform: translateX(0) !important;
	}

	/* Columns layout: allow content to be full width */
	.wp-block-columns[style*="flex-wrap:nowrap"] {
		flex-wrap: wrap !important;
	}

	.wp-block-columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	/* Show the mobile toggle bar */
	.neweu-mobile-toggle-bar {
		display: flex !important;
	}

	/* Scrim / backdrop when sidebar is open */
	.neweu-sidebar-scrim {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}

	.neweu-sidebar-scrim.is-visible {
		display: block;
	}
}

/* Mobile toggle bar — styled but only displayed via the media query above */
.neweu-mobile-toggle-bar {
	position: sticky;
	top: 0;
	z-index: 9998;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--ink);
	border-bottom: 3px solid var(--wp--preset--color--crimson);
}

.neweu-mobile-toggle-bar__title {
	font-family: var(--wp--preset--font-family--slab-serif);
	font-weight: 900;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.neweu-mobile-toggle-bar__title:hover {
	color: var(--wp--preset--color--crimson);
}

/* Hamburger button */
.neweu-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 6px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--crimson);
	cursor: pointer;
	position: relative;
	z-index: 10001;
}

.neweu-hamburger__line {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--wp--preset--color--white);
	transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Hamburger → X animation */
.neweu-hamburger[aria-expanded="true"] .neweu-hamburger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.neweu-hamburger[aria-expanded="true"] .neweu-hamburger__line:nth-child(2) {
	opacity: 0;
}

.neweu-hamburger[aria-expanded="true"] .neweu-hamburger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Prevent body scroll when sidebar overlay is open */
body.neweu-sidebar-overlay-open {
	overflow: hidden;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Crimson top rule — section divider */
.has-crimson-rule-top {
	border-top: 6px solid var(--wp--preset--color--crimson);
}

/* Crimson bottom rule */
.has-crimson-rule-bottom {
	border-bottom: 6px solid var(--wp--preset--color--crimson);
}

/* White top bar accent */
.has-white-bar-top {
	border-top: 6px solid var(--wp--preset--color--white);
}

/* Dateline dash prefix */
.dateline::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--white);
	vertical-align: middle;
	margin-right: var(--wp--preset--spacing--40);
}

/* Text shadow utility for display headings */
.has-text-shadow {
	text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}

/* Grayscale filter utility for images */
.is-style-grayscale img {
	filter: grayscale(100%) contrast(1.4) brightness(0.9);
}

/* ==========================================================================
   Loop Layout Utilities
   ========================================================================== */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--muted);
	opacity: 0.3;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: '';
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--crimson);
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}