/*
 * Sticks & Sparks — shared site chrome (header, footer, newsletter band) and
 * design tokens, reused by both front-page.php and single.php per the design
 * handoffs. Values are pixel-matched to the .dc.html references; don't
 * "clean up" numbers without checking the handoff docs first.
 */

:root {
	--ss-navy: #2C3242;
	--ss-navy-footer: #242938;
	--ss-cream: #F5EDE1;
	--ss-flame-outer: #E08D4B;
	--ss-flame-mid: #EDA45E;
	--ss-flame-core: #F6CE9E;
	--ss-bark: #8B5E3C;
	--ss-clay: #A66B45;
	--ss-trail-green: #3D7A5C;
	--ss-trail-green-hover: #336A4F;
	--ss-card-border: rgba(139, 94, 60, .16);
}

/* Smooth-scrolls same-page #anchor jumps (e.g. the Rhode Island guide's
   jump nav) instead of an instant cut; harmless everywhere else. */
html {
	scroll-behavior: smooth;
}

.ss-homepage,
.ss-post {
	background: var(--ss-cream);
	color: var(--ss-navy);
	font-family: 'Sora', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	max-width: 100%;
	overflow-x: hidden;
}

.ss-homepage *,
.ss-post * {
	box-sizing: border-box;
}

.ss-homepage a,
.ss-post a {
	text-decoration: none;
}

/* Header */

.ss-header {
	background: var(--ss-navy);
	padding: 18px 6vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 20;
}

.ss-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ss-wordmark {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.01em;
	color: var(--ss-cream);
}

.ss-wordmark .ss-amp {
	color: var(--ss-flame-outer);
}

.ss-nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.ss-navlink {
	color: var(--ss-cream);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .02em;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: border-color .18s, color .18s;
}

/* Explicit :visited color -- without one, browsers fall back to their own
   default visited-link color (often a dim purple/gray), which is nearly
   invisible against the navy header once a link's been clicked. */
.ss-navlink:visited {
	color: var(--ss-cream);
}

.ss-navlink:hover,
.ss-navlink.is-active {
	color: var(--ss-flame-core);
	border-bottom-color: var(--ss-flame-outer);
}

.ss-navlink.is-active {
	font-weight: 600;
}

/* Nav dropdown: Camp/Wander/Gear reveal their real subcategories on hover
   or keyboard focus. No JS — pure CSS, matching the hover-panel spec from
   design_handoff_category_archive. */

.ss-navitem {
	position: relative;
	display: flex;
	align-items: center;
}

.ss-navdropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	min-width: 190px;
	background: #fff;
	border: 1px solid var(--ss-card-border);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(44, 50, 66, .18);
	padding: 8px;
	display: flex;
	flex-direction: column;
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity .16s, transform .16s, visibility .16s;
}

.ss-navitem:hover .ss-navdropdown,
.ss-navitem:focus-within .ss-navdropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.ss-navdropdown-link {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ss-navy);
	transition: background .15s, color .15s;
}

.ss-navdropdown-link:visited {
	color: var(--ss-navy);
}

.ss-navdropdown-link:hover,
.ss-navdropdown-link:focus-visible {
	background: var(--ss-cream);
	color: var(--ss-clay);
}

/* Photo placeholders (any fillable photo slot: hero, blog thumbnail, featured
   image, related-post thumbnails) */

.ss-photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	background:
		repeating-linear-gradient(135deg, rgba(139, 94, 60, .10), rgba(139, 94, 60, .10) 12px, rgba(139, 94, 60, .04) 12px, rgba(139, 94, 60, .04) 24px),
		linear-gradient(135deg, #efe2ce, #e4d2b8);
	border: 2px dashed rgba(139, 94, 60, .45);
}

.ss-photo-placeholder svg {
	opacity: .65;
}

.ss-photo-placeholder-label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ss-bark);
}

.ss-photo-placeholder-hint {
	font-size: 12px;
	color: rgba(139, 94, 60, .8);
	max-width: 280px;
	line-height: 1.4;
}

/* Newsletter band */

.ss-newsletter {
	background: var(--ss-navy);
	padding: 76px 6vw;
}

.ss-newsletter-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.ss-newsletter h2 {
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 36px);
	margin: 0 0 12px;
	color: var(--ss-cream);
	text-wrap: balance;
}

.ss-newsletter-sub {
	font-family: 'Lora', serif;
	font-style: italic;
	font-size: 19px;
	color: var(--ss-flame-core);
	margin: 0 0 34px;
}

.ss-newsletter-form {
	max-width: 520px;
	margin: 0 auto;
}

/* Newsletter signup is a real Gravity Forms form (see
   ss_newsletter_form_id()). GF renders its own .gform_wrapper markup, so
   this retints its "Orbital" theme via its own CSS custom-property system
   (colors/radius/font -- !important needed since GF's own theme stylesheets
   load after this one and redeclare the same properties at equal
   specificity) and lays the single email field + submit button out as one
   row to match the site's original compact pill design. */

.ss-newsletter-form .gform_wrapper {
	width: 100%;
	--gf-color-primary: var(--ss-flame-outer) !important;
	--gf-color-primary-darker: var(--ss-clay) !important;
	--gf-color-primary-lighter: var(--ss-flame-outer) !important;
	--gf-color-primary-contrast: var(--ss-navy) !important;
	--gf-color-in-ctrl: var(--ss-cream) !important;
	--gf-color-in-ctrl-contrast: var(--ss-navy) !important;
	--gf-color-in-ctrl-dark-lighter: transparent !important;
	--gf-radius: 13px !important;
}

.ss-newsletter-form .gform_wrapper form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.ss-newsletter-form .gform_body,
.ss-newsletter-form .gform_fields,
.ss-newsletter-form .gfield,
.ss-newsletter-form .ginput_container {
	flex: 1 1 240px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.ss-newsletter-form input[type="email"] {
	width: 100%;
	padding: 16px 20px !important;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	outline: none;
}

.ss-newsletter-form .gform_footer {
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
}

.ss-newsletter-form .gform_button {
	font-family: 'Sora', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	padding: 16px 30px !important;
	cursor: pointer;
}

.ss-newsletter-form .validation_error,
.ss-newsletter-form .gfield_validation_message {
	color: var(--ss-cream);
	font-size: 13px;
	margin-top: 8px;
	width: 100%;
}

.ss-newsletter-form .gform_confirmation_message {
	color: var(--ss-cream) !important;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
}

.ss-amberbtn {
	display: inline-block;
	background: var(--ss-flame-outer);
	color: var(--ss-navy);
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 13px;
	padding: 16px 30px;
	cursor: pointer;
	transition: background .18s, transform .18s, box-shadow .18s;
}

.ss-amberbtn:hover {
	background: var(--ss-clay);
	transform: translateY(-2px);
}

.ss-newsletter-note {
	font-size: 13px;
	color: rgba(245, 237, 225, .5);
	margin: 18px 0 0;
}

/* Footer */

.ss-footer {
	background: var(--ss-navy-footer);
	padding: 56px 6vw 34px;
}

.ss-footer-top {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	align-items: flex-start;
}

.ss-footer-brand {
	max-width: 300px;
}

.ss-footer-brand-lockup {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.ss-footer-wordmark {
	font-weight: 700;
	font-size: 18px;
	color: var(--ss-cream);
}

.ss-footer-brand p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(245, 237, 225, .55);
	margin: 0;
}

.ss-footer-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-footer-heading {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--ss-clay);
	margin-bottom: 4px;
}

.ss-footlink {
	color: rgba(245, 237, 225, .72);
	font-size: 14px;
	transition: color .18s;
}

.ss-footlink:visited {
	color: rgba(245, 237, 225, .72);
}

.ss-footlink:hover {
	color: var(--ss-flame-core);
}

.ss-social-row {
	display: flex;
	gap: 12px;
}

.ss-social {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 237, 225, .1);
	transition: background .18s;
}

.ss-social:hover {
	background: var(--ss-flame-outer);
}

.ss-footer-bottom {
	max-width: 1080px;
	margin: 38px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(245, 237, 225, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.ss-footer-copyright {
	font-size: 13px;
	color: rgba(245, 237, 225, .45);
}

.ss-footer-legal {
	display: flex;
	gap: 22px;
}

.ss-footer-legal .ss-footlink {
	font-size: 13px;
}

/* Responsive: header nav wraps rather than overflowing.
   No hamburger menu yet — deferred per design-handoff README. */
@media (max-width: 768px) {
	.ss-header {
		flex-direction: column;
		justify-content: center;
		row-gap: 12px;
	}

	.ss-nav {
		justify-content: center;
		flex-wrap: wrap;
		gap: 18px;
	}
}

/* "Keep reading" / "Recent posts" band. Reused by single.php and 404.php --
   front-page.php's "From the Blog" section reuses the .hscroll/.ss-relcard*
   cards below but keeps its own section wrapper (.ss-blog), since its
   background/copy differ enough not to share this wrapper too. */

.ss-keep-reading {
	background: var(--ss-trail-green);
	padding: 72px 6vw 80px;
	margin-top: 64px;
}

.ss-keep-reading-inner {
	max-width: 1080px;
	margin: 0 auto;
}

.ss-keep-reading-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 36px;
}

.ss-keep-reading-head h2 {
	font-weight: 700;
	font-size: clamp(24px, 3vw, 32px);
	margin: 0;
	color: var(--ss-cream);
}

.ss-keep-reading-head a {
	color: var(--ss-flame-core);
	font-weight: 600;
	font-size: 15px;
}

/* Horizontal-scrolling post preview cards. Reused by single.php's "Keep
   reading" band, front-page.php's "From the Blog" section, and 404.php's
   "Recent posts" band -- background/wrapper styling stays with each
   template, this is just the card itself. */

.hscroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hscroll::-webkit-scrollbar {
	display: none;
}

.ss-relcard-row {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 14px;
	margin: 0 -6vw;
	padding-left: 6vw;
	padding-right: 6vw;
}

/* Prev/next scroll affordance for .ss-relcard-row (see
   template-parts/ss/hscroll-arrows.php + js/hscroll.js) -- a small control
   row below the cards, not overlapping them. Both buttons start [hidden] in
   the markup and are only revealed once JS determines there's actually
   somewhere to scroll to; js/hscroll.js also hides/shows the whole
   .ss-hscroll-controls row so it doesn't reserve empty space when nothing
   overflows. */

.ss-hscroll-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.ss-hscroll-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ss-card-border);
	background: #fff;
	color: var(--ss-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(44, 50, 66, .12);
	transition: background .18s, color .18s;
}

/* Explicit pixel size on the icon itself -- without this, browsers can
   badly miscompute an <svg>'s min-content width when it's a flex item
   (observed shrinking to ~2px despite width="20" height="20" on the
   element), even though the height comes out fine. */
.ss-hscroll-arrow svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.ss-hscroll-arrow:hover {
	background: var(--ss-flame-outer);
	color: var(--ss-navy);
}

.ss-hscroll-arrow[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.ss-hscroll-arrow {
		width: 38px;
		height: 38px;
	}
}

.ss-relcard {
	flex: 0 0 calc((100% - 28px) / 2);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--ss-card-border);
	border-radius: 22px;
	overflow: hidden;
	display: block;
	transition: transform .2s, box-shadow .2s;
}

.ss-relcard:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(44, 50, 66, .12);
}

.ss-relcard:hover .ss-relcard-photo,
.ss-relcard:hover .ss-photo-placeholder {
	transform: scale(1.05);
}

.ss-relcard-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e3d6c2;
}

.ss-relimg {
	position: absolute;
	inset: 0;
}

.ss-relcard-photo,
.ss-relcard-media .ss-photo-placeholder {
	transition: transform .3s;
}

.ss-relcard-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ss-relcard-media .ss-photo-placeholder-hint {
	display: none;
}

.ss-relcard-copy {
	padding: 24px 26px 28px;
}

.ss-relcard-eyebrow {
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--ss-clay);
	font-weight: 600;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.ss-relcard-copy h3 {
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var(--ss-navy);
}

.ss-relcard-copy p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(44, 50, 66, .65);
	margin: 0;
}

/* Responsive: 2 cards -> effectively 1 full-width visible on small screens,
   matching the design handoff's mobile behavior for horizontal scrolling
   card rows. */
@media (max-width: 640px) {
	.ss-relcard {
		flex: 0 0 85%;
	}
}