/*
 * Document-library chrome: where a page-change scroll lands, and the two
 * colours FileBird paints its file lists with.
 */

/*
 * Where a document library's page-change scroll lands.
 *
 * `library-nav.js` scrolls the section a paginated file list belongs to back
 * into view, and `scrollIntoView()` honours `scroll-margin-top` on the element
 * it scrolls to. A library normally sits inside an anchored `<details>` section
 * that already carries the site's own anchor offset; these rules cover the
 * library wrappers themselves, which is what the script falls back to when a
 * library stands on its own.
 *
 * The offset is the site's `--ffa-anchor-offset` where it is defined, so a
 * page-change lands in exactly the same place as a jump-link click, and a
 * literal 8rem where it is not — enough to clear the sticky FFA Horizon header
 * rather than leaving the top of the list underneath it.
 */
.njt-fbdl,
#filebird-document-library {
	scroll-margin-top: var( --ffa-anchor-offset, 8rem );
}

/*
 * White artwork, on something you can see it against.
 *
 * A reversed mark is white on transparent, and the file card is white, so
 * "FFA Ohio — Alumni Association, White (PNG)" rendered as an empty box. The
 * file is fine; the backdrop is wrong. Corduroy is what the brand puts a
 * reversed mark on, so the thumbnail doubles as a statement of what the file is
 * for, and the black and blue versions beside it keep the light card.
 *
 * ⚠️ Matched on the FILENAME, and that is the measured choice, not the obvious
 * one. Across the 1,073 files in the Brand Assets tree there are 255 white
 * assets. The filename catches all 255. The alt text misses 4 — the Service
 * Area icons, whose alt never names the colour. The TITLE misses 3, because
 * "FFA Lettermark_Solid Filled Container_White_RGB" wraps the word in
 * underscores and an underscore is a word character, so there is no word
 * boundary to match on.
 *
 * Restricted to png and svg because only a format with an alpha channel can
 * have this problem, which also keeps a photograph that happens to be called
 * something-white.jpg out of it.
 */
.njt-fbdl .fbdl-grid-thumbnail img[src*="white" i][src$=".png" i],
.njt-fbdl .fbdl-grid-thumbnail img[src*="white" i][src$=".svg" i] {
	background-color: var( --wp--preset--color--corduroy, #16274a );
	border-radius: 4px;
	box-sizing: border-box;
	padding: 8px;
}

/* The list view's thumbnail is 2.5rem, so it takes a smaller pad. */
.njt-fbdl .fbdl-list-item-thumbnail-wrapper img[src*="white" i][src$=".png" i],
.njt-fbdl .fbdl-list-item-thumbnail-wrapper img[src*="white" i][src$=".svg" i] {
	background-color: var( --wp--preset--color--corduroy, #16274a );
	border-radius: 3px;
	box-sizing: border-box;
	padding: 4px;
}

/*
 * The "Show N files" control, hidden where it cannot tell the truth.
 *
 * FileBird renders that input server-side from the count of files sitting
 * DIRECTLY in the library's own folder. Once a section's files live in format
 * subfolders — PNG, EPS, Illustrator (AI) — that count is zero, so the control
 * renders "Show 0 files" with max="0", and FileBird never updates it as the
 * reader navigates into a subfolder: measured on dev, still value 0 while the
 * page below it listed 12 of 134.
 *
 * `.fbdl-nested-folders` is the list of folder tiles, present in the DOM for a
 * hierarchical library in both views — the folder landing and inside a
 * subfolder — and absent from the flat sections, whose control shows a real
 * number and is left alone. Page size still comes from the block's own setting;
 * the pagination below the list is unaffected.
 *
 * ⚠️ The long selector is doing real work. FileBird styles this control as
 * `#filebird-document-library div.fbdl-layout-control .fbdl-layout-control-wrapper
 * .fbdl-layout-control-limit` — an id, three classes and an element (1,3,1). A
 * rule scoped only to `.njt-fbdl:has(…)` scores 0,3,0 and loses, and adding the
 * id alone still loses on the element. Both were measured in the browser:
 * `display` stayed `flex` while the rule sat in the stylesheet looking applied.
 * Matching their shape and adding the `:has()` guard scores 1,5,1 and wins on
 * the cascade rather than on `!important`.
 */
#filebird-document-library .njt-fbdl:has( .fbdl-nested-folders ) div.fbdl-layout-control .fbdl-layout-control-wrapper .fbdl-layout-control-limit {
	display: none;
}

/*
 * FileBird's own palette, in FFA colours.
 *
 * The plugin ships #007CBA — WordPress admin blue, which is not in the FFA
 * palette at all — and paints both the file-name links and the Download buttons
 * with it. On the file card's #F5F5F5 background that link scores 4.19:1,
 * under the 4.5:1 bar for body text, on every file in every library. FFA blue
 * takes the same link to 8.3:1 and the button's white label to 8.47:1.
 *
 * `--fb-color-primary-2` is the hover and focus partner: the Download button's
 * hover fill, the card's hover border, the focus ring on the search and
 * per-page inputs. Corduroy is the palette's darker blue and carries white at
 * 14.76:1.
 *
 * ⚠️ Two things here are load-bearing, and getting either wrong leaves a rule
 * that looks right and changes nothing. Both were found by measuring the
 * rendered colour, not by reading the CSS.
 *
 * `!important`, because FileBird declares these variables in an INLINE style
 * attribute built from the block's colour settings, and an inline declaration
 * outranks every normal author rule. An important author declaration is the one
 * thing that beats it.
 *
 * The selector, because that inline style sits on FileBird's own INNER wrapper,
 * not on `.njt-fbdl`. Redefining the variable on an ancestor does nothing at
 * all: the inner element's own declaration wins for itself and everything below
 * it, whatever an ancestor inherits down. Measured — with the ancestor rule in
 * place the link stayed rgb(0,124,186). So the rule has to land on the element
 * that carries the declaration, which is what the attribute match selects.
 */
.njt-fbdl [style*="--fb-color-primary-1"] {
	--fb-color-primary-1: var( --wp--preset--color--ffa-blue, #004c97 ) !important;
	--fb-color-primary-2: var( --wp--preset--color--corduroy, #16274a ) !important;
}