/*
Theme Name: Science Politics
Theme URI: https://sciencepolitics.com
Description: A modern block theme for Science Politics featuring clean typography and custom navigation.
Author: Science Politics
Author URI: https://sciencepolitics.com
Version: 1.0.0
Template: twentytwentyfive
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: science-politics
*/

/* 
 * Custom styles for Science Politics
 * Typography customizations are primarily handled in theme.json
 * Add any additional CSS overrides below
 */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
  padding: 0;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
  padding: 0;
}

/* ================================================
   Sticky Footer Layout
   Ensures footer stays at bottom even with short content
   ================================================ */

.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks > main {
  flex-grow: 1;
}

/* ================================================
   Custom Theme Styles
   Component-specific styles are in /assets/css/
   ================================================ */

/* ================================================
   Header Layout
   ================================================ */

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

.motto-section,
.nav-links-section {
	flex: 1;
}

.logo-section {
	flex: 0 0 auto;
}

/* Layout - Max width for content well */
.wp-site-blocks main {
  padding: 0px 20px;
}

/* Reduce main margin-top on mobile to match shorter header line */
@media (max-width: 768px) {
	.wp-site-blocks main {
		margin-top: 1rem !important;
	}
}

/* Ensure constrained layouts use the theme.json max-width */
.wp-block-group.has-global-padding > :where(.wp-block-group__inner-container) {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Hide page title on homepage (but not post titles from Query Loops) */
.home main > .wp-block-post-title,
.home main .entry-title:not(.wp-block-query *) {
	display: none;
}

/* Remove top margin from "Recent" heading on homepage */
.home h5 {
	margin-top: 0;
}

/* Post Author Name - Keep inline with "By" text */
.wp-block-post-author-name {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Co-Authors Plus - Style to match tag style */
.wp-block-co-authors-plus-coauthors {
	font-family: var(--wp--preset--font-family--josefin-sans);
	font-size: var(--wp--preset--font-size--tag);
	font-style: normal;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tag);
	letter-spacing: var(--wp--custom--letter-spacing--tag);
	text-transform: uppercase;
	/* Color is set dynamically via category color injection */
}

/* Nested elements inherit parent styles */
.wp-block-co-authors-plus-coauthors p,
.wp-block-co-authors-plus-coauthors span {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.wp-block-co-authors-plus-coauthors a {
	color: inherit;
	text-decoration: none;
}

.wp-block-co-authors-plus-coauthors a:hover {
	text-decoration: none;
}

/* Remove default paragraph margins in flex groups */
.wp-block-group[class*="is-layout-flex"] p {
	margin: 0;
}

/* Featured Story Column Order - Image first on mobile, text first on desktop */
/* Mobile: Image first visually, set gap to 24px between stacked columns */
@media (max-width: 781px) {
	.featured-story-columns.is-stacked-on-mobile {
		gap: 24px !important;
	}
	
	.featured-story-columns .wp-block-column:first-child {
		order: 2;  /* Text - visually second on mobile */
	}
	
	.featured-story-columns .wp-block-column:last-child {
		order: 1;  /* Image - visually first on mobile */
	}
}

/* Latest Stories Timeline Styling */
.latest-stories-timeline {
	position: relative;
}

/* Vertical line */
.latest-stories-timeline .latest-stories-list {
	position: relative;
	/* padding-left: 24px; */
}

.latest-stories-timeline li {
  margin-top: 0px;
}

/* Horizontal markers for each story */
.latest-stories-timeline .latest-story-title
 {
	position: relative;
  padding-left: 32px;
  margin-bottom: 0 !important;
  padding-bottom: 32px;
}

.latest-stories-timeline li .latest-story-title::before {
	content: '';
	position: absolute;
	left: 2px;
	top: -16px;
	width: 2px;
	height: calc(100% + 36px);
	background-color: var(--wp--preset--color--dark-gold);
}

.latest-stories-timeline li:last-child .latest-story-title::before {
	content: '';
  height: 0;
}

.latest-stories-timeline li .latest-story-title::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 18px;
	width: 16px;
  height: 2px;
	background-color: var(--wp--preset--color--dark-gold);
}

/* Mobile styles for latest stories */
@media (max-width: 768px) {
	.latest-stories-timeline {
		padding-top: 40px;
		border-top: 1px solid black;
	}
}

/* Add any global overrides or custom styles below */

/* ================================================
   Page Template Layout
   ================================================ */

/* Only apply page template styles to non-homepage pages */
body:not(.home) .page-template {
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

body:not(.home) .page-template .wp-block-post-title {
	margin-bottom: 0px;
  max-width: 650px;

}

/* Hide page title when meta box option is enabled */
body.hide-page-title .page-template .wp-block-post-title {
	display: none;
}

body:not(.home) .page-template .wp-block-post-content {
	max-width: 650px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ================================================
   Single Post Layout
   ================================================ */

/* CSS Variables for Single Post Header Lockup */
:root {
	--post-header-lockup-border-width: 1px;
	--post-header-lockup-border-color: black;
	--post-header-lockup-padding-top: 48px;
	--post-header-lockup-gap: 24px;
	--post-header-lockup-line-height: calc(var(--post-header-lockup-padding-top) - 8px);
	--post-header-lockup-right-padding: 40px;
	--post-header-lockup-after-extension: 72px;
	--post-header-lockup-margin-bottom: 24px;
	--post-header-lockup-deck-byline-width: 200px;
}

.single-post-layout {
	max-width: 910px; /* 870px well + 20px padding each side */
	margin: 2rem auto 0;
	padding: 0 20px;
}

.post-article {
	width: 100%;
}

/* Title/Deck Row */
.post-header-row {
  
  padding-top: 16px;
	display: flex;
	gap: var(--post-header-lockup-gap);
	margin-bottom: var(--post-header-lockup-margin-bottom);
	width: 100%; /* Uses the 870px well space */
}

.post-title {
	flex: 1;
	margin: 0;
	padding: 0;
  position: relative;
}

.post-deck-byline {
	width: var(--post-header-lockup-deck-byline-width);
	flex-shrink: 0;
  position: relative;
  padding-right: var(--post-header-lockup-right-padding);
}

.post-title::before, .post-deck-byline::before, .post-deck-byline::after {
  content: " ";
  height: var(--post-header-lockup-line-height); 
  border-left: var(--post-header-lockup-border-width) solid var(--post-header-lockup-border-color);
  position: absolute;
  top: calc(-1 * var(--post-header-lockup-padding-top));
  left: 0px;
}

.post-deck-byline::after {
  height: calc(100% + var(--post-header-lockup-after-extension));
  left: unset;
  right: 0px;
}

.post-deck {
	margin-bottom: var(--post-header-lockup-margin-bottom);
	color: #000;
	font-family: "Crimson Pro", serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 400;
	line-height: 20px;
}

.post-byline {
	font-family: var(--wp--preset--font-family--josefin-sans);
	font-size: var(--wp--preset--font-size--tag);
	font-style: normal;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tag);
	letter-spacing: var(--wp--custom--letter-spacing--tag);
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-blue);
}

.post-byline a {
	color: inherit;
	text-decoration: none;
}

.post-byline a:hover {
	text-decoration: none;
}

.post-date {
	font-family: var(--wp--preset--font-family--josefin-sans);
	font-size: var(--wp--preset--font-size--tag);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tag);
	letter-spacing: var(--wp--custom--letter-spacing--tag);
	text-transform: uppercase;
}

/* Featured Image - Full bleed (910px) */
.post-featured-image {
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 32px;
	
	min-height: 400px; /* Reserve minimum space while loading */
}

.post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Post Content Wrapper - Flex container for content + caption */
.post-content-wrapper {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* Post Content - 620px max width, flush left */
.post-content {
	max-width: 620px;
	margin: 0;
	flex-shrink: 0;
}

.post-content > * {
	max-width: 620px;
}

/* Remove top margin/padding from first element */
.post-content > *:first-child {
	margin-top: 0;
	padding-top: 0;
}

/* 
 * Links in body content - underline prose links only
 * Excludes: headings, bylines, rubrics, author names, and other UI elements
 */
.post-content p:not(.post-byline):not(.category-rubric):not(.is-style-rubric):not([class*="co-authors"]) a,
.post-content li:not(.wp-block-post):not(.wp-block-navigation-item) a,
.post-content blockquote a,
.wp-block-post-content p:not(.post-byline):not(.category-rubric):not(.is-style-rubric):not([class*="co-authors"]) a,
.wp-block-post-content li:not(.wp-block-post):not(.wp-block-navigation-item) a,
.wp-block-post-content blockquote a {
	color: inherit;
	text-decoration: underline;
}

/* Ensure paragraphs and other elements respect the 620px width */
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
	max-width: 620px;
}

/* Blockquote styling */
.post-content blockquote,
.post-content .wp-block-quote {
	font-size: 32px;
	font-style: italic;
	line-height: 1.2;
	border-left: 4px solid var(--wp--preset--color--gold);
	padding-left: 24px;
	margin: 32px 0;
	color: #000;
}

.post-content blockquote p,
.post-content .wp-block-quote p {
	font-size: inherit;
	font-style: inherit;
	line-height: inherit;
	margin: 0;
}

.post-content blockquote cite,
.post-content .wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font-size: 18px;
	font-style: normal;
	color: #666;
}

/* Caption area - sits in remaining space to the right */
.post-content-caption {
	flex: 1;
	color: #000;
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	padding-top: 0;
}

/* First 8 words styling */
.post-content .first-words {
	color: var(--wp--preset--color--dark-gold);
	font-family: "Josefin Sans", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/* Author bio at bottom of post */
.author-bio {
	margin-top: 2em;
	font-style: italic;
	font-size: var(--wp--preset--font-size--body, 21px);
	line-height: var(--wp--custom--line-height--body, 1.4);
	font-family: var(--wp--preset--font-family--crimson-pro, "Crimson Pro", serif);
}

/* ================================================
   Single Post Responsive Design
   ================================================ */

/* Tablet - Large (768px - 1090px) */
@media (max-width: 1090px) {
	.single-post-layout {
		max-width: 100%;
		padding: 0 32px;
    margin: 0;
	}
	
	/* Slightly reduce header lockup spacing */
	:root {
		--post-header-lockup-gap: 16px;
		--post-header-lockup-deck-byline-width: 180px;
		--post-header-lockup-right-padding: 24px;
	}
	
	.post-title {
		font-size: 64px;
		line-height: 1;
	}

  	/* Remove decorative border lines on mobile */
	.post-title::before,
	.post-deck-byline::before,
	.post-deck-byline::after {
		display: none;
	}
}

/* Tablet - Small / Large Phone (481px - 768px) */
@media (max-width: 768px) {
	.single-post-layout {
		padding: 0 20px;
		
	}
	
	/* Stack header elements vertically */
	.post-header-row {
		flex-direction: column;
		gap: 16px;
		
		position: relative;
	}
	
	.post-title {
		font-size: 48px;
		line-height: 1.1;
		width: 100%;
	}
	
	.post-deck-byline {
		width: 100%;
		padding-right: 0;
	}
	
	.post-deck {
		font-size: 18px;
		line-height: 1.3;
		margin-bottom: 12px;
	}
	
	/* Stack content and caption */
	.post-content-wrapper {
		flex-direction: column;
		gap: 24px;
	}
	
	.post-content {
		max-width: 100%;
	}
	
	.post-content > * {
		max-width: 100%;
	}
	
	.post-content p,
	.post-content ul,
	.post-content ol,
	.post-content blockquote,
	.post-content h1,
	.post-content h2,
	.post-content h3,
	.post-content h4,
	.post-content h5,
	.post-content h6 {
		max-width: 100%;
	}
	
	.post-content-caption {
		padding-top: 12px;
		border-top: 1px solid #DFAA00;
	}
	
	/* Featured image - maintain full bleed */
	.post-featured-image {
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
		min-height: 250px;
	}
}

/* Mobile (320px - 480px) */
@media (max-width: 480px) {
	.single-post-layout {
		margin-top: 1rem;
		padding: 0 16px;
	}
	
	/* Further reduce header spacing */
	.post-header-row {
		padding-top: 24px;
		gap: 12px;
		margin-bottom: 16px;
	}
	
	.post-title {
		font-size: 36px;
		line-height: 1.1;
		letter-spacing: -0.9px;
	}
	
	.post-deck {
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 8px;
	}
	
	.post-byline {
		font-size: 10px;
	}
	
	/* Reduce featured image negative margins */
	.post-featured-image {
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px);
		margin-bottom: 24px;
		min-height: 200px;
	}
	
	.post-content-wrapper {
		gap: 16px;
	}
	
	.post-content-caption {
		font-size: 12px;
		line-height: 1.3;
		padding-top: 8px;
	}
	
	/* Adjust first words styling */
	.post-content .first-words {
		font-size: 18px;
		line-height: 22px;
	}
	
	/* Better spacing for body content */
	.post-content p,
	.post-content ul,
	.post-content ol {
		font-size: 18px;
		line-height: 1.5;
	}
	
	/* Adjust blockquote sizing for mobile */
	.post-content blockquote,
	.post-content .wp-block-quote {
		font-size: 24px;
		line-height: 1.3;
		padding-left: 16px;
		margin: 24px 0;
		border-left-width: 3px;
	}
	
	.post-content blockquote cite,
	.post-content .wp-block-quote cite {
		font-size: 14px;
		margin-top: 12px;
	}
	
	/* Author bio responsive */
	.author-bio {
		font-size: 18px;
		line-height: 1.5;
	}
}

/* ================================================
   Related Stories Section
   ================================================ */

.related-stories-section {
	position: relative;
	/* Break out of constrained layout to full width */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	margin-bottom: 0 !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	/* 95% white over green using color-mix */
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.90)), #02B978;
}

/* Heading with decorative L-shaped line */
.related-stories-heading {
	position: relative;
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 100%;
text-transform: uppercase;

color: #000000;


}

.related-stories-heading::after {
	content: ' ';
  border: black solid; 
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	height: 24px;
  width: 24px;
	position: relative;
  right: -12px;
  bottom: -20px;
  display: inline-block;
}


/* Shared styling for homepage story and related stories post elements */
.homepage-story-query .wp-block-post-featured-image,
.related-stories-query .wp-block-post-featured-image {
	margin-bottom: 16px;
}

/* Tag styling - ensure theme.json styles apply even with explicit block attributes */
.homepage-story-query .wp-block-post-terms,
.related-stories-query .wp-block-post-terms {
	margin-bottom: 12px;
	/* Force theme.json values - these should match theme.json core/post-terms */
	font-family: var(--wp--preset--font-family--josefin-sans) !important;
	font-size: var(--wp--preset--font-size--tag) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: var(--wp--custom--line-height--tag) !important;
	letter-spacing: var(--wp--custom--letter-spacing--tag) !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--dark-blue) !important;
}

/* Ensure links inherit all tag styles */
.homepage-story-query .wp-block-post-terms a,
.related-stories-query .wp-block-post-terms a {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
}

.homepage-story-query .wp-block-post-title,
.related-stories-query .wp-block-post-title {
	margin-top: 0;
	margin-bottom: 12px;
}

.homepage-story-query .wp-block-post-excerpt,
.related-stories-query .wp-block-post-excerpt {
	margin-bottom: 24px;
	margin-top: 0px;
	line-height: 120%;
}

/* Ensure all child elements of post-title respect margins */
.homepage-story-query .wp-block-post-title *,
.related-stories-query .wp-block-post-title * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Query block layout - WordPress handles columns via displayLayout */
.related-stories-query > .wp-block-post-template {
	border-top: 1px solid black;
	padding-top: 32px;
  position: relative;
}

.related-stories-query > .wp-block-post-template::after {
  content: " ";
  border-left: 1px solid black;
  height: 16px;
  position: absolute;
  top: 0; 
  right: 0;
}

.related-stories-query > .wp-block-post-template::before {
  content: " ";
  border-left: 1px solid black;
  height: 16px;
  position: absolute;
  top: 0; 
  left: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.related-stories-section {
		margin-top: 32px !important;
		margin-bottom: 32px !important;
	}
	
	.related-stories-heading {
		font-size: 14px;
		margin-bottom: 20px !important;
	}
	
	.related-stories-heading::before {
		height: 16px;
	}
}

/* ================================================
   Footer Styles
   ================================================ */

.site-footer {
	background-color: #000000 !important;
	color: #ffffff;
	padding-left: 20px !important;
	padding-right: 20px !important;

}

.site-footer .footer-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.site-footer .footer-logo {
	display: flex;
	align-items: center;
}

.site-footer .footer-logo-image {
	margin: 0;
}

.site-footer .footer-logo-image img {
	height: auto;
	max-width: 180px;
	width: auto;
}

.site-footer .footer-navigation {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.site-footer .footer-nav-menu {
	text-align: right;
}

/* Hide hamburger menu toggle on footer navigation */
.site-footer .footer-nav-menu .wp-block-navigation__responsive-container-open-button,
.site-footer .footer-nav-menu .wp-block-navigation__responsive-container-close-button,
.site-footer .footer-nav-menu button[aria-label*="menu"],
.site-footer .footer-nav-menu button[aria-label*="Menu"] {
	display: none !important;
}

/* Always show footer navigation menu items, never collapse */
.site-footer .footer-nav-menu .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

.site-footer .footer-nav-menu .wp-block-navigation__responsive-container.has-modal-open {
	display: block !important;
}

.site-footer .footer-nav-menu .wp-block-navigation__responsive-dialog {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

.site-footer .footer-nav-menu a {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--josefin-sans) !important;
	font-size: var(--wp--preset--font-size--tag) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: var(--wp--custom--line-height--tag) !important;
	letter-spacing: var(--wp--custom--letter-spacing--tag) !important;
	text-transform: uppercase !important;
	text-decoration: none;
}

.site-footer .footer-nav-menu a:hover {
	text-decoration: underline;
}

.site-footer .footer-copyright {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--crimson-pro);
	font-size: 0.875rem;
	margin: 0;
	padding-top: 1rem;
	text-align: right;
}

/* Footer Responsive */
@media (max-width: 768px) {
	.site-footer .footer-content {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}
	
	.site-footer .footer-logo {
		flex-direction: column;
		gap: 1.5rem;
	}
	
	.site-footer .footer-logo-image img {
		max-width: 140px;
	}
	
	.site-footer .footer-navigation {
		align-items: center;
		text-align: center;
	}
	
	.site-footer .footer-nav-menu {
		text-align: center;
	}
	
	.site-footer .footer-nav-menu .wp-block-navigation__container {
		justify-content: center;
	}
	
	.site-footer .footer-copyright,
	.site-footer .footer-navigation p {
		text-align: center;
	}
}

/* ================================================
   Page Banner Pattern
   ================================================ */

.page-banner-columns {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--60, 60px) !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	align-items: stretch;
	width: 100vw;
	max-width: 1300px;
	position: relative;
	gap: 0 !important;
}

/* Center the banner when it's constrained to max-width */
@media (min-width: 1300px) {
	.page-banner-columns {
		margin-left: calc(50% - 650px) !important;
		margin-right: calc(50% - 650px) !important;
	}
}

.page-banner-columns > .wp-block-column {
	display: flex;
	margin: 0 !important;
}

.page-banner-text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
}

.page-banner-title,
.page-banner-subtitle {
	margin: 0;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--crimson-pro);
	line-height: 90%;
}

.page-banner-title {
	margin-bottom: 0.25em;
}

.page-banner-image-block {
	margin: 0;
	height: 100%;
	display: flex;
	flex: 1;
}

.page-banner-image-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
	.page-banner-columns {
		flex-direction: column;
	}
	
	.page-banner-text,
	.page-banner-image {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	
	.page-banner-text {
		padding: 24px 20px !important;
	}
	
	
	.page-banner-title,
	.page-banner-subtitle {
		font-size: clamp(40px, 12vw, 83px) !important;
	}
}

/* Smaller mobile screens */
@media (max-width: 480px) {
	.page-banner-text {
		padding: 20px 16px !important;
	}
	
	.page-banner-title,
	.page-banner-subtitle {
		font-size: clamp(32px, 10vw, 48px) !important;
	}
}

/* ================================================
   Story Collection Pattern
   ================================================ */

/* Category title - styled like tags but at 18px */
.story-collection-container .wp-block-heading.has-category-title-font-size {
	font-family: var(--wp--preset--font-family--josefin-sans) !important;
	font-size: var(--wp--preset--font-size--category-title) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 100% !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
}

.story-collection-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	gap: 12px;
  margin-top: 0px;
}

.story-collection-container h2 {
  margin: 0;
}

.story-collection-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 16px;
	width: 100%;
	justify-content: center;
}

.story-collection-image {
	width: 72px;
	height: 48px;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
	overflow: hidden;
	margin-bottom: 0;
}

.story-collection-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.story-collection-title {
	line-height: 24px;
	order: 1;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.story-collection-separator {
	
	width: 100%;
	height: 0;
	flex: none;
	align-self: stretch;
	flex-grow: 0;
  margin: 20px 0px;
}

.story-collection-query .wp-block-post-template > *:last-child .story-collection-separator {
	display: none;
}

/* ================================================
   Story Collection Grid
   ================================================ */

.story-collection-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 72px;
	width: 100%;
  margin-block: 64px;
}

/* Medium screens: 2 columns x 3 rows */
@media (max-width: 1024px) {
	.story-collection-grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column x 6 rows */
@media (max-width: 768px) {
	.story-collection-grid-wrapper {
		grid-template-columns: 1fr;
	}
}

/* Ensure story-collection containers in grid take full width and override inline width */
.story-collection-grid-wrapper .story-collection-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* ================================================
   Newsletter Signup Box
   ================================================ */

.newsletter-signup-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
	gap: 24px;
	background: rgba(0,0,0,.05);
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
	box-sizing: border-box;
  width: 100%;
}

.newsletter-signup-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 12px;
	height: auto;
	flex: none;
	order: 0;
	flex-grow: 0;
}

.newsletter-rubric {
	width: auto;
	height: 14px;
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #000000;
	flex: none;
	order: 0;
	flex-grow: 0;
	margin: 0;
}

.newsletter-chatter {
	height: auto;
	font-family: 'Crimson Pro', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: #000000;
	flex: none;
	order: 1;
	flex-grow: 0;
	margin: 0;
}

.newsletter-signup-form-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
}

.newsletter-signup-form {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	
	gap: 0;
	margin: 0;
	padding: 0;
}

.newsletter-form-input-wrapper {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	width: 100%;
	gap: 0;
}

@media (max-width: 768px) {
	.newsletter-form-input-wrapper {
		grid-template-columns: 1fr;
	}
}

.newsletter-email-input {
	box-sizing: border-box;
	padding: 13px 20px;
	border: 1px solid #000000;
	background: transparent;
	font-family: 'Crimson Pro', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.5);
	outline: none;
	height: 48px;
	width: 100%;
}

.newsletter-email-input::placeholder {
	color: rgba(0, 0, 0, 0.5);
	font-style: italic;
}

.newsletter-email-input:focus {
	color: #000000;
}

.newsletter-submit-button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 19px 41px;
	height: 48px;
	background: #000000;
	border: none;
	cursor: pointer;
	width: auto;
	min-width: fit-content;
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FFFFFF;
	transition: opacity 0.2s ease;
}

.newsletter-submit-button:hover {
	opacity: 0.8;
}

.newsletter-submit-button:active {
	opacity: 0.6;
}

/* Stack newsletter form on small containers */
@media (max-width: 500px) {
	.newsletter-signup-box .newsletter-form-input-wrapper {
		flex-direction: column !important;
		height: auto;
		gap: 0px;
	}
	
	.newsletter-signup-box .newsletter-email-input {
		width: 100%;
	}
	
	.newsletter-signup-box .newsletter-submit-button {
		width: 100%;
	}
}

/* Mailchimp response messages */
.mc-responses {
	width: 100%;
	margin-top: 12px;
}

.mc-responses .response {
	font-family: 'Crimson Pro', serif;
	font-size: 16px;
	line-height: 1.4;
	padding: 10px 15px;
}

#mce-error-response {
	color: #c0392b;
	background: rgba(192, 57, 43, 0.1);
}

#mce-success-response {
	color: #27ae60;
	background: rgba(39, 174, 96, 0.1);
}

/* ================================================
   About Box Pattern
   ================================================ */

/* Reduce padding between columns on mobile */
@media (max-width: 781px) {
	.about-box-columns.is-layout-flex {
		gap: 16px !important;
	}
	
	.about-box-columns .wp-block-column {
		padding-top: var(--wp--preset--spacing--40, 40px) !important;
		padding-bottom: var(--wp--preset--spacing--40, 40px) !important;
		padding-left: var(--wp--preset--spacing--40, 40px) !important;
		padding-right: var(--wp--preset--spacing--40, 40px) !important;
	}
	
	/* Reduce gap between stacked columns */
	.about-box-columns .about-box-text-column {
		padding-bottom: var(--wp--preset--spacing--20, 20px) !important;
	}
	
	.about-box-columns .about-box-newsletter-column {
		padding-top: var(--wp--preset--spacing--20, 20px) !important;
	}
}

/* Reduce padding even more on smaller mobile screens */
@media (max-width: 480px) {
	.about-box-columns .wp-block-column {
		padding-top: var(--wp--preset--spacing--30, 30px) !important;
		padding-bottom: var(--wp--preset--spacing--30, 30px) !important;
		padding-left: var(--wp--preset--spacing--30, 30px) !important;
		padding-right: var(--wp--preset--spacing--30, 30px) !important;
	}
	
	.about-box-columns .about-box-text-column {
		padding-bottom: var(--wp--preset--spacing--15, 15px) !important;
	}
	
	.about-box-columns .about-box-newsletter-column {
		padding-top: var(--wp--preset--spacing--15, 15px) !important;
	}
}

/* ================================================
   Horizontal Post
   ================================================ */

/* Make WordPress columns work as container query contexts */
.wp-block-column {
	container-type: inline-size;
}

.horizontal-post-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	max-width: 650px;
	gap: 16px;

	/* Flip to vertical when container is narrow (works in columns!) */
	@container (max-width: 450px) {
		flex-direction: column;
	}

	/* Fallback for older browsers: flip at viewport 768px */
	@media (max-width: 768px) {
		flex-direction: column;
	}
}

.horizontal-post-image {
	flex-shrink: 0;
	overflow: hidden;
	align-self: stretch;
	height: 100%;
	/* Height matches content via flex stretch, width calculated from aspect ratio */
	aspect-ratio: 3 / 2;
	max-width: 300px;

	@container (max-width: 450px) {
		max-width: none;
	}

	@media (max-width: 768px) {
		max-width: none;
	}
}

.horizontal-post-image figure {
	height: 100%;
	margin: 0;
	display: block;
}

.horizontal-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.horizontal-post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: white;
	min-height: 100%;
  gap: 8px;
}

.horizontal-post-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}

.horizontal-post-text > *,
.horizontal-post-content > *,
.horizontal-post-container > * {
	margin-block-start: 0 !important;
}

.horizontal-post-title {
	line-height: 32px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
  padding-bottom: 4px;
}

.horizontal-post-deck {
	line-height: 24px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

/* Hide excerpt when parent has .hide-excerpt modifier */
.hide-excerpt .horizontal-post-deck {
	display: none;
}

.horizontal-post-author {
	margin: 0;
}


.sp-author-bio {
  font-style: italic;
  margin-bottom: 48px;
}

/* ================================================
   Rubric Block Style
   ================================================ */

/* Rubric style for paragraphs and headings - tag-like styling */
.is-style-rubric,
p.is-style-rubric,
h1.is-style-rubric,
h2.is-style-rubric,
h3.is-style-rubric,
h4.is-style-rubric,
h5.is-style-rubric,
h6.is-style-rubric {
	font-family: var(--wp--preset--font-family--josefin-sans) !important;
	font-size: var(--wp--preset--font-size--tag) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: var(--wp--custom--line-height--tag) !important;
	letter-spacing: var(--wp--custom--letter-spacing--tag) !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--black);
}

/* ================================================
   Category Rubric Block
   ================================================ */

/* Category Rubric block - displays category in rubric style with assigned color */
.category-rubric,
.wp-block-science-politics-category-rubric {
	font-family: var(--wp--preset--font-family--josefin-sans);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tag);
	letter-spacing: var(--wp--custom--letter-spacing--tag);
	text-transform: uppercase;
	margin: 0;
  margin-bottom: 12px !important;
}

.category-rubric a,
.wp-block-science-politics-category-rubric a,
.is-style-rubric a {
	text-decoration: none;
}

.category-rubric a:hover,
.wp-block-science-politics-category-rubric a:hover {
	text-decoration: underline;
}

.category-rubric-separator {
	color: var(--wp--preset--color--black);
}

/* Small variant - for homepage story cards */
.category-rubric--small,
.category-rubric--small.wp-block-science-politics-category-rubric {
	font-size: 12px;
	letter-spacing: 1px;
}