/*
Theme Name: 70s
Theme URI:
Author: Eric Hinzpeter
Author URI:
Description: A bold retro-accented block theme for marketing strategy and AI.
Version: 1.3.1
Requires at least: 6.4
Tested up to: 6.7
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: 70s
*/

/* === Transitions === */

:root .wp-element-button,
:root .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
	transform: translate(0, 0);
}

:root .wp-element-button:hover,
:root .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
}

:root .wp-element-button:active,
:root .wp-block-button__link:active {
	transform: translate(3px, 3px);
}

a {
	transition: color 0.2s ease;
}

/* === Card Polish === */

.wp-block-group.has-surface-background-color {
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
	border-radius: 6px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	transform: translate(0, 0);
}

.wp-block-columns .wp-block-group.has-surface-background-color:hover {
	box-shadow: 5px 5px 0 var(--wp--preset--color--contrast);
	transform: translate(-2px, -2px);
}

.wp-block-columns .wp-block-group.has-surface-background-color:active {
	box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
	transform: translate(1px, 1px);
}

/* === Equal-Height Cards Per Row === */

.wp-block-columns > .wp-block-column > .wp-block-group.has-surface-background-color,
.wp-block-post-template .wp-block-group.has-surface-background-color {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Description absorbs variable space — aligns textlink + pills across cards */
.wp-block-columns > .wp-block-column > .wp-block-group.has-surface-background-color > .wp-block-heading + p,
.wp-block-columns > .wp-block-column > .wp-block-group.has-surface-background-color > .wp-block-heading + .wp-block-paragraph {
	flex: 1;
}

/* For post-template cards (blog/featured), excerpt absorbs space */
.wp-block-post-template .wp-block-group.has-surface-background-color > .wp-block-post-excerpt {
	flex: 1;
}

/* === Card Color-Coded Top Borders === */

.wp-block-columns > .wp-block-column:nth-child(4n+1) .wp-block-group.has-surface-background-color {
	border-top: 5px solid var(--wp--preset--color--primary);
}

.wp-block-columns > .wp-block-column:nth-child(4n+2) .wp-block-group.has-surface-background-color {
	border-top: 5px solid var(--wp--preset--color--tertiary);
}

.wp-block-columns > .wp-block-column:nth-child(4n+3) .wp-block-group.has-surface-background-color {
	border-top: 5px solid var(--wp--preset--color--secondary);
}

.wp-block-columns > .wp-block-column:nth-child(4n+4) .wp-block-group.has-surface-background-color {
	border-top: 5px solid var(--wp--preset--color--accent);
}

/* === Card Pill Metadata === */

/* Shared pill base — taxonomy term links + shortcode spans */
.taxonomy-tool_used a,
.taxonomy-tool_category a,
.seventies-pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	padding: 0.3rem 0.8rem;
	border-radius: 4px;
	text-decoration: none;
	background-color: transparent;
	background-image: none;
	background-size: 0;
}

/* Tool Used — accent blue outline */
.taxonomy-tool_used a {
	border: 1.5px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.taxonomy-tool_used a:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

/* Tool Category — primary yellow outline */
.taxonomy-tool_category a {
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.taxonomy-tool_category a:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* Time Saved — secondary green outline */
.seventies-pill--time-saved {
	border: 1.5px solid var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

/* Static card pill placeholders */
.seventies-pill--tool {
	border: 1.5px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.seventies-pill--category {
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* Remove link underline animation from pill links */
.taxonomy-tool_used a,
.taxonomy-tool_category a {
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Separator between taxonomy terms */
.taxonomy-tool_used .wp-block-post-terms__separator,
.taxonomy-tool_category .wp-block-post-terms__separator {
	display: none;
}

/* === Link Underline Slide-in === */

.wp-block-post-content a:not(.wp-element-button),
.wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	text-decoration: underline;
	text-decoration-color: transparent;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-size: 0% 3px;
	background-repeat: no-repeat;
	background-position: left bottom;
	transition: background-size 0.3s ease, color 0.2s ease;
	padding-bottom: 2px;
}

.wp-block-post-content a:not(.wp-element-button):hover,
.wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):hover {
	background-size: 100% 3px;
}

/* === Navigation Polish === */

.wp-block-navigation a {
	position: relative;
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-navigation a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--wp--preset--color--primary);
	transition: width 0.25s ease;
}

.wp-block-navigation a:hover::after {
	width: 100%;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* === Section Panel Variants === */

/* Dark panel — links */
.has-contrast-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
}

.has-contrast-background-color a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--base);
}

/* Green panel — links */
.has-secondary-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

.has-secondary-background-color a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--primary);
}

/* Underline color override for dark/green panels */
.has-contrast-background-color .wp-block-post-content a:not(.wp-element-button),
.has-contrast-background-color .wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
}

.has-secondary-background-color .wp-block-post-content a:not(.wp-element-button),
.has-secondary-background-color .wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	background-image: linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base));
}

/* === Separator Accent === */

.wp-block-separator.has-primary-background-color {
	opacity: 1;
	border: none;
	height: 6px;
}

/* Retro Stripe Separator */
.wp-block-separator.is-style-retro-stripe {
	border: none;
	height: auto;
	opacity: 1;
	background: transparent;
	padding: 0;
	position: relative;
}

.wp-block-separator.is-style-retro-stripe::before {
	content: '';
	display: block;
	height: 18px;
	background: repeating-linear-gradient(
		to bottom,
		var(--wp--preset--color--primary) 0px,
		var(--wp--preset--color--primary) 4px,
		transparent 4px,
		transparent 7px,
		var(--wp--preset--color--tertiary) 7px,
		var(--wp--preset--color--tertiary) 11px,
		transparent 11px,
		transparent 14px,
		var(--wp--preset--color--secondary) 14px,
		var(--wp--preset--color--secondary) 18px
	);
}

/* === Typography Polish === */

.is-style-label,
.wp-block-heading.is-style-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Hero H1 text-shadow */
.has-surface-alt-background-color h1 {
	text-shadow: 2px 2px 0 var(--wp--preset--color--primary);
}

/* === Image Polish === */

.wp-block-image img {
	border-radius: 4px;
}

/* === Social Links === */

.wp-block-social-links a {
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
	border-radius: 50%;
}

.wp-block-social-links a:hover {
	opacity: 1;
	transform: scale(1.15);
	background-color: var(--wp--preset--color--primary);
}

/* === Scroll Entrance Animations (opt-in via "animate-on-scroll" CSS class) === */

@media (prefers-reduced-motion: no-preference) {
	@keyframes fade-slide-up {
		from { opacity: 0; transform: translateY(1.5rem); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes heading-reveal {
		from { opacity: 0; clip-path: inset(0 0 100% 0); }
		to   { opacity: 1; clip-path: inset(0 0 0% 0); }
	}

	/* Default: fade + slide up */
	.animate-on-scroll {
		animation: fade-slide-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	/* Variant: clip-path wipe reveal (add both classes: "animate-on-scroll reveal") */
	.animate-on-scroll.reveal {
		animation: heading-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}
}

/* === Glossary Index === */

.glossary-wrapper {
	scroll-behavior: smooth;
}

/* A-Z Navigation pills */
.glossary-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 3rem;
}

.glossary-nav-link {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background-image: none;
	background-size: 0;
	box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	transform: translate(0, 0);
	background-color: var(--wp--preset--color--primary);
}

.glossary-nav-link:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}

.glossary-nav-link:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 var(--wp--preset--color--contrast);
}

/* Letter card grid */
.glossary-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 600px) {
	.glossary-content {
		grid-template-columns: 1fr;
	}
}

.glossary-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}

/* 4-color top border cycling */
.glossary-card:nth-child(4n+1) { border-top: 5px solid var(--wp--preset--color--primary); }
.glossary-card:nth-child(4n+2) { border-top: 5px solid var(--wp--preset--color--tertiary); }
.glossary-card:nth-child(4n+3) { border-top: 5px solid var(--wp--preset--color--secondary); }
.glossary-card:nth-child(4n+4) { border-top: 5px solid var(--wp--preset--color--accent); }

.glossary-letter-heading {
	font-family: var(--wp--preset--font-family--righteous);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.2;
	border-bottom: 4px solid var(--wp--preset--color--primary);
	padding-bottom: 0.5rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Term list */
.glossary-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.glossary-list li {
	padding: 0.4rem 0;
}

.glossary-list a {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-size: 0% 3px;
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 2px;
	transition: background-size 0.3s ease, color 0.2s ease;
}

.glossary-list a:hover {
	background-size: 100% 3px;
}

/* === Retro Arrow Textlinks === */

.seventies-textlink a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 0.5rem;
	font-weight: 700;
	font-size: 1.1em;
	color: var(--wp--preset--color--primary);
	text-shadow:
		1px 1px 0 var(--wp--preset--color--tertiary),
		2px 2px 0 var(--wp--preset--color--secondary);
	transition: transform 0.25s ease, color 0.2s ease, text-shadow 0.25s ease;
}

.seventies-textlink a:hover::before {
	transform: translateX(5px);
	color: var(--wp--preset--color--tertiary);
	text-shadow:
		2px 2px 0 var(--wp--preset--color--primary),
		4px 4px 0 var(--wp--preset--color--accent);
}

/* === Groundingpage === */

.groundingpage-facts {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
}

.groundingpage-facts tr {
	border-bottom: 1px solid var(--wp--preset--color--surface-alt);
}

.groundingpage-facts tr:last-child {
	border-bottom: none;
}

.groundingpage-facts th {
	text-align: left;
	vertical-align: top;
	padding: 0.75rem 1.5rem 0.75rem 0;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	width: 40%;
}

.groundingpage-facts td {
	padding: 0.75rem 0;
	color: var(--wp--preset--color--contrast);
}

.groundingpage-facts a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-size: 0% 3px;
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 2px;
	transition: background-size 0.3s ease;
}

.groundingpage-facts a:hover {
	background-size: 100% 3px;
}

.groundingpage-meta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	color: #888;
	line-height: 1.8;
}

.groundingpage-meta p {
	margin: 0;
}

.groundingpage-meta a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.groundingpage-meta a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.groundingpage-facts th {
		display: block;
		width: 100%;
		padding-bottom: 0.2rem;
	}

	.groundingpage-facts td {
		display: block;
		padding-top: 0;
		padding-bottom: 0.75rem;
	}
}

/* === Mobile Responsive === */

@media (max-width: 768px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}