/*
Theme Name: Family Form
Theme URI: https://familyform.io
Author: Now Advertising Media
Author URI: https://nowadmedia.com
Description: The standard public-facing theme for every Family Form family — a community bulletin board for announcements, for-sale listings, and updates. Pairs with the Family Form plugin but works on its own.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: family-form-theme
*/

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--body);
	color: var(--ink);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   Tokens — accent is customizable per family (Customizer); everything
   else is the fixed Family Form identity.
   ========================================================================== */
:root{
	--cork-1: #a9784c;
	--cork-2: #8f6038;
	--ink: #2b2118;
	--ink-soft: #5a4c3c;
	--kraft: #e9d9bc;
	--kraft-dark: #d8c39e;
	--cream: #fbf6ec;
	--white-card: #fdfdfb;
	--sage: #dbe6e0;
	--brass: #a98a4f;
	--brass-deep: #7e6330;
	--rust: #b4423a;
	--rust-deep: #7e2c26;

	/* Overridden inline (see inc/customizer.php) from each family's chosen
	   accent color — teal is the default if a family never picks one. */
	--accent: #3e7c74;
	--accent-deep: #244f49;

	--display: 'Fraunces', Georgia, serif;
	--stamp: 'Special Elite', 'Courier New', monospace;
	--body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Board background — used on the homepage/blog listing only. Single-post
   and static pages use a calmer background (see .paper-page below) since
   long-form reading doesn't work well on a busy textured surface.
   ========================================================================== */
body.home,
body.blog,
body.archive,
body.search {
	background-color: var(--cork-1);
	background-image:
		radial-gradient(circle at 15% 20%, rgba(0,0,0,0.12) 0, transparent 3px),
		radial-gradient(circle at 65% 8%, rgba(0,0,0,0.10) 0, transparent 3px),
		radial-gradient(circle at 40% 55%, rgba(0,0,0,0.11) 0, transparent 3px),
		radial-gradient(circle at 85% 40%, rgba(0,0,0,0.09) 0, transparent 3px),
		radial-gradient(circle at 25% 80%, rgba(0,0,0,0.10) 0, transparent 3px),
		radial-gradient(circle at 75% 75%, rgba(0,0,0,0.12) 0, transparent 3px),
		radial-gradient(circle at 92% 90%, rgba(0,0,0,0.08) 0, transparent 3px),
		radial-gradient(circle at 5% 60%, rgba(0,0,0,0.09) 0, transparent 3px),
		linear-gradient(180deg, var(--cork-1), var(--cork-2));
	background-size: 90px 90px, 110px 110px, 70px 70px, 100px 100px, 80px 80px, 95px 95px, 60px 60px, 85px 85px, 100% 100%;
	background-attachment: fixed;
}
body.single,
body.page {
	background: var(--kraft);
}

.wrapper { max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   Header — nameplate + nav, on every page
   ========================================================================== */
.site-header { padding: 40px 0 20px; text-align: center; }
.nameplate .plank{
	display:inline-flex;
	align-items:center;
	gap: 18px;
	background: var(--kraft);
	border: 1px solid var(--kraft-dark);
	box-shadow: 0 10px 18px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.15);
	padding: 20px 40px;
	transform: rotate(-0.6deg);
	position: relative;
}
body.single .nameplate .plank,
body.page .nameplate .plank{ box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.nameplate .plank::before,
.nameplate .plank::after{
	content:"";
	position:absolute;
	width:14px; height:14px;
	border-radius:50%;
	background: radial-gradient(circle at 35% 30%, #d9c08a, var(--brass-deep));
	box-shadow: 0 3px 4px rgba(0,0,0,0.4);
	top: 10px;
}
.nameplate .plank::before{ left: 12px; }
.nameplate .plank::after{ right: 12px; }
.nameplate .family-photo{
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--cream);
	box-shadow: 0 3px 6px rgba(0,0,0,0.3);
	flex-shrink: 0;
}
.nameplate h1{
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(24px, 5vw, 38px);
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.nameplate h1 a{ text-decoration:none; color:inherit; }
.nameplate p{
	font-family: var(--stamp);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 6px 0 0;
}

.site-nav{ margin-top: 18px; }
.site-nav ul{ display:flex; justify-content:center; gap: 22px; flex-wrap:wrap; }
.site-nav a{
	font-family: var(--stamp);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration:none;
	color: var(--cream);
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
	padding: 4px 2px;
	border-bottom: 2px solid transparent;
}
body.single .site-nav a,
body.page .site-nav a{ color: var(--ink-soft); text-shadow:none; }
.site-nav a:hover,
.site-nav a:focus-visible{ border-bottom-color: var(--brass); }

.post-notice-wrap{ text-align:center; margin: 8px 0 40px; }
.post-notice{
	font-family: var(--stamp);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration:none;
	color: var(--cream);
	background: var(--accent-deep);
	border: 1px solid rgba(0,0,0,0.25);
	padding: 10px 22px;
	border-radius: 3px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	display:inline-block;
	transform: rotate(-1deg);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-notice:hover{ transform: rotate(0deg) translateY(-2px); box-shadow: 0 8px 14px rgba(0,0,0,0.35); }
.post-notice:focus-visible{ outline: 3px solid var(--cream); outline-offset: 2px; }

/* ==========================================================================
   Section labels
   ========================================================================== */
.section-label{
	font-family: var(--stamp);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cream);
	text-shadow: 0 2px 3px rgba(0,0,0,0.4);
	margin: 0 0 20px 4px;
	display:flex;
	align-items:center;
	gap:10px;
}
.section-label .dot{
	width:9px; height:9px;
	border-radius:50%;
	background: var(--accent);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
	flex-shrink:0;
}
main{ padding-bottom: 70px; }
section{ margin-bottom: 52px; }

/* ==========================================================================
   Pinned notes (Announcement category, and the fallback for anything
   uncategorized)
   ========================================================================== */
.pin-grid{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px 26px;
}
.note{
	position:relative;
	padding: 26px 22px 22px;
	box-shadow: 0 12px 20px rgba(0,0,0,0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	text-decoration:none;
	display:block;
}
.note::before{
	content:"";
	position:absolute;
	top: -9px; left:50%;
	width:16px; height:16px;
	margin-left:-8px;
	border-radius:50%;
	box-shadow: 0 3px 5px rgba(0,0,0,0.45);
	background: radial-gradient(circle at 35% 30%, #d9c08a, var(--brass-deep));
}
.note:hover{ transform: translateY(-4px) rotate(0deg) !important; box-shadow: 0 18px 26px rgba(0,0,0,0.32); }
.note:nth-child(3n+1){ transform: rotate(-1.6deg); }
.note:nth-child(3n+2){ transform: rotate(1.2deg); }
.note:nth-child(3n+3){ transform: rotate(-0.5deg); }
.note.kraft{ background: var(--kraft); border:1px solid var(--kraft-dark); }
.note.cream{ background: var(--cream); border:1px solid #e7ddc8; }
.note.sage{ background: var(--sage); border:1px solid #c3d3cb; }
.note .stamp-line{ font-family: var(--stamp); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.note h3{ font-family: var(--display); font-weight: 600; font-size: 19px; margin: 0 0 10px; color: var(--ink); }
.note p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   For-sale flyers (For Sale category)
   ========================================================================== */
.flyer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px 26px; }
.flyer{
	position:relative;
	background: var(--white-card);
	border: 1px solid #e2ddd0;
	box-shadow: 0 12px 20px rgba(0,0,0,0.25);
	padding: 22px 20px 0;
	transform: rotate(0.8deg);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	text-decoration:none;
	display:block;
}
.flyer:nth-child(even){ transform: rotate(-1deg); }
.flyer:hover{ transform: translateY(-4px) rotate(0deg); box-shadow: 0 18px 26px rgba(0,0,0,0.32); }
.flyer::before{
	content:""; position:absolute; top: -9px; left: 20px; width:16px; height:16px; border-radius:50%;
	background: radial-gradient(circle at 35% 30%, #e28f86, var(--rust-deep));
	box-shadow: 0 3px 5px rgba(0,0,0,0.45);
}
.flyer .price-tag{
	position:absolute; top: -14px; right: 14px;
	background: var(--kraft); border:1px solid var(--kraft-dark);
	font-family: var(--stamp); font-size: 13px; color: var(--rust-deep);
	padding: 5px 12px; border-radius: 2px; transform: rotate(6deg);
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.flyer h3{ font-family: var(--display); font-weight: 600; font-size: 18px; margin: 6px 0 8px; color: var(--ink); }
.flyer p{ font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 18px; }
.tabs{ display:flex; border-top: 1px dashed #c9c2b2; margin: 0 -20px; }
.tabs span{
	flex:1; text-align:center; font-family: var(--stamp); font-size: 11px; color: var(--ink-soft);
	padding: 10px 4px 14px; border-left: 1px dashed #c9c2b2; writing-mode: vertical-rl; letter-spacing: 0.03em;
}
.tabs span:first-child{ border-left: none; }

/* ==========================================================================
   Event cards (Event category)
   ========================================================================== */
.event-card{
	background: var(--accent-deep); color: var(--cream); border-radius: 6px;
	padding: 26px 28px; box-shadow: 0 14px 22px rgba(0,0,0,0.3);
	display:flex; align-items:center; gap: 24px; flex-wrap:wrap;
	text-decoration:none;
}
.event-date{
	font-family: var(--display); font-weight: 600; font-size: 15px;
	background: var(--cream); color: var(--accent-deep);
	padding: 10px 16px; border-radius: 4px; text-align:center; line-height: 1.2;
}
.event-date .day{ font-size: 26px; display:block; }
.event-card h3{ font-family: var(--display); font-weight: 600; font-size: 20px; margin: 0 0 4px; color: var(--cream); }
.event-card p{ margin:0; font-size: 14px; color: #cfe6e1; }

/* ==========================================================================
   Single post / static page — a calm sheet of paper, not the busy board.
   Long-form reading needs a stable, unrotated surface and a sane measure.
   ========================================================================== */
.paper-page{
	background: var(--white-card);
	border: 1px solid #e2ddd0;
	border-radius: 4px;
	box-shadow: 0 14px 26px rgba(0,0,0,0.18);
	padding: 44px 48px;
	max-width: 720px;
	margin: 0 auto 60px;
}
.paper-page .stamp-line{ font-family: var(--stamp); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.paper-page h1{ font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4vw, 34px); margin: 0 0 20px; color: var(--ink); }
.paper-page .entry-content{ font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.paper-page .entry-content p{ margin: 0 0 1.2em; }
.paper-page .entry-content a{ color: var(--accent-deep); text-decoration:underline; }
.paper-page .price-badge{
	display:inline-block; font-family: var(--stamp); font-size: 14px; color: var(--rust-deep);
	background: var(--kraft); border:1px solid var(--kraft-dark); padding: 6px 14px; border-radius: 3px; margin-bottom: 18px;
}
.back-link{
	display:inline-block; margin-bottom: 24px; font-family: var(--stamp); font-size: 12px;
	text-transform:uppercase; letter-spacing:0.05em; text-decoration:none; color: var(--ink-soft);
}
.back-link:hover{ color: var(--accent-deep); }

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area{ max-width: 720px; margin: 0 auto 60px; }
.comments-area h2{ font-family: var(--display); font-size: 20px; color: var(--ink); }
.comment-list{ margin: 0 0 24px; }
.comment-list li{ background: var(--cream); border: 1px solid #e7ddc8; border-radius: 4px; padding: 16px 20px; margin-bottom: 14px; }
.comment-list .comment-author{ font-family: var(--stamp); font-size: 12px; color: var(--ink-soft); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea{
	width:100%; padding: 10px 12px; border: 1px solid var(--kraft-dark); border-radius: 4px;
	font-family: var(--body); font-size: 14px; margin-bottom: 12px; background: #fff;
}
.comment-form .form-submit input{
	font-family: var(--stamp); font-size: 13px; color: var(--cream); background: var(--accent-deep);
	border:none; padding: 10px 22px; border-radius: 3px; cursor:pointer;
}

/* ==========================================================================
   404 / search / empty states
   ========================================================================== */
.empty-state{ text-align:center; color: var(--cream); padding: 60px 20px; }
.empty-state h1{ font-family: var(--display); font-size: 28px; margin-bottom: 12px; }
.empty-state p{ font-size: 15px; opacity: 0.85; }
.search-form-wrap{ text-align:center; margin: 0 0 40px; }
.search-form-wrap input[type="search"]{
	padding: 10px 16px; border-radius: 4px; border: 1px solid var(--kraft-dark);
	font-family: var(--body); font-size: 14px; width: 100%; max-width: 360px;
}
.search-form-wrap input[type="submit"]{
	font-family: var(--stamp); font-size: 13px; color: var(--cream); background: var(--accent-deep);
	border:none; padding: 10px 18px; border-radius: 4px; margin-left: 8px; cursor:pointer;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{ text-align:center; margin-top: 20px; }
.pagination a, .pagination span{
	display:inline-block; font-family: var(--stamp); font-size: 12px; padding: 8px 14px;
	margin: 0 4px; background: var(--cream); border-radius: 3px; text-decoration:none; color: var(--ink-soft);
}
.pagination .current{ background: var(--accent-deep); color: var(--cream); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ text-align:center; padding: 20px 0 50px; }
.site-footer p{ font-family: var(--stamp); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
body.single .site-footer p,
body.page .site-footer p{ color: var(--ink-soft); text-shadow:none; }
.site-footer a{ color: inherit; }

@media (prefers-reduced-motion: reduce){
	.note, .flyer, .post-notice{ transition: none; }
}
@media (max-width: 600px){
	.note, .flyer{ transform: none !important; }
	.nameplate .plank{ padding: 16px 22px; flex-direction:column; gap:10px; }
	.paper-page{ padding: 30px 24px; }
}