/* Golden Throne Recipes
   ---------------------
   These are namespaced --gtr-* rather than --gt-*, because the Golden Throne
   child theme already owns --gt-accent and --gt-radius on :root. Declaring the
   same names here would shadow the theme's values inside every plugin
   component. Instead the two shared tokens fall through to the theme, so
   retuning the theme retunes the plugin with it. The fallbacks are the theme's
   current values, used only if the plugin runs somewhere else. */

:root {
	--gtr-accent: var(--gt-accent, #e86633);
	--gtr-radius: var(--gt-radius, 6px);

	--gtr-credit: #b8860b;          /* credit / attribution gold */
	--gtr-credit-ink: #4a3a10;
	--gtr-credit-bg: #fdf6e6;
	--gtr-line: rgba(128, 128, 128, 0.28);
	--gtr-line-soft: rgba(128, 128, 128, 0.16);
	--gtr-muted: rgba(128, 128, 128, 0.55);
	--gtr-gap: 1.5rem;
}

.gt-recipe,
.gt-prov,
.gt-glossary,
.gt-filters,
.gt-home,
.gt-browse,
.gt-favourites {
	font-family: inherit;
	color: inherit;
}

/* -------------------------------------------------------------------------
   Credit banner - always the first thing on the page
   ---------------------------------------------------------------------- */

.gt-prov {
	margin: 0 0 2rem;
	padding: 1.1rem 1.25rem 1.15rem;
	border: 1px solid var(--gtr-line);
	border-left: 5px solid;
	border-radius: var(--gtr-radius);
	line-height: 1.55;
}

.gt-prov__tag {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	opacity: 0.75;
}

.gt-prov__line {
	margin: 0.3rem 0 0;
}

/* The byline itself - sized up, because this is the point of the block. */
.gt-prov__line--credit {
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.25;
}

.gt-prov__line--sub {
	font-size: 0.93rem;
	opacity: 0.9;
}

.gt-prov--external {
	background: var(--gtr-credit-bg);
	border-left-color: var(--gtr-credit);
	color: var(--gtr-credit-ink);
}

.gt-prov--external a {
	color: #7a5a06;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gt-prov__support {
	display: inline-block;
	margin-top: 0.2rem;
	font-weight: 600;
}

/* Your own work - cooler, quieter, clearly a different class of entry. */
.gt-prov--own {
	background: rgba(232, 102, 51, 0.07);
	border-left-color: var(--gtr-accent);
}

.gt-prov__cta {
	margin: 2rem 0 0;
}

.gt-prov__button {
	display: inline-block;
	padding: 0.7rem 1.3rem;
	background: var(--gtr-credit);
	color: #fff !important;
	border-radius: var(--gtr-radius);
	font-weight: 600;
	text-decoration: none !important;
}

.gt-prov__button:hover,
.gt-prov__button:focus {
	background: #96700a;
}

.gt-prov__sitewide {
	max-width: 60ch;
	margin: 3rem auto 1rem;
	font-size: 0.9rem;
	text-align: center;
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Recipe blocks
   ---------------------------------------------------------------------- */

.gt-recipe {
	display: grid;
	gap: var(--gtr-gap);
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	margin: 2rem 0;
}

.gt-block {
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid var(--gtr-line);
	border-radius: var(--gtr-radius);
	scroll-margin-top: 5rem;
}

.gt-block:target {
	border-color: var(--gtr-credit);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

.gt-block__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
}

.gt-block__swatch {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.gt-block__name {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.3;
}

.gt-block__anchor,
.gt-term__anchor {
	opacity: 0;
	margin-left: 0.35rem;
	text-decoration: none;
	font-weight: 700;
	transition: opacity 0.12s;
}

.gt-block:hover .gt-block__anchor,
.gt-term:hover .gt-term__anchor,
.gt-block__anchor:focus,
.gt-term__anchor:focus {
	opacity: 0.55;
}

.gt-fav {
	flex: 0 0 auto;
	padding: 0.15rem 0.3rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--gtr-muted);
	transition: color 0.12s, transform 0.12s;
}

.gt-fav:hover {
	transform: scale(1.15);
}

.gt-fav.is-saved {
	color: #e0a521;
}

/* Stages */

.gt-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gt-step;
}

.gt-step {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.42rem 0 0.42rem 1.6rem;
	position: relative;
	border-top: 1px solid var(--gtr-line-soft);
	counter-increment: gt-step;
}

.gt-step:first-child {
	border-top: 0;
}

.gt-step::before {
	content: counter(gt-step);
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 1.1rem;
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	opacity: 0.45;
}

.gt-step__label {
	padding: 0.1rem 0.42rem;
	border-radius: var(--gtr-radius);
	background: rgba(128, 128, 128, 0.16);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	white-space: nowrap;
}

.gt-step__label--linked {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px dotted currentColor;
}

.gt-step__paint {
	flex: 1 1 8rem;
	font-size: 0.97rem;
}

.gt-block__note {
	margin: 0.8rem 0 0;
	padding-left: 0.7rem;
	border-left: 3px solid var(--gtr-line);
	font-size: 0.9rem;
	font-style: italic;
	opacity: 0.85;
}

.gt-recipe__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0;
	font-size: 0.92rem;
}

.gt-print {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--gtr-line);
	border-radius: var(--gtr-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 0.92rem;
}

/* -------------------------------------------------------------------------
   Listing summary (archives, taxonomy pages, search)
   ---------------------------------------------------------------------- */

.gt-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
}

.gt-summary__pill {
	padding: 0.22rem 0.6rem;
	border: 1px solid var(--gtr-line);
	border-radius: 100px;
	font-size: 0.84rem;
}

.gt-summary__pill--more {
	opacity: 0.7;
}

.gt-summary__meta {
	flex: 1 0 100%;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Glossary
   ---------------------------------------------------------------------- */

.gt-glossary__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gtr-line);
}

.gt-glossary__nav a {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--gtr-line);
	border-radius: var(--gtr-radius);
	font-size: 0.88rem;
	text-decoration: none;
	color: inherit;
}

.gt-glossary__nav a:hover {
	border-color: var(--gtr-accent);
	color: var(--gtr-accent);
}

.gt-glossary__group {
	margin-bottom: 2.5rem;
}

.gt-glossary__heading {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.gt-glossary__list {
	margin: 0;
}

.gt-term {
	padding: 0.9rem 0;
	border-top: 1px solid var(--gtr-line-soft);
	scroll-margin-top: 5rem;
}

.gt-term:target {
	border-left: 4px solid var(--gtr-credit);
	padding-left: 0.85rem;
	border-top-color: transparent;
}

.gt-term__name {
	margin: 0 0 0.3rem;
	font-weight: 700;
	font-size: 1rem;
}

.gt-term__text {
	margin: 0;
	max-width: 68ch;
	line-height: 1.6;
	opacity: 0.9;
}

/* -------------------------------------------------------------------------
   Full-width layout for recipe screens

   Twenty Fourteen reserves 182px on the left for the dark sidebar (drawn by
   .site:before) and ~29% on the right for the content sidebar. On recipe
   screens the body carries .gt-full-width, and these rules reclaim both so
   the card grid gets the whole column. Every selector is prefixed with
   body.gt-full-width, so specificity beats the theme's own rules regardless
   of load order, and nothing outside the recipe section is touched.
   ---------------------------------------------------------------------- */

body.gt-full-width .site-content {
	margin-left: 0;
	margin-right: 0;
}

body.gt-full-width .site:before {
	display: none;
}

body.gt-full-width #secondary,
body.gt-full-width .content-sidebar {
	display: none;
}

body.gt-full-width .search-box-wrapper {
	padding-left: 0;
}

body.gt-full-width .content-area,
body.gt-full-width .main-content {
	float: none;
	width: auto;
}

/* The theme caps .hentry at 672px and the inner blocks at 474px. Both have to
   go, or the grid stays in a narrow column inside a full-width page. */
body.gt-full-width .hentry,
body.gt-full-width .site-content .entry-header,
body.gt-full-width .site-content .entry-content,
body.gt-full-width .site-content .entry-summary,
body.gt-full-width .site-content .entry-meta,
body.gt-full-width .page-content {
	max-width: 100%;
}

/* Keep long-form prose readable even though the container is now wide. */
body.gt-full-width .gt-home__intro,
body.gt-full-width .gt-term__text {
	max-width: 68ch;
}

/* -------------------------------------------------------------------------
   Landing page
   ---------------------------------------------------------------------- */

.gt-home__intro {
	margin: 0 0 1.5rem;
	max-width: 60ch;
	font-size: 1.05rem;
	opacity: 0.9;
}

.gt-search {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
}

.gt-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--gtr-line);
	border-radius: var(--gtr-radius);
	background: transparent;
	color: inherit;
	font-size: 1rem;
}

.gt-search button {
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: var(--gtr-radius);
	background: var(--gtr-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

/* Hero cards */

/* Image on top, label underneath - the same shape as the Featured Content
   grid on the blog, so the recipe section reads as part of the same site. */

.gt-cards {
	display: grid;
	gap: 1.75rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	margin: 0 0 2.5rem;
}

.gt-card {
	display: block;
	text-decoration: none !important;
	color: inherit;
	transition: transform var(--gt-transition, 200ms ease);
}

.gt-card:hover,
.gt-card:focus {
	transform: translateY(-3px);
}

.gt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--gtr-radius);
	overflow: hidden;
	background-color: #1c1c1c;
	background-position: center;
	background-size: cover;
}

/* Old browsers without aspect-ratio still get a sensible box. */
@supports not (aspect-ratio: 1) {
	.gt-card__media {
		height: 13rem;
	}
}

.gt-card__media--plain {
	background-image: linear-gradient(140deg, #3a3a3a, #1e1e1e);
}

.gt-card__body {
	display: block;
	padding: 0.7rem 0.15rem 0;
}

.gt-card__title {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.gt-card__count {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	opacity: 0.7;
}

.gt-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	padding: 0.22rem 0.6rem;
	border-radius: 100px;
	background: var(--gtr-accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Tag pills */

.gt-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.gt-tags__label {
	margin-right: 0.25rem;
	font-size: 0.88rem;
	font-weight: 600;
	opacity: 0.7;
}

.gt-tag {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--gtr-line);
	border-radius: 100px;
	font-size: 0.86rem;
	text-decoration: none;
	color: inherit;
}

.gt-tag:hover,
.gt-tag:focus {
	border-color: var(--gtr-accent);
	color: var(--gtr-accent);
}

.gt-tag--more {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Painting Guides call to action

   Sits below the header, above the featured post grid, hard left.

   Deliberately a slow glow rather than a flash. Anything strobing above ~3Hz
   is a photosensitivity risk (WCAG 2.3.1) and reads as spam; a 2.6s pulse
   catches the eye without either problem, and stops entirely for anyone who
   has asked for reduced motion.
   ---------------------------------------------------------------------- */

.gt-cta-wrap {
	flex: 0 0 100%;   /* own row in the featured flex container */
	width: 100%;
	margin: 0 0 1.5rem;
	text-align: left;
}

.gt-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border-radius: var(--gtr-radius);
	background: var(--gtr-accent);
	color: #fff !important;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 0 0 0 rgba(232, 102, 51, 0.55);
	animation: gt-cta-pulse 2.6s ease-in-out infinite;
	transition: transform 0.18s ease, background 0.18s ease;
}

.gt-cta:hover,
.gt-cta:focus {
	background: #cf4f1d;
	transform: translateY(-2px);
	animation-play-state: paused;   /* settle once they are aiming at it */
}

.gt-cta__icon {
	font-size: 0.75em;
	opacity: 0.9;
}

@keyframes gt-cta-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(232, 102, 51, 0.5);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(232, 102, 51, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(232, 102, 51, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gt-cta {
		animation: none;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
}

/* -------------------------------------------------------------------------
   Browse pages (factions within a system)
   ---------------------------------------------------------------------- */

.gt-crumbs {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
}

.gt-crumbs a {
	text-decoration: none;
}

.gt-crumbs a:hover {
	text-decoration: underline;
}

.gt-crumbs__sep {
	margin: 0 0.5rem;
	opacity: 0.45;
}

.gt-browse__intro {
	max-width: 68ch;
	margin-bottom: 2rem;
}

.gt-group {
	margin: 0 0 2.75rem;
}

.gt-group__heading {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--gtr-line);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.8;
}

.gt-tiles {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.gt-group__empty {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.6;
}

/* Artwork with the name over it, rather than beneath - at this density the
   overlay reads faster and keeps the rows tight. */
.gt-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 8.5rem;
	padding: 0.85rem 1rem;
	border-radius: var(--gtr-radius);
	overflow: hidden;
	background-color: #232323;
	background-position: center;
	background-size: cover;
	text-decoration: none !important;
	color: #fff !important;
	transition: transform var(--gt-transition, 200ms ease);
}

.gt-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.gt-tile:hover,
.gt-tile:focus {
	transform: translateY(-3px);
}

.gt-tile--plain {
	background-image: linear-gradient(140deg, #3d3d3d, #1f1f1f);
}

.gt-tile__name {
	position: relative;
	z-index: 1;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.gt-tile__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 1;
	padding: 0.18rem 0.5rem;
	border-radius: 100px;
	background: var(--gtr-accent);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Favourites
   ---------------------------------------------------------------------- */

.gt-fav-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3rem;
	height: 3.3rem;
	border-radius: 50%;
	background: var(--gtr-credit);
	color: #fff !important;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.gt-fav-float:hover,
.gt-fav-float:focus {
	background: var(--gtr-accent);
}

.gt-fav-float__count {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.3rem;
	border-radius: 100px;
	background: #222;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4rem;
	text-align: center;
}

.gt-favourites__empty {
	padding: 2rem 0;
	opacity: 0.75;
}

.gt-favourites__item {
	padding: 1rem 0;
	border-top: 1px solid var(--gtr-line-soft);
}

.gt-favourites__item:first-child {
	border-top: 0;
}

.gt-favourites__item h3 {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
}

.gt-favourites__blocks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gt-favourites__blocks a {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--gtr-line);
	border-radius: 100px;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
	text-transform: capitalize;
}

.gt-favourites__blocks a:hover {
	border-color: var(--gtr-accent);
	color: var(--gtr-accent);
}

/* -------------------------------------------------------------------------
   Filters
   ---------------------------------------------------------------------- */

.gt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2rem;
}

.gt-filters select,
.gt-filters button {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--gtr-line);
	border-radius: var(--gtr-radius);
	font-size: 0.95rem;
	background: transparent;
	color: inherit;
}

.gt-filters button {
	background: var(--gtr-accent);
	color: #fff;
	border-color: var(--gtr-accent);
	cursor: pointer;
}

/* No prefers-color-scheme block on purpose: Twenty Fourteen renders the content
   column light regardless of the visitor's OS theme, so a dark override here
   would drop a dark panel into a light column. */

/* -------------------------------------------------------------------------
   Print - the recipe and its credit, nothing else
   ---------------------------------------------------------------------- */

@media print {
	.gt-recipe {
		display: block;
	}

	.gt-block {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 1rem;
		border-color: #999;
	}

	.gt-block__swatch {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* The credit must survive printing. */
	.gt-prov {
		border: 1px solid #333;
		border-left-width: 5px;
		background: none !important;
		color: #000 !important;
	}

	.gt-prov--external a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}

	.gt-fav,
	.gt-fav-float,
	.gt-block__anchor,
	.gt-term__anchor,
	.gt-recipe__tools,
	.gt-glossary__nav,
	.gt-filters,
	.gt-search,
	.gt-prov__cta {
		display: none !important;
	}
}