/*
 * Finding your way inside a plugin: breadcrumbs, tabs and sibling cards.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* ------------------------------------------------------------- breadcrumbs */

.ghizo-crumbs {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
}

.ghizo-crumbs a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	text-underline-offset: 3px;
}

.ghizo-crumbs a:hover,
.ghizo-crumbs a:focus-visible {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
}

.ghizo-crumbs [aria-current='page'] {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/*
 * The separator was set in the border colour, which measured 1.28:1 against the
 * page: invisible, which defeats the one job a separator has. aria-hidden keeps
 * it out of the reading order without making it decorative to the eye.
 */
.ghizo-crumbs__sep {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.55;
}

/* Free is not a lesser action, so it does not get a lesser button: same size and
   shape as Buy, in the quieter of the two brand colours. */
.ghizo-tier-buy--free {
	background: var(--wp--preset--color--navy-deep);
}

.ghizo-tier-buy--free:hover,
.ghizo-tier-buy--free:focus-visible {
	background: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------- plugin tabs */

/*
 * One plugin, its four pages. Placed under the hero rather than in the header,
 * because it is about the thing you are looking at and not about the site.
 */
.ghizo-tabs {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--20);
	padding-bottom: 0;
}

.ghizo-tabs__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding-bottom: 0.75rem;
}

.ghizo-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.ghizo-tab {
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	/* 44px of target from padding alone, so the tab is comfortable on touch
	   without a height that would detach it from the rule it sits on. */
	padding: 0.7rem 0.25rem 0.75rem;
	text-decoration: none;
	transition: color var(--ghizo-fast) var(--ghizo-ease),
		border-color var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-tab:hover,
.ghizo-tab:focus-visible {
	border-bottom-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

/* Weight and a rule, not colour alone: the current tab has to be obvious to
   somebody who cannot tell these two blues apart. */
.ghizo-tab--current,
.ghizo-tab--current:hover {
	border-bottom-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--navy-deep);
	font-weight: 650;
}

/* ---------------------------------------------------------------- siblings */

.ghizo-siblings {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-sibling {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	display: block;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease),
		transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-sibling:hover,
.ghizo-sibling:focus-visible {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.ghizo-sibling__kicker {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ghizo-sibling__name {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-top: 0.5rem;
}

.ghizo-sibling__name::after {
	content: ' \2192';
	color: var(--wp--preset--color--blue);
	display: inline-block;
	transition: transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-sibling:hover .ghizo-sibling__name::after {
	transform: translateX(3px);
}

.ghizo-sibling__text {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin-top: 0.5rem;
}

/* ------------------------------------------------------- the page's own nav */

/*
 * The breadcrumb and tab strip that sits directly under the hero.
 *
 * Every page of a plugin opens with the same hero, so the tabs link past it to
 * this strip rather than to the top. The header is sticky, so the anchor has to
 * stop short of it: without the scroll margin the strip lands underneath the
 * header and the page looks like it jumped to the wrong place.
 *
 * 5rem rather than the header's exact height because the header is 77px on a
 * desktop and 74px on a phone, and a target that clears both is worth more than
 * one that is exact at one width.
 */
.ghizo-nav-strip {
	border-bottom: 1px solid var(--wp--preset--color--line);
	scroll-margin-top: 5rem;
}