/**
 * LT Design — hand-written additions to the compiled Tailwind sheet.
 *
 * design.css is generated output (Tailwind v4, one minified line) and is
 * rebuilt from the templates' class strings, so anything hand-edited into it is
 * lost on the next build — and a malformed design.css makes
 * lt_design_css_is_ready() treat the whole deploy as failed, which stops the
 * loader stripping the competing stylesheets sitewide. This file is where rules
 * that Tailwind cannot express as utilities already present in the build go
 * instead. It is enqueued by design/loader.php with `lt-design` as a hard
 * dependency, so it always prints after design.css and wins on source order at
 * equal specificity.
 *
 * Everything here is namespaced under a `lt-` class of its own. Nothing keys off
 * a Tailwind utility class, so a Tailwind rebuild cannot silently change what
 * these selectors match.
 *
 * @package libertytree
 */

/* -------------------------------------------------------------------------
 * Product card — align the price, the $20 DOWN badge and ADD TO CART across
 * every card in a row, whatever the title length.
 *
 * The reference card reserved exactly two lines for the title (min-h-[40px] =
 * 2 x 20px at text-base/leading-tight). That is a floor, not a ceiling, so a
 * three- or four-line product name — which vendor feeds produce constantly,
 * e.g. "MDT 116033GMC CHASSIS TIMBR CORE KIT RUG AM SA RH" — grew the title
 * block and pushed the price, badge and button of that one card below its
 * neighbours', which is what the owner reported.
 *
 * Clamping rather than truncating in PHP: the full product name stays in the
 * DOM, so it is still selectable, still read in full by screen readers, and
 * still indexed — only the visual overflow is cut, and always at a line break
 * rather than mid-word. Truncating the string server-side would have thrown the
 * text away for everyone.
 *
 * Three rules do the alignment, in order of what each one pins:
 *   1. a fixed two-line title height, so the price row starts at the same
 *      offset on every card;
 *   2. a fixed-height price row, so the $20 DOWN badge and the price sit on one
 *      baseline whether or not a card has a struck "was" price and whether or
 *      not it is layaway-eligible (the badge is w-16 h-16, so 4rem is the
 *      height the row already takes whenever a badge is present — this just
 *      makes badge-less cards reserve the same);
 *   3. the card as a flex column with the action row pushed to the bottom, so
 *      even if something below ever varies in height the buttons still line up.
 * ---------------------------------------------------------------------- */

.lt-pcard {
	display: flex;
	flex-direction: column;
	/* The card is a grid item in a `grid` with the default align-items:stretch,
	   so it is already the full height of its row; this makes that height
	   explicit for the flex column below and keeps the card working if it is
	   ever placed somewhere that does not stretch it. */
	height: 100%;
}

/* The image is a fixed 1:1 box. Without this it is a flex item like any other
   and would be allowed to shrink when the card is tall, squashing the photo. */
.lt-pcard__media {
	flex: 0 0 auto;
}

.lt-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.lt-pcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* Exactly two lines at text-base/leading-tight, i.e. the same 40px the
	   markup's min-h-[40px] already reserves — so if this sheet ever fails to
	   load the card falls back to today's layout rather than to a new one. */
	height: 2.5em;
}

.lt-pcard__pricerow {
	align-items: flex-end;
	min-height: 4rem;
}

/* Bottom-align the price inside the row, so it shares a baseline with the
   badge next to it instead of floating at the top when a card has no struck
   "was" price above it. */
.lt-pcard__price {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.lt-pcard__actions {
	margin-top: auto;
}

/* -------------------------------------------------------------------------
 * Header nav submenus (depth 2).
 *
 * The nav is menu-driven: lt_design_nav_items() reads the `header-primary`
 * menu, and any item nested one level under another in Appearance -> Menus
 * renders here. A flat menu emits none of this markup, so a site with no
 * sub-items renders precisely the nav bar it rendered before submenus existed.
 *
 * Opened by :hover AND :focus-within, with no JavaScript: design.js owns the
 * mobile drawer and nothing here depends on it, so a JS error cannot leave the
 * desktop nav with unreachable links. Focus-within is what makes it keyboard
 * operable — tabbing to the parent link opens the panel, which makes the child
 * links focusable, and focus moving into them keeps it open.
 *
 * Colour follows the brand guide rather than inventing a new surface: the panel
 * is the same flat Ammo Can Green as the header with a white border — the same
 * "white rule around a control" language every button in this header already
 * uses — instead of a darker or tinted green, because the guide rules out
 * variations of the background colour. Text is white, going LT Yellow on hover
 * exactly as the top-level nav links already do. No red anywhere: red is
 * reserved for call-to-action buttons.
 * ---------------------------------------------------------------------- */

/* Scrolling container -> wrapping row, so the panels are not clipped. See the
   note in chrome.php next to the lt-nav-bar class. */
.lt-nav-bar {
	overflow: visible;
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

.lt-nav-item {
	position: relative;
}

.lt-nav-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.35em;
	vertical-align: 0.15em;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	/* currentColor so the caret goes LT Yellow with the label on hover. */
	border-top: 0.3em solid currentColor;
}

.lt-nav-sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60; /* above the sticky header's own z-50 */
	min-width: 13rem;
	margin-top: 0.65rem;
	padding: 0.35rem 0;
	background: #4c584a;
	border: 2px solid #ffffff;
	border-radius: 0.25rem;
	text-align: left;
}

/* Bridges the 0.65rem gap between the nav link and the panel, so moving the
   pointer down to the panel does not pass over a dead strip and close it. */
.lt-nav-item::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.65rem;
}

.lt-nav-item:hover > .lt-nav-sub,
.lt-nav-item:focus-within > .lt-nav-sub {
	display: block;
}

.lt-nav-sub > li > a {
	display: block;
	padding: 0.5rem 1.1rem;
}

/* Mobile drawer: nested list, always open, marked by indentation and a rule
   rather than by fading the text. */
.lt-nav-mobile-sub {
	margin: 0 0 0 0.85rem;
	padding-left: 0.85rem;
	border-left: 2px solid rgba(255, 255, 255, 0.35);
}