/*
Theme Name: Photographicon
Theme URI: https://photographicon.com/
Template: twentytwentyfive
Description: Twenty Twenty-Five child theme for photographicon.com. Site look only (colours, fonts, header, footer); the gallery templates, blocks and their styles come from the Photographicon plugin.
Author: Dominic Search
Version: 0.2.6
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: picon-tt25
*/

/*
 * Site-wide CSS that theme.json can't express. Gallery styling (cards, pills, image page, slideshow) belongs to
 * the plugin, not this file.
 *
 * 0.2.1 (24 Oct 2026): the .pgi-main padding and the 12px grid gap moved into the Photographicon plugin (2.3.0);
 * this theme no longer overrides them. Needs plugin 2.3.0 or later.
 * 0.2.2 (25 Oct 2026): the Site Logo block sits just right of the site title, at the title's height. The title's
 * size and line height are theme.json custom values (settings.custom.siteTitle), so the two can't drift apart.
 * 0.2.3 (25 Oct 2026): on phones (below 600px, where the menu becomes the ☰ button) the site title is 25px (was
 * 30px; the logo follows it). Menu headings open their dropdown when clicked or tapped anywhere (assets/picon-nav.js).
 * 0.2.4 (25 Oct 2026): on phones the site title is the size of an album title (1.3rem, the plugin's
 * --pgi-page-title-size), and a search icon sits right of the ☰ button; its box opens across the header bar.
 * The header's right-hand side is a Group (picon-tools) holding the menu and that Search block.
 * 0.2.5 (25 Oct 2026, with plugin 2.8.0): the menu follows the pages chosen in the plugin's Settings
 * (functions.php, parts/header.html); this file was unchanged and its Version line was left at 0.2.4.
 * 0.2.6 (27 Oct 2026, with plugin 2.9.1): Version line put right, so WordPress shows the theme's real version and
 * browsers fetch this stylesheet afresh. No style changes.
 */

:root {
	/* The page frame: 1200px of content plus the 15px root padding each side (theme.json). */
	--picon-frame: 1230px;
}

/* ---------------------------------------------------------------- Page frame */

/* Grey page; header and footer bars in #f5f5f5 and the content in a white panel, one column wide, as zpReBoot.
   The column fills the window height so a short page still has the footer at the bottom. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > * {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--picon-frame);
	margin-inline: auto;
}
/* No gaps between header, content and footer (Twenty Twenty-Five's templates set a top margin on main inline). */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}
.wp-site-blocks > header {
	background-color: #f5f5f5;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
	background-color: #ffffff;
}
.wp-site-blocks > footer {
	background-color: #f5f5f5;
}

/* ---------------------------------------------------------------- Header */

.picon-header .wp-block-site-title {
	margin: 0;
}

/* Phones (below 600px, WordPress's breakpoint for the ☰ menu): the site title the size of an album or image title
   (the Photographicon plugin's --pgi-page-title-size, 1.3rem = 20.8px there; 1.3rem without the plugin), still
   above the 16px count line. Set on body, which outweighs the theme.json value on :root for everything inside;
   the logo's height is worked out from the same value, so it shrinks with the title. */
@media (max-width: 599.98px) {
	body {
		--wp--custom--site-title--font-size: var(--pgi-page-title-size, 1.3rem);
	}
}

/* Phone search (0.2.4): a magnifier right of the ☰ button, only below 600px (wider screens have the one in the
   menu bar). Pressed, its box opens across the header bar, over the title and ☰ (the bar is too narrow to fit
   it beside them), and the magnifier then searches; tapping elsewhere or Escape closes it (WordPress's Search
   block does the opening and closing). The box's text is 16px so iOS doesn't zoom in on it. */
.picon-header .picon-phone-search {
	display: none;
}
@media (max-width: 599.98px) {
	.picon-header {
		position: relative;
	}
	.picon-header .picon-phone-search {
		display: block;
		margin: 0;
	}
	/* The closed box is zero wide but would keep its 44px height, making the bar taller than the ☰ row. */
	.picon-header .picon-phone-search .wp-block-search__inside-wrapper {
		align-items: center;
		height: 36px;
		padding: 0;
		border: 0;
	}
	.picon-header .picon-phone-search .wp-block-search__input {
		height: 36px;
	}
	.picon-header .picon-phone-search .wp-block-search__button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 36px;
		margin: 0;
		padding: 6px;
		line-height: 0;
		color: #333333;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.picon-header .picon-phone-search .wp-block-search__button svg {
		width: 24px;
		height: 24px;
	}
	.picon-header .picon-phone-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 16px;
		right: calc(16px + 36px + 4px);
		width: auto;
		height: 36px;
		margin: 0;
		padding: 0 12px;
		transform: translateY(-50%);
		font-size: 16px;
		background: #ffffff;
		border: 1px solid #dddddd;
		border-radius: 18px;
	}
	/* Focus as the gallery's other boxes (search page, keyword filter). */
	.picon-header .picon-phone-search .wp-block-search__input:focus {
		outline: 0;
		border-color: #80bdff;
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	}
}

/* Site title, then the Site Logo block just to its right (8px apart: the group's block gap in parts/header.html).
   The logo image is whatever is set in the Site Editor (or Customizer) as the site logo; nothing is hard-coded.
   Its height is the title's line box (font size × line height, 30px × 1.2 = 36px), its width follows the image's
   own shape. The block's own Width setting is overridden here, so leave it at its default. The selector
   outweighs core's ".wp-block-site-logo.is-default-size img" (120px wide). */
.picon-header .picon-brand {
	flex-shrink: 0;
}
.picon-header .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}
.picon-header .wp-block-site-logo a,
.picon-header .wp-block-site-logo .custom-logo-link {
	display: block;
	line-height: 0;
}
.picon-header .wp-block-site-logo img.custom-logo {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--wp--custom--site-title--font-size, 30px) * var(--wp--custom--site-title--line-height, 1.2));
}

/* Page title for ordinary (non album or image) pages */
h1.wp-block-post-title {
	text-align: center;
}


/* ---------------------------------------------------------------- Menu, wide screens (600px and up) */

/* zpReBoot's Bootstrap 4 navbar: items 8px padding, grey text; blue with white text on hover; the section you
   are in on #ddd. Dropdowns #f5f5f5 with a light border, items 4px 12px. Below 600px WordPress's own full-screen
   menu takes over (styled further down). */
@media (min-width: 600px) {
	/* Top level: the whole item (link and, for Browse / Find / About, its arrow) takes the colour. */
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .wp-block-navigation-item {
		align-items: center;
		color: rgba(0, 0, 0, 0.5);
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 8px;
		color: inherit;
		line-height: 1.5;
		text-decoration: none;
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
		padding-right: 2px;
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		margin: 0 8px 0 0;
		color: inherit;
	}
	/* A heading that only opens a dropdown (Browse, Find, About) is clickable as a whole (assets/picon-nav.js). */
	.wp-block-navigation.picon-nav .has-child > a.wp-block-navigation-item__content:not([href]) {
		cursor: pointer;
	}

	/* The section you are in: the item whose link, or anything in its dropdown, is the page being viewed. */
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, :has(.current-menu-item, .current-menu-ancestor)) {
		color: #000000;
		background-color: #dddddd;
	}

	/* Hover, keyboard focus and open: blue with white text (the section you are in too). */
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within),
	.wp-block-navigation.picon-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, :has(.current-menu-item, .current-menu-ancestor)):is(:hover, :focus-within) {
		color: #ffffff;
		background-color: #007bff;
	}

	/* Dropdowns */
	.wp-block-navigation.picon-nav:not(.has-background) .wp-block-navigation__submenu-container {
		min-width: 192px;
		padding: 8px 0;
		color: #212529;
		background-color: #f5f5f5;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 4px;
	}
	/* Dropdown items: 4px 12px, as Bootstrap's dropdown-item (the selector outweighs WordPress's own padding). */
	.wp-block-navigation.picon-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		color: #212529;
	}
	.wp-block-navigation.picon-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 4px 12px;
		color: inherit;
		line-height: 1.5;
		white-space: nowrap;
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item {
		color: #000000;
		background-color: #dddddd;
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(:hover, :focus-within) {
		color: #ffffff;
		background-color: #007bff;
	}
	.wp-block-navigation.picon-nav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-icon {
		margin-right: 8px;
		color: inherit;
	}

}

/* ---------------------------------------------------------------- Menu search */

/* Search: a magnifier (in the bar, and at the foot of the phone menu); the box opens beside it when clicked. */
.wp-block-navigation.picon-nav .picon-nav-search {
	margin-left: 4px;
}
.wp-block-navigation.picon-nav .picon-nav-search .wp-block-search__button {
	margin: 0;
	padding: 8px;
	color: rgba(0, 0, 0, 0.5);
	background: none;
	border: 0;
	border-radius: 0;
}
.wp-block-navigation.picon-nav .picon-nav-search .wp-block-search__button:is(:hover, :focus-visible) {
	color: #ffffff;
	background-color: #007bff;
}
.wp-block-navigation.picon-nav .picon-nav-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
}
.wp-block-navigation.picon-nav .picon-nav-search .wp-block-search__input {
	padding: 4px 12px;
	font-size: 13.6px;
	border: 1px solid #dddddd;
	border-radius: 15px;
}

/* ---------------------------------------------------------------- Menu, phones (below 600px) */

/* WordPress's full-screen menu shows every submenu open, which for Browse would be the whole album tree (~140
   albums). Show only the first level under each heading (Browse: Gallery and the top-level albums); the album
   pages lead further in. Left-aligned, on the header's #f5f5f5. */
.wp-block-navigation.picon-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	color: #333333;
	background-color: #f5f5f5;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__container,
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation-item,
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start;
	text-align: left;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__container {
	gap: 1em;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	display: none;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #333333;
	font-weight: 700;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0.25em 0 0 1em !important;
	gap: 0.5em;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #007bff;
}
.wp-block-navigation.picon-nav .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: #000000;
	font-weight: 700;
}
.wp-block-navigation.picon-nav .is-menu-open .picon-nav-search {
	margin-top: 1em;
}