/* =============================================================================
   Avalon Boat Features & Specs (Per-Section)  ·  CSS  ·  rev 2026-06-20 (c)
   -----------------------------------------------------------------------------
   rev (c) 2026-06-20 — subnote + collapsible deltas (back-port of Tahoe rev-e):
     • .afs-heading-note — small muted, italic sub-line under the heading
       (term-mode `subnote` attr, e.g. "(*all boats listed on this page)" on the
       model archive 37088).
     • Collapsible mode (.avalon-fs.afs-collapsible) — the whole block is hidden
       until a paired ".afs-reveal" button toggles `.is-revealed` (category loop
       37632). Hidden via display:none so there is no flash under WP Rocket
       Delay-JS; the renderer's per-section <noscript> un-hides it when scripting
       is off. Term-mode (model archive) blocks are never collapsible.
       NOTE: the .afs-reveal button itself is a native Elementor button — it is
       styled in Elementor and is only a JS hook here, so it carries NO CSS in
       this file (matches the Tahoe source).

   rev (b) 2026-06-16 — trigger/panel surface tweaks (per request):
     • Closed trigger background: rgba(255 255 255 / 20%)
     • Hover/focus trigger background: rgba(255 255 255 / 0%)  (transparent)
     • Open panel background: rgba(255, 255, 255, 6%)
     (Open trigger stays brand blue; cascade order closed < hover < open kept.)

   rev (a) — faithful port of the Tahoe component CSS (rev-d), re-tokenised to
   Avalon: accent var(--primary-color, #006991); NO amber (focus outline + panel
   links use blue); open-panel border = soft tint of the primary. Layout (grid,
   content-sized columns="6", multi-column body, first-line bullet bar) carried
   from Tahoe rev-d.

   Tokens come from the child theme style.css (Gotham / --primary-color #006991 /
   --white-color #fff). White-on-dark. Scoped to .avalon-fs. The
   .accordion__avalon_item / -head / -body classes are kept on the inner nodes
   for Avalon Search Filter deep-link compatibility; the grid CONTAINER is
   .accordion__avalon-fs (NOT .accordion__avalon) so the live native handler
   never double-binds these tiles.
   ============================================================================= */

.avalon-fs {
	--afs-font:        var(--body-font-family, "Gotham", -apple-system, "Segoe UI", sans-serif);
	--afs-accent:      var(--primary-color, #006991);
	--afs-link:        #6EC1E4; /* Avalon Elementor accent blue (replaces Tahoe amber) */
	--afs-text:        var(--white-color, #ffffff);
	--afs-muted:       rgba(255, 255, 255, 0.72);
	--afs-faint:       rgba(255, 255, 255, 0.55);
	--afs-tile:        rgba(255, 255, 255, 0.05);
	--afs-tile-hover:  rgba(255, 255, 255, 0.09);
	--afs-border:      rgba(255, 255, 255, 0.12);
	--afs-accent-soft: rgba(0, 105, 145, 0.35); /* soft tint of #006991 */
	--afs-radius:      4px;

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

/* ── Collapsible (category loop 37632) ────────────────────────────────────────
   The whole block is hidden until its section's ".afs-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 .afs-collapsible.
   --------------------------------------------------------------------------- */
.avalon-fs.afs-collapsible { display: none; }
.avalon-fs.afs-collapsible.is-revealed {
	display: block;
	animation: avalon-fs-reveal 0.2s ease;
}
@keyframes avalon-fs-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

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

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

/* ── Grid of category tiles ───────────────────────────────────────────────── */
.avalon-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 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) {
	.avalon-fs.afs-cols-6 .accordion-grid {
		grid-template-columns: repeat(6, minmax(max-content, 1fr));
	}
	.avalon-fs.afs-cols-6 .accordion-grid-trigger {
		gap: 8px;
		padding: 10px 14px;
	}
	.avalon-fs.afs-cols-6 .accordion-trigger-label {
		white-space: nowrap;     /* one line; the column is sized to fit it */
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.avalon-fs.afs-cols-6 .accordion-grid > .accordion-panel {
		width: 0;
		min-width: 100%;
	}
}

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

.avalon-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: rgba(255 255 255 / 20%);   /* rev (b): closed trigger surface */
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--afs-text);
	font-family: var(--afs-font);
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hover / focus: neutralise the theme's button hover (scoped). */
.avalon-fs .accordion-grid-trigger:hover,
.avalon-fs .accordion-grid-trigger:focus {
	background-color: transparent;
	color: #fff;
	text-decoration: none;
	background: rgba(255 255 255 / 0%);    /* rev (b): transparent on hover/focus */
}
.avalon-fs .accordion-grid-trigger:focus-visible {
	outline: 2px solid var(--afs-accent);
	outline-offset: -2px;
}

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

.avalon-fs .accordion-trigger-label {
	font-family: var(--afs-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.
   --------------------------------------------------------------------------- */
.avalon-fs .afs-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;
}
.avalon-fs .accordion-grid-item.is-open .afs-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.
   --------------------------------------------------------------------------- */
.avalon-fs .accordion-panel { display: none; }

.avalon-fs .accordion-grid > .accordion-panel {
	display: block;
	grid-column: 1 / -1;
	background: rgba(255, 255, 255, 6%);   /* rev (b): open panel surface */
	border: 1px solid var(--afs-accent-soft);
	border-radius: var(--afs-radius);
	padding: 16px 20px 18px;
	animation: avalon-fs-panel-in 0.18s ease;
}

@keyframes avalon-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.) */
.avalon-fs .accordion-panel-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 24px;
}
.avalon-fs .accordion-panel-body li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--afs-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). */
.avalon-fs .accordion-panel-body li::before {
	content: "";
	position: absolute;
	left: 0; top: 6px;
	width: 4px;
	height: 13px;
	background: var(--afs-accent);
	border-radius: 2px;
}
.avalon-fs .accordion-panel-body p { color: var(--afs-muted); font-size: 13px; }
.avalon-fs .accordion-panel-body a { color: var(--afs-link); }

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

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