/* odf-theme CSS bundle - SOURCE OF TRUTH since 29 Jul 2026: edit this file directly.
   Produced by the one-time split of the retired main.css. Conventions + how to add
   components or page types: docs/CSS_ARCHITECTURE.md. Gate: scripts/css-coverage.py. */
/* --- Directory: layout, filter panel, results header --- */
.odf-dirlayout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--odf-sp-6); align-items: start; }
@media (max-width: 900px) { .odf-dirlayout { grid-template-columns: 1fr; }}
/* NOT sticky (founder feedback 2026-07-16 item 2): the panel is taller than
   the viewport, so sticky made its bottom unreachable. Normal in-flow rail. */
.odf-dirrail { min-width: 0; }

/* Directory name search - above the grid, full width of the results column. */
/* The results column: search box stacked above the grid, one grid cell. */
.odf-dircol { min-width: 0; }
.odf-dirsearchwrap { margin-bottom: var(--odf-sp-4); }
.odf-dirsearch { position: relative; display: flex; gap: var(--odf-sp-2); align-items: stretch; }
.odf-dirsearch__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--odf-ink-3); pointer-events: none; display: flex; }
.odf-dirsearch input[type="search"] {
	flex: 1 1 auto; min-width: 0; padding: 12px 14px 12px 42px;
	border: 1px solid var(--odf-line); border-radius: var(--odf-radius);
	background: var(--odf-card); font-size: var(--odf-fs-base); color: var(--odf-ink);
}
.odf-dirsearch input[type="search"]:focus-visible { outline: 2px solid var(--odf-green); outline-offset: 1px; border-color: var(--odf-green); }
.odf-dirsearch input[type="search"]::placeholder { color: var(--odf-ink-3); }
/* No submit button: typing filters after 3 characters, and with JS off pressing
   Enter submits the form natively. A button that only ever duplicated the Enter
   key was one more thing between a reader and the food they were looking for. */

@media (max-width: 640px) {
	/* 16px stops iOS Safari zooming the page on focus. */
	.odf-dirsearch input[type="search"] { font-size: 16px; padding-block: 11px; }
	.odf-dirsearch__go { padding-inline: var(--odf-sp-4); }}
.odf-filters { border: 1px solid var(--odf-line); border-radius: var(--odf-radius-lg); background: var(--odf-card); box-shadow: var(--odf-shadow-xs); }
.odf-filters > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--odf-sp-2); padding: var(--odf-sp-3) var(--odf-sp-4); font-weight: 700; color: var(--odf-ink); cursor: pointer; }
.odf-filters > summary::-webkit-details-marker { display: none; }
.odf-filters > summary svg { color: var(--odf-ink-3); transition: transform var(--odf-dur) var(--odf-ease); }
.odf-filters[open] > summary svg { transform: rotate(180deg); }
@media (min-width: 901px) { .odf-filters > summary { display: none; }}
.odf-fpanel { padding: var(--odf-sp-4); }
.odf-fpanel__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--odf-ink); font-size: var(--odf-fs-base); margin: 0 0 var(--odf-sp-3); }
@media (max-width: 900px) { .odf-fpanel__title { display: none; } .odf-fpanel { padding-top: var(--odf-sp-2); }}
.odf-fpanel__props { border: 0; padding: 0; margin: var(--odf-sp-3) 0 0; }
.odf-fpanel__props legend { font-size: var(--odf-fs-sm); font-weight: 600; color: var(--odf-ink); padding: 0; margin-bottom: 4px; }
.odf-check { display: flex; gap: 8px; align-items: center; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); padding: 3px 0; cursor: pointer; }
.odf-check input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--odf-green); }
.odf-fpanel__actions { display: flex; align-items: center; gap: var(--odf-sp-3); margin-top: var(--odf-sp-4); }
.odf-fpanel__reset { font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }
.odf-fpanel__reset:hover { color: var(--odf-ink); }
.odf-dirhead { display: flex; justify-content: space-between; align-items: center; gap: var(--odf-sp-3); flex-wrap: wrap; }
.odf-dirhead__count { font-weight: 700; color: var(--odf-ink); margin: 0; font-variant-numeric: tabular-nums; }
.odf-dirsort { display: flex; align-items: center; gap: var(--odf-sp-2); }
.odf-dirsort select { border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); background: var(--odf-card); padding: 8px 14px; font-size: var(--odf-fs-sm); font-weight: 600; color: var(--odf-ink); }

/* --- Directory type row (odf-directory.php): the food count + the categorical
       type-mix diagram as ONE full-width authority strip under the hero (not a
       half-width card). Headline count on the left with a hairline divider, the
       distinct-colour proportion bar filling the rest. Stacks on phones and the
       bar stays legible. ----------------------------------------------------- */
.odf-dirtypes {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
	gap: var(--odf-sp-4) var(--odf-sp-6); margin-bottom: var(--odf-sp-5);
	padding: var(--odf-sp-4) var(--odf-sp-5);
	background: var(--odf-card); border: 1px solid var(--odf-line);
	border-radius: var(--odf-radius-card); box-shadow: var(--odf-shadow-card);
}
.odf-dirtypes--solo { grid-template-columns: auto; }
.odf-dirtypes__lead {
	display: flex; flex-direction: column; gap: 2px;
	padding-right: var(--odf-sp-6); border-right: 1px solid var(--odf-line);
}
.odf-dirtypes--solo .odf-dirtypes__lead { padding-right: 0; border-right: 0; }
.odf-dirtypes__count {
	font-family: var(--odf-font-display); font-weight: var(--odf-display-weight);
	font-size: var(--odf-fs-stat); line-height: var(--odf-lh-tight); color: var(--odf-ink);
	font-variant-numeric: tabular-nums; letter-spacing: var(--odf-tracking-tight);
}
.odf-dirtypes__label {
	font-size: var(--odf-fs-xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: var(--odf-ink-3); max-width: 14ch;
}
.odf-dirtypes__bar { min-width: 0; }
@media (max-width: 760px) {
	.odf-dirtypes { grid-template-columns: 1fr; gap: var(--odf-sp-3); padding: var(--odf-sp-4); }
	.odf-dirtypes__lead {
		flex-direction: row; align-items: baseline; gap: var(--odf-sp-2);
		padding: 0 0 var(--odf-sp-3); border-right: 0; border-bottom: 1px solid var(--odf-line);
	}
	.odf-dirtypes__label { max-width: none; }}

/* --- Live filters (assets/js/filters.js): the Apply button demotes itself
       while the module is live (results update on change; the button stays
       in the DOM as the no-JS path), and the swap region signals loading. --- */
.odf-fpanel.is-live .odf-fpanel__apply { display: none; }

/* Type drill-down chips on a browse-parent facet page (Dry, Wet & fresh -> the
   specific formats it groups). One quiet pill row above the results. */
.odf-typechips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--odf-sp-4); }
.odf-typechips__lbl { font-size: var(--odf-fs-sm); font-weight: 600; color: var(--odf-ink-3); margin-right: 2px; }
.odf-typechip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--odf-radius-pill);
	background: var(--odf-card); border: 1px solid var(--odf-line); color: var(--odf-ink); font-size: var(--odf-fs-sm);
	font-weight: 600; text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.odf-typechip:hover, .odf-typechip:focus-visible { background: var(--odf-green-soft); border-color: var(--odf-green); color: var(--odf-green-deep); }
.odf-typechip__ico { width: 15px; height: 15px; color: var(--odf-green); flex: none; }

/* Avoid-ingredients filter. Went from 3 options to 10 when it started reading the
   plugin's vocabulary instead of a theme-side copy, so it needs to wrap into
   columns rather than run as one long stack down the panel. */
.odf-fpanel__props--avoid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--odf-sp-1) var(--odf-sp-3);
}
.odf-fpanel__props--avoid legend,
.odf-fpanel__hint {
	grid-column: 1 / -1;
}
.odf-fpanel__hint {
	margin: 0 0 var(--odf-sp-2);
	font-size: var(--odf-fs-xs);
	color: var(--odf-ink-3);
	line-height: 1.35;
}

/* "Best value" is the one sort whose name does not explain itself, so the option
   carries its unit inline. Nothing to style beyond keeping the select readable at
   the longer label length. */
.odf-dirsort select { max-width: 100%; }

/* =========================================================================
   THEMED SELECTS - custom chevron (founder 2026-07-19: the native arrow sat
   hard against the right border and read as cramped).
   MUST live at the END of the file: several of these selectors (.odf-dirsort,
   .odf-reviews__sort, .odf-fc__field) set the `background` SHORTHAND further up,
   which would wipe our background-image if we declared it earlier. We restate
   background-color here for the same reason.
   ========================================================================= */
.odf-fld select,
.odf-dirsort select,
.odf-reviews__sort select,
.odf-fc__field select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-color: var(--odf-card);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 15px;
	padding-right: 40px;
}
/* The pill-shaped sort control needs a touch more room inside the curve. */
.odf-dirsort select { background-position: right 15px center; padding-right: 40px; }


/* --- Text & search fields: ONE focus system ------------------------------
   These had FOUR different treatments: a translucent ring outside a green
   border (read as a double border), a bare 2px outline with an offset on the
   directory box, a green border with no ring in the header, and a ring with
   no border change elsewhere. They now all do the same thing - the border
   turns green and a soft tint halo sits flush against it - so every field on
   the site focuses identically and none of them look doubled. */
.odf-input:focus,
.odf-fld input:focus,
.odf-fld textarea:focus,
.odf-fld select:focus,
.odf-search input:focus,
.odf-gtools__search input:focus,
.odf-brandix__search input:focus,
.odf-guidefilter__search input:focus,
.odf-dirsearch input[type="search"]:focus,
.odf-dirsearch input[type="search"]:focus-visible,
.odf-cde-search__field:focus-within {
	outline: none;
	border-color: var(--odf-green);
	box-shadow: var(--odf-ring-field);
}