/*
Theme Name:   Kadence Child - Retro Seed Packet
Template:     kadence
Description:  Retro seed-packet visual redesign for Wild Garden Journal, built as a child of the Kadence theme.
Author:       Wild Garden Journal
Version:      1.0.0
*/

/* ==========================================================================
   1. Color variables — override Kadence's global palette so anything else
   on the site that reads these vars (buttons, default text) stays consistent
   with the retro palette. Direct selector overrides below are the source of
   truth for the elements the design spec calls out explicitly; the variable
   overrides are a consistency net for anything Kadence renders using them
   that isn't separately targeted.
   ========================================================================== */
:root {
	--global-palette1: #b5482f; /* rust - primary accent */
	--global-palette2: #6b7b4f; /* olive - secondary accent */
	--global-palette3: #1a1208; /* strongest text (headings) */
	--global-palette4: #1a1208; /* strong text (body) */
	--global-palette5: #1a1208; /* medium text */
	--global-palette6: #1a1208; /* subtle text - kept near-black per spec, not theme's default gray */
	--global-palette8: #f1e2b4; /* page background */
	--global-palette9: #f8ecc9; /* card / content background */
	--global-body-font-family: Georgia, "Times New Roman", Times, serif;
	--global-heading-font-family: "Oswald", sans-serif;
	--global-primary-nav-font-family: "Oswald", sans-serif;
}

/* ==========================================================================
   2. Base page — explicit color everywhere, per spec: don't rely on
   inherited/theme-default color.
   ========================================================================== */
body {
	background: #f1e2b4 !important;
	color: #1a1208 !important;
	font-family: Georgia, "Times New Roman", Times, serif !important;
}

.content-bg,
body.content-style-unboxed .site {
	background: #f8ecc9 !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a {
	font-family: "Oswald", sans-serif !important;
	font-weight: 600;
	color: #1a1208;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content span {
	color: #1a1208 !important;
	font-family: Georgia, "Times New Roman", Times, serif !important;
}

a {
	color: #b5482f;
}
a:hover, a:focus {
	color: #6b7b4f;
}

/* ==========================================================================
   3. Overall site frame — thick double rust border, rounded corners.
   #wrapper.site wraps the entire page (header, content, footer).
   ========================================================================== */
#wrapper.site {
	border: 6px double #b5482f;
	border-radius: 14px;
	margin: 10px;
	overflow: hidden;
}
@media (max-width: 600px) {
	#wrapper.site {
		margin: 6px;
		border-width: 4px;
	}
}

/* ==========================================================================
   4. Header — centered site name, kicker line, tagline.
   ========================================================================== */
#masthead.site-header {
	background: #e8d29f !important;
	border-bottom: 3px solid #b5482f;
}

.site-title-wrap {
	text-align: center;
	width: 100%;
}

.site-title-wrap::before {
	content: "Plant. Forage. Harvest.";
	display: block;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b7b4f;
	margin-bottom: 4px;
}

.site-title-wrap .site-title,
.site-title-wrap .site-title a {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #b5482f !important;
	font-size: 30px;
}

.site-description {
	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #1a1208;
	text-align: center;
	font-size: 15px;
	margin-top: 4px;
}

/* ==========================================================================
   5. Nav — centered, uppercase Oswald with letter-spacing.
   ========================================================================== */
#site-navigation.main-navigation,
#mobile-site-navigation {
	background: #e8d29f !important;
}

#site-navigation.main-navigation ul.menu,
#site-navigation.main-navigation > div > ul {
	justify-content: center;
}

#site-navigation .menu-item > a {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #1a1208;
	font-size: 14px;
}
#site-navigation .menu-item > a:hover {
	color: #b5482f;
}

/* Dropdown panel (Resources hover flyout). Kadence's own .sub-menu{display:none}
   base rule + hover-to-open reveal logic is untouched here — this only styles
   the panel and its links once Kadence makes it visible. */
#site-navigation .sub-menu {
	background: #f8ecc9;
	border: 2px solid #b5482f;
	border-radius: 6px;
	padding: 8px 0;
	min-width: 240px;
}

#site-navigation .sub-menu .menu-item > a {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: #1a1208;
	font-size: 14px;
	padding: 6px 18px;
	display: block;
}
#site-navigation .sub-menu .menu-item > a:hover {
	color: #b5482f;
	background: #e8d29f;
}

/* Section-label items ("Product Reviews" / "Tips & Advice") — bold/uppercase,
   styled to read as a non-interactive header rather than a regular link,
   even though it's still a real link underneath to the parent category. */
#site-navigation .sub-menu .resources-dropdown-section-label > a {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	color: #6b7b4f !important;
	padding-top: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e8d29f;
	margin-bottom: 2px;
}
#site-navigation .sub-menu .resources-dropdown-section-label > a:hover {
	color: #6b7b4f !important;
	background: transparent !important;
}
/* First label needs no top divider spacing beyond the panel's own padding */
#site-navigation .sub-menu > .resources-dropdown-section-label:first-child > a {
	padding-top: 2px;
}

/* ==========================================================================
   6. Single-post elements — category pill, byline, callout/product/author boxes.
   ========================================================================== */

/* Category label hidden per 2026-09-15 live feedback — the current legacy
   taxonomy (multiple categories per post, e.g. "Greenhouse Tips | Home &
   Garden Tips & Advice") isn't the intended design; deferred until the
   General / Product Reviews / Tips and Advice category restructuring
   happens. Scoped to .entry-header only — confirmed via live HTML that
   .entry-taxonomies never appears in entry-footer or in #site-navigation,
   so this can't hide anything else. */
.entry-header .entry-taxonomies {
	display: none;
}

/* Category pill badge above the title — currently hidden by the rule
   above; kept here so it's ready to re-enable once real categories exist. */
.entry-taxonomies .category-links a {
	display: inline-block;
	background: #b5482f;
	color: #f8ecc9 !important;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}
.entry-taxonomies .category-links a:hover {
	background: #6b7b4f;
}

/* Olive small-caps byline */
.entry-meta .posted-by,
.entry-meta .posted-by .author,
.entry-meta .posted-by a {
	font-family: "Oswald", sans-serif;
	color: #6b7b4f !important;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	font-size: 13px;
}

/* Field Note callout box (used inside post content via a block pattern —
   wrap the note in a group/paragraph with class "retro-field-note") */
.retro-field-note {
	background: #f8ecc9;
	border: 2px dashed #b5482f;
	border-radius: 8px;
	padding: 18px 20px;
	margin: 24px 0;
	position: relative;
}
.retro-field-note::before {
	content: "\26A0 FIELD NOTE";
	display: block;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #b5482f;
	margin-bottom: 8px;
}
.retro-field-note p {
	margin: 0;
	color: #1a1208 !important;
}

/* Product-recommendation box */
.retro-product-box {
	background: #e8d29f;
	border: 1px solid #b5482f;
	border-radius: 8px;
	padding: 20px;
	margin: 24px 0;
	text-align: center;
}
.retro-product-box .retro-product-title {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	color: #1a1208;
	margin-bottom: 10px;
}
.retro-product-box .retro-amazon-btn {
	display: inline-block;
	background: #b5482f !important;
	color: #f8ecc9 !important;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	padding: 10px 24px;
	border-radius: 4px;
	text-decoration: none !important;
	margin-top: 8px;
}
.retro-product-box .retro-amazon-btn:hover {
	background: #6b7b4f !important;
}

/* Circular-avatar author bio box */
.retro-author-bio {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #f8ecc9;
	border-top: 3px solid #b5482f;
	padding: 20px;
	margin-top: 32px;
}
.retro-author-bio img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #b5482f;
	flex-shrink: 0;
}
.retro-author-bio .retro-author-name {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	color: #1a1208;
	margin: 0 0 4px 0;
}
.retro-author-bio p {
	color: #1a1208 !important;
	font-size: 14px;
	margin: 0;
}

/* ==========================================================================
   7. Homepage hero band + category cards (used by the static front page's
   block-pattern content).
   ========================================================================== */

/* Actual live hero tagline — built as a core Gutenberg Cover block +
   Paragraph block (not the .retro-hero-band markup below, which isn't
   what ended up in use). Targets only .has-theme-palette-8-color, not
   .has-xxlarge-font-size — that class isn't reliably present (it
   dropped off after a wp-admin edit set a custom 68px size instead of
   the "xxlarge" preset). font-size below is !important so it still
   wins over whatever non-!important inline size the block editor sets,
   regardless of future edits. Selector verified unique to this one
   element; re-verified unique again 2026-09-25 and 2026-10-07. Switched
   to a diagonal handwritten treatment approved from chat mockups: Caveat
   script font, large scale, tilted -8deg.
   2026-10-07: font-size changed from a flat 160px to
   clamp(56px, 11vw, 160px) — flat 160px overflowed on narrow screens.
   56px floor reached below ~509px viewport width; 160px ceiling reached
   above ~1455px. max-width/overflow-wrap/text-align added defensively:
   clamp() alone only controls font-size, not line-wrapping — even at the
   56px floor this 33-character string is wider than a 390px viewport, so
   without these it would overflow horizontally (and worse once rotated)
   rather than wrap. Needs a live look at 1920x1080, 1440x800, 1280x720,
   and 390px-wide before treating any of this as final — could not verify
   rendering at specific viewport widths this round (the resize tool
   wasn't changing the actual rendered viewport; flagged rather than
   faked per-width screenshots). */
.page-id-419 .wp-block-cover .has-theme-palette-8-color {
	font-family: "Caveat", cursive !important;
	font-weight: 700 !important;
	font-size: clamp(56px, 11vw, 160px) !important;
	line-height: 1;
	transform: rotate(-8deg) translateY(-38vh) translateX(5vw);
	color: #f8ecc9 !important;
	max-width: 90vw;
	overflow-wrap: break-word;
	text-align: center;
}

/* Hero cover block: full-bleed on all sides, tested live before shipping
   (2026-09-25). Horizontal: Kadence's native .alignfull is viewport-
   relative and would bleed past OUR OWN frame (#wrapper.site, section 3
   above) to the true browser edge — wrong target. This recalibrates the
   same calc(50% - 50vw) trick to the frame's inner edge instead: 16px =
   frame's 10px margin + 6px border (20px/10px at the frame's own 600px
   breakpoint below). Verified via live DOM measurement: lands exactly
   6px from the frame edge on both sides (flush against the border's
   inner face, not overlapping it).
   Vertical (2026-09-25 pass): margin-top cancels entry-content-wrap's
   own 2rem/1.5rem padding (rem-based, tracks Kadence's own breakpoint at
   767px); margin-bottom cancels the Cover block's own default 40px
   bottom margin so it butts directly against the carousel section below.
   Scoped to .page-id-419 only — confirmed zero published posts use a
   Cover block, but this avoids ever accidentally full-bleeding one on
   another page/post in the future.
   Vertical, corrected 2026-10-07: the 2026-09-25 margin-top only
   canceled entry-content-wrap's padding — it did NOT reach the real
   ~90-100px cream gap the user was seeing above the image. Root cause,
   found by live measurement: #primary.content-area has its own
   margin-top (Kadence's .content-area{margin-top:5rem/3rem/2rem} at
   desktop/≤1024px/≤767px — re-verified against the live-served
   kadence-global-inline-css, not a stale local copy). That 100px (5rem)
   was the ENTIRE remaining visible gap — everything below it in the
   ancestor chain (entry-content-wrap's padding vs. this rule's own
   margin-top) was already canceling out via CSS margin collapsing
   through the padding-less wrapper chain. New rule below cancels
   #primary.content-area directly, at Kadence's own 3 breakpoints
   (1024px/767px — there is no #primary-specific rule separate from the
   .content-area class one, confirmed live).
   2026-10-08, based on how it actually looked live: the viewport-height
   min-height override (calc(100vh - 164px)) is REMOVED — it correctly
   made the whole image fit above the fold, but that meant cropping out
   the bottom of the photo (a basket of mushrooms). Chris wants the full
   original image, scrolling is fine; removing our !important override
   lets the Cover block's own inline min-height:933px (its actual
   authored height) take effect again, same as before the 2026-10-07
   pass. Tagline vertical position: still no custom centering override —
   .wp-block-cover is display:flex; align-items:center;
   justify-content:center by WP core default (confirmed live) — but
   Chris wants it nudged down slightly from true-center, so padding-top
   is added to the Cover block itself: in a centered flex container,
   padding on only one side shifts the centered content by roughly half
   the padding value toward the opposite side, so padding-top:5vh nudges
   the tagline down ~2.5vh. Starting conservative per "a hair" — easier
   to increase than walk back an overcorrection. Tell me more/less once
   you see it live. */
.page-id-419 .wp-block-cover.aligncenter {
	width: calc(100vw - 32px) !important;
	margin-left: calc(50% - 50vw + 16px) !important;
	margin-right: calc(50% - 50vw + 16px) !important;
	max-width: none !important;
	margin-top: -2rem !important;
	margin-bottom: 0 !important;
}

.page-id-419 #primary.content-area {
	margin-top: -5rem !important;
}

@media (max-width: 1024px) {
	.page-id-419 #primary.content-area {
		margin-top: -3rem !important;
	}
}

@media (max-width: 767px) {
	.page-id-419 .wp-block-cover.aligncenter {
		margin-top: -1.5rem !important;
	}
	.page-id-419 #primary.content-area {
		margin-top: -2rem !important;
	}
}

@media (max-width: 600px) {
	.page-id-419 .wp-block-cover.aligncenter {
		width: calc(100vw - 20px) !important;
		margin-left: calc(50% - 50vw + 10px) !important;
		margin-right: calc(50% - 50vw + 10px) !important;
	}
}

.retro-hero-band {
	background: #b5482f;
	color: #f8ecc9;
	text-align: center;
	padding: 48px 24px;
	border-radius: 8px;
	margin-bottom: 32px;
}
.retro-hero-band .retro-hero-eyebrow {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	color: #f1e2b4 !important;
	margin-bottom: 10px;
}
.retro-hero-band .retro-hero-headline {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	color: #f8ecc9 !important;
	font-size: 30px;
	margin: 0 0 10px 0;
}
.retro-hero-band p {
	color: #f1e2b4 !important;
	font-family: Georgia, "Times New Roman", Times, serif;
	max-width: 560px;
	margin: 0 auto;
}

.retro-category-card {
	background: #f8ecc9;
	border: 1px solid #e8d29f;
	border-radius: 8px;
	padding: 24px;
	text-align: center;
}
.retro-category-card .retro-category-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #6b7b4f;
	margin: 0 auto 14px auto;
}
.retro-category-card .retro-category-label {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: #b5482f !important;
	margin-bottom: 6px;
}
.retro-category-card .retro-category-title {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	color: #1a1208;
	margin: 0 0 8px 0;
}
.retro-category-card p {
	color: #1a1208 !important;
	font-size: 14px;
	margin: 0;
}

/* ==========================================================================
   8. Footer — dark brown band, cream uppercase centered text.
   ========================================================================== */
#colophon.site-footer {
	background: #5c3a22 !important;
}
#colophon.site-footer,
#colophon.site-footer p,
#colophon.site-footer a,
#colophon.site-footer span {
	color: #f1e2b4 !important;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: center;
}

/* ==========================================================================
   9. Recent posts carousel — rendered client-side by carousel.js into
   #retro-recent-posts-mount (a Custom HTML block on the Home page).
   ========================================================================== */
.retro-carousel-section {
	margin: 32px auto;
	max-width: 1100px;
	padding: 0 20px;
}

.retro-carousel-heading {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 20px;
	color: #1a1208 !important;
	text-align: center;
	margin: 0 0 20px 0;
}

.retro-carousel-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.retro-carousel-viewport {
	overflow: hidden;
	flex: 1;
}

.retro-carousel-track {
	display: flex;
	gap: 20px;
	transition: transform 0.3s ease;
}

.retro-carousel-card {
	background: #f8ecc9;
	border: 1px solid #e8d29f;
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
}

.retro-carousel-card-media {
	width: 100%;
	height: 140px;
	background-size: cover;
	background-position: center;
	background-color: #6b7b4f;
}
.retro-carousel-card-media.no-image {
	background-image: linear-gradient(135deg, #6b7b4f, #b5482f);
}

.retro-carousel-card-body {
	padding: 16px;
}

.retro-carousel-card-label {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
	color: #b5482f !important;
	margin-bottom: 6px;
}

.retro-carousel-card-title {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 15px;
	margin: 0 0 8px 0;
}
.retro-carousel-card-title a {
	color: #1a1208 !important;
	text-decoration: none;
}
.retro-carousel-card-title a:hover {
	color: #b5482f !important;
}

.retro-carousel-card-excerpt {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #1a1208 !important;
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.retro-carousel-btn {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #b5482f;
	color: #f8ecc9;
	border: none;
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.retro-carousel-btn:hover:not(:disabled) {
	background: #6b7b4f;
}
.retro-carousel-btn:disabled {
	background: #e8d29f;
	color: #b5482f;
	cursor: not-allowed;
	opacity: 0.6;
}