/*!
Theme Name: 4Additive magazine
Theme URI: http://underscores.me/
Author: 4Additive mgazine
Author URI: http://underscores.me/
Description: Custom theme: 4Additive magazine, developed by 4Additive mgazine
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: foradditive
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

4Additive magazine is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/


@import "post-navigation.css";
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# Mockup Styles
	- Site Design
--------------------------------------------------------------*/

/* Pagination Styling */
.pagination-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    width: 100%; /* Ensure full width to allow centering */
}

/* Ensure the nav element itself is centered if it's not full width */
.pagination-wrapper .navigation.pagination {
    display: flex;
    justify-content: center;
    width: 100%;
}

.pagination-wrapper .nav-links {
    display: flex; /* Changed from inline-flex for better control */
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

/* Mobile optimizations for pagination */
@media (max-width: 768px) {
    .pagination-wrapper {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0 15px; /* Add padding for mobile */
    }

    .pagination-wrapper .page-numbers {
        min-width: 36px; /* Slightly smaller on mobile */
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
    
    /* Ensure visibility on mobile */
    .pagination-wrapper .navigation.pagination,
    .pagination-wrapper .nav-links {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: none !important; /* Remove any borders on mobile */
        border-top: none !important;
    }
    
    /* Specific fix for the nav element if it has a border */
    .pagination-wrapper nav {
        border: none !important;
    }
}


.pagination-wrapper .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.pagination-wrapper .page-numbers:hover,
.pagination-wrapper .page-numbers:focus {
    border-color: var(--primary-color);
    background-color: var(--light-gray);
    color: var(--primary-color);
    outline: none;
}

.pagination-wrapper .page-numbers.current {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    cursor: default;
}

.pagination-wrapper .page-numbers.prev,
.pagination-wrapper .page-numbers.next {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.pagination-wrapper .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
    min-width: auto;
    padding: 0 5px;
}

.pagination-wrapper .page-numbers.dots:hover {
    background: transparent;
    color: var(--text-color);
}


/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #333333; /* Changed from blue to default text color for better base */
}

a:visited {
	color: #333333;
}

a:hover,
a:focus,
a:active {
	color: #1a3a5f; /* Primary color */
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ========================================================================== */
/* MOCKUP STYLES */
/* ========================================================================== */

:root {
  --primary-color: #1a3a5f;
  --secondary-color: #0a192f;
  --text-color: #333333;
  --light-gray: #f8f9fa;
  --medium-gray: #e9ecef;
  --dark-gray: #6c757d;
  --border-color: #dee2e6;
}

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

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: #FFFFFF;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header styles targeted specifically to site header to avoid conflicts with entry-header */
.site > header {
  background-color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Reset any potential conflicts for other headers */
.entry-header {
    position: relative;
    z-index: 1;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Roboto Mono', monospace;
  line-height: 1.1;
}

.logo i {
  display: none;
}

.tagline {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--dark-gray);
  margin-top: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}


/* Language switcher specific */
.lang-current {
    display: flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.lang-current i {
    font-size: 12px;
    margin-top: 2px;
}

/* Highlight a current item inside dropdown lists */
.menu-item.has-dropdown .dropdown a[aria-current="true"] {
  background-color: var(--light-gray);
  color: var(--primary-color);
  font-weight: 600;
}

/* Dropdown menus */
.menu-item.has-dropdown {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.menu-item.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: none !important; /* Force hide by default */
  z-index: 10000;
  padding: 0;
}

/* Specifically for language selector to match mockup width */
.menu-item.language-selector .dropdown {
    min-width: 150px;
    left: auto;
    right: 0;
    display: none !important; /* Force hide by default */
    flex-direction: column !important; /* Force column layout */
}

/* Ensure items inside language dropdown are stacked */
.menu-item.language-selector .dropdown li {
    width: 100%;
    display: block;
}

.menu-item.has-dropdown:hover .dropdown { display: block !important; } /* Show on hover */
.menu-item.has-dropdown:hover .dropdown li {
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
.menu-item.has-dropdown .dropdown a {
  display: block !important;
  padding: 10px 14px !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border-color);
}
.menu-item.has-dropdown .dropdown a:last-child { border-bottom: none; }
.menu-item.has-dropdown .dropdown a:hover { background-color: var(--light-gray); color: var(--primary-color); }
.menu-item.has-dropdown .dropdown a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.breadcrumb {
  padding: 20px 0;
  font-size: 14px;
  color: var(--dark-gray);
}

.breadcrumb a {
  color: var(--primary-color);
  text-decoration: none;
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { margin: 0 8px; font-size: 12px; }

.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 12px 25px;
  border-radius: 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Roboto Mono', monospace;
  border: 1px solid var(--primary-color);
}

.btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

.hero {
  background: linear-gradient(rgba(26, 58, 95, 0.9), rgba(10, 25, 47, 0.95)), url('https://sfile.chatglm.cn/images-ppt/eec7bd801fc4.jpg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
  /* padding: 80px 0; */
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
  position: relative;
}

.hero-content { max-width: 800px; margin: 0 auto; z-index: 2; }

.hero h1 {
  font-family: 'Roboto Mono', monospace;
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.hero p {
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: 400;
  letter-spacing: 0.5px;
}


/* Featured Article - Enhanced Style */
.featured-article { 
  padding: 80px 0; 
  background-color: #f0f4f8; /* Slightly darker background for contrast */
  border-top: 1px solid var(--border-color); 
  border-bottom: 1px solid var(--border-color); 
  position: relative;
  z-index: 0;
}

.featured-container { 
  display: flex; 
  gap: 50px; 
  align-items: center; 
  background-color: #fff;
  padding: 40px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.08); /* Deep shadow for "floating" effect */
  border: 1px solid rgba(0,0,0,0.05);
}

.featured-image { 
  flex: 1.2; 
  height: 450px; 
  overflow: hidden; 
  border-radius: 0; 
  border: none; 
  position: relative;
}

.featured-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.featured-container:hover .featured-image img {
  transform: scale(1.03);
}

.featured-content { 
  flex: 1; 
  padding-left: 20px;
}

.featured-category { 
  position: absolute; 
  top: 20px; 
  left: 20px; 
  display: inline-block; 
  padding: 8px 16px; 
  border-radius: 0; 
  font-size: 13px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  background-color: var(--secondary-color); /* Darker blue */
  color: white; 
  font-family: 'Roboto Mono', monospace; 
  z-index: 2; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.featured-title { 
  font-family: 'Roboto Mono', monospace; 
  font-size: 42px; /* Increased size */
  margin-bottom: 24px; 
  color: var(--primary-color); 
  line-height: 1.15; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: -1.5px; 
}

.featured-excerpt { 
  font-size: 19px; 
  color: var(--dark-gray); 
  margin-bottom: 25px; 
  font-family: 'Roboto', sans-serif; 
  line-height: 1.6;
}

.featured-meta { 
  display: flex; 
  align-items: center; 
  font-size: 15px; 
  color: var(--dark-gray); 
  margin-bottom: 25px; 
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
}

.featured-label-text {
  color: var(--primary-color);
  font-weight: 700;
  display: flex;
  align-items: center;
}

.featured-label-text i {
  margin-right: 8px;
}

/* Taxonomy Band - Mobile Scrolling */
.taxonomy-band {
  background-color: var(--light-gray);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
}

.taxonomy-band-inner {
  display: flex;
  align-items: center;
}

.taxonomy-band-title {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 30px;
  color: var(--primary-color);
  white-space: nowrap;
}

.taxonomy-browse-all {
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary-color);
  text-decoration: none;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
}

.taxonomy-browse-all:hover { border-color: var(--primary-color); }

/* Hide browse-all on desktop */
@media (min-width: 769px) {
  .taxonomy-browse-all { display: none; }
}



/* Newsletter CTA Box */
.newsletter-cta-box {
    background-color: var(--primary-color);
    color: white;
    height: 90px;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left;
    border: 1px solid var(--primary-color);
    transition: transform 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.newsletter-cta-box:hover {
  transform: translateY(-5px);
  background-color: var(--secondary-color);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Global Carousel Styles */
.carousel-btn { display: none; }

/* ... existing styles ... */

/* Mobile Menu Styles */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--primary-color);
  cursor: pointer;
  padding: 10px;
  margin-left: auto; /* Push to right if needed */
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: row; /* Keep row for logo + hamburger */
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0;
    position: relative;
  }
  
  .logo {
    margin-bottom: 0;
    font-size: 24px;
  }
  
  .logo i {
    font-size: 28px;
  }
  
  .hamburger-menu {
    display: block;
  }
  
  nav {
    width: 100%;
    display: none; /* Hidden by default */
    background-color: white;
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
    animation: slideDown 0.3s ease-out forwards;
  }
  
  nav.is-active {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 20000;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  
  nav ul {
    flex-direction: column;
    width: 100%;
    margin-top: 0;
  }
  
  nav ul li {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid var(--light-gray);
  }
  
  nav ul li:last-child {
    border-bottom: none;
  }
  
  nav ul li a {
    display: block;
    padding: 15px 20px;
    width: 100%;
  }
  
  nav ul li a:after {
    display: none; /* Remove underline effect on mobile */
  }
  
  /* Dropdown on mobile */
  .menu-item.has-dropdown .dropdown {
    position: static;
    box-shadow: none;
    border: none;
    display: none;
    background-color: var(--light-gray);
    width: 100%;
    padding-left: 20px;
  }
  
  .menu-item.has-dropdown.is-open .dropdown {
    display: block;
  }
  
  /* Lang switcher specific for mobile */
  .lang-switcher .dropdown {
    min-width: 100%;
  }

  /* Fix Banners and Newsletter height on mobile */
  .banner-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .banner, .newsletter-cta-box {
    width: 100%;
    height: 90px; /* Force consistent height */
  }
  
  /* Footer fixes */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .footer-section ul li a:hover {
    padding-left: 0; /* Disable padding shift on mobile center align */
    color: var(--primary-color);
  }
  
  .social-links {
    justify-content: center;
  }
  
  .footer-newsletter {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer-newsletter .newsletter-form {
    width: 100%;
    flex-direction: column;
  }
  
  .footer-newsletter input[type="email"] {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .footer-newsletter .btn {
    width: 100%;
  }

  .footer-logo-inline {
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.newsletter-cta-icon {
  font-size: 32px;
  margin-bottom: 0;
  margin-right: 15px;
  opacity: 0.9;
}

.newsletter-cta-title {
  font-family: 'Roboto Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: none; /* Hide title as per request, keeping icon only */
}

.newsletter-cta-desc {
  display: none; /* Hide description as per request */
}

.newsletter-cta-btn {
  background-color: white;
  color: var(--primary-color);
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  font-size: 12px;
  transition: all 0.2s;
  display: inline-block;
  border: 1px solid white;
  white-space: nowrap;
}

.newsletter-cta-btn:hover {
  background-color: var(--light-gray);
  transform: scale(1.05);
}

/* Responsive Styles */
@media (max-width: 992px) {
  .featured-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .featured-content {
    display: contents; /* Allows children to participate in parent flex/grid */
  }

  .featured-title {
    order: 1;
    margin-bottom: 15px;
  }

  .featured-excerpt {
    order: 2;
    margin-bottom: 20px;
  }

  .featured-image {
    order: 3;
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
  }
  
  .featured-meta {
    order: 4;
    margin-bottom: 20px;
  }

  .read-more {
    order: 5;
  }

  /* Reset padding from previous override since display: contents removes the box */
  .featured-content {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .banner-container {
    grid-template-columns: 1fr;
  }

.taxonomy-band-carousel {
    position: relative;
    width: 100%;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    display: none;
}

  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .carousel-btn:hover {
    opacity: 1;
  }

  .carousel-btn.prev {
    left: 0;
  }

  .carousel-btn.next {
    right: 0;
  }
  
  .carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  
}

/* Mega menu structure (hidden by default; toggled via JS later) */
.taxonomy-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 8px 20px rgba(0,0,0,0.08); z-index: 20000; }
.taxonomy-mega-content { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px; }
.taxonomy-mega-col h4 { font-family: 'Roboto Mono', monospace; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--secondary-color); margin-bottom: 10px; }
.taxonomy-mega-col a { display: block; padding: 6px 0; color: var(--text-color); text-decoration: none; font-family: 'Roboto Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border-color); }
.taxonomy-mega-col a:last-child { border-bottom: none; }
.taxonomy-mega-col a:hover { color: var(--primary-color); background-color: var(--light-gray); }
.taxonomy-mega-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border: 1px solid var(--border-color); background: #fff; }
.taxonomy-mega-close::before { content: "\00d7"; display: block; width: 100%; height: 100%; line-height: 22px; text-align: center; font-size: 18px; color: var(--text-color); }
.taxonomy-mega-close:hover { background: var(--light-gray); }
.taxonomy-mega-close:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

@media (max-width: 768px) {
  .taxonomy-band-title { display: none !important; }
  .taxonomy-band-nav { display: none !important; }
  .taxonomy-browse-all { display: inline-block; }
  .taxonomy-mega.is-open { display: block; }
  .taxonomy-mega { position: fixed; inset: 0; top: 0; border: none; box-shadow: none; }
  .taxonomy-mega-content { grid-template-columns: 1fr; padding: 24px; overflow-y: auto; height: calc(100vh - var(--header-height, 60px)); background: #fff; margin-top: var(--header-height, 60px); }
  .taxonomy-mega-close { position: fixed; top: calc(16px + var(--header-height, 60px)); right: 16px; z-index: 20001; }
}

/* Ensure mobile hide takes precedence over later generic styles */
@media (max-width: 768px) {
  .taxonomy-band-nav { display: none !important; }
}

@media (max-width: 768px) {
  .taxonomy-band .taxonomy-band-inner { justify-content: center !important; }
  .taxonomy-browse-all {
    display: block;
    width: fit-content;
    font-size: 17px;
    padding: 12px 20px;
    margin: 0 auto;
    text-align: center;
    min-width: 240px;
    white-space: nowrap;
  }
}


.articles-grid .article-author { display: none; }
.articles-grid .article-author .author-avatar { display: none; }

.banner-section { padding: 40px 0; background-color: var(--light-gray); margin: 40px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.banner-section { position: relative; z-index: 0; }
.banner-container { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; 
  align-items: stretch;
  width: 100%;
}
.banner { width: 100%; height: 90px; background-color: white; border-radius: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); position: relative; transition: transform 0.3s; border: 1px solid var(--border-color); flex-shrink: 0; }
.banner:hover { transform: translateY(-5px); }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 16px; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); color: #fff; }
.banner-title { font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.banner-desc { font-family: 'Roboto', sans-serif; font-size: 13px; opacity: 0.9; }

.banner-carousel-wrapper {
  position: relative;
  width: 100%;
}

  .banner-carousel-wrapper .carousel-btn { display: none; }

@media (max-width: 992px) {
  .banner-carousel-wrapper .carousel-btn {
    display: flex;
  }
  
  .banner-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
  }
  
  .banner-container::-webkit-scrollbar {
    display: none;
  }
  
  .banner, .newsletter-cta-box {
    width: 100%;
    min-width: 100%; /* Show one element at a time */
    margin-right: 0;
  }
}

.categories { padding: 60px 0; }
.section-title { font-family: 'Roboto Mono', monospace; font-size: 36px; line-height: 1.2; margin-bottom: 24px; text-align: center; color: var(--primary-color); font-weight: 700; text-transform: uppercase; letter-spacing: -1px; }
.search-bar { display: flex; width: 100%; gap: 12px; margin: 16px 0 24px; }
.search-bar input[type="search"] { flex: 1; height: 44px; padding: 10px 14px; border: 1px solid var(--border-color); font-family: 'Roboto', sans-serif; font-size: 16px; }
.search-bar .btn { height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; }
@media (max-width: 768px) {
  .search-bar { gap: 8px; }
  .search-bar input[type="search"] { height: 44px; }
  .search-bar .btn { width: 56px; }
}
.section-subtitle { text-align: center; color: var(--dark-gray); margin-bottom: 28px; max-width: 700px; margin-left: auto; margin-right: auto; font-family: 'Roboto', sans-serif; }

.category-tabs { display: flex; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.tab { padding: 8px 16px; margin: 0 8px 8px 0; background-color: white; border: 1px solid var(--border-color); border-radius: 0; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 14px; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.4px; }
.tab.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.tab:hover { background-color: var(--light-gray); }
.tab.active:hover { background-color: var(--primary-color); }

/* Category band (directory-like navigation) */
/* Removed category band styles (migrated to header dropdown) */

.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }
.article-card { background-color: white; border-radius: 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s; display: flex; flex-direction: column; border: 1px solid var(--border-color); }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.article-image { height: 200px; overflow: hidden; position: relative; }
.article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.article-card:hover .article-image img { transform: scale(1.05); }
.article-category { position: absolute; top: 15px; left: 15px; padding: 5px 12px; border-radius: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--primary-color); color: white; font-family: 'Roboto Mono', monospace; }
.article-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.article-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--primary-color); font-family: 'Roboto Mono', monospace; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.5px; }
.article-excerpt { font-size: 15px; color: var(--dark-gray); margin-bottom: 20px; flex-grow: 1; font-family: 'Roboto', sans-serif; }
.article-meta { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--dark-gray); border-top: 1px solid var(--border-color); padding-top: 15px; }
.read-more { color: var(--primary-color); font-weight: 600; display: inline-flex; align-items: center; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.read-more i { margin-left: 5px; }

/* All articles link */
.all-articles { display: flex; justify-content: flex-end; margin-top: 24px; }
.all-articles-link { display: inline-flex; align-items: center; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: var(--primary-color); text-decoration: none; border: 1px solid var(--border-color); padding: 10px 16px; background-color: #fff; }
.all-articles-link i { margin-left: 8px; }
.all-articles-link:hover { border-color: var(--primary-color); }
.all-articles-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

a:focus-visible, button:focus-visible, .btn:focus-visible, .share-link:focus-visible, nav ul li a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.ads-section { padding: 60px 0; background-color: var(--light-gray); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.ads-container { display: flex; justify-content: space-between; gap: 20px; }
.ad-banner { flex: 1; background-color: white; border-radius: 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); height: 250px; position: relative; transition: transform 0.3s; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.ad-banner:hover { transform: translateY(-5px); }
.ad-image { height: 70%; overflow: hidden; }
.ad-image img { width: 100%; height: 100%; object-fit: cover; }
.ad-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ad-title { font-family: 'Roboto Mono', monospace; font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; }
.ad-desc { font-size: 14px; color: var(--dark-gray); font-family: 'Roboto', sans-serif; }
.ad-label { position: absolute; top: 15px; right: 15px; padding: 4px 8px; border-radius: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--secondary-color); color: white; font-family: 'Roboto Mono', monospace; }

.article-page { padding: 40px 0; }
.article-header { margin-bottom: 40px; }
.article-category { display: inline-block; padding: 6px 14px; border-radius: 0; font-size: 14px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--primary-color); color: white; font-family: 'Roboto Mono', monospace; }
.article-title.page-title { font-size: 42px; line-height: 1.2; letter-spacing: -1.5px; font-family: 'Roboto Mono', monospace; font-weight: 700; text-transform: uppercase; }
.article-meta.page-meta { display: flex; align-items: center; color: var(--dark-gray); font-size: 16px; margin-bottom: 30px; flex-wrap: wrap; gap: 14px; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.article-meta.page-meta i { margin-right: 6px; }
.article-author-name { font-weight: 600; margin-right: 20px; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary-color); }

.article-image.page-image { width: 100%; height: 450px; overflow: hidden; border-radius: 0; margin-bottom: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid var(--border-color); }
.article-image.page-image img { width: 100%; height: 100%; object-fit: cover; }

.article-content.page-content { font-size: 18px; line-height: 1.8; margin-bottom: 40px; font-family: 'Roboto', sans-serif; }
.article-content.page-content p { margin-bottom: 20px; }
.article-content.page-content h2 { font-family: 'Roboto Mono', monospace; font-size: 30px; line-height: 1.25; margin: 28px 0 16px; color: var(--primary-color); font-weight: 700; text-transform: uppercase; letter-spacing: -0.5px; }
.article-content.page-content h3 { font-family: 'Roboto Mono', monospace; font-size: 22px; line-height: 1.3; margin: 24px 0 12px; color: var(--secondary-color); font-weight: 700; text-transform: uppercase; letter-spacing: -0.25px; }
.article-content.page-content ul, .article-content.page-content ol { margin-left: 20px; margin-bottom: 20px; }
.article-content.page-content li { margin-bottom: 12px; }
.article-content.page-content blockquote { border-left: 4px solid var(--primary-color); padding-left: 20px; margin: 30px 0; font-style: italic; color: var(--dark-gray); font-size: 18px; background-color: var(--light-gray); padding: 20px; border-radius: 0; font-family: 'Roboto', sans-serif; }
.article-content.page-content .highlight { background-color: rgba(26, 58, 95, 0.1); padding: 2px 5px; border-radius: 0; font-weight: 600; }

.article-tags { display: flex; flex-wrap: wrap; margin-bottom: 40px; }
.tag { display: inline-block; padding: 6px 12px; background-color: var(--light-gray); border-radius: 0; margin-right: 10px; margin-bottom: 10px; font-size: 14px; color: var(--primary-color); transition: all 0.3s; border: 1px solid var(--border-color); font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.tag:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }

.related-articles { margin-top: 60px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.related-card { background-color: white; border-radius: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s; border: 1px solid var(--border-color); }
.related-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.related-image { height: 180px; overflow: hidden; position: relative; }
.related-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.related-card:hover .related-image img { transform: scale(1.05); }
.related-category { position: absolute; top: 15px; left: 15px; padding: 5px 12px; border-radius: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--secondary-color); color: white; font-family: 'Roboto Mono', monospace; }
.related-content { padding: 20px; }
.related-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--primary-color); font-family: 'Roboto Mono', monospace; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.5px; }

.comments-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border-color); }
.comment-form { background-color: var(--light-gray); padding: 30px; border-radius: 0; margin-bottom: 40px; border: 1px solid var(--border-color); }
.comment-form h3 { font-family: 'Roboto Mono', monospace; font-size: 24px; margin-bottom: 20px; color: var(--primary-color); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-color); font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 0; font-family: 'Roboto', sans-serif; font-size: 16px; transition: border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--primary-color); border-color: var(--primary-color); }
.form-group textarea { height: 120px; resize: vertical; }
.comments-list { margin-top: 40px; }
.comment { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; margin-bottom: 15px; }
.comment-avatar { width: 50px; height: 50px; border-radius: 0; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 15px; font-size: 20px; border: 1px solid var(--border-color); font-family: 'Roboto Mono', monospace; text-transform: uppercase; }
.comment-info { flex: 1; }
.comment-author { font-weight: 600; margin-bottom: 5px; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.comment-date { font-size: 14px; color: var(--dark-gray); }
.comment-content { font-size: 16px; line-height: 1.6; font-family: 'Roboto', sans-serif; }

.share-section { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

/* Center column widths for article page to match home readability */
.article-header,
.article-image.page-image,
.article-content.page-content,
.article-tags,
.share-section,
.related-articles,
.comments-section { margin-left: auto; margin-right: auto; }
.share-title { font-family: 'Roboto Mono', monospace; font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; }
.share-links { display: flex; }
.share-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0; background-color: var(--light-gray); margin-right: 10px; transition: all 0.3s; color: var(--primary-color); border: 1px solid var(--border-color); }
.share-link:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.share-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

footer { background-color: var(--secondary-color); color: white; padding: 50px 0 20px; margin-top: 60px; }
.footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 20px; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); padding: 25px 30px; border-radius: 0; margin-bottom: 40px; }
.footer-newsletter h3 { font-family: 'Roboto Mono', monospace; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 5px 0; color: #fff; }
.footer-newsletter p { margin: 0; color: #bdc3c7; font-size: 14px; }
.footer-newsletter .newsletter-form { display: flex; align-items: center; gap: 10px; margin: 0; flex-grow: 1; justify-content: flex-end; }
.footer-newsletter input[type="email"] { width: 300px; max-width: 100%; padding: 12px 15px; border: 1px solid rgba(255,255,255,0.25); background-color: rgba(255,255,255,0.1); color: #fff; border-radius: 0; }
.footer-newsletter input[type="email"]:focus { outline: 2px solid var(--primary-color); border-color: var(--primary-color); }
.footer-newsletter input::placeholder { color: #bdc3c7; }

.footer-newsletter .btn { padding: 12px 20px; font-size: 14px; white-space: nowrap; }

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.footer-section h3 {
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 12px;
}

.footer-section ul li a {
  color: #bdc3c7;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
  font-family: 'Roboto', sans-serif;
}

.footer-section ul li a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.footer-section p {
  color: #bdc3c7;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.social-links { display: flex; gap: 10px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0; background-color: rgba(255,255,255,0.1); margin-right: 0; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.2); font-size: 20px; color: white; text-decoration: none; }
.social-links a:hover { background-color: var(--primary-color); border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-decoration: none; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: #bdc3c7; font-family: 'Roboto', sans-serif; }

.industrial-border { border: 1px solid var(--border-color); }
.industrial-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.industrial-text { font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 992px) {
  .footer-content { 
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .footer-section {
    margin-bottom: 20px;
    width: 100%;
  }
  .footer-newsletter { flex-direction: column; align-items: center; }
  .footer-newsletter h3, .footer-newsletter p {
    text-align: center;
  }
  .footer-newsletter .newsletter-form { width: 100%; justify-content: center; margin-top: 15px; }
  .footer-newsletter input[type="email"] { width: 100%; }
  .newsletter-container { flex-direction: column; }
  .newsletter-content { padding-right: 0; margin-bottom: 30px; text-align: center; }
  .newsletter-form { margin: 0 auto; }
  .featured-image { height: 300px; margin-bottom: 30px; }
  .footer-logo-inline {
    margin: 0 auto 16px auto;
  }
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* Removed conflicting header/nav styles that broke hamburger menu */
  /* Removed banner height override to maintain 200px consistency */
  
  .hero { min-height: 300px; padding: 18px 20px; }
  .hero h1 { font-size: 28px; margin-bottom: 10px; }
  .hero p { font-size: 15px; margin-bottom: 10px; }
  .hero .btn, .hero-stats { display: none; }
  
  .articles-grid { grid-template-columns: 1fr; }
  
  .hero-stats { flex-wrap: wrap; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-right: 0; padding-bottom: 15px; margin-bottom: 15px; }
  
  .featured-title { font-size: 28px; }
  .article-title.page-title { font-size: 30px; }
  .article-image.page-image { height: 280px; }
  .related-grid { grid-template-columns: 1fr; }
  .banner-title { font-size: 16px; }
  .banner-desc { font-size: 12px; }
  
  /* Fix for taxonomy bar mobile issues */
  .taxonomy-band-nav { display: flex; flex-direction: column; width: 100%; }
  .taxonomy-item { width: 100%; margin-bottom: 5px; }
  .taxonomy-link { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; }
  .taxonomy-item.has-dropdown .taxonomy-dropdown { 
    position: static; 
    display: none; 
    width: 100%; 
    box-shadow: none; 
    border-top: none; 
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    margin-top: 0;
  }
  /* Enable click-based toggle instead of hover on mobile */
  .taxonomy-item.has-dropdown.is-open .taxonomy-dropdown { display: block; }
  
  /* Fix for button fonts on mobile */
  .btn, button, input[type="submit"], input[type="button"], .taxonomy-link {
    font-family: 'Roboto Mono', monospace !important;
    -webkit-appearance: none;
    appearance: none;
  }
}

@media print {
  * { box-shadow: none !important; text-shadow: none !important; }
  body { background: #fff; color: #000; }
  header { position: static; box-shadow: none; }
  .hero { background: none; color: #000; height: auto; }
  nav ul li a:after { display: none; }
  .banner, .article-card, .related-card, .ad-banner { box-shadow: none; }
  footer { background: #fff; color: #000; }
}
/* Removed taxonomy band styles (migrated to header dropdown) */
/* Taxonomy band restored with dropdowns */
.taxonomy-band { padding: 14px 0; background-color: var(--light-gray); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); position: relative; z-index: 3; }
.taxonomy-band .container { position: relative; z-index: 3; }
.taxonomy-band-carousel { position: relative; z-index: 3; }
.taxonomy-band-inner { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.taxonomy-band-title { font-family: 'Roboto Mono', monospace; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary-color); }
.taxonomy-band-nav { display: flex; flex-wrap: wrap; gap: 8px 14px; position: relative; z-index: 3; overflow: visible; }
.taxonomy-item { 
  position: relative;
  z-index: 1;
}

.taxonomy-item.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }

.taxonomy-item:hover { z-index: 10000; }
.taxonomy-link { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px dashed var(--border-color); border-radius: 0; text-decoration: none; color: var(--primary-color); font-family: 'Roboto Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; background-color: #fff; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.taxonomy-link:hover { border-color: var(--primary-color); color: var(--secondary-color); background-color: var(--light-gray); }
.taxonomy-item.has-dropdown { padding-bottom: 4px; }
.taxonomy-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.taxonomy-link.is-active { border-color: var(--primary-color); background-color: var(--primary-color); color: #fff; }
.taxonomy-item.has-dropdown .taxonomy-dropdown { position: absolute; top: 100%; left: 0; min-width: 200px; background-color: #fff; border: 1px solid var(--border-color); box-shadow: 0 8px 20px rgba(0,0,0,0.08); display: none; z-index: 10000; margin-top: -2px; }
.taxonomy-item.has-dropdown:hover .taxonomy-dropdown { display: block; }
.taxonomy-item.has-dropdown .taxonomy-dropdown a { display: block; padding: 8px 12px; color: var(--text-color); text-decoration: none; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.taxonomy-item.has-dropdown .taxonomy-dropdown a:last-child { border-bottom: none; }
.taxonomy-item.has-dropdown .taxonomy-dropdown a:hover { background-color: var(--light-gray); color: var(--primary-color); }
.taxonomy-item.has-dropdown .taxonomy-dropdown a.is-active { background-color: var(--light-gray); color: var(--primary-color); font-weight: 700; }

/* Active styles for header dropdown items */
.menu-item.has-dropdown .dropdown a.is-active { background-color: var(--light-gray); color: var(--primary-color); font-weight: 700; }
.taxonomy-item.has-dropdown .taxonomy-dropdown a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.taxonomy-item:hover { z-index: 10000; }
/* Logo fix for WordPress custom logo output */
.logo-wrapper {
    display: block;
    max-width: 100%;
    height: 30px;
}

.logo-wrapper a {
    display: block;
    height: 100%;
}

.logo-wrapper img {
    height: 30px !important;
    width: auto !important;
    display: block !important;
    max-width: none !important;
}

.logo .custom-logo-link, 
.logo a {
    display: block !important;
    max-width: 100% !important;
}

.logo img, 
.logo .custom-logo, 
.logo .custom-logo-link img,
.custom-logo-link img,
.logo > a > img,
img.custom-logo { 
    height: 30px !important; 
    width: auto !important; 
    display: block !important; 
    margin-bottom: 3px !important; 
    max-width: 100% !important; 
    object-fit: contain !important;
}

/* Force header layout structure */
.header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Ensure nav doesn't break layout */
.main-navigation {
    display: block !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.main-navigation ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Navigation styles matching mockup */
.main-navigation ul li {
    margin-left: 30px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    list-style: none !important;
}

.main-navigation ul li a {
    text-decoration: none !important;
    color: #333333 !important; /* Match mockup color exactly */
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: color 0.3s !important;
    position: relative !important;
    font-family: 'Roboto Mono', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Override general link colors specifically for nav to ensure priority */
.main-navigation a {
    color: #333333 !important;
}

.main-navigation a:visited {
    color: #333333 !important;
}

.main-navigation a:hover,
.main-navigation ul li a:hover {
    color: var(--primary-color) !important;
}

/* Add underline effect */
.main-navigation ul li a:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s;
}

.main-navigation ul li a:hover:after {
    width: 100%;
}

/* Current menu item state */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    color: var(--primary-color) !important;
}

.main-navigation ul li.current-menu-item > a:after,
.main-navigation ul li.current_page_item > a:after {
    width: 100%;
}

/* Override WP common styles that might interfere */
.site-header .site-branding {
    margin-bottom: 0 !important;
}

/* Fix layout alignment based on mockup */
.header-container {
    padding: 15px 0 !important;
    height: 75px !important;
    box-sizing: border-box !important;
}

/* Ensure logo wrapper is properly centered vertically */
.logo, .logo-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Adjust navigation alignment */
.main-navigation {
    height: 100%;
    display: flex !important;
    align-items: center !important;
}

.main-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap !important;
        height: auto !important;
    }
    
    .main-navigation {
        width: 100% !important;
        display: none !important; /* Hidden by default on mobile */
    }
    
    .main-navigation.toggled {
        display: block !important;
    }
    
    .main-navigation ul {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .main-navigation ul li {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }
    
    /* Fix navigation color on mobile */
    .main-navigation a,
    .main-navigation ul li a {
        color: #333333 !important;
    }
}
.footer-logo { max-width: 453px; width: 100%; height: auto; display: block; margin-bottom: 32px; }

@media (max-width: 768px) {
  .footer-logo { margin-left: auto; margin-right: auto; width: auto; max-width: 100%; }
  .footer-logo-wrapper { margin:0 auto;}
}

@media (min-width: 769px) {
  .footer-logo { max-width: 250px; }
}

.footer-logo-inline { display: block; height: auto; width: calc(100% - 10px); max-width: 100%; margin-bottom: 16px; }

@media (max-width: 768px) {
  .footer-logo-inline {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 100%;
  }
}

footer ul,
footer ol {
	margin: 0;
}

/* Newsletter form (Contact Form 7 + fallback placeholder) */
.newsletter-form .wpcf7,
.newsletter-form .wpcf7 form {
	width: 100%;
	margin: 0;
}

.cf7-placeholder,
.cf7-newsletter-row {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: flex-end;
	align-items: center;
}

.cf7-newsletter-row p {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
}

@media (min-width: 993px) {
	.cf7-newsletter-row p {
		position: relative;
		text-align: right;
		width: auto;
		margin-left: auto;
	}

	.newsletter-form .wpcf7-spinner {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		pointer-events: none;
	}
}

.cf7-newsletter-row p br {
	display: none;
}

.cf7-newsletter-row .wpcf7-form-control-wrap {
	width: 300px;
	max-width: 100%;
}

.cf7-placeholder input[type="email"],
.cf7-newsletter-row input[type="email"] {
	width: 100%;
	max-width: 100%;
	padding: 12px 15px;
	border: 1px solid rgba(255,255,255,0.25);
	background-color: rgba(255,255,255,0.1);
	color: #fff;
	border-radius: 0;
}

.cf7-placeholder input[type="email"]:focus,
.cf7-newsletter-row input[type="email"]:focus {
	outline: 2px solid var(--primary-color);
	border-color: var(--primary-color);
}

.cf7-placeholder input::placeholder,
.cf7-newsletter-row input::placeholder {
	color: #bdc3c7;
}

.newsletter-form .wpcf7-submit,
.cf7-placeholder .btn {
	padding: 12px 20px;
	font-size: 14px;
	white-space: nowrap;
	border: 1px solid var(--primary-color);
	background-color: var(--primary-color);
	color: #fff;
	cursor: pointer;
	transition: all 0.3s;
}

.newsletter-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.newsletter-form .wpcf7-submit:hover,
.cf7-placeholder .btn:hover {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}

.cf7-newsletter-consent {
	margin-top: 10px;
	color: #bdc3c7;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
}

.cf7-newsletter-consent p {
	margin: 0;
}

.cf7-newsletter-consent .wpcf7-list-item {
	margin: 0;
}

.cf7-newsletter-consent .wpcf7-list-item label {
	display: inline-flex;
	gap: 8px;
	align-items: flex-start;
}

.cf7-newsletter-consent input[type="checkbox"] {
	margin: 2px 0 0;
}

.cf7-newsletter-consent a {
	color: #fff;
}

.newsletter-form .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
}

.newsletter-form .wpcf7-not-valid-tip {
	color: #fff;
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 992px) {
	.newsletter-form .cf7-newsletter {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.newsletter-form .cf7-newsletter-row,
	.newsletter-form .cf7-newsletter-consent {
		display: contents;
	}

	.newsletter-form .cf7-newsletter-row p,
	.newsletter-form .cf7-newsletter-consent p {
		display: contents;
	}

	.newsletter-form .cf7-newsletter-row .wpcf7-form-control-wrap {
		grid-row: 1;
		grid-column: 1;
	}

	.newsletter-form .cf7-newsletter-consent label {
		grid-row: 2;
		grid-column: 1;
	}

	.newsletter-form .wpcf7-submit {
		grid-row: 3;
		grid-column: 1;
	}

	.newsletter-form .wpcf7-spinner {
		grid-row: 4;
		grid-column: 1;
		justify-self: center;
	}

	.cf7-placeholder,
	.cf7-newsletter-row {
		flex-direction: column;
		width: 100%;
	}

	.cf7-newsletter-row p {
		flex-direction: column;
		align-items: stretch;
	}

	.cf7-newsletter-row .wpcf7-form-control-wrap {
		width: 100%;
	}

	.newsletter-form .wpcf7-submit,
	.cf7-placeholder .btn {
		width: 100%;
	}

	.cf7-newsletter-consent {
		text-align: left;
	}
}

/* Post Navigation Styling */
.site-main .post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 0 20px; /* Align with container padding */
	max-width: 1200px; /* Align with container max-width */
	margin-left: auto;
	margin-right: auto;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1;
	display: flex;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: flex;
	flex-direction: column;
	padding: 15px 20px;
	background-color: #fff;
	border: 1px solid var(--border-color);
	text-decoration: none;
	transition: all 0.3s;
	width: 100%;
	height: 100%;
	justify-content: center;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	border-color: var(--primary-color);
	background-color: var(--light-gray);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.post-navigation .nav-subtitle {
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 5px;
	font-weight: 700;
}

.post-navigation .nav-title {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: var(--text-color);
	font-weight: 500;
	line-height: 1.4;
}

.post-navigation .nav-next {
	text-align: right;
	justify-content: flex-end;
}

.post-navigation .nav-next a {
	align-items: flex-end;
}

@media (max-width: 768px) {
	.site-main .post-navigation {
		padding: 0 20px;
	}
	
	.post-navigation .nav-links {
		flex-direction: column;
	}
	
	.post-navigation .nav-next {
		text-align: left;
		justify-content: flex-start;
	}
	
	.post-navigation .nav-next a {
		align-items: flex-start;
	}
}