/* The Related Tools panel (All Related Templates 1.14.0): used by the top menu bar's "Tools" item and by the PDF tool pages.
   Loaded only on a page that asks for a panel. Markup: includes/class-art-panel.php. Behaviour: assets/panel.js. */

/* The panel: a white card under the bar (position set by script), a heading, then up to three columns of tool cards. */
.art-panel {
	--art-panel-bg: #fefefe; --art-panel-ink: #3f332d; --art-panel-line: #e8dfda;
	--art-panel-hover: #8a4a3b; --art-panel-accent: #8a4a3b; --art-panel-hover-line: #8a4a3b; --art-panel-hover-ink: #fff; /* 1.69.0: the same colours as the homepage cards (light and dark) */
	position: fixed; z-index: 9300; box-sizing: border-box;
	width: min(720px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain;
	padding: 20px; background: var(--art-panel-bg); color: var(--art-panel-ink);
	border: 1px solid var(--art-panel-line); border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.28);
	font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.art-panel[hidden] { display: none !important; }
[data-wlcustom-dm="dark"] .art-panel { --art-panel-bg: #18202d; --art-panel-ink: #f1e9e4; --art-panel-line: #323d4f; --art-panel-accent: #e3a392; }
@supports (background: color-mix(in srgb, red, blue)) { [data-wlcustom-dm="dark"] .art-panel { --art-panel-bg: color-mix(in srgb, var(--wlcustom-dm-bg, #0a1423) 88%, #fff); } }
.art-panel * { transition: none !important; }
.art-panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--art-panel-heading, var(--art-panel-accent)); }
.art-panel-all { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--art-panel-accent); text-decoration: none; }
.art-panel-all:hover,
.art-panel-all:focus-visible { color: var(--art-panel-accent); text-decoration: underline; }
.art-panel-all:focus-visible { outline: 3px solid var(--art-panel-accent); outline-offset: 2px; }
.art-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.art-panel-card {
	display: flex; align-items: center; gap: 12px; padding: 12px 16px;
	border: 1px solid var(--art-panel-card-line, var(--art-panel-line)); border-radius: 12px;
	color: inherit; text-decoration: none;
}
.art-panel-card:hover,
.art-panel-card:focus-visible { background: var(--art-panel-hover); border-color: var(--art-panel-hover-line, var(--art-panel-accent)); color: var(--art-panel-hover-ink, var(--art-panel-ink)); }
.art-panel-card:focus-visible { outline: 3px solid var(--art-panel-accent); outline-offset: 2px; }
.art-panel-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--art-panel-icon, var(--art-panel-accent)); }
.art-panel-card:hover .art-panel-icon,
.art-panel-card:focus-visible .art-panel-icon { color: var(--art-panel-hover-ink, var(--art-panel-icon, var(--art-panel-accent))); }
/* Cut-out details in the plugin's icons take the colour of the card behind them. */
.art-panel-card .rtools-ko { fill: var(--art-panel-bg); }
.art-panel-card:hover .rtools-ko,
.art-panel-card:focus-visible .rtools-ko { fill: var(--art-panel-hover); }
.art-panel-name { display: block; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.art-panel-name::after { content: '\2192'; margin-left: 8px; color: var(--art-panel-accent); opacity: 0; }
.art-panel-card:hover .art-panel-name::after,
.art-panel-card:focus-visible .art-panel-name::after { opacity: 1; color: var(--art-panel-hover-ink, var(--art-panel-accent)); }
/* Computers: up to three equal columns, as wide as the longest name, so names stay on one line (an ellipsis if one cannot fit). */
@media (min-width: 900px) {
	.art-panel { width: max-content; max-width: calc(100vw - 24px); }
	.art-panel-grid { grid-template-columns: repeat(var(--art-panel-cols, 3), minmax(200px, 1fr)); }
	.art-panel-card { min-width: 0; }
	.art-panel-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Top menu bar "Tools" item (the class top_menu_bar_tools) ---- */

/* The old dropdown list and its arrow give way to the panel. The hamburger menu and the bottom bar's panes are untouched. */
.topnav-menu-desktop > li.top_menu_bar_tools > ul { display: none !important; }
.topnav-menu-desktop > li.top_menu_bar_tools > a::after { display: none !important; }

/* The four-square icon, placed by script right after the "Tools" link. Same small outlined circle as on the tool pages. */
.top_menu_bar_tools { position: relative; }
.art-panel-btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box; width: 19.5px; height: 19.5px; padding: 0; margin: 0;
	border: 1px solid var(--art-panel-ink, currentColor); border-radius: 50%;
	background: none; color: var(--art-panel-ink, currentColor);
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.art-panel-btn svg { width: 9px; height: 9px; }
.art-panel-btn:hover,
.art-panel-btn[aria-expanded="true"] { background: #fff551; border-color: #fff551; color: #1a1a1a; }
/* Touch screens: an invisible 48 x 48 pixel tap area around the small icon. */
@media (pointer: coarse) {
	.art-panel-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
}
/* Placement. Computer: the icon sits 8px after the label (27.5px = 8px gap + the 19.5px icon) INSIDE the link's own box, and the
   link keeps the theme's normal side padding (--topnav-menu-px) after the icon, so the theme's hover highlight (the link's
   background) wraps the icon with the same margin it has on the left of the label. Phone row: it has no hover highlight and
   its links have only 10px of padding, so the icon just takes the 27.5px at the end of the link. */
.topnav-menu-desktop > li.top_menu_bar_tools > a { padding-right: calc(var(--topnav-menu-px, 28px) + 27.5px) !important; }
.topnav-menu-desktop > li.top_menu_bar_tools > .art-panel-btn { right: var(--topnav-menu-px, 28px); }
.topnav-mob-row2-menu > li.top_menu_bar_tools > a { padding-right: 27.5px !important; }
.topnav-mob-row2-menu > li.top_menu_bar_tools > .art-panel-btn { right: 0; }