/*
Theme Name: Pen Pal Post
Theme URI: https://example.com/themes/pen-pal-post/
Author: Virtual Pen Pals
Author URI: https://example.com/
Description: A playful, welcoming stationery-and-postal theme for the Virtual Pen Pals platform: warm cream paper, deep ink-blue text, postal red and airmail accents, CSS-built envelopes and stamps, and no external fonts, images, libraries, trackers, or analytics. Works as a normal blog when the companion plug-in is inactive. No identity claims; delivery estimates are experience-oriented, not a USPS guarantee.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pen-pal-post
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ------------------------------------------------------------------ base */
:root {
	--paper: #fbf6ea;
	--paper-deep: #f4ecd9;
	--card: #fffdf6;
	--ink: #1c2a4a;
	--ink-soft: #57534a;
	--postal-red: #c0392b;
	--airmail-blue: #1d5c9e;
	--line: #d8cdb4;
	--stamp-blue: #14406e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background-color: var(--paper);
	background-image:
		radial-gradient(rgba(28, 42, 74, 0.028) 1px, transparent 1px),
		radial-gradient(rgba(176, 58, 46, 0.02) 1px, transparent 1px);
	background-size: 7px 7px, 11px 11px;
	background-position: 0 0, 4px 6px;
	color: var(--ink);
	font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	line-height: 1.65;
	font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
	color: var(--stamp-blue);
	line-height: 1.25;
	letter-spacing: 0.01em;
}

a { color: var(--airmail-blue); }
a:hover { color: var(--postal-red); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--postal-red);
	outline-offset: 2px;
}

img, video, iframe { max-width: 100%; height: auto; }
.alignwide { max-width: 980px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.aligncenter { display: block; margin: 1em auto; }
.alignleft { float: left; margin: 0.3em 1.4em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.4em; }
.wp-block-embed { margin: 1.4em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed iframe, .wp-block-embed embed, .wp-block-embed object { max-width: 100%; height: auto; }

blockquote {
	margin: 1.4em 0; padding: 0.8em 1.2em;
	background: var(--card); border-left: 6px solid var(--postal-red);
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--postal-red); color: #fff; padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* ------------------------------------------------------------------ header */
.site-header {
	background: var(--card);
	border-bottom: 4px dashed var(--airmail-blue);
	padding: 18px 20px;
}
.site-header-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding .custom-logo { max-height: 56px; }
.site-title { margin: 0; font-size: 1.5rem; }
.site-title a { color: var(--stamp-blue); text-decoration: none; }
.site-description { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.main-navigation { margin-left: auto; }
.main-navigation ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.main-navigation a {
	display: inline-block; padding: 8px 14px; text-decoration: none; font-family: "Trebuchet MS", sans-serif; font-weight: 600;
	border: 2px solid transparent; border-radius: 3px;
	/* airmail edging */
	background-image: repeating-linear-gradient( -45deg, transparent 0 6px, rgba(29, 92, 158, 0.35) 6px 12px, transparent 12px 18px, rgba(176, 58, 46, 0.35) 18px 24px );
	background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat;
}
.main-navigation a:hover { border-color: var(--postal-red); background-color: #f7efdd; }
.menu-toggle { display: none; background: none; border: 2px solid var(--airmail-blue); border-radius: 3px; padding: 8px 12px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }

@media (max-width: 720px) {
	.menu-toggle { display: block; }
	.main-navigation ul { display: none; flex-direction: column; width: 100%; }
	.main-navigation.is-open ul { display: flex; }
	.main-navigation { width: 100%; margin-left: 0; }
}

/* ------------------------------------------------------------------ layout */
.site-main { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }

/* Postcards */
.postcard {
	background: var(--card); border: 1px solid var(--line); border-radius: 4px;
	margin: 0 0 26px; padding: 26px 28px; position: relative;
	box-shadow: 4px 4px 0 rgba(29, 92, 158, 0.12);
}
.postcard::before {
	content: "";
	position: absolute; top: 10px; right: 10px; width: 34px; height: 42px;
	background: var(--stamp-blue);
	border: 3px dashed rgba(255, 253, 246, 0.9);
	transform: rotate(3deg);
}
.postcard::after {
	content: "";
	position: absolute; top: 14px; right: 54px; width: 52px; height: 52px;
	border: 3px solid rgba(192, 57, 43, 0.5); border-radius: 50%;
	transform: rotate(-12deg);
}
.postcard .post-card-head { padding-right: 80px; }
.postcard h2, .postcard h3 { margin-top: 0; }
.postcard h2 a, .postcard h3 a { color: var(--stamp-blue); }
.entry-meta, .entry-footer { color: var(--ink-soft); font-size: 0.85rem; font-family: "Trebuchet MS", sans-serif; }
.entry-footer { margin-top: 1.6em; padding-top: 0.8em; border-top: 1px dashed var(--line); }

/* Handwritten note touches */
.hand { font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive; }

.post-password-form input[type="password"] { max-width: 320px; }
.sticky .postcard { border-color: var(--postal-red); }

/* Envelope illustration (front page, CSS-only) */
.envelope-scene { text-align: center; margin: 30px 0 40px; }
.envelope {
	position: relative; display: inline-block; width: 300px; height: 180px;
	background: var(--card); border: 2px solid var(--line); border-radius: 6px;
	box-shadow: 5px 6px 0 rgba(28, 42, 74, 0.15);
}
.envelope::before { /* flap */
	content: ""; position: absolute; inset: 0 0 auto 0; height: 90px;
	background: linear-gradient(to bottom, #efe3c6, #e6d8b8);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.envelope::after { /* stamp */
	content: "VPP"; position: absolute; top: 10px; right: 12px; width: 40px; height: 48px;
	background: var(--postal-red); color: #fff; font: 700 12px/48px "Trebuchet MS", sans-serif; text-align: center;
	border: 3px dashed rgba(255, 255, 255, 0.9);
}
.envelope .airmail-stripe {
	position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
	background: repeating-linear-gradient(-45deg, var(--airmail-blue) 0 10px, transparent 10px 20px, var(--postal-red) 20px 30px, transparent 30px 40px);
}

/* Front page sections */
.ppp-notice {
	background: var(--postal-red); color: #fff; text-align: center;
	padding: 10px 16px; font-family: "Trebuchet MS", sans-serif; font-weight: 600;
}
.ppp-hero { text-align: center; padding: 30px 0 10px; }
.ppp-eyebrow { color: var(--postal-red); font-family: "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 8px; }
.ppp-hero h1 { font-size: 2.4rem; margin: 0 0 12px; }
.ppp-hero p.lede { max-width: 620px; margin: 0 auto 18px; font-size: 1.1rem; }
.ppp-cta {
	display: inline-block; background: var(--postal-red); color: #fff; text-decoration: none;
	font-family: "Trebuchet MS", sans-serif; font-weight: 700; font-size: 1.05rem;
	padding: 14px 26px; border-radius: 4px; box-shadow: 3px 3px 0 rgba(28, 42, 74, 0.2);
}
.ppp-cta:hover { background: var(--stamp-blue); color: #fff; }
.ppp-age { display: block; margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); }

.ppp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0; }
@media (max-width: 720px) { .ppp-flow { grid-template-columns: 1fr; } }
.ppp-step { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--airmail-blue); border-radius: 4px; padding: 18px 20px; }
.ppp-step h3 { margin-top: 0; }
.ppp-step .ppp-n { font: 700 2rem/1 "Trebuchet MS", sans-serif; color: var(--postal-red); }

.ppp-safe { background: var(--paper-deep); border-left: 6px solid var(--postal-red); padding: 4px 22px 18px; margin: 30px 0; }
.ppp-safe ul { padding-left: 20px; }

.ppp-letters-title { border-bottom: 3px solid var(--airmail-blue); padding-bottom: 6px; }

.ppp-final-cta { text-align: center; margin-top: 44px; }

/* Footer */
.site-footer {
	background: var(--stamp-blue); color: #f4ecd9; margin-top: 40px;
	border-top: 6px dashed var(--postal-red);
}
.site-footer-inner { max-width: 860px; margin: 0 auto; padding: 26px 20px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: #cfe1f3; }
.site-footer a:hover { color: #fff; }
.footer-navigation ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-info { font-size: 0.85rem; opacity: 0.9; }

/* Comments (simple, paper-styled) */
.comments-area { background: var(--card); border: 1px solid var(--line); padding: 22px 26px; border-radius: 4px; }
.comment-list { list-style: none; padding-left: 0; }
.comment-list .comment { border-top: 1px dashed var(--line); padding: 12px 0; }