/*
Theme Name: TrendMacro
Theme URI: https://trendmacro.com
Author: Crucial Creative
Author URI: https://crucialcreative.com
Description: A modern, minimal WordPress block theme emulating the look of the TrendMacro (Drupal "wayfire") site — Roboto Condensed type, red accent, centered single-column layout with a right sidebar.
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.1.28
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trendmacro
*/

/*
 * Most styling is driven by theme.json. The rules below cover details that
 * theme.json cannot express cleanly — the header's black nav divider, the
 * footer's muted top-bordered disclaimer, and view-row spacing — mirroring
 * the original wayfire theme.
 */

/* Header: black divider above the navigation. The nav group runs at the wide
   width so the keyline overhangs the content column on both sides (as on the
   legacy site); the links themselves stay aligned to the content width. The tag
   is on the wrapper (<header class="wp-block-template-part">), so the selector
   must be header.wp-block-template-part, not a descendant. */
header.wp-block-template-part .site-header__nav {
	border-top: 1px solid #000;
	margin-top: 1.5em;
	padding-top: 0.625em;
}

.site-header__nav .trend-nav {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

/* Top row: logo on the left, account links on the right, side by side. */
.site-header__top {
	gap: 1em;
}

/* Top-right account links (My Account | Logout / Login | Register). */

.trend-account a {
	color: var(--wp--preset--color--primary);
}

.trend-account a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.trend-account__sep {
	color: #ccc;
}

/* Primary nav: wrapping flex row of muted links, black underline when current.
   Collapses to a "Menu" toggle on small screens (see the media query below). */
.trend-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
}

.trend-nav a {
	color: var(--wp--preset--color--muted);
}

.trend-nav a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.trend-nav a.is-current {
	color: #000;
	border-bottom: 1px solid #000;
}

/* The hamburger toggle is desktop-hidden; the media query below reveals it. */
.trend-nav__toggle {
	display: none;
}

/* Below ~782px the link row would wrap into an unusable stack, so collapse it
   into the legacy site's small-screen nav: a full-width red bar with a centred
   white "Menu" toggle that opens a centred, stacked white menu. */
@media (max-width: 782px) {
	/* Keep content off the screen edges. The nav bar stays edge-to-edge: its
	   100vw full-bleed already offsets this padding (margin-left resolves to
	   -10px against the padded header), so it still reaches both edges. */
	header.wp-block-template-part > .wp-block-group,
	main.wp-block-group,
	footer.wp-block-template-part {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Drop the desktop keyline; the red bar is the separator now. */
	header.wp-block-template-part .site-header__nav {
		border-top: 0;
		margin-top: 1em;
		padding-top: 0;
	}

	/* Full-bleed red bar — break out of the constrained content column. */
	.site-header__nav .trend-nav {
		max-width: none;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: 0;
		padding: 0.7em 1em;
		box-sizing: border-box;
		background: var(--wp--preset--color--primary);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.trend-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		padding: 0.2em 0;
		background: none;
		border: 0;
		font: inherit;
		color: #fff;
		cursor: pointer;
	}

	/* CSS hamburger (white): middle bar is the element, outer two are pseudo. */
	.trend-nav__bars,
	.trend-nav__bars::before,
	.trend-nav__bars::after {
		content: "";
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
	}

	.trend-nav__bars {
		position: relative;
	}

	.trend-nav__bars::before {
		position: absolute;
		top: -6px;
	}

	.trend-nav__bars::after {
		position: absolute;
		top: 6px;
	}

	/* Shrink to the widest link so the parent's align-items:center centres the
	   whole block, while the links stay left-aligned to each other inside it. */
	.trend-nav__menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9em;
		margin-top: 1em;
	}

	.trend-nav.is-open .trend-nav__menu {
		display: flex;
	}

	/* White links on the red bar. */
	.trend-nav__menu a,
	.trend-nav__menu a:hover {
		color: #fff;
	}

	.trend-nav__menu a:hover {
		opacity: 0.85;
	}

	.trend-nav__menu a.is-current {
		color: #fff;
		border-bottom-color: #fff;
	}

	/* Open state: the middle bar hides and the outer two cross into an X. */
	.trend-nav.is-open .trend-nav__bars {
		background: transparent;
	}

	.trend-nav.is-open .trend-nav__bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.trend-nav.is-open .trend-nav__bars::after {
		top: 0;
		transform: rotate(-45deg);
	}
}

.trend-account-actions {
	margin-top: 1.5em;
}

/* Post / listing meta — muted, slightly smaller, tight line-height. */
.post-meta,
.wp-block-post-date,
.wp-block-post-author {
	color: #888;
	font-size: 0.9em;
	line-height: 1.3;
}

/* Footer disclaimer block — small, muted, with a hairline top border. As with
   the header, the tag is on the wrapper (<footer class="wp-block-template-part">).
   The border sits on the paragraph so it spans the 760px content column (as the
   old .region-footer did inside its container), not the full viewport width. */
footer.wp-block-template-part {
	font-size: 0.8em;
	color: #888;
	margin-top: 2.5em;
}

footer.wp-block-template-part p {
	border-top: 1px solid #ddd;
	padding-top: 2em;
	margin: 0;
}

footer.wp-block-template-part a {
	color: #888;
}

footer.wp-block-template-part a:hover {
	color: #ee3a43;
}

/* Emphasis matches wayfire: bold/strong render in solid black, not heavier. */
strong {
	color: #000;
	font-weight: 400;
}

em {
	font-style: italic;
}

/* --- Content archives (trendmacro/content-list block) --- */
.trend-list {
	display: flex;
	flex-direction: column;
	gap: 1.75em;
	margin-top: 1.5em;
}

/* Row titles were base-size (16px) links in wayfire, not enlarged — same as the
   home dashboard cards. The old theme declared weight 500 but only loaded Roboto
   Condensed 300/400/700, so the browser rendered 400; match that. */
.trend-row__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 0.2em;
}

.trend-row .post-meta {
	margin: 0.15em 0 0.4em;
}

.trend-row__summary {
	color: #444;
}

.trend-row__summary p {
	margin: 0 0 0.5em;
}

/* Recommended Reading: month group headings + disclaimer note. */
.trend-month {
	font-weight: 300;
	font-size: 20px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.2em;
	margin: 1.5em 0 0.75em;
}

/* Indent each month's listings so they sit in from the flush-left month heading,
   and tighten the row spacing to match the live site (12px between rows). */
.trend-list--rec {
	gap: 12px;
	margin-top: 0;
}

.trend-list--rec .trend-row {
	margin-left: 2em;
}

.trend-rec-note {
	font-size: 14px;
	color: #222222;
	line-height: 1.4;
}

.trend-suggested {
	display: inline-block;
	vertical-align: middle;
	color: #ee3a43;
	opacity: 0.6;
	margin-left: 0.15em;
}

/* Pagination. */
.trend-pagination {
	margin-top: 2.5em;
}

.trend-pagination .page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trend-pagination .page-numbers .current {
	color: #000;
	font-weight: 500;
}

.trend-empty {
	color: #888;
	margin-top: 1.5em;
}

/* --- Video single page --- */
.trend-video-meta {
	margin-top: 0.2em;
}

.trend-video-embed {
	margin: 1.5em 0;
}

/* Make the embedded video fill the content column and keep a 16:9 frame.
   The oEmbed iframe ships with fixed width/height attributes, so without this
   it renders at its native size instead of spanning the content area. */
.trend-video-embed .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.trend-video-embed .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.trend-video-body {
	margin: 1.5em 0;
}

.trend-strategic {
	margin-top: 2.5em;
}

.trend-related {
	margin-top: 2.5em;
	border-top: 1px solid #ddd;
	padding-top: 1.25em;
}

/* Section headings match the page title (h1): x-large, light weight. Scoped to
   the direct child so it doesn't leak into archive-row titles (also <h2>) that
   the Related list renders inside .trend-related. */
.trend-strategic > h2,
.trend-related > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.5;
	margin: 0 0 0.5em;
}

.trend-strategic-markets {
	margin: 0 0 0.6em;
}

/* Market tags link to the Strategy Dashboard but stay looking like plain text. */
.trend-strategic-markets a {
	color: inherit;
	text-decoration: none;
}

.trend-strategic-markets a:hover {
	text-decoration: underline;
}

.trend-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.trend-related-list .post-meta {
	display: inline;
}

/* --- Strategy Dashboard + market pages --- */
.trend-strategy-feed {
	display: flex;
	flex-direction: column;
	gap: 2em;
	margin-top: 1em;
}

/* The dated item title matches the archive row titles: base 16px/400, not
   enlarged (see .trend-row__title). */
.trend-strategy-date {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}

.trend-strategy-date a {
	color: var(--wp--preset--color--primary);
}

.trend-edit {
	font-size: 0.7em;
	color: #888;
	font-weight: 300;
}

.trend-strategy-markets {
	margin: 0.2em 0 0.5em;
}

.trend-strategy-markets a {
	color: #888;
}

.trend-strategy-markets a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.trend-strategy-text p {
	margin: 0 0 0.8em;
}

/* "Archives" market browse (sidebar). */
.trend-archives h2 {
	font-weight: 300;
	margin-bottom: 0.5em;
}

/* Sidebar links across all three archive sidebars (data-insight categories,
   markets, report authors) share the Client Report page's muted style — red only
   on hover — and the current page's link sits at weight 400 (body text is 300). */
.trend-archives a {
	color: #444;
}

.trend-archives a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.trend-archives a.is-current {
	font-weight: 400;
}

.trend-archives-group {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	color: #222;
	margin: 1em 0 0.2em;
}

.trend-archives-list {
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
}

.trend-archives-list li {
	margin: 0.1em 0;
	padding-left: 1em;
}

/* Top-level categories with no children (e.g. Recommended Reading, Miscellaneous):
   flush-left links, aligned with the bold parent group headers. */
.trend-archives-top {
	margin: 1em 0 0.2em;
}

/* "Client Report Archives" author list — a flat, flush-left list (no group
   headers or indent), the byline names muted like the legacy sidebar. */
.trend-archives-authors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trend-archives-authors li {
	margin: 0.2em 0;
}

/* "About Us" section nav (sidebar). Mirrors the archives sidebar styling: muted
   links, red on hover, weight 400 for the current page. "Who We Are" links to
   Donald Luskin and shares the same link style, with the three principals
   indented beneath it. The bold .trend-about-label is only a fallback for when
   that page is missing. */
.trend-about-nav h2 {
	font-weight: 300;
	margin-bottom: 0.5em;
}

.trend-about-list,
.trend-about-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trend-about-list > li {
	margin: 0.35em 0;
}

.trend-about-nav a {
	color: #444;
}

.trend-about-nav a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.trend-about-nav a.is-current {
	font-weight: 400;
}

.trend-about-label {
	display: block;
	font-weight: 700;
	color: #222;
	margin: 0.35em 0 0.2em;
}

.trend-about-sublist li {
	margin: 0.1em 0;
	padding-left: 1em;
}

/* --- Front page dashboard (trendmacro/home-featured block) --- */
.trend-home {
	display: grid;
	/* Left column slightly wider than the right, mirroring the original home
	   page (~53/47); the gap is taken out of the available width first. */
	grid-template-columns: 1.13fr 1fr;
	gap: 2em 3em;
	align-items: start;
}

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

.trend-home__tagline {
	font-weight: 400;
	margin: 0 0 1.25em;
}

/* Each "Most Recent X" card stacks within its column, ~2em apart (a view row's
   1.5em bottom margin plus the next heading's 0.5em top in the old theme). The
   spacing is on adjacent cards rather than a column gap so the tagline can set
   its own (smaller) gap above the first card. */
.trend-home__col {
	display: flex;
	flex-direction: column;
}

.trend-home-card + .trend-home-card {
	margin-top: 2em;
}

.trend-home-card__heading {
	font-weight: 300;
	margin: 0 0 0.2em;
}

/* Titles were base-size (16px) links in wayfire. The old theme asked for
   font-weight 500 but only loaded Roboto Condensed 300/400/700, so the browser
   fell back to 400 — match that rendered weight, not the declared one. */
.trend-home-card__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}

.trend-home-card__meta {
	margin: 0 0 0.25em;
}

.trend-home-card__excerpt {
	color: #444;
}

.trend-home-card__excerpt p {
	margin: 0 0 0.6em;
}

.trend-home-card__excerpt p:last-child {
	margin-bottom: 0;
}

/* The card title carries its own "(edit)" affordance; keep it muted. */
.trend-home-card__title .trend-edit {
	font-size: 0.8em;
	color: #ccc;
}

/* Guest sign-in card (right column of the logged-out home): a bordered card with
   the heading, form, the "Currently Inside" teasers, and a request-access line. */
.trend-home-login {
	box-sizing: border-box;
	padding: 1.75em;
	background: #fff;
	border: 1px solid #e2e2e2;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.04);
}

/* Card heading, led by the red TrendMacro triangle. */
.trend-home-login__heading {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.6em;
}

.trend-home-login__heading::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #ee3a43;
}

.trend-home-login form {
	margin: 0;
}

.trend-home-login form p {
	margin: 0 0 0.9em;
}

/* Field labels sit above each input, matching the branded wp-login.php screen. */
.trend-home-login label {
	display: block;
	font-family: inherit;
	font-weight: 300;
	font-size: 0.875rem;
	color: #555;
	margin-bottom: 0.15em;
}

.trend-home-login__subtitle {
	color: #888;
	font-size: 0.9em;
	margin: 0 0 1.25em;
}

.trend-home-login input[type="text"],
.trend-home-login input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	/* Inputs don't inherit the body's light weight by default. */
	font-weight: 300;
}

.trend-home-login input[type="text"]:focus,
.trend-home-login input[type="password"]:focus {
	border-color: #ee3a43;
	box-shadow: 0 0 0 1px #ee3a43;
	outline: 0;
}

/* Remember Me (left) and Lost your password? (right) share one row. */
.trend-home-login .login-remember {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.35em 0 1em;
}

.trend-home-login .login-remember label {
	display: inline;
	margin: 0;
	font-size: 0.9rem;
}

.trend-home-login__lostpw {
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Full-width Log In button. */
.trend-home-login .login-submit {
	margin: 0;
}

.trend-home-login .login-submit input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #ee3a43;
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 0.6em 1.4em;
	font-family: inherit;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
}

.trend-home-login .login-submit input:hover {
	background: #ff0b17;
}

/* "Currently Inside": a centred divider label, then the locked gated teasers. */
.trend-inside {
	margin-top: 1.75em;
}

.trend-inside__divider {
	display: flex;
	align-items: center;
	gap: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	color: #999;
	margin-bottom: 1.1em;
}

.trend-inside__divider::before,
.trend-inside__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e2e2e2;
}

.trend-inside__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9em;
}

.trend-inside__item {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
}

.trend-inside__lock {
	flex: none;
	color: #aaa;
	margin-top: 0.15em;
}

.trend-inside__title {
	font-weight: 400;
	line-height: 1.3;
}

.trend-inside__meta {
	color: #888;
	font-size: 0.9em;
	margin-top: 0.1em;
}

.trend-inside__cta {
	text-align: center;
	color: #888;
	font-size: 0.9em;
	margin: 1.5em 0 0;
}

/* --- Forms (registration) --- */
.trend-register {
	max-width: 26em;
}

/* Intro copy above the key field: orients clients before the form. */
.trend-register__intro {
	margin-bottom: 1.5em;
}

.trend-register__intro p {
	margin: 0 0 0.5em;
}

.trend-register input[type="text"],
.trend-register input[type="email"],
.trend-register input[type="password"],
.trend-account-page input[type="text"],
.trend-account-page input[type="email"] {
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: 1em;
}

.trend-register label,
.trend-account-page label {
	font-size: 0.9em;
	color: #555;
}

.trend-account-page {
	max-width: 26em;
}

.trend-button {
	background: #ee3a43;
	color: #fff;
	border: 0;
	padding: 0.6em 1.4em;
	font-family: inherit;
	font-size: 1em;
	cursor: pointer;
}

.trend-button:hover {
	background: #ff0b17;
}

.trend-form-error {
	background: #fdecea;
	border-left: 3px solid #ee3a43;
	padding: 0.6em 0.9em;
	color: #a01b1b;
}

.trend-form-success {
	background: #edf7ed;
	border-left: 3px solid #4c9a4c;
	padding: 0.6em 0.9em;
	color: #1e6b1e;
}

.trend-form-alt {
	font-size: 0.9em;
	color: #888;
}

/* Honeypot — hidden from people, present for bots. */
.trend-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}