/*
 * Keystone Almanac — 2026 design refresh for PA Travel & Tourism.
 * Loaded after the Salinger theme stylesheet; overrides its visual layer
 * while keeping the theme's layout grid and menu behavior intact.
 */

:root {
	--cream: #f6efe0;
	--card: #fffcf4;
	--pine: #17352a;
	--pine-soft: #24473a;
	--ink: #2c3a2e;
	--ink-soft: #5b6657;
	--rust: #b8461f;
	--rust-deep: #93371a;
	--amber: #d9992b;
	--hairline: rgba(23, 53, 42, 0.14);
	--shadow-soft: 0 1px 2px rgba(23, 53, 42, 0.06), 0 10px 30px -12px rgba(23, 53, 42, 0.25);
	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Karla", "Gill Sans", "Trebuchet MS", sans-serif;
}

/* ---------- Base canvas ---------- */

html {
	background: var(--cream);
}
body,
body.custom-font-enabled {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.7;
}
/* paper grain */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

#page.site {
	background: transparent;
	box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--pine);
	line-height: 1.2;
	letter-spacing: 0;
}

a,
.entry-content a,
.comment-content a {
	color: var(--rust);
	text-decoration-color: rgba(184, 70, 31, 0.4);
	text-underline-offset: 3px;
	transition: color 160ms ease;
}
a:hover,
a:focus,
.entry-content a:hover {
	color: var(--pine);
}

::selection {
	background: var(--amber);
	color: var(--pine);
}

/* ---------- Top bar ---------- */

.top-bar {
	background-color: var(--pine);
	color: var(--cream);
	border-bottom: none;
	border-top: 4px solid var(--amber);
	padding: 9px 0;
}
.top-bar a,
.top-bar .fa-search {
	color: rgba(246, 239, 224, 0.85);
	transition: color 160ms ease;
}
.top-bar a:hover,
.top-bar .fa-search:hover {
	color: var(--amber);
}
.boton-menu-movil {
	color: var(--cream);
}

/* ---------- Masthead ---------- */

.site-header {
	background: var(--card);
	border-top: none;
	border-bottom: 1px solid var(--hairline);
}
.site-header h1.site-title,
.site-header p.site-title {
	font-family: var(--font-display);
	font-weight: 800;
}
.site-title a {
	color: var(--pine);
	letter-spacing: -0.01em;
}
.site-title a:hover {
	color: var(--rust);
}
.site-header p.site-description {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--rust);
	letter-spacing: 0.01em;
}

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

.main-navigation-wrapper {
	max-width: 900px;
}
.main-navigation a {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--pine);
	background-image: linear-gradient(var(--rust), var(--rust));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 calc(100% - 2px);
	transition: background-size 220ms ease, color 160ms ease;
}
.main-navigation li a:hover,
.main-navigation li a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--rust);
	background-size: 100% 2px;
}
.main-navigation .sub-menu {
	background: var(--card);
	border: 1px solid var(--hairline);
	border-top: 3px solid var(--amber);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--shadow-soft);
}
.main-navigation .sub-menu a {
	background-image: none;
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 500;
	font-size: 15px;
	font-size: 1.5rem;
}

/* Mobile menu panel */
#menu-movil {
	background-color: var(--pine);
	color: var(--cream);
}
#menu-movil a {
	color: var(--cream);
}
#menu-movil a:hover {
	color: var(--amber);
}

/* ---------- Hero: postcard frame ---------- */

.header-image-wrapper {
	max-width: 1240px;
	max-width: 124rem;
	margin: 26px auto 6px;
	padding: 0 14px;
}
.header-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 8px solid var(--card);
	box-sizing: border-box;
	box-shadow: var(--shadow-soft);
	filter: saturate(1.05);
}

/* ---------- Content cards ---------- */

.widget-area aside,
.site-content article,
.archive-header,
.site-content .nav-single,
.comment-respond,
.author-info-box,
.wrapper-with-padding {
	background-color: var(--card);
	border: 1px solid var(--hairline);
	border-radius: 16px;
	box-shadow: var(--shadow-soft);
}

h1.entry-title,
.entry-title.page-title {
	font-size: clamp(30px, 4.5vw, 44px);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 0.35em;
}
.entry-header {
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 18px;
}
.entry-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--rust) 0 60%, var(--amber) 60% 100%);
}

.entry-content h2 {
	font-size: 26px;
	font-size: 2.6rem;
	margin: 1.4em 0 0.5em;
}
.entry-content h3 {
	font-size: 21px;
	font-size: 2.1rem;
	margin: 1.2em 0 0.4em;
}
.entry-content li {
	margin-bottom: 0.6em;
}
.entry-content strong {
	color: var(--pine);
}

/* Tables (committees, councils) */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
	font-size: 1.5rem;
}
.entry-content td,
.entry-content th {
	border: none;
	border-bottom: 1px solid var(--hairline);
	padding: 9px 10px;
}
.entry-content tr:hover td {
	background: rgba(217, 153, 43, 0.08);
}

/* ---------- Widgets ---------- */

h3.widget-title,
h2.widget-title {
	background-color: transparent;
	padding: 0;
}
.widget-title,
h3.widget-title,
h2.widget-title,
.widget-area .widget h3.widget-title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 10px;
	margin-bottom: 14px;
}
.widget .widget-title-tab,
.widget-area .widget h3 .widget-title-tab {
	display: block;
	padding: 0 0 0 0;
	background: none;
	color: var(--ink-soft);
}
.widget-title-tab:before {
	content: none;
}
.wrapper-widget-area-footer .widget-title:after {
	background-color: var(--amber);
}
.widget-area .widget a {
	color: var(--pine);
	font-weight: 500;
}
.widget-area .widget a:hover {
	color: var(--rust);
}

/* Page-list widget: tidy two-column index */
.after-entry-content-widget-area .widget_pages > ul {
	columns: 2;
	column-gap: 32px;
	list-style: none;
	margin-left: 0;
}
.after-entry-content-widget-area .widget_pages li {
	break-inside: avoid;
	border-bottom: 1px dotted var(--hairline);
	padding: 5px 0;
}
.after-entry-content-widget-area .widget_pages ul.children {
	list-style: none;
	margin: 4px 0 0 14px;
}
.after-entry-content-widget-area .widget_pages ul.children li:last-child {
	border-bottom: none;
}

/* ---------- Gallery: postcard cards ---------- */

.gallery,
div[id^="gallery-"] {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 6px 0 10px !important;
}
.gallery .gallery-item,
div[id^="gallery-"] .gallery-item {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	text-align: center;
}
.gallery br,
div[id^="gallery-"] + br,
div[id^="gallery-"] br {
	display: none;
}
.gallery .gallery-icon img,
div[id^="gallery-"] img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 5px solid var(--card) !important;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(23, 53, 42, 0.18);
	opacity: 1;
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
}
.gallery .gallery-item:nth-child(odd) a:hover img,
div[id^="gallery-"] .gallery-item:nth-child(odd) a:hover img {
	transform: translateY(-4px) rotate(-1.2deg);
	box-shadow: 0 14px 26px -10px rgba(23, 53, 42, 0.4);
}
.gallery .gallery-item:nth-child(even) a:hover img,
div[id^="gallery-"] .gallery-item:nth-child(even) a:hover img {
	transform: translateY(-4px) rotate(1.2deg);
	box-shadow: 0 14px 26px -10px rgba(23, 53, 42, 0.4);
}
.gallery-caption,
.gallery .gallery-caption {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 14px;
	font-size: 1.4rem;
	color: var(--ink-soft);
	margin-top: 8px;
}

/* ---------- Forms & buttons ---------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
	background: var(--card);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	color: var(--ink);
	font-family: var(--font-body);
}
input:focus,
textarea:focus {
	outline: 2px solid var(--amber);
	outline-offset: 1px;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.read-more-link:hover,
.sticky-excerpt-label,
.paginacion a:hover,
.currenttext {
	background-color: var(--rust);
	color: #fffcf4;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem;
	border: none;
	border-radius: 999px;
	padding: 9px 18px;
	transition: background-color 160ms ease, transform 160ms ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--pine);
	transform: translateY(-1px);
}

.page-numbers.current,
.page-numbers:not(.dots):hover,
.widget-area .widget a.tag-cloud-link:hover,
.wrapper-widget-area-footer .tag-cloud-link:hover {
	background-color: var(--rust);
	color: #fffcf4 !important;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--pine);
	color: rgba(246, 239, 224, 0.85);
	border-top: 4px solid var(--amber);
	margin-top: 34px;
	padding: 30px 0;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.04em;
}
footer[role="contentinfo"] a {
	color: var(--amber);
}
footer[role="contentinfo"] a:hover {
	color: #fffcf4;
}

/* Scroll-to-top */
.ir-arriba {
	background-color: var(--rust);
	color: #fffcf4;
	border-radius: 999px 0 0 999px;
	box-shadow: var(--shadow-soft);
}
.ir-arriba:hover {
	background-color: var(--pine);
}

/* ---------- Calendar & misc chrome ---------- */

#wp-calendar a {
	color: var(--rust);
}
.sub-title a:hover,
.entry-title a:hover,
.entry-meta a:hover,
.site-content .nav-single a:hover,
.comments-area article header a:hover,
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: var(--rust);
}

/* ---------- Responsive & accessibility ---------- */

@media screen and (max-width: 720px) {
	.gallery,
	div[id^="gallery-"] {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.after-entry-content-widget-area .widget_pages > ul {
		columns: 1;
	}
	.header-image-wrapper {
		margin-top: 12px;
	}
	.header-image {
		border-width: 5px;
		border-radius: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gallery a:hover img,
	div[id^="gallery-"] a:hover img,
	button:hover,
	input[type="submit"]:hover {
		transform: none;
	}
}