/* Clipper Custom site styles */

/* Header logo: base size (mobile/tablet) is set on the site-logo block
   itself (240px, parts/header.html). Enlarged on full desktop, but not
   doubled to 480px like the original version -- at that size the logo
   and the nav couldn't both fit on one line inside the alignwide row
   (max 1200px), so the row wrapped and pushed the nav under the logo.
   340px leaves enough room for the nav to sit inline beside it. Keep
   this in sync with the "sizes" hint in functions.php
   (clipper_custom_fix_logo_sizes) if it ever changes again. */
@media (min-width: 1024px) {
	.wp-block-site-logo img {
		width: 340px !important;
		height: auto !important;
		padding-top: 5px;
	}
}

/* Header row (logo + nav): force them to stay on one line from the same
   1024px breakpoint where the logo grows, instead of the default
   flex-wrap that was letting the row split into two lines. */
@media (min-width: 1024px) {
	.site-header-row {
		flex-wrap: nowrap;
	}
	.site-header-row > .wp-block-group:first-child {
		flex-shrink: 0;
	}
}

/* Front page "pillar" thumbnails (The Car / The Timeline / The
   Restoration columns, patterns/front-page-pillars.php). Plain wp:image
   blocks don't have a built-in square-crop control, so this forces a
   1:1 box and covers it; each image sets its own object-position
   inline for the crop's focal point, same technique as the hero. */
.front-page-thumb img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Restoration Log feed thumbnail (templates/home.html, className
   "log-thumb" on the wp:post-featured-image block): same fixed-box/
   cover-crop technique as .front-page-thumb, just sized for a list
   row instead of a homepage card. flex-shrink:0 keeps it from being
   squeezed by the text column beside it; the block has no featured
   image on a given post, this rule simply has nothing to size. */
.log-thumb {
	flex-shrink: 0;
}
.log-thumb img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	display: block;
}

/* Floated content images (a plain Image block set to "Left" or "Right"
   alignment in the editor -- not the Featured Image mechanism, which
   was dropped for On Location because its own width attribute isn't
   a real supported property and its size couldn't be controlled
   reliably). Regular content images size themselves fine by dragging
   in the editor; this just gives the float sensible, theme-matched
   margins so text wraps around it cleanly instead of crowding it.
   General site-wide rule, not scoped to one page. */
.entry-content .alignleft {
	margin: 0 var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--30, 1.5rem) 0;
}
.entry-content .alignright {
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem) var(--wp--preset--spacing--40, 2rem);
}

/* Mobile nav overlay (the fullscreen jade menu, see the navigation
   block's overlayBackgroundColor in parts/header.html): there's a lot
   of empty jade below the menu links, so float the ship's-wheel +
   "Clipper" emblem graphic there, small and centered near the bottom.
   That graphic (media library id 67, "clipper_overlay_jade") has a
   solid Tahitian Jade backdrop baked into the file itself -- the box
   below is sized to the image's exact 3:2 aspect ratio so
   background-size:contain fills it edge to edge with no letterboxing,
   which is what makes the seam disappear against this jade overlay.
   Only safe to reuse on a jade background for the same reason.
   Purely decorative -- pointer-events:none so it never intercepts a
   tap meant for a menu link above it.

   Anchored to .responsive-container itself, not the nested
   .responsive-dialog: WP's core nav CSS only gives the outer
   container the fixed, full-viewport box (inset:0); the dialog inside
   it is just as tall as its own content (the close button + links),
   so a bottom-anchored absolute child of the dialog was landing right
   under the links instead of near the actual screen bottom, which is
   why it wasn't visible. */
.wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	width: min(240px, 65%);
	aspect-ratio: 3 / 2;
	background-image: url('https://www.clippercustom.com/wp-content/uploads/2026/09/clipper_overlay_jade-768x512.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

/* Footer emblem (patterns/footer.php): stays left-aligned in its 30%
   column on desktop, beside the "Story"/"Follow Along" columns. Below
   781px, WP's own breakpoint for stacking wp:columns to full width,
   center it above those columns instead of leaving it hugging the
   left edge. */
@media (max-width: 781px) {
	.footer-emblem {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Desktop-only footer nudges. Scoped to the same 782px breakpoint
   where wp:columns stops stacking, so this doesn't touch the
   (already correct) centered mobile layout above.

   footer-emblem: the image (media library id 67) was re-cropped
   2026-09-02 to trim the built-in padding around the artwork that
   used to push it visually low; measured at ~13px of top padding
   left at full 1200x540 resolution, which is under 4px at this
   320-wide display size, so no compensating negative margin is
   needed any more -- left at 0 (the block default) so the wheel's
   top now lines up directly with the "Story"/"Follow Along" heading
   tops beside it.

   footer-copyright: was `padding-top:var(--wp--preset--spacing--50)`
   from the inline block style (see patterns/footer.php) plus a
   negative margin guessed against the old, taller crop. Replaced
   with an explicit, predictable 20px gap below the row above --
   padding-top zeroed out here (needs !important to beat the inline
   style) so margin-top is the only thing setting the gap. */
@media (min-width: 782px) {
	.footer-emblem {
		margin-top: 0;
	}
	.footer-copyright {
		padding-top: 0 !important;
		margin-top: 20px;
	}
}