/*
Theme Name: WikiPress Child
Theme URI: https://paloaltowiki.org/
Description: Palo Alto Wiki child theme for WikiPress. Gives the encyclopedia a Palo Alto identity — a redwood-and-sandstone palette drawn from El Palo Alto and the California landscape — and designs the homepage, articles, archives and 404 page on top of the parent's wiki structure. Avoids the "Palo Alto Networks" cybersecurity look entirely.
Author: PaloAltoWiki
Author URI: https://paloaltowiki.org/
Template: wikipress
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wikipress-child
*/

/* ============================================================
   Palo Alto Wiki — design layer over the WikiPress parent.

   The parent stylesheet is fully tokenised on --wikipress-*
   custom properties, so re-declaring those tokens here (this
   file loads last) re-skins every surface at once. Below the
   token block are targeted overrides for the handful of places
   the parent hard-codes its Wikipedia blue, and per-surface
   polish for the homepage, articles, archives and 404.
   ============================================================ */

/* ---- 1. Palette & tokens ---- */
:root {
	/* Palo Alto identity tokens. */
	--pa-canopy: #1b6b50;        /* El Palo Alto redwood canopy — primary */
	--pa-canopy-deep: #124d39;   /* hover / active */
	--pa-canopy-tint: #eef6f1;   /* soft green wash */
	--pa-bark: #8a5a2c;          /* redwood bark — warm accent */
	--pa-bark-deep: #6f4720;
	--pa-sand: #f3ead9;          /* sandstone */
	--pa-sand-line: #e7dcc4;
	--pa-sky: #eef4f3;           /* foothill haze */
	--pa-gold: #b8862f;          /* poppy / dry-grass accent */
	--pa-redlink: #a8321f;       /* unwritten-article + error red */
	--pa-ink: #1b1b18;
	--pa-paper: #f7f6f2;

	/* Re-skin the parent's tokens. */
	--wikipress-primary: var(--pa-canopy);
	--wikipress-primary-hover: var(--pa-canopy-deep);
	--wikipress-accent: #f1efe8;
	--wikipress-text: #22221f;
	--wikipress-text-light: #5a5750;
	--wikipress-border: #c9c2b4;
	--wikipress-border-light: #e7e2d8;
	--wikipress-bg: #ffffff;
	--wikipress-bg-off: var(--pa-paper);
	--wikipress-bg-header: #ffffff;
	--wikipress-bg-footer: #f4f2ec;
	--wikipress-heading: var(--pa-ink);

	/* A serif with a little more character than Georgia for headings,
	   falling back cleanly where it is unavailable. */
	--pa-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* ---- 2. Base ---- */
body {
	background-color: var(--wikipress-bg-off);
}

/* Links inside body copy get the redwood green + a restrained underline. */
.article-content a,
.entry-summary a {
	color: var(--wikipress-primary);
	text-decoration-color: color-mix(in srgb, var(--wikipress-primary) 35%, transparent);
	text-underline-offset: 2px;
}

.article-content a:hover,
.entry-summary a:hover {
	color: var(--wikipress-primary-hover);
	text-decoration-color: currentColor;
}

/* Consistent, visible keyboard focus — the parent leaves this to the UA. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.primary-menu a:focus-visible,
.toc-item a:focus-visible {
	outline: 2px solid var(--pa-canopy);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- 3. Header: redwood mark, locality, top accent ---- */
.site-header {
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--pa-sand-line);
	box-shadow: 0 1px 0 rgba(27, 107, 80, 0.04), 0 6px 24px rgba(27, 27, 24, 0.03);
}

/* A thin bark-to-canopy band across the very top of the site. */
.site-header::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--pa-bark) 0%, var(--pa-canopy) 60%, var(--pa-gold) 100%);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pa-branding-mark {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--pa-canopy);
	line-height: 0;
}

.pa-branding-mark svg {
	width: 34px;
	height: 34px;
	display: block;
}

.pa-branding-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-title {
	font-family: var(--pa-font-display);
	font-size: 1.4rem;
	letter-spacing: -0.01em;
}

/* Locality line under the wordmark — required branding, disambiguates the name. */
.pa-locality {
	margin: 2px 0 0;
	font-family: var(--wikipress-font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pa-bark);
}

/* Nav underline picks up the canopy green via the token; nudge weight. */
.primary-menu a {
	font-weight: 500;
}

/* ---- 4. Homepage ---- */
.wikipress-homepage {
	--wikipress-home-border: var(--pa-sand-line);
	--wikipress-home-border-soft: #efe9dc;
	--wikipress-home-ink: var(--pa-ink);
	--wikipress-home-muted: #5a5750;
	--wikipress-home-blue-soft: var(--pa-sky);
	--wikipress-home-green-soft: var(--pa-canopy-tint);
	--wikipress-home-shadow: 0 18px 48px rgba(27, 41, 33, 0.09);
	background: var(--wikipress-bg);
}

/* Hero: a warm paper-to-haze wash with a layered ridge line along the bottom,
   evoking the foothills behind Palo Alto rather than a flat blue panel. */
.wikipress-homepage .home-hero {
	position: relative;
	background:
		radial-gradient(1200px 380px at 78% -8%, rgba(184, 134, 47, 0.10), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--pa-sky) 100%);
	overflow: hidden;
}

.wikipress-homepage .home-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	opacity: 0.5;
	pointer-events: none;
	/* Two stylised ridge lines. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L180 44 L360 62 L540 30 L720 56 L900 26 L1080 52 L1260 34 L1440 58 L1440 90 L0 90 Z' fill='%231b6b50' fill-opacity='0.16'/%3E%3Cpath d='M0 82 L160 66 L320 78 L480 58 L640 76 L800 60 L960 80 L1120 62 L1280 78 L1440 66 L1440 90 L0 90 Z' fill='%238a5a2c' fill-opacity='0.14'/%3E%3C/svg%3E");
}

.wikipress-homepage .home-hero-content {
	position: relative;
	z-index: 1;
}

.home-hero-content h1 {
	font-family: var(--pa-font-display);
	letter-spacing: -0.015em;
}

/* Search field + submit on the hero. */
.homepage-search-field:focus {
	border-color: var(--pa-canopy);
	box-shadow: 0 0 0 3px rgba(27, 107, 80, 0.15);
	outline: none;
}

.homepage-search-submit {
	background: var(--pa-canopy);
	border-color: var(--pa-canopy);
}

.homepage-search-submit:hover,
.homepage-search-submit:focus {
	background: var(--pa-canopy-deep);
	border-color: var(--pa-canopy-deep);
}

/* Section headings: display serif with a short bark underline. */
.home-section-header h2,
.home-trust-intro h2 {
	font-family: var(--pa-font-display);
	position: relative;
	padding-bottom: 10px;
}

.home-section-header h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	border-radius: 2px;
	background: var(--pa-bark);
}

/* Featured hub cards. */
.home-hub-card {
	border-color: var(--pa-sand-line);
	border-top: 3px solid var(--pa-canopy);
	background:
		linear-gradient(180deg, var(--pa-canopy-tint) 0%, transparent 42px),
		var(--wikipress-bg);
}

.home-hub-card:hover {
	border-color: var(--pa-sand-line);
	border-top-color: var(--pa-bark);
	box-shadow: var(--wikipress-home-shadow);
}

.home-card-icon {
	color: var(--pa-canopy);
	background: var(--pa-canopy-tint);
}

.home-card-icon-trust {
	color: var(--pa-bark);
	background: var(--pa-sand);
}

.home-count,
.home-topic-count {
	color: var(--pa-bark-deep);
	background: var(--pa-sand);
}

/* Trending questions + recently updated lists. */
.home-list-icon {
	color: var(--pa-canopy);
	background: var(--pa-canopy-tint);
}

.home-question-item:hover,
.home-update-item:hover {
	border-color: var(--pa-sand-line);
	background: var(--pa-paper);
}

.home-question-item a:hover,
.home-update-item h3 a:hover {
	color: var(--pa-canopy-deep);
}

/* Browse-topics chips. */
.home-topic-link {
	border-color: var(--pa-sand-line);
}

.home-topic-link:hover,
.home-topic-link:focus {
	border-color: var(--pa-canopy);
	background: var(--pa-canopy-tint);
}

/* Editorial-trust band on sandstone. */
.home-editorial-trust {
	background: var(--pa-sand);
	border-top: 1px solid var(--pa-sand-line);
	border-bottom: 1px solid var(--pa-sand-line);
}

/* Quick links under the hero. */
.home-quick-links a {
	color: var(--pa-canopy-deep);
	border-color: var(--pa-sand-line);
}

.home-quick-links a:hover,
.home-quick-links a:focus {
	background: var(--pa-canopy);
	border-color: var(--pa-canopy);
	color: #fff;
}

/* ---- 5. Single posts & pages ---- */

/* Article title in the display serif, with a bark rule under the header. */
.article-title {
	font-family: var(--pa-font-display);
	letter-spacing: -0.015em;
}

.article-header {
	border-bottom: 2px solid var(--pa-sand-line);
	padding-bottom: 16px;
}

.article-meta a {
	color: var(--pa-canopy-deep);
}

/* Reading-time / meta dividers. */
.meta-divider {
	color: var(--pa-sand-line);
}

/* Body headings: quiet bark rule instead of grey, and the display serif. */
.article-content h2 {
	font-family: var(--pa-font-display);
	border-bottom: 1px solid var(--pa-sand-line);
}

.article-content h3 {
	font-family: var(--pa-font-display);
}

/* Blockquotes as a bark-marked aside. */
.article-content blockquote {
	border-left: 3px solid var(--pa-bark);
	background: var(--pa-sand);
	padding: 12px 18px;
	border-radius: 0 4px 4px 0;
	color: var(--pa-ink);
	font-style: normal;
}

/* Tables: warm header row. */
.article-content th {
	background: var(--pa-canopy-tint);
}

/* Infobox — the wiki's signature element. Canopy header, sandstone body. */
.infobox {
	border-color: var(--pa-sand-line);
	background: var(--wikipress-bg);
	box-shadow: 0 2px 10px rgba(27, 27, 24, 0.04);
	overflow: hidden;
	padding: 0;
}

.infobox-title {
	margin: 0;
	padding: 10px 14px;
	background: var(--pa-canopy);
	color: #fff;
	border-bottom: none;
	font-family: var(--pa-font-display);
	font-size: 1rem;
}

.infobox-table {
	padding: 0 14px 14px;
	display: block;
}

.infobox-table th,
.infobox-table td {
	border-bottom-color: var(--pa-sand-line);
}

.infobox-image {
	padding: 12px 14px 0;
}

/* Table of contents — bark accent on the active item. */
.toc-widget {
	border-color: var(--pa-sand-line);
	background: var(--wikipress-bg);
}

.toc-toggle:hover {
	background: var(--pa-canopy-tint);
}

.toc-item a:hover,
.toc-item a:focus {
	color: var(--pa-canopy-deep);
	background: var(--pa-canopy-tint);
}

.toc-item a.active {
	color: var(--pa-canopy-deep);
	border-left-color: var(--pa-bark);
}

/* References + related-terms sections. */
.article-references h2,
.article-related-terms h2 {
	font-family: var(--pa-font-display);
	border-bottom-color: var(--pa-sand-line);
}

.references-list li {
	margin-bottom: 6px;
}

.related-terms-list dt {
	color: var(--pa-canopy-deep);
	font-weight: 700;
}

/* Breadcrumbs. */
.breadcrumbs a {
	color: var(--pa-canopy-deep);
}

/* Post navigation (prev/next). */
.post-navigation a:hover .nav-title {
	color: var(--pa-canopy-deep);
}

/* ---- 6. Archives & search results ---- */

/* Page-header banner: sandstone panel with a bark rule. */
.page-header {
	background: linear-gradient(180deg, var(--pa-sand) 0%, var(--pa-paper) 100%);
	border: 1px solid var(--pa-sand-line);
	border-left: 4px solid var(--pa-canopy);
	border-radius: 8px;
	padding: 22px 24px;
	margin-bottom: 28px;
}

.page-title {
	font-family: var(--pa-font-display);
	margin: 0;
	letter-spacing: -0.01em;
}

.archive-description {
	margin-top: 8px;
	color: var(--wikipress-text-light);
	font-family: var(--wikipress-font-ui);
	font-size: 0.95rem;
}

/* Archive entry cards: override the parent's blue hover + accents. */
.archive-entry {
	border-color: var(--pa-sand-line);
}

.archive-entry:hover {
	border-color: rgba(27, 107, 80, 0.35);
	box-shadow: 0 12px 32px rgba(27, 41, 33, 0.09);
}

.entry-header .entry-title a:hover {
	color: var(--pa-canopy-deep);
}

.entry-meta a:hover {
	color: var(--pa-canopy-deep);
}

.read-more {
	color: var(--pa-canopy-deep);
	background: var(--pa-canopy-tint);
}

.read-more:hover {
	background: var(--pa-canopy);
	color: #fff;
}

/* Pagination. */
.pagination .page-numbers.current,
.wikipress-pagination .page-numbers.current {
	background: var(--pa-canopy);
	border-color: var(--pa-canopy);
	color: #fff;
}

.pagination a.page-numbers:hover,
.wikipress-pagination a.page-numbers:hover {
	border-color: var(--pa-canopy);
	color: var(--pa-canopy-deep);
}

/* ---- 7. 404 (styles; markup in child 404.php) ---- */
.pa-404 {
	max-width: 720px;
	margin: 8px auto 40px;
	text-align: center;
}

.pa-404-art {
	width: 132px;
	height: auto;
	margin: 0 auto 8px;
	color: var(--pa-canopy);
}

.pa-404-code {
	font-family: var(--wikipress-font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pa-bark);
	margin: 0 0 6px;
}

.pa-404 .page-title {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 10px;
}

.pa-404-lede {
	color: var(--wikipress-text-light);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 auto 24px;
	max-width: 52ch;
}

.pa-404-search {
	margin: 0 auto 32px;
	max-width: 460px;
}

.pa-404-search .search-form {
	display: flex;
	gap: 8px;
}

.pa-404-search .search-field {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--wikipress-border);
	border-radius: 6px;
	font-size: 1rem;
}

.pa-404-search .search-field:focus {
	border-color: var(--pa-canopy);
	box-shadow: 0 0 0 3px rgba(27, 107, 80, 0.15);
	outline: none;
}

.pa-404-search .search-submit {
	padding: 11px 20px;
	background: var(--pa-canopy);
	color: #fff;
	border: 1px solid var(--pa-canopy);
	border-radius: 6px;
	font-family: var(--wikipress-font-ui);
	font-weight: 600;
	cursor: pointer;
}

.pa-404-search .search-submit:hover {
	background: var(--pa-canopy-deep);
	border-color: var(--pa-canopy-deep);
}

.pa-404-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	text-align: left;
	margin-top: 8px;
}

.pa-404-panel {
	background: var(--wikipress-bg);
	border: 1px solid var(--pa-sand-line);
	border-radius: 8px;
	padding: 18px 20px;
}

.pa-404-panel h2 {
	font-family: var(--pa-font-display);
	font-size: 1.05rem;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pa-sand-line);
	color: var(--pa-ink);
}

.pa-404-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-404-panel li {
	padding: 4px 0;
	line-height: 1.4;
}

.pa-404-panel li + li {
	border-top: 1px solid var(--wikipress-border-light);
}

.pa-404-panel a {
	color: var(--pa-canopy-deep);
	text-decoration: none;
	font-family: var(--wikipress-font-ui);
	font-size: 0.95rem;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 2px;
}

.pa-404-panel a:hover {
	color: var(--pa-canopy);
	text-decoration: underline;
}

.pa-404-panel .pa-404-count {
	color: var(--pa-bark-deep);
	font-size: 0.8rem;
	flex-shrink: 0;
}

.pa-404-home {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 11px 22px;
	background: var(--pa-canopy);
	color: #fff;
	border-radius: 24px;
	font-family: var(--wikipress-font-ui);
	font-weight: 600;
	text-decoration: none;
}

.pa-404-home:hover {
	background: var(--pa-canopy-deep);
	color: #fff;
}

/* ---- 8. Footer & independence disclaimer ---- */
.site-footer {
	background: var(--wikipress-bg-footer);
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--pa-bark), var(--pa-canopy), var(--pa-gold)) 1;
}

.footer-widget-title {
	font-family: var(--pa-font-display);
	color: var(--pa-ink);
}

.footer-recent a:hover,
.footer-menu a:hover {
	color: var(--pa-canopy-deep);
}

/* Independence disclaimer band (rendered via wp_footer). */
.pa-disclaimer {
	background: var(--pa-ink);
	color: #d7d3c8;
}

.pa-disclaimer-inner {
	max-width: var(--wikipress-max-width);
	margin: 0 auto;
	padding: 16px 20px;
}

.pa-disclaimer p {
	margin: 0;
	font-family: var(--wikipress-font-ui);
	font-size: 0.8rem;
	line-height: 1.6;
	text-align: center;
}

/* ---- 9. Responsive ---- */
@media (max-width: 782px) {
	.pa-branding-mark svg {
		width: 30px;
		height: 30px;
	}

	.site-title {
		font-size: 1.25rem;
	}

	.pa-404-search .search-form {
		flex-direction: column;
	}
}

/* ---- 10. Motion & print ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@media print {
	.site-header::before,
	.wikipress-homepage .home-hero::after,
	.pa-disclaimer,
	.article-sidebar,
	.toc-mobile {
		display: none !important;
	}

	.article-content a {
		color: #000;
		text-decoration: underline;
	}
}