/*
Theme Name: Raccoon Creative Co
Theme URI: https://raccreative.co
Author: Jay (Everside)
Description: Custom editorial block theme for raccreative.co — petrol, gold, and cream with Newsreader, Hanken Grotesk, and IBM Plex Mono. Built for fast shared hosting and clean core-block editing.
Version: 1.0.7
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rcc
*/

/* ============ base ============ */
html { scroll-behavior: smooth; }

/* Legacy Astra palette variables: SureForms (and some old content) was configured
   to inherit these from the Astra theme. Astra is gone, so map them to our palette
   or those elements render colorless (e.g. the contact form as a white block). */
:root {
	--ast-global-color-0: #15514E; /* primary accent -> petrol bright */
	--ast-global-color-1: #123F3E; /* secondary -> petrol */
	--ast-global-color-2: #1A2625; /* headings/text -> ink */
	--ast-global-color-3: #54524A; /* body text -> slate */
	--ast-global-color-4: #F3EFE6; /* surface -> cream */
	--ast-global-color-5: #FBF8F1; /* surface alt -> paper */
	--ast-global-color-6: #E2D8C5; /* borders -> tan line */
	--ast-global-color-7: #C49A52; /* accent -> gold */
	--ast-global-color-8: #0F3635; /* deep -> petrol deep */
}
::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--petrol); }
img { height: auto; }

/* legacy inline-highlight marks: kill the browser's default yellow, keep intended text colors */
mark { background-color: transparent; }

/* full-bleed sections sit flush — no default block gap at the root or between
   homepage sections (intentional spacing is done with explicit spacer blocks) */
.wp-site-blocks > * + * { margin-block-start: 0; }
.home .wp-block-post-content > * + *,
.page-template-page-no-title .wp-block-post-content > * + * { margin-block-start: 0; }

/* mono utility — labels, tags, captions */
.rcc-mono,
.rcc-mono a {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* kicker — small mono section opener */
.rcc-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-bright);
	margin-bottom: 0.9rem;
}

/* arrow link — underlined utility link */
.rcc-link-arrow a,
a.rcc-link-arrow {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--petrol-bright);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--petrol-bright);
	padding-bottom: 3px;
	white-space: nowrap;
}
.rcc-link-arrow a:hover,
a.rcc-link-arrow:hover { color: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); }

/* ============ nav ============ */
/* Sticky header: position:sticky must live on <header>, not .rcc-nav.
   The header's parent (.wp-site-blocks) is the full-height page container it can
   travel within; .rcc-nav's parent is <header>, which is exactly its own height,
   so sticky there is a no-op. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-template-part { top: 46px; }
}
/* Anchor targets must clear the sticky header (scroll-behavior is smooth and the
   review posts use .rcc-toc anchor lists). */
html { scroll-padding-top: 5rem; }

.rcc-nav {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--cream-text);
	border-bottom: 1px solid rgba(242, 234, 216, 0.12);
}
.rcc-nav .wp-block-site-title a { color: var(--wp--preset--color--cream-text); text-decoration: none; }
.rcc-nav .wp-block-site-title a:hover { color: var(--wp--preset--color--gold); }
.rcc-tagline {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.rcc-nav .wp-block-navigation a,
.rcc-nav .wp-block-navigation .wp-block-navigation-item__content,
.rcc-nav .wp-block-navigation .wp-block-navigation-item__content a {
	color: var(--wp--preset--color--cream-text);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}
.rcc-nav .wp-block-navigation a:hover,
.rcc-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.rcc-nav .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}
.rcc-nav .wp-block-site-logo img { border-radius: 50%; }

/* ============ dark (petrol) sections ============ */
.rcc-dark { background: var(--wp--preset--color--petrol); color: var(--wp--preset--color--cream-text); }
.rcc-dark-bright { background: var(--wp--preset--color--petrol-bright); color: var(--wp--preset--color--cream-text); }
.rcc-dark h1, .rcc-dark h2, .rcc-dark h3,
.rcc-dark-bright h1, .rcc-dark-bright h2, .rcc-dark-bright h3 { color: #F6F0E1; }
.rcc-dark p, .rcc-dark-bright p { color: var(--wp--preset--color--sage); }
.rcc-dark .rcc-kicker, .rcc-dark-bright .rcc-kicker { color: var(--wp--preset--color--gold); }
.rcc-dark-bright h1 em, .rcc-dark h2 em { font-style: italic; color: var(--wp--preset--color--gold); }
.rcc-dark a, .rcc-dark-bright a { color: var(--wp--preset--color--cream-text); }
.rcc-dark a:hover, .rcc-dark-bright a:hover { color: var(--wp--preset--color--gold); }

/* outline button on dark sections */
.rcc-dark-bright .is-style-outline .wp-block-button__link,
.rcc-dark .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream-text);
	border: 1px solid rgba(242, 234, 216, 0.45);
}
.rcc-dark-bright .is-style-outline .wp-block-button__link:hover,
.rcc-dark .is-style-outline .wp-block-button__link:hover {
	background: rgba(242, 234, 216, 0.1);
	color: var(--wp--preset--color--cream-text);
}

/* mono footnote row (hero credibility line, footer small print) */
.rcc-mono-note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .06em;
	color: #8FA39C;
}
.rcc-dark-bright p.rcc-mono-note, .rcc-dark p.rcc-mono-note { color: #8FA39C; }

/* ============ tan band ============ */
.rcc-band-tan { background: var(--wp--preset--color--tan); border-top: 1px solid #D2C09C; border-bottom: 1px solid #D2C09C; }
.rcc-band-tan .rcc-kicker { color: var(--wp--preset--color--petrol-bright); }

/* ============ cards ============ */
.rcc-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--tan-line);
	border-radius: 5px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.rcc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 28px 60px -36px rgba(26, 38, 37, 0.45);
}
.rcc-card h3 a, .rcc-card h4 a, .rcc-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.rcc-card h3 a:hover, .rcc-card .wp-block-post-title a:hover { color: var(--wp--preset--color--petrol-bright); }
.rcc-card img { display: block; width: 100%; }
.rcc-card p { color: var(--wp--preset--color--slate); }

/* image + overlaid badge */
.rcc-media { position: relative; }
.rcc-media .rcc-badge { position: absolute; top: 14px; left: 14px; margin: 0; }

.rcc-badge {
	display: inline-block;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--petrol);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
}

.rcc-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .05em;
	color: #1C6360;
	background: rgba(21, 81, 78, 0.07);
	border: 1px solid rgba(21, 81, 78, 0.2);
	padding: 3px 8px;
	border-radius: 2px;
	margin-right: 4px;
}

/* ============ query-loop card grid ============ */
.rcc-cards .wp-block-post {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--tan-line);
	border-radius: 5px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.rcc-cards .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 28px 60px -36px rgba(26, 38, 37, 0.45);
}
.rcc-cards .wp-block-post-featured-image { margin: 0; }
.rcc-cards .wp-block-post-featured-image img { display: block; }
.rcc-cards .wp-block-post-title { line-height: 1.14; }
.rcc-cards .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.rcc-cards .wp-block-post-title a:hover { color: var(--wp--preset--color--petrol-bright); }
.rcc-cards .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--slate); }
.rcc-cards .taxonomy-category { letter-spacing: .12em; }
.rcc-cards .taxonomy-category a { color: #1C6360; text-decoration: none; }
.rcc-cards .wp-block-post-date { color: var(--wp--preset--color--taupe); }
.rcc-cards .wp-block-post-date a { color: var(--wp--preset--color--taupe); text-decoration: none; }

/* pagination */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); }

/* ============ TOC + CTA boxes (used inside reviews) ============ */
.rcc-toc, .rcc-cta {
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(18, 63, 62, 0.25);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.rcc-toc ul { margin: 0.4rem 0 0; }
.rcc-toc a { text-decoration: none; }
.rcc-toc a:hover { color: var(--wp--preset--color--gold); }

/* ============ tables (specs, EQ, pros/cons) ============ */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table td, .wp-block-table th {
	border: 1px solid var(--wp--preset--color--tan-line);
	padding: 0.55em 0.8em;
}
.wp-block-table thead th, .wp-block-table tr:first-child td {
	background: rgba(18, 63, 62, 0.06);
}
.wp-block-table figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--taupe);
}

/* ============ galleries / tiles ============ */
.wp-block-gallery .wp-block-image img { border-radius: 3px; }
.rcc-tile img { border-radius: 4px; border: 1px solid var(--wp--preset--color--tan-line); }
.rcc-tile p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-bright);
	margin-top: 0.6rem;
}

/* portrait image on dark sections */
.rcc-portrait img { border-radius: 5px; border: 1px solid #1C5350; display: block; }

/* signature line (atelier section) */
.rcc-sig {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.6rem;
}
.rcc-sig .rcc-handle {
	font-family: var(--wp--preset--font-family--mono);
	font-style: normal;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-left: 0.75rem;
}

/* ============ single post ============ */
.rcc-post-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}
.rcc-post-meta a { color: #1C6360; text-decoration: none; }

/* ============ comments ============ */
.rcc-comments .wp-block-comments-title {
	font-size: var(--wp--preset--font-size--xl);
}
.rcc-comments .wp-block-avatar img { border-radius: 50%; display: block; }
.rcc-comments .wp-block-comment-content { color: var(--wp--preset--color--slate); }
.rcc-comments .wp-block-comment-reply-link a,
.rcc-comments .wp-block-comment-date a {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--tan-line);
	border-radius: 3px;
	padding: 0.6rem 0.8rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	width: 100%;
	box-sizing: border-box;
}
.comment-form textarea { min-height: 140px; }
.comment-form .submit {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--petrol);
	border: none;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.5rem;
	cursor: pointer;
}
.comment-form .submit:hover { background: var(--wp--preset--color--cream-text); }
.comment-reply-title, .comment-form label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}
.comment-reply-title { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink); }

/* ============ footer ============ */
.rcc-footer { background: var(--wp--preset--color--petrol); color: var(--wp--preset--color--cream-text); }
.rcc-footer p { color: var(--wp--preset--color--sage); }
.rcc-footer a { color: #D8E0DB; text-decoration: none; }
.rcc-footer a:hover { color: var(--wp--preset--color--gold); }
.rcc-footer .rcc-foot-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.4rem;
}
.rcc-footer .rcc-foot-bottom {
	border-top: 1px solid rgba(242, 234, 216, 0.14);
}
.rcc-footer .rcc-mono-note a { color: #8FA39C; }
.rcc-footer .wp-block-site-title a { color: #F6F0E1; }

/* ============ small screens ============ */
@media (max-width: 781px) {
	.rcc-nav .wp-block-group { flex-wrap: wrap; }
}