/* Onsite Gallery — search modal, live results, search results page and the
   mobile off-canvas menu.
   Loaded on every front-end page (inc/search-and-menu.php): the modal and
   the off-canvas panel are printed on all of them. Kept out of onsite.css;
   reuses its tokens.

   SPECIFICITY. Blocksy writes this chrome's colours as custom properties in
   its dynamic inline block (#ct-main-styles-inline-css), which prints AFTER
   this sheet, under selectors like `[data-header*="type-1"] #search-modal`
   at (1,1,0). Every override of those is prefixed `body[data-header]`: the
   same attribute-plus-ID shape with one element more, (1,1,1) — the smallest
   increment that wins wherever the two sheets land, the same reasoning as
   `html body` in onsite.css. Where Blocksy reads a variable, the variable is
   set rather than the property.

   Blocksy's focus ring is `outline:2px solid var(--theme-palette-color-1)`,
   resolved on the focused element, so remapping palette 1 to ink on each
   scope turns every inherited focus ring ink. Its selection colour is read
   the same way. Neither touches the global palette. */

:root{
	/* Argentinian grey (#ADAC98) is 2.11:1 on paper, so it can't carry text.
	   Same hue, darkened to text weight: 5.68:1 on paper, 4.67:1 on whisper. */
	--muted-text:#63624F;
}

/* ============================================================
   SEARCH MODAL
   ============================================================ */
body[data-header] #search-modal{
	background-color:var(--paper);
	color:var(--ink);
	--theme-palette-color-1:var(--ink);
	--theme-selection-background-color:var(--onsite-yellow);
	--theme-selection-text-color:var(--ink);
	/* Top-anchored rather than centred, so the field stays put when live
	   results open beneath it. */
	--vertical-alignment:flex-start;
}
body[data-header] #search-modal .ct-panel-content{
	padding-top:clamp(40px, 14vh, 150px);
	overflow-y:auto;
}

/* Close: ink X, 44px target, yellow disc on hover/focus. Shared with the
   off-canvas panel. */
body[data-header] #search-modal .ct-toggle-close,
body[data-header] #offcanvas .ct-toggle-close{
	--theme-icon-color:var(--ink);
	--theme-icon-size:14px;
	--toggle-button-padding:15px;
	--toggle-button-margin-end:-15px;
	--toggle-button-margin-block:-15px;
	--toggle-button-radius:50%;
	--outline-offset:2px;
}
body[data-header] #search-modal .ct-toggle-close:hover,
body[data-header] #search-modal .ct-toggle-close:focus-visible,
body[data-header] #offcanvas .ct-toggle-close:hover,
body[data-header] #offcanvas .ct-toggle-close:focus-visible{
	--toggle-button-background:var(--onsite-yellow);
}

/* The form: one large underlined field, no box, no pill. */
body[data-header] #search-modal .ct-search-form{
	/* Blocksy's own value below 1000px is 90%; this keeps a 24px gutter
	   each side at any width instead. */
	--theme-form-max-width:min(760px, calc(100% - 48px));
	--theme-form-font-size:clamp(1.35rem, 3.6vw, 2.25rem);
	--theme-form-field-height:64px;
	--theme-form-border-radius:0px;
	--theme-form-field-border-radius:0px;
	--theme-form-text-initial-color:var(--ink);
	--theme-form-text-focus-color:var(--ink);
	--theme-form-field-border-initial-color:var(--ink);
	--theme-form-field-border-focus-color:var(--ink);
	--theme-link-initial-color:var(--ink);
	--theme-button-text-initial-color:var(--ink);
	--theme-button-text-hover-color:var(--ink);
	--theme-button-background-initial-color:transparent;
	--theme-button-background-hover-color:var(--onsite-yellow);
}
@media (max-width:689.98px){
	body[data-header] #search-modal .ct-search-form{
		--theme-form-field-height:52px;
	}
}
body[data-header] #search-modal .ct-search-form-inner{
	border-width:0 0 1px;
	border-radius:0;
	padding-block:0;
	padding-inline:0;
	gap:12px;
	/* Blocksy draws focus as a 2px outline round all four sides. The field
	   is a single rule, so focus thickens the rule instead (below). */
	outline:none;
	transition:box-shadow .2s ease;
}
/* Focus: the ink rule goes from 1px to 3px, with the yellow as a band
   beneath it. The ink change carries the state (10.8:1 on paper); yellow
   on paper is 1.33:1, so it is the accent, not the indicator. The modal
   focuses the field on open, so this is also how the open modal looks. */
body[data-header] #search-modal .ct-search-form-inner:focus-within{
	box-shadow:0 2px 0 0 var(--ink), 0 6px 0 0 var(--onsite-yellow);
}
body[data-header] #search-modal .modal-field{
	font-family:var(--font-heading);
	font-weight:400;
	letter-spacing:-.015em;
	padding-inline:0;
}
body[data-header] #search-modal .modal-field::placeholder{
	color:var(--muted-text);
	opacity:1;
}
/* Submit: an ink magnifier on transparent; yellow arrives on hover/focus
   only, the same treatment as the homepage carousel buttons. */
body[data-header] #search-modal .wp-element-button{
	--theme-icon-size:20px;
	--theme-button-border-radius:50%;
	--theme-button-min-height:48px;
	width:48px;
	min-width:48px;
}
body[data-header] #search-modal .wp-element-button:focus-visible{
	background-color:var(--onsite-yellow);
	outline:2px solid var(--ink);
	outline-offset:2px;
}

/* ============================================================
   LIVE RESULTS — the modal's list and any inline dropdown
   (the search form on an empty results page)
   ============================================================ */
body .ct-search-results{
	--theme-font-family:var(--font-body);
	--theme-font-weight:400;
	--theme-font-size:15px;
	--theme-line-height:1.35;
	--theme-link-initial-color:var(--ink);
	--theme-link-hover-color:var(--ink);
	--search-dropdown-background:var(--paper);
	--search-dropdown-box-shadow:none;
	--search-image-radius:0px;
	--search-image-size:56px;
	--items-divider:1px solid var(--whisper-grey);
	--items-spacing:16px;
	--items-padding:10px 12px;
	border:1px solid var(--whisper-grey);
	border-radius:0;
	--theme-palette-color-1:var(--ink);
}
body .ct-search-results a{
	color:var(--ink);
	transition:background-color .2s ease;
}
body .ct-search-results a:hover,
body .ct-search-results a:focus-visible{
	background-color:var(--whisper-grey);
}
body .ct-search-results a:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:-2px;
}
body .ct-search-results .ct-media-container{
	aspect-ratio:1/1;
	background:var(--whisper-grey);
	border-radius:0;
	box-shadow:none;
}
body .ct-search-results .ct-media-container img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:0;
}

/* In the modal the list sits straight on the paper overlay: no frame, rows
   divided by hairlines, whisper grey only under the row being pointed at. */
body[data-header] #search-modal .ct-search-results{
	--theme-font-family:var(--font-body);
	--theme-font-weight:400;
	--theme-font-size:15px;
	--theme-line-height:1.35;
	--items-padding:10px 12px;
	--items-spacing:16px;
	--items-divider:1px solid var(--whisper-grey);
	border:0;
	gap:0 30px;
}
/* Blocksy sizes modal thumbnails at 15–20% of the row, declared on the
   container itself, so the fixed size has to be declared there too. */
body[data-header] #search-modal .ct-search-results .ct-media-container{
	--search-image-size:56px;
}
body[data-header] #search-modal .ct-search-results .ct-search-item{
	min-height:76px;
}
/* "Show more" → the results page. Styled as the site's section links:
   small caps on a yellow rule. */
body[data-header] #search-modal .ct-search-results .ct-search-more,
body .ct-search-results .ct-search-more{
	justify-content:center;
	min-height:44px;
	margin-top:14px;
	padding:12px 0;
	border-bottom:0;
	font-family:var(--font-heading);
	font-weight:500;
	font-size:12px;
	letter-spacing:.18em;
	text-transform:uppercase;
	background:none;
}
body .ct-search-results .ct-search-more{
	text-decoration:underline;
	text-decoration-color:var(--onsite-yellow);
	text-decoration-thickness:2px;
	text-underline-offset:6px;
}
body .ct-search-results .ct-search-more:hover,
body .ct-search-results .ct-search-more:focus-visible{
	background:none;
	color:var(--greeny-blue);
}

/* ============================================================
   SEARCH RESULTS PAGE  (/?s=)
   Blocksy's dynamic rules here sit at (0,2,0)–(0,3,0) under
   [data-prefix="search"]; body[data-prefix="search"] adds the one
   element that wins. Cards follow .onsite-piece in onsite.css.
   ============================================================ */
body[data-prefix="search"] .site-main{
	color:var(--ink);
	font-family:var(--font-body);
	--theme-palette-color-1:var(--ink);
	--theme-selection-background-color:var(--onsite-yellow);
	--theme-selection-text-color:var(--ink);
}

/* Title: "Results for ‘mirror’" (wording from inc/search-and-menu.php). */
body[data-prefix="search"] .hero-section[data-type="type-1"]{
	text-align:center;
	margin:0 auto 50px;
	padding-bottom:36px;
	border-bottom:1px solid var(--line);
}
body[data-prefix="search"] .entry-header .page-title{
	font-family:var(--font-heading);
	font-weight:400;
	font-size:clamp(1.9rem, 4vw, 3rem);
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--ink);
	overflow-wrap:break-word;
}
body[data-prefix="search"] .entry-header .page-description{
	font-size:16px;
	line-height:1.7;
	color:var(--ink);
}

/* Grid: same columns and gaps as the Collection (.onsite-browse .onsite-grid). */
body[data-prefix="search"] .entries{
	--grid-template-columns:repeat(3, minmax(0, 1fr));
	grid-column-gap:30px;
	grid-row-gap:38px;
}
@media (max-width:900px){
	body[data-prefix="search"] .entries{--grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:560px){
	body[data-prefix="search"] .entries{--grid-template-columns:minmax(0, 1fr);}
}

/* Card: no box, no shadow — image first, then category, then title. */
body[data-prefix="search"] .entry-card{
	background-color:transparent;
	--theme-box-shadow:none;
	--theme-border-radius:0px;
	--card-inner-spacing:0px;
	--card-element-spacing:0px;
	--theme-link-initial-color:var(--ink);
	--theme-link-hover-color:var(--greeny-blue);
	text-align:start;
}
body[data-prefix="search"] .entry-card > .ct-media-container{
	order:-1;
	width:100%;
	margin:0 0 18px;
	aspect-ratio:4/5;
	background:var(--whisper-grey);
	border-radius:0;
	box-shadow:none;
}
/* Width and height both stated, so the inline aspect-ratio:4/3 Blocksy
   prints on the <img> no longer applies; the box's 4:5 governs. */
body[data-prefix="search"] .entry-card > .ct-media-container img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 1s cubic-bezier(.6,0,.2,1);
}
body[data-prefix="search"] .entry-card:hover > .ct-media-container img{
	transform:scale(1.05);
}
body[data-prefix="search"] .entry-card > .ct-media-container:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
	body[data-prefix="search"] .entry-card > .ct-media-container img{transition:none;}
	body[data-prefix="search"] .entry-card:hover > .ct-media-container img{transform:none;}
}

/* Category label: muted small caps, one line. A piece can carry seven
   categories; the first one or two read, the rest trail off. */
body[data-prefix="search"] .entry-card .entry-meta[data-id="meta_1"]{
	margin:0 0 7px;
	font-family:var(--font-heading);
	font-weight:500;
	font-size:11px;
	line-height:1.5;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--muted-text);
	--theme-link-initial-color:var(--muted-text);
	--theme-link-hover-color:var(--greeny-blue);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
body[data-prefix="search"] .entry-card .entry-meta[data-id="meta_1"] li{
	display:inline;
}
body[data-prefix="search"] .entry-card .entry-title{
	margin:0;
	font-family:var(--font-heading);
	font-weight:500;
	font-size:1.25rem;
	line-height:1.2;
	letter-spacing:-.015em;
	color:var(--ink);
}
body[data-prefix="search"] .entry-card .entry-title a:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:2px;
}
body[data-prefix="search"] .entry-card .entry-excerpt{
	margin-top:8px;
	font-size:14px;
	line-height:1.6;
	color:var(--ink);
}
body[data-prefix="search"] .entry-card .entry-excerpt:empty{
	display:none;
}

/* "ADMIN / date": the author is the WordPress login and its archive is
   closed (inc/security.php), so it goes everywhere. Pieces lose the date as
   well — it is the upload date, not anything about the piece. Journal posts
   and pages keep theirs. */
body[data-prefix="search"] .entry-card .meta-author{
	display:none;
}
body[data-prefix="search"] .entry-card.type-product .entry-meta[data-id="meta_2"]{
	display:none;
}
body[data-prefix="search"] .entry-card .entry-meta[data-id="meta_2"]{
	margin-top:10px;
	font-family:var(--font-body);
	font-weight:400;
	font-size:12px;
	letter-spacing:.04em;
	text-transform:none;
	color:var(--muted-text);
}

/* Pagination: the .onsite-pagination pills. */
body[data-prefix="search"] .ct-pagination{
	font-family:var(--font-body);
	font-weight:400;
	font-size:13px;
	color:var(--ink);
	--theme-link-initial-color:var(--ink);
	--theme-link-hover-color:var(--greeny-blue);
}
body[data-prefix="search"] .ct-pagination .page-numbers{
	min-width:44px;
	height:44px;
	border:1px solid var(--line);
	border-radius:40px;
	color:var(--ink);
	transition:border-color .25s, color .25s;
}
body[data-prefix="search"] .ct-pagination .page-numbers:not(.dots):hover,
body[data-prefix="search"] .ct-pagination .page-numbers:not(.dots):focus-visible{
	border-color:var(--ink);
	color:var(--greeny-blue);
}
body[data-prefix="search"] .ct-pagination .page-numbers.current{
	background:var(--ink);
	border-color:var(--ink);
	color:var(--paper);
}
body[data-prefix="search"] .ct-pagination .page-numbers.dots{
	border-color:transparent;
}
body[data-prefix="search"] .ct-pagination :is(.prev, .next){
	padding:0 20px;
	letter-spacing:.12em;
}

/* No results: the same underlined field as the modal, smaller. */
body[data-prefix="search"] .ct-no-results .ct-search-form{
	--theme-form-field-height:52px;
	--theme-form-font-size:18px;
	--theme-form-field-border-radius:0px;
	--theme-form-text-initial-color:var(--ink);
	--theme-form-text-focus-color:var(--ink);
	--theme-form-field-border-initial-color:var(--ink);
	--theme-form-field-border-focus-color:var(--ink);
}
body[data-prefix="search"] .ct-no-results .ct-search-form-inner{
	border-width:0 0 1px;
	border-radius:0;
	padding-inline:0;
	outline:none;
}
body[data-prefix="search"] .ct-no-results .ct-search-form-inner:focus-within{
	box-shadow:0 2px 0 0 var(--ink), 0 6px 0 0 var(--onsite-yellow);
}
body[data-prefix="search"] .ct-no-results .ct-search-form input{
	font-family:var(--font-heading);
	padding-inline:0;
}
body[data-prefix="search"] .ct-no-results .ct-search-form input::placeholder{
	color:var(--muted-text);
	opacity:1;
}
body[data-prefix="search"] .ct-no-results .wp-element-button{
	--theme-icon-size:16px;
	--theme-button-text-initial-color:var(--ink);
	--theme-button-text-hover-color:var(--ink);
	--theme-button-background-hover-color:var(--onsite-yellow);
	--theme-button-border-radius:50%;
	width:44px;
	min-width:44px;
}

/* ============================================================
   MOBILE OFF-CANVAS MENU
   ============================================================ */
body[data-header] #offcanvas{
	--theme-box-shadow:0 0 60px rgba(60, 55, 51, .18);
	--theme-palette-color-1:var(--ink);
	--theme-selection-background-color:var(--onsite-yellow);
	--theme-selection-text-color:var(--ink);
	background-color:rgba(60, 55, 51, .45);
}
body[data-header] #offcanvas .ct-panel-inner{
	background-color:var(--paper);
	--panel-padding:32px;
}
@media (min-width:690px){
	body[data-header] #offcanvas .ct-panel-inner{--panel-padding:44px;}
}

/* Logo band, printed by onsite_offcanvas_logo(): the mobile header's ink
   row, at its height, with the logo at its size (105px) and in its own
   yellow. The band bleeds out of the panel padding to the edges and sticks,
   so the close button, which sits on it, always has ink behind it even when
   the menu scrolls on a short screen. */
body[data-header] #offcanvas{
	--onsite-band-h:130px;
}
body[data-header] #offcanvas .onsite-offcanvas-logo{
	position:sticky;
	/* Sticky offsets count from the scroller's content edge, i.e. inside
	   its padding; this pins the band to the panel's real top edge. */
	top:calc(var(--panel-padding) * -1);
	z-index:1;
	display:flex;
	align-items:center;
	align-self:stretch;
	height:var(--onsite-band-h);
	margin:calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 24px;
	padding-inline:var(--panel-padding);
	background-color:var(--ink);
}
body[data-header] #offcanvas .onsite-offcanvas-logo__img{
	display:block;
	/* Stated, not auto: WordPress gives a lazy image sizes="auto", and the
	   browser picks the file from this rendered width (300w at 2x). */
	width:132px;
	height:105px;
	max-width:none;
}
/* On ink the ring goes yellow: 8.12:1 (an ink ring would vanish). */
body[data-header] #offcanvas .onsite-offcanvas-logo:focus-visible{
	outline:2px solid var(--onsite-yellow);
	outline-offset:-6px;
}

/* With the band there, the close button lifts out of its own row onto the
   band, centred in it, and turns paper (10.79:1 on ink). Hover and focus
   keep the yellow disc, with the X back to ink on it (8.12:1). */
body[data-header] #offcanvas:has(.onsite-offcanvas-logo) .ct-panel-actions{
	position:absolute;
	top:0;
	inset-inline-end:0;
	z-index:2;
	height:var(--onsite-band-h);
	padding-top:0;
	padding-inline:var(--panel-padding);
}
body[data-header] #offcanvas:has(.onsite-offcanvas-logo) .ct-toggle-close{
	--theme-icon-color:var(--paper);
}
body[data-header] #offcanvas:has(.onsite-offcanvas-logo) .ct-toggle-close:hover,
body[data-header] #offcanvas:has(.onsite-offcanvas-logo) .ct-toggle-close:focus-visible{
	--theme-icon-color:var(--ink);
}
body[data-header] #offcanvas:has(.onsite-offcanvas-logo) .ct-toggle-close:focus-visible{
	outline:2px solid var(--onsite-yellow);
	outline-offset:2px;
}

body[data-header] #offcanvas .mobile-menu{
	--theme-font-family:var(--font-heading);
	--theme-font-weight:400;
	--theme-font-size:26px;
	--theme-line-height:1.2;
	--theme-letter-spacing:-.015em;
	--theme-link-initial-color:var(--ink);
	--theme-link-hover-color:var(--greeny-blue);
	--theme-link-active-color:var(--ink);
	--items-vertical-spacing:13px;
}
body[data-header] #offcanvas .mobile-menu > ul > li + li{
	border-top:1px solid var(--line);
}
body[data-header] #offcanvas .mobile-menu .ct-menu-link{
	min-height:44px;
}
body[data-header] #offcanvas .mobile-menu .ct-menu-link:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:2px;
}
/* Current page: weight plus a yellow rule under the word. The weight change
   and aria-current carry the state; the yellow is the accent. */
body[data-header] #offcanvas .mobile-menu li[class*="current-menu-"] > .ct-menu-link{
	font-weight:500;
	text-decoration-line:underline;
	text-decoration-color:var(--onsite-yellow);
	text-decoration-thickness:4px;
	text-underline-offset:8px;
	text-decoration-skip-ink:none;
}
/* Sub-menus (none in the menu today): smaller, and a 44px toggle. */
body[data-header] #offcanvas .mobile-menu .sub-menu{
	--theme-font-size:18px;
	--items-vertical-spacing:9px;
}
body[data-header] #offcanvas .mobile-menu [class*="ct-toggle-dropdown"]{
	--toggle-button-size:44px;
	--theme-icon-color:var(--ink);
}

/* ============================================================
   MOBILE HEADER ICONS — search and menu toggle
   The search element is added beside the toggle by
   onsite_mobile_header_search(). Both icons render at 15–18px with no
   padding; same 44px fix as .ct-header-trigger in onsite.css.

   Colours: brand yellow at rest (8.12:1 on the ink row), paper on hover
   (10.79:1), and a yellow focus ring. Blocksy's own values here were
   uneven: the toggle was #e8b21d below 690px but its default slate
   (#3A4F66, about 1.5:1 on ink) from 690 to 999px, it hovered to palette
   blue, and both focus rings were palette blue. Blocksy declares the icon
   colours at (0,2,0); scoping to the mobile header puts these at (1,2,0),
   and the desktop search icon keeps its Customizer colours.
   ============================================================ */
#header [data-device="mobile"] .ct-header-search{
	min-width:44px;
	min-height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
#header [data-device="mobile"] :is([data-id="search"], [data-id="trigger"]){
	--theme-icon-color:var(--onsite-yellow);
	--theme-icon-hover-color:var(--paper);
}
#header [data-device="mobile"] :is([data-id="search"], [data-id="trigger"]):focus-visible{
	outline:2px solid var(--onsite-yellow);
	outline-offset:2px;
}