/*
Theme Name: FastJapCars_new
Theme URI: https://www.fastjapcars.com/
Author: FastJapCars
Author URI: https://www.fastjapcars.com/
Description: A modern block theme rebuild of FastJapCars. Recreates the classic look of the original Twenty Eleven based theme - the logo header, dark gradient navigation bar, fixed 1000px white page, right-hand sidebar, three column footer and light/dark colour schemes - using theme.json, block templates, template parts and block patterns.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version:      1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fastjapcars_new
Tags: blog, news, one-column, two-columns, right-sidebar, custom-colors, custom-menu, editor-style, featured-images, footer-widgets, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready
*/

/*
 * The visual style of this theme is mostly driven by theme.json (colours,
 * typography, spacing and layout presets). Everything below is layout and
 * detail work that theme.json cannot express.
 */

/* =Site frame: grey canvas with the classic white 1000px "page" on top
 * Both colours come from the palette so the Dark style variation (which
 * swaps canvas for #1d1d1d and base for #0f0f0f, as colours/dark.css did in
 * the original theme) restyles the whole frame automatically.
---------------------------------------------------------------------- */
html body {
	padding: 0 2em;
	background: var(--wp--preset--color--canvas);
}

.wp-site-blocks {
	max-width: 1000px;
	margin: 2em auto;
	background: var(--wp--preset--color--base);
}

/* =Global
---------------------------------------------------------------------- */
a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	text-decoration: underline;
}

ul {
	list-style: square;
}

ol {
	list-style-type: decimal;
}

/* =Header / branding (logo, tagline, search)
---------------------------------------------------------------------- */
/* No padding at all: the banner sits flush against the top of the site frame,
 * the same way the original theme's #branding img { width: 100% } did. The nav
 * bar below insets its own contents to 7.6% via .fjc-navbar. */
.fjc-branding {
	position: relative;
	border-top: 2px solid var(--wp--preset--color--border);
}

.fjc-site-info {
	min-width: 0;
	/* Always claim the full row so the banner cannot be squeezed by the
	 * absolutely-positioned search box beside it. */
	flex: 1 1 100%;
}

.fjc-site-row {
	position: relative;
}

/* The site title doubles as the banner: the text stays in the markup (search
 * engines and screen readers still see it) but is pushed out of view while the
 * banner paints behind it. logo.jpg is 1000x200, so an explicit aspect ratio
 * keeps the height correct as the frame scales. */
.fjc-site-title {
	margin: 0;
}

.fjc-site-title a {
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1000 / 200;
	text-indent: -9999px;
	white-space: nowrap;
	background: url(assets/images/logo.jpg) no-repeat center / 100% 100% var(--wp--preset--color--base);
	font-size: 1px;
	line-height: 1;
}

.wp-block-search__input {
	background: #fafafa url(assets/images/search.png) no-repeat 5px 6px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #888;
	font-size: 14px;
	line-height: 1.2;
	padding: 4px 10px 4px 28px;
	min-height: 22px;
}

.wp-block-search__input:focus {
	background-color: #fff;
	color: var(--wp--preset--color--contrast);
}

.wp-block-search__button {
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
	color: #888;
	font-size: 13px;
	padding: 4px 10px;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background: var(--wp--preset--color--accent);
	border-color: #0861a5;
	color: #bfddf3;
}

/* =Main navigation bar
---------------------------------------------------------------------- */
.fjc-navbar {
	background: var(--wp--preset--gradient--navbar);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	clear: both;
	margin-bottom: 6px;
	/* Anchors the colour-scheme toggle, which must sit in the right-hand
	 * 7.6% gutter - the band the nav's own margin leaves empty - so it can
	 * never collide with the menu items. */
	position: relative;
}

.fjc-navbar > .wp-block-navigation {
	margin: 0 7.6%;
}

.fjc-navbar .wp-block-navigation {
	color: var(--wp--preset--color--nav-text);
	font-size: 13px;
}

.fjc-navbar .wp-block-navigation-item .wp-block-navigation-item__content {
	display: block;
	padding: 0 1.2125em;
	color: var(--wp--preset--color--nav-text);
	line-height: 3.333em;
	text-decoration: none;
	white-space: nowrap;
}

.fjc-navbar .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.fjc-navbar .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: var(--wp--preset--gradient--navbar-hover);
	color: #373737;
}

.fjc-navbar .wp-block-navigation__submenu-container {
	background: #f9f9f9;
	border: 0;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	padding: 0;
}

.fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #444;
	line-height: 1.4em;
	padding: 10px;
	white-space: normal;
	width: 168px;
}

.fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: #efefef;
	color: #373737;
}

/* The open mobile menu.
 *
 * WordPress core ships
 *   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container
 *       .is-menu-open:not(.disable-default-overlay)   { background: #fff }
 * at specificity 0-5-0. The rule below was 0-3-0, so it lost regardless of
 * load order (theme styles are last, which only wins ties) - leaving a white
 * overlay behind white #eee menu text, i.e. an invisible menu.
 *
 * Mirroring core's qualifiers lifts this to 0-6-0 so it wins outright, with no
 * !important and no dependence on stylesheet order.
 */
.fjc-navbar .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background: #222;
	color: #eee;
}

.fjc-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #eee;
	line-height: 2.5em;
}

/* Hover/focus inside the open menu.
 *
 * The desktop rule
 *   .fjc-navbar .wp-block-navigation-item:focus-within > ...__content
 *       { background: var(--gradient--navbar-hover); color: #373737 }
 * is 0-4-0 and sets a LIGHT gradient. It still fires when the mobile menu opens
 * (focus lands on the first link) or when a link is tapped, and because this
 * open-menu rule above only sets `color`, the gradient survived it - giving
 * #eee text on #f9f9f9, i.e. 1.10:1 and an unreadable "Home".
 *
 * Highlight it darkly instead, at 0-6-0 so it beats both.
 */
.fjc-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.fjc-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.fjc-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	background: #3a3a3a;
	color: #fff;
}

/* The close (X) button inherits the container's colour, so it only reads
 * against the overlay once the container itself is dark. */
.fjc-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #eee;
}

/* =Navbar tools (admin link + colour scheme toggle)
 *
 * One absolutely-positioned flex container in the right-hand gutter that the
 * nav's `margin: 0 7.6%` deliberately leaves empty (nav box ends at 92.4% of
 * the bar). Absolutely positioned means it takes no space in the flex row, so
 * it cannot push the already-wrapping menu onto a third line.
 *
 * Height is one nav row on desktop, or centred within the bar on mobile where
 * the bar is only as tall as the hamburger (24px).
 ---------------------------------------------------------------------- */
.fjc-navbar-tools {
	position: absolute;
	right: 1%;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* WordPress applies its block gap to every child of a flow group:
 *   global-styles: `:root :where(.is-layout-flow) > *` { margin-block-start: 1.625em }
 * (specificity 0-1-0). On an absolutely-positioned box that margin offsets it
 * from `top`, and at this container's 13px font it resolves to 21.125px - which
 * shoved the icons 21px BELOW a single-row nav bar, hanging out of it entirely.
 * (The nav itself never suffered because `.fjc-navbar > .wp-block-navigation`
 * sets `margin: 0 7.6%`, which already zeroes it.)
 *
 * Out-of-flow elements have no place in a block rhythm, so cancel it at 0-2-0
 * rather than tying with core and depending on stylesheet order.
 */
.fjc-navbar .fjc-navbar-tools {
	margin: 0;
}

@media (min-width: 783px) {
	/* The hamburger breakpoint is 782px, so at 783px+ the links render inline
	 * - and in this theme's fixed 1000px frame the list wraps to two rows
	 * (measured: row 1 = 8 items at y232-275, row 2 = 2 items at y296-339).
	 *
	 * Centring across the whole bar would park the tools in the empty 275-296
	 * gap *between* the rows. Pinning to the top instead puts their centre on
	 * row 1 (254px). One nav row is exactly the 13px font at 3.333 line-height,
	 * so height: 3.333em tracks it without a magic pixel value - and font-size
	 * must match or the em resolves differently.
	 */
	.fjc-navbar-tools {
		top: 0;
		transform: none;
		height: 3.333em;
		font-size: 13px;
	}

	/* The nav's 7.6% right inset is a percentage but .fjc-navbar-tools is a
	 * fixed 71px, so the two cross over as the frame narrows: 7.6% is only 64px
	 * at an 847px frame (measured 15px overrun into the nav box), and 56px at
	 * the 719px frame a 783px viewport produces - less than the tools
	 * themselves, which would put the icons on top of the menu.
	 *
	 * max() keeps the original 7.6% inset whenever it is already wide enough
	 * and floors it at 88px (= tools 71px + ~7px to the menu + ~10px to the
	 * edge) otherwise. Sized against `right: 1%`, 88px clears every frame width
	 * this theme can produce (max-width 1000px).
	 */
	.fjc-navbar > .wp-block-navigation {
		margin-right: max( 7.6%, 88px );
	}
}

/* Stroke-based icons (Feather). `fill: none` is essential: the sun's rays are
 * <line> elements, which have no area to fill and would otherwise disappear,
 * leaving a plain circle. The moon is filled as well, so it reads as a solid
 * crescent at 16px rather than a thin outline. */
.fjc-navbar-tools svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Higher specificity than the .fjc-navbar-tools svg rule above, so the crescent
 * fills rather than rendering as a thin outline. */
.fjc-theme-toggle .fjc-theme-toggle__moon {
	fill: currentColor;
}

.fjc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	color: var( --wp--preset--color--nav-text );
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fjc-theme-toggle:hover,
.fjc-account-link:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.fjc-theme-toggle:focus-visible,
.fjc-account-link:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* Account shortcut, shown to everyone. The destination is decided when the page
 * is built: wp-login.php with no session, wp-admin/ with one (see
 * patterns/header.php) - so the href and label are already correct in the HTML
 * rather than being patched up by JavaScript after paint. */
.fjc-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 24px;
	border: 1px solid transparent;
	border-radius: 3px;
	color: var( --wp--preset--color--nav-text );
	opacity: 0.85;
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.fjc-account-link:hover,
.fjc-account-link:focus {
	opacity: 1;
}

/* Show the icon for the scheme you would switch TO: moon while light is
 * active, sun while dark is. Pure CSS, so the button is correct even before
 * the JS file has run. */
.fjc-theme-toggle .fjc-theme-toggle__sun {
	display: none;
}

:root[data-theme='dark'] .fjc-theme-toggle .fjc-theme-toggle__moon {
	display: none;
}

:root[data-theme='dark'] .fjc-theme-toggle .fjc-theme-toggle__sun {
	display: block;
}

/* =Content, sidebar and posts
---------------------------------------------------------------------- */
.fjc-main {
	clear: both;
	/* No padding-top here: WordPress already applies its block gap
	 * (theme.json spacing.blockGap = 1.625em) to every direct child of
	 * .wp-site-blocks, and <main> is one of them. Adding a matching 1.625em
	 * here stacked two identical spacings (48.75px) under the nav bar. */
}

.fjc-columns {
	justify-content: space-between;
}

.fjc-columns > .wp-block-column {
	min-width: 0;
}

/* The original theme gave the content column 58.4% of the 1000px page
 * (584px) and the sidebar 18.8% (188px), leaving a 76px gutter between
 * them. The row is 84.8% of the page, so those widths are 68.9% and
 * 22.17% of the row. flex-grow is disabled so the gutter survives. */
.fjc-columns > .wp-block-column.fjc-content {
	flex-basis: 68.9%;
	flex-grow: 0;
}

.fjc-sidebar-column {
	flex-grow: 0;
}

.fjc-sidebar {
	clear: both;
}

.fjc-widget-title {
	clear: both;
	margin: 0 0 0.8125em;
	color: var(--wp--preset--color--label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

.fjc-sidebar ul {
	margin: 0;
	font-size: 15px;
}

.fjc-sidebar ul ul {
	margin-left: 1.5em;
}

.fjc-sidebar li {
	color: var(--wp--preset--color--subtle);
	font-size: 13px;
	line-height: 1.8;
}

.fjc-sidebar a {
	font-weight: bold;
	text-decoration: none;
}

.fjc-sidebar a:hover,
.fjc-sidebar a:focus,
.fjc-sidebar a:active {
	text-decoration: underline;
}

.fjc-sidebar .wp-block-search {
	margin-bottom: 1.625em;
}

/* Archive / search headings use the classic small caps page title */
.wp-block-query-title {
	margin: 0 0 2.6em;
	color: var(--wp--preset--color--label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

.wp-block-query-title a {
	color: inherit;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}

/* Entries in the loop */
.fjc-entry {
	position: relative;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.fjc-entry:last-child {
	border-bottom: 0;
}

.fjc-entry-title {
	margin: 0;
	padding-top: 15px;
	color: var(--wp--preset--color--heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
}

.fjc-entry-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.fjc-entry-title a:hover,
.fjc-entry-title a:focus,
.fjc-entry-title a:active {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* On a single post or page the title is larger and darker than it is in the
 * loop, matching the original theme's .singular .entry-title (36px/48px, pure
 * black in the light scheme and white in the dark one - hence the "strong"
 * colour, which the Dark variation swaps). */
.wp-singular .fjc-entry-title {
	color: var(--wp--preset--color--strong);
	font-size: 36px;
	line-height: 48px;
}

.wp-singular .fjc-entry-title a {
	color: var(--wp--preset--color--strong);
}

/* ...and the date/author line sits pinned above the title rather than below
 * it, which is how the original laid out .singular .entry-header. The header
 * carries the padding that makes room for it.
 *
 * Only single posts actually print that line: page templates (page.html,
 * page-album.html) contain a bare .fjc-entry-header with no .fjc-entry-meta in
 * it. The unconditional `body.page` rule below was therefore reserving 3.5em
 * for a line that never renders - 52.5px of dead air between the nav bar and
 * the H1 on every page. Gate it on the line's presence instead. */
.fjc-entry-header {
	position: relative;
}

body.single .fjc-entry-header {
	padding-top: 4.875em;
}

body.page .fjc-entry-header:has(.fjc-entry-meta) {
	padding-top: 3.5em;
}

.fjc-entry-header .fjc-entry-meta {
	position: absolute;
	top: 0;
	left: 0;
}

.fjc-entry-meta {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 18px;
}

.fjc-entry-meta a {
	font-weight: bold;
}

.fjc-entry-content {
	padding-top: 1.625em;
}

.fjc-entry-content p {
	margin-bottom: 1.625em;
}

/* Post navigation and pagination */
.fjc-post-navigation {
	clear: both;
	padding-top: 1.625em;
	border-top: 1px solid var(--wp--preset--color--border);
}

.fjc-post-navigation a,
.wp-block-query-pagination a,
.wp-block-query-pagination__page-numbers {
	font-size: 12px;
	font-weight: bold;
	line-height: 2.2em;
}

.wp-block-query-pagination {
	margin-top: 1.625em;
}

.wp-block-query {
	margin-bottom: 1.625em;
}

/* =Showcase template
---------------------------------------------------------------------- */
.fjc-showcase-heading {
	margin: 0 0 1.625em;
	color: var(--wp--preset--color--label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

.fjc-showcase-intro {
	background: var(--wp--preset--color--surface);
	border-bottom: 0;
	padding: 1.625em 8.9%;
	margin: -1.625em -8.9% 1.625em;
}

/* =Comments
---------------------------------------------------------------------- */
.wp-block-comments-title {
	padding-bottom: 1em;
	color: var(--wp--preset--color--label);
	font-size: 10px;
	font-weight: 500;
	line-height: 2.6em;
	text-transform: uppercase;
}

.wp-block-comment-template {
	margin: 0;
	padding: 1.625em 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.wp-block-comment-template .wp-block-comment-date,
.wp-block-comment-template .wp-block-comment-author-name {
	font-size: 12px;
}

.wp-block-comment-template .wp-block-comment-date {
	color: var(--wp--preset--color--muted);
}

/* =Footer
---------------------------------------------------------------------- */
.fjc-footer-widgets {
	clear: both;
	padding: 1.625em 7.6%;
}

/* Hide the widget strip completely while all three columns are empty,
 * matching the original theme which only printed it when widgets existed.
 * Only on the front end - in the editor the strip stays visible so it can
 * be edited. */
body:not(.editor-styles-wrapper) .fjc-footer-widgets:not(:has(.wp-block-column:not(:empty))) {
	display: none;
}

.fjc-footer-widgets a {
	font-weight: bold;
	text-decoration: none;
}

.fjc-site-generator {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 2.2em;
	padding: 2.2em 0.5em;
	text-align: center;
}

.fjc-site-generator a {
	color: #555;
	font-weight: bold;
}

/* =Manufacturer album grid (homepage)
 * Driven by the [fjc_manufacturers] shortcode. Brand logos come from the
 * theme's /assets/images/logos/ folder (not the media library) and sit on a
 * fixed light plate so they stay legible under the dark style variation too.
 ---------------------------------------------------------------------- */
.fjc-manufacturers-title {
	margin: 0 0 1.625em;
	color: var(--wp--preset--color--label);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

.fjc-manufacturers {
	display: grid;
	grid-template-columns: repeat(var(--fjc-manufacturer-columns, 4), minmax(0, 1fr));
	gap: 1.625em;
	margin: 0 0 1.625em;
}

.fjc-manufacturer-card {
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--heading);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.fjc-manufacturer-card:hover,
.fjc-manufacturer-card:focus {
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Light plate. Deliberately #fff rather than a theme colour so the dark brand
 * artwork reads in LIGHT mode. Dark mode drops it to transparent instead and
 * lightens the artwork that needs it - see the "Dark colour scheme" section. */
.fjc-manufacturer-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	padding: 1.25em;
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.fjc-manufacturer-logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Photo fallback for albums with no brand logo (Non Japanese, Car Shows, ...).
 * The plate has padding, so the photo bleeds out to cover it edge to edge. */
.fjc-manufacturer-photo {
	display: block;
	width: calc(100% + 2.5em);
	height: calc(100% + 2.5em);
	margin: -1.25em;
	object-fit: cover;
}

.fjc-manufacturer-mono {
	/* Was #9a9a9a: only 2.81:1 on the white plate (fails AA) and never
	 * actually rendered, since every card currently has a logo or photo.
	 * --muted is 5.75:1 on the light plate and 7.11:1 on the dark one. */
	color: var(--wp--preset--color--muted);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

/* Inline SVG icons (misc bucket) - sized like the brand logos. */
.fjc-manufacturer-svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.fjc-manufacturer-name {
	display: block;
	padding: 0.85em 0.75em 0.2em;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.fjc-manufacturer-count {
	display: block;
	padding: 0 0.75em 0.95em;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 1.6;
}

@media (max-width: 782px) {
	.fjc-manufacturers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fjc-manufacturer-plate {
		height: 108px;
	}
}

@media (max-width: 480px) {
	.fjc-manufacturers {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =Breadcrumb trail
 *
 * The album pages get a hand-built ".fjc-breadcrumbs" trail (NextGEN renders no
 * breadcrumb at all on an album overview), while car pages have a crumb
 * prepended into NextGEN's own ".ngg-breadcrumbs" list. NextGEN's stylesheet is
 * only enqueued when it actually renders a trail, and it forces
 * `margin: 30px 0 !important`, so these selectors carry an element qualifier
 * (ul.x beats .x) plus !important to keep both trails spaced identically.
 ---------------------------------------------------------------------- */
ul.fjc-breadcrumbs,
ul.ngg-breadcrumbs {
	list-style: none;
	overflow: hidden;
	margin: 0 0 1.625em !important;
	padding: 0;
	text-transform: uppercase;
	font-size: 14px;
}

ul.fjc-breadcrumbs > li,
ul.ngg-breadcrumbs > li {
	float: left;
	margin: 0;
	padding: 0 0.3em 0 0.15em;
	border: none;
	vertical-align: middle;
	list-style-type: none;
}

ul.fjc-breadcrumbs .fjc-breadcrumb-divisor,
ul.ngg-breadcrumbs .ngg-breadcrumb-divisor {
	margin: 0;
	padding: 0 0 0 0.15em;
}

/* =Admin edit shortcut
 *
 * Injected by fjc-edit-link.php directly below the breadcrumb and above the
 * grid, for administrators only - the markup is never emitted for anyone else,
 * so there is nothing to hide. The route differs by level: a gallery opens
 * `imagely-add-new&tab=images&id=`, an album opens
 * `imagely-albums&tab=galleries&id=`.
 *
 * Colours are all palette variables, so it needs no dark-mode rules.
 ---------------------------------------------------------------------- */
.fjc-edit-link {
	margin: 0 0 1em;
}

.fjc-edit-link__button {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.45em 0.9em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fjc-edit-link__button:hover,
.fjc-edit-link__button:focus {
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.fjc-edit-link__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* Feather "edit-2" pencil, stroke-based to match the navbar tool icons. */
.fjc-edit-link__button svg {
	flex: none;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =NextGEN album overview
 *
 * The plugin lays albums out with inline-blocks sized to their own title
 * (each <a class="ngg-album-desc"> carries an inline max-width:260px), so cell
 * widths vary between 256 and 260px. Whitespace between inline-blocks then
 * breaks the rows unpredictably - producing the 2,1,1,2 pattern - and in this
 * theme's content column only two ever fit across. Force a real grid instead.
 ---------------------------------------------------------------------- */
.ngg-albumoverview {
	/* NextGEN ships `display:block !important` and `float:left !important`, so
	   both need !important here to win - same specificity, later in the cascade. */
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.5em 1em;
	align-items: start;
}

.ngg-albumoverview > .ngg-album-compact {
	float: none !important;
	display: block !important;
	width: auto !important;   /* beats NextGEN's per-cell pixel width */
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: top;
	text-align: center;
}

/* The title link carries an inline max-width that is what makes cells differ. */
.ngg-albumoverview .ngg-album-desc {
	max-width: none !important;
	display: block;
}

.ngg-albumoverview .ngg-album-compactbox,
.ngg-albumoverview .ngg-album-link {
	display: block;
	width: 100%;
}

.ngg-albumoverview img.Thumb {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.ngg-albumoverview .ngg-album-gallery-image-counter {
	margin: .25em 0 0;
}

/* =Dark colour scheme (visitor toggle)
 *
 * WordPress ships Dark as a *style variation* (styles/01-dark.json), but a
 * variation is an all-or-nothing Site Editor setting applied to every visitor.
 * A per-visitor toggle needs both palettes present at once, so the dark values
 * are restated here under [data-theme="dark"].
 *
 * This works because WP emits body, link and gradient colours as
 * var(--wp--preset--*) references into :root, not as literals - so replacing
 * the variable restyles the entire site rather than needing a dark rule per
 * selector. Verified: `body{background-color: var(--wp--preset--color--base)}`,
 * `a:where(:not(.wp-element-button)){color: var(--wp--preset--color--accent)}`.
 *
 * Values mirror styles/01-dark.json exactly. accent (#1982D1) and nav-text
 * (#EEEEEE) are identical in both schemes, and navbar-hover is the same light
 * gradient in both (it pairs with #373737 text), so none are repeated here.
 *
 * The JS to set the attribute lives in assets/js/theme-toggle.js; a small
 * inline script in wp_head sets it before first paint so there is no flash of
 * the wrong scheme.
 ---------------------------------------------------------------------- */
:root[data-theme='dark'] {
	--wp--preset--color--base: #0f0f0f;
	--wp--preset--color--canvas: #1d1d1d;
	--wp--preset--color--surface: #060606;
	--wp--preset--color--contrast: #bbbbbb;
	--wp--preset--color--heading: #dddddd;
	--wp--preset--color--strong: #ffffff;
	--wp--preset--color--muted: #999999;
	--wp--preset--color--label: #cccccc;
	--wp--preset--color--subtle: #858585;
	--wp--preset--color--border: #222222;
	--wp--preset--gradient--navbar: linear-gradient(#383838, #272727);
}

/* --- Colours that are literals, so do not follow the variables ----------- */

/* Search field: #fafafa / #888 / focus #fff are light-mode values. The field
 * keeps its background-image (the icon) but drops it in dark mode, because
 * search.png is near-black (#0b0d0b) and would vanish on a dark field. */
:root[data-theme='dark'] .wp-block-search__input {
	background-color: var( --wp--preset--color--surface );
	background-image: none;
	color: var( --wp--preset--color--label );
	padding-left: 10px;
}

:root[data-theme='dark'] .wp-block-search__input:focus {
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

:root[data-theme='dark'] .wp-block-search__button {
	color: var( --wp--preset--color--label );
}

/* Nav dropdown: #f9f9f9 / #444 / hover #efefef are light-mode values. */
:root[data-theme='dark'] .fjc-navbar .wp-block-navigation__submenu-container {
	background: var( --wp--preset--color--surface );
	border-color: var( --wp--preset--color--border );
}

:root[data-theme='dark'] .fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var( --wp--preset--color--contrast );
}

:root[data-theme='dark'] .fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
:root[data-theme='dark'] .fjc-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: var( --wp--preset--color--border );
	color: var( --wp--preset--color--strong );
}

/* Site generator link: #555 on the dark surface (#060606) is 2.72:1 and fails
 * WCAG AA; it is 7.08:1 on the light surface, so only dark needs correcting. */
:root[data-theme='dark'] .fjc-site-generator a {
	color: var( --wp--preset--color--label );
}

/* --- Manufacturer plates and logos -------------------------------------- *
 *
 * The logo PNGs are already transparent - the white you see is the plate above.
 * But the artwork is painted FOR a white plate, so removing the plate is not
 * enough. Measured on the dark card surface (WCAG non-text minimum is 3:1):
 *
 *   Honda 6.00:1 pass   Mazda 4.79:1 pass   Mitsubishi 4.79:1 pass
 *   Nissan 1.10:1 FAIL  Toyota 1.31:1 FAIL  Subaru 2.45:1 FAIL
 *
 * So: drop the plate, then lift only the three that fail - and for Subaru lift
 * rather than invert, so the blue survives.
 */
:root[data-theme='dark'] .fjc-manufacturer-plate {
	background: transparent;
}

/* Safe default for a logo added later: artwork shipped against white is
 * normally dark, so flipping it to white is the right guess. Individual brands
 * below override it - those rules must stay after this one to win the tie at
 * equal specificity (0-3-0). */
:root[data-theme='dark'] .fjc-manufacturer-logo {
	filter: brightness( 0 ) invert( 1 );
}

/* Already legible above 3:1 and carrying brand colour - leave untouched. */
:root[data-theme='dark'] .fjc-manufacturer-logo--honda,
:root[data-theme='dark'] .fjc-manufacturer-logo--mazda,
:root[data-theme='dark'] .fjc-manufacturer-logo--mitsubishi {
	filter: none;
}

/* Lift rather than invert: brightness(1.7) takes the (2,81,160) blue to about
 * 5:1 while inverting would have turned it orange. */
:root[data-theme='dark'] .fjc-manufacturer-logo--subaru {
	filter: brightness( 1.7 );
}

/* The Misc box icon draws with currentColor, inheriting --heading from
 * .fjc-manufacturer-card, so it needs no rule here: #222 on white in light and
 * #ddd on dark, both readable. */

/* =Responsive
---------------------------------------------------------------------- */
@media (max-width: 782px) {
	.fjc-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-singular .fjc-entry-title {
		font-size: 28px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	html body {
		padding: 0 1em;
	}

	.wp-site-blocks {
		margin: 1em auto;
	}

	.fjc-site-title a {
		background-size: contain;
	}
}