/*
Theme Name: PASTO Recovered
Description: Tema independiente de recuperación para el portfolio PASTO, sin dependencias heredadas.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pasto-recovered
*/

:root {
	--pasto-accent: #e5ae47;
	--pasto-ink: #444;
	--pasto-muted: #8d8d8d;
	--pasto-readable-muted: #666;
	--pasto-gap: 17px;
	--pasto-header-height: 112px;
	--pasto-admin-offset: 0px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--pasto-header-height) + var(--pasto-admin-offset) + 20px); }
body {
	margin: 0;
	padding-top: var(--pasto-header-height);
	background: #fff;
	color: var(--pasto-ink);
	font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}
body.admin-bar { --pasto-admin-offset: 32px; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--pasto-accent); }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; vertical-align: middle; }
figure { margin: 0; }
h1, h2, h3, h4, .menu, .portfolio-filters {
	font-family: Lato, "Open Sans", system-ui, sans-serif;
	line-height: 1.3;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; margin: 0 0 1.2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.2em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pasto-ink); outline-offset: 4px; }
:target { scroll-margin-top: calc(var(--pasto-header-height) + 24px); }
.screen-reader-text, .skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: calc(var(--pasto-admin-offset) + 12px);
	left: 12px;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: #222;
}

/* White fixed header, independently assigned left and right menus. */
.site-header {
	position: fixed;
	inset: var(--pasto-admin-offset) 0 auto;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid #eee;
}
.header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	width: calc(100% - 48px);
	max-width: 1534px;
	min-height: var(--pasto-header-height);
	margin: auto;
}
.site-brand { grid-column: 2; grid-row: 1; display: block; padding: 12px 0; }
.site-brand img { display: block; width: 150px; max-height: 68px; object-fit: contain; }
.navigation-pair { display: contents; }
.menu-left { grid-column: 1; grid-row: 1; }
.menu-right { grid-column: 3; grid-row: 1; }
.menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 22px;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: .875rem;
	font-weight: 700;
}
.menu-right > .menu { justify-content: flex-end; }
.menu li { position: relative; }
.menu a { display: block; padding: 12px 0; text-decoration: none; }
.menu a:hover, .menu a:focus-visible, .menu .current-menu-item > a, .menu .current_page_item > a {
	text-decoration: underline;
	text-decoration-color: var(--pasto-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}
.menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 180px;
	max-width: 280px;
	margin: 0;
	padding: 8px 18px;
	list-style: none;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 6px 15px #0001;
}
.menu-right .sub-menu { left: auto; right: 0; }
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { display: block; }
.menu-toggle {
	align-items: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--pasto-ink);
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.hamburger { display: grid; gap: 4px; width: 20px; }
.hamburger span { display: block; height: 2px; background: currentColor; }

.site-main { width: calc(100% - 48px); max-width: 1534px; min-height: 55vh; margin: 36px auto 64px; }
.portfolio-intro { max-width: 900px; margin: 0 auto 32px; }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; font-size: .95rem; }
.portfolio-filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 2px; border-bottom: 3px solid transparent; text-decoration: none; }
.portfolio-filters a:hover, .portfolio-filters [aria-current="true"] { border-bottom-color: var(--pasto-accent); }
.portfolio-filters [aria-current="true"] { font-weight: 700; }
.portfolio-count { color: var(--pasto-readable-muted); font-size: .85rem; margin-bottom: 22px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px var(--pasto-gap); }
.portfolio-card { min-width: 0; }
.card-link { display: block; text-decoration: none; }
.card-image { aspect-ratio: 500 / 340; overflow: hidden; background: #f5f5f5; }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.card-link:hover img { transform: scale(1.025); }
.card-link h2 { margin: 14px 0 6px; font-size: 1.125rem; font-weight: 700; }
.card-link:hover h2 { text-decoration: underline; text-decoration-color: var(--pasto-accent); text-decoration-thickness: 2px; }
.card-excerpt { margin: 0; color: var(--pasto-readable-muted); font-size: .9rem; line-height: 1.7; }
.image-placeholder { display: grid; height: 100%; place-items: center; color: var(--pasto-muted); font: 700 2rem Lato, system-ui, sans-serif; letter-spacing: .15em; }

.page-heading, .project-heading { margin: 0 0 32px; }
.content-page { max-width: 960px; margin: 0 auto 48px; }
.entry-content { min-width: 0; }
.entry-content > :first-child { margin-top: 0; }
.entry-content::after { content: ""; display: block; clear: both; }
.entry-content a, .project-info a, .site-footer a { text-decoration-color: var(--pasto-accent); text-decoration-thickness: 2px; }
.entry-content h2, .entry-content h3 { margin-top: 1.8em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--pasto-accent); }
.entry-content pre { overflow: auto; padding: 18px; background: #f5f5f5; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.5em; }
.entry-content td, .entry-content th { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }
.entry-content figure { margin-bottom: 1.5em; }
.entry-content figcaption { color: var(--pasto-readable-muted); font-size: .9rem; margin-top: 8px; }
.pasto-content-row, .pasto-content-column, .pasto-content-text { min-width: 0; }
.pasto-content-row { margin-bottom: 1.5em; }
.project-hero { margin: 0 0 36px; }
.project-featured { display: block; width: 100%; height: auto; }
.project-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 48px; margin-bottom: 40px; }
.project-info { border-top: 3px solid var(--pasto-accent); padding-top: 18px; }
.project-info h2 { margin-top: 0; }
.project-info dl { margin: 0 0 24px; }
.project-info dt { font-weight: 700; margin-top: 12px; }
.project-info dd { margin-left: 0; color: var(--pasto-readable-muted); }
.project-description { white-space: pre-line; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pasto-gap); }
.project-gallery:empty { display: none; }
.project-gallery img { display: block; width: 100%; height: auto; }
.project-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; border-top: 1px solid #ddd; margin-top: 48px; padding-top: 24px; font-size: .9rem; }
.project-navigation > :last-child { text-align: right; }
.project-navigation span { display: block; font-weight: 700; }
.project-navigation a { display: inline-block; padding: 8px 0; }
.page-links, .pagination { margin: 32px 0; }
.page-numbers, .post-page-numbers { display: inline-block; min-width: 44px; padding: 8px 12px; text-align: center; }
.page-numbers.current, .post-page-numbers.current { background: var(--pasto-accent); color: #222; }
.post-password-form input { max-width: 100%; padding: 10px; border: 1px solid #777; border-radius: 2px; }
.post-password-form input[type="submit"] { color: #222; background: var(--pasto-accent); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; width: calc(100% - 48px); max-width: 1534px; margin: 0 auto; padding: 24px 0; border-top: 1px solid #eee; color: var(--pasto-readable-muted); font-size: .85rem; }
.site-footer p { margin: 0; }

@media (max-width: 1000px) {
	.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.menu { gap: 4px 14px; }
}
@media (max-width: 900px) {
	:root { --pasto-header-height: 88px; }
	body { padding-top: 0; }
	.site-header { position: sticky; top: var(--pasto-admin-offset); }
	.header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
	.site-brand { grid-column: 1; justify-self: start; }
	.site-brand img { width: 124px; max-height: 60px; }
	.menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
	.navigation-pair { display: grid; grid-column: 1 / -1; grid-row: 2; padding-bottom: 16px; max-height: calc(100svh - 88px - var(--pasto-admin-offset)); overflow-y: auto; }
	.menu-left, .menu-right { grid-column: auto; grid-row: auto; }
	.menu, .menu-right > .menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.menu a { min-height: 44px; padding: 10px 4px; }
	.menu .sub-menu, .menu-right .sub-menu { display: block; position: static; min-width: 0; max-width: none; padding: 0 0 0 20px; border: 0; box-shadow: none; }
	.project-body { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 782px) {
	body.admin-bar { --pasto-admin-offset: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar { --pasto-admin-offset: 0px; }
	.site-main, .header-inner, .site-footer { width: calc(100% - 32px); }
	.site-main { margin-top: 24px; margin-bottom: 40px; }
	.portfolio-grid, .project-gallery { grid-template-columns: minmax(0, 1fr); }
	.portfolio-filters { gap: 4px 16px; }
	.project-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.project-navigation > a { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
	.project-navigation > :last-child { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}