/* =============================================================================
   Tahoe Boat Features & Specs (Per-Section)  ·  CSS  ·  rev 2026-06-18 (e)
   -----------------------------------------------------------------------------
   Changes this revision (e):
     • .tfs-heading-note — small muted sub-line under the heading (term-mode
       `subnote` attr, e.g. "(all boats listed on this page)" on the model
       archive 31355).
     • Collapsible mode (.tfs-collapsible) — the whole block is hidden until a
       paired ".tfs-reveal" button toggles `.is-revealed` (boat_category loop
       34899). Hidden via display:none so there is no flash under WP Rocket
       Delay-JS; a per-section <noscript> un-hides it when scripting is off.
       Term-mode (model archive) blocks are never collapsible.

   Changes in revision (d):
     • columns="6" (>=1024px) now uses CONTENT-SIZED columns
       (repeat(6, minmax(max-content, 1fr))) instead of 6 equal columns, so the
       long "HELMSTAND/ELECTRONICS" label gets a wider button and never clips,
       while short labels get narrower buttons and the row still fills the width.
       The spanning open panel is removed from track sizing (width:0 +
       min-width:100%) so its long list items can't inflate the columns.

   Changes in revision (c) [superseded by (d)]:
     • columns="6": shrank/wrapped the label inside equal columns. Replaced by
       the content-sized approach above.

   Changes in revision (b):
     • Bullet bar (li::before) now spans only the FIRST line of the item, not the
       full (wrapped) height. Anchored top + fixed height instead of top/bottom.
     • Panel body list switched from CSS grid to CSS multi-column (column-count).
       Items flow top-to-bottom with no row-height coupling, so there's no dead
       space below short items; any leftover space falls at the end of column 3.
       break-inside: avoid keeps a multi-line item intact within its column.
     • Removed the redundant .accordion-panel-heading (it duplicated the trigger
       label; the panel still carries role="region" aria-label for a11y).
     • columns="6" cut-off fix: the trigger label is a flex child, so it needs
       min-width: 0 (+ overflow-wrap) to WRAP instead of overflowing the tile's
       overflow:hidden. Padding/gap are also reduced in 6-col on desktop.

   Previous revision:
     • De-conflict via .accordion__tahoe container rename; CSS-triangle .tfs-caret
       driven by .is-open; accent-bar bullet; gap 3px; open/hover trigger states;
       columns="6" desktop mode.

   Tokens come from the child theme style.css (Gotham / --primary-color #D25418 /
   amber #de8b0d). White-on-dark. Everything is scoped to .tahoe-fs. The
   .accordion__avalon_item / -head / -body classes are kept on the inner nodes
   for Tahoe Search Filter deep-link compatibility.
   ============================================================================= */

.tahoe-fs {
	--tfs-font:         var(--body-font-family, "Gotham", -apple-system, "Segoe UI", sans-serif);
	--tfs-accent:       var(--primary-color, #D25418);
	--tfs-accent-amber: #de8b0d;
	--tfs-text:         #ffffff;
	--tfs-muted:        rgba(255, 255, 255, 0.72);
	--tfs-faint:        rgba(255, 255, 255, 0.55);
	--tfs-tile:         rgba(255, 255, 255, 0.05);
	--tfs-tile-hover:   rgba(255, 255, 255, 0.09);
	--tfs-border:       rgba(255, 255, 255, 0.12);
	--tfs-accent-soft:  rgba(210, 84, 24, 0.35);
	--tfs-radius:       4px;

	font-family: var(--tfs-font);
	color: var(--tfs-text);
	width: 100%;
}

/* ── Collapsible (boat_category loop) ─────────────────────────────────────────
   The whole block is hidden until its section's ".tfs-reveal" button toggles
   `.is-revealed` (see assets/js, v1.1.0). display:none means no flash under WP
   Rocket Delay-JS; the renderer's per-section <noscript> un-hides it when JS is
   off. Term-mode model-archive blocks never get .tfs-collapsible.
   --------------------------------------------------------------------------- */
.tahoe-fs.tfs-collapsible { display: none; }
.tahoe-fs.tfs-collapsible.is-revealed {
	display: block;
	animation: tahoe-fs-reveal 0.2s ease;
}
@keyframes tahoe-fs-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tahoe-fs *,
.tahoe-fs *::before,
.tahoe-fs *::after { box-sizing: border-box; }

/* ── Heading ──────────────────────────────────────────────────────────────── */
.tahoe-fs .features-specs-heading { margin: 0 0 16px; }
.tahoe-fs .features-specs-heading h3 {
	font-family: var(--tfs-font);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--tfs-text);
	margin: 0;
	padding-left: 14px;
	position: relative;
}
.tahoe-fs .features-specs-heading h3::before {
	content: "";
	position: absolute;
	left: 0; top: 2px; bottom: 2px;
	width: 4px;
	background: var(--tfs-accent);
	border-radius: 2px;
}
/* Small muted sub-line under the heading (term-mode `subnote`). */
.tahoe-fs .tfs-heading-note {
	display: block;
	margin: 4px 0 0;
	padding-left: 14px;          /* align under the h3 text (past the accent bar) */
	font-family: var(--tfs-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--tfs-faint);
	font-style: italic;
}

/* ── Grid of category tiles ───────────────────────────────────────────────── */
.tahoe-fs .accordion-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	align-items: start;
}

/* columns="6" on desktop / iPad-landscape (>=1024px): CONTENT-SIZED columns.
   Each tile takes at least its label's own width (minmax max-content ...), then
   shares the leftover row space equally (... 1fr). So "HELMSTAND/ELECTRONICS"
   gets a wider button and never clips, short labels (FUEL, HULL) get narrower
   buttons, and the row still fills the full width. Below 1024px it falls back to
   the default grid (3 -> 2 -> 1), per the responsive rules further down.

   The open panel spans all six columns. Its long list items have a huge
   max-content, which would otherwise inflate these content-sized tracks and
   blow the row out horizontally. width:0 + min-width:100% pulls the panel out of
   track sizing (it contributes ~0) while still rendering the full row width. */
@media (min-width: 1024px) {
	.tahoe-fs.tfs-cols-6 .accordion-grid {
		grid-template-columns: repeat(6, minmax(max-content, 1fr));
	}
	.tahoe-fs.tfs-cols-6 .accordion-grid-trigger {
		gap: 8px;
		padding: 10px 14px;
	}
	.tahoe-fs.tfs-cols-6 .accordion-trigger-label {
		white-space: nowrap;     /* one line; the column is sized to fit it */
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.tahoe-fs.tfs-cols-6 .accordion-grid > .accordion-panel {
		width: 0;
		min-width: 100%;
	}
}

/* ── Tile ─────────────────────────────────────────────────────────────────── */
.tahoe-fs .accordion-grid-item {
	margin: 0;
	padding: 0;
	background: var(--tfs-tile);
	border: 1px solid var(--tfs-border);
	border-radius: var(--tfs-radius);
	overflow: hidden;
	transition: border-color 0.18s ease, background 0.18s ease;
}
.tahoe-fs .accordion-grid-item:hover { background: var(--tfs-tile-hover); }
.tahoe-fs .accordion-grid-item.is-open {
	border-color: var(--tfs-accent);
	background: var(--tfs-tile-hover);
}

.tahoe-fs .accordion-grid-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 12px 16px;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--tfs-text);
	font-family: var(--tfs-font);
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hover / focus: neutralise the theme's pink button hover (scoped). */
.tahoe-fs .accordion-grid-trigger:hover,
.tahoe-fs .accordion-grid-trigger:focus {
	background-color: transparent; /* #00000000 */
	color: #fff;
	text-decoration: none;
}
.tahoe-fs .accordion-grid-trigger:focus-visible {
	outline: 2px solid var(--tfs-accent-amber);
	outline-offset: -2px;
}

/* Open state: trigger fills with the primary color; text stays white.
   Higher specificity than :hover so an open button stays orange on hover. */
.tahoe-fs .accordion-grid-item.is-open .accordion-grid-trigger {
	background-color: var(--primary-color, #D25418);
	color: #fff;
}

.tahoe-fs .accordion-trigger-label {
	font-family: var(--tfs-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	min-width: 0;              /* allow the flex label to shrink/wrap */
	overflow-wrap: anywhere;  /* break long labels (e.g. HELMSTAND/ELECTRONICS) */
}

/* ── Caret ────────────────────────────────────────────────────────────────────
   CSS triangle. Closed = points RIGHT (border-left colored).
   Open  = points DOWN  (border-top colored). Driven by .is-open.
   --------------------------------------------------------------------------- */
.tahoe-fs .tfs-caret {
	flex: 0 0 auto;
	width: 0; height: 0;
	border: 8px solid transparent;
	border-left-color: #fff;      /* points right when closed */
	margin-left: 4px;
	transition: border-color 0.2s ease;
}
.tahoe-fs .accordion-grid-item.is-open .tfs-caret {
	border-left-color: transparent;
	border-top-color: #fff;       /* points down when open */
	margin-top: 4px;
}

/* ── Expanding panel ──────────────────────────────────────────────────────────
   Closed: hidden child of its tile (kept in DOM so the Search-Filter highlight
   TreeWalker can pre-wrap <mark>s on load). Open: JS moves the same node to be a
   DIRECT child of .accordion-grid, where the direct-child selector spans the
   full row and appears after the tile's row.
   --------------------------------------------------------------------------- */
.tahoe-fs .accordion-panel { display: none; }

.tahoe-fs .accordion-grid > .accordion-panel {
	display: block;
	grid-column: 1 / -1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--tfs-accent-soft);
	border-radius: var(--tfs-radius);
	padding: 16px 20px 18px;
	animation: tahoe-fs-panel-in 0.18s ease;
}

@keyframes tahoe-fs-panel-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Body holds the ACF feature_content list. Multi-column flow on desktop:
   items run top-to-bottom and balance across columns, so there is no dead space
   below short items — any leftover falls at the end of the last column.
   (<br> tags are stripped server-side in the renderer.) */
.tahoe-fs .accordion-panel-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 24px;
}
.tahoe-fs .accordion-panel-body li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--tfs-muted);
	padding: 3px 0 3px 14px;
	position: relative;
	break-inside: avoid;             /* keep a multi-line item whole in its column */
	-webkit-column-break-inside: avoid;
}
/* Bullet: 4px accent bar, FIRST LINE ONLY (fixed height, not stretched). */
.tahoe-fs .accordion-panel-body li::before {
	content: "";
	position: absolute;
	left: 0; top: 6px;
	width: 4px;
	height: 13px;
	background: var(--tfs-accent);
	border-radius: 2px;
}
.tahoe-fs .accordion-panel-body p { color: var(--tfs-muted); font-size: 13px; }
.tahoe-fs .accordion-panel-body a { color: var(--tfs-accent-amber); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.tahoe-fs .accordion-grid { grid-template-columns: repeat(2, 1fr); }
	.tahoe-fs .accordion-panel-body ul { column-count: 2; }
}
@media (max-width: 600px) {
	.tahoe-fs .accordion-grid { grid-template-columns: 1fr; }
	.tahoe-fs .accordion-panel-body ul { column-count: 1; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tahoe-fs .accordion-grid > .accordion-panel { animation: none; }
	.tahoe-fs.tfs-collapsible.is-revealed { animation: none; }
	.tahoe-fs .tfs-caret,
	.tahoe-fs .accordion-grid-item { transition: none; }
}